@archpublicwebsite/rangepicker 1.1.0 → 1.2.0

package/dist/RangepickerInput.stories.js

@@ -1,27 +1,123 @@
 import { ref, watch } from "vue";
 import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * # Rangepicker
+ *
+ * A flexible date range picker component for Vue 3 applications.
+ *
+ * ## Features
+ *
+ * - 📅 Date range selection with visual calendar
+ * - 📱 Responsive design (desktop dropdown / mobile bottom sheet)
+ * - 🎨 Customizable colors via props
+ * - 🔒 Date constraints (min/max dates, min/max days)
+ * - 🎯 Holiday and disabled dates support
+ * - 🌍 Flexible date formatting via dayjs
+ *
+ * ## Quick Start
+ *
+ * ```vue
+ * <template>
+ *   <RangepickerInput
+ *     v-model="dates"
+ *     placeholder="Check in / Check out"
+ *     :options="{ minDate: new Date(), format: 'DD MMM YYYY' }"
+ *   />
+ * </template>
+ * ```
+ *
+ * ## Props Documentation
+ *
+ * Explore the categorized stories in the sidebar:
+ * - **Modes** - Display variants and behavior modes
+ * - **Constraints** - Date limits and validation
+ * - **Formatting** - Date format patterns
+ * - **Theming** - Color customization
+ * - **Special Dates** - Holidays and disabled dates
+ */
 const meta = {
-    title: "Components/Rangepicker",
+    title: "Components/Rangepicker/Overview",
     component: RangepickerInput,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A flexible date range picker component with responsive design, 
+customizable theming, and comprehensive date constraints.
+
+See the **Props** categories in the sidebar for detailed documentation.
+        `,
+            },
+        },
+    },
     argTypes: {
         modelValue: {
-            control: "text"
+            control: "text",
+            description: "Two-way binding for formatted date range string",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: '""' },
+            },
         },
-        options: {
-            control: "object"
+        placeholder: {
+            control: "text",
+            description: "Placeholder text shown when no date is selected",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Select dates" },
+            },
         },
         variant: {
             control: "select",
-            options: ["desktop", "mobile"]
+            options: ["desktop", "mobile"],
+            description: "Display variant - desktop shows dropdown, mobile shows bottom sheet",
+            table: {
+                type: { summary: "'desktop' | 'mobile'" },
+                defaultValue: { summary: "desktop" },
+            },
         },
         primaryColor: {
             control: "color",
-            description: "Primary color for selected dates and highlights"
+            description: "Primary color for selected dates and highlights (HEX format)",
+            table: {
+                type: { summary: "string" },
+            },
         },
         secondaryColor: {
             control: "color",
-            description: "Secondary color for hover states"
-        }
+            description: "Secondary color for hover states (HEX format)",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        options: {
+            control: "object",
+            description: "Configuration options for the rangepicker",
+            table: {
+                type: { summary: "LitepickerOptions" },
+            },
+        },
+        id: {
+            control: "text",
+            description: "HTML id attribute for the input",
+        },
+        name: {
+            control: "text",
+            description: "HTML name attribute for the input",
+        },
+        readonly: {
+            control: "boolean",
+            description: "Whether the input is readonly",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" },
+            },
+        },
+        close: {
+            control: "boolean",
+            description: "Programmatic control to close the picker",
+        },
     },
     args: {
         modelValue: "",
@@ -66,52 +162,43 @@ const meta = {
             return { args, modelValue };
         },
         template: `
-      <div style="padding: 2rem; background: #f5f5f5; min-height: 360px;">
+      <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;
-export const Default = {};
-export const Mobile = {
-    args: {
-        variant: "mobile"
-    }
-};
-export const CustomBlueColor = {
-    args: {
-        primaryColor: "#3b82f6",
-        secondaryColor: "#60a5fa"
-    }
-};
-export const CustomPurpleColor = {
-    args: {
-        primaryColor: "#8b5cf6",
-        secondaryColor: "#a78bfa"
-    }
-};
-export const CustomRedColor = {
-    args: {
-        primaryColor: "#ef4444",
-        secondaryColor: "#f87171"
-    }
-};
-export const CustomGreenColor = {
-    args: {
-        primaryColor: "#10b981",
-        secondaryColor: "#34d399"
-    }
-};
-export const CustomOrangeColor = {
-    args: {
-        primaryColor: "#f97316",
-        secondaryColor: "#fb923c"
-    }
-};
-export const CustomPinkColor = {
-    args: {
-        primaryColor: "#ec4899",
-        secondaryColor: "#f472b6"
-    }
+/**
+ * Default rangepicker with standard configuration.
+ * Click the input to open the calendar and select a date range.
+ *
+ * Explore the categorized stories in the sidebar to learn about different features:
+ * - **Modes** - Display variants (desktop/mobile) and behavior modes
+ * - **Constraints** - Date limits and validation rules
+ * - **Formatting** - Date format patterns
+ * - **Theming** - Color and visual customization
+ * - **Special Dates** - Holidays and disabled dates
+ */
+export const Default = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Default Configuration
+
+The default rangepicker setup with:
+- Desktop variant (dropdown calendar)
+- Auto-apply enabled
+- 2-month view
+- Format: DD MMM YYYY
+- Min date: Today
+
+Click the input field to open the calendar.
+
+> 💡 **Tip**: Check the other story categories in the sidebar for detailed examples of all features.
+        `,
+            },
+        },
+    },
 };

package/dist/RangepickerInput.vue.d.ts

@@ -28,6 +28,9 @@ interface Props {
     variant?: 'desktop' | 'mobile';
     primaryColor?: string;
     secondaryColor?: string;
+    fontFamily?: string;
+    borderRadius?: string;
+    showClearButton?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
@@ -39,6 +42,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     variant: "desktop" | "mobile";
     placeholder: string;
     readonly: boolean;
+    showClearButton: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     wrapperRef: HTMLDivElement;
     inputRef: HTMLInputElement;

package/dist/RangepickerInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AAgNA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,GAAG,CAAA;IACjB,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;;;;;;;;aAHW,SAAS,GAAG,QAAQ;iBAJhB,MAAM;cACT,OAAO;;;;;AA0NpB,wBAUG"}
+{"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AAkRA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,GAAG,CAAA;IACjB,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;;;;;;;;aANW,SAAS,GAAG,QAAQ;iBAJhB,MAAM;cACT,OAAO;qBAQA,OAAO;;;;;AA4P3B,wBAUG"}

package/dist/RangepickerModes.stories.d.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating different display modes and behaviors
+ * for the Rangepicker component.
+ */
+declare const meta: Meta<typeof RangepickerInput>;
+export default meta;
+type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Desktop variant displays the calendar as a dropdown below the input field.
+ * Best for desktop/laptop screens with sufficient viewport space.
+ */
+export declare const DesktopVariant: Story;
+/**
+ * Mobile variant displays the calendar as a bottom sheet overlay.
+ * Optimized for touch devices and smaller screens.
+ */
+export declare const MobileVariant: Story;
+/**
+ * Single date mode allows selecting only one date instead of a range.
+ * Useful for single date inputs like birth dates or event dates.
+ */
+export declare const SingleMode: Story;
+/**
+ * Auto Apply mode automatically confirms the selection when both dates are picked.
+ * No need to click an Apply/Confirm button.
+ */
+export declare const AutoApply: Story;
+/**
+ * Manual Apply mode requires clicking an Apply button to confirm selection.
+ * Gives users a chance to review before confirming.
+ */
+export declare const ManualApply: Story;
+//# sourceMappingURL=RangepickerModes.stories.d.ts.map

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

@@ -0,0 +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,CAuFvC,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,KA6BxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KA2BzB,CAAC"}

package/dist/RangepickerModes.stories.js

@@ -0,0 +1,239 @@
+import { ref, watch } from "vue";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating different display modes and behaviors
+ * for the Rangepicker component.
+ */
+const meta = {
+    title: "Components/Rangepicker/Modes",
+    component: RangepickerInput,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+## Modes
+
+Set the default mode for the rangepicker. The component supports different display variants
+and behavior modes to fit various use cases.
+
+> **TIP**: Depending on the mode, the picker behavior might be different,
+> so make sure to use the proper configuration.
+        `,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["desktop", "mobile"],
+            description: "Display variant - desktop shows dropdown, mobile shows bottom sheet",
+            table: {
+                type: { summary: "'desktop' | 'mobile'" },
+                defaultValue: { summary: "desktop" },
+            },
+        },
+        options: {
+            control: "object",
+            description: "Configuration options for the rangepicker",
+        },
+        primaryColor: {
+            control: "color",
+            description: "Primary color for selected dates and highlights (HEX format)",
+        },
+        secondaryColor: {
+            control: "color",
+            description: "Secondary color for hover states (HEX format)",
+        },
+    },
+    args: {
+        placeholder: "Check in / Check out",
+        id: "dates",
+        name: "dates",
+        variant: "desktop",
+        options: {
+            autoApply: true,
+            allowRepick: true,
+            dropdowns: {
+                minYear: new Date().getFullYear(),
+                maxYear: new Date().getFullYear() + 2,
+                months: true,
+                years: true,
+            },
+            startDate: new Date(),
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            singleMode: false,
+        }
+    },
+    render: (args) => ({
+        components: { RangepickerInput },
+        setup() {
+            const modelValue = ref(args.modelValue ?? "");
+            watch(() => args.modelValue, (value) => {
+                const nextValue = value ?? "";
+                if (nextValue !== modelValue.value) {
+                    modelValue.value = nextValue;
+                }
+            });
+            return { args, modelValue };
+        },
+        template: `
+      <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;
+/**
+ * Desktop variant displays the calendar as a dropdown below the input field.
+ * Best for desktop/laptop screens with sufficient viewport space.
+ */
+export const DesktopVariant = {
+    args: {
+        variant: "desktop",
+        primaryColor: "#ff1b1b"
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Desktop Variant
+
+The default display mode. Shows the calendar as a floating dropdown below the input.
+
+- **Type**: \`'desktop' | 'mobile'\`
+- **Default**: \`'desktop'\`
+
+Best suited for desktop and laptop screens where there's sufficient viewport space.
+        `,
+            },
+        },
+    },
+};
+/**
+ * Mobile variant displays the calendar as a bottom sheet overlay.
+ * Optimized for touch devices and smaller screens.
+ */
+export const MobileVariant = {
+    args: {
+        variant: "mobile",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Mobile Variant
+
+Displays the calendar as a bottom sheet overlay, optimized for mobile devices.
+
+- **Type**: \`'desktop' | 'mobile'\`
+- **Value**: \`'mobile'\`
+
+Provides a touch-friendly interface with larger tap targets.
+        `,
+            },
+        },
+    },
+};
+/**
+ * Single date mode allows selecting only one date instead of a range.
+ * Useful for single date inputs like birth dates or event dates.
+ */
+export const SingleMode = {
+    args: {
+        variant: "desktop",
+        placeholder: "Select date",
+        options: {
+            autoApply: true,
+            singleMode: true,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 1,
+            numberOfMonths: 1,
+            minDate: new Date(),
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Single Mode
+
+Enable selecting a single date instead of a date range.
+
+- **Type**: \`boolean\`
+- **Default**: \`false\`
+
+When enabled, clicking a date immediately selects it without requiring a second click for the end date.
+        `,
+            },
+        },
+    },
+};
+/**
+ * Auto Apply mode automatically confirms the selection when both dates are picked.
+ * No need to click an Apply/Confirm button.
+ */
+export const AutoApply = {
+    args: {
+        variant: "desktop",
+        options: {
+            autoApply: true,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            minDate: new Date(),
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Auto Apply
+
+Automatically apply selection without requiring an Apply button click.
+
+- **Type**: \`boolean\`
+- **Default**: \`false\`
+
+When enabled, the selection is confirmed immediately after picking the end date. When disabled, users must click an Apply button to confirm.
+        `,
+            },
+        },
+    },
+};
+/**
+ * Manual Apply mode requires clicking an Apply button to confirm selection.
+ * Gives users a chance to review before confirming.
+ */
+export const ManualApply = {
+    args: {
+        variant: "desktop",
+        options: {
+            autoApply: false,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            minDate: new Date(),
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Manual Apply
+
+Require user to click Apply button to confirm their selection.
+
+- **Type**: \`boolean\`
+- **Value**: \`false\`
+
+When \`autoApply\` is set to \`false\`, users must explicitly confirm their date selection by clicking an Apply button. This gives users a chance to review their selection before confirming.
+        `,
+            },
+        },
+    },
+};

package/dist/RangepickerSpecialDates.stories.d.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import Rangepicker from "./Rangepicker.vue";
+/**
+ * Stories demonstrating special dates functionality
+ * including holidays and disabled dates.
+ */
+declare const meta: Meta<typeof Rangepicker>;
+export default meta;
+type Story = StoryObj<typeof Rangepicker>;
+/**
+ * Disable specific dates to prevent selection.
+ * In this example, all Tuesdays are disabled.
+ */
+export declare const DisabledDates: Story;
+/**
+ * Mark specific dates as holidays with visual styling.
+ */
+export declare const Holidays: Story;
+/**
+ * Combine disabled dates and holidays for comprehensive date management.
+ */
+export declare const CombinedSpecialDates: Story;
+/**
+ * Block specific date ranges (e.g., maintenance periods).
+ */
+export declare const BlockedDateRange: Story;
+/**
+ * Holiday weekends - mark Friday through Sunday as holidays.
+ */
+export declare const HolidayWeekends: Story;
+//# sourceMappingURL=RangepickerSpecialDates.stories.d.ts.map

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

@@ -0,0 +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"}