@archpublicwebsite/rangepicker 1.0.13 → 1.0.18

package/dist/RangepickerModes.stories.js

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

package/dist/RangepickerSpecialDates.stories.js

@@ -0,0 +1,302 @@
+import { ref } from "vue";
+import Rangepicker from "./Rangepicker.vue";
+// Helper to generate dates
+const today = new Date();
+const 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 = () => {
+    const dates = [];
+    for (let i = 0; i < 60; i++) {
+        const date = getDate(i);
+        if (date.getDay() === 2) { // Tuesday
+            dates.push(new Date(date));
+        }
+    }
+    return dates;
+};
+// Generate sample holidays
+const 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/Special Dates",
+    component: Rangepicker,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+## Special Dates
+
+Configure special dates such as holidays and disabled dates.
+These dates can be visually distinguished and/or made non-selectable.
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| \`disabledDates\` | \`(string \\| Date)[]\` | Array of dates that cannot be selected |
+| \`holidays\` | \`(string \\| Date)[]\` | Array of dates marked as holidays (visually styled) |
+
+> **INFO**: Disabled dates appear grayed out and cannot be clicked.
+> Holiday dates are visually highlighted but remain selectable unless also in disabledDates.
+        `,
+            },
+        },
+    },
+    argTypes: {
+        disabledDates: {
+            control: "object",
+            description: "Array of dates that should be disabled for selection",
+            table: {
+                type: { summary: "(string | Date)[]" },
+                defaultValue: { summary: "[]" },
+            },
+        },
+        holidays: {
+            control: "object",
+            description: "Array of dates to mark as holidays",
+            table: {
+                type: { summary: "(string | Date)[]" },
+                defaultValue: { summary: "[]" },
+            },
+        },
+        variant: {
+            control: "select",
+            options: ["desktop", "mobile"],
+        },
+    },
+    args: {
+        isOpen: true,
+        variant: "desktop",
+        valueOfMonths: 2,
+        valueOfColumns: 2,
+        format: "DD MMM YYYY",
+        autoApply: true,
+        showTooltip: true,
+        minDate: today,
+    },
+    render: (args) => ({
+        components: { Rangepicker },
+        setup() {
+            const modelValue = ref({ startDate: "", endDate: "" });
+            const isOpen = ref(args.isOpen ?? true);
+            return { args, modelValue, isOpen };
+        },
+        template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 450px;">
+        <p style="margin-bottom: 1rem; color: #666; font-size: 14px;">
+          Calendar is displayed inline for demonstration. In normal usage, it appears as a popup.
+        </p>
+        <Rangepicker 
+          v-bind="args" 
+          v-model="modelValue" 
+          v-model:is-open="isOpen"
+        />
+      </div>
+    `
+    })
+};
+export default meta;
+/**
+ * Disable specific dates to prevent selection.
+ * In this example, all Tuesdays are disabled.
+ */
+export const DisabledDates = {
+    args: {
+        disabledDates: generateDisabledDates(),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Disabled Dates
+
+Prevent selection of specific dates by passing an array of dates to \`disabledDates\`.
+
+In this example, all Tuesdays for the next 2 months are disabled.
+
+\`\`\`typescript
+const disabledDates = [
+  new Date('2026-01-27'),
+  new Date('2026-02-03'),
+  new Date('2026-02-10'),
+  // ...
+];
+
+<Rangepicker :disabled-dates="disabledDates" />
+\`\`\`
+
+**Use cases:**
+- Block fully booked dates
+- Disable maintenance days
+- Prevent selection of past dates
+        `,
+            },
+        },
+    },
+};
+/**
+ * Mark specific dates as holidays with visual styling.
+ */
+export const Holidays = {
+    args: {
+        holidays: generateHolidays(),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Holidays
+
+Mark specific dates as holidays. These dates are visually distinguished
+but remain selectable unless also in \`disabledDates\`.
+
+\`\`\`typescript
+const holidays = [
+  new Date('2026-01-01'), // New Year's Day
+  new Date('2026-12-25'), // Christmas
+  new Date('2026-12-26'), // Boxing Day
+];
+
+<Rangepicker :holidays="holidays" />
+\`\`\`
+
+**Use cases:**
+- Highlight public holidays
+- Mark special rate days
+- Show peak season dates
+        `,
+            },
+        },
+    },
+};
+/**
+ * Combine disabled dates and holidays for comprehensive date management.
+ */
+export const CombinedSpecialDates = {
+    args: {
+        disabledDates: generateDisabledDates(),
+        holidays: generateHolidays(),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Combined: Disabled Dates & Holidays
+
+Combine both props for comprehensive date management.
+
+- **Disabled dates** (Tuesdays): Cannot be selected, shown grayed out
+- **Holidays**: Visually highlighted, can be selected
+
+\`\`\`typescript
+<Rangepicker 
+  :disabled-dates="blockedDates" 
+  :holidays="holidayDates" 
+/>
+\`\`\`
+
+**Real-world example:**
+- Holidays with premium pricing
+- Maintenance days that block bookings
+- Seasonal closures
+        `,
+            },
+        },
+    },
+};
+/**
+ * Block specific date ranges (e.g., maintenance periods).
+ */
+export const BlockedDateRange = {
+    args: {
+        disabledDates: [
+            getDate(10),
+            getDate(11),
+            getDate(12),
+            getDate(13),
+            getDate(14),
+        ],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Blocked Date Range
+
+Block a consecutive range of dates (e.g., for maintenance or closures).
+
+In this example, a 5-day period starting 10 days from now is blocked.
+
+\`\`\`typescript
+// Block 5 consecutive days
+const maintenancePeriod = [
+  new Date('2026-02-05'),
+  new Date('2026-02-06'),
+  new Date('2026-02-07'),
+  new Date('2026-02-08'),
+  new Date('2026-02-09'),
+];
+
+<Rangepicker :disabled-dates="maintenancePeriod" />
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Holiday weekends - mark Friday through Sunday as holidays.
+ */
+export const HolidayWeekends = {
+    args: {
+        holidays: (() => {
+            const dates = [];
+            // Find the next 4 weekends and mark them as holidays
+            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
+                    dates.push(new Date(date));
+                }
+            }
+            return dates;
+        })(),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Holiday Weekends
+
+Mark all weekends as holidays/special rate days.
+
+\`\`\`typescript
+const weekends = dates.filter(date => {
+  const day = date.getDay();
+  return day === 0 || day === 5 || day === 6; // Sun, Fri, Sat
+});
+
+<Rangepicker :holidays="weekends" />
+\`\`\`
+
+**Use case:** Highlight weekend premium pricing for hotels.
+        `,
+            },
+        },
+    },
+};

