@archpublicwebsite/rangepicker 1.0.9 → 1.0.13

package/dist/RangepickerInput.stories.js

@@ -1,68 +1,26 @@
 import { ref, watch } from "vue";
 import RangepickerInput from "./RangepickerInput.vue";
-import StoryWrapper from "./StoryWrapper.vue";
-/**
- * RangepickerInput is a date range picker component that provides an intuitive
- * interface for selecting date ranges. It supports both desktop and mobile variants,
- * custom styling, and various configuration options.
- *
- * ## Features
- * - Desktop and mobile variants
- * - Custom color theming
- * - Date restrictions (min/max dates, min/max days)
- * - Multiple date formats
- * - Tooltip support showing number of nights
- * - Auto-apply or manual confirmation
- */
 const meta = {
-    title: "Components/Rangepicker/Input",
+    title: "Components/Rangepicker",
     component: RangepickerInput,
-    tags: ['autodocs'],
     argTypes: {
         modelValue: {
-            control: "text",
-            description: "The selected date range in format 'DD MMM YYYY - DD MMM YYYY'"
+            control: "text"
         },
-        placeholder: {
-            control: "text",
-            description: "Placeholder text shown when no date is selected"
+        options: {
+            control: "object"
         },
         variant: {
             control: "select",
-            options: ["desktop", "mobile"],
-            description: "Display variant - desktop shows side-by-side calendars, mobile shows stacked"
+            options: ["desktop", "mobile"]
         },
         primaryColor: {
             control: "color",
-            description: "Primary color for selected dates and highlights (hex format)"
+            description: "Primary color for selected dates and highlights"
         },
         secondaryColor: {
             control: "color",
-            description: "Secondary color for hover states (hex format)"
-        },
-        id: {
-            control: "text",
-            description: "HTML id attribute for the input element"
-        },
-        name: {
-            control: "text",
-            description: "HTML name attribute for form submission"
-        },
-        readonly: {
-            control: "boolean",
-            description: "Whether the input is readonly"
-        },
-        options: {
-            control: "object",
-            description: "Litepicker configuration options"
-        },
-        'onUpdate:modelValue': {
-            action: 'update:modelValue',
-            description: "Emitted when date range changes"
-        },
-        'onFocusin': {
-            action: 'focusin',
-            description: "Emitted when input receives focus"
+            description: "Secondary color for hover states"
         }
     },
     args: {
@@ -71,7 +29,6 @@ const meta = {
         id: "dates",
         name: "dates",
         variant: "desktop",
-        readonly: true,
         options: {
             autoApply: true,
             allowRepick: true,
@@ -87,7 +44,6 @@ const meta = {
             numberOfColumns: 2,
             numberOfMonths: 2,
             singleMode: false,
-            showTooltip: true,
             tooltipText: {
                 one: 'night',
                 other: 'nights',
@@ -98,7 +54,7 @@ const meta = {
         }
     },
     render: (args) => ({
-        components: { RangepickerInput, StoryWrapper },
+        components: { RangepickerInput },
         setup() {
             const modelValue = ref(args.modelValue ?? "");
             watch(() => args.modelValue, (value) => {
@@ -107,213 +63,55 @@ const meta = {
                     modelValue.value = nextValue;
                 }
             });
-            const handleUpdate = (value) => {
-                modelValue.value = value;
-                args['onUpdate:modelValue']?.(value);
-            };
-            return { args, modelValue, handleUpdate };
+            return { args, modelValue };
         },
         template: `
-      <StoryWrapper>
-        <RangepickerInput
-          v-bind="args"
-          v-model="modelValue"
-          @update:model-value="handleUpdate"
-          class="tw-w-full"
-        />
-      </StoryWrapper>
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 360px;">
+        <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;
-/**
- * Default state with no pre-selected dates.
- * Shows the basic usage with standard configuration.
- */
 export const Default = {};
-/**
- * Desktop variant with 2 columns showing months side by side.
- * Best for larger screens and quick date range selection.
- */
-export const Desktop = {
-    args: {
-        variant: "desktop",
-        placeholder: "Select your dates"
-    }
-};
-/**
- * Mobile variant with stacked calendar display.
- * Optimized for smaller screens and touch interactions.
- */
 export const Mobile = {
     args: {
-        variant: "mobile",
-        placeholder: "Tap to select dates"
-    }
-};
-/**
- * Pre-selected date range.
- * Useful for editing existing bookings or showing current selection.
- */
-export const WithPreselectedDates = {
-    args: {
-        modelValue: (() => {
-            const start = new Date();
-            const end = new Date();
-            end.setDate(end.getDate() + 7);
-            const format = (date) => {
-                const day = date.getDate().toString().padStart(2, '0');
-                const month = date.toLocaleString('en-US', { month: 'short' });
-                const year = date.getFullYear();
-                return `${day} ${month} ${year}`;
-            };
-            return `${format(start)} - ${format(end)}`;
-        })()
+        variant: "mobile"
     }
 };
-/**
- * Custom brand colors for theming.
- * Primary color is used for selected dates, secondary for hover states.
- */
-export const CustomColors = {
+export const CustomBlueColor = {
     args: {
-        primaryColor: "#10b981",
-        secondaryColor: "#34d399",
-        placeholder: "Pick your travel dates"
-    }
-};
-/**
- * Date restrictions with minimum and maximum selectable dates.
- * Prevents users from selecting dates outside the allowed range.
- */
-export const WithDateRestrictions = {
-    args: {
-        placeholder: "Available dates only",
-        options: {
-            autoApply: true,
-            minDate: new Date(),
-            maxDate: (() => {
-                const maxDate = new Date();
-                maxDate.setMonth(maxDate.getMonth() + 3);
-                return maxDate;
-            })(),
-            format: 'DD MMM YYYY',
-            numberOfColumns: 2,
-            numberOfMonths: 2,
-            showTooltip: true,
-            tooltipText: {
-                one: 'night',
-                other: 'nights',
-            },
-            tooltipNumber: (totalDays) => totalDays - 1,
-        }
+        primaryColor: "#3b82f6",
+        secondaryColor: "#60a5fa"
     }
 };
-/**
- * Minimum and maximum stay duration restrictions.
- * Enforces booking rules like "minimum 3 nights" or "maximum 14 nights".
- */
-export const WithStayDurationLimits = {
+export const CustomPurpleColor = {
     args: {
-        placeholder: "3-14 nights stay",
-        options: {
-            autoApply: true,
-            minDate: new Date(),
-            minDays: 3,
-            maxDays: 14,
-            format: 'DD MMM YYYY',
-            numberOfColumns: 2,
-            numberOfMonths: 2,
-            showTooltip: true,
-            tooltipText: {
-                one: 'night',
-                other: 'nights',
-            },
-            tooltipNumber: (totalDays) => totalDays - 1,
-        }
+        primaryColor: "#8b5cf6",
+        secondaryColor: "#a78bfa"
     }
 };
-/**
- * Different date format (YYYY-MM-DD).
- * Useful for backend integration or regional preferences.
- */
-export const CustomDateFormat = {
+export const CustomRedColor = {
     args: {
-        placeholder: "YYYY-MM-DD format",
-        options: {
-            autoApply: true,
-            minDate: new Date(),
-            format: 'YYYY-MM-DD',
-            numberOfColumns: 2,
-            numberOfMonths: 2,
-            showTooltip: true,
-            tooltipText: {
-                one: 'night',
-                other: 'nights',
-            },
-            tooltipNumber: (totalDays) => totalDays - 1,
-        }
+        primaryColor: "#ef4444",
+        secondaryColor: "#f87171"
     }
 };
-/**
- * Manual apply mode - requires user to click apply button.
- * Gives users a chance to review their selection before confirming.
- */
-export const ManualApply = {
+export const CustomGreenColor = {
     args: {
-        placeholder: "Click apply to confirm",
-        options: {
-            autoApply: false,
-            allowRepick: true,
-            minDate: new Date(),
-            format: 'DD MMM YYYY',
-            numberOfColumns: 2,
-            numberOfMonths: 2,
-            showTooltip: true,
-            tooltipText: {
-                one: 'night',
-                other: 'nights',
-            },
-            tooltipNumber: (totalDays) => totalDays - 1,
-        }
+        primaryColor: "#10b981",
+        secondaryColor: "#34d399"
     }
 };
-/**
- * Compact single column layout.
- * Saves space while still providing full functionality.
- */
-export const SingleColumn = {
+export const CustomOrangeColor = {
     args: {
-        placeholder: "Compact view",
-        options: {
-            autoApply: true,
-            minDate: new Date(),
-            format: 'DD MMM YYYY',
-            numberOfColumns: 1,
-            numberOfMonths: 2,
-            showTooltip: true,
-            tooltipText: {
-                one: 'night',
-                other: 'nights',
-            },
-            tooltipNumber: (totalDays) => totalDays - 1,
-        }
+        primaryColor: "#f97316",
+        secondaryColor: "#fb923c"
     }
 };
-/**
- * Without tooltip display.
- * Cleaner interface when night count is not needed.
- */
-export const WithoutTooltip = {
+export const CustomPinkColor = {
     args: {
-        placeholder: "No tooltip shown",
-        options: {
-            autoApply: true,
-            minDate: new Date(),
-            format: 'DD MMM YYYY',
-            numberOfColumns: 2,
-            numberOfMonths: 2,
-            showTooltip: false
-        }
+        primaryColor: "#ec4899",
+        secondaryColor: "#f472b6"
     }
 };

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":"AA+MA,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;;;;;AAyNpB,wBAUG"}

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 } from './types';
+import type { DateRange, RangepickerProps, RangepickerEmits, CalendarDay, CalendarMonth } from './types';
 export default RangepickerInput;
 export { Rangepicker, RangepickerInput };
-export type { RangepickerProps, DateRange };
+export type { RangepickerProps, 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,MAAM,SAAS,CAAA;AAG1D,eAAe,gBAAgB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAGxC,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAA;AAG3C,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,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"}