@archpublicwebsite/rangepicker 1.0.5 → 1.0.6

package/README.md

@@ -1,41 +1,38 @@
-# rangepicker
+# @archpublicwebsite/rangepicker
 
-Custom, lightweight date range picker component for Vue 3.
+Custom, lightweight date range picker component for Vue 3 with Tailwind CSS prefix support.
 
 ## Features
 
 - 🎨 **Vue 3 Composition API** - Built with modern Vue 3 and TypeScript
-- 📦 **Framework Agnostic CSS** - Pre-compiled CSS, no Tailwind required in your project
+- 📦 **CSS Prefix Support** - All Tailwind classes prefixed with `arch-` to prevent conflicts with Vuetify/Bootstrap
 - 📅 **Dayjs Integration** - Powerful date manipulation without moment.js bloat
-- 🎨 **Themeable** - Easy color customization via CSS variables
+- 🎨 **Themeable** - Easy color customization via props (HEX colors)
 - 📱 **Mobile Responsive** - Touch-friendly with bottom sheet on mobile
 - 🎯 **Smart Positioning** - Auto-adjusts based on available viewport space
 - ♿ **Accessible** - Keyboard navigation and screen reader support
 - 🚀 **SSR Compatible** - Works perfectly with Nuxt 3
-- 🪶 **Lightweight** - No external datepicker dependencies
+- 🪶 **Lightweight** - ~49KB CSS (gzipped: 5.3KB), ~40KB JS (gzipped: 9.4KB)
 
 ## Installation
 
-From the monorepo root:
-
-```bash
-pnpm add rangepicker --filter @pba/nuxt
-```
-
-Or install dependencies in the rangepicker package:
-
 ```bash
-cd packages/rangepicker
-pnpm install
+npm install @archpublicwebsite/rangepicker
+# or
+pnpm add @archpublicwebsite/rangepicker
+# or
+yarn add @archpublicwebsite/rangepicker
 ```
 
 ## Quick Start
 
+**Important:** You must import both the component AND the CSS file.
+
 ```vue
 <script setup>
 import { ref } from 'vue'
-import { RangepickerInput } from '@archi-ui/rangepicker'
-import '@archi-ui/rangepicker/style.css' // Pre-compiled CSS - no Tailwind needed!
+import { RangepickerInput } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css' // Required!
 
 const dates = ref('')
 </script>
@@ -49,7 +46,14 @@ const dates = ref('')
 </template>
 ```
 
-**No Tailwind CSS required!** The package includes pre-compiled CSS that works with any framework.
+**Why separate CSS import?**
+- Better performance (CSS cached independently)
+- Smaller JS bundle
+- No Flash of Unstyled Content (FOUC)
+- Industry standard (like Vuetify, Element Plus, etc.)
+
+**Tailwind CSS Prefix:**
+All Tailwind utility classes are prefixed with `arch-` to prevent conflicts with other CSS frameworks like Vuetify or Bootstrap. Your existing styles won't be affected!
 
 ## Color Customization
 
