@codeandfunction/callaloo 5.16.0 → 5.17.0

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 (33) hide show
  1. package/dist/callaloo.global.js +1 -1
  2. package/dist/chunks/CLCalendar.vue_vue_type_style_index_0_lang-DUc5dHAZ.js +2 -0
  3. package/dist/components/Buttons/CLButton/CLButton.vue.d.ts +4 -4
  4. package/dist/components/Containers/CLCard/CLCard.vue.d.ts +2 -2
  5. package/dist/components/Containers/CLCarousel/CLCarousel.vue.d.ts +1 -1
  6. package/dist/components/Containers/CLDrawer/CLDrawer.vue.d.ts +2 -2
  7. package/dist/components/Form/CLCalendar/CLCalendar.css +1 -1
  8. package/dist/components/Form/CLCalendar/CLCalendar.js +1 -1
  9. package/dist/components/Form/CLCalendar/CLCalendar.vue.d.ts +14 -11
  10. package/dist/components/Form/CLCheckbox/CLCheckbox.vue.d.ts +3 -3
  11. package/dist/components/Form/CLInput/CLInput.vue.d.ts +3 -3
  12. package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.js +1 -1
  13. package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.vue.d.ts +25 -23
  14. package/dist/components/Form/CLInputTimePicker/CLInputTimePicker.vue.d.ts +10 -10
  15. package/dist/components/Form/CLInputTimePicker/index.d.ts +10 -10
  16. package/dist/components/Form/CLTimePicker/CLTimePicker.vue.d.ts +1 -1
  17. package/dist/components/Form/CLTimePicker/index.d.ts +1 -1
  18. package/dist/components/Indicators/CLBanner/CLBanner.vue.d.ts +2 -2
  19. package/dist/components/Loading/CLSkeleton/CLSkeleton.vue.d.ts +2 -2
  20. package/dist/components/Modals/CLModal/CLModal.vue.d.ts +1 -1
  21. package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js +1 -1
  22. package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.vue.d.ts +24 -18
  23. package/dist/components/Modals/CLModalTimePicker/CLModalTimePicker.vue.d.ts +5 -5
  24. package/dist/components/Modals/CLModalTimePicker/index.d.ts +5 -5
  25. package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.vue.d.ts +9 -9
  26. package/dist/components/Popups/CLToast/CLToast.vue.d.ts +1 -1
  27. package/dist/composables/useDatePicker.d.ts +31 -21
  28. package/dist/composables/useDatePicker.js +1 -1
  29. package/dist/index.d.ts +1 -1
  30. package/dist/styles.css +1 -1
  31. package/dist/types.d.ts +1 -0
  32. package/package.json +1 -1
  33. package/dist/chunks/CLCalendar.vue_vue_type_style_index_0_lang-PiGGhTHo.js +0 -2
@@ -1,5 +1,8 @@
1
1
  import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLOrientation, CLSizes } from '../../../index.ts';
