Update with 2.3.0 version

CHANGELOG.md

@@ -7,7 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
-## [2.2.32] - 2021-09-26
+## [2.3.0] - 2022-03-05
+
+### Fix
+
+- fixed problem with [switchToMinutesAfterSelectHour](https://github.com/pglejzer/timepicker-ui/issues/13) option
+- fixed problem with [update](https://github.com/pglejzer/timepicker-ui/issues/12) event
+- fixed problem with [animation](https://github.com/pglejzer/timepicker-ui/issues/11) option name
+- fixed problem with [iconTemplete and iconTemplateMobile](https://github.com/pglejzer/timepicker-ui/issues/9) names
+- fixed problem with [switching mobile/desktop view](https://github.com/pglejzer/timepicker-ui/issues/9)
+- fixed problem to set options with data-attributes
+
+### Change
+
+- changed option name from `selectLabelTime` to `labelTime`
+
+### Add
+
+- added [UMD version](https://github.com/pglejzer/timepicker-ui/issues/8)
+- added new options `mobileTimeLabel` to change time label on mobile version
+
+---
+
+## [2.2.3] - 2021-09-26
 
 ### Update
 

README.md

@@ -70,7 +70,7 @@ $ npm install timepicker-ui
 
 This library is using [font Roboto](https://fonts.google.com/specimen/Roboto) and [material-design icons](https://google.github.io/material-design-icons/). Basic options for all icons have been taken from material-icons. If you want to use material-icons you have to add dependencies to your project.
 
-You can alawys change icons to another package if you change options <code>iconClass</code> and <code>iconClassMobile</code> which contains templates for icons. <code>iconClass</code> and <code>iconClassMobile</code> requiare default class <code>timepicker-ui-keyboard-icon</code>.
+You can alawys change icons to another package if you change options <code>iconTemplate</code> and <code>iconTemplateMobile</code> which contains templates for icons. <code>iconTemplate</code> and <code>iconTemplateMobile</code> requiare default class <code>timepicker-ui-keyboard-icon</code>.
 
 ---
 
@@ -93,17 +93,17 @@ We provide CSS styles built-in but sometimes if you don't use some normalize/res
 In your project you have to import timepicker from package to your JavaScript file.
 
 ```javascript
-import { TimepickerUI } from 'timepicker-ui';
+import { TimepickerUI } from "timepicker-ui";
 ```
 
 #### UMD
 
-In your html file you have put script tag with path to `timepicker-ui.js` file. After installing by npm/yarn you can copy the file from node_modules or add a path to this file.
+In your html file you have put script tag with path to `timepicker-ui.umd.js` file. After installing by npm/yarn you can copy the file from node_modules or add a path to this file.
 
 ```html
-<script src="timepicker-ui.js"></script>
-<script src="node_modules/path/timepicker-ui.js"></script>
-<script src="/path/timepicker-ui.js"></script>
+<script src="timepicker-ui.umd.js"></script>
+<script src="node_modules/path/timepicker-ui.umd.js"></script>
+<script src="/path/timepicker-ui.umd.js"></script>
 ```
 
 ###### Information
@@ -125,13 +125,23 @@ timepicker-ui has to be created with a new instance with key `new`. This instanc
 #### JavaScript
 
 ```javascript
-const DOMElement = document.querySelector('.timepicker-ui');
+const DOMElement = document.querySelector(".timepicker-ui");
 const options = {};
 const newTimepicker = new TimepickerUI(DOMElement, options);
 ```
 
 By default initialization of timepicker is started when you click on input. If you want to change it you have to add `data-open` attribute with selector inside and this element has to be inside wrapper.
 
+To initalize a timepicker with UMD version you have to init a window object with `tui`.
+
+```js
+const DOMElement = document.querySelector(".timepicker-ui");
+const options = {};
+const newTimepicker = new window.tui.TimepickerUI(DOMElement, options);
+
+newTimepicker.create();
+```
+
 #### HTML
 
 ```html
@@ -144,7 +154,7 @@ By default initialization of timepicker is started when you click on input. If y
 #### JavaScript
 
 ```javascript
-const timepicker = document.querySelector('.default-class');
+const timepicker = document.querySelector(".default-class");
 const initTimepicker = new TimepickerUI(timepicker);
 
 timepicker.create();
@@ -173,8 +183,8 @@ You can set options by JavaScript or by data-attribute which `attribute` is a ke
 #### JavaScript
 
 ```javascript
-const timepicker = document.querySelector('.default-class');
-const options = { okLabel: 'test', amLabel: 'test1', backdrop: false };
+const timepicker = document.querySelector(".default-class");
+const options = { okLabel: "test", amLabel: "test1", backdrop: false };
 const initTimepicker = new TimepickerUI(timepicker, options);
 
 timepicker.create();
@@ -292,7 +302,7 @@ export default {
   </thead>
   <tbody>
     <tr>
-      <td scope="row">animated</td>
+      <td scope="row">animation</td>
       <td>true</td>
       <td>boolean</td>
       <td>Turn on/off animations on picker on start/close</td>
@@ -323,9 +333,9 @@ export default {
     </tr>
     <tr>
       <td scope="row">clockType</td>
-      <td>12</td>
+      <td>12h</td>
       <td>string</td>
-      <td>You can set type of clock, it contains 2 versions: 12h and 24h</td>
+      <td>You can set type of clock, it contains 2 versions: 12h and 24h.</td>
     </tr> 
     <tr>
       <td scope="row">editable</td>
@@ -375,11 +385,17 @@ export default {
       <td>string</td>
       <td>You can set custom text to minute label on mobile version</td>
     </tr>  
-     <tr>
+    <tr>
       <td scope="row">mobile</td>
       <td>false</td>
       <td>boolean</td>
       <td>Turn on mobile version</td>
+    </tr>  
+    <tr>
+      <td scope="row">mobileTimeLabel</td>
+      <td>Enter Time</td>
+      <td>string</td>
+      <td>You can set custom text to time label on mobile version</td>
     </tr>  
      <tr>
       <td scope="row">okLabel</td>
@@ -400,10 +416,10 @@ export default {
       <td>You can set on/off defaults events to clock face events</td>
     </tr> 
      <tr>
-      <td scope="row">selectTimeLabel</td>
+      <td scope="row">mobileTimeLabel</td>
       <td>Select Time</td>
       <td>string</td>
-      <td>You can set custom text to select time label on desktop version</td>
+      <td>You can set custom text to time label on desktop version</td>
     </tr>   
     <tr>
       <td scope="row">switchToMinutesAfterSelectHour</td>
@@ -412,15 +428,15 @@ export default {
       <td>Turn on/off switch to minutes by select hour</td>
     </tr>   
     <tr>
-      <td scope="row">iconClass</td>
+      <td scope="row">iconTemplate</td>
        <td>
        &lt;i class="material-icons timepicker-ui-keyboard-icon"> keyboard &lt;/i&gt;
       </td>
        <td>string</td>
       <td>You can set default template to switch desktop.This options is using by default material design icon</td>
     </tr>  
      <tr>
-      <td scope="row">iconClassMobile</td>
+      <td scope="row">iconTemplateMobile</td>
       <td>&lt;i class="material-icons timepicker-ui-keyboard-icon"> schedule  &lt;/i&gt;</td>
       <td>string</td>
       <td>You can set default template to switch mobile. This options is using by default material design icon</td>
@@ -452,7 +468,7 @@ Methods are custom function what can be used to manually change the behavior of
 #### JavaScript
 
 ```javascript
-const timepicker = document.querySelector('timepicker-ui-test');
+const timepicker = document.querySelector("timepicker-ui-test");
 const init = new TimepickerUI(timepicker);
 
 timepicker.create();
@@ -500,12 +516,12 @@ Events are custom events triggered when you add some event listeners to your tim
 #### JavaScript
 
 ```javascript
-const timepicker = document.querySelector('timepicker-ui-test');
+const timepicker = document.querySelector("timepicker-ui-test");
 const init = new TimepickerUI(timepicker);
 
 timepicker.create();
 
-timepicker.addEventListener('show', (event) => console.log(event.detail));
+timepicker.addEventListener("show", (event) => console.log(event.detail));
 ```
 
 #### Table with events

dist/types/index.d.ts

@@ -7,7 +7,7 @@ declare type optionTypes = {
     editable?: boolean;
     enableScrollbar?: boolean;
     enableSwitchIcon?: boolean;
-    enterTimeLabel?: string;
+    mobileTimeLabel?: string;
     focusInputAfterCloseModal?: boolean;
     hourMobileLabel?: string;
     iconTemplate?: string;
@@ -19,7 +19,7 @@ declare type optionTypes = {
     okLabel?: string;
     pmLabel?: string;
     preventDefault?: boolean;
-    selectTimeLabel?: string;
+    timeLabel?: string;
     switchToMinutesAfterSelectHour?: boolean;
     theme?: 'basic' | 'crane-straight' | 'crane-radius';
     clockType?: '12h' | '24h';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timepicker-ui",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "timepicker-ui is an easy library with timepicker. Created with TypeScript based on Material Design from Google.",
   "main": "./dist/timepicker-ui.js",
   "module": "./dist/timepicker-ui.esm.js",