@archpublicwebsite/rangepicker 1.2.0 → 1.2.5

package/dist/Rangepicker.vue.d.ts

@@ -17,8 +17,9 @@ declare const _default: import('vue').DefineComponent<RangepickerProps, {}, {},
     onDateSelected?: (date: Dayjs) => any;
     onRangeSelected?: (start: Dayjs, end: Dayjs) => any;
 }>, {
-    isOpen: boolean;
     variant: "desktop" | "mobile";
+    borderRadius: string;
+    isOpen: boolean;
     valueOfMonths: number;
     valueOfColumns: number;
     format: string;
@@ -26,7 +27,6 @@ declare const _default: import('vue').DefineComponent<RangepickerProps, {}, {},
     showTooltip: boolean;
     autoApply: boolean;
     position: "auto" | "top" | "bottom";
-    borderRadius: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     calendarRef: HTMLDivElement;
 }, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AAujBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,KAAK,EAAe,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;mBAgBjB,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;;;;;;;;;;;;;;AA0lBnE,wBAUG"}
+{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AA4jBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,KAAK,EAAe,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;mBAgBjB,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;;;;;;;;;;;;;;AA+lBnE,wBAUG"}

package/dist/RangepickerInput.vue.d.ts

@@ -1,47 +1,14 @@
-interface LitepickerOptions {
-    autoApply?: boolean;
-    allowRepick?: boolean;
-    dropdowns?: any;
-    startDate?: Date | string;
-    minDate?: Date | string;
-    maxDate?: Date | string;
-    format?: string;
-    numberOfColumns?: number;
-    numberOfMonths?: number;
-    singleMode?: boolean;
-    tooltipText?: any;
-    tooltipNumber?: any;
-    inlineMode?: boolean;
-    minDays?: number;
-    maxDays?: number;
-    showTooltip?: boolean;
-}
-interface Props {
-    id?: string;
-    close?: boolean;
-    modelValue?: string;
-    name?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    class?: string;
-    options?: LitepickerOptions;
-    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, {
+import { RangepickerInputProps } from './types';
+declare const _default: import('vue').DefineComponent<RangepickerInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
     focusin: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<RangepickerInputProps> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
     onFocusin?: () => any;
 }>, {
-    variant: "desktop" | "mobile";
     placeholder: string;
     readonly: boolean;
+    variant: "desktop" | "mobile";
     showClearButton: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     wrapperRef: HTMLDivElement;

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AAoNA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;;;;;;;;;;;;;;;;AAqRpD,wBAUG"}

package/dist/RangepickerModes.stories.d.ts

@@ -32,4 +32,9 @@ export declare const AutoApply: Story;
  * Gives users a chance to review before confirming.
  */
 export declare const ManualApply: Story;
+/**
+ * Show Clear Button mode displays a clear button to reset the selected dates.
+ * Allows users to quickly clear their selection.
+ */
+export declare const ShowClearButton: Story;
 //# sourceMappingURL=RangepickerModes.stories.d.ts.map

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

@@ -1 +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"}
+{"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,CAiIvC,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,KA2BxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA2B7B,CAAC"}

package/dist/RangepickerModes.stories.js

@@ -33,9 +33,45 @@ and behavior modes to fit various use cases.
                 defaultValue: { summary: "desktop" },
             },
         },
-        options: {
-            control: "object",
-            description: "Configuration options for the rangepicker",
+        autoApply: {
+            control: "boolean",
+            description: "Automatically apply selection without requiring an Apply button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        singleMode: {
+            control: "boolean",
+            description: "Enable single date mode instead of range",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        format: {
+            control: "text",
+            description: "Date format string (e.g., 'DD MMM YYYY')",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "'YYYY-MM-DD'" },
+            },
+        },
+        numberOfColumns: {
+            control: "number",
+            description: "Number of calendar columns to display",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "2" },
+            },
+        },
+        numberOfMonths: {
+            control: "number",
+            description: "Number of months to display",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "2" },
+            },
         },
         primaryColor: {
             control: "color",
@@ -45,28 +81,34 @@ and behavior modes to fit various use cases.
             control: "color",
             description: "Secondary color for hover states (HEX format)",
         },