package/dist/RangepickerTheming.stories.d.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating theming and color customization options
+ * for the Rangepicker component.
+ */
+declare const meta: Meta<typeof RangepickerInput>;
+export default meta;
+type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Default theme with no custom colors applied.
+ */
+export declare const DefaultTheme: Story;
+/**
+ * Blue theme - professional and trustworthy.
+ */
+export declare const BlueTheme: Story;
+/**
+ * Purple theme - creative and modern.
+ */
+export declare const PurpleTheme: Story;
+/**
+ * Red theme - bold and attention-grabbing.
+ */
+export declare const RedTheme: Story;
+/**
+ * Green theme - natural and calming.
+ */
+export declare const GreenTheme: Story;
+/**
+ * Orange theme - warm and energetic.
+ */
+export declare const OrangeTheme: Story;
+/**
+ * Pink theme - playful and vibrant.
+ */
+export declare const PinkTheme: Story;
+/**
+ * Teal theme - fresh and modern.
+ */
+export declare const TealTheme: Story;
+/**
+ * Indigo theme - elegant and sophisticated.
+ */
+export declare const IndigoTheme: Story;
+/**
+ * Dark theme - sleek and modern.
+ */
+export declare const DarkTheme: Story;
+/**
+ * Interactive color picker - try your own colors!
+ */
+export declare const CustomColors: Story;
+//# sourceMappingURL=RangepickerTheming.stories.d.ts.map

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

@@ -0,0 +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,CAwFvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC"}