@@ -58,7 +62,8 @@ Customize colors easily by passing HEX color values as props. Each rangepicker i
 ```vue
 <script setup>
 import { ref } from 'vue'
-import { RangepickerInput } from '@archi-ui/rangepicker'
+import { RangepickerInput } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
 
 const dates1 = ref('')
 const dates2 = ref('')
@@ -106,22 +111,53 @@ const dates3 = ref('')
 - ✅ **Auto-conversion** - Automatically converts HEX to RGB for CSS variables
 - ✅ **Optional** - Falls back to default theme if not provided
 
-## Customization
+## Framework Compatibility
 
-Customize colors using CSS variables:
+This package is designed to work seamlessly with any Vue 3 framework:
 
-```css
-/* Your global styles */
-:root {
-  --color-primary: 59 130 246; /* blue-500 */
-  --color-secondary: 148 163 184; /* slate-400 */
-}
-```
+- ✅ **Vuetify** - No CSS conflicts thanks to `arch-` prefix
+- ✅ **Bootstrap** - Works alongside Bootstrap utilities
+- ✅ **Element Plus** - Fully compatible
+- ✅ **Quasar** - No issues
+- ✅ **Plain Vue 3** - Works great standalone
+- ✅ **Nuxt 3** - SSR compatible
 
-**📖 See [CUSTOMIZATION.md](./CUSTOMIZATION.md) for complete theming guide**
+The `arch-` prefix on all Tailwind classes ensures zero conflicts with other CSS frameworks.
 
 ## Usage
 
+### With Vuetify (Recommended)
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { RangepickerInput } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
+import '@archpublicwebsite/rangepicker/style.css'
+
+const dates = ref('')
+const options = {
+  autoApply: true,
+  minDate: new Date(),
+  format: 'DD MMM YYYY',
+  numberOfColumns: 2,
+  numberOfMonths: 2,
+}
+</script>
+
+<template>
+  <v-container>
+    <RangepickerInput
+      v-model="dates"
+      :options="options"
+      primary-color="#1976d2"
+      placeholder="Check in / Check out"
+      class="my-custom-input"
+    />
+  </v-container>
+</template>
+```
+
 ### Basic Usage
 
 ```vue
@@ -140,7 +176,7 @@ Customize colors using CSS variables:
       v-model="dateRange"
       v-model:is-open="isOpen"
       :trigger-element="triggerRef"
-      :number-of-months="2"
+      :value-of-months="2"
       :format="'DD MMM YYYY'"
     />
   </div>
@@ -148,8 +184,8 @@ Customize colors using CSS variables:
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { Rangepicker } from 'rangepicker'
-import 'rangepicker/style.css'
+import { Rangepicker } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
 
 const triggerRef = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
@@ -167,12 +203,12 @@ const dateRangeText = computed(() => {
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Rangepicker, useRangepicker } from 'rangepicker'
-import 'rangepicker/style.css'
+import { Rangepicker, useRangepicker } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
 
 const triggerRef = ref<HTMLElement | null>(null)
 const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, {
-  numberOfMonths: 2,
+  valueOfMonths: 2,
   format: 'DD MMM YYYY',
   minDays: 1,
 })
@@ -197,8 +233,8 @@ const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, {
       v-model="bookingDates"
       v-model:is-open="isBookingOpen"
       :trigger-element="bookingInputRef"
-      :number-of-months="2"
-      :number-of-columns="2"
+      :value-of-months="2"
+      :value-of-columns="2"
       :min-days="1"
       :format="'DD MMM YYYY'"
       :show-tooltip="true"
@@ -211,8 +247,8 @@ const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, {
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { Rangepicker } from 'rangepicker'
-import 'rangepicker/style.css'
+import { Rangepicker } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
 import dayjs from 'dayjs'
 
 const bookingInputRef = ref<HTMLElement | null>(null)
@@ -241,8 +277,8 @@ const bookingText = computed(() => {
 | `maxDate` | `string \| Date \| Dayjs` | - | Maximum selectable date |
 | `minDays` | `number` | - | Minimum number of days in range |
 | `maxDays` | `number` | - | Maximum number of days in range |
-| `numberOfMonths` | `number` | `2` | Number of months to display |
-| `numberOfColumns` | `number` | `2` | Grid columns for months |
+| `valueOfMonths` | `number` | `2` | Number of months to display |
+| `valueOfColumns` | `number` | `2` | Grid columns for months |
 | `disabledDates` | `(string \| Date)[]` | `[]` | Array of disabled dates |
 | `holidays` | `(string \| Date)[]` | `[]` | Array of holiday dates |
 | `format` | `string` | `'YYYY-MM-DD'` | Date format |
@@ -286,55 +322,93 @@ pnpm preview
 
 ```
 packages/rangepicker/
