vue-hotel-search-widget 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-hotel-search-widget",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue.js hotel search widget component",
   "type": "module",
   "main": "./dist/vue-hotel-search-widget.umd.js",
@@ -20,20 +20,20 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "build:lib": "vite build --mode lib"
+    "build:lib": "vite build --mode lib",
+    "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
-    "vue": "^3.5.27",
-    "primevue": "^4.0.0",
     "jsencrypt": "^3.3.3"
   },
   "peerDependencies": {
     "vue": "^3.0.0",
-    "primevue": "^4.0.0"
+    "primevue": "^4.5.4",
+    "primeicons": "^7.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.3",
-    "vite": "^7.3.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.5",
     "vite-plugin-vue-devtools": "^8.0.5"
   },
   "engines": {
@@ -45,8 +45,19 @@
     "hotel",
     "search",
     "widget",
-    "component"
+    "component",
+    "primevue",
+    "travel",
+    "booking"
   ],
   "author": "",
-  "license": "MIT"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/vue-hotel-search-widget.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/vue-hotel-search-widget/issues"
+  },
+  "homepage": "https://github.com/yourusername/vue-hotel-search-widget#readme"
 }

package/src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <HotelSearchWidget
+    :config="widgetConfig"
+    :minWidth="1240"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import HotelSearchWidget from './components/HotelSearchWidget.vue'
+
+const widgetConfig = ref({
+  theme: {
+    primary: '#1c6bff',
+    secondary: '#00b3a4',
+    primaryLight: '#e3f0ff'
+  },
+  redirectionDomain: 'phoenix.dev.futuretravelplatform.com',
+  fontName: 'Montserrat, Segoe UI, system-ui, sans-serif'
+})
+</script>

package/src/components/HotelSearchWidget.vue

@@ -266,8 +266,10 @@
                 @click="showCalendar"
               />
               <Calendar
+                v-if="isCalendarVisible"
                 ref="calendarRef"
                 v-model="dateRange"
+                inline
                 selectionMode="range"
                 :numberOfMonths="2"
                 :minDate="new Date()"
@@ -866,6 +868,20 @@ const nationalityQuery = ref('')
 const isDestinationDropdownOpen = ref(false)
 const isNationalityDropdownOpen = ref(false)
 const isRoomsGuestsMenuOpen = ref(false)
+const isCalendarVisible = ref(false)
+
+// Functions to set dropdown states
+const setIsDestinationDropdownOpen = (value) => {
+  isDestinationDropdownOpen.value = value
+}
+
+const setIsNationalityDropdownOpen = (value) => {
+  isNationalityDropdownOpen.value = value
+}
+
+const setIsRoomsGuestsMenuOpen = (value) => {
+  isRoomsGuestsMenuOpen.value = value
+}
 
 const destinationDropdownRef = ref(null)
 const nationalityDropdownRef = ref(null)
@@ -1138,18 +1154,14 @@ const handleDateRangeChange = (value) => {
   handleInputChange('checkOut', end)
 
   if (start && end) {
-    if (calendarRef.value) {
-      calendarRef.value.hide()
-    }
+    isCalendarVisible.value = false
     fieldErrors.value.checkIn = false
     fieldErrors.value.checkOut = false
   }
 }
 
 const showCalendar = () => {
-  if (calendarRef.value) {
-    calendarRef.value.show()
-  }
+  isCalendarVisible.value = true
 }
 
 const validateRequiredFields = () => {
@@ -1386,6 +1398,20 @@ const handleClickOutside = (event) => {
   ) {
     isRoomsGuestsMenuOpen.value = false
   }
+
+  // Close calendar if clicking outside
+  const calendarContainer = target.closest('.sw-com-cal')
+  const isCalendarInput = target.closest('#checkIn') || target.closest('#checkOut')
+  const isCalendarElement = target.closest('.p-calendar') || target.closest('.p-datepicker')
+  
+  if (
+    isCalendarVisible.value &&
+    !isCalendarInput &&
+    !isCalendarElement &&
+    (!calendarContainer || !calendarContainer.querySelector('.p-calendar'))
+  ) {
+    isCalendarVisible.value = false
+  }
 }
 
 onMounted(() => {

package/src/main.js

@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import PrimeVue from 'primevue/config'
+import 'primeicons/primeicons.css'
+import App from './App.vue'
+
+const app = createApp(App)
+
+// Configure PrimeVue
+app.use(PrimeVue)
+
+app.mount('#app')