+        showClearButton: {
+            control: "boolean",
+            description: "Show clear button to reset selection",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" },
+            },
+        },
     },
     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,
-        }
+        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 },
@@ -147,14 +189,12 @@ 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(),
-        }
+        autoApply: true,
+        singleMode: true,
+        format: 'DD MMM YYYY',
+        numberOfColumns: 1,
+        numberOfMonths: 1,
+        minDate: new Date(),
     },
     parameters: {
         docs: {
@@ -180,13 +220,11 @@ When enabled, clicking a date immediately selects it without requiring a second
 export const AutoApply = {
     args: {
         variant: "desktop",
-        options: {
-            autoApply: true,
-            format: 'DD MMM YYYY',
-            numberOfColumns: 2,
-            numberOfMonths: 2,
-            minDate: new Date(),
-        }
+        autoApply: true,
+        format: 'DD MMM YYYY',
+        numberOfColumns: 2,
+        numberOfMonths: 2,
+        minDate: new Date(),
     },
     parameters: {
         docs: {
@@ -212,13 +250,11 @@ When enabled, the selection is confirmed immediately after picking the end date.
 export const ManualApply = {
     args: {
         variant: "desktop",
-        options: {
-            autoApply: false,
-            format: 'DD MMM YYYY',
-            numberOfColumns: 2,
-            numberOfMonths: 2,
-            minDate: new Date(),
-        }
+        autoApply: false,
+        format: 'DD MMM YYYY',
+        numberOfColumns: 2,
+        numberOfMonths: 2,
+        minDate: new Date(),
     },
     parameters: {
         docs: {
@@ -237,3 +273,35 @@ When \`autoApply\` is set to \`false\`, users must explicitly confirm their date
         },
     },
 };
+/**
+ * Show Clear Button mode displays a clear button to reset the selected dates.
+ * Allows users to quickly clear their selection.
+ */
+export const ShowClearButton = {
+    args: {
+        variant: "desktop",
+        modelValue: "2026-02-10 - 2026-02-20",
+        showClearButton: true,
+        autoApply: true,
+        format: 'DD MMM YYYY',
+        numberOfColumns: 2,
+        numberOfMonths: 2,
+        minDate: new Date(),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Show Clear Button
+
+Display a clear button that allows users to reset the selected date range.
+
+- **Type**: \`boolean\`
+- **Default**: \`true\`
+
+When enabled, a clear button appears in the input field when dates are selected, allowing users to quickly clear their selection and start over. This is a custom prop on the RangepickerInput component, not part of the Litepicker options.
+        `,
+            },
+        },
+    },
+};

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import './styles/rangepicker.scss';
 import Rangepicker from './Rangepicker.vue';
 import RangepickerInput from './RangepickerInput.vue';
-import type { DateRange, RangepickerProps, RangepickerEmits, CalendarDay, CalendarMonth } from './types';
+import type { DateRange, RangepickerProps, RangepickerEmits, CalendarDay, CalendarMonth, RangepickerInputProps } from './types';
 export default RangepickerInput;
 export { Rangepicker, RangepickerInput };
-export type { RangepickerProps, RangepickerEmits, DateRange, CalendarDay, CalendarMonth };
+export type { RangepickerProps, RangepickerInputProps, RangepickerEmits, DateRange, CalendarDay, CalendarMonth };
 export declare function useRangepicker(triggerRef: any, options?: Partial<RangepickerProps>): {
     isOpen: import("vue").Ref<boolean, boolean>;
     dateRange: import("vue").Ref<{

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,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGxG,eAAe,gBAAgB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAGxC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,CAAA;AAGzF,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,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"}