vue-hotel-search-widget 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -0
- package/package.json +52 -0
- package/src/components/HotelSearchWidget.vue +1410 -0
- package/src/components/hotel-search-widget.styles.js +740 -0
- package/src/index.js +4 -0
package/README.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# Vue Hotel Search Widget
|
|
2
|
+
|
|
3
|
+
A Vue.js component for hotel search functionality, converted from React.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install vue-hotel-search-widget
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Basic Setup
|
|
14
|
+
|
|
15
|
+
First, make sure you have PrimeVue installed and configured in your Vue project:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install primevue
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
In your main.js or main.ts:
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
import { createApp } from 'vue'
|
|
25
|
+
import PrimeVue from 'primevue/config'
|
|
26
|
+
import Aura from '@primevue/themes/aura'
|
|
27
|
+
import 'primeicons/primeicons.css'
|
|
28
|
+
|
|
29
|
+
const app = createApp(App)
|
|
30
|
+
app.use(PrimeVue, {
|
|
31
|
+
theme: {
|
|
32
|
+
preset: Aura
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
app.mount('#app')
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Using the Component
|
|
39
|
+
|
|
40
|
+
```vue
|
|
41
|
+
<template>
|
|
42
|
+
<HotelSearchWidget
|
|
43
|
+
:config="{
|
|
44
|
+
theme: {
|
|
45
|
+
primary: '#1c6bff',
|
|
46
|
+
secondary: '#00b3a4',
|
|
47
|
+
primaryLight: '#e3f0ff'
|
|
48
|
+
},
|
|
49
|
+
redirectionDomain: 'phoenix.dev.futuretravelplatform.com',
|
|
50
|
+
fontName: 'Montserrat, Segoe UI, system-ui, sans-serif'
|
|
51
|
+
}"
|
|
52
|
+
:minWidth="1240"
|
|
53
|
+
/>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<script setup>
|
|
57
|
+
import HotelSearchWidget from 'vue-hotel-search-widget'
|
|
58
|
+
|
|
59
|
+
// Component is ready to use!
|
|
60
|
+
</script>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Props
|
|
64
|
+
|
|
65
|
+
### `config` (Object, optional)
|
|
66
|
+
|
|
67
|
+
Configuration object for the widget:
|
|
68
|
+
|
|
69
|
+
- `theme` (Object, optional):
|
|
70
|
+
- `primary` (String): Primary color (default: `#2c0a82`)
|
|
71
|
+
- `secondary` (String): Secondary color (default: `#2c0a82`)
|
|
72
|
+
- `primaryLight` (String): Primary light color (default: `#f3e2ff`)
|
|
73
|
+
- `redirectionDomain` (String, optional): Domain for search redirection
|
|
74
|
+
- `fontName` (String, optional): Custom font family
|
|
75
|
+
|
|
76
|
+
### `minWidth` (Number | String, optional)
|
|
77
|
+
|
|
78
|
+
Minimum width of the widget container.
|
|
79
|
+
|
|
80
|
+
## Features
|
|
81
|
+
|
|
82
|
+
- ✅ Destination search with autocomplete
|
|
83
|
+
- ✅ Nationality selection
|
|
84
|
+
- ✅ Date range picker (check-in/check-out)
|
|
85
|
+
- ✅ Rooms and guests selection
|
|
86
|
+
- ✅ Advanced search options (star ratings, meal types)
|
|
87
|
+
- ✅ Around current location feature
|
|
88
|
+
- ✅ Fully customizable theme
|
|
89
|
+
- ✅ Responsive design
|
|
90
|
+
|
|
91
|
+
## Development
|
|
92
|
+
|
|
93
|
+
```bash
|
|
94
|
+
# Install dependencies
|
|
95
|
+
npm install
|
|
96
|
+
|
|
97
|
+
# Run development server
|
|
98
|
+
npm run dev
|
|
99
|
+
|
|
100
|
+
# Build for production
|
|
101
|
+
npm run build
|
|
102
|
+
|
|
103
|
+
# Build library
|
|
104
|
+
npm run build:lib
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## License
|
|
108
|
+
|
|
109
|
+
MIT
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vue-hotel-search-widget",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A Vue.js hotel search widget component",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/vue-hotel-search-widget.umd.js",
|
|
7
|
+
"module": "./dist/vue-hotel-search-widget.es.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/vue-hotel-search-widget.es.js",
|
|
12
|
+
"require": "./dist/vue-hotel-search-widget.umd.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"src"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"dev": "vite",
|
|
21
|
+
"build": "vite build",
|
|
22
|
+
"preview": "vite preview",
|
|
23
|
+
"build:lib": "vite build --mode lib"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"vue": "^3.5.27",
|
|
27
|
+
"primevue": "^4.0.0",
|
|
28
|
+
"jsencrypt": "^3.3.3"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"vue": "^3.0.0",
|
|
32
|
+
"primevue": "^4.0.0"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@vitejs/plugin-vue": "^6.0.3",
|
|
36
|
+
"vite": "^7.3.1",
|
|
37
|
+
"vite-plugin-vue-devtools": "^8.0.5"
|
|
38
|
+
},
|
|
39
|
+
"engines": {
|
|
40
|
+
"node": "^20.19.0 || >=22.12.0"
|
|
41
|
+
},
|
|
42
|
+
"keywords": [
|
|
43
|
+
"vue",
|
|
44
|
+
"vue3",
|
|
45
|
+
"hotel",
|
|
46
|
+
"search",
|
|
47
|
+
"widget",
|
|
48
|
+
"component"
|
|
49
|
+
],
|
|
50
|
+
"author": "",
|
|
51
|
+
"license": "MIT"
|
|
52
|
+
}
|