v-datepicker-lite 0.0.1 → 0.0.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 (15) hide show
  1. package/components/DatePicker.vue.d.ts +46 -0
  2. package/components/DatePickerHeader.vue.d.ts +29 -0
  3. package/components/DateView.vue.d.ts +25 -0
  4. package/components/MonthView.vue.d.ts +19 -0
  5. package/components/TimeView.vue.d.ts +37 -0
  6. package/components/WeekView.vue.d.ts +19 -0
  7. package/components/YearView.vue.d.ts +21 -0
  8. package/composables/useCalendar.d.ts +22 -0
  9. package/composables/useTime.d.ts +13 -0
  10. package/constants/icons.d.ts +5 -0
  11. package/index.d.ts +3 -0
  12. package/package.json +1 -10
  13. package/style.css +1 -0
  14. package/types/index.d.ts +61 -0
  15. package/utils/index.d.ts +14 -0
package/components/DatePicker.vue.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { DatePickerProps } from '../types';
2
+
3
+ interface Props extends DatePickerProps {
4
+ }
5
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
6
+ mode: string;
7
+ format: string;
8
+ timeFormat: string;
9
+ timeInterval: number;
10
+ }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
11
+ "update:value": (value: string | Date) => void;
12
+ change: (value: string | Date) => void;
13
+ select: (value: string | Date) => void;
14
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
15
+ mode: string;
16
+ format: string;
17
+ timeFormat: string;
18
+ timeInterval: number;
19
+ }>>> & Readonly<{
20
+ onSelect?: (value: string | Date) => any;
21
+ "onUpdate:value"?: (value: string | Date) => any;
22
+ onChange?: (value: string | Date) => any;
23
+ }>, {
24
+ timeFormat: "12h" | "24h";
25
+ timeInterval: 15 | 30 | 60;
26
+ mode: "date" | "time" | "dateTime" | "week" | "month";
27
+ format: string;
28
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
29
+ export default _default;
30
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
31
+ type __VLS_TypePropsToRuntimeProps<T> = {
32
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
33
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
34
+ } : {
35
+ type: import('vue').PropType<T[K]>;
36
+ required: true;
37
+ };
38
+ };
39
+ type __VLS_WithDefaults<P, D> = {
40
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
41
+ default: D[K];
42
+ }> : P[K];
43
+ };
44
+ type __VLS_Prettify<T> = {
45
+ [K in keyof T]: T[K];
46
+ } & {};
package/components/DatePickerHeader.vue.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import { ViewMode } from '../types';
2
+
3
+ interface Props {
4
+ currentDate: Date;
5
+ viewMode: ViewMode;
6
+ canGoPrev: boolean;
7
+ canGoNext: boolean;
8
+ }
9
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
10
+ prev: () => void;
11
+ next: () => void;
12
+ "header-click": () => void;
13
+ "current-date": () => void;
14
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
15
+ onPrev?: () => any;
16
+ onNext?: () => any;
17
+ "onHeader-click"?: () => any;
18
+ "onCurrent-date"?: () => any;
19
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
20
+ export default _default;
21
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
22
+ type __VLS_TypePropsToRuntimeProps<T> = {
23
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
24
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
25
+ } : {
26
+ type: import('vue').PropType<T[K]>;
27
+ required: true;
28
+ };
29
+ };
package/components/DateView.vue.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ interface Props {
2
+ currentDate: Date;
3
+ selectedDate: Date | null;
4
+ minDate?: string;
5
+ maxDate?: string;
6
+ disabledDates?: {
7
+ start: string;
8
+ end?: string;
9
+ }[];
10
+ }
11
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
12
+ select: (date: Date) => void;
13
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
14
+ onSelect?: (date: Date) => any;
15
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
16
+ export default _default;
17
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
18
+ type __VLS_TypePropsToRuntimeProps<T> = {
19
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
20
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
21
+ } : {
22
+ type: import('vue').PropType<T[K]>;
23
+ required: true;
24
+ };
25
+ };
package/components/MonthView.vue.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ interface Props {
2
+ currentDate: Date;
3
+ selectedDate: Date | null;
4
+ }
5
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
6
+ select: (month: number) => void;
7
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
8
+ onSelect?: (month: number) => any;
9
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
10
+ export default _default;
11
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
12
+ type __VLS_TypePropsToRuntimeProps<T> = {
13
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
14
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
15
+ } : {
16
+ type: import('vue').PropType<T[K]>;
17
+ required: true;
18
+ };
19
+ };
package/components/TimeView.vue.d.ts ADDED
@@ -0,0 +1,37 @@
1
+ interface Props {
2
+ selectedTime: Date | null;
3
+ timeFormat?: '12h' | '24h';
4
+ timeInterval?: 15 | 30 | 60;
5
+ }
6
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
7
+ timeFormat: string;
8
+ timeInterval: number;
9
+ }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
10
+ update: (time: Date) => void;
11
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
12
+ timeFormat: string;
13
+ timeInterval: number;
14
+ }>>> & Readonly<{
15
+ onUpdate?: (time: Date) => any;
16
+ }>, {
17
+ timeFormat: "12h" | "24h";
18
+ timeInterval: 15 | 30 | 60;
19
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
20
+ export default _default;
21
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
22
+ type __VLS_TypePropsToRuntimeProps<T> = {
23
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
24
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
25
+ } : {
26
+ type: import('vue').PropType<T[K]>;
27
+ required: true;
28
+ };
29
+ };
30
+ type __VLS_WithDefaults<P, D> = {
31
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
32
+ default: D[K];
33
+ }> : P[K];
34
+ };
35
+ type __VLS_Prettify<T> = {
36
+ [K in keyof T]: T[K];
37
+ } & {};
package/components/WeekView.vue.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ interface Props {
2
+ currentDate: Date;
3
+ selectedDate: Date | null;
4
+ }
5
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
6
+ select: (weekStart: Date) => void;
7
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
8
+ onSelect?: (weekStart: Date) => any;
9
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
10
+ export default _default;
11
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
12
+ type __VLS_TypePropsToRuntimeProps<T> = {
13
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
14
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
15
+ } : {
16
+ type: import('vue').PropType<T[K]>;
17
+ required: true;
18
+ };
19
+ };
package/components/YearView.vue.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ interface Props {
2
+ currentDate: Date;
3
+ selectedDate: Date | null;
4
+ }
5
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
6
+ select: (year: number) => void;
7
+ "month-select": (month: number) => void;
8
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
9
+ onSelect?: (year: number) => any;
10
+ "onMonth-select"?: (month: number) => any;
11
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
12
+ export default _default;
13
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
14
+ type __VLS_TypePropsToRuntimeProps<T> = {
15
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
16
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
17
+ } : {
18
+ type: import('vue').PropType<T[K]>;
19
+ required: true;
20
+ };
21
+ };
package/composables/useCalendar.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { ViewMode } from '../types';
2
+
3
+ export declare function useCalendar(props: any, emit: any): {
4
+ currentDate: import('vue').Ref<Date, Date>;
5
+ viewMode: import('vue').Ref<ViewMode, ViewMode>;
6
+ selectedDate: import('vue').ComputedRef<any>;
7
+ canGoPrev: import('vue').ComputedRef<boolean>;
8
+ canGoNext: import('vue').ComputedRef<boolean>;
9
+ goToPrevMonth: () => void;
10
+ goToNextMonth: () => void;
11
+ goToPrevYear: () => void;
12
+ goToNextYear: () => void;
13
+ goToPrevDecade: () => void;
14
+ goToNextDecade: () => void;
15
+ goToCurrentDate: () => void;
16
+ onHeaderClick: () => void;
17
+ onDateSelect: (date: Date) => void;
18
+ onWeekSelect: (weekStart: Date) => void;
19
+ onMonthSelect: (month: number) => void;
20
+ onYearSelect: (year: number) => void;
21
+ emitValue: (date: Date) => void;
22
+ };
package/composables/useTime.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ export declare function useTime(selectedTime: Date | null, timeFormat: '12h' | '24h', timeInterval: 15 | 30 | 60, emit: any): {
2
+ hours: import('vue').Ref<number, number>;
3
+ minutes: import('vue').Ref<number, number>;
4
+ timeOptions: import('vue').Ref<string[], string[]>;
5
+ is12HourFormat: import('vue').ComputedRef<boolean>;
6
+ initializeTime: () => void;
7
+ updateTime: (newSelectedTime: Date | null) => void;
8
+ generateTimeOptions: () => void;
9
+ getCurrentTimeString: () => string;
10
+ selectTime: (timeString: string) => void;
11
+ scrollToSelected: (timeListRef: HTMLDivElement | null) => void;
12
+ onTimeUpdate: (time: Date) => void;
13
+ };
package/constants/icons.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const datePickerChevronLeft = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z\"/><path fill=\"currentColor\" d=\"M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z\"/></g></svg>";
2
+ export declare const datePickerChevronRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z\"/><path fill=\"currentColor\" d=\"M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z\"/></g></svg>";
3
+ export declare const datePickerCalendar = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"19\" rx=\"2\" ry=\"2\"/><line x1=\"16\" y1=\"1\" x2=\"16\" y2=\"5\"/><line x1=\"8\" y1=\"1\" x2=\"8\" y2=\"5\"/><line x1=\"2\" y1=\"9\" x2=\"22\" y2=\"9\"/></svg>";
4
+ export declare const datePickerClock = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12,6 12,12 17,14\"/></svg>";
5
+ export declare const datePickerCurrentDate = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-1.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9\"/></svg>";
package/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { default as DatePicker } from './components/DatePicker.vue';
2
+
3
+ export default DatePicker;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "v-datepicker-lite",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "A lightweight Vue 3 date picker with date, time, date-time, week, and month modes",
5
5
  "type": "module",
