@archpublicwebsite/rangepicker 1.2.13 → 1.2.15

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 +54 -78
  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 -4
package/README.md CHANGED
@@ -38,11 +38,7 @@ const dates = ref('')
38
38
  </script>
39
39
 
40
40
  <template>
41
- <RangepickerInput
42
- v-model="dates"
43
- primary-color="#3b82f6"
44
- placeholder="Check in / Check out"
45
- />
41
+ <RangepickerInput v-model="dates" primary-color="#3b82f6" placeholder="Check in / Check out" />
46
42
  </template>
47
43
  ```
48
44
 
@@ -53,11 +49,7 @@ Full TypeScript support with exported types for type-safe development:
53
49
  ```vue
54
50
  <script setup lang="ts">
55
51
  import { ref } from 'vue'
56
- import {
57
- RangepickerInput,
58
- type RangepickerProps,
59
- type DateRange
60
- } from '@archpublicwebsite/rangepicker'
52
+ import { RangepickerInput, type RangepickerProps, type DateRange } from '@archpublicwebsite/rangepicker'
61
53
  import '@archpublicwebsite/rangepicker/style.css'
62
54
 
63
55
  // Type-safe date range
@@ -69,21 +61,17 @@ const pickerOptions: Partial<RangepickerProps> = {
69
61
  autoApply: true,
70
62
  minDays: 2,
71
63
  maxDays: 30,
72
- showTooltip: true
64
+ showTooltip: true,
73
65
  }
74
66
  </script>
75
67
 
76
68
  <template>
77
- <RangepickerInput
78
- v-model="dates"
79
- v-bind="pickerOptions"
80
- primary-color="#3b82f6"
81
- placeholder="Check in / Check out"
82
- />
69
+ <RangepickerInput v-model="dates" v-bind="pickerOptions" primary-color="#3b82f6" placeholder="Check in / Check out" />
83
70
  </template>
84
71
  ```
85
72
 
86
73
  **Why separate CSS import?**
74
+
87
75
  - Better performance (CSS cached independently)
88
76
  - Smaller JS bundle
89
77
  - No Flash of Unstyled Content (FOUC)
@@ -109,28 +97,13 @@ const dates3 = ref('')
109
97
 
110
98
  <template>
111
99
  <!-- Blue theme -->
112
- <RangepickerInput
113
- v-model="dates1"
114
- primary-color="#3b82f6"
115
- secondary-color="#60a5fa"
116
- placeholder="Blue theme"
117
- />
100
+ <RangepickerInput v-model="dates1" primary-color="#3b82f6" secondary-color="#60a5fa" placeholder="Blue theme" />
118
101
 
119
102
  <!-- Purple theme -->
120
- <RangepickerInput
121
- v-model="dates2"
122
- primary-color="#8b5cf6"
123
- secondary-color="#a78bfa"
124
- placeholder="Purple theme"
125
- />
103
+ <RangepickerInput v-model="dates2" primary-color="#8b5cf6" secondary-color="#a78bfa" placeholder="Purple theme" />
126
104
 
127
105
  <!-- Red theme -->
128
- <RangepickerInput
129
- v-model="dates3"
130
- primary-color="#ef4444"
131
- secondary-color="#f87171"
132
- placeholder="Red theme"
133
- />
106
+ <RangepickerInput v-model="dates3" primary-color="#ef4444" secondary-color="#f87171" placeholder="Red theme" />
134
107
  </template>
135
108
  ```
136
109
 
@@ -166,10 +139,7 @@ const dates3 = ref('')
166
139
  />
167
140
 
168
141
  <!-- Inherit from parent (default) -->
169
- <RangepickerInput
170
- v-model="dates3"
171
- placeholder="Inherits parent font"
172
- />
142
+ <RangepickerInput v-model="dates3" placeholder="Inherits parent font" />
173
143
  </template>
174
144
 
175
145
  <style>
@@ -181,13 +151,14 @@ const dates3 = ref('')
181
151
 
182
152
  ### Color Props
183
153
 
