@archpublicwebsite/rangepicker 1.2.12 → 1.2.14

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 (36) hide show
  1. package/README.md +76 -107
  2. package/dist/Rangepicker.vue.d.ts.map +1 -1
  3. package/dist/RangepickerConstraints.stories.d.ts +2 -2
  4. package/dist/RangepickerConstraints.stories.d.ts.map +1 -1
  5. package/dist/RangepickerConstraints.stories.js +25 -25
  6. package/dist/RangepickerFormatting.stories.d.ts +2 -2
  7. package/dist/RangepickerFormatting.stories.d.ts.map +1 -1
  8. package/dist/RangepickerFormatting.stories.js +36 -36
  9. package/dist/RangepickerInput.stories.d.ts +2 -2
  10. package/dist/RangepickerInput.stories.d.ts.map +1 -1
  11. package/dist/RangepickerInput.stories.js +48 -48
  12. package/dist/RangepickerInput.vue.d.ts +0 -1
  13. package/dist/RangepickerInput.vue.d.ts.map +1 -1
  14. package/dist/RangepickerModes.stories.d.ts +2 -2
  15. package/dist/RangepickerModes.stories.d.ts.map +1 -1
  16. package/dist/RangepickerModes.stories.js +50 -50
  17. package/dist/RangepickerSpecialDates.stories.d.ts +2 -2
  18. package/dist/RangepickerSpecialDates.stories.d.ts.map +1 -1
  19. package/dist/RangepickerSpecialDates.stories.js +29 -33
  20. package/dist/RangepickerTheming.stories.d.ts +2 -2
  21. package/dist/RangepickerTheming.stories.d.ts.map +1 -1
  22. package/dist/RangepickerTheming.stories.js +49 -49
  23. package/dist/index.d.ts.map +1 -1
  24. package/dist/index.js +9 -3
  25. package/dist/rangepicker.js +93 -116
  26. package/dist/rangepicker.js.map +1 -1
  27. package/dist/rangepicker.umd.cjs +1 -1
  28. package/dist/rangepicker.umd.cjs.map +1 -1
  29. package/dist/style.css +1 -1
  30. package/dist/types.d.ts +46 -24
  31. package/dist/types.d.ts.map +1 -1
  32. package/dist/utils/calendar.d.ts.map +1 -1
  33. package/dist/utils/calendar.js +5 -9
  34. package/dist/utils/date.d.ts.map +1 -1
  35. package/dist/utils/position.d.ts.map +1 -1
  36. package/package.json +6 -5
@@ -1,11 +1,11 @@
1
- import { ref, watch } from "vue";
2
- import RangepickerInput from "./RangepickerInput.vue";
1
+ import { ref, watch } from 'vue';
2
+ import RangepickerInput from './RangepickerInput.vue';
3
3
  /**
4
4
  * Stories demonstrating formatting and display options
5
5
  * for the Rangepicker component.
6
6
  */
