@archpublicwebsite/rangepicker 1.2.12 → 1.2.14

package/dist/RangepickerSpecialDates.stories.js

@@ -1,38 +1,39 @@
-import { ref } from "vue";
-import Rangepicker from "./Rangepicker.vue";
+import { ref } from 'vue';
+import Rangepicker from './Rangepicker.vue';
 // Helper to generate dates
 const today = new Date();
-const getDate = (daysFromToday) => {
+function getDate(daysFromToday) {
     const date = new Date(today);
     date.setDate(today.getDate() + daysFromToday);
     return date;
-};
+}
 // Generate sample disabled dates (every Tuesday for the next 2 months)
-const generateDisabledDates = () => {
+function generateDisabledDates() {
     const dates = [];
     for (let i = 0; i < 60; i++) {
         const date = getDate(i);
-        if (date.getDay() === 2) { // Tuesday
+        if (date.getDay() === 2) {
+            // Tuesday
             dates.push(new Date(date));
         }
     }
     return dates;
-};
+}
 // Generate sample holidays
-const generateHolidays = () => {
+function generateHolidays() {
     return [
         getDate(7), // A week from now
         getDate(14), // Two weeks from now
         getDate(21), // Three weeks from now
         getDate(30), // One month from now
     ];
-};
+}
 /**
  * Stories demonstrating special dates functionality
  * including holidays and disabled dates.
  */
 const meta = {
-    title: "Components/Rangepicker/Examples",
+    title: 'Components/Rangepicker/Examples',
     component: Rangepicker,
     tags: ['autodocs'],
     parameters: {
@@ -59,32 +60,32 @@ These dates can be visually distinguished and/or made non-selectable.
     },
     argTypes: {
         disabledDates: {
-            control: "object",
-            description: "Array of dates that should be disabled for selection",
+            control: 'object',
+            description: 'Array of dates that should be disabled for selection',
             table: {
-                type: { summary: "(string | Date)[]" },
-                defaultValue: { summary: "[]" },
+                type: { summary: '(string | Date)[]' },
+                defaultValue: { summary: '[]' },
             },
         },
         holidays: {
-            control: "object",
-            description: "Array of dates to mark as holidays",
+            control: 'object',
+            description: 'Array of dates to mark as holidays',
             table: {
-                type: { summary: "(string | Date)[]" },
-                defaultValue: { summary: "[]" },
+                type: { summary: '(string | Date)[]' },
+                defaultValue: { summary: '[]' },
             },
         },
         variant: {
-            control: "select",
-            options: ["desktop", "mobile"],
+            control: 'select',
+            options: ['desktop', 'mobile'],
         },
     },
     args: {
         isOpen: true,
-        variant: "desktop",
+        variant: 'desktop',
         valueOfMonths: 2,
         valueOfColumns: 2,
-        format: "DD MMM YYYY",
+        format: 'DD MMM YYYY',
         autoApply: true,
         showTooltip: true,
         minDate: today,
@@ -92,7 +93,7 @@ These dates can be visually distinguished and/or made non-selectable.
     render: (args) => ({
         components: { Rangepicker },
         setup() {
-            const modelValue = ref({ startDate: "", endDate: "" });
+            const modelValue = ref({ startDate: '', endDate: '' });
             const isOpen = ref(args.isOpen ?? true);
             return { args, modelValue, isOpen };
         },
@@ -107,8 +108,8 @@ These dates can be visually distinguished and/or made non-selectable.
           v-model:is-open="isOpen"
         />
       </div>
-    `
-    })
+    `,
+    }),
 };
 export default meta;
 /**
@@ -224,13 +225,7 @@ Combine both props for comprehensive date management.
  */
 export const BlockedDateRange = {
     args: {
-        disabledDates: [
-            getDate(10),
-            getDate(11),
-            getDate(12),
-            getDate(13),
-            getDate(14),
-        ],
+        disabledDates: [getDate(10), getDate(11), getDate(12), getDate(13), getDate(14)],
     },
     parameters: {
         docs: {
@@ -270,7 +265,8 @@ export const HolidayWeekends = {
             for (let i = 0; i < 30; i++) {
                 const date = getDate(i);
                 const day = date.getDay();
-                if (day === 5 || day === 6 || day === 0) { // Fri, Sat, Sun
+                if (day === 5 || day === 6 || day === 0) {
+                    // Fri, Sat, Sun
                     dates.push(new Date(date));
                 }
             }

package/dist/RangepickerTheming.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import RangepickerInput from "./RangepickerInput.vue";
+import type { Meta, StoryObj } from '@storybook/vue3';
+import RangepickerInput from './RangepickerInput.vue';
 /**
  * Stories demonstrating theming and color customization options
  * for the Rangepicker component.

package/dist/RangepickerTheming.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangepickerTheming.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerTheming.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,CAwGvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA0DxB,CAAC"}
+{"version":3,"file":"RangepickerTheming.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerTheming.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,CAwGvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA0DxB,CAAA"}

package/dist/RangepickerTheming.stories.js

@@ -1,11 +1,11 @@
-import { ref, watch } from "vue";
-import RangepickerInput from "./RangepickerInput.vue";
+import { ref, watch } from 'vue';
+import RangepickerInput from './RangepickerInput.vue';
 /**
  * Stories demonstrating theming and color customization options
  * for the Rangepicker component.
  */
 const meta = {
-    title: "Components/Rangepicker/Examples",
+    title: 'Components/Rangepicker/Examples',
     component: RangepickerInput,
     tags: ['autodocs'],
     parameters: {
@@ -33,64 +33,64 @@ Each instance can have its own color scheme using HEX color values.
     },
     argTypes: {
         primaryColor: {
-            control: "color",
-            description: "Primary color for selected dates and highlights (HEX format)",
+            control: 'color',
+            description: 'Primary color for selected dates and highlights (HEX format)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "undefined (uses default blue)" },
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined (uses default blue)' },
             },
         },
         secondaryColor: {
-            control: "color",
-            description: "Secondary color for hover states (HEX format)",
+            control: 'color',
+            description: 'Secondary color for hover states (HEX format)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "undefined (uses default light blue)" },
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined (uses default light blue)' },
             },
         },
         borderRadius: {
-            control: "text",
-            description: "Border radius for the calendar container (CSS value)",
+            control: 'text',
+            description: 'Border radius for the calendar container (CSS value)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "0.75rem" },
+                type: { summary: 'string' },
+                defaultValue: { summary: '0.75rem' },
             },
         },
         fontFamily: {
-            control: "text",
-            description: "Font family for the calendar (CSS font-family value)",
+            control: 'text',
+            description: 'Font family for the calendar (CSS font-family value)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "inherit" },
+                type: { summary: 'string' },
+                defaultValue: { summary: 'inherit' },
             },
         },
         variant: {
-            control: "select",
-            options: ["desktop", "mobile"],
+            control: 'select',
+            options: ['desktop', 'mobile'],
         },
         options: {
-            control: "object",
+            control: 'object',
         },
     },
     args: {
-        placeholder: "Check in / Check out",
-        id: "dates",
-        name: "dates",
-        variant: "desktop",
+        placeholder: 'Check in / Check out',
+        id: 'dates',
+        name: 'dates',
+        variant: 'desktop',
         options: {
             autoApply: true,
             minDate: new Date(),
             format: 'DD MMM YYYY',
             numberOfColumns: 2,
             numberOfMonths: 2,
-        }
+        },
     },
     render: (args) => ({
         components: { RangepickerInput },
         setup() {
-            const modelValue = ref(args.modelValue ?? "");
+            const modelValue = ref(args.modelValue ?? '');
             watch(() => args.modelValue, (value) => {
-                const nextValue = value ?? "";
+                const nextValue = value ?? '';
                 if (nextValue !== modelValue.value) {
                     modelValue.value = nextValue;
                 }
@@ -101,8 +101,8 @@ Each instance can have its own color scheme using HEX color values.
       <div style="padding: 2rem; background: #f5f5f5; min-height: 400px;">
         <RangepickerInput v-bind="args" v-model="modelValue" class="form-control mb-0 shadow-none text-black lg:pl-2 border-0 w-full" />
       </div>
-    `
-    })
+    `,
+    }),
 };
 export default meta;
 /**
@@ -110,18 +110,18 @@ export default meta;
  */
 export const ColorThemes = {
     args: {
-        primaryColor: "#ff00de",
-        secondaryColor: "#5a6258",
-        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        primaryColor: '#ff00de',
+        secondaryColor: '#5a6258',
+        modelValue: '02 Feb 2026 - 04 Feb 2026',
     },
     argTypes: {
         primaryColor: {
-            control: "color",
-            description: "Primary color for selected dates and highlights",
+            control: 'color',
+            description: 'Primary color for selected dates and highlights',
         },
         secondaryColor: {
-            control: "color",
-            description: "Secondary color for hover states",
+            control: 'color',
+            description: 'Secondary color for hover states',
         },
     },
     parameters: {
@@ -165,14 +165,14 @@ Use the color pickers below to customize your theme, or try these popular preset
  */
 export const BorderRadius = {
     args: {
-        borderRadius: "12px",
-        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        borderRadius: '12px',
+        modelValue: '02 Feb 2026 - 04 Feb 2026',
     },
     argTypes: {
         borderRadius: {
-            control: "select",
-            options: ["4px", "6px", "8px", "12px"],
-            description: "Border radius of the calendar container",
+            control: 'select',
+            options: ['4px', '6px', '8px', '12px'],
+            description: 'Border radius of the calendar container',
         },
     },
     parameters: {
@@ -207,22 +207,22 @@ You can also use any valid CSS value like \`"0.75rem"\` or \`"16px"\`.
  */
 export const FontFamily = {
     args: {
-        fontFamily: "Georgia, serif",
-        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        fontFamily: 'Georgia, serif',
+        modelValue: '02 Feb 2026 - 04 Feb 2026',
     },
     argTypes: {
         fontFamily: {
-            control: "select",
+            control: 'select',
             options: [
-                "inherit",
+                'inherit',
                 "'Inter', sans-serif",
                 "'Roboto', sans-serif",
                 "'Poppins', sans-serif",
                 "'Arial', sans-serif",
-                "Georgia, serif",
+                'Georgia, serif',
                 "'Courier New', monospace",
             ],
-            description: "Font family for the calendar",
+            description: 'Font family for the calendar',
         },
     },
     parameters: {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAA;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAA;AAC3C,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,eAAe,gBAAgB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAGxC,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,aAAa,EACd,CAAA;AAGD,wBAAgB,cAAc,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,GAAE,OAAO,CAAC,gBAAgB,CAAM;;;;;;;;;;;;;EAgBtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAA;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAA;AAC3C,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,eAAe,gBAAgB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAGxC,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,CAAA;AAGhH,wBAAgB,cAAc,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,GAAE,OAAO,CAAC,gBAAgB,CAAM;;;;;;;;;;;;;EAsBtF"}

package/dist/index.js

@@ -10,9 +10,15 @@ export { Rangepicker, RangepickerInput };
 export function useRangepicker(triggerRef, options = {}) {
     const isOpen = ref(false);
     const dateRange = ref({ startDate: '', endDate: '' });
-    const open = () => { isOpen.value = true; };
-    const close = () => { isOpen.value = false; };
-    const toggle = () => { isOpen.value = !isOpen.value; };
+    const open = () => {
+        isOpen.value = true;
+    };
+    const close = () => {
+        isOpen.value = false;
+    };
+    const toggle = () => {
+        isOpen.value = !isOpen.value;
+    };
     return {
         isOpen,
         dateRange,