@youcan/celeste 0.7.3 → 0.9.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/dist/celeste.css +465 -0
- package/dist/cjs/calendar.cjs +2 -0
- package/dist/cjs/chunks/ComboboxContent.cjs +1 -1
- package/dist/cjs/chunks/DialogPortal.cjs +1 -1
- package/dist/cjs/chunks/DismissableLayer.cjs +0 -34
- package/dist/cjs/chunks/FocusScope.cjs +2 -2
- package/dist/cjs/chunks/MenuContentImpl.cjs +1 -1
- package/dist/cjs/chunks/SelectItemAlignedPosition.cjs +1 -1
- package/dist/cjs/chunks/calendar.cjs +923 -0
- package/dist/cjs/chunks/components.cjs +9 -1
- package/dist/cjs/chunks/counter-input.cjs +2 -13
- package/dist/cjs/chunks/date-picker.cjs +99 -0
- package/dist/cjs/chunks/defu.cjs +34 -0
- package/dist/cjs/chunks/popover-content.cjs +1 -1
- package/dist/cjs/chunks/range-calendar.cjs +1170 -0
- package/dist/cjs/chunks/range-picker.cjs +231 -0
- package/dist/cjs/chunks/tooltip-content.cjs +3 -2
- package/dist/cjs/chunks/useCalendar.cjs +2439 -0
- package/dist/cjs/chunks/useLocale.cjs +20 -0
- package/dist/cjs/date-picker.cjs +2 -0
- package/dist/cjs/index.cjs +9 -1
- package/dist/cjs/range-calendar.cjs +2 -0
- package/dist/cjs/range-picker.cjs +2 -0
- package/dist/components/calendar/calendar.d.ts +19 -0
- package/dist/components/calendar/index.d.ts +2 -0
- package/dist/components/date-picker/date-picker.d.ts +27 -0
- package/dist/components/date-picker/index.d.ts +2 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/range-calendar/index.d.ts +2 -0
- package/dist/components/range-calendar/range-calendar.d.ts +24 -0
- package/dist/components/range-picker/index.d.ts +2 -0
- package/dist/components/range-picker/range-picker.d.ts +38 -0
- package/dist/components/rich-editor/rich-editor.d.ts +1 -1
- package/dist/es/calendar.js +2 -0
- package/dist/es/chunks/ComboboxContent.js +1 -1
- package/dist/es/chunks/DialogPortal.js +1 -1
- package/dist/es/chunks/DismissableLayer.js +1 -29
- package/dist/es/chunks/FocusScope.js +1 -1
- package/dist/es/chunks/MenuContentImpl.js +1 -1
- package/dist/es/chunks/SelectItemAlignedPosition.js +1 -1
- package/dist/es/chunks/calendar.js +916 -0
- package/dist/es/chunks/components.js +9 -1
- package/dist/es/chunks/counter-input.js +1 -12
- package/dist/es/chunks/date-picker.js +92 -0
- package/dist/es/chunks/defu.js +29 -0
- package/dist/es/chunks/popover-content.js +1 -1
- package/dist/es/chunks/range-calendar.js +1163 -0
- package/dist/es/chunks/range-picker.js +224 -0
- package/dist/es/chunks/tooltip-content.js +2 -1
- package/dist/es/chunks/useCalendar.js +2331 -0
- package/dist/es/chunks/useLocale.js +14 -0
- package/dist/es/date-picker.js +2 -0
- package/dist/es/index.js +6 -2
- package/dist/es/range-calendar.js +2 -0
- package/dist/es/range-picker.js +2 -0
- package/package.json +5 -3
- package/src/components/calendar/calendar.vue +305 -0
- package/src/components/calendar/index.ts +2 -0
- package/src/components/calendar/stories/calendar.stories.ts +76 -0
- package/src/components/date-picker/date-picker.vue +91 -0
- package/src/components/date-picker/index.ts +2 -0
- package/src/components/date-picker/stories/date-picker.stories.ts +92 -0
- package/src/components/index.ts +4 -0
- package/src/components/range-calendar/index.ts +2 -0
- package/src/components/range-calendar/range-calendar.vue +363 -0
- package/src/components/range-calendar/stories/range-calendar.stories.ts +46 -0
- package/src/components/range-picker/index.ts +2 -0
- package/src/components/range-picker/range-picker.vue +237 -0
- package/src/components/range-picker/stories/range-picker.stories.ts +97 -0
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
require("./chunk.cjs");
|
|
2
|
+
const require_clsx = require("./clsx.cjs");
|
|
3
|
+
const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
|
|
4
|
+
const require_useCalendar = require("./useCalendar.cjs");
|
|
5
|
+
const require_range_calendar = require("./range-calendar.cjs");
|
|
6
|
+
const require_button = require("./button.cjs");
|
|
7
|
+
const require_use_delegated_props = require("../use-delegated-props.cjs");
|
|
8
|
+
let vue = require("vue");
|
|
9
|
+
//#region src/components/range-picker/range-picker.vue?vue&type=script&setup=true&lang.ts
|
|
10
|
+
var _hoisted_1 = {
|
|
11
|
+
key: 0,
|
|
12
|
+
class: "celeste-range-picker-presets"
|
|
13
|
+
};
|
|
14
|
+
var _hoisted_2 = ["data-active", "onClick"];
|
|
15
|
+
var _hoisted_3 = { class: "celeste-range-picker-content" };
|
|
16
|
+
var _hoisted_4 = { class: "celeste-range-picker-calendar" };
|
|
17
|
+
var _hoisted_5 = {
|
|
18
|
+
key: 0,
|
|
19
|
+
class: "celeste-range-picker-footer"
|
|
20
|
+
};
|
|
21
|
+
var _hoisted_6 = { class: "celeste-range-picker-hint" };
|
|
22
|
+
var _hoisted_7 = { class: "celeste-range-picker-hint-label" };
|
|
23
|
+
var _hoisted_8 = { class: "celeste-range-picker-hint-value" };
|
|
24
|
+
var _hoisted_9 = {
|
|
25
|
+
key: 1,
|
|
26
|
+
class: "celeste-range-picker-hint-label"
|
|
27
|
+
};
|
|
28
|
+
var range_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
29
|
+
__name: "range-picker",
|
|
30
|
+
props: /* @__PURE__ */ (0, vue.mergeModels)({
|
|
31
|
+
showPresets: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
default: true
|
|
34
|
+
},
|
|
35
|
+
footer: {
|
|
36
|
+
type: Boolean,
|
|
37
|
+
default: true
|
|
38
|
+
},
|
|
39
|
+
presets: {},
|
|
40
|
+
rangeLabel: { default: "Range:" },
|
|
41
|
+
placeholderLabel: { default: "Select a range" },
|
|
42
|
+
cancelLabel: { default: "Cancel" },
|
|
43
|
+
applyLabel: { default: "Apply" },
|
|
44
|
+
class: {},
|
|
45
|
+
markedDates: {},
|
|
46
|
+
defaultPlaceholder: {},
|
|
47
|
+
defaultValue: {},
|
|
48
|
+
placeholder: {},
|
|
49
|
+
allowNonContiguousRanges: { type: Boolean },
|
|
50
|
+
pagedNavigation: { type: Boolean },
|
|
51
|
+
preventDeselect: { type: Boolean },
|
|
52
|
+
maximumDays: {},
|
|
53
|
+
weekStartsOn: {},
|
|
54
|
+
weekdayFormat: {},
|
|
55
|
+
calendarLabel: {},
|
|
56
|
+
fixedWeeks: { type: Boolean },
|
|
57
|
+
maxValue: {},
|
|
58
|
+
minValue: {},
|
|
59
|
+
locale: {},
|
|
60
|
+
numberOfMonths: {},
|
|
61
|
+
disabled: { type: Boolean },
|
|
62
|
+
readonly: { type: Boolean },
|
|
63
|
+
initialFocus: { type: Boolean },
|
|
64
|
+
isDateDisabled: {},
|
|
65
|
+
isDateUnavailable: {},
|
|
66
|
+
isDateHighlightable: {},
|
|
67
|
+
dir: {},
|
|
68
|
+
nextPage: {},
|
|
69
|
+
prevPage: {},
|
|
70
|
+
disableDaysOutsideCurrentView: { type: Boolean },
|
|
71
|
+
fixedDate: {},
|
|
72
|
+
asChild: { type: Boolean },
|
|
73
|
+
as: {}
|
|
74
|
+
}, {
|
|
75
|
+
"modelValue": { default: () => ({
|
|
76
|
+
start: void 0,
|
|
77
|
+
end: void 0
|
|
78
|
+
}) },
|
|
79
|
+
"modelModifiers": {}
|
|
80
|
+
}),
|
|
81
|
+
emits: /* @__PURE__ */ (0, vue.mergeModels)(["apply", "cancel"], ["update:modelValue"]),
|
|
82
|
+
setup(__props, { emit: __emit }) {
|
|
83
|
+
const props = __props;
|
|
84
|
+
const emits = __emit;
|
|
85
|
+
function defaultPresets() {
|
|
86
|
+
const now = require_useCalendar.$14e0f24ef4ac5c92$export$d0bdf45af03a6ea3(require_useCalendar.$14e0f24ef4ac5c92$export$aa8b41735afcabd2());
|
|
87
|
+
return [
|
|
88
|
+
{
|
|
89
|
+
label: "Today",
|
|
90
|
+
value: {
|
|
91
|
+
start: now,
|
|
92
|
+
end: now
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
label: "Last 7 days",
|
|
97
|
+
value: {
|
|
98
|
+
start: now.subtract({ days: 6 }),
|
|
99
|
+
end: now
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
label: "Last 30 days",
|
|
104
|
+
value: {
|
|
105
|
+
start: now.subtract({ days: 29 }),
|
|
106
|
+
end: now
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
label: "Last 3 months",
|
|
111
|
+
value: {
|
|
112
|
+
start: now.subtract({ months: 3 }),
|
|
113
|
+
end: now
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
label: "Last 12 months",
|
|
118
|
+
value: {
|
|
119
|
+
start: now.subtract({ months: 12 }),
|
|
120
|
+
end: now
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
label: "Month to date",
|
|
125
|
+
value: {
|
|
126
|
+
start: now.set({ day: 1 }),
|
|
127
|
+
end: now
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
label: "Year to date",
|
|
132
|
+
value: {
|
|
133
|
+
start: now.set({
|
|
134
|
+
month: 1,
|
|
135
|
+
day: 1
|
|
136
|
+
}),
|
|
137
|
+
end: now
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
label: "All time",
|
|
142
|
+
value: {
|
|
143
|
+
start: void 0,
|
|
144
|
+
end: void 0
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
];
|
|
148
|
+
}
|
|
149
|
+
const modelValue = (0, vue.useModel)(__props, "modelValue");
|
|
150
|
+
const presetList = (0, vue.computed)(() => props.presets ?? defaultPresets());
|
|
151
|
+
const activePreset = (0, vue.ref)(null);
|
|
152
|
+
const calendarProps = require_use_delegated_props.useDelegatedProps(props, [
|
|
153
|
+
"class",
|
|
154
|
+
"showPresets",
|
|
155
|
+
"footer",
|
|
156
|
+
"presets",
|
|
157
|
+
"rangeLabel",
|
|
158
|
+
"placeholderLabel",
|
|
159
|
+
"cancelLabel",
|
|
160
|
+
"applyLabel"
|
|
161
|
+
]);
|
|
162
|
+
let settingFromPreset = false;
|
|
163
|
+
function resolvePreset(preset) {
|
|
164
|
+
return typeof preset.value === "function" ? preset.value() : preset.value;
|
|
165
|
+
}
|
|
166
|
+
function selectPreset(preset) {
|
|
167
|
+
settingFromPreset = true;
|
|
168
|
+
modelValue.value = resolvePreset(preset);
|
|
169
|
+
activePreset.value = preset.label;
|
|
170
|
+
(0, vue.nextTick)(() => {
|
|
171
|
+
settingFromPreset = false;
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
(0, vue.watch)(modelValue, () => {
|
|
175
|
+
if (!settingFromPreset) activePreset.value = null;
|
|
176
|
+
}, { deep: true });
|
|
177
|
+
const rangeFormatter = (0, vue.computed)(() => new require_useCalendar.$fb18d541ea1ad717$export$ad991b66133851cf(props.locale ?? "en-US", {
|
|
178
|
+
month: "short",
|
|
179
|
+
day: "2-digit",
|
|
180
|
+
year: "numeric"
|
|
181
|
+
}));
|
|
182
|
+
const formattedRange = (0, vue.computed)(() => {
|
|
183
|
+
const value = modelValue.value;
|
|
184
|
+
if (!value?.start || !value?.end) return "";
|
|
185
|
+
const tz = require_useCalendar.$14e0f24ef4ac5c92$export$aa8b41735afcabd2();
|
|
186
|
+
return `${rangeFormatter.value.format(value.start.toDate(tz))} - ${rangeFormatter.value.format(value.end.toDate(tz))}`;
|
|
187
|
+
});
|
|
188
|
+
return (_ctx, _cache) => {
|
|
189
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_clsx.clsx)("celeste-range-picker", props.class)) }, [_ctx.showPresets ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("aside", _hoisted_1, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(presetList.value, (preset) => {
|
|
190
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
|
191
|
+
key: preset.label,
|
|
192
|
+
type: "button",
|
|
193
|
+
class: "celeste-range-picker-preset",
|
|
194
|
+
"data-active": activePreset.value === preset.label ? "" : void 0,
|
|
195
|
+
onClick: ($event) => selectPreset(preset)
|
|
196
|
+
}, (0, vue.toDisplayString)(preset.label), 9, _hoisted_2);
|
|
197
|
+
}), 128))])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createElementVNode)("div", _hoisted_4, [(0, vue.createVNode)(require_range_calendar.range_calendar_default, (0, vue.mergeProps)({
|
|
198
|
+
modelValue: modelValue.value,
|
|
199
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
|
|
200
|
+
}, (0, vue.unref)(calendarProps)), null, 16, ["modelValue"])]), _ctx.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5, [
|
|
201
|
+
(0, vue.createElementVNode)("p", _hoisted_6, [formattedRange.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createElementVNode)("span", _hoisted_7, (0, vue.toDisplayString)(_ctx.rangeLabel) + "\xA0", 1), (0, vue.createElementVNode)("span", _hoisted_8, (0, vue.toDisplayString)(formattedRange.value), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_9, (0, vue.toDisplayString)(_ctx.placeholderLabel), 1))]),
|
|
202
|
+
(0, vue.createVNode)(require_button.button_default, {
|
|
203
|
+
variant: "stroke",
|
|
204
|
+
intent: "neutral",
|
|
205
|
+
onClick: _cache[1] || (_cache[1] = ($event) => emits("cancel"))
|
|
206
|
+
}, {
|
|
207
|
+
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(_ctx.cancelLabel), 1)]),
|
|
208
|
+
_: 1
|
|
209
|
+
}),
|
|
210
|
+
(0, vue.createVNode)(require_button.button_default, {
|
|
211
|
+
variant: "fill",
|
|
212
|
+
intent: "primary",
|
|
213
|
+
onClick: _cache[2] || (_cache[2] = ($event) => emits("apply", modelValue.value))
|
|
214
|
+
}, {
|
|
215
|
+
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(_ctx.applyLabel), 1)]),
|
|
216
|
+
_: 1
|
|
217
|
+
})
|
|
218
|
+
])) : (0, vue.createCommentVNode)("", true)])], 2);
|
|
219
|
+
};
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
//#endregion
|
|
223
|
+
//#region src/components/range-picker/range-picker.vue
|
|
224
|
+
var range_picker_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(range_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4f5c8aa9"]]);
|
|
225
|
+
//#endregion
|
|
226
|
+
Object.defineProperty(exports, "range_picker_default", {
|
|
227
|
+
enumerable: true,
|
|
228
|
+
get: function() {
|
|
229
|
+
return range_picker_default;
|
|
230
|
+
}
|
|
231
|
+
});
|
|
@@ -2,11 +2,12 @@ require("./chunk.cjs");
|
|
|
2
2
|
const require_clsx = require("./clsx.cjs");
|
|
3
3
|
const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
|
|
4
4
|
const require_dist = require("./dist.cjs");
|
|
5
|
-
const
|
|
5
|
+
const require_defu = require("./defu.cjs");
|
|
6
6
|
const require_useForwardExpose = require("./useForwardExpose.cjs");
|
|
7
7
|
const require_useForwardProps = require("./useForwardProps.cjs");
|
|
8
8
|
const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
|
|
9
9
|
const require_Presence = require("./Presence.cjs");
|
|
10
|
+
const require_DismissableLayer = require("./DismissableLayer.cjs");
|
|
10
11
|
const require_Teleport = require("./Teleport.cjs");
|
|
11
12
|
const require_VisuallyHidden = require("./VisuallyHidden.cjs");
|
|
12
13
|
const require_PopperArrow = require("./PopperArrow.cjs");
|
|
@@ -322,7 +323,7 @@ var TooltipContentImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
322
323
|
const ariaLabel = (0, vue.computed)(() => props.ariaLabel || currentElement.value?.textContent);
|
|
323
324
|
const popperContentProps = (0, vue.computed)(() => {
|
|
324
325
|
const { ariaLabel: _, ...restProps } = props;
|
|
325
|
-
return
|
|
326
|
+
return require_defu.defu(restProps, providerContext.content.value ?? {}, {
|
|
326
327
|
side: "top",
|
|
327
328
|
sideOffset: 0,
|
|
328
329
|
align: "center",
|