2
+ import { CLAllowedDates } from '../../../composables/useDatePicker';
2
3
  export interface CLModalDatePickerProps {
4
+ /** Allowed dates or range of dates that can be selected. When specified, all other dates appear disabled and the picker allows single date selection. */
5
+ allowedDates?: CLAllowedDates;
3
6
  /** Sets the aria-label on the trigger button. It should be used when there is no label present. */
4
7
  buttonAriaLabel?: string;
5
8
  /** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
@@ -68,18 +71,19 @@ declare const _default: import('vue').DefineComponent<{
68
71
  start: string | null;
69
72
  } | null) => any) | undefined;
70
73
  }>, {
71
- fluid: boolean;
72
- testId: string;
73
- name: string;
74
74
  label: string;
75
75
  title: string;
76
+ allowedDates: CLAllowedDates;
77
+ isRange: boolean;
78
+ name: string;
79
+ fluid: boolean;
80
+ testId: string;
76
81
  onFocus: CLGenericFocusFunction;
77
82
  onBlur: CLGenericFocusFunction;
78
83
  onChange: CLGenericFunction;
79
84
  required: boolean;
80
85
  busy: boolean;
81
86
  disabled: boolean;
82
- isRange: boolean;
83
87
  orientation: CLOrientation;
84
88
  buttonAriaLabel: string;
85
89
  buttonBorderRadius: CLBorderRadius;
@@ -92,13 +96,13 @@ declare const _default: import('vue').DefineComponent<{
92
96
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
93
97
  calendarRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
94
98
  modelValue?: {
95
- end: import('../../../composables/useDatePicker').ISODate | null;
96
- start: import('../../../composables/useDatePicker').ISODate | null;
99
+ end: import('../../../index.ts').CLISODate | null;
100
+ start: import('../../../index.ts').CLISODate | null;
97
101
  } | null;
98
102
  } & import('../../Form/CLCalendar/CLCalendar.vue').CLCalendarProps> & Readonly<{
99
103
  "onUpdate:modelValue"?: ((value: {
100
- end: import('../../../composables/useDatePicker').ISODate | null;
101
- start: import('../../../composables/useDatePicker').ISODate | null;
104
+ end: import('../../../index.ts').CLISODate | null;
105
+ start: import('../../../index.ts').CLISODate | null;
102
106
  } | null) => any) | undefined;
103
107
  "onDate-select"?: ((date: string) => any) | undefined;
104
108
  }>, {
@@ -110,18 +114,19 @@ declare const _default: import('vue').DefineComponent<{
110
114
  reset: () => void;
111
115
  }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
112
116
  "update:modelValue": (value: {
113
- end: import('../../../composables/useDatePicker').ISODate | null;
114
- start: import('../../../composables/useDatePicker').ISODate | null;
117
+ end: import('../../../index.ts').CLISODate | null;
118
+ start: import('../../../index.ts').CLISODate | null;
115
119
  } | null) => any;
116
120
  "date-select": (date: string) => any;
117
121
  }, import('vue').PublicProps, {
122
+ width: string;
123
+ allowedDates: CLAllowedDates;
124
+ isRange: boolean;
118
125
  color: CLColors;
119
126
  fluid: boolean;
120
127
  testId: string;
121
- width: string;
122
128
  busy: boolean;
123
129
  disabled: boolean;
124
- isRange: boolean;
125
130
  }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
126
131
  P: {};
127
132
  B: {};
@@ -131,13 +136,13 @@ declare const _default: import('vue').DefineComponent<{
131
136
  Defaults: {};
132
137
  }, Readonly<{
133
138
  modelValue?: {
134
- end: import('../../../composables/useDatePicker').ISODate | null;
135
- start: import('../../../composables/useDatePicker').ISODate | null;
139
+ end: import('../../../index.ts').CLISODate | null;
140
+ start: import('../../../index.ts').CLISODate | null;
136
141
  } | null;
137
142
  } & import('../../Form/CLCalendar/CLCalendar.vue').CLCalendarProps> & Readonly<{
138
143
  "onUpdate:modelValue"?: ((value: {
139
- end: import('../../../composables/useDatePicker').ISODate | null;
140
- start: import('../../../composables/useDatePicker').ISODate | null;
144
+ end: import('../../../index.ts').CLISODate | null;
145
+ start: import('../../../index.ts').CLISODate | null;
141
146
  } | null) => any) | undefined;
142
147
  "onDate-select"?: ((date: string) => any) | undefined;
143
148
  }>, {
@@ -148,13 +153,14 @@ declare const _default: import('vue').DefineComponent<{
148
153
  initializeDraft: () => void;
149
154
  reset: () => void;
150
155
  }, {}, {}, {}, {
156
+ width: string;
157
+ allowedDates: CLAllowedDates;
158
+ isRange: boolean;
151
159
  color: CLColors;
152
160
  fluid: boolean;
153
161
  testId: string;
154
- width: string;
155
162
  busy: boolean;
156
163
  disabled: boolean;
157
- isRange: boolean;
158
164
  }> | null;
159
165
  }, HTMLDivElement>;
160
166
  export default _default;
@@ -56,11 +56,11 @@ declare const _default: import('vue').DefineComponent<{
56
56
  } & CLModalTimePickerProps> & Readonly<{
57
57
  "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
58
58
  }>, {
59
- fluid: boolean;
60
- testId: string;
61
- name: string;
62
59
  label: string;
63
60
  title: string;
61
+ name: string;
62
+ fluid: boolean;
63
+ testId: string;
64
64
  onFocus: CLGenericFocusFunction;
65
65
  onBlur: CLGenericFocusFunction;
66
66
  onChange: CLGenericFunction;
@@ -97,10 +97,10 @@ declare const _default: import('vue').DefineComponent<{
97
97
  "update:modelValue": (value: string | null) => any;
98
98
  "time-select": (time: string) => any;
99
99
  }, import('vue').PublicProps, {
100
+ width: string;
100
101
  color: CLColors;
101
102
  fluid: boolean;
102
103
  testId: string;
103
- width: string;
104
104
  use24Hour: boolean;
105
105
  busy: boolean;
106
106
  disabled: boolean;
@@ -127,10 +127,10 @@ declare const _default: import('vue').DefineComponent<{
127
127
  initializeDraft: () => void;
128
128
  reset: () => void;
129
129
  }, {}, {}, {}, {
130
+ width: string;
130
131
  color: CLColors;
131
132
  fluid: boolean;
132
133
  testId: string;
133
- width: string;
134
134
  use24Hour: boolean;
135
135
  busy: boolean;
136
136
  disabled: boolean;
@@ -8,11 +8,11 @@ export declare const CLModalTimePicker: import('vue').DefineComponent<{
8
8
  } & import('./CLModalTimePicker.vue').CLModalTimePickerProps> & Readonly<{
9
9
  "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
10
10
  }>, {
11
- fluid: boolean;
12
- testId: string;
13
- name: string;
14
11
  label: string;
15
12
  title: string;
13
+ name: string;
14
+ fluid: boolean;
15
+ testId: string;
16
16
  onFocus: import('../../..').CLGenericFocusFunction;
17
17
  onBlur: import('../../..').CLGenericFocusFunction;
18
18
  onChange: import('../../..').CLGenericFunction;
@@ -49,10 +49,10 @@ export declare const CLModalTimePicker: import('vue').DefineComponent<{
49
49
  "update:modelValue": (value: string | null) => any;
50
50
  "time-select": (time: string) => any;
51
51
  }, import('vue').PublicProps, {
52
+ width: string;
52
53
  color: import('@codeandfunction/callaloo-tokens').CLColors;
53
54
  fluid: boolean;
54
55
  testId: string;
55
- width: string;
56
56
  use24Hour: boolean;
57
57
  busy: boolean;
58
58
  disabled: boolean;
@@ -79,10 +79,10 @@ export declare const CLModalTimePicker: import('vue').DefineComponent<{
79
79
  initializeDraft: () => void;
80
80
  reset: () => void;
81
81
  }, {}, {}, {}, {
82
+ width: string;
82
83
  color: import('@codeandfunction/callaloo-tokens').CLColors;
83
84
  fluid: boolean;
84
85
  testId: string;
85
- width: string;
86
86
  use24Hour: boolean;
87
87
  busy: boolean;
88
88
  disabled: boolean;
@@ -126,18 +126,18 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
126
126
  $emit: (event: string, ...args: any[]) => void;
127
127
  $el: any;
128
128
  $options: import('vue').ComponentOptionsBase<Readonly<import('../../Buttons/CLButton/CLButton.vue').CLButtonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
129
+ width: string;
130
+ height: string;
131
+ form: string;
132
+ title: string;
129
133
  size: CLSizes;
130
134
  color: CLColors;
131
135
  variant: CLColorVariants;
132
136
  rounded: boolean;
133
137
  testId: string;
134
138
  type: import('../../../types').CLButtonTypes;
135
- form: string;
136
- title: string;
137
139
  onClick: (event?: Event) => void;
138
140
  target: import('@codeandfunction/callaloo-types').CLLinkTarget;
139
- width: string;
140
- height: string;
141
141
  borderRadius: CLBorderRadius;
142
142
  iconFilled: boolean;
143
143
  iconSize: CLIconSizes;
@@ -175,18 +175,18 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
175
175
  $nextTick: typeof import('vue').nextTick;
176
176
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
177
177
  } & Readonly<{
178
+ width: string;
179
+ height: string;
180
+ form: string;
181
+ title: string;
178
182
  size: CLSizes;
179
183
  color: CLColors;
180
184
  variant: CLColorVariants;
181
185
  rounded: boolean;
182
186
  testId: string;
183
187
  type: import('../../../types').CLButtonTypes;
184
- form: string;
185
- title: string;
186
188
  onClick: (event?: Event) => void;
187
189
  target: import('@codeandfunction/callaloo-types').CLLinkTarget;
188
- width: string;
189
- height: string;
190
190
  borderRadius: CLBorderRadius;
191
191
  iconFilled: boolean;
192
192
  iconSize: CLIconSizes;
@@ -203,7 +203,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
203
203
  iconBefore: CLIconNames | null;
204
204
  pill: boolean;
205
205
  wrap: boolean;
206
- }> & Omit<Readonly<import('../../Buttons/CLButton/CLButton.vue').CLButtonProps> & Readonly<{}>, "size" | "color" | "variant" | "rounded" | "testId" | "type" | "form" | "title" | "onClick" | "target" | "width" | "height" | "borderRadius" | "iconFilled" | "iconSize" | "href" | "active" | "alignContent" | "ariaLabel" | "as" | "busy" | "disabled" | "elevated" | "forwardRef" | "iconAfter" | "iconBefore" | "pill" | "wrap"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
206
+ }> & Omit<Readonly<import('../../Buttons/CLButton/CLButton.vue').CLButtonProps> & Readonly<{}>, "width" | "height" | "form" | "title" | "size" | "color" | "variant" | "rounded" | "testId" | "type" | "onClick" | "target" | "borderRadius" | "iconFilled" | "iconSize" | "href" | "active" | "alignContent" | "ariaLabel" | "as" | "busy" | "disabled" | "elevated" | "forwardRef" | "iconAfter" | "iconBefore" | "pill" | "wrap"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
207
207
  $slots: {
208
208
  default?(_: {}): any;
209
209
  };
@@ -1,9 +1,9 @@
1
1
  import { CLIconSizes, CLColors, CLToastPosition, CLToastProps } from '../../../index.ts';
2
2
  declare const _default: import('vue').DefineComponent<CLToastProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLToastProps> & Readonly<{}>, {
3
+ width: string;
3
4
  color: CLColors;
4
5
  rounded: boolean;
5
6
  testId: string;
6
- width: string;
7
7
  dismissTimer: number;
8
8
  iconFilled: boolean;
9
9
  iconSize: CLIconSizes;
@@ -1,41 +1,51 @@
1
1
  import { ComputedRef, MaybeRef, Ref } from 'vue';
2
- export type ISODate = string;
3
- export interface CalendarCell {
4
- date: ISODate | null;
2
+ export type CLISODate = string;
3
+ export type ISODate = CLISODate;
4
+ export type CLAllowedDates = CLISODate[] | {
5
+ end?: CLISODate | null;
6
+ start?: CLISODate | null;
7
+ } | ((date: CLISODate) => boolean);
8
+ export type AllowedDates = CLAllowedDates;
9
+ export interface CLCalendarCell {
10
+ date: CLISODate | null;
5
11
  day: number | null;
12
+ isDisabled: boolean;
6
13
  isOutsideMonth: boolean;
7
14
  }
15
+ export type CalendarCell = CLCalendarCell;
8
16
  interface Input {
9
- appliedEnd?: Ref<ISODate | null>;
10
- appliedStart?: Ref<ISODate | null>;
17
+ allowedDates?: MaybeRef<CLAllowedDates | undefined>;
18
+ appliedEnd?: Ref<CLISODate | null>;
19
+ appliedStart?: Ref<CLISODate | null>;
11
20
  isRange?: MaybeRef<boolean>;
12
21
  }
13
22
  interface Return {
14
- calendarGrid: ComputedRef<CalendarCell[]>;
23
+ calendarGrid: ComputedRef<CLCalendarCell[]>;
15
24
  cancelDraft: () => void;
16
25
  clearDraft: () => void;
17
26
  currentDate: Ref<Date>;
18
27
  currentMonthLabel: ComputedRef<string>;
19
- draftEnd: Ref<ISODate | null>;
20
- draftStart: Ref<ISODate | null>;
21
- formatDateToISO: (date: Date) => ISODate;
22
- formatHumanDate: (iso: ISODate) => string;
23
- formatLongDate: (iso: ISODate) => string;
24
- formatShortNoYear: (iso: ISODate) => string;
25
- formatShortWithYear: (iso: ISODate) => string;
26
- getDayAriaLabel: (iso: ISODate) => string;
28
+ draftEnd: Ref<CLISODate | null>;
29
+ draftStart: Ref<CLISODate | null>;
30
+ formatDateToISO: (date: Date) => CLISODate;
31
+ formatHumanDate: (iso: CLISODate) => string;
32
+ formatLongDate: (iso: CLISODate) => string;
33
+ formatShortNoYear: (iso: CLISODate) => string;
34
+ formatShortWithYear: (iso: CLISODate) => string;
35
+ getDayAriaLabel: (iso: CLISODate) => string;
27
36
  handleNextMonth: () => void;
28
37
  handlePrevMonth: () => void;
29
38
  initializeDraft: () => void;
30
- isDraftEnd: (iso: ISODate) => boolean;
31
- isDraftSameDay: (iso: ISODate) => boolean;
32
- isDraftStart: (iso: ISODate) => boolean;
33
- isInDraftRange: (iso: ISODate) => boolean;
34
- isoToLocalDate: (iso: ISODate) => Date;
35
- onDayClick: (iso: ISODate | null) => void;
39
+ isDateDisabled: (iso: CLISODate) => boolean;
40
+ isDraftEnd: (iso: CLISODate) => boolean;
41
+ isDraftSameDay: (iso: CLISODate) => boolean;
42
+ isDraftStart: (iso: CLISODate) => boolean;
43
+ isInDraftRange: (iso: CLISODate) => boolean;
44
+ isoToLocalDate: (iso: CLISODate) => Date;
45
+ onDayClick: (iso: CLISODate | null) => void;
36
46
  rangeLabel: ComputedRef<string | undefined>;
37
47
  setCalendarMonthToAppliedOrToday: () => void;
38
48
  weekDays: string[];
39
49
  }
40
- export declare const useDatePicker: ({ appliedEnd, appliedStart, isRange }?: Input) => Return;
50
+ export declare const useDatePicker: ({ allowedDates, appliedEnd, appliedStart, isRange }?: Input) => Return;
41
51
  export {};
@@ -1,2 +1,2 @@
1
1
  import '../assets/core.css';
2
- import{ref as e,onMounted as a,computed as t,unref as l}from"vue";const u=({appliedEnd:u,appliedStart:n,isRange:r=!0}={})=>{const o=e(/* @__PURE__ */new Date),v=e(null),i=e(null),d=e(!1);a(()=>{d.value=!0});const g=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,D=e=>/* @__PURE__ */new Date(`${e}T00:00:00`),s=e=>d.value?D(e).toLocaleDateString("default",{day:"numeric",month:"long",weekday:"long",year:"numeric"}):e,c=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}`},h=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}/${String(a.getFullYear()).slice(-2)}`},f=()=>{const e=n?.value?D(n.value):/* @__PURE__ */new Date;o.value=new Date(e.getFullYear(),e.getMonth(),1)},$=t(()=>{if(!d.value){return`${o.value.getMonth()+1}/${o.value.getFullYear()}`}return o.value.toLocaleString("default",{month:"long",year:"numeric"})}),S=t(()=>{const e=n?.value??null,a=u?.value??null;if(!e)return;if(!l(r))return h(e);if(!a)return h(e);return D(e).getFullYear()!==D(a).getFullYear()?`${h(e)} - ${h(a)}`:`${c(e)} - ${c(a)}`}),m=e=>i.value===e,y=e=>v.value===e,M=e=>Boolean(l(r)&&i.value&&v.value&&i.value===v.value&&i.value===e),w=e=>!!l(r)&&(!!i.value&&(v.value?e>=i.value&&e<=v.value:e===i.value));return{calendarGrid:t(()=>{const e=o.value.getFullYear(),a=o.value.getMonth(),t=new Date(e,a,1),l=new Date(e,a+1,0).getDate(),u=new Date(e,a,0).getDate(),n=t.getDay(),r=[];for(let o=0;o<n;o++){const t=u-(n-1-o),l=g(new Date(e,a-1,t));r.push({day:t,date:l,isOutsideMonth:!0})}for(let o=1;o<=l;o++){const t=g(new Date(e,a,o));r.push({day:o,date:t,isOutsideMonth:!1})}let v=1;for(;r.length<42;){const t=g(new Date(e,a+1,v));r.push({day:v,date:t,isOutsideMonth:!0}),v++}return r}),cancelDraft:()=>{i.value=n?.value??null,v.value=u?.value??null},clearDraft:()=>{n&&(n.value=null),u&&(u.value=null),i.value=null,v.value=null},currentDate:o,currentMonthLabel:$,draftEnd:v,draftStart:i,formatDateToISO:g,formatHumanDate:e=>d.value?D(e).toLocaleDateString("default",{day:"numeric",month:"short",year:"numeric"}):e,formatLongDate:s,formatShortNoYear:c,formatShortWithYear:h,getDayAriaLabel:e=>l(r)?M(e)?`${s(e)} (same day selected)`:m(e)?`${s(e)} (start date)`:y(e)?`${s(e)} (end date)`:w(e)?`${s(e)} (in range)`:s(e):m(e)?`${s(e)} (selected)`:s(e),handleNextMonth:()=>{o.value=new Date(o.value.getFullYear(),o.value.getMonth()+1,1)},handlePrevMonth:()=>{o.value=new Date(o.value.getFullYear(),o.value.getMonth()-1,1)},initializeDraft:()=>{f(),i.value=n?.value??null,v.value=u?.value??null},isDraftEnd:y,isDraftSameDay:M,isDraftStart:m,isInDraftRange:w,isoToLocalDate:D,onDayClick:e=>{if(e)return l(r)?!i.value||i.value&&v.value?(i.value=e,void(v.value=null)):e<i.value?(v.value=i.value,void(i.value=e)):void(v.value=e):(i.value=e,void(v.value=null))},rangeLabel:S,setCalendarMonthToAppliedOrToday:f,weekDays:["Su","Mo","Tu","We","Th","Fr","Sa"]}};export{u as useDatePicker};
2
+ import{ref as e,onMounted as a,computed as t,unref as l}from"vue";const u=({allowedDates:u,appliedEnd:n,appliedStart:r,isRange:o=!0}={})=>{const v=e(/* @__PURE__ */new Date),i=e(null),s=e(null),d=e(!1);a(()=>{d.value=!0});const g=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,D=e=>/* @__PURE__ */new Date(`${e}T00:00:00`),c=e=>d.value?D(e).toLocaleDateString("default",{day:"numeric",month:"long",weekday:"long",year:"numeric"}):e,f=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}`},h=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}/${String(a.getFullYear()).slice(-2)}`},y=t(()=>{const e=l(u);return null==e&&!!l(o)}),$=e=>{const a=l(u);return null!=a&&(Array.isArray(a)?!a.includes(e):"function"==typeof a?!a(e):"object"==typeof a&&(!!(a.start&&e<a.start)||!!(a.end&&e>a.end)))},S=()=>{let e;if(r?.value)e=D(r.value);else{const a=/* @__PURE__ */new Date,t=g(a),n=l(u);e=n&&$(t)?Array.isArray(n)&&n.length>0?D(n[0]):"object"==typeof n&&"start"in n&&n.start?D(n.start):a:a}v.value=new Date(e.getFullYear(),e.getMonth(),1)},m=t(()=>{if(!d.value){return`${v.value.getMonth()+1}/${v.value.getFullYear()}`}return v.value.toLocaleString("default",{month:"long",year:"numeric"})}),p=t(()=>{const e=r?.value??null,a=n?.value??null;if(!e)return;if(!y.value)return h(e);if(!a)return h(e);return D(e).getFullYear()!==D(a).getFullYear()?`${h(e)} - ${h(a)}`:`${f(e)} - ${f(a)}`}),M=e=>s.value===e,w=e=>i.value===e,Y=e=>Boolean(y.value&&s.value&&i.value&&s.value===i.value&&s.value===e),b=e=>!!y.value&&(!!s.value&&(i.value?e>=s.value&&e<=i.value:e===s.value));return{calendarGrid:t(()=>{const e=v.value.getFullYear(),a=v.value.getMonth(),t=new Date(e,a,1),l=new Date(e,a+1,0).getDate(),u=new Date(e,a,0).getDate(),n=t.getDay(),r=[];for(let v=0;v<n;v++){const t=u-(n-1-v),l=g(new Date(e,a-1,t));r.push({day:t,date:l,isDisabled:$(l),isOutsideMonth:!0})}for(let v=1;v<=l;v++){const t=g(new Date(e,a,v));r.push({day:v,date:t,isDisabled:$(t),isOutsideMonth:!1})}let o=1;for(;r.length<42;){const t=g(new Date(e,a+1,o));r.push({day:o,date:t,isDisabled:$(t),isOutsideMonth:!0}),o++}return r}),cancelDraft:()=>{s.value=r?.value??null,i.value=n?.value??null},clearDraft:()=>{r&&(r.value=null),n&&(n.value=null),s.value=null,i.value=null},currentDate:v,currentMonthLabel:m,draftEnd:i,draftStart:s,formatDateToISO:g,formatHumanDate:e=>d.value?D(e).toLocaleDateString("default",{day:"numeric",month:"short",year:"numeric"}):e,formatLongDate:c,formatShortNoYear:f,formatShortWithYear:h,getDayAriaLabel:e=>$(e)?`${c(e)} (disabled)`:y.value?Y(e)?`${c(e)} (same day selected)`:M(e)?`${c(e)} (start date)`:w(e)?`${c(e)} (end date)`:b(e)?`${c(e)} (in range)`:c(e):M(e)?`${c(e)} (selected)`:c(e),handleNextMonth:()=>{v.value=new Date(v.value.getFullYear(),v.value.getMonth()+1,1)},handlePrevMonth:()=>{v.value=new Date(v.value.getFullYear(),v.value.getMonth()-1,1)},initializeDraft:()=>{S(),s.value=r?.value??null,i.value=n?.value??null},isDateDisabled:$,isDraftEnd:w,isDraftSameDay:Y,isDraftStart:M,isInDraftRange:b,isoToLocalDate:D,onDayClick:e=>{if(e&&!$(e))return y.value?!s.value||s.value&&i.value?(s.value=e,void(i.value=null)):e<s.value?(i.value=s.value,void(s.value=e)):void(i.value=e):(s.value=e,void(i.value=null))},rangeLabel:p,setCalendarMonthToAppliedOrToday:S,weekDays:["Su","Mo","Tu","We","Th","Fr","Sa"]}};export{u as useDatePicker};
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { CLAlign, CLBorderRadius, CLButtonTypes, CLCardTypes, CLCharCounterLayout, CLColors, CLColorVariants, CLHeadingLevels, CLHeadingTypes, CLIconSizes, CLIconNames, CLInputTypes, CLLinkTarget, CLLoading, CLMessageType, CLMode, CLOrientation, CLOverflow, CLOrder, CLPaginationType, CLPlacement, CLPosition, CLDrawerPosition, CLSizes, CLTableTypes, CLTextTypes, CLToastPosition } from './types';
2
- export type { CLBlockTextHtmlTags, CLButtonTags, CLButtonForwardRefFunction, CLGenericFunction, CLGenericFocusFunction, CLGenericInputFunction, CLInlineTextHtmlTags, CLNavItem, CLOption, CLPalette, CLPaletteKeys, CLShades, CLTextHtmlTags, CLThemeConfig, CLToastProps } from './types';
2
+ export type { CLAllowedDates, CLBlockTextHtmlTags, CLButtonTags, CLButtonForwardRefFunction, CLCalendarCell, CLGenericFunction, CLGenericFocusFunction, CLGenericInputFunction, CLInlineTextHtmlTags, CLISODate, CLNavItem, CLOption, CLPalette, CLPaletteKeys, CLShades, CLTextHtmlTags, CLThemeConfig, CLToastProps } from './types';