v-datepicker-lite 0.0.4 → 0.0.6

package/README.md

@@ -29,6 +29,8 @@ yarn add v-datepicker-lite
 pnpm add v-datepicker-lite
 ```
 
+> Don't forget to follow me on [GitHub](https://github.com/safdar-azeem)!
+
 ## Usage
 
 Below are examples demonstrating different configurations of the Vue DatePicker component.
@@ -162,6 +164,29 @@ const selectedDate = (ref < Date) | (null > null)
 </template>
 ```
 
+### 6. Standalone Time Picker
+
+A time picker component for selecting time only, with dropdown interface.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { TimePicker } from 'v-datepicker-lite'
+import 'v-datepicker-lite/style.css'
+const selectedTime = (ref < string) | (null > null)
+</script>
+<template>
+   <div>
+      <h3>Time Picker</h3>
+      <TimePicker v-model:model-value="selectedTime" time-format="12h" />
+      <p>
+         Selected:
+         {{ selectedTime || 'None' }}
+      </p>
+   </div>
+</template>
+```
+
 ## Props
 
 | Prop            | Type                     | Default        | Description                                                       |
@@ -177,6 +202,13 @@ const selectedDate = (ref < Date) | (null > null)
 | `disabled`      | `boolean`                | `false`        | Disables the date picker.                                         |
 | `readonly`      | `boolean`                | `false`        | Makes the date picker read-only.                                  |
 
+## Props - TimePicker
+
+| Prop         | Type             | Default | Description                                              |
+| ------------ | ---------------- | ------- | -------------------------------------------------------- |
+| `modelValue` | `string \| null` | `null`  | v-model binding for the selected time (format: `HH:mm`). |
+| `timeFormat` | `string`         | `'12h'` | Time format: `12h` or `24h`.                             |
+
 ## Events
 
 | Event          | Payload Type             | Description                              |
@@ -185,6 +217,12 @@ const selectedDate = (ref < Date) | (null > null)
 | `change`       | `Date \| string \| null` | Emitted when the selected value changes. |
 | `select`       | `Date \| string \| null` | Emitted when a date/time is selected.    |
 
+## Events - TimePicker
+
+| Event               | Payload Type | Description                             |
+| ------------------- | ------------ | --------------------------------------- |
+| `update:modelValue` | `string`     | Emitted when the selected time changes. |
+
 ## Styling
 
 Customize the appearance using the following CSS variables defined in `style.css`:
@@ -200,6 +238,13 @@ Customize the appearance using the following CSS variables defined in `style.css
    --date-picker-disabled: #000000b4;
    --date-picker-today: #00000010;
    --date-picker-radius: 0.375em;
+   --timer-picker-bg: white;
+   --timer-picker-input-bg: transparent;
+   --timer-picker-input-border: #00000020;
+   --timer-picker-input-text: inherit;
+   --timer-picker-input-text-size: 0.875em;
+   --timer-picker-input-border-radius: 0.375em;
+   --timer-picker-input-padding: 0.5em 0.75em;
 }
 ```
 

package/components/time-picker/TimePicker.vue.d.ts

@@ -0,0 +1,36 @@
+interface Props {
+    modelValue?: string | null;
+    timeFormat?: '12h' | '24h';
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    modelValue: any;
+    timeFormat: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    modelValue: any;
+    timeFormat: string;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    timeFormat: "12h" | "24h";
+    modelValue: string | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/time-picker/TimePickerDropdown.vue.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    selectedHour: number;
+    selectedMinute: number;
+    selectedPeriod: 'AM' | 'PM';
+    is12Hour: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {
+    scrollToSelected: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "select-hour": (hour: number) => void;
+    "select-minute": (minute: number) => void;
+    "select-period": (period: "AM" | "PM") => void;
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    "onSelect-hour"?: (hour: number) => any;
+    "onSelect-minute"?: (minute: number) => any;
+    "onSelect-period"?: (period: "AM" | "PM") => any;
+    onClose?: () => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/time-picker/TimePickerInput.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    hour: number;
+    minute: number;
+    period: 'AM' | 'PM';
+    is12Hour: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggle: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    onToggle?: () => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/index.d.ts

@@ -1,3 +1,5 @@
 import { default as DatePicker } from './components/DatePicker.vue';
+import { default as TimePicker } from './components/time-picker/TimePicker.vue';
 
 export default DatePicker;
+export { TimePicker };