-├── dist/                  # Built files
-│   ├── rangepicker.js    # ES module
-│   ├── rangepicker.umd.cjs  # UMD module
-│   ├── style.css         # Compiled styles
-│   └── index.d.ts        # TypeScript types
+├── 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
-│   ├── Rangepicker.vue   # Component
+│   ├── index.ts          # Main entry point
+│   ├── Rangepicker.vue   # Core calendar component
+│   ├── RangepickerInput.vue # Input wrapper component
 │   ├── types.ts          # Type definitions
 │   ├── utils/
-│   │   ├── calendar.ts   # Calendar logic
-│   │   ├── date.ts       # Date utilities
-│   │   └── position.ts   # Positioning
+│   │   ├── calendar.ts   # Calendar generation logic
+│   │   ├── date.ts       # Dayjs utilities
+│   │   └── position.ts   # Smart positioning
 │   └── styles/
-│       └── rangepicker.scss
-├── index.html            # Demo page
+│       └── rangepicker.scss  # Tailwind CSS with arch- prefix
 ├── package.json
 ├── vite.config.ts
-└── tsconfig.json
+└── tailwind.config.js    # With prefix: 'arch-'
 ```
 
-## Styling
+## CSS Architecture
 
-The component uses Tailwind CSS for styling. You can customize the appearance by:
+The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts with other frameworks:
 
-1. **Using Tailwind Classes**: The component uses standard Tailwind classes that can be customized via your Tailwind config
-2. **CSS Variables**: Override CSS custom properties for colors and spacing
-3. **Custom CSS**: Import your own styles after the component styles
+### Why the prefix?
+- ✅ **Zero conflicts** with Vuetify, Bootstrap, Element Plus, etc.
+- ✅ **Safe to use** alongside any CSS framework
+- ✅ **All utilities prefixed**: `.arch-flex`, `.arch-text-sm`, `.arch-bg-white`, etc.
+- ✅ **Custom classes untouched**: `.rangepicker-*` classes remain unprefixed
 
-Example custom styling:
+### Styling Options
 
+1. **Color Props (Easiest)**:
+```vue
+<RangepickerInput
+  primary-color="#3b82f6"
+  secondary-color="#60a5fa"
+/>
+```
+
+2. **CSS Variables (Global)**:
 ```css
-.rangepicker-day-selected {
-  @apply bg-purple-600 text-white hover:bg-purple-700;
+:root {
+  --color-primary: 59 130 246;      /* RGB format */
+  --color-secondary: 148 163 184;
 }
+```
 
-.rangepicker-day-in-range {
-  @apply bg-purple-50 text-purple-900;
+3. **Custom CSS Overrides**:
+```css
+/* Override component styles */
+.rangepicker-day-selected {
+  background-color: purple !important;
 }
 ```
 
+## Troubleshooting
+
+### Styles not showing
+Make sure you imported the CSS:
+```js
+import '@archpublicwebsite/rangepicker/style.css'
+```
+
+### CSS conflicts with Vuetify
+This should NOT happen thanks to the `arch-` prefix. If you see conflicts, please open an issue.
+
+### TypeScript errors
+Ensure `vue` is installed as a dependency in your project.
+
 ## Browser Support
 
 - Chrome/Edge (latest 2 versions)
 - Firefox (latest 2 versions)
-- Safari (latest 2 versions)
+- Safari (latest 2 versions)  
 - Mobile Safari (iOS 14+)
 - Chrome for Android (latest)
 
+## Contributing
+
+See the main repository [README](../../README.md) for contribution guidelines.
+
 ## License
 
-MIT
+MIT © Archipelago International
+
+---
+
+**Made with ❤️ for PBA Hotel Apps**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archpublicwebsite/rangepicker",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Custom date range picker component for PBA Hotel Apps",
   "author": "Archipelago International",
   "license": "MIT",