184
- | Prop | Type | Default | Description |
185
- |------|------|---------|-------------|
186
- | `primary-color` | `string` | - | Main color for selected dates and buttons (HEX format, e.g., `#3b82f6`) |
187
- | `secondary-color` | `string` | - | Color for hover states and secondary elements (HEX format, optional) |
188
- | `font-family` | `string` | `inherit` | Custom font family (e.g., `'Roboto', sans-serif`, `'Poppins', sans-serif`) |
154
+ | Prop | Type | Default | Description |
155
+ | ----------------- | -------- | --------- | -------------------------------------------------------------------------- |
156
+ | `primary-color` | `string` | - | Main color for selected dates and buttons (HEX format, e.g., `#3b82f6`) |
157
+ | `secondary-color` | `string` | - | Color for hover states and secondary elements (HEX format, optional) |
158
+ | `font-family` | `string` | `inherit` | Custom font family (e.g., `'Roboto', sans-serif`, `'Poppins', sans-serif`) |
189
159
 
190
160
  **Features:**
161
+
191
162
  - ✅ **Scoped per instance** - Multiple pickers can have different colors simultaneously
192
163
  - ✅ **No global state** - Colors don't conflict between instances
193
164
  - ✅ **HEX format** - Standard 3 or 6 digit HEX colors (e.g., `#3b82f6`, `#fff`)
