@manik02/vue3-timepicker 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +2 -0
  2. package/dist/TimePicker/TimePicker.vue.d.ts +1 -0
  3. package/dist/stories/TimePicker.stories.d.ts +4 -0
  4. package/dist/vue-timepicker.css +1 -1
  5. package/dist/vue-timepicker.js +600 -594
  6. package/dist/vue-timepicker.umd.cjs +1 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -3,6 +3,8 @@
3
3
  [![Live Playground](https://img.shields.io/badge/Live-Playground-4f46e5?style=for-the-badge&logo=storybook&logoColor=white)](https://manos02.github.io/vue3-time-picker/) [![npm version](https://img.shields.io/npm/v/@manik02/vue3-timepicker?style=for-the-badge)](https://www.npmjs.com/package/@manik02/vue3-timepicker) [![License: MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)
4
4
 
5
5
  A flexible, customisable timepicker component for Vue 3 with TypeScript support.
6
+ If this project helps you, a [GitHub star](https://github.com/manos02/vue3-time-picker) would be greatly appreciated.
7
+ Found a bug? Please open an issue on [GitHub](https://github.com/manos02/vue3-time-picker/issues).
6
8
  | Demo | Default | Dark |
7
9
  | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
8
10
  | ![Demo](https://raw.githubusercontent.com/manos02/vue3-time-picker/main/assets/demo.gif) | ![Default](https://raw.githubusercontent.com/manos02/vue3-time-picker/main/assets/screenshot-default.png) | ![Dark](https://raw.githubusercontent.com/manos02/vue3-time-picker/main/assets/screenshot-dark.png) |
package/dist/TimePicker/TimePicker.vue.d.ts CHANGED
@@ -206,6 +206,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
206
206
  readonly maxInputWidth: string | number | undefined;
207
207
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
208
208
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
209
+ firstInputRef: HTMLInputElement;
209
210
  secondInputRef: HTMLInputElement;
210
211
  }, HTMLDivElement>;
211
212
  export default _default;
package/dist/stories/TimePicker.stories.d.ts CHANGED
@@ -208,6 +208,7 @@ declare const meta: {
208
208
  readonly maxInputWidth: string | number | undefined;
209
209
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
210
210
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
211
+ firstInputRef: HTMLInputElement;
211
212
  secondInputRef: HTMLInputElement;
212
213
  }, HTMLDivElement>;
213
214
  tags: string[];
@@ -455,6 +456,7 @@ declare const meta: {
455
456
  readonly maxInputWidth: string | number | undefined;
456
457
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
457
458
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
459
+ firstInputRef: HTMLInputElement;
458
460
  secondInputRef: HTMLInputElement;
459
461
  }, HTMLDivElement>>) => {
460
462
  components: {
@@ -665,6 +667,7 @@ declare const meta: {
665
667
  readonly maxInputWidth: string | number | undefined;
666
668
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
667
669
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
670
+ firstInputRef: HTMLInputElement;
668
671
  secondInputRef: HTMLInputElement;
669
672
  }, HTMLDivElement>;
670
673
  };
@@ -876,6 +879,7 @@ declare const meta: {
876
879
  readonly maxInputWidth: string | number | undefined;
877
880
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
878
881
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
882
+ firstInputRef: HTMLInputElement;
879
883
  secondInputRef: HTMLInputElement;
880
884
  }, HTMLDivElement>>;
881
885
  single: import('vue').Ref<string, string>;
package/dist/vue-timepicker.css CHANGED
@@ -1 +1 @@
1
- .timepicker-shell,.timepicker-shell *,.timepicker-shell *:before,.timepicker-shell *:after{box-sizing:border-box}.timepicker-shell{position:relative;display:inline-block;width:var(--vtp-component-width, auto);font-family:var(--vtp-font-family, inherit);font-size:var(--vtp-font-size, inherit);color:var(--vtp-color, inherit)}.timepicker-shell[data-size=xs]{--vtp-font-size: .75rem;--vtp-padding: .2rem .3rem;--vtp-option-padding: .15rem .3rem;--vtp-dropdown-radius: .35rem;--vtp-option-height: 1.7rem}.timepicker-shell[data-size=sm]{--vtp-font-size: .875rem;--vtp-padding: .25rem .375rem;--vtp-option-padding: .2rem .375rem;--vtp-dropdown-radius: .4rem;--vtp-option-height: 1.85rem}.timepicker-shell[data-size=md]{--vtp-font-size: 1rem;--vtp-padding: .375rem .5rem;--vtp-option-padding: .3rem .5rem;--vtp-dropdown-radius: .5rem;--vtp-option-height: 2rem}.timepicker-shell[data-size=lg]{--vtp-font-size: 1.125rem;--vtp-padding: .5rem .65rem;--vtp-option-padding: .4rem .65rem;--vtp-dropdown-radius: .6rem;--vtp-option-height: 2.15rem}.timepicker-shell[data-size=xl]{--vtp-font-size: 1.25rem;--vtp-padding: .6rem .8rem;--vtp-option-padding: .5rem .8rem;--vtp-dropdown-radius: .7rem;--vtp-option-height: 2.3rem}.timepicker-shell__input{display:inline-flex;align-items:center;gap:.25rem;padding:var(--vtp-padding, .375rem .5rem);border-radius:var(--vtp-border-radius, 6px);background:var(--vtp-bg, #fff);border:1px solid var(--vtp-border, #ccc);color:var(--vtp-color, inherit);transition:border-color .15s,box-shadow .15s}.timepicker-shell__input:focus-within{border-color:var(--vtp-focus-border, #66afe9);box-shadow:var(--vtp-focus-ring, 0 0 0 2px rgba(102, 175, 233, .3))}.timepicker-shell__input--error{border-color:var(--vtp-error-border, #e74c3c);box-shadow:var(--vtp-error-ring, 0 0 0 2px rgba(231, 76, 60, .15))}.timepicker-shell__input--disabled{opacity:.6;cursor:not-allowed}.timepicker-shell__input--disabled .timepicker-field{cursor:not-allowed}.timepicker-shell__input .timepicker-separator{color:var(--vtp-separator-color, currentColor);opacity:.5;flex:0 0 auto;-webkit-user-select:none;user-select:none;line-height:1}.timepicker-field{flex:0 0 auto;width:auto;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:0;margin:0;text-align:center}.timepicker-field:focus{outline:none}.timepicker-field::placeholder{color:var(--vtp-color, inherit);opacity:.4}.timepicker-dropdown{display:inline-block}.timepicker-dropdown__panel{position:relative;min-width:44px;max-height:var(--vtp-dropdown-max-height, 220px);overflow-y:auto;overflow-x:hidden;padding:0;border:1px solid var(--vtp-dropdown-border, var(--vtp-border, #ccc));border-radius:var(--vtp-dropdown-radius, .5rem);background:var(--vtp-dropdown-bg, var(--vtp-bg, #fff));box-shadow:var(--vtp-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .08));outline:none;scroll-behavior:auto;scroll-snap-type:y proximity;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scrollbar-gutter:auto}.timepicker-dropdown--short .timepicker-dropdown__panel{min-width:32px}.timepicker-dropdown__panel::-webkit-scrollbar{display:none}.timepicker-option{display:flex;align-items:center;justify-content:center;min-height:var(--vtp-option-height, 2rem);padding:var(--vtp-option-padding, .3rem .5rem);border-radius:var(--vtp-option-radius, 4px);cursor:pointer;line-height:1;text-align:center;scroll-snap-align:center;transition:background .14s ease,color .14s ease,transform .14s ease,opacity .14s ease}.timepicker-dropdown--short .timepicker-option{min-height:calc(var(--vtp-option-height, 2rem) * .9);padding:.2rem .3rem}.timepicker-option--focused,.timepicker-option:hover{background:var(--vtp-option-hover-bg, rgba(0, 0, 0, .06))}.timepicker-option--active{background:var(--vtp-option-active-bg, #e8f0fe);color:var(--vtp-option-active-color, inherit);font-weight:var(--vtp-option-active-weight, 600);transform:scale(1.02)}.timepicker-option--disabled{opacity:.35;pointer-events:none}.vtp-cols{display:inline-flex;flex-wrap:nowrap;gap:0}
1
+ .timepicker-shell,.timepicker-shell *,.timepicker-shell *:before,.timepicker-shell *:after{box-sizing:border-box}.timepicker-shell{position:relative;display:inline-block;width:var(--vtp-component-width, auto);font-family:var(--vtp-font-family, inherit);font-size:var(--vtp-font-size, inherit);color:var(--vtp-color, inherit)}.timepicker-shell[data-size=xs]{--vtp-font-size: .75rem;--vtp-padding: .2rem .3rem;--vtp-option-padding: .15rem .3rem;--vtp-dropdown-radius: .35rem;--vtp-option-height: 1.7rem}.timepicker-shell[data-size=sm]{--vtp-font-size: .875rem;--vtp-padding: .25rem .375rem;--vtp-option-padding: .2rem .375rem;--vtp-dropdown-radius: .4rem;--vtp-option-height: 1.85rem}.timepicker-shell[data-size=md]{--vtp-font-size: 1rem;--vtp-padding: .375rem .5rem;--vtp-option-padding: .3rem .5rem;--vtp-dropdown-radius: .5rem;--vtp-option-height: 2rem}.timepicker-shell[data-size=lg]{--vtp-font-size: 1.125rem;--vtp-padding: .5rem .65rem;--vtp-option-padding: .4rem .65rem;--vtp-dropdown-radius: .6rem;--vtp-option-height: 2.15rem}.timepicker-shell[data-size=xl]{--vtp-font-size: 1.25rem;--vtp-padding: .6rem .8rem;--vtp-option-padding: .5rem .8rem;--vtp-dropdown-radius: .7rem;--vtp-option-height: 2.3rem}.timepicker-shell__input{display:inline-flex;align-items:center;gap:.25rem;padding:var(--vtp-padding, .375rem .5rem);border-radius:var(--vtp-border-radius, 6px);background:var(--vtp-bg, #fff);border:1px solid var(--vtp-border, #ccc);color:var(--vtp-color, inherit);transition:border-color .15s,box-shadow .15s}.timepicker-shell__input:focus-within{border-color:var(--vtp-focus-border, #66afe9);box-shadow:var(--vtp-focus-ring, 0 0 0 2px rgba(102, 175, 233, .3))}.timepicker-shell__input--error{border-color:var(--vtp-error-border, #e74c3c);box-shadow:var(--vtp-error-ring, 0 0 0 2px rgba(231, 76, 60, .15))}.timepicker-shell__input--disabled{opacity:.6;cursor:not-allowed}.timepicker-shell__input--disabled .timepicker-field{cursor:not-allowed}.timepicker-shell__input .timepicker-separator{color:var(--vtp-separator-color, currentColor);opacity:.5;flex:0 0 auto;-webkit-user-select:none;user-select:none;line-height:1}.timepicker-field{flex:0 0 auto;width:auto;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:0;margin:0;text-align:center}.timepicker-field:focus{outline:none}.timepicker-field::placeholder{color:var(--vtp-color, inherit);opacity:.4}.timepicker-popovers{position:absolute;top:calc(100% + .25rem);left:0;z-index:1000}.timepicker-dropdown{display:inline-block}.timepicker-dropdown__panel{position:relative;min-width:44px;max-height:var(--vtp-dropdown-max-height, 220px);overflow-y:auto;overflow-x:hidden;padding:0;border:1px solid var(--vtp-dropdown-border, var(--vtp-border, #ccc));border-radius:var(--vtp-dropdown-radius, .5rem);background:var(--vtp-dropdown-bg, var(--vtp-bg, #fff));box-shadow:var(--vtp-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .08));outline:none;scroll-behavior:auto;scroll-snap-type:y proximity;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scrollbar-gutter:auto}.timepicker-dropdown--short .timepicker-dropdown__panel{min-width:32px}.timepicker-dropdown__panel::-webkit-scrollbar{display:none}.timepicker-option{display:flex;align-items:center;justify-content:center;min-height:var(--vtp-option-height, 2rem);padding:var(--vtp-option-padding, .3rem .5rem);border-radius:var(--vtp-option-radius, 4px);cursor:pointer;line-height:1;text-align:center;scroll-snap-align:center;transition:background .14s ease,color .14s ease,transform .14s ease,opacity .14s ease}.timepicker-dropdown--short .timepicker-option{min-height:calc(var(--vtp-option-height, 2rem) * .9);padding:.2rem .3rem}.timepicker-option--focused,.timepicker-option:hover{background:var(--vtp-option-hover-bg, rgba(0, 0, 0, .06))}.timepicker-option--active{background:var(--vtp-option-active-bg, #e8f0fe);color:var(--vtp-option-active-color, inherit);font-weight:var(--vtp-option-active-weight, 600);transform:scale(1.02)}.timepicker-option--disabled{opacity:.35;pointer-events:none}.vtp-cols{display:inline-flex;flex-wrap:nowrap;gap:0}