@archpublicwebsite/rangepicker 1.0.14 → 1.0.18

package/README.md

@@ -134,12 +134,58 @@ const dates3 = ref('')
 </template>
 ```
 
+### Font Customization
+
+Use custom fonts to match your brand typography:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { RangepickerInput } from '@archpublicwebsite/rangepicker'
+
+const dates1 = ref('')
+const dates2 = ref('')
+const dates3 = ref('')
+</script>
+
+<template>
+  <!-- Roboto font -->
+  <RangepickerInput
+    v-model="dates1"
+    font-family="'Roboto', sans-serif"
+    primary-color="#3b82f6"
+    placeholder="With Roboto"
+  />
+
+  <!-- Poppins font -->
+  <RangepickerInput
+    v-model="dates2"
+    font-family="'Poppins', sans-serif"
+    primary-color="#8b5cf6"
+    placeholder="With Poppins"
+  />
+
+  <!-- Inherit from parent (default) -->
+  <RangepickerInput
+    v-model="dates3"
+    placeholder="Inherits parent font"
+  />
+</template>
+
+<style>
+/* Import fonts if needed */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+</style>
+```
+
 ### Color Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `primary-color` | `string` | - | Main color for selected dates and buttons (HEX format, e.g., `#3b82f6`) |
 | `secondary-color` | `string` | - | Color for hover states and secondary elements (HEX format, optional) |
+| `font-family` | `string` | `inherit` | Custom font family (e.g., `'Roboto', sans-serif`, `'Poppins', sans-serif`) |
 
 **Features:**
 - ✅ **Scoped per instance** - Multiple pickers can have different colors simultaneously
@@ -147,6 +193,7 @@ const dates3 = ref('')
 - ✅ **HEX format** - Standard 3 or 6 digit HEX colors (e.g., `#3b82f6`, `#fff`)
 - ✅ **Auto-conversion** - Automatically converts HEX to RGB for CSS variables
 - ✅ **Optional** - Falls back to default theme if not provided
+- ✅ **Custom fonts** - Use any font family, inherits from parent by default
 
 ## Framework Compatibility
 

package/dist/RangepickerConstraints.stories.d.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating date constraints and validation options
+ * for the Rangepicker component.
+ */
+declare const meta: Meta<typeof RangepickerInput>;
+export default meta;
+type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Set a minimum date to prevent selection of past dates.
+ */
+export declare const MinDate: Story;
+/**
+ * Set a maximum date to limit how far in the future users can select.
+ */
+export declare const MaxDate: Story;
+/**
+ * Combine minDate and maxDate to create a booking window.
+ */
+export declare const MinMaxDateRange: Story;
+/**
+ * Require a minimum number of days in the selected range.
+ */
+export declare const MinDays: Story;
+/**
+ * Limit the maximum number of days that can be selected.
+ */
+export declare const MaxDays: Story;
+/**
+ * Combine minDays and maxDays to enforce a stay duration range.
+ */
+export declare const MinMaxDays: Story;
+//# sourceMappingURL=RangepickerConstraints.stories.d.ts.map

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

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

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,42 @@
+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;
+/**
+ * US format: MM/DD/YYYY (e.g., "01/26/2026")
+ */
+export declare const USFormat: Story;
+/**
+ * European format: DD/MM/YYYY (e.g., "26/01/2026")
+ */
+export declare const EuropeanFormat: 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;
+/**
+ * Booking-style placeholder
+ */
+export declare const BookingPlaceholder: 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,CA0EvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAgCvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KA8BtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KA8B7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA6B/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KA8BhC,CAAC"}