6
6
  "author": "safdar-azeem",
@@ -30,15 +30,6 @@
30
30
  "type": "git",
31
31
  "url": "git+https://github.com/safdar-azeem/v-datepicker-lite.git"
32
32
  },
33
- "bugs": {
34
- "url": "https://github.com/safdar-azeem/v-datepicker-lite/issues"
35
- },
36
- "files": [
37
- "dist",
38
- "src",
39
- "README.md",
40
- "LICENSE"
41
- ],
42
33
  "scripts": {
43
34
  "dev": "vite",
44
35
  "build": "vue-tsc -b && vite build",
package/style.css ADDED
@@ -0,0 +1 @@
1
+ :root{--date-picker-primary: #4f46e5;--date-picker-primary-fg: #ffffff;--date-picker-text: #374151;--date-picker-border: #d1d5db;--date-picker-bg: #ffffff;--date-picker-secondary: #f7f7f9;--date-picker-secondary-dark: #eff0f3;--date-picker-disabled: #9ca3af;--date-picker-today: #fef3c7;--date-picker-radius: .375em;--date-picker-hover: #f3f4f6}.ml-auto{margin-left:auto}.date-picker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--date-picker-text)}.date-picker-content{padding:0 .5em .5em}.date-picker-table{width:100%;border-collapse:collapse;border-spacing:0;margin:0}td,th{padding:0;margin:0;border:none}.date-picker-weekdays-row th{padding:.6em 0;font-size:.78em}.date-picker-weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:500;color:var(--date-picker-disabled);padding:.25em}.date-picker-days-body tr{border:none}.date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;height:2em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:.95em;color:var(--date-picker-text)}.date-picker-day:hover{background:var(--date-picker-secondary-dark)}.date-picker-day.other-month{color:var(--date-picker-disabled)}.date-picker-day.today{background:var(--date-picker-today);font-weight:400}.date-picker-day.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-day.disabled{color:var(--date-picker-disabled);cursor:not-allowed;opacity:.5}.date-picker-day.disabled:hover{background:none}.date-picker-datetime-layout{display:flex;gap:0;width:100%}.date-picker-date-section{flex:1;height:100%}.date-picker-datetime-layout .date-picker-date-section{width:75%}.date-picker-time-section{width:100%;max-width:80px;border-left:1px solid var(--date-picker-border);display:flex;flex-direction:column}.date-picker-time-section .time-picker-container{flex:1;overflow-y:auto}.date-picker-week-table .date-picker-week-row{cursor:pointer}.date-picker-week-table .date-picker-week-row:not(.selected):hover td{background:var(--date-picker-secondary-dark)}.date-picker-week-table td{border-radius:0;padding:0}.date-picker-week-table .date-picker-day-cell .date-picker-day{border-radius:0}.date-picker-week-header{text-align:center}.date-picker-week-row .date-picker-week-number-cell{height:90%;padding-right:5px;background:var(--date-picker-secondary);color:var(--date-picker-disabled);border-bottom:1px solid var(--date-picker-border);text-align:center;width:2.5em;font-size:.8em}.date-picker-week-row:last-child .date-picker-week-number-cell{border-bottom:none}.date-picker-week-row.selected .date-picker-day{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-months-table{width:100%}.date-picker-months-body .date-picker-month-cell{padding:2px}.date-picker-month{display:flex;align-items:center;justify-content:center;width:100%;height:2.5em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:inherit;color:var(--date-picker-text)}.date-picker-month:hover{background:var(--date-picker-secondary-dark)}.date-picker-month.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-view-layout{display:flex;gap:1px;height:100%;padding-right:2px}.years-section{width:25%;min-width:60px;max-width:80px;border-right:1px solid var(--date-picker-border);display:flex;flex-direction:column;height:100%}.years-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.year-item{display:flex;align-items:center;justify-content:center;padding:.5em;border:none;background:none;cursor:pointer;font-size:.875em;color:var(--date-picker-text);transition:background-color .15s ease;white-space:nowrap;flex-shrink:0}.year-item:hover{background:var(--date-picker-secondary-dark)}.year-item.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-item.current{font-weight:600}.months-section{width:75%;display:flex;flex-direction:column;height:100%}.months-section .date-picker-months-table{overflow:auto;flex:1}.year-view-layout .months-section{padding:5px 3px;height:94.5%}.time-picker-container{height:100%;display:flex;flex-direction:column}.time-wheel{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;display:flex;flex-direction:column;border:1px solid var(--date-picker-border);border-radius:var(--date-picker-radius);background:var(--date-picker-bg);scrollbar-width:thin;scrollbar-color:var(--date-picker-border) transparent}.time-wheel::-webkit-scrollbar{width:6px}.time-wheel::-webkit-scrollbar-track{background:transparent}.time-wheel::-webkit-scrollbar-thumb{background:var(--date-picker-border);border-radius:3px}.time-wheel::-webkit-scrollbar-thumb:hover{background:var(--date-picker-disabled)}.time-option{height:30px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;font-size:.875em;color:var(--date-picker-text);flex-shrink:0}.time-option:hover{background:var(--date-picker-secondary-dark)}.time-option.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg);font-weight:500}.date-picker-time-section .time-wheel{border:none;border-radius:0;height:100%;max-height:none}.date-picker-header{display:flex;align-items:center;justify-content:space-between;padding:.45em .4em;gap:.2em;border-bottom:1px solid var(--date-picker-border)}.date-picker-nav-button{display:flex;align-items:center;justify-content:center;width:1.65em;height:1.65em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;transition:background-color .15s ease;opacity:.7}.date-picker-nav-button:hover:not(:disabled){background:var(--date-picker-secondary-dark)}.date-picker-nav-button:disabled{opacity:.5;cursor:not-allowed}.date-picker-nav-icon svg{width:1.3em;height:1.3em;fill:currentColor}.date-picker-title{font-weight:600;font-size:1em;cursor:pointer;padding:.25em .5em;border-radius:var(--date-picker-radius);transition:background-color .15s ease;border:none;background:none;color:inherit}.date-picker-title:hover{background:var(--date-picker-secondary-dark)}svg{display:block;margin:auto}
package/types/index.d.ts ADDED
@@ -0,0 +1,61 @@
1
+ export interface DisabledDateRange {
2
+ start: string
3
+ end?: string
4
+ }
5
+
6
+ export interface DatePickerProps {
7
+ value?: Date | string | null
8
+ mode?: 'date' | 'time' | 'dateTime' | 'week' | 'month'
9
+ minDate?: string
10
+ maxDate?: string
11
+ disabledDates?: DisabledDateRange[]
12
+ format?: string
13
+ disabled?: boolean
14
+ readonly?: boolean
15
+ timeFormat?: '12h' | '24h'
16
+ timeInterval?: 15 | 30 | 60
17
+ }
18
+
19
+ export interface DatePickerEmits {
20
+ 'update:value': [value: Date | string | null]
21
+ change: [value: Date | string | null]
22
+ select: [value: Date | string | null]
23
+ }
24
+
25
+ export interface CalendarDate {
26
+ date: Date
27
+ day: number
28
+ month: number
29
+ year: number
30
+ isCurrentMonth: boolean
31
+ isToday: boolean
32
+ isSelected: boolean
33
+ isDisabled: boolean
34
+ weekNumber?: number
35
+ }
36
+
37
+ export interface WeekData {
38
+ weekNumber: number
39
+ days: CalendarDate[]
40
+ isSelected: boolean
41
+ }
42
+
43
+ export interface MonthData {
44
+ month: number
45
+ year: number
46
+ name: string
47
+ isSelected: boolean
48
+ isDisabled: boolean
49
+ }
50
+
51
+ export interface YearData {
52
+ year: number
53
+ isSelected: boolean
54
+ isDisabled: boolean
55
+ isCurrent: boolean
56
+ }
57
+
58
+ export type DatePickerMode = 'date' | 'time' | 'dateTime' | 'week' | 'month'
59
+ export type ViewMode = 'date' | 'month' | 'year' | 'time'
60
+ export type TimeFormat = '12h' | '24h'
61
+ export type TimeInterval = 15 | 30 | 60
package/utils/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { CalendarDate, WeekData, MonthData, DisabledDateRange } from '../types';
2
+
3
+ export declare const datePickerFormatDate: (date: Date, format?: string) => string;
4
+ export declare const datePickerParseDate: (dateString: string) => Date | null;
5
+ export declare const datePickerIsSameDay: (date1: Date, date2: Date) => boolean;
6
+ export declare const datePickerIsSameMonth: (date1: Date, date2: Date) => boolean;
7
+ export declare const datePickerGetWeekNumber: (date: Date) => number;
8
+ export declare const datePickerGetMonthDays: (year: number, month: number) => CalendarDate[];
9
+ export declare const datePickerGetWeekData: (year: number, month: number) => WeekData[];
10
+ export declare const datePickerGetMonthsData: (year: number) => MonthData[];
11
+ export declare const datePickerIsDateDisabled: (date: Date, minDate?: string, maxDate?: string, disabledDates?: DisabledDateRange[]) => boolean;
12
+ export declare const datePickerGetYearsRange: (centerYear: number, range?: number) => number[];
13
+ export declare const datePickerMonthNames: string[];
14
+ export declare const datePickerDayNames: string[];