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