@archpublicwebsite/rangepicker 1.0.0

package/dist/utils/calendar.js

@@ -0,0 +1,88 @@
+import { dayjs } from './date';
+export function getMonthDays(monthOffset, currentDate = dayjs()) {
+    const month = currentDate.add(monthOffset, 'month').startOf('month');
+    const firstDayOfMonth = month.day();
+    const daysInMonth = month.daysInMonth();
+    const daysInPrevMonth = month.subtract(1, 'month').daysInMonth();
+    const days = [];
+    // Previous month days
+    for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+        const date = month.subtract(1, 'month').date(daysInPrevMonth - i);
+        days.push({
+            date,
+            isPrevMonth: true,
+            isCurrentMonth: false,
+            isNextMonth: false,
+        });
+    }
+    // Current month days
+    for (let i = 1; i <= daysInMonth; i++) {
+        const date = month.date(i);
+        days.push({
+            date,
+            isPrevMonth: false,
+            isCurrentMonth: true,
+            isNextMonth: false,
+        });
+    }
+    // Next month days to complete the grid
+    const remainingDays = 42 - days.length; // 6 weeks * 7 days
+    for (let i = 1; i <= remainingDays; i++) {
+        const date = month.add(1, 'month').date(i);
+        days.push({
+            date,
+            isPrevMonth: false,
+            isCurrentMonth: false,
+            isNextMonth: true,
+        });
+    }
+    return { month, days };
+}
+export function createCalendarDay(date, isPrevMonth, isCurrentMonth, isNextMonth, options = {}) {
+    const { startDate = null, endDate = null, minDate = null, maxDate = null, disabledDates = [], holidays = [], } = options;
+    const isDisabled = (minDate && date.isBefore(minDate, 'day'))
+        || (maxDate && date.isAfter(maxDate, 'day'))
+        || disabledDates.some(d => d.isSame(date, 'day'));
+    const isHoliday = holidays.some(h => h.isSame(date, 'day'));
+    const isSelected = (startDate && date.isSame(startDate, 'day'))
+        || (endDate && date.isSame(endDate, 'day'));
+    const isInRange = startDate
+        && endDate
+        && date.isAfter(startDate, 'day')
+        && date.isBefore(endDate, 'day');
+    const isToday = date.isSame(dayjs(), 'day');
+    const isWeekend = date.day() === 0 || date.day() === 6;
+    return {
+        date,
+        isPrevMonth,
+        isCurrentMonth,
+        isNextMonth,
+        isDisabled,
+        isHoliday,
+        isWeekend,
+        isSelected,
+        isInRange,
+        isToday,
+    };
+}
+export function generateCalendarMonths(numberOfMonths, startOffset = 0, options = {}) {
+    const months = [];
+    for (let i = 0; i < numberOfMonths; i++) {
+        const { month, days } = getMonthDays(startOffset + i);
+        const calendarDays = days.map(day => createCalendarDay(day.date, day.isPrevMonth, day.isCurrentMonth, day.isNextMonth, options));
+        months.push({
+            month,
+            days: calendarDays,
+        });
+    }
+    return months;
+}
+export function getWeekDays(locale = 'en', format = 'short') {
+    const weekStart = dayjs().startOf('week');
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        const day = weekStart.add(i, 'day');
+        days.push(format === 'short' ? day.format('ddd') : day.format('dd'));
+    }
+    return days;
+}

package/dist/utils/date.d.ts

@@ -0,0 +1,11 @@
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+export { dayjs };
+export type { Dayjs };
+export declare function parseDate(date: string | Date | Dayjs, format?: string): Dayjs;
+export declare function formatDate(date: Dayjs, format?: string): string;
+export declare function isDateInRange(date: Dayjs, start: Dayjs, end: Dayjs): boolean;
+export declare function getDaysBetween(start: Dayjs, end: Dayjs): number;
+export declare function isWeekend(date: Dayjs): boolean;
+export declare function isToday(date: Dayjs): boolean;
+//# sourceMappingURL=date.d.ts.map

