@archpublicwebsite/rangepicker 1.1.0 → 1.2.0

package/dist/RangepickerConstraints.stories.js

@@ -0,0 +1,301 @@
+import { ref, watch } from "vue";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating date constraints and validation options
+ * for the Rangepicker component.
+ */
+const meta = {
+    title: "Components/Rangepicker/Constraints",
+    component: RangepickerInput,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+## Date Constraints & Validation
+
+Configure date constraints to limit the selectable date range. These options help
+enforce business rules like booking windows, minimum stay requirements, and blackout dates.
+        `,
+            },
+        },
+    },
+    argTypes: {
+        options: {
+            control: "object",
+            description: "Configuration options including date constraints",
+        },
+        variant: {
+            control: "select",
+            options: ["desktop", "mobile"],
+        },
+    },
+    args: {
+        placeholder: "Check in / Check out",
+        id: "dates",
+        name: "dates",
+        variant: "desktop",
+    },
+    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;
+// Helper to get future dates
+const today = new Date();
+const nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
+const nextMonth = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
+const threeMonthsLater = new Date(today.getTime() + 90 * 24 * 60 * 60 * 1000);
+/**
+ * Set a minimum date to prevent selection of past dates.
+ */
+export const MinDate = {
+    args: {
+        options: {
+            autoApply: true,
+            minDate: today,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Minimum Date
+
+Prevent selection of dates before a specified date.
+
+- **Type**: \`Date | string | Dayjs\`
+- **Default**: \`undefined\`
+
+Useful for preventing users from selecting past dates for future bookings.
+
+\`\`\`typescript
+options: {
+  minDate: new Date() // Today
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Set a maximum date to limit how far in the future users can select.
+ */
+export const MaxDate = {
+    args: {
+        options: {
+            autoApply: true,
+            minDate: today,
+            maxDate: threeMonthsLater,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Maximum Date
+
+Limit how far in the future dates can be selected.
+
+- **Type**: \`Date | string | Dayjs\`
+- **Default**: \`undefined\`
+
+Useful for booking systems that only allow reservations within a certain window.
+
+\`\`\`typescript
+options: {
+  minDate: new Date(),
+  maxDate: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000) // 3 months from now
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Combine minDate and maxDate to create a booking window.
+ */
+export const MinMaxDateRange = {
+    args: {
+        placeholder: "Select within booking window",
+        options: {
+            autoApply: true,
+            minDate: nextWeek,
+            maxDate: threeMonthsLater,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Min/Max Date Range
+
+Combine both constraints to create a specific booking window.
+
+In this example, bookings are only allowed starting from next week up to 3 months from now.
+
+\`\`\`typescript
+options: {
+  minDate: nextWeek,
+  maxDate: threeMonthsLater
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Require a minimum number of days in the selected range.
+ */
+export const MinDays = {
+    args: {
+        placeholder: "Minimum 3 nights",
+        options: {
+            autoApply: true,
+            minDate: today,
+            minDays: 3,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Minimum Days
+
+Require a minimum number of days in the range selection.
+
+- **Type**: \`number\`
+- **Default**: \`undefined\`
+
+Useful for enforcing minimum stay requirements in hotel bookings.
+
+\`\`\`typescript
+options: {
+  minDays: 3 // Minimum 3 nights stay
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Limit the maximum number of days that can be selected.
+ */
+export const MaxDays = {
+    args: {
+        placeholder: "Maximum 14 nights",
+        options: {
+            autoApply: true,
+            minDate: today,
+            maxDays: 14,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Maximum Days
+
+Limit the maximum number of days in the range selection.
+
+- **Type**: \`number\`
+- **Default**: \`undefined\`
+
+Useful for limiting booking duration.
+
+\`\`\`typescript
+options: {
+  maxDays: 14 // Maximum 14 nights stay
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Combine minDays and maxDays to enforce a stay duration range.
+ */
+export const MinMaxDays = {
+    args: {
+        placeholder: "3-7 nights stay",
+        options: {
+            autoApply: true,
+            minDate: today,
+            minDays: 3,
+            maxDays: 7,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Min/Max Days Combined
+
+Enforce a specific range of allowed stay durations.
+
+In this example, stays must be between 3 and 7 nights.
+
+\`\`\`typescript
+options: {
+  minDays: 3,
+  maxDays: 7
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};

package/dist/RangepickerFormatting.stories.d.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating formatting and display options
+ * for the Rangepicker component.
+ */
+declare const meta: Meta<typeof RangepickerInput>;
+export default meta;
+type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Default format: DD MMM YYYY (e.g., "26 Jan 2026")
+ */
+export declare const DefaultFormat: Story;
+/**
+ * ISO format: YYYY-MM-DD (e.g., "2026-01-26")
+ */
+export declare const ISOFormat: Story;
+/**
+ * Regional formats with dropdown to switch between US and European
+ */
+export declare const RegionalFormats: Story;
+/**
+ * Full month name format: D MMMM YYYY (e.g., "26 January 2026")
+ */
+export declare const FullMonthFormat: Story;
+/**
+ * Short format without year: DD MMM (e.g., "26 Jan")
+ */
+export declare const ShortFormat: Story;
+/**
+ * Custom placeholder text
+ */
+export declare const CustomPlaceholder: Story;
+//# sourceMappingURL=RangepickerFormatting.stories.d.ts.map

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

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

package/dist/RangepickerFormatting.stories.js

@@ -0,0 +1,312 @@
+import { ref, watch } from "vue";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating formatting and display options
+ * for the Rangepicker component.
+ */
+const meta = {
+    title: "Components/Rangepicker/Formatting",
+    component: RangepickerInput,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+## Formatting
+
+Configure how dates are displayed in the input field and calendar.
+The component uses [dayjs](https://day.js.org/docs/en/display/format) format tokens.
+
+### Common Format Tokens
+
+| Token | Output | Description |
+|-------|--------|-------------|
+| \`DD\` | 01-31 | Day of month (2 digits) |
+| \`D\` | 1-31 | Day of month |
+| \`MMM\` | Jan-Dec | Month abbreviation |
+| \`MMMM\` | January-December | Full month name |
+| \`MM\` | 01-12 | Month (2 digits) |
+| \`YYYY\` | 2026 | 4-digit year |
+| \`YY\` | 26 | 2-digit year |
+        `,
+            },
+        },
+    },
+    argTypes: {
+        placeholder: {
+            control: "text",
+            description: "Placeholder text shown when no date is selected",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Select dates" },
+            },
+        },
+        options: {
+            control: "object",
+            description: "Configuration options including format settings",
+        },
+        variant: {
+            control: "select",
+            options: ["desktop", "mobile"],
+        },
+    },
+    args: {
+        id: "dates",
+        name: "dates",
+        variant: "desktop",
+    },
+    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 v-if="modelValue" style="margin-top: 1rem; padding: 0.75rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
+          <strong style="color: #374151;">Selected: </strong> 
+          <span style="color: #059669; font-family: monospace;">{{ modelValue }}</span>
+        </div>
+      </div>
+    `
+    })
+};
+export default meta;
+/**
+ * Default format: DD MMM YYYY (e.g., "26 Jan 2026")
+ */
+export const DefaultFormat = {
+    args: {
+        placeholder: "Check in / Check out",
+        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Default Format
+
+The default date format: \`DD MMM YYYY\`
+
+**Output**: \`26 Jan 2026 - 30 Jan 2026\`
+
+\`\`\`typescript
+options: {
+  format: 'DD MMM YYYY'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * ISO format: YYYY-MM-DD (e.g., "2026-01-26")
+ */
+export const ISOFormat = {
+    args: {
+        placeholder: "Select dates (ISO format)",
+        modelValue: "2026-02-02 - 2026-02-04",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'YYYY-MM-DD',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### ISO Format
+
+Standard ISO date format: \`YYYY-MM-DD\`
+
+**Output**: \`2026-01-26 - 2026-01-30\`
+
+Useful for APIs and databases that expect ISO format.
+
+\`\`\`typescript
+options: {
+  format: 'YYYY-MM-DD'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Regional formats with dropdown to switch between US and European
+ */
+export const RegionalFormats = {
+    args: {
+        placeholder: "Select dates",
+        modelValue: "02/02/2026 - 02/04/2026",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'MM/DD/YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    argTypes: {
+        'options.format': {
+            control: 'select',
+            options: ['MM/DD/YYYY', 'DD/MM/YYYY'],
+            description: 'Date format',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Regional Formats
+
+Switch between US and European date formats using the dropdown control.
+
+**US Format** (\`MM/DD/YYYY\`): \`01/26/2026 - 01/30/2026\`
+
+**European Format** (\`DD/MM/YYYY\`): \`26/01/2026 - 30/01/2026\`
+
+\`\`\`typescript
+// US Format
+options: {
+  format: 'MM/DD/YYYY'
+}
+
+// European Format
+options: {
+  format: 'DD/MM/YYYY'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Full month name format: D MMMM YYYY (e.g., "26 January 2026")
+ */
+export const FullMonthFormat = {
+    args: {
+        placeholder: "Select dates",
+        modelValue: "2 February 2026 - 4 February 2026",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'D MMMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Full Month Name
+
+Display full month name: \`D MMMM YYYY\`
+
+**Output**: \`26 January 2026 - 30 January 2026\`
+
+\`\`\`typescript
+options: {
+  format: 'D MMMM YYYY'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Short format without year: DD MMM (e.g., "26 Jan")
+ */
+export const ShortFormat = {
+    args: {
+        placeholder: "Select dates",
+        modelValue: "02 Feb - 04 Feb",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Short Format (No Year)
+
+Compact format without year: \`DD MMM\`
+
+**Output**: \`26 Jan - 30 Jan\`
+
+Useful for short-term bookings where the year is implied.
+
+\`\`\`typescript
+options: {
+  format: 'DD MMM'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Custom placeholder text
+ */
+export const CustomPlaceholder = {
+    args: {
+        placeholder: "When are you traveling?",
+        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Custom Placeholder
+
+Set a custom placeholder text for the input field.
+
+- **Type**: \`string\`
+- **Default**: \`'Select dates'\`
+
+\`\`\`vue
+<RangepickerInput placeholder="When are you traveling?" />
+\`\`\`
+        `,
+            },
+        },
+    },
+};

package/dist/RangepickerInput.stories.d.ts

@@ -1,14 +1,53 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 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
+ */
 declare const meta: Meta<typeof RangepickerInput>;
 export default meta;
 type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * 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 declare const Default: Story;
-export declare const Mobile: Story;
-export declare const CustomBlueColor: Story;
-export declare const CustomPurpleColor: Story;
-export declare const CustomRedColor: Story;
-export declare const CustomGreenColor: Story;
-export declare const CustomOrangeColor: Story;
-export declare const CustomPinkColor: Story;
 //# sourceMappingURL=RangepickerInput.stories.d.ts.map

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

@@ -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,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA4EvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC"}
+{"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,OAAO,EAAE,KAqBrB,CAAC"}