7
7
  const meta = {
8
- title: "Components/Rangepicker/Examples",
8
+ title: 'Components/Rangepicker/Examples',
9
9
  component: RangepickerInput,
10
10
  tags: ['autodocs'],
11
11
  parameters: {
@@ -34,33 +34,33 @@ The component uses [dayjs](https://day.js.org/docs/en/display/format) format tok
34
34
  },
35
35
  argTypes: {
36
36
  placeholder: {
37
- control: "text",
38
- description: "Placeholder text shown when no date is selected",
37
+ control: 'text',
38
+ description: 'Placeholder text shown when no date is selected',
39
39
  table: {
40
- type: { summary: "string" },
41
- defaultValue: { summary: "Select dates" },
40
+ type: { summary: 'string' },
41
+ defaultValue: { summary: 'Select dates' },
42
42
  },
43
43
  },
44
44
  options: {
45
- control: "object",
46
- description: "Configuration options including format settings",
45
+ control: 'object',
46
+ description: 'Configuration options including format settings',
47
47
  },
48
48
  variant: {
49
- control: "select",
50
- options: ["desktop", "mobile"],
49
+ control: 'select',
50
+ options: ['desktop', 'mobile'],
51
51
  },
52
52
  },
53
53
  args: {
54
- id: "dates",
55
- name: "dates",
56
- variant: "desktop",
54
+ id: 'dates',
55
+ name: 'dates',
56
+ variant: 'desktop',
57
57
  },
58
58
  render: (args) => ({
59
59
  components: { RangepickerInput },
60
60
  setup() {
61
- const modelValue = ref(args.modelValue ?? "");
61
+ const modelValue = ref(args.modelValue ?? '');
62
62
  watch(() => args.modelValue, (value) => {
63
- const nextValue = value ?? "";
63
+ const nextValue = value ?? '';
64
64
  if (nextValue !== modelValue.value) {
65
65
  modelValue.value = nextValue;
66
66
  }
@@ -75,8 +75,8 @@ The component uses [dayjs](https://day.js.org/docs/en/display/format) format tok
75
75
  <span style="color: #059669; font-family: monospace;">{{ modelValue }}</span>
76
76
  </div>
77
77
  </div>
78
- `
79
- })
78
+ `,
79
+ }),
80
80
  };
81
81
  export default meta;
82
82
  /**
@@ -84,15 +84,15 @@ export default meta;
84
84
  */
85
85
  export const DefaultFormat = {
86
86
  args: {
87
- placeholder: "Check in / Check out",
88
- modelValue: "02 Feb 2026 - 04 Feb 2026",
87
+ placeholder: 'Check in / Check out',
88
+ modelValue: '02 Feb 2026 - 04 Feb 2026',
89
89
  options: {
90
90
  autoApply: true,
91
91
  minDate: new Date(),
92
92
  format: 'DD MMM YYYY',
93
93
  numberOfColumns: 2,
94
94
  numberOfMonths: 2,
95
- }
95
+ },
96
96
  },
97
97
  parameters: {
98
98
  docs: {
@@ -119,15 +119,15 @@ options: {
119
119
  */
120
120
  export const ISOFormat = {
121
121
  args: {
122
- placeholder: "Select dates (ISO format)",
123
- modelValue: "2026-02-02 - 2026-02-04",
122
+ placeholder: 'Select dates (ISO format)',
123
+ modelValue: '2026-02-02 - 2026-02-04',
124
124
  options: {
125
125
  autoApply: true,
126
126
  minDate: new Date(),
127
127
  format: 'YYYY-MM-DD',
128
128
  numberOfColumns: 2,
129
129
  numberOfMonths: 2,
130
- }
130
+ },
131
131
  },
132
132
  parameters: {
133
133
  docs: {
@@ -156,15 +156,15 @@ options: {
156
156
  */
157
157
  export const RegionalFormats = {
158
158
  args: {
159
- placeholder: "Select dates",
160
- modelValue: "02/02/2026 - 02/04/2026",
159
+ placeholder: 'Select dates',
160
+ modelValue: '02/02/2026 - 02/04/2026',
161
161
  options: {
162
162
  autoApply: true,
163
163
  minDate: new Date(),
164
164
  format: 'MM/DD/YYYY',
165
165
  numberOfColumns: 2,
166
166
  numberOfMonths: 2,
167
- }
167
+ },
168
168
  },
169
169
  argTypes: {
170
170
  'options.format': {
@@ -209,15 +209,15 @@ options: {
209
209
  */
210
210
  export const FullMonthFormat = {
211
211
  args: {
212
- placeholder: "Select dates",
213
- modelValue: "2 February 2026 - 4 February 2026",
212
+ placeholder: 'Select dates',
213
+ modelValue: '2 February 2026 - 4 February 2026',
214
214
  options: {
215
215
  autoApply: true,
216
216
  minDate: new Date(),
217
217
  format: 'D MMMM YYYY',
218
218
  numberOfColumns: 2,
219
219
  numberOfMonths: 2,
220
- }
220
+ },
221
221
  },
222
222
  parameters: {
223
223
  docs: {
@@ -244,15 +244,15 @@ options: {
244
244
  */
245
245
  export const ShortFormat = {
246
246
  args: {
247
- placeholder: "Select dates",
248
- modelValue: "02 Feb - 04 Feb",
247
+ placeholder: 'Select dates',
248
+ modelValue: '02 Feb - 04 Feb',
249
249
  options: {
250
250
  autoApply: true,
251
251
  minDate: new Date(),
252
252
  format: 'DD MMM',
253
253
  numberOfColumns: 2,
254
254
  numberOfMonths: 2,
255
- }
255
+ },
256
256
  },
257
257
  parameters: {
258
258
  docs: {
@@ -281,15 +281,15 @@ options: {
281
281
  */
282
282
  export const CustomPlaceholder = {
283
283
  args: {
284
- placeholder: "When are you traveling?",
285
- modelValue: "02 Feb 2026 - 04 Feb 2026",
284
+ placeholder: 'When are you traveling?',
285
+ modelValue: '02 Feb 2026 - 04 Feb 2026',
286
286
  options: {
287
287
  autoApply: true,
288
288
  minDate: new Date(),
289
289
  format: 'DD MMM YYYY',
290
290
  numberOfColumns: 2,
291
291
  numberOfMonths: 2,
292
- }
292
+ },
293
293
  },
294
294
  parameters: {
295
295
  docs: {
@@ -1,5 +1,5 @@
1
- import type { Meta, StoryObj } from "@storybook/vue3";
2
- import RangepickerInput from "./RangepickerInput.vue";
1
+ import type { Meta, StoryObj } from '@storybook/vue3';
2
+ import RangepickerInput from './RangepickerInput.vue';
3
3
  /**
4
4
  * # Rangepicker
5
5
  *
@@ -1 +1 @@
1
- {"version":3,"file":"RangepickerInput.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAyIvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAC"}
1
+ {"version":3,"file":"RangepickerInput.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAyIvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAA"}
@@ -1,5 +1,5 @@
1
- import { ref, watch } from "vue";
2
- import RangepickerInput from "./RangepickerInput.vue";
1
+ import { ref, watch } from 'vue';
2
+ import RangepickerInput from './RangepickerInput.vue';
3
3
  /**
4
4
  * # Rangepicker
5
5
  *
@@ -36,7 +36,7 @@ import RangepickerInput from "./RangepickerInput.vue";
36
36
  * - **Special Dates** - Holidays and disabled dates
37
37
  */
38
38
  const meta = {
39
- title: "Components/Rangepicker/How to use it",
39
+ title: 'Components/Rangepicker/How to use it',
40
40
  component: RangepickerInput,
41
41
  tags: ['autodocs'],
42
42
  parameters: {
@@ -53,78 +53,78 @@ const meta = {
53
53
  },
54
54
  argTypes: {
55
55
  modelValue: {
56
- control: "text",
57
- description: "Two-way binding for formatted date range string",
56
+ control: 'text',
57
+ description: 'Two-way binding for formatted date range string',
58
58
  table: {
59
- type: { summary: "string" },
59
+ type: { summary: 'string' },
60
60
  defaultValue: { summary: '""' },
61
61
  },
62
62
  },
63
63
  placeholder: {
64
- control: "text",
65
- description: "Placeholder text shown when no date is selected",
64
+ control: 'text',
65
+ description: 'Placeholder text shown when no date is selected',
66
66
  table: {
67
- type: { summary: "string" },
68
- defaultValue: { summary: "Select dates" },
67
+ type: { summary: 'string' },
68
+ defaultValue: { summary: 'Select dates' },
69
69
  },
70
70
  },
71
71
  variant: {
72
- control: "select",
73
- options: ["desktop", "mobile"],
74
- description: "Display variant - desktop shows dropdown, mobile shows bottom sheet",
72
+ control: 'select',
73
+ options: ['desktop', 'mobile'],
74
+ description: 'Display variant - desktop shows dropdown, mobile shows bottom sheet',
75
75
  table: {
76
76
  type: { summary: "'desktop' | 'mobile'" },
77
- defaultValue: { summary: "desktop" },
77
+ defaultValue: { summary: 'desktop' },
78
78
  },
79
79
  },
80
80
  primaryColor: {
81
- control: "color",
82
- description: "Primary color for selected dates and highlights (HEX format)",
81
+ control: 'color',
82
+ description: 'Primary color for selected dates and highlights (HEX format)',
83
83
  table: {
84
- type: { summary: "string" },
84
+ type: { summary: 'string' },
85
85
  },
86
86
  },
87
87
  secondaryColor: {
88
- control: "color",
89
- description: "Secondary color for hover states (HEX format)",
88
+ control: 'color',
89
+ description: 'Secondary color for hover states (HEX format)',
90
90
  table: {
91
- type: { summary: "string" },
91
+ type: { summary: 'string' },
92
92
  },
93
93
  },
94
94
  options: {
95
- control: "object",
96
- description: "Configuration options for the rangepicker",
95
+ control: 'object',
96
+ description: 'Configuration options for the rangepicker',
97
97
  table: {
98
- type: { summary: "LitepickerOptions" },
98
+ type: { summary: 'LitepickerOptions' },
99
99
  },
100
100
  },
101
101
  id: {
102
- control: "text",
103
- description: "HTML id attribute for the input",
102
+ control: 'text',
103
+ description: 'HTML id attribute for the input',
104
104
  },
105
105
  name: {
106
- control: "text",
107
- description: "HTML name attribute for the input",
106
+ control: 'text',
107
+ description: 'HTML name attribute for the input',
108
108
  },
109
109
  readonly: {
110
- control: "boolean",
111
- description: "Whether the input is readonly",
110
+ control: 'boolean',
111
+ description: 'Whether the input is readonly',
112
112
  table: {
113
- type: { summary: "boolean" },
114
- defaultValue: { summary: "true" },
113
+ type: { summary: 'boolean' },
114
+ defaultValue: { summary: 'true' },
115
115
  },
116
116
  },
117
117
  close: {
118
- control: "boolean",
119
- description: "Programmatic control to close the picker",
118
+ control: 'boolean',
119
+ description: 'Programmatic control to close the picker',
120
120
  },
121
121
  },
122
122
  args: {
123
- modelValue: "",
124
- placeholder: "Check in / Check out",
125
- id: "dates",
126
- name: "dates",
127
- variant: "desktop",
123
+ modelValue: '',
124
+ placeholder: 'Check in / Check out',
125
+ id: 'dates',
126
+ name: 'dates',
127
+ variant: 'desktop',
128
128
  options: {
129
129
  autoApply: true,
130
130
  allowRepick: true,
@@ -147,14 +147,14 @@ const meta = {
147
147
  tooltipNumber: (totalDays) => {
148
148
  return totalDays - 1;
149
149
  },
150
- }
150
+ },
151
151
  },
152
152
  render: (args) => ({
153
153
  components: { RangepickerInput },
154
154
  setup() {
155
- const modelValue = ref(args.modelValue ?? "");
155
+ const modelValue = ref(args.modelValue ?? '');
156
156
  watch(() => args.modelValue, (value) => {
157
- const nextValue = value ?? "";
157
+ const nextValue = value ?? '';
158
158
  if (nextValue !== modelValue.value) {
159
159
  modelValue.value = nextValue;
160
160
  }
@@ -165,8 +165,8 @@ const meta = {
165
165
  <div style="padding: 2rem; background: #f5f5f5; min-height: 400px;">
166
166
  <RangepickerInput v-bind="args" v-model="modelValue" class="form-control mb-0 shadow-none text-black lg:pl-2 border-0 w-full" />
167
167
  </div>
168
- `
169
- })
168
+ `,
169
+ }),
170
170
  };
171
171
  export default meta;
172
172
  /**
@@ -205,11 +205,11 @@ Click the input field to open the calendar.
205
205
  */
206
206
  export const PropsApi = {
207
207
  args: {
208
- modelValue: "",
209
- placeholder: "Select dates",
210
- id: "dates",
211
- name: "dates",
212
- variant: "desktop",
208
+ modelValue: '',
209
+ placeholder: 'Select dates',
210
+ id: 'dates',
211
+ name: 'dates',
212
+ variant: 'desktop',
213
213
  options: {
214
214
  autoApply: false,
215
215
  allowRepick: true,
@@ -11,7 +11,6 @@ declare const _default: import('vue').DefineComponent<RangepickerInputProps, {},
11
11
  variant: "desktop" | "mobile";
12
12
  showClearButton: boolean;
13
13
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
14
- wrapperRef: HTMLDivElement;
15
14
  inputRef: HTMLInputElement;
16
15
  }, any>;
17
16
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AAyNA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;;;;;;;;;;;;;;;;AA0RpD,wBASG"}
1
+ {"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AA2QA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;;;;;;;;;;;;;;;AA8RpD,wBASG"}
@@ -1,5 +1,5 @@
1
- import type { Meta, StoryObj } from "@storybook/vue3";
2
- import RangepickerInput from "./RangepickerInput.vue";
1
+ import type { Meta, StoryObj } from '@storybook/vue3';
2
+ import RangepickerInput from './RangepickerInput.vue';
3
3
  /**
4
4
  * Stories demonstrating different display modes and behaviors
5
5
  * for the Rangepicker component.
@@ -1 +1 @@
1
- {"version":3,"file":"RangepickerModes.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerModes.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAEtD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAiIvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA2B7B,CAAC"}
1
+ {"version":3,"file":"RangepickerModes.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerModes.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AAErD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAiIvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA2B7B,CAAA"}
@@ -1,11 +1,11 @@
1
- import { ref, watch } from "vue";
2
- import RangepickerInput from "./RangepickerInput.vue";
1
+ import { ref, watch } from 'vue';
2
+ import RangepickerInput from './RangepickerInput.vue';
3
3
  /**
4
4
  * Stories demonstrating different display modes and behaviors
5
5
  * for the Rangepicker component.
6
6
  */
7
7
  const meta = {
8
- title: "Components/Rangepicker/Examples",
8
+ title: 'Components/Rangepicker/Examples',
9
9
  component: RangepickerInput,
10
10
  tags: ['autodocs'],
11
11
  parameters: {
@@ -25,76 +25,76 @@ and behavior modes to fit various use cases.
25
25
  },
26
26
  argTypes: {
27
27
  variant: {
28
- control: "select",
29
- options: ["desktop", "mobile"],
30
- description: "Display variant - desktop shows dropdown, mobile shows bottom sheet",
28
+ control: 'select',
29
+ options: ['desktop', 'mobile'],
30
+ description: 'Display variant - desktop shows dropdown, mobile shows bottom sheet',
31
31
  table: {
32
32
  type: { summary: "'desktop' | 'mobile'" },
33
- defaultValue: { summary: "desktop" },
33
+ defaultValue: { summary: 'desktop' },
34
34
  },
35
35
  },
36
36
  autoApply: {
37
- control: "boolean",
38
- description: "Automatically apply selection without requiring an Apply button",
37
+ control: 'boolean',
38
+ description: 'Automatically apply selection without requiring an Apply button',
39
39
  table: {
40
- type: { summary: "boolean" },
41
- defaultValue: { summary: "false" },
40
+ type: { summary: 'boolean' },
41
+ defaultValue: { summary: 'false' },
42
42
  },
43
43
  },
44
44
  singleMode: {
45
- control: "boolean",
46
- description: "Enable single date mode instead of range",
45
+ control: 'boolean',
46
+ description: 'Enable single date mode instead of range',
47
47
  table: {
48
- type: { summary: "boolean" },
49
- defaultValue: { summary: "false" },
48
+ type: { summary: 'boolean' },
49
+ defaultValue: { summary: 'false' },
50
50
  },
51
51
  },
52
52
  format: {
53
- control: "text",
53
+ control: 'text',
54
54
  description: "Date format string (e.g., 'DD MMM YYYY')",
55
55
  table: {
56
- type: { summary: "string" },
56
+ type: { summary: 'string' },
57
57
  defaultValue: { summary: "'YYYY-MM-DD'" },
58
58
  },
59
59
  },
60
60
  numberOfColumns: {
61
- control: "number",
62
- description: "Number of calendar columns to display",
61
+ control: 'number',
62
+ description: 'Number of calendar columns to display',
63
63
  table: {
64
- type: { summary: "number" },
65
- defaultValue: { summary: "2" },
64
+ type: { summary: 'number' },
65
+ defaultValue: { summary: '2' },
66
66
  },
67
67
  },
68
68
  numberOfMonths: {
69
- control: "number",
70
- description: "Number of months to display",
69
+ control: 'number',
70
+ description: 'Number of months to display',
71
71
  table: {
72
- type: { summary: "number" },
73
- defaultValue: { summary: "2" },
72
+ type: { summary: 'number' },
73
+ defaultValue: { summary: '2' },
74
74
  },
75
75
  },
76
76
  primaryColor: {
77
- control: "color",
78
- description: "Primary color for selected dates and highlights (HEX format)",
77
+ control: 'color',
78
+ description: 'Primary color for selected dates and highlights (HEX format)',
79
79
  },
80
80
  secondaryColor: {
81
- control: "color",
82
- description: "Secondary color for hover states (HEX format)",
81
+ control: 'color',
82
+ description: 'Secondary color for hover states (HEX format)',
83
83
  },
84
84
  showClearButton: {
85
- control: "boolean",
86
- description: "Show clear button to reset selection",
85
+ control: 'boolean',
86
+ description: 'Show clear button to reset selection',
87
87
  table: {
88
- type: { summary: "boolean" },
89
- defaultValue: { summary: "true" },
88
+ type: { summary: 'boolean' },
89
+ defaultValue: { summary: 'true' },
90
90
  },
91
91
  },
92
92
  },
93
93
  args: {
94
- placeholder: "Check in / Check out",
95
- id: "dates",
96
- name: "dates",
97
- variant: "desktop",
94
+ placeholder: 'Check in / Check out',
95
+ id: 'dates',
96
+ name: 'dates',
97
+ variant: 'desktop',
98
98
  autoApply: true,
99
99
  allowRepick: true,
100
100
  dropdowns: {
@@ -113,9 +113,9 @@ and behavior modes to fit various use cases.
113
113
  render: (args) => ({
114
114
  components: { RangepickerInput },
115
115
  setup() {
116
- const modelValue = ref(args.modelValue ?? "");
116
+ const modelValue = ref(args.modelValue ?? '');
117
117
  watch(() => args.modelValue, (value) => {
118
- const nextValue = value ?? "";
118
+ const nextValue = value ?? '';
119
119
  if (nextValue !== modelValue.value) {
120
120
  modelValue.value = nextValue;
121
121
  }
@@ -126,8 +126,8 @@ and behavior modes to fit various use cases.
126
126
  <div style="padding: 2rem; background: #f5f5f5; min-height: 400px;">
127
127
  <RangepickerInput v-bind="args" v-model="modelValue" class="form-control mb-0 shadow-none text-black lg:pl-2 border-0 w-full" />
128
128
  </div>
129
- `
130
- })
129
+ `,
130
+ }),
131
131
  };
132
132
  export default meta;
133
133
  /**
@@ -136,8 +136,8 @@ export default meta;
136
136
  */
137
137
  export const DesktopVariant = {
138
138
  args: {
139
- variant: "desktop",
140
- primaryColor: "#ff1b1b"
139
+ variant: 'desktop',
140
+ primaryColor: '#ff1b1b',
141
141
  },
142
142
  parameters: {
143
143
  docs: {
@@ -162,7 +162,7 @@ Best suited for desktop and laptop screens where there's sufficient viewport spa
162
162
  */
163
163
  export const MobileVariant = {
164
164
  args: {
165
- variant: "mobile",
165
+ variant: 'mobile',
166
166
  },
167
167
  parameters: {
168
168
  docs: {
@@ -187,8 +187,8 @@ Provides a touch-friendly interface with larger tap targets.
187
187
  */
188
188
  export const SingleMode = {
189
189
  args: {
190
- variant: "desktop",
191
- placeholder: "Select date",
190
+ variant: 'desktop',
191
+ placeholder: 'Select date',
192
192
  autoApply: true,
193
193
  singleMode: true,
194
194
  format: 'DD MMM YYYY',
@@ -219,7 +219,7 @@ When enabled, clicking a date immediately selects it without requiring a second
219
219
  */
220
220
  export const AutoApply = {
221
221
  args: {
222
- variant: "desktop",
222
+ variant: 'desktop',
223
223
  autoApply: true,
224
224
  format: 'DD MMM YYYY',
225
225
  numberOfColumns: 2,
@@ -249,7 +249,7 @@ When enabled, the selection is confirmed immediately after picking the end date.
249
249
  */
250
250
  export const ManualApply = {
251
251
  args: {
252
- variant: "desktop",
252
+ variant: 'desktop',
253
253
  autoApply: false,
254
254
  format: 'DD MMM YYYY',
255
255
  numberOfColumns: 2,
@@ -279,8 +279,8 @@ When \`autoApply\` is set to \`false\`, users must explicitly confirm their date
279
279
  */
280
280
  export const ShowClearButton = {
281
281
  args: {
282
- variant: "desktop",
283
- modelValue: "2026-02-10 - 2026-02-20",
282
+ variant: 'desktop',
283
+ modelValue: '2026-02-10 - 2026-02-20',
284
284
  showClearButton: true,
285
285
  autoApply: true,
286
286
  format: 'DD MMM YYYY',
@@ -1,5 +1,5 @@
1
- import type { Meta, StoryObj } from "@storybook/vue3";
2
- import Rangepicker from "./Rangepicker.vue";
1
+ import type { Meta, StoryObj } from '@storybook/vue3';
2
+ import Rangepicker from './Rangepicker.vue';
3
3
  /**
4
4
  * Stories demonstrating special dates functionality
5
5
  * including holidays and disabled dates.
@@ -1 +1 @@
1
- {"version":3,"file":"RangepickerSpecialDates.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerSpecialDates.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAgC5C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+ElC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAiC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA+BlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAqC7B,CAAC"}
1
+ {"version":3,"file":"RangepickerSpecialDates.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerSpecialDates.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,WAAW,MAAM,mBAAmB,CAAA;AAiC3C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+ElC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAiC3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA+BlC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA8B9B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAsC7B,CAAA"}