package/dist/utils/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,EAAE,KAAK,EAAE,CAAA;AAChB,YAAY,EAAE,KAAK,EAAE,CAAA;AAErB,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAI7E;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,GAAE,MAAqB,GAAG,MAAM,CAE7E;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG,OAAO,CAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG,MAAM,CAE/D;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAG9C;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAE5C"}

package/dist/utils/date.js

@@ -0,0 +1,31 @@
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(isBetween);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(customParseFormat);
+export { dayjs };
+export function parseDate(date, format) {
+    if (dayjs.isDayjs(date))
+        return date;
+    return format ? dayjs(date, format) : dayjs(date);
+}
+export function formatDate(date, format = 'YYYY-MM-DD') {
+    return date.format(format);
+}
+export function isDateInRange(date, start, end) {
+    return date.isBetween(start, end, 'day', '[]');
+}
+export function getDaysBetween(start, end) {
+    return end.diff(start, 'day');
+}
+export function isWeekend(date) {
+    const day = date.day();
+    return day === 0 || day === 6; // Sunday or Saturday
+}
+export function isToday(date) {
+    return date.isSame(dayjs(), 'day');
+}

package/dist/utils/position.d.ts

@@ -0,0 +1,8 @@
+export interface PositionResult {
+    top?: number;
+    bottom?: number;
+    left: number;
+    transform?: string;
+}
+export declare function calculatePosition(triggerElement: HTMLElement | null, calendarElement: HTMLElement | null, preferredPosition?: 'auto' | 'top' | 'bottom'): PositionResult;
+//# sourceMappingURL=position.d.ts.map

package/dist/utils/position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../src/utils/position.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,iBAAiB,CAC/B,cAAc,EAAE,WAAW,GAAG,IAAI,EAClC,eAAe,EAAE,WAAW,GAAG,IAAI,EACnC,iBAAiB,GAAE,MAAM,GAAG,KAAK,GAAG,QAAiB,GACpD,cAAc,CAyChB"}

package/dist/utils/position.js

@@ -0,0 +1,35 @@
+export function calculatePosition(triggerElement, calendarElement, preferredPosition = 'auto') {
+    if (!triggerElement || !calendarElement)
+        return { left: 0 };
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const calendarRect = calendarElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    // Calculate available space
+    const spaceAbove = triggerRect.top;
+    const spaceBelow = viewportHeight - triggerRect.bottom;
+    // Determine vertical position
+    const position = { left: triggerRect.left };
+    if (preferredPosition === 'auto') {
+        if (spaceBelow >= calendarRect.height || spaceBelow > spaceAbove) {
+            // Position below
+            position.top = triggerRect.bottom + 8;
+        }
+        else {
+            // Position above
+            position.bottom = viewportHeight - triggerRect.top + 8;
+        }
+    }
+    else if (preferredPosition === 'top') {
+        position.bottom = viewportHeight - triggerRect.top + 8;
+    }
+    else {
+        position.top = triggerRect.bottom + 8;
+    }
+    // Adjust horizontal position to keep within viewport
+    if (position.left + calendarRect.width > viewportWidth)
+        position.left = viewportWidth - calendarRect.width - 16;
+    if (position.left < 16)
+        position.left = 16;
+    return position;
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@archpublicwebsite/rangepicker",
+  "version": "1.0.0",
+  "description": "Custom date range picker component for PBA Hotel Apps",
+  "author": "Archipelago International",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/rangepicker.umd.cjs",
+  "module": "./dist/rangepicker.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/rangepicker.js",
+      "require": "./dist/rangepicker.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ArchipelagoInternational/archi-ui.git",
+    "directory": "packages/rangepicker"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "date-picker",
+    "range-picker",
+    "date-range",
+    "litepicker",
+    "component"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@vueuse/core": "^11.0.0",
+    "dayjs": "^1.11.10",
+    "terser": "^5.44.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "3.5.22"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}