@archpublicwebsite/rangepicker 1.0.7 → 1.0.9
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/dist/Rangepicker.vue.d.ts.map +1 -1
- package/dist/RangepickerInput.stories.d.ts +67 -7
- package/dist/RangepickerInput.stories.d.ts.map +1 -1
- package/dist/RangepickerInput.stories.js +233 -31
- package/dist/RangepickerInput.vue.d.ts.map +1 -1
- package/dist/StoryWrapper.vue.d.ts +18 -0
- package/dist/StoryWrapper.vue.d.ts.map +1 -0
- package/dist/rangepicker.js +57 -38
- package/dist/rangepicker.js.map +1 -1
- package/dist/rangepicker.umd.cjs +1 -1
- package/dist/rangepicker.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +5 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,14 +1,74 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/vue3";
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/vue3-vite";
|
|
2
2
|
import RangepickerInput from "./RangepickerInput.vue";
|
|
3
|
+
/**
|
|
4
|
+
* RangepickerInput is a date range picker component that provides an intuitive
|
|
5
|
+
* interface for selecting date ranges. It supports both desktop and mobile variants,
|
|
6
|
+
* custom styling, and various configuration options.
|
|
7
|
+
*
|
|
8
|
+
* ## Features
|
|
9
|
+
* - Desktop and mobile variants
|
|
10
|
+
* - Custom color theming
|
|
11
|
+
* - Date restrictions (min/max dates, min/max days)
|
|
12
|
+
* - Multiple date formats
|
|
13
|
+
* - Tooltip support showing number of nights
|
|
14
|
+
* - Auto-apply or manual confirmation
|
|
15
|
+
*/
|
|
3
16
|
declare const meta: Meta<typeof RangepickerInput>;
|
|
4
17
|
export default meta;
|
|
5
18
|
type Story = StoryObj<typeof RangepickerInput>;
|
|
19
|
+
/**
|
|
20
|
+
* Default state with no pre-selected dates.
|
|
21
|
+
* Shows the basic usage with standard configuration.
|
|
22
|
+
*/
|
|
6
23
|
export declare const Default: Story;
|
|
24
|
+
/**
|
|
25
|
+
* Desktop variant with 2 columns showing months side by side.
|
|
26
|
+
* Best for larger screens and quick date range selection.
|
|
27
|
+
*/
|
|
28
|
+
export declare const Desktop: Story;
|
|
29
|
+
/**
|
|
30
|
+
* Mobile variant with stacked calendar display.
|
|
31
|
+
* Optimized for smaller screens and touch interactions.
|
|
32
|
+
*/
|
|
7
33
|
export declare const Mobile: Story;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export declare const
|
|
13
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Pre-selected date range.
|
|
36
|
+
* Useful for editing existing bookings or showing current selection.
|
|
37
|
+
*/
|
|
38
|
+
export declare const WithPreselectedDates: Story;
|
|
39
|
+
/**
|
|
40
|
+
* Custom brand colors for theming.
|
|
41
|
+
* Primary color is used for selected dates, secondary for hover states.
|
|
42
|
+
*/
|
|
43
|
+
export declare const CustomColors: Story;
|
|
44
|
+
/**
|
|
45
|
+
* Date restrictions with minimum and maximum selectable dates.
|
|
46
|
+
* Prevents users from selecting dates outside the allowed range.
|
|
47
|
+
*/
|
|
48
|
+
export declare const WithDateRestrictions: Story;
|
|
49
|
+
/**
|
|
50
|
+
* Minimum and maximum stay duration restrictions.
|
|
51
|
+
* Enforces booking rules like "minimum 3 nights" or "maximum 14 nights".
|
|
52
|
+
*/
|
|
53
|
+
export declare const WithStayDurationLimits: Story;
|
|
54
|
+
/**
|
|
55
|
+
* Different date format (YYYY-MM-DD).
|
|
56
|
+
* Useful for backend integration or regional preferences.
|
|
57
|
+
*/
|
|
58
|
+
export declare const CustomDateFormat: Story;
|
|
59
|
+
/**
|
|
60
|
+
* Manual apply mode - requires user to click apply button.
|
|
61
|
+
* Gives users a chance to review their selection before confirming.
|
|
62
|
+
*/
|
|
63
|
+
export declare const ManualApply: Story;
|
|
64
|
+
/**
|
|
65
|
+
* Compact single column layout.
|
|
66
|
+
* Saves space while still providing full functionality.
|
|
67
|
+
*/
|
|
68
|
+
export declare const SingleColumn: Story;
|
|
69
|
+
/**
|
|
70
|
+
* Without tooltip display.
|
|
71
|
+
* Cleaner interface when night count is not needed.
|
|
72
|
+
*/
|
|
73
|
+
export declare const WithoutTooltip: Story;
|
|
14
74
|
//# sourceMappingURL=RangepickerInput.stories.d.ts.map
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -1,26 +1,68 @@
|
|
|
1
1
|
import { ref, watch } from "vue";
|
|
2
2
|
import RangepickerInput from "./RangepickerInput.vue";
|
|
3
|
+
import StoryWrapper from "./StoryWrapper.vue";
|
|
4
|
+
/**
|
|
5
|
+
* RangepickerInput is a date range picker component that provides an intuitive
|
|
6
|
+
* interface for selecting date ranges. It supports both desktop and mobile variants,
|
|
7
|
+
* custom styling, and various configuration options.
|
|
8
|
+
*
|
|
9
|
+
* ## Features
|
|
10
|
+
* - Desktop and mobile variants
|
|
11
|
+
* - Custom color theming
|
|
12
|
+
* - Date restrictions (min/max dates, min/max days)
|
|
13
|
+
* - Multiple date formats
|
|
14
|
+
* - Tooltip support showing number of nights
|
|
15
|
+
* - Auto-apply or manual confirmation
|
|
16
|
+
*/
|
|
3
17
|
const meta = {
|
|
4
|
-
title: "Components/Rangepicker",
|
|
18
|
+
title: "Components/Rangepicker/Input",
|
|
5
19
|
component: RangepickerInput,
|
|
20
|
+
tags: ['autodocs'],
|
|
6
21
|
argTypes: {
|
|
7
22
|
modelValue: {
|
|
8
|
-
control: "text"
|
|
23
|
+
control: "text",
|
|
24
|
+
description: "The selected date range in format 'DD MMM YYYY - DD MMM YYYY'"
|
|
9
25
|
},
|
|
10
|
-
|
|
11
|
-
control: "
|
|
26
|
+
placeholder: {
|
|
27
|
+
control: "text",
|
|
28
|
+
description: "Placeholder text shown when no date is selected"
|
|
12
29
|
},
|
|
13
30
|
variant: {
|
|
14
31
|
control: "select",
|
|
15
|
-
options: ["desktop", "mobile"]
|
|
32
|
+
options: ["desktop", "mobile"],
|
|
33
|
+
description: "Display variant - desktop shows side-by-side calendars, mobile shows stacked"
|
|
16
34
|
},
|
|
17
35
|
primaryColor: {
|
|
18
36
|
control: "color",
|
|
19
|
-
description: "Primary color for selected dates and highlights"
|
|
37
|
+
description: "Primary color for selected dates and highlights (hex format)"
|
|
20
38
|
},
|
|
21
39
|
secondaryColor: {
|
|
22
40
|
control: "color",
|
|
23
|
-
description: "Secondary color for hover states"
|
|
41
|
+
description: "Secondary color for hover states (hex format)"
|
|
42
|
+
},
|
|
43
|
+
id: {
|
|
44
|
+
control: "text",
|
|
45
|
+
description: "HTML id attribute for the input element"
|
|
46
|
+
},
|
|
47
|
+
name: {
|
|
48
|
+
control: "text",
|
|
49
|
+
description: "HTML name attribute for form submission"
|
|
50
|
+
},
|
|
51
|
+
readonly: {
|
|
52
|
+
control: "boolean",
|
|
53
|
+
description: "Whether the input is readonly"
|
|
54
|
+
},
|
|
55
|
+
options: {
|
|
56
|
+
control: "object",
|
|
57
|
+
description: "Litepicker configuration options"
|
|
58
|
+
},
|
|
59
|
+
'onUpdate:modelValue': {
|
|
60
|
+
action: 'update:modelValue',
|
|
61
|
+
description: "Emitted when date range changes"
|
|
62
|
+
},
|
|
63
|
+
'onFocusin': {
|
|
64
|
+
action: 'focusin',
|
|
65
|
+
description: "Emitted when input receives focus"
|
|
24
66
|
}
|
|
25
67
|
},
|
|
26
68
|
args: {
|
|
@@ -29,6 +71,7 @@ const meta = {
|
|
|
29
71
|
id: "dates",
|
|
30
72
|
name: "dates",
|
|
31
73
|
variant: "desktop",
|
|
74
|
+
readonly: true,
|
|
32
75
|
options: {
|
|
33
76
|
autoApply: true,
|
|
34
77
|
allowRepick: true,
|
|
@@ -44,6 +87,7 @@ const meta = {
|
|
|
44
87
|
numberOfColumns: 2,
|
|
45
88
|
numberOfMonths: 2,
|
|
46
89
|
singleMode: false,
|
|
90
|
+
showTooltip: true,
|
|
47
91
|
tooltipText: {
|
|
48
92
|
one: 'night',
|
|
49
93
|
other: 'nights',
|
|
@@ -54,7 +98,7 @@ const meta = {
|
|
|
54
98
|
}
|
|
55
99
|
},
|
|
56
100
|
render: (args) => ({
|
|
57
|
-
components: { RangepickerInput },
|
|
101
|
+
components: { RangepickerInput, StoryWrapper },
|
|
58
102
|
setup() {
|
|
59
103
|
const modelValue = ref(args.modelValue ?? "");
|
|
60
104
|
watch(() => args.modelValue, (value) => {
|
|
@@ -63,55 +107,213 @@ const meta = {
|
|
|
63
107
|
modelValue.value = nextValue;
|
|
64
108
|
}
|
|
65
109
|
});
|
|
66
|
-
|
|
110
|
+
const handleUpdate = (value) => {
|
|
111
|
+
modelValue.value = value;
|
|
112
|
+
args['onUpdate:modelValue']?.(value);
|
|
113
|
+
};
|
|
114
|
+
return { args, modelValue, handleUpdate };
|
|
67
115
|
},
|
|
68
116
|
template: `
|
|
69
|
-
<
|
|
70
|
-
<RangepickerInput
|
|
71
|
-
|
|
117
|
+
<StoryWrapper>
|
|
118
|
+
<RangepickerInput
|
|
119
|
+
v-bind="args"
|
|
120
|
+
v-model="modelValue"
|
|
121
|
+
@update:model-value="handleUpdate"
|
|
122
|
+
class="tw-w-full"
|
|
123
|
+
/>
|
|
124
|
+
</StoryWrapper>
|
|
72
125
|
`
|
|
73
126
|
})
|
|
74
127
|
};
|
|
75
128
|
export default meta;
|
|
129
|
+
/**
|
|
130
|
+
* Default state with no pre-selected dates.
|
|
131
|
+
* Shows the basic usage with standard configuration.
|
|
132
|
+
*/
|
|
76
133
|
export const Default = {};
|
|
134
|
+
/**
|
|
135
|
+
* Desktop variant with 2 columns showing months side by side.
|
|
136
|
+
* Best for larger screens and quick date range selection.
|
|
137
|
+
*/
|
|
138
|
+
export const Desktop = {
|
|
139
|
+
args: {
|
|
140
|
+
variant: "desktop",
|
|
141
|
+
placeholder: "Select your dates"
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
/**
|
|
145
|
+
* Mobile variant with stacked calendar display.
|
|
146
|
+
* Optimized for smaller screens and touch interactions.
|
|
147
|
+
*/
|
|
77
148
|
export const Mobile = {
|
|
78
149
|
args: {
|
|
79
|
-
variant: "mobile"
|
|
150
|
+
variant: "mobile",
|
|
151
|
+
placeholder: "Tap to select dates"
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
/**
|
|
155
|
+
* Pre-selected date range.
|
|
156
|
+
* Useful for editing existing bookings or showing current selection.
|
|
157
|
+
*/
|
|
158
|
+
export const WithPreselectedDates = {
|
|
159
|
+
args: {
|
|
160
|
+
modelValue: (() => {
|
|
161
|
+
const start = new Date();
|
|
162
|
+
const end = new Date();
|
|
163
|
+
end.setDate(end.getDate() + 7);
|
|
164
|
+
const format = (date) => {
|
|
165
|
+
const day = date.getDate().toString().padStart(2, '0');
|
|
166
|
+
const month = date.toLocaleString('en-US', { month: 'short' });
|
|
167
|
+
const year = date.getFullYear();
|
|
168
|
+
return `${day} ${month} ${year}`;
|
|
169
|
+
};
|
|
170
|
+
return `${format(start)} - ${format(end)}`;
|
|
171
|
+
})()
|
|
80
172
|
}
|
|
81
173
|
};
|
|
82
|
-
|
|
174
|
+
/**
|
|
175
|
+
* Custom brand colors for theming.
|
|
176
|
+
* Primary color is used for selected dates, secondary for hover states.
|
|
177
|
+
*/
|
|
178
|
+
export const CustomColors = {
|
|
83
179
|
args: {
|
|
84
|
-
primaryColor: "#
|
|
85
|
-
secondaryColor: "#
|
|
180
|
+
primaryColor: "#10b981",
|
|
181
|
+
secondaryColor: "#34d399",
|
|
182
|
+
placeholder: "Pick your travel dates"
|
|
86
183
|
}
|
|
87
184
|
};
|
|
88
|
-
|
|
185
|
+
/**
|
|
186
|
+
* Date restrictions with minimum and maximum selectable dates.
|
|
187
|
+
* Prevents users from selecting dates outside the allowed range.
|
|
188
|
+
*/
|
|
189
|
+
export const WithDateRestrictions = {
|
|
89
190
|
args: {
|
|
90
|
-
|
|
91
|
-
|
|
191
|
+
placeholder: "Available dates only",
|
|
192
|
+
options: {
|
|
193
|
+
autoApply: true,
|
|
194
|
+
minDate: new Date(),
|
|
195
|
+
maxDate: (() => {
|
|
196
|
+
const maxDate = new Date();
|
|
197
|
+
maxDate.setMonth(maxDate.getMonth() + 3);
|
|
198
|
+
return maxDate;
|
|
199
|
+
})(),
|
|
200
|
+
format: 'DD MMM YYYY',
|
|
201
|
+
numberOfColumns: 2,
|
|
202
|
+
numberOfMonths: 2,
|
|
203
|
+
showTooltip: true,
|
|
204
|
+
tooltipText: {
|
|
205
|
+
one: 'night',
|
|
206
|
+
other: 'nights',
|
|
207
|
+
},
|
|
208
|
+
tooltipNumber: (totalDays) => totalDays - 1,
|
|
209
|
+
}
|
|
92
210
|
}
|
|
93
211
|
};
|
|
94
|
-
|
|
212
|
+
/**
|
|
213
|
+
* Minimum and maximum stay duration restrictions.
|
|
214
|
+
* Enforces booking rules like "minimum 3 nights" or "maximum 14 nights".
|
|
215
|
+
*/
|
|
216
|
+
export const WithStayDurationLimits = {
|
|
95
217
|
args: {
|
|
96
|
-
|
|
97
|
-
|
|
218
|
+
placeholder: "3-14 nights stay",
|
|
219
|
+
options: {
|
|
220
|
+
autoApply: true,
|
|
221
|
+
minDate: new Date(),
|
|
222
|
+
minDays: 3,
|
|
223
|
+
maxDays: 14,
|
|
224
|
+
format: 'DD MMM YYYY',
|
|
225
|
+
numberOfColumns: 2,
|
|
226
|
+
numberOfMonths: 2,
|
|
227
|
+
showTooltip: true,
|
|
228
|
+
tooltipText: {
|
|
229
|
+
one: 'night',
|
|
230
|
+
other: 'nights',
|
|
231
|
+
},
|
|
232
|
+
tooltipNumber: (totalDays) => totalDays - 1,
|
|
233
|
+
}
|
|
98
234
|
}
|
|
99
235
|
};
|
|
100
|
-
|
|
236
|
+
/**
|
|
237
|
+
* Different date format (YYYY-MM-DD).
|
|
238
|
+
* Useful for backend integration or regional preferences.
|
|
239
|
+
*/
|
|
240
|
+
export const CustomDateFormat = {
|
|
101
241
|
args: {
|
|
102
|
-
|
|
103
|
-
|
|
242
|
+
placeholder: "YYYY-MM-DD format",
|
|
243
|
+
options: {
|
|
244
|
+
autoApply: true,
|
|
245
|
+
minDate: new Date(),
|
|
246
|
+
format: 'YYYY-MM-DD',
|
|
247
|
+
numberOfColumns: 2,
|
|
248
|
+
numberOfMonths: 2,
|
|
249
|
+
showTooltip: true,
|
|
250
|
+
tooltipText: {
|
|
251
|
+
one: 'night',
|
|
252
|
+
other: 'nights',
|
|
253
|
+
},
|
|
254
|
+
tooltipNumber: (totalDays) => totalDays - 1,
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
};
|
|
258
|
+
/**
|
|
259
|
+
* Manual apply mode - requires user to click apply button.
|
|
260
|
+
* Gives users a chance to review their selection before confirming.
|
|
261
|
+
*/
|
|
262
|
+
export const ManualApply = {
|
|
263
|
+
args: {
|
|
264
|
+
placeholder: "Click apply to confirm",
|
|
265
|
+
options: {
|
|
266
|
+
autoApply: false,
|
|
267
|
+
allowRepick: true,
|
|
268
|
+
minDate: new Date(),
|
|
269
|
+
format: 'DD MMM YYYY',
|
|
270
|
+
numberOfColumns: 2,
|
|
271
|
+
numberOfMonths: 2,
|
|
272
|
+
showTooltip: true,
|
|
273
|
+
tooltipText: {
|
|
274
|
+
one: 'night',
|
|
275
|
+
other: 'nights',
|
|
276
|
+
},
|
|
277
|
+
tooltipNumber: (totalDays) => totalDays - 1,
|
|
278
|
+
}
|
|
104
279
|
}
|
|
105
280
|
};
|
|
106
|
-
|
|
281
|
+
/**
|
|
282
|
+
* Compact single column layout.
|
|
283
|
+
* Saves space while still providing full functionality.
|
|
284
|
+
*/
|
|
285
|
+
export const SingleColumn = {
|
|
107
286
|
args: {
|
|
108
|
-
|
|
109
|
-
|
|
287
|
+
placeholder: "Compact view",
|
|
288
|
+
options: {
|
|
289
|
+
autoApply: true,
|
|
290
|
+
minDate: new Date(),
|
|
291
|
+
format: 'DD MMM YYYY',
|
|
292
|
+
numberOfColumns: 1,
|
|
293
|
+
numberOfMonths: 2,
|
|
294
|
+
showTooltip: true,
|
|
295
|
+
tooltipText: {
|
|
296
|
+
one: 'night',
|
|
297
|
+
other: 'nights',
|
|
298
|
+
},
|
|
299
|
+
tooltipNumber: (totalDays) => totalDays - 1,
|
|
300
|
+
}
|
|
110
301
|
}
|
|
111
302
|
};
|
|
112
|
-
|
|
303
|
+
/**
|
|
304
|
+
* Without tooltip display.
|
|
305
|
+
* Cleaner interface when night count is not needed.
|
|
306
|
+
*/
|
|
307
|
+
export const WithoutTooltip = {
|
|
113
308
|
args: {
|
|
114
|
-
|
|
115
|
-
|
|
309
|
+
placeholder: "No tooltip shown",
|
|
310
|
+
options: {
|
|
311
|
+
autoApply: true,
|
|
312
|
+
minDate: new Date(),
|
|
313
|
+
format: 'DD MMM YYYY',
|
|
314
|
+
numberOfColumns: 2,
|
|
315
|
+
numberOfMonths: 2,
|
|
316
|
+
showTooltip: false
|
|
317
|
+
}
|
|
116
318
|
}
|
|
117
319
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AAgNA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,GAAG,CAAA;IACjB,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;;;;;;;;aAHW,SAAS,GAAG,QAAQ;iBAJhB,MAAM;cACT,OAAO;;;;;AA0NpB,wBAUG"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare function __VLS_template(): {
|
|
2
|
+
attrs: Partial<{}>;
|
|
3
|
+
slots: {
|
|
4
|
+
default?(_: {}): any;
|
|
5
|
+
};
|
|
6
|
+
refs: {};
|
|
7
|
+
rootEl: HTMLDivElement;
|
|
8
|
+
};
|
|
9
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
10
|
+
declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
11
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
14
|
+
new (): {
|
|
15
|
+
$slots: S;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=StoryWrapper.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StoryWrapper.vue.d.ts","sourceRoot":"","sources":["../src/StoryWrapper.vue"],"names":[],"mappings":"AAiBA,iBAAS,cAAc;WAwBT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAOD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0RAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|