@archpublicwebsite/rangepicker 1.0.9 → 1.0.13

package/README.md

@@ -38,10 +38,47 @@ const dates = ref('')
 </script>
 
 <template>
-  <RangepickerInput 
-    v-model="dates" 
+  <RangepickerInput
+    v-model="dates"
+    primary-color="#3b82f6"
+    placeholder="Check in / Check out"
+  />
+</template>
+```
+
+### TypeScript Support
+
+Full TypeScript support with exported types for type-safe development:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  RangepickerInput,
+  type RangepickerProps,
+  type DateRange
+} from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
+
+// Type-safe date range
+const dates = ref<DateRange>({ startDate: '', endDate: '' })
+
+// Type-safe props configuration
+const pickerOptions: Partial<RangepickerProps> = {
+  format: 'DD/MM/YYYY',
+  autoApply: true,
+  minDays: 2,
+  maxDays: 30,
+  showTooltip: true
+}
+</script>
+
+<template>
+  <RangepickerInput
+    v-model="dates"
+    v-bind="pickerOptions"
     primary-color="#3b82f6"
-    placeholder="Check in / Check out" 
+    placeholder="Check in / Check out"
   />
 </template>
 ```
@@ -161,6 +198,21 @@ const options = {
 ### Basic Usage
 
 ```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Rangepicker, type DateRange } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
+
+const triggerRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const dateRange = ref<DateRange>({ startDate: '', endDate: '' })
+
+const dateRangeText = computed(() => {
+  if (!dateRange.value.startDate || !dateRange.value.endDate) return ''
+  return `${dateRange.value.startDate} - ${dateRange.value.endDate}`
+})
+</script>
+
 <template>
   <div>
     <input
@@ -177,25 +229,10 @@ const options = {
       v-model:is-open="isOpen"
       :trigger-element="triggerRef"
       :value-of-months="2"
-      :format="'DD MMM YYYY'"
+      format="DD MMM YYYY"
     />
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Rangepicker } from '@archpublicwebsite/rangepicker'
-import '@archpublicwebsite/rangepicker/style.css'
-
-const triggerRef = ref<HTMLElement | null>(null)
-const isOpen = ref(false)
-const dateRange = ref({ startDate: '', endDate: '' })
-
-const dateRangeText = computed(() => {
-  if (!dateRange.value.startDate || !dateRange.value.endDate) return ''
-  return `${dateRange.value.startDate} - ${dateRange.value.endDate}`
-})
-</script>
 ```
 
 ### Using the Composable
@@ -203,67 +240,43 @@ const dateRangeText = computed(() => {
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Rangepicker, useRangepicker } from '@archpublicwebsite/rangepicker'
+import {
+  Rangepicker,
+  useRangepicker,
+  type RangepickerProps
+} from '@archpublicwebsite/rangepicker'
 import '@archpublicwebsite/rangepicker/style.css'
 
 const triggerRef = ref<HTMLElement | null>(null)
-const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, {
+
+// Type-safe composable options
+const options: Partial<RangepickerProps> = {
   valueOfMonths: 2,
   format: 'DD MMM YYYY',
   minDays: 1,
-})
-</script>
-```
+  autoApply: true
+}
 
-### Hotel Booking Example
+const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, options)
+</script>
 
-```vue
 <template>
   <div>
-    <input
-      ref="bookingInputRef"
-      type="text"
-      :value="bookingText"
-      placeholder="Check-in - Check-out"
-      readonly
-      @click="isBookingOpen = true"
-    />
+    <button ref="triggerRef" @click="toggle">
+      {{ dateRange.startDate && dateRange.endDate
+        ? `${dateRange.startDate} - ${dateRange.endDate}`
+        : 'Select dates' }}
+    </button>
 
     <Rangepicker
-      v-model="bookingDates"
-      v-model:is-open="isBookingOpen"
-      :trigger-element="bookingInputRef"
-      :value-of-months="2"
-      :value-of-columns="2"
-      :min-days="1"
-      :format="'DD MMM YYYY'"
-      :show-tooltip="true"
-      :holidays="holidays"
-      :min-date="today"
-      variant="desktop"
+      v-model="dateRange"
+      v-model:is-open="isOpen"
+      :trigger-element="triggerRef"
+      v-bind="options"
     />
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Rangepicker } from '@archpublicwebsite/rangepicker'
-import '@archpublicwebsite/rangepicker/style.css'
-import dayjs from 'dayjs'
-
-const bookingInputRef = ref<HTMLElement | null>(null)
-const isBookingOpen = ref(false)
-const bookingDates = ref({ startDate: '', endDate: '' })
-const today = dayjs().format('YYYY-MM-DD')
-const holidays = ref(['2025-12-25', '2025-01-01'])
-
-const bookingText = computed(() => {
-  if (!bookingDates.value.startDate || !bookingDates.value.endDate) return ''
-  return `${bookingDates.value.startDate} - ${bookingDates.value.endDate}`
-})
-</script>
 ```
-
 ## Props
 
 | Prop | Type | Default | Description |
@@ -299,6 +312,128 @@ const bookingText = computed(() => {
 | `dateSelected` | `Dayjs` | Emitted when a date is clicked |
 | `rangeSelected` | `{ start: Dayjs, end: Dayjs }` | Emitted when range is complete |
 
+## TypeScript Support
+
+This package is built with TypeScript and provides full type definitions. All types are automatically exported for your convenience.
+
+### Available Types
+
+```typescript
+import type {
+  RangepickerProps,    // Component props interface
+  RangepickerEmits,    // Event emitter interface
+  DateRange,           // Date range object type
+  CalendarDay,         // Internal calendar day type
+  CalendarMonth        // Internal calendar month type
+} from '@archpublicwebsite/rangepicker'
+```
+
+### Type Definitions
+
+#### `RangepickerProps`
+Complete props interface with JSDoc documentation. All props are optional with sensible defaults:
+
+```typescript
+interface RangepickerProps {
+  modelValue?: { startDate?: string | Date | Dayjs; endDate?: string | Date | Dayjs }
+  isOpen?: boolean
+  variant?: 'desktop' | 'mobile'
+  minDate?: string | Date | Dayjs
+  maxDate?: string | Date | Dayjs
+  minDays?: number
+  maxDays?: number
+  close?: boolean
+  valueOfMonths?: number  // default: 2
+  valueOfColumns?: number // default: 2
+  disabledDates?: (string | Date)[]
+  holidays?: (string | Date)[]
+  format?: string         // default: 'YYYY-MM-DD'
+  delimiter?: string      // default: ' - '
+  placeholder?: string
+  label?: string
+  showTooltip?: boolean   // default: true
+  autoApply?: boolean     // default: false
+  position?: 'auto' | 'top' | 'bottom'
+  triggerElement?: HTMLElement | null
+  colorStyles?: Record<string, string>
+}
+```
+
+#### `DateRange`
+Type for the v-model binding:
+
+```typescript
+interface DateRange {
+  startDate: string
+  endDate: string
+}
+```
+
+#### `RangepickerEmits`
+Event emitter types for type-safe event handling:
+
+```typescript
+interface RangepickerEmits {
+  'update:modelValue': [value: { startDate: string; endDate: string }]
+  'update:isOpen': [value: boolean]
+  'dateSelected': [date: Dayjs]
+  'rangeSelected': [start: Dayjs, end: Dayjs]
+}
+```
+
+### Usage Examples
+
+#### Type-Safe Component Props
+
+```typescript
+import type { RangepickerProps } from '@archpublicwebsite/rangepicker'
+
+// Define props with autocomplete support
+const config: Partial<RangepickerProps> = {
+  format: 'DD/MM/YYYY',
+  minDays: 2,
+  maxDays: 30,
+  autoApply: true,
+  showTooltip: true
+}
+```
+
+#### Type-Safe Event Handlers
+
+```typescript
+import type { Dayjs } from 'dayjs'
+
+function handleDateSelected(date: Dayjs) {
+  console.log('Selected:', date.format('YYYY-MM-DD'))
+}
+
+function handleRangeSelected(start: Dayjs, end: Dayjs) {
+  const nights = end.diff(start, 'day')
+  console.log(`Booking: ${nights} nights`)
+}
+```
+
+#### Type-Safe Refs
+
+```typescript
+import { ref } from 'vue'
+import type { DateRange } from '@archpublicwebsite/rangepicker'
+
+const dateRange = ref<DateRange>({ startDate: '', endDate: '' })
+const holidays = ref<string[]>(['2025-12-25', '2025-01-01'])
+const disabledDates = ref<Date[]>([new Date('2025-12-24')])
+```
+
+### IDE Support
+
+With the exported types, you'll get:
+
+- ✅ **Autocomplete** - IntelliSense for all props and events
+- ✅ **Type Checking** - Compile-time error detection
+- ✅ **Documentation** - Hover tooltips with prop descriptions and default values
+- ✅ **Refactoring** - Safe rename and refactor operations
+- ✅ **Error Prevention** - Catch typos and incorrect prop usage before runtime
+
 ## Development
 
 ```bash
@@ -318,31 +453,6 @@ pnpm type-check
 pnpm preview
 ```
 
-## Package Structure
-
-```
-packages/rangepicker/
-├── dist/                  # Built files (published to npm)
-│   ├── rangepicker.js    # ES module (39.91 KB, gzipped: 9.42 KB)
-│   ├── rangepicker.umd.cjs  # UMD module (20.18 KB, gzipped: 7.07 KB)
-│   ├── style.css         # Compiled styles with arch- prefix (48.69 KB, gzipped: 5.29 KB)
-│   └── *.d.ts            # TypeScript type definitions
-├── src/
-│   ├── index.ts          # Main entry point
-│   ├── Rangepicker.vue   # Core calendar component
-│   ├── RangepickerInput.vue # Input wrapper component
-│   ├── types.ts          # Type definitions
-│   ├── utils/
-│   │   ├── calendar.ts   # Calendar generation logic
-│   │   ├── date.ts       # Dayjs utilities
-│   │   └── position.ts   # Smart positioning
-│   └── styles/
-│       └── rangepicker.scss  # Tailwind CSS with arch- prefix
-├── package.json
-├── vite.config.ts
-└── tailwind.config.js    # With prefix: 'arch-'
-```
-
 ## CSS Architecture
 
 The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts with other frameworks:

package/dist/Rangepicker.vue.d.ts

@@ -1,31 +1,6 @@
 import { Dayjs } from 'dayjs';
-interface Props {
-    modelValue?: {
-        startDate?: string | Date | Dayjs;
-        endDate?: string | Date | Dayjs;
-    };
-    isOpen?: boolean;
-    variant?: 'desktop' | 'mobile';
-    minDate?: string | Date | Dayjs;
-    maxDate?: string | Date | Dayjs;
-    minDays?: number;
-    maxDays?: number;
-    close?: boolean;
-    valueOfMonths?: number;
-    valueOfColumns?: number;
-    disabledDates?: (string | Date)[];
-    holidays?: (string | Date)[];
-    format?: string;
-    delimiter?: string;
-    placeholder?: string;
-    label?: string;
-    showTooltip?: boolean;
-    autoApply?: boolean;
-    position?: 'auto' | 'top' | 'bottom';
-    triggerElement?: HTMLElement | null;
-    colorStyles?: Record<string, string>;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+import { RangepickerProps } from './types';
+declare const _default: import('vue').DefineComponent<RangepickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: {
         startDate: string;
         endDate: string;
@@ -33,7 +8,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     "update:isOpen": (value: boolean) => any;
     dateSelected: (date: Dayjs) => any;
     rangeSelected: (start: Dayjs, end: Dayjs) => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<RangepickerProps> & Readonly<{
     "onUpdate:modelValue"?: (value: {
         startDate: string;
         endDate: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AAmnBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAmClC,UAAU,KAAK;IACb,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;QACjC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;KAChC,CAAA;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACpC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACrC;;;mBAvC2C,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;YAmBxD,OAAO;aACN,SAAS,GAAG,QAAQ;mBAMd,MAAM;oBACL,MAAM;YAGd,MAAM;eACH,MAAM;iBAGJ,OAAO;eACT,OAAO;cACR,MAAM,GAAG,KAAK,GAAG,QAAQ;;;;AA+oBtC,wBAUG"}
+{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AA0jBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,KAAK,EAAe,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;mBAejB,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;;;;;;;;;;;;;AA8lBnE,wBAUG"}

package/dist/RangepickerInput.stories.d.ts

@@ -1,74 +1,14 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3";
 import RangepickerInput from "./RangepickerInput.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
- */
 declare const meta: Meta<typeof RangepickerInput>;
 export default meta;
 type Story = StoryObj<typeof RangepickerInput>;
-/**
- * Default state with no pre-selected dates.
- * Shows the basic usage with standard configuration.
- */
 export declare const Default: Story;
-/**
- * Desktop variant with 2 columns showing months side by side.
- * Best for larger screens and quick date range selection.
- */
-export declare const Desktop: Story;
-/**
- * Mobile variant with stacked calendar display.
- * Optimized for smaller screens and touch interactions.
- */
 export declare const Mobile: Story;
-/**
- * Pre-selected date range.
- * Useful for editing existing bookings or showing current selection.
- */
-export declare const WithPreselectedDates: Story;
-/**
- * Custom brand colors for theming.
- * Primary color is used for selected dates, secondary for hover states.
- */
-export declare const CustomColors: Story;
-/**
- * Date restrictions with minimum and maximum selectable dates.
- * Prevents users from selecting dates outside the allowed range.
- */
-export declare const WithDateRestrictions: Story;
-/**
- * Minimum and maximum stay duration restrictions.
- * Enforces booking rules like "minimum 3 nights" or "maximum 14 nights".
- */
-export declare const WithStayDurationLimits: Story;
-/**
- * Different date format (YYYY-MM-DD).
- * Useful for backend integration or regional preferences.
- */
-export declare const CustomDateFormat: Story;
-/**
- * Manual apply mode - requires user to click apply button.
- * Gives users a chance to review their selection before confirming.
- */
-export declare const ManualApply: Story;
-/**
- * Compact single column layout.
- * Saves space while still providing full functionality.
- */
-export declare const SingleColumn: Story;
-/**
- * Without tooltip display.
- * Cleaner interface when night count is not needed.
- */
-export declare const WithoutTooltip: 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,sBAAsB,CAAC;AAE3D,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAItD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAoHvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAelC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAmBpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAY5B,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,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"}