@@ -287,11 +258,7 @@ const dateRangeText = computed(() => {
287
258
  ```vue
288
259
  <script setup lang="ts">
289
260
  import { ref } from 'vue'
290
- import {
291
- Rangepicker,
292
- useRangepicker,
293
- type RangepickerProps
294
- } from '@archpublicwebsite/rangepicker'
261
+ import { Rangepicker, useRangepicker, type RangepickerProps } from '@archpublicwebsite/rangepicker'
295
262
  import '@archpublicwebsite/rangepicker/style.css'
296
263
 
297
264
  const triggerRef = ref<HTMLElement | null>(null)
@@ -301,7 +268,7 @@ const options: Partial<RangepickerProps> = {
301
268
  valueOfMonths: 2,
302
269
  format: 'DD MMM YYYY',
303
270
  minDays: 1,
304
- autoApply: true
271
+ autoApply: true,
305
272
  }
306
273
 
307
274
  const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, options)
@@ -310,54 +277,48 @@ const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, op
310
277
  <template>
311
278
  <div>
312
279
  <button ref="triggerRef" @click="toggle">
313
- {{ dateRange.startDate && dateRange.endDate
314
- ? `${dateRange.startDate} - ${dateRange.endDate}`
315
- : 'Select dates' }}
280
+ {{ dateRange.startDate && dateRange.endDate ? `${dateRange.startDate} - ${dateRange.endDate}` : 'Select dates' }}
316
281
  </button>
317
282
 
318
- <Rangepicker
319
- v-model="dateRange"
320
- v-model:is-open="isOpen"
321
- :trigger-element="triggerRef"
322
- v-bind="options"
323
- />
283
+ <Rangepicker v-model="dateRange" v-model:is-open="isOpen" :trigger-element="triggerRef" v-bind="options" />
324
284
  </div>
325
285
  </template>
326
286
  ```
287
+
327
288
  ## Props
328
289
 
329
- | Prop | Type | Default | Description |
330
- |------|------|---------|-------------|
331
- | `modelValue` | `{ startDate?: string \| Date \| Dayjs, endDate?: string \| Date \| Dayjs }` | `{}` | Selected date range |
332
- | `isOpen` | `boolean` | `false` | Controls picker visibility |
333
- | `variant` | `'desktop' \| 'mobile'` | `'desktop'` | Display variant |
334
- | `primaryColor` | `string` | - | Primary color in HEX format (e.g., `#3b82f6`) |
335
- | `secondaryColor` | `string` | - | Secondary color in HEX format (e.g., `#60a5fa`) |
336
- | `minDate` | `string \| Date \| Dayjs` | - | Minimum selectable date |
337
- | `maxDate` | `string \| Date \| Dayjs` | - | Maximum selectable date |
338
- | `minDays` | `number` | - | Minimum number of days in range |
339
- | `maxDays` | `number` | - | Maximum number of days in range |
340
- | `valueOfMonths` | `number` | `2` | Number of months to display |
341
- | `valueOfColumns` | `number` | `2` | Grid columns for months |
342
- | `disabledDates` | `(string \| Date)[]` | `[]` | Array of disabled dates |
343
- | `holidays` | `(string \| Date)[]` | `[]` | Array of holiday dates |
344
- | `format` | `string` | `'YYYY-MM-DD'` | Date format |
345
- | `delimiter` | `string` | `' - '` | Delimiter between dates |
346
- | `placeholder` | `string` | `'Select dates'` | Placeholder text |
347
- | `label` | `string` | - | Label for the picker |
348
- | `showTooltip` | `boolean` | `true` | Show night count tooltip |
349
- | `autoApply` | `boolean` | `false` | Auto-apply selection |
350
- | `position` | `'auto' \| 'top' \| 'bottom'` | `'auto'` | Positioning strategy |
351
- | `triggerElement` | `HTMLElement \| null` | - | Trigger element for positioning |
290
+ | Prop | Type | Default | Description |
291
+ | ---------------- | ---------------------------------------------------------------------------- | ---------------- | ----------------------------------------------- |
292
+ | `modelValue` | `{ startDate?: string \| Date \| Dayjs, endDate?: string \| Date \| Dayjs }` | `{}` | Selected date range |
293
+ | `isOpen` | `boolean` | `false` | Controls picker visibility |
294
+ | `variant` | `'desktop' \| 'mobile'` | `'desktop'` | Display variant |
295
+ | `primaryColor` | `string` | - | Primary color in HEX format (e.g., `#3b82f6`) |
296
+ | `secondaryColor` | `string` | - | Secondary color in HEX format (e.g., `#60a5fa`) |
297
+ | `minDate` | `string \| Date \| Dayjs` | - | Minimum selectable date |
298
+ | `maxDate` | `string \| Date \| Dayjs` | - | Maximum selectable date |
299
+ | `minDays` | `number` | - | Minimum number of days in range |
300
+ | `maxDays` | `number` | - | Maximum number of days in range |
301
+ | `valueOfMonths` | `number` | `2` | Number of months to display |
302
+ | `valueOfColumns` | `number` | `2` | Grid columns for months |
303
+ | `disabledDates` | `(string \| Date)[]` | `[]` | Array of disabled dates |
304
+ | `holidays` | `(string \| Date)[]` | `[]` | Array of holiday dates |
305
+ | `format` | `string` | `'YYYY-MM-DD'` | Date format |
306
+ | `delimiter` | `string` | `' - '` | Delimiter between dates |
307
+ | `placeholder` | `string` | `'Select dates'` | Placeholder text |
308
+ | `label` | `string` | - | Label for the picker |
309
+ | `showTooltip` | `boolean` | `true` | Show night count tooltip |
310
+ | `autoApply` | `boolean` | `false` | Auto-apply selection |
311
+ | `position` | `'auto' \| 'top' \| 'bottom'` | `'auto'` | Positioning strategy |
312
+ | `triggerElement` | `HTMLElement \| null` | - | Trigger element for positioning |
352
313
 
353
314
  ## Events
354
315
 
355
- | Event | Payload | Description |
356
- |-------|---------|-------------|
357
- | `update:modelValue` | `{ startDate: string, endDate: string }` | Emitted when date range changes |
358
- | `update:isOpen` | `boolean` | Emitted when picker opens/closes |
359
- | `dateSelected` | `Dayjs` | Emitted when a date is clicked |
360
- | `rangeSelected` | `{ start: Dayjs, end: Dayjs }` | Emitted when range is complete |
316
+ | Event | Payload | Description |
317
+ | ------------------- | ---------------------------------------- | -------------------------------- |
318
+ | `update:modelValue` | `{ startDate: string, endDate: string }` | Emitted when date range changes |
319
+ | `update:isOpen` | `boolean` | Emitted when picker opens/closes |
320
+ | `dateSelected` | `Dayjs` | Emitted when a date is clicked |
321
+ | `rangeSelected` | `{ start: Dayjs, end: Dayjs }` | Emitted when range is complete |
361
322
 
362
323
  ## TypeScript Support
363
324
 
@@ -367,17 +328,18 @@ This package is built with TypeScript and provides full type definitions. All ty
367
328
 
368
329
  ```typescript
369
330
  import type {
370
- RangepickerProps, // Component props interface
371
- RangepickerEmits, // Event emitter interface
372
- DateRange, // Date range object type
373
- CalendarDay, // Internal calendar day type
374
- CalendarMonth // Internal calendar month type
331
+ RangepickerProps, // Component props interface
332
+ RangepickerEmits, // Event emitter interface
333
+ DateRange, // Date range object type
334
+ CalendarDay, // Internal calendar day type
335
+ CalendarMonth, // Internal calendar month type
375
336
  } from '@archpublicwebsite/rangepicker'
376
337
  ```
377
338
 
378
339
  ### Type Definitions
379
340
 
380
341
  #### `RangepickerProps`
342
+
381
343
  Complete props interface with JSDoc documentation. All props are optional with sensible defaults:
382
344
 
383
345
  ```typescript
@@ -390,16 +352,16 @@ interface RangepickerProps {
390
352
  minDays?: number
391
353
  maxDays?: number
392
354
  close?: boolean
393
- valueOfMonths?: number // default: 2
355
+ valueOfMonths?: number // default: 2
394
356
  valueOfColumns?: number // default: 2
395
357
  disabledDates?: (string | Date)[]
396
358
  holidays?: (string | Date)[]
397
- format?: string // default: 'YYYY-MM-DD'
398
- delimiter?: string // default: ' - '
359
+ format?: string // default: 'YYYY-MM-DD'
360
+ delimiter?: string // default: ' - '
399
361
  placeholder?: string
400
362
  label?: string
401
- showTooltip?: boolean // default: true
402
- autoApply?: boolean // default: false
363
+ showTooltip?: boolean // default: true
364
+ autoApply?: boolean // default: false
403
365
  position?: 'auto' | 'top' | 'bottom'
404
366
  triggerElement?: HTMLElement | null
405
367
  colorStyles?: Record<string, string>
@@ -407,6 +369,7 @@ interface RangepickerProps {
407
369
  ```
408
370
 
409
371
  #### `DateRange`
372
+
410
373
  Type for the v-model binding:
411
374
 
412
375
  ```typescript
@@ -417,14 +380,15 @@ interface DateRange {
417
380
  ```
418
381
 
419
382
  #### `RangepickerEmits`
383
+
420
384
  Event emitter types for type-safe event handling:
421
385
 
422
386
  ```typescript
423
387
  interface RangepickerEmits {
424
388
  'update:modelValue': [value: { startDate: string; endDate: string }]
425
389
  'update:isOpen': [value: boolean]
426
- 'dateSelected': [date: Dayjs]
427
- 'rangeSelected': [start: Dayjs, end: Dayjs]
390
+ dateSelected: [date: Dayjs]
391
+ rangeSelected: [start: Dayjs, end: Dayjs]
428
392
  }
429
393
  ```
430
394
 
@@ -441,7 +405,7 @@ const config: Partial<RangepickerProps> = {
441
405
  minDays: 2,
442
406
  maxDays: 30,
443
407
  autoApply: true,
444
- showTooltip: true
408
+ showTooltip: true,
445
409
  }
446
410
  ```
447
411
 
@@ -505,6 +469,7 @@ pnpm preview
505
469
  The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts with other frameworks:
506
470
 
507
471
  ### Why the prefix?
472
+
508
473
  - ✅ **Zero conflicts** with Vuetify, Bootstrap, Element Plus, etc.
509
474
  - ✅ **Safe to use** alongside any CSS framework
510
475
  - ✅ **All utilities prefixed**: `.arch-flex`, `.arch-text-sm`, `.arch-bg-white`, etc.
@@ -513,22 +478,22 @@ The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts wit
513
478
  ### Styling Options
514
479
 
515
480
  1. **Color Props (Easiest)**:
481
+
516
482
  ```vue
517
- <RangepickerInput
518
- primary-color="#3b82f6"
519
- secondary-color="#60a5fa"
520
- />
483
+ <RangepickerInput primary-color="#3b82f6" secondary-color="#60a5fa" />
521
484
  ```
522
485
 
523
486
  2. **CSS Variables (Global)**:
487
+
524
488
  ```css
525
489
  :root {
526
- --color-primary: 59 130 246; /* RGB format */
490
+ --color-primary: 59 130 246; /* RGB format */
527
491
  --color-secondary: 148 163 184;
528
492
  }
529
493
  ```
530
494
 
531
495
  3. **Custom CSS Overrides**:
496
+
532
497
  ```css
533
498
  /* Override component styles */
534
499
  .rangepicker-day-selected {
@@ -539,22 +504,26 @@ The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts wit
539
504
  ## Troubleshooting
540
505
 
541
506
  ### Styles not showing
507
+
542
508
  Make sure you imported the CSS:
509
+
543
510
  ```js
544
511
  import '@archpublicwebsite/rangepicker/style.css'
545
512
  ```
546
513
 
547
514
  ### CSS conflicts with Vuetify
515
+
548
516
  This should NOT happen thanks to the `arch-` prefix. If you see conflicts, please open an issue.
549
517
 
550
518
  ### TypeScript errors
519
+
551
520
  Ensure `vue` is installed as a dependency in your project.
552
521
 
553
522
  ## Browser Support
554
523
 
555
524
  - Chrome/Edge (latest 2 versions)
556
525
  - Firefox (latest 2 versions)
557
- - Safari (latest 2 versions)
526
+ - Safari (latest 2 versions)
558
527
  - Mobile Safari (iOS 14+)
559
528
  - Chrome for Android (latest)
560
529
 
@@ -1 +1 @@
1
- {"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AA8kBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,KAAK,EAAe,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;mBAiBjB,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;;;;;;;;;;;;;;AAinBnE,wBAUG"}
1
+ {"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AAojBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAIlC,OAAO,KAAK,EAAe,gBAAgB,EAAE,MAAM,SAAS,CAAA;;;mBAiBhB,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;;;;;;;;;;;;;;AA4lBnE,wBAUG"}
@@ -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 date constraints and validation options
5
5
  * for the Rangepicker component.
@@ -1 +1 @@
1
- {"version":3,"file":"RangepickerConstraints.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerConstraints.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,CAuDvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAQ/C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAkCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAgC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAC"}
1
+ {"version":3,"file":"RangepickerConstraints.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerConstraints.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,CAuDvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAQ9C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAkCrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAgC7B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAsCxB,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 date constraints and validation 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: {
@@ -22,26 +22,26 @@ enforce business rules like booking windows, minimum stay requirements, and blac
22
22
  },
23
23
  argTypes: {
24
24
  options: {
25
- control: "object",
26
- description: "Configuration options including date constraints",
25
+ control: 'object',
26
+ description: 'Configuration options including date constraints',
27
27
  },
28
28
  variant: {
29
- control: "select",
30
- options: ["desktop", "mobile"],
29
+ control: 'select',
30
+ options: ['desktop', 'mobile'],
31
31
  },
32
32
  },
33
33
  args: {
34
- placeholder: "Check in / Check out",
35
- id: "dates",
36
- name: "dates",
37
- variant: "desktop",
34
+ placeholder: 'Check in / Check out',
35
+ id: 'dates',
36
+ name: 'dates',
37
+ variant: 'desktop',
38
38
  },
39
39
  render: (args) => ({
40
40
  components: { RangepickerInput },
41
41
  setup() {
42
- const modelValue = ref(args.modelValue ?? "");
42
+ const modelValue = ref(args.modelValue ?? '');
43
43
  watch(() => args.modelValue, (value) => {
44
- const nextValue = value ?? "";
44
+ const nextValue = value ?? '';
45
45
  if (nextValue !== modelValue.value) {
46
46
  modelValue.value = nextValue;
47
47
  }
@@ -52,8 +52,8 @@ enforce business rules like booking windows, minimum stay requirements, and blac
52
52
  <div style="padding: 2rem; background: #f5f5f5; min-height: 400px;">
53
53
  <RangepickerInput v-bind="args" v-model="modelValue" class="form-control mb-0 shadow-none text-black lg:pl-2 border-0 w-full" />
54
54
  </div>
55
- `
56
- })
55
+ `,
56
+ }),
57
57
  };
58
58
  export default meta;
59
59
  // Helper to get future dates
@@ -72,7 +72,7 @@ export const MinDate = {
72
72
  format: 'DD MMM YYYY',
73
73
  numberOfColumns: 2,
74
74
  numberOfMonths: 2,
75
- }
75
+ },
76
76
  },
77
77
  parameters: {
78
78
  docs: {
@@ -109,7 +109,7 @@ export const MaxDate = {
109
109
  format: 'DD MMM YYYY',
110
110
  numberOfColumns: 2,
111
111
  numberOfMonths: 2,
112
- }
112
+ },
113
113
  },
114
114
  parameters: {
115
115
  docs: {
@@ -140,7 +140,7 @@ options: {
140
140
  */
141
141
  export const MinMaxDateRange = {
142
142
  args: {
143
- placeholder: "Select within booking window",
143
+ placeholder: 'Select within booking window',
144
144
  options: {
145
145
  autoApply: true,
146
146
  minDate: nextWeek,
@@ -148,7 +148,7 @@ export const MinMaxDateRange = {
148
148
  format: 'DD MMM YYYY',
149
149
  numberOfColumns: 2,
150
150
  numberOfMonths: 2,
151
- }
151
+ },
152
152
  },
153
153
  parameters: {
154
154
  docs: {
@@ -176,7 +176,7 @@ options: {
176
176
  */
177
177
  export const MinDays = {
178
178
  args: {
179
- placeholder: "Minimum 3 nights",
179
+ placeholder: 'Minimum 3 nights',
180
180
  options: {
181
181
  autoApply: true,
182
182
  minDate: today,
@@ -189,7 +189,7 @@ export const MinDays = {
189
189
  other: 'nights',
190
190
  },
191
191
  tooltipNumber: (totalDays) => totalDays - 1,
192
- }
192
+ },
193
193
  },
194
194
  parameters: {
195
195
  docs: {
@@ -219,7 +219,7 @@ options: {
219
219
  */
220
220
  export const MaxDays = {
221
221
  args: {
222
- placeholder: "Maximum 14 nights",
222
+ placeholder: 'Maximum 14 nights',
223
223
  options: {
224
224
  autoApply: true,
225
225
  minDate: today,
@@ -232,7 +232,7 @@ export const MaxDays = {
232
232
  other: 'nights',
233
233
  },
234
234
  tooltipNumber: (totalDays) => totalDays - 1,
235
- }
235
+ },
236
236
  },
237
237
  parameters: {
238
238
  docs: {
@@ -262,7 +262,7 @@ options: {
262
262
  */
263
263
  export const MinMaxDays = {
264
264
  args: {
265
- placeholder: "3-7 nights stay",
265
+ placeholder: '3-7 nights stay',
266
266
  options: {
267
267
  autoApply: true,
268
268
  minDate: today,
@@ -276,7 +276,7 @@ export const MinMaxDays = {
276
276
  other: 'nights',
277
277
  },
278
278
  tooltipNumber: (totalDays) => totalDays - 1,
279
- }
279
+ },
280
280
  },
281
281
  parameters: {
282
282
  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
  * Stories demonstrating formatting and display options
5
5
  * for the Rangepicker component.
@@ -1 +1 @@
1
- {"version":3,"file":"RangepickerFormatting.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerFormatting.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,CA8EvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KA+B3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAiD7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KA+B7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA8B/B,CAAC"}
1
+ {"version":3,"file":"RangepickerFormatting.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerFormatting.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,CA8EvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KA+B3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAiD7B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KA+B7B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA8B/B,CAAA"}