@devslab/dds-solid 0.21.1 → 0.22.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.ko.md +6 -0
- package/README.md +6 -0
- package/dist/assets/calendar-view-1RO2mtf1.js +456 -0
- package/dist/assets/calendar-view-1RO2mtf1.js.map +1 -0
- package/dist/assets/choice-DoXiK8nc.js +443 -0
- package/dist/assets/choice-DoXiK8nc.js.map +1 -0
- package/dist/assets/utils-Ou0UJRlO.js +11 -0
- package/dist/assets/utils-Ou0UJRlO.js.map +1 -0
- package/dist/calendar-view-CTBTPB4T.js +444 -0
- package/dist/calendar-view-CTBTPB4T.js.map +1 -0
- package/dist/calendar-view.d.ts +16 -0
- package/dist/calendar-view.d.ts.map +1 -0
- package/dist/calendar.d.ts +19 -0
- package/dist/calendar.d.ts.map +1 -0
- package/dist/calendar.js +95 -0
- package/dist/calendar.js.map +1 -0
- package/dist/calendar.server.js +95 -0
- package/dist/calendar.server.js.map +1 -0
- package/dist/choice-BPMiJlPJ.js +395 -0
- package/dist/choice-BPMiJlPJ.js.map +1 -0
- package/dist/choice-types.d.ts +56 -0
- package/dist/choice-types.d.ts.map +1 -0
- package/dist/combobox.d.ts +4 -0
- package/dist/combobox.d.ts.map +1 -0
- package/dist/combobox.js +10 -0
- package/dist/combobox.js.map +1 -0
- package/dist/combobox.server.js +10 -0
- package/dist/combobox.server.js.map +1 -0
- package/dist/date-only.d.ts +36 -0
- package/dist/date-only.d.ts.map +1 -0
- package/dist/date-picker.d.ts +10 -1
- package/dist/date-picker.d.ts.map +1 -1
- package/dist/date-picker.js +258 -0
- package/dist/date-picker.js.map +1 -0
- package/dist/date-picker.server.js +260 -0
- package/dist/date-picker.server.js.map +1 -0
- package/dist/dropdown-menu.d.ts +31 -0
- package/dist/dropdown-menu.d.ts.map +1 -0
- package/dist/dropdown-menu.js +101 -0
- package/dist/dropdown-menu.js.map +1 -0
- package/dist/dropdown-menu.server.js +111 -0
- package/dist/dropdown-menu.server.js.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +232 -647
- package/dist/index.js.map +1 -1
- package/dist/input.d.ts +26 -0
- package/dist/input.d.ts.map +1 -0
- package/dist/input.js +130 -0
- package/dist/input.js.map +1 -0
- package/dist/input.server.js +120 -0
- package/dist/input.server.js.map +1 -0
- package/dist/internal/choice.d.ts +5 -0
- package/dist/internal/choice.d.ts.map +1 -0
- package/dist/popover.d.ts +22 -0
- package/dist/popover.d.ts.map +1 -0
- package/dist/popover.js +76 -0
- package/dist/popover.js.map +1 -0
- package/dist/popover.server.js +79 -0
- package/dist/popover.server.js.map +1 -0
- package/dist/select-picker.d.ts +4 -0
- package/dist/select-picker.d.ts.map +1 -0
- package/dist/select-picker.js +10 -0
- package/dist/select-picker.js.map +1 -0
- package/dist/select-picker.server.js +10 -0
- package/dist/select-picker.server.js.map +1 -0
- package/dist/server.js +28 -445
- package/dist/server.js.map +1 -1
- package/dist/utils-oKxhg9RG.js +11 -0
- package/dist/utils-oKxhg9RG.js.map +1 -0
- package/package.json +63 -6
- package/styles.css +10 -1
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import { a as isCalendarDate, i as displayDate, n as canonicalInput, o as isKorean, r as dateMessages, s as validateInput, t as CalendarView } from "./assets/calendar-view-1RO2mtf1.js";
|
|
2
|
+
import { Show, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup, onMount } from "solid-js";
|
|
3
|
+
import { Portal, createComponent, escape, memo, ssr, ssrAttribute, ssrHydrationKey } from "solid-js/web";
|
|
4
|
+
import { DatePicker as DatePicker$1, parseDate } from "@ark-ui/solid/date-picker";
|
|
5
|
+
//#region src/date-picker.tsx
|
|
6
|
+
var _tmpl$ = ["<svg", " width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2\"></rect><path d=\"M7.5 3v5M16.5 3v5M3.5 10.5h17\"></path></svg>"];
|
|
7
|
+
var _tmpl$2 = ["<span", " aria-hidden=\"true\"> *</span>"];
|
|
8
|
+
var _tmpl$3 = [
|
|
9
|
+
"<input",
|
|
10
|
+
" type=\"text\"",
|
|
11
|
+
"",
|
|
12
|
+
"",
|
|
13
|
+
" autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\">"
|
|
14
|
+
];
|
|
15
|
+
var _tmpl$4 = [
|
|
16
|
+
"<span",
|
|
17
|
+
" id=\"",
|
|
18
|
+
"\" class=\"dds-field__error\" role=\"alert\">",
|
|
19
|
+
"</span>"
|
|
20
|
+
];
|
|
21
|
+
var _tmpl$5 = [
|
|
22
|
+
"<div",
|
|
23
|
+
" class=\"",
|
|
24
|
+
"\"",
|
|
25
|
+
" role=\"group\"><label class=\"dds-field__label\"",
|
|
26
|
+
"><!--$-->",
|
|
27
|
+
"<!--/--><!--$-->",
|
|
28
|
+
"<!--/--></label><!--$-->",
|
|
29
|
+
"<!--/--><!--$-->",
|
|
30
|
+
"<!--/--></div>"
|
|
31
|
+
];
|
|
32
|
+
function CalendarIcon() {
|
|
33
|
+
return ssr(_tmpl$, ssrHydrationKey());
|
|
34
|
+
}
|
|
35
|
+
function calendarSelection(value) {
|
|
36
|
+
return isCalendarDate(value) ? [parseDate(value)] : [];
|
|
37
|
+
}
|
|
38
|
+
function DatePicker(props) {
|
|
39
|
+
const locale = () => props.locale ?? "ko-KR", id = `dds-date-${createUniqueId()}`;
|
|
40
|
+
const [draftState, setDraftState] = createSignal({
|
|
41
|
+
text: displayDate(props.value, locale()),
|
|
42
|
+
locale: locale()
|
|
43
|
+
});
|
|
44
|
+
const draft = createMemo(() => {
|
|
45
|
+
const state = draftState(), canonical = canonicalInput(state.text, state.locale);
|
|
46
|
+
return state.locale !== locale() && isCalendarDate(canonical) ? displayDate(canonical, locale()) : state.text;
|
|
47
|
+
});
|
|
48
|
+
const setDraft = (text) => setDraftState({
|
|
49
|
+
text,
|
|
50
|
+
locale: locale()
|
|
51
|
+
});
|
|
52
|
+
const [selection, setSelection] = createSignal(calendarSelection(props.value));
|
|
53
|
+
const [open, setOpen] = createSignal(false);
|
|
54
|
+
let observedValue = props.value, emittedValue = props.value, notified = "", pendingEchoes = [], focusFrame;
|
|
55
|
+
const [portalMount, setPortalMount] = createSignal();
|
|
56
|
+
onMount(() => {});
|
|
57
|
+
const text = () => dateMessages(locale(), props.messages);
|
|
58
|
+
const validity = createMemo(() => validateInput(draft(), props.required ?? false, props.min, props.max, locale()));
|
|
59
|
+
const error = () => validity().valid ? void 0 : validity().reason === "required" ? text().required : text().invalid;
|
|
60
|
+
createEffect(on(() => [props.value, locale()], ([value, nextLocale]) => {
|
|
61
|
+
if (observedValue === value) return;
|
|
62
|
+
observedValue = value;
|
|
63
|
+
const acknowledged = pendingEchoes.indexOf(value);
|
|
64
|
+
if (acknowledged !== -1) {
|
|
65
|
+
pendingEchoes.splice(acknowledged, 1);
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
pendingEchoes = [];
|
|
69
|
+
emittedValue = value;
|
|
70
|
+
setDraft(displayDate(value, nextLocale));
|
|
71
|
+
if (value === "" || isCalendarDate(value)) setSelection(calendarSelection(value));
|
|
72
|
+
}));
|
|
73
|
+
createEffect(() => {
|
|
74
|
+
const state = validity(), callback = props.onValidityChange, key = JSON.stringify(state);
|
|
75
|
+
if (callback && key !== notified) {
|
|
76
|
+
notified = key;
|
|
77
|
+
callback(state);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
createEffect(() => {
|
|
81
|
+
if (props.disabled || props.readOnly) {
|
|
82
|
+
setOpen(false);
|
|
83
|
+
if (focusFrame !== void 0) cancelAnimationFrame(focusFrame);
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
onCleanup(() => {
|
|
87
|
+
if (focusFrame !== void 0) cancelAnimationFrame(focusFrame);
|
|
88
|
+
});
|
|
89
|
+
function commit(next) {
|
|
90
|
+
if (props.disabled || props.readOnly) return;
|
|
91
|
+
const state = validateInput(next, props.required ?? false, props.min, props.max, locale());
|
|
92
|
+
if (next !== "" && !state.valid) return;
|
|
93
|
+
const canonical = next === "" ? "" : state.value;
|
|
94
|
+
setSelection(calendarSelection(canonical));
|
|
95
|
+
if (canonical !== emittedValue) {
|
|
96
|
+
emittedValue = canonical;
|
|
97
|
+
pendingEchoes.push(canonical);
|
|
98
|
+
props.onChange(canonical);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return ssr(_tmpl$5, ssrHydrationKey(), `dds-field dds-date-picker dds-date-picker--${escape(props.labelPlacement ?? "outside", true)}${error() ? " dds-field--error" : ""}`, ssrAttribute("data-filled", draft() !== "" ? "true" : escape(void 0, true), false), ssrAttribute("for", escape(id, true), false), escape(props.label), escape(createComponent(Show, {
|
|
102
|
+
get when() {
|
|
103
|
+
return props.required;
|
|
104
|
+
},
|
|
105
|
+
get children() {
|
|
106
|
+
return ssr(_tmpl$2, ssrHydrationKey());
|
|
107
|
+
}
|
|
108
|
+
})), escape(createComponent(DatePicker$1.Root, {
|
|
109
|
+
get locale() {
|
|
110
|
+
return locale();
|
|
111
|
+
},
|
|
112
|
+
get timeZone() {
|
|
113
|
+
return props.timeZone ?? "Asia/Seoul";
|
|
114
|
+
},
|
|
115
|
+
get disabled() {
|
|
116
|
+
return props.disabled;
|
|
117
|
+
},
|
|
118
|
+
get readOnly() {
|
|
119
|
+
return props.readOnly;
|
|
120
|
+
},
|
|
121
|
+
get required() {
|
|
122
|
+
return props.required;
|
|
123
|
+
},
|
|
124
|
+
get invalid() {
|
|
125
|
+
return !validity().valid;
|
|
126
|
+
},
|
|
127
|
+
get open() {
|
|
128
|
+
return memo(() => !!(open() && !props.disabled))() && !props.readOnly;
|
|
129
|
+
},
|
|
130
|
+
onOpenChange: (details) => setOpen(details.open && !props.disabled && !props.readOnly),
|
|
131
|
+
get min() {
|
|
132
|
+
return memo(() => !!(props.min && isCalendarDate(props.min)))() ? parseDate(props.min) : void 0;
|
|
133
|
+
},
|
|
134
|
+
get max() {
|
|
135
|
+
return memo(() => !!(props.max && isCalendarDate(props.max)))() ? parseDate(props.max) : void 0;
|
|
136
|
+
},
|
|
137
|
+
get startOfWeek() {
|
|
138
|
+
return props.startOfWeek ?? 0;
|
|
139
|
+
},
|
|
140
|
+
minView: "day",
|
|
141
|
+
maxView: "day",
|
|
142
|
+
fixedWeeks: true,
|
|
143
|
+
get translations() {
|
|
144
|
+
return {
|
|
145
|
+
dayCell: (state) => text().selectDate(state.valueText),
|
|
146
|
+
clearTrigger: text().clear
|
|
147
|
+
};
|
|
148
|
+
},
|
|
149
|
+
get value() {
|
|
150
|
+
return selection();
|
|
151
|
+
},
|
|
152
|
+
format: (value) => displayDate(value.toString(), locale()),
|
|
153
|
+
onValueChange: (details) => {
|
|
154
|
+
if (props.disabled || props.readOnly) return;
|
|
155
|
+
const next = details.value[0]?.toString() ?? "";
|
|
156
|
+
if (next !== "" && !validateInput(next, props.required ?? false, props.min, props.max, locale()).valid) return;
|
|
157
|
+
setDraft(displayDate(next, locale()));
|
|
158
|
+
commit(next);
|
|
159
|
+
if (focusFrame !== void 0) cancelAnimationFrame(focusFrame);
|
|
160
|
+
focusFrame = requestAnimationFrame(() => {
|
|
161
|
+
if (!props.disabled && !props.readOnly);
|
|
162
|
+
});
|
|
163
|
+
},
|
|
164
|
+
get positioning() {
|
|
165
|
+
return {
|
|
166
|
+
placement: "bottom-start",
|
|
167
|
+
gutter: 8,
|
|
168
|
+
strategy: portalMount()?.matches("[role=\"dialog\"], [role=\"alertdialog\"]") ? "fixed" : "absolute",
|
|
169
|
+
hideWhenDetached: !!portalMount()?.matches("[role=\"dialog\"], [role=\"alertdialog\"]")
|
|
170
|
+
};
|
|
171
|
+
},
|
|
172
|
+
get children() {
|
|
173
|
+
return [createComponent(DatePicker$1.Control, {
|
|
174
|
+
"class": "dds-date-picker-control",
|
|
175
|
+
get ["data-filled"]() {
|
|
176
|
+
return draft() !== "" ? "true" : void 0;
|
|
177
|
+
},
|
|
178
|
+
get children() {
|
|
179
|
+
return [ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("id", escape(id, true), false) + ssrAttribute("aria-invalid", validity().valid ? escape(void 0, true) : "true", false) + ssrAttribute("aria-required", props.required ? "true" : escape(void 0, true), false) + ssrAttribute("aria-describedby", error() ? `${escape(id, true)}-error` : escape(void 0, true), false), ssrAttribute("value", escape(draft(), true), false), ssrAttribute("required", props.required, true) + ssrAttribute("readonly", escape(props.readOnly, true), false), ssrAttribute("disabled", props.disabled, true) + ssrAttribute("placeholder", isKorean(locale()) ? "YYYY/MM/DD" : "YYYY-MM-DD", false)), createComponent(DatePicker$1.Trigger, {
|
|
180
|
+
"class": "dds-btn dds-btn--secondary",
|
|
181
|
+
get ["aria-label"]() {
|
|
182
|
+
return `${props.label} ${text().openCalendar}`;
|
|
183
|
+
},
|
|
184
|
+
get children() {
|
|
185
|
+
return createComponent(CalendarIcon, {});
|
|
186
|
+
}
|
|
187
|
+
})];
|
|
188
|
+
}
|
|
189
|
+
}), createComponent(Show, {
|
|
190
|
+
get when() {
|
|
191
|
+
return portalMount();
|
|
192
|
+
},
|
|
193
|
+
children: (mount) => createComponent(Portal, {
|
|
194
|
+
get mount() {
|
|
195
|
+
return mount();
|
|
196
|
+
},
|
|
197
|
+
get children() {
|
|
198
|
+
return createComponent(DatePicker$1.Positioner, {
|
|
199
|
+
"class": "dds-date-picker-positioner",
|
|
200
|
+
get children() {
|
|
201
|
+
return createComponent(DatePicker$1.Content, {
|
|
202
|
+
"class": "dds-date-picker-content",
|
|
203
|
+
get ["aria-label"]() {
|
|
204
|
+
return `${props.label} 날짜 선택`;
|
|
205
|
+
},
|
|
206
|
+
get children() {
|
|
207
|
+
return createComponent(CalendarView, {
|
|
208
|
+
get timeZone() {
|
|
209
|
+
return props.timeZone;
|
|
210
|
+
},
|
|
211
|
+
get min() {
|
|
212
|
+
return props.min;
|
|
213
|
+
},
|
|
214
|
+
get max() {
|
|
215
|
+
return props.max;
|
|
216
|
+
},
|
|
217
|
+
get locale() {
|
|
218
|
+
return locale();
|
|
219
|
+
},
|
|
220
|
+
get messages() {
|
|
221
|
+
return props.messages;
|
|
222
|
+
},
|
|
223
|
+
get disabled() {
|
|
224
|
+
return props.disabled;
|
|
225
|
+
},
|
|
226
|
+
get readOnly() {
|
|
227
|
+
return props.readOnly;
|
|
228
|
+
},
|
|
229
|
+
get showToday() {
|
|
230
|
+
return props.showToday;
|
|
231
|
+
},
|
|
232
|
+
get showClear() {
|
|
233
|
+
return props.clearable;
|
|
234
|
+
},
|
|
235
|
+
onClear: () => {
|
|
236
|
+
setDraft("");
|
|
237
|
+
commit("");
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
});
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
})
|
|
246
|
+
})];
|
|
247
|
+
}
|
|
248
|
+
})), escape(createComponent(Show, {
|
|
249
|
+
get when() {
|
|
250
|
+
return error();
|
|
251
|
+
},
|
|
252
|
+
get children() {
|
|
253
|
+
return ssr(_tmpl$4, ssrHydrationKey(), `${escape(id, true)}-error`, escape(error()));
|
|
254
|
+
}
|
|
255
|
+
})));
|
|
256
|
+
}
|
|
257
|
+
//#endregion
|
|
258
|
+
export { DatePicker };
|
|
259
|
+
|
|
260
|
+
//# sourceMappingURL=date-picker.server.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker.server.js","names":["DatePicker","ArkDatePicker","parseDate","Portal","createEffect","createMemo","createSignal","createUniqueId","Show","onCleanup","onMount","on","CalendarView","isCalendarDate","isKorean","displayDate","canonicalInput","validateInput","dateMessages","CalendarMessages","DatePickerValidity","DatePickerProps","label","value","onChange","locale","timeZone","disabled","readOnly","required","onValidityChange","state","min","max","startOfWeek","labelPlacement","messages","clearable","showToday","CalendarIcon","_$ssr","_tmpl$","_$ssrHydrationKey","calendarSelection","props","id","draftState","setDraftState","text","draft","canonical","setDraft","selection","setSelection","open","setOpen","input","HTMLInputElement","trigger","HTMLButtonElement","observedValue","emittedValue","notified","pendingEchoes","focusFrame","portalMount","setPortalMount","HTMLElement","closest","ownerDocument","body","validity","error","valid","undefined","reason","invalid","const","nextLocale","acknowledged","indexOf","splice","setCustomValidity","callback","key","JSON","stringify","cancelAnimationFrame","commit","next","push","changeDraft","_tmpl$5","_$escape","_$ssrAttribute","_$createComponent","when","children","_tmpl$2","Root","_$memo","onOpenChange","details","minView","maxView","fixedWeeks","translations","dayCell","selectDate","valueText","clearTrigger","clear","format","toString","onValueChange","requestAnimationFrame","focus","preventScroll","positioning","placement","gutter","strategy","matches","hideWhenDetached","Control","data-filled","_tmpl$3","Trigger","aria-label","openCalendar","mount","Positioner","Content","showClear","onClear","_tmpl$4"],"sources":["../src/date-picker.tsx"],"sourcesContent":["import {\n DatePicker as ArkDatePicker,\n parseDate,\n} from \"@ark-ui/solid/date-picker\";\nimport { Portal } from \"solid-js/web\";\nimport {\n createEffect,\n createMemo,\n createSignal,\n createUniqueId,\n Show,\n onCleanup,\n onMount,\n on,\n} from \"solid-js\";\nimport { CalendarView } from \"./calendar-view\";\nimport {\n isCalendarDate,\n isKorean,\n displayDate,\n canonicalInput,\n validateInput,\n dateMessages,\n type CalendarMessages,\n type DatePickerValidity,\n} from \"./date-only\";\nexport type { DatePickerValidity, CalendarMessages } from \"./date-only\";\nexport interface DatePickerProps {\n label: string;\n value: string;\n onChange: (value: string) => void;\n locale?: string;\n timeZone?: string;\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n onValidityChange?: (state: DatePickerValidity) => void;\n min?: string;\n max?: string;\n startOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n labelPlacement?: \"outside\" | \"inside\" | \"hidden\";\n messages?: CalendarMessages;\n clearable?: boolean;\n showToday?: boolean;\n}\nfunction CalendarIcon() {\n return (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n aria-hidden=\"true\"\n >\n <rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2\" />\n <path d=\"M7.5 3v5M16.5 3v5M3.5 10.5h17\" />\n </svg>\n );\n}\nfunction calendarSelection(value: string) {\n return isCalendarDate(value) ? [parseDate(value)] : [];\n}\nexport function DatePicker(props: DatePickerProps) {\n const locale = () => props.locale ?? \"ko-KR\",\n id = `dds-date-${createUniqueId()}`;\n const [draftState, setDraftState] = createSignal({\n text: displayDate(props.value, locale()),\n locale: locale(),\n });\n // Keep the draft's formatting locale with its text, so changing locale cannot\n // publish an intermediate invalid report before the synchronization effect.\n const draft = createMemo(() => {\n const state = draftState(),\n canonical = canonicalInput(state.text, state.locale);\n return state.locale !== locale() && isCalendarDate(canonical)\n ? displayDate(canonical, locale())\n : state.text;\n });\n const setDraft = (text: string) => setDraftState({ text, locale: locale() });\n const [selection, setSelection] = createSignal(\n calendarSelection(props.value),\n );\n const [open, setOpen] = createSignal(false);\n let input: HTMLInputElement | undefined,\n trigger: HTMLButtonElement | undefined,\n observedValue = props.value,\n emittedValue = props.value,\n notified = \"\",\n pendingEchoes: string[] = [],\n focusFrame: number | undefined;\n const [portalMount, setPortalMount] = createSignal<HTMLElement>();\n onMount(() => {\n if (input) {\n setPortalMount(\n input.closest<HTMLElement>('[role=\"dialog\"], [role=\"alertdialog\"]') ??\n input.ownerDocument.body,\n );\n }\n });\n const text = () => dateMessages(locale(), props.messages);\n const validity = createMemo(() =>\n validateInput(\n draft(),\n props.required ?? false,\n props.min,\n props.max,\n locale(),\n ),\n );\n const error = () =>\n validity().valid\n ? undefined\n : validity().reason === \"required\"\n ? text().required\n : text().invalid;\n createEffect(\n on(\n () => [props.value, locale()] as const,\n ([value, nextLocale]) => {\n if (observedValue === value) return;\n observedValue = value;\n const acknowledged = pendingEchoes.indexOf(value);\n if (acknowledged !== -1) {\n pendingEchoes.splice(acknowledged, 1);\n return;\n }\n pendingEchoes = [];\n emittedValue = value;\n setDraft(displayDate(value, nextLocale));\n if (value === \"\" || isCalendarDate(value))\n setSelection(calendarSelection(value));\n },\n ),\n );\n createEffect(() => {\n input?.setCustomValidity(error() ?? \"\");\n const state = validity(),\n callback = props.onValidityChange,\n key = JSON.stringify(state);\n if (callback && key !== notified) {\n notified = key;\n callback(state);\n }\n });\n createEffect(() => {\n if (props.disabled || props.readOnly) {\n setOpen(false);\n if (focusFrame !== undefined) cancelAnimationFrame(focusFrame);\n }\n });\n onCleanup(() => {\n if (focusFrame !== undefined) cancelAnimationFrame(focusFrame);\n });\n function commit(next: string) {\n if (props.disabled || props.readOnly) return;\n const state = validateInput(\n next,\n props.required ?? false,\n props.min,\n props.max,\n locale(),\n );\n if (next !== \"\" && !state.valid) return;\n const canonical = next === \"\" ? \"\" : state.value!;\n setSelection(calendarSelection(canonical));\n if (canonical !== emittedValue) {\n emittedValue = canonical;\n pendingEchoes.push(canonical);\n props.onChange(canonical);\n }\n }\n function changeDraft(next: string) {\n if (props.disabled || props.readOnly) return;\n setDraft(next);\n const state = validateInput(\n next,\n props.required ?? false,\n props.min,\n props.max,\n locale(),\n );\n input?.setCustomValidity(state.valid ? \"\" : text().invalid);\n if (next === \"\" || state.valid) {\n setDraft(displayDate(state.value ?? \"\", locale()));\n commit(next);\n }\n }\n return (\n <div\n class={`dds-field dds-date-picker dds-date-picker--${props.labelPlacement ?? \"outside\"}${error() ? \" dds-field--error\" : \"\"}`}\n data-filled={draft() !== \"\" ? \"true\" : undefined}\n role=\"group\"\n >\n <label class=\"dds-field__label\" for={id}>\n {props.label}\n <Show when={props.required}>\n <span aria-hidden=\"true\"> *</span>\n </Show>\n </label>\n <ArkDatePicker.Root\n locale={locale()}\n timeZone={props.timeZone ?? \"Asia/Seoul\"}\n disabled={props.disabled}\n readOnly={props.readOnly}\n required={props.required}\n invalid={!validity().valid}\n open={open() && !props.disabled && !props.readOnly}\n onOpenChange={(details) =>\n setOpen(details.open && !props.disabled && !props.readOnly)\n }\n min={\n props.min && isCalendarDate(props.min)\n ? parseDate(props.min)\n : undefined\n }\n max={\n props.max && isCalendarDate(props.max)\n ? parseDate(props.max)\n : undefined\n }\n startOfWeek={props.startOfWeek ?? 0}\n minView=\"day\"\n maxView=\"day\"\n fixedWeeks\n translations={{\n dayCell: (state) => text().selectDate(state.valueText),\n clearTrigger: text().clear,\n }}\n value={selection()}\n format={(value) => displayDate(value.toString(), locale())}\n onValueChange={(details) => {\n if (props.disabled || props.readOnly) return;\n const next = details.value[0]?.toString() ?? \"\";\n if (\n next !== \"\" &&\n !validateInput(\n next,\n props.required ?? false,\n props.min,\n props.max,\n locale(),\n ).valid\n )\n return;\n setDraft(displayDate(next, locale()));\n commit(next);\n if (focusFrame !== undefined) cancelAnimationFrame(focusFrame);\n focusFrame = requestAnimationFrame(() => {\n if (!props.disabled && !props.readOnly)\n input?.focus({ preventScroll: true });\n });\n }}\n positioning={{\n placement: \"bottom-start\",\n gutter: 8,\n strategy: portalMount()?.matches(\n '[role=\"dialog\"], [role=\"alertdialog\"]',\n )\n ? \"fixed\"\n : \"absolute\",\n hideWhenDetached: !!portalMount()?.matches(\n '[role=\"dialog\"], [role=\"alertdialog\"]',\n ),\n }}\n >\n <ArkDatePicker.Control\n class=\"dds-date-picker-control\"\n data-filled={draft() !== \"\" ? \"true\" : undefined}\n >\n <input\n id={id}\n aria-invalid={validity().valid ? undefined : \"true\"}\n aria-required={props.required ? \"true\" : undefined}\n aria-describedby={error() ? `${id}-error` : undefined}\n ref={input}\n type=\"text\"\n value={draft()}\n required={props.required}\n readOnly={props.readOnly}\n disabled={props.disabled}\n placeholder={isKorean(locale()) ? \"YYYY/MM/DD\" : \"YYYY-MM-DD\"}\n autocomplete=\"off\"\n autocorrect=\"off\"\n spellcheck={false}\n on:input={(event) => {\n event.stopPropagation();\n changeDraft(event.currentTarget.value);\n }}\n onBlur={() => commit(draft())}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" && !event.isComposing) {\n event.preventDefault();\n event.stopPropagation();\n commit(draft());\n }\n }}\n />\n <ArkDatePicker.Trigger\n ref={trigger}\n class=\"dds-btn dds-btn--secondary\"\n aria-label={`${props.label} ${text().openCalendar}`}\n >\n <CalendarIcon />\n </ArkDatePicker.Trigger>\n </ArkDatePicker.Control>\n <Show when={portalMount()}>\n {(mount) => (\n <Portal mount={mount()}>\n <ArkDatePicker.Positioner class=\"dds-date-picker-positioner\">\n <ArkDatePicker.Content\n ref={(node) => {\n const restoreTrigger = (event: KeyboardEvent) => {\n if (event.key !== \"Escape\") return;\n if (focusFrame !== undefined)\n cancelAnimationFrame(focusFrame);\n focusFrame = requestAnimationFrame(() => {\n focusFrame = requestAnimationFrame(() => {\n if (!props.disabled && !props.readOnly)\n trigger?.focus({ preventScroll: true });\n });\n });\n };\n node.addEventListener(\"keydown\", restoreTrigger, true);\n onCleanup(() =>\n node.removeEventListener(\"keydown\", restoreTrigger, true),\n );\n }}\n class=\"dds-date-picker-content\"\n aria-label={`${props.label} 날짜 선택`}\n >\n <CalendarView\n timeZone={props.timeZone}\n min={props.min}\n max={props.max}\n locale={locale()}\n messages={props.messages}\n disabled={props.disabled}\n readOnly={props.readOnly}\n showToday={props.showToday}\n showClear={props.clearable}\n onClear={() => {\n setDraft(\"\");\n commit(\"\");\n }}\n />\n </ArkDatePicker.Content>\n </ArkDatePicker.Positioner>\n </Portal>\n )}\n </Show>\n </ArkDatePicker.Root>\n <Show when={error()}>\n <span id={`${id}-error`} class=\"dds-field__error\" role=\"alert\">\n {error()}\n </span>\n </Show>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type ComponentProps } from "solid-js";
|
|
2
|
+
import { Menu as ArkMenu } from "@ark-ui/solid/menu";
|
|
3
|
+
export interface DropdownMenuProps extends Omit<ComponentProps<typeof ArkMenu.Root>, "onOpenChange" | "onSelect"> {
|
|
4
|
+
onOpenChange?: (open: boolean) => void;
|
|
5
|
+
onSelect?: (value: string) => void;
|
|
6
|
+
dir?: "ltr" | "rtl";
|
|
7
|
+
}
|
|
8
|
+
export interface DropdownMenuContentProps extends ComponentProps<typeof ArkMenu.Content> {
|
|
9
|
+
portal?: boolean;
|
|
10
|
+
portalMount?: HTMLElement;
|
|
11
|
+
}
|
|
12
|
+
declare function Root(props: DropdownMenuProps): import("solid-js").JSX.Element;
|
|
13
|
+
declare function Content(props: DropdownMenuContentProps): import("solid-js").JSX.Element;
|
|
14
|
+
export declare const DropdownMenu: {
|
|
15
|
+
Root: typeof Root;
|
|
16
|
+
Trigger: (props: ArkMenu.TriggerProps) => import("solid-js").JSX.Element;
|
|
17
|
+
Content: typeof Content;
|
|
18
|
+
Item: (props: ArkMenu.ItemProps) => import("solid-js").JSX.Element;
|
|
19
|
+
Group: (props: ArkMenu.ItemGroupProps) => import("solid-js").JSX.Element;
|
|
20
|
+
Label: (props: ArkMenu.ItemGroupLabelProps) => import("solid-js").JSX.Element;
|
|
21
|
+
Separator: (props: ArkMenu.SeparatorProps) => import("solid-js").JSX.Element;
|
|
22
|
+
CheckboxItem: (props: ArkMenu.CheckboxItemProps) => import("solid-js").JSX.Element;
|
|
23
|
+
RadioGroup: (props: ArkMenu.RadioItemGroupProps) => import("solid-js").JSX.Element;
|
|
24
|
+
RadioItem: (props: ArkMenu.RadioItemProps) => import("solid-js").JSX.Element;
|
|
25
|
+
ItemText: (props: ArkMenu.ItemTextProps) => import("solid-js").JSX.Element;
|
|
26
|
+
ItemIndicator: (props: ArkMenu.ItemIndicatorProps) => import("solid-js").JSX.Element;
|
|
27
|
+
Submenu: typeof Root;
|
|
28
|
+
SubmenuTrigger: (props: ArkMenu.TriggerItemProps) => import("solid-js").JSX.Element;
|
|
29
|
+
};
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=dropdown-menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../src/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,IAAI,IAAI,OAAO,EAIhB,MAAM,oBAAoB,CAAC;AAC5B,MAAM,WAAW,iBACf,SAAQ,IAAI,CACV,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,EACnC,cAAc,GAAG,UAAU,CAC5B;IACD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CACrB;AACD,MAAM,WAAW,wBACf,SAAQ,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,iBAAiB,kCAwCrC;AACD,iBAAS,OAAO,CAAC,KAAK,EAAE,wBAAwB,kCAuC/C;AACD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAexB,CAAC"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { Show as e, createContext as t, createEffect as n, createSignal as r, onCleanup as i, onMount as a, splitProps as o, useContext as s } from "solid-js";
|
|
2
|
+
import { Portal as c, createComponent as l, mergeProps as u } from "solid-js/web";
|
|
3
|
+
import { Menu as d, useMenu as f, useMenuContext as p } from "@ark-ui/solid/menu";
|
|
4
|
+
//#region src/dropdown-menu.tsx
|
|
5
|
+
var m = t();
|
|
6
|
+
function h(e) {
|
|
7
|
+
let t = s(m), [n, r] = o(e, [
|
|
8
|
+
"onOpenChange",
|
|
9
|
+
"onSelect",
|
|
10
|
+
"positioning",
|
|
11
|
+
"children",
|
|
12
|
+
"lazyMount",
|
|
13
|
+
"unmountOnExit"
|
|
14
|
+
]), c = f(() => ({
|
|
15
|
+
...r,
|
|
16
|
+
positioning: {
|
|
17
|
+
strategy: "fixed",
|
|
18
|
+
...n.positioning
|
|
19
|
+
},
|
|
20
|
+
onOpenChange: (e) => n.onOpenChange?.(e.open),
|
|
21
|
+
onSelect: (e) => n.onSelect?.(e.value)
|
|
22
|
+
})), p = !0;
|
|
23
|
+
return i(() => {
|
|
24
|
+
p = !1;
|
|
25
|
+
}), a(() => queueMicrotask(() => {
|
|
26
|
+
!p || !t || (t.api().setChild(c.service), c.api().setParent(t.service));
|
|
27
|
+
})), l(m.Provider, {
|
|
28
|
+
value: c,
|
|
29
|
+
get children() {
|
|
30
|
+
return l(d.RootProvider, u(e, {
|
|
31
|
+
value: c,
|
|
32
|
+
get lazyMount() {
|
|
33
|
+
return n.lazyMount ?? !1;
|
|
34
|
+
},
|
|
35
|
+
get unmountOnExit() {
|
|
36
|
+
return n.unmountOnExit ?? !1;
|
|
37
|
+
},
|
|
38
|
+
get children() {
|
|
39
|
+
return n.children;
|
|
40
|
+
}
|
|
41
|
+
}));
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
function g(t) {
|
|
46
|
+
let [i, a] = o(t, [
|
|
47
|
+
"portal",
|
|
48
|
+
"portalMount",
|
|
49
|
+
"class",
|
|
50
|
+
"children"
|
|
51
|
+
]), s = p(), [f, m] = r();
|
|
52
|
+
n(() => {
|
|
53
|
+
if (typeof document > "u") return;
|
|
54
|
+
let e = s().getTriggerProps().id, t = e ? document.getElementById(e) : null;
|
|
55
|
+
m(i.portalMount ?? t?.closest("[role=\"dialog\"], [role=\"alertdialog\"]") ?? document.body);
|
|
56
|
+
});
|
|
57
|
+
let h = l(d.Positioner, {
|
|
58
|
+
class: "dds-menu-positioner",
|
|
59
|
+
get children() {
|
|
60
|
+
return l(d.Content, u(a, {
|
|
61
|
+
get class() {
|
|
62
|
+
return ["dds-menu", i.class].filter(Boolean).join(" ");
|
|
63
|
+
},
|
|
64
|
+
get children() {
|
|
65
|
+
return i.children;
|
|
66
|
+
}
|
|
67
|
+
}));
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
return i.portal === !1 ? h : l(e, {
|
|
71
|
+
get when() {
|
|
72
|
+
return f();
|
|
73
|
+
},
|
|
74
|
+
children: (e) => l(c, {
|
|
75
|
+
get mount() {
|
|
76
|
+
return e();
|
|
77
|
+
},
|
|
78
|
+
children: h
|
|
79
|
+
})
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
var _ = {
|
|
83
|
+
Root: h,
|
|
84
|
+
Trigger: d.Trigger,
|
|
85
|
+
Content: g,
|
|
86
|
+
Item: d.Item,
|
|
87
|
+
Group: d.ItemGroup,
|
|
88
|
+
Label: d.ItemGroupLabel,
|
|
89
|
+
Separator: d.Separator,
|
|
90
|
+
CheckboxItem: d.CheckboxItem,
|
|
91
|
+
RadioGroup: d.RadioItemGroup,
|
|
92
|
+
RadioItem: d.RadioItem,
|
|
93
|
+
ItemText: d.ItemText,
|
|
94
|
+
ItemIndicator: d.ItemIndicator,
|
|
95
|
+
Submenu: h,
|
|
96
|
+
SubmenuTrigger: d.TriggerItem
|
|
97
|
+
};
|
|
98
|
+
//#endregion
|
|
99
|
+
export { _ as DropdownMenu };
|
|
100
|
+
|
|
101
|
+
//# sourceMappingURL=dropdown-menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-menu.js","names":["createContext","useContext","onMount","onCleanup","splitProps","createEffect","createSignal","Show","ComponentProps","Portal","Menu","ArkMenu","useMenu","useMenuContext","UseMenuReturn","DropdownMenuProps","Omit","Root","onOpenChange","open","onSelect","value","dir","DropdownMenuContentProps","Content","portal","portalMount","HTMLElement","MenuTree","props","parent","local","rest","menu","positioning","strategy","const","event","active","queueMicrotask","api","setChild","service","setParent","_$createComponent","Provider","children","RootProvider","_$mergeProps","lazyMount","unmountOnExit","mount","setMount","document","triggerId","getTriggerProps","id","trigger","getElementById","closest","body","content","Positioner","class","filter","Boolean","join","when","target","DropdownMenu","Trigger","Item","Group","ItemGroup","Label","ItemGroupLabel","Separator","CheckboxItem","RadioGroup","RadioItemGroup","RadioItem","ItemText","ItemIndicator","Submenu","SubmenuTrigger","TriggerItem"],"sources":["../src/dropdown-menu.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n onMount,\n onCleanup,\n splitProps,\n createEffect,\n createSignal,\n Show,\n type ComponentProps,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport {\n Menu as ArkMenu,\n useMenu,\n useMenuContext,\n type UseMenuReturn,\n} from \"@ark-ui/solid/menu\";\nexport interface DropdownMenuProps\n extends Omit<\n ComponentProps<typeof ArkMenu.Root>,\n \"onOpenChange\" | \"onSelect\"\n > {\n onOpenChange?: (open: boolean) => void;\n onSelect?: (value: string) => void;\n dir?: \"ltr\" | \"rtl\";\n}\nexport interface DropdownMenuContentProps\n extends ComponentProps<typeof ArkMenu.Content> {\n portal?: boolean;\n portalMount?: HTMLElement;\n}\nconst MenuTree = createContext<UseMenuReturn>();\nfunction Root(props: DropdownMenuProps) {\n const parent = useContext(MenuTree);\n const [local, rest] = splitProps(props, [\n \"onOpenChange\",\n \"onSelect\",\n \"positioning\",\n \"children\",\n \"lazyMount\",\n \"unmountOnExit\",\n ]);\n const menu = useMenu(() => ({\n ...rest,\n positioning: { strategy: \"fixed\" as const, ...local.positioning },\n onOpenChange: (event: { open: boolean }) =>\n local.onOpenChange?.(event.open),\n onSelect: (event: { value: string }) => local.onSelect?.(event.value),\n }));\n let active = true;\n onCleanup(() => {\n active = false;\n });\n onMount(() =>\n queueMicrotask(() => {\n if (!active || !parent) return;\n parent.api().setChild(menu.service);\n menu.api().setParent(parent.service);\n }),\n );\n return (\n <MenuTree.Provider value={menu}>\n <ArkMenu.RootProvider\n {...props}\n value={menu}\n lazyMount={local.lazyMount ?? false}\n unmountOnExit={local.unmountOnExit ?? false}\n >\n {local.children}\n </ArkMenu.RootProvider>\n </MenuTree.Provider>\n );\n}\nfunction Content(props: DropdownMenuContentProps) {\n const [local, rest] = splitProps(props, [\n \"portal\",\n \"portalMount\",\n \"class\",\n \"children\",\n ]);\n const api = useMenuContext();\n const [mount, setMount] = createSignal<HTMLElement>();\n createEffect(() => {\n if (typeof document === \"undefined\") return;\n const triggerId = api().getTriggerProps().id;\n const trigger = triggerId ? document.getElementById(triggerId) : null;\n // Keep nested overlays inside the modal isolation subtree.\n setMount(\n local.portalMount ??\n trigger?.closest<HTMLElement>(\n '[role=\"dialog\"], [role=\"alertdialog\"]',\n ) ??\n document.body,\n );\n });\n const content = (\n <ArkMenu.Positioner class=\"dds-menu-positioner\">\n <ArkMenu.Content\n {...rest}\n class={[\"dds-menu\", local.class].filter(Boolean).join(\" \")}\n >\n {local.children}\n </ArkMenu.Content>\n </ArkMenu.Positioner>\n );\n return local.portal === false ? (\n content\n ) : (\n <Show when={mount()}>\n {(target) => <Portal mount={target()}>{content}</Portal>}\n </Show>\n );\n}\nexport const DropdownMenu = {\n Root,\n Trigger: ArkMenu.Trigger,\n Content,\n Item: ArkMenu.Item,\n Group: ArkMenu.ItemGroup,\n Label: ArkMenu.ItemGroupLabel,\n Separator: ArkMenu.Separator,\n CheckboxItem: ArkMenu.CheckboxItem,\n RadioGroup: ArkMenu.RadioItemGroup,\n RadioItem: ArkMenu.RadioItem,\n ItemText: ArkMenu.ItemText,\n ItemIndicator: ArkMenu.ItemIndicator,\n Submenu: Root,\n SubmenuTrigger: ArkMenu.TriggerItem,\n};\n"],"mappings":";;;;AAgCA,IAAM4B,IAAW5B,EAA6B;AAC9C,SAASiB,EAAKY,GAA0B;CACtC,IAAMC,IAAS7B,EAAW2B,CAAQ,GAC5B,CAACG,GAAOC,KAAQ5B,EAAWyB,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;CAAe,CAChB,GACKI,IAAOrB,SAAe;EAC1B,GAAGoB;EACHE,aAAa;GAAEC,UAAU;GAAkB,GAAGJ,EAAMG;EAAY;EAChEhB,eAAemB,MACbN,EAAMb,eAAemB,EAAMlB,IAAI;EACjCC,WAAWiB,MAA6BN,EAAMX,WAAWiB,EAAMhB,KAAK;CACtE,EAAE,GACEiB,IAAS;CAWb,OAVAnC,QAAgB;EACdmC,IAAS;CACX,CAAC,GACDpC,QACEqC,qBAAqB;EACf,CAACD,KAAU,CAACR,MAChBA,EAAOU,IAAI,CAAC,CAACC,SAASR,EAAKS,OAAO,GAClCT,EAAKO,IAAI,CAAC,CAACG,UAAUb,EAAOY,OAAO;CACrC,CAAC,CACH,GACAE,EACGhB,EAASiB,UAAQ;EAACxB,OAAOY;EAAI,IAAAa,WAAA;GAAA,OAAAF,EAC3BjC,EAAQoC,cAAYC,EACfnB,GAAK;IACTR,OAAOY;IAAI,IACXgB,YAAS;KAAA,OAAElB,EAAMkB,aAAa;IAAK;IAAA,IACnCC,gBAAa;KAAA,OAAEnB,EAAMmB,iBAAiB;IAAK;IAAA,IAAAJ,WAAA;KAAA,OAE1Cf,EAAMe;IAAQ;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIvB;AACA,SAAStB,EAAQK,GAAiC;CAChD,IAAM,CAACE,GAAOC,KAAQ5B,EAAWyB,GAAO;EACtC;EACA;EACA;EACA;CAAU,CACX,GACKW,IAAM3B,EAAe,GACrB,CAACsC,GAAOC,KAAY9C,EAA0B;CACpDD,QAAmB;EACjB,IAAI,OAAOgD,WAAa,KAAa;EACrC,IAAMC,IAAYd,EAAI,CAAC,CAACe,gBAAgB,CAAC,CAACC,IACpCC,IAAUH,IAAYD,SAASK,eAAeJ,CAAS,IAAI;EAEjEF,EACErB,EAAML,eACJ+B,GAASE,QACP,2CACF,KACAN,SAASO,IACb;CACF,CAAC;CACD,IAAMC,IAAOjB,EACVjC,EAAQmD,YAAU;EAAA,OAAA;EAAA,IAAAhB,WAAA;GAAA,OAAAF,EAChBjC,EAAQa,SAAOwB,EACVhB,GAAI;IAAA,IAAA,QAAA;KAAA,OACD,CAAC,YAAYD,EAAMgC,KAAK,CAAC,CAACC,OAAOC,OAAO,CAAC,CAACC,KAAK,GAAG;IAAC;IAAA,IAAApB,WAAA;KAAA,OAEzDf,EAAMe;IAAQ;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;CAIrB,OAAOf,EAAMN,WAAW,KACtBoC,IAAOjB,EAENrC,GAAI;EAAA,IAAC4D,OAAI;GAAA,OAAEhB,EAAM;EAAC;EAAAL,WACfsB,MAAMxB,EAAMnC,GAAM;GAAA,IAAC0C,QAAK;IAAA,OAAEiB,EAAO;GAAC;GAAAtB,UAAGe;EAAO,CAAA;CAAU,CAAA;AAG9D;AACA,IAAaQ,IAAe;CAC1BpD;CACAqD,SAAS3D,EAAQ2D;CACjB9C;CACA+C,MAAM5D,EAAQ4D;CACdC,OAAO7D,EAAQ8D;CACfC,OAAO/D,EAAQgE;CACfC,WAAWjE,EAAQiE;CACnBC,cAAclE,EAAQkE;CACtBC,YAAYnE,EAAQoE;CACpBC,WAAWrE,EAAQqE;CACnBC,UAAUtE,EAAQsE;CAClBC,eAAevE,EAAQuE;CACvBC,SAASlE;CACTmE,gBAAgBzE,EAAQ0E;AAC1B"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { Show, createContext, createEffect, createSignal, onCleanup, onMount, splitProps, useContext } from "solid-js";
|
|
2
|
+
import { Portal, createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
|
|
3
|
+
import { Menu, useMenu, useMenuContext } from "@ark-ui/solid/menu";
|
|
4
|
+
//#region src/dropdown-menu.tsx
|
|
5
|
+
var MenuTree = createContext();
|
|
6
|
+
function Root(props) {
|
|
7
|
+
const parent = useContext(MenuTree);
|
|
8
|
+
const [local, rest] = splitProps(props, [
|
|
9
|
+
"onOpenChange",
|
|
10
|
+
"onSelect",
|
|
11
|
+
"positioning",
|
|
12
|
+
"children",
|
|
13
|
+
"lazyMount",
|
|
14
|
+
"unmountOnExit"
|
|
15
|
+
]);
|
|
16
|
+
const menu = useMenu(() => ({
|
|
17
|
+
...rest,
|
|
18
|
+
positioning: {
|
|
19
|
+
strategy: "fixed",
|
|
20
|
+
...local.positioning
|
|
21
|
+
},
|
|
22
|
+
onOpenChange: (event) => local.onOpenChange?.(event.open),
|
|
23
|
+
onSelect: (event) => local.onSelect?.(event.value)
|
|
24
|
+
}));
|
|
25
|
+
let active = true;
|
|
26
|
+
onCleanup(() => {
|
|
27
|
+
active = false;
|
|
28
|
+
});
|
|
29
|
+
onMount(() => queueMicrotask(() => {
|
|
30
|
+
if (!active || !parent) return;
|
|
31
|
+
parent.api().setChild(menu.service);
|
|
32
|
+
menu.api().setParent(parent.service);
|
|
33
|
+
}));
|
|
34
|
+
return createComponent(MenuTree.Provider, {
|
|
35
|
+
value: menu,
|
|
36
|
+
get children() {
|
|
37
|
+
return createComponent(Menu.RootProvider, mergeProps$1(props, {
|
|
38
|
+
value: menu,
|
|
39
|
+
get lazyMount() {
|
|
40
|
+
return local.lazyMount ?? false;
|
|
41
|
+
},
|
|
42
|
+
get unmountOnExit() {
|
|
43
|
+
return local.unmountOnExit ?? false;
|
|
44
|
+
},
|
|
45
|
+
get children() {
|
|
46
|
+
return local.children;
|
|
47
|
+
}
|
|
48
|
+
}));
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function Content(props) {
|
|
53
|
+
const [local, rest] = splitProps(props, [
|
|
54
|
+
"portal",
|
|
55
|
+
"portalMount",
|
|
56
|
+
"class",
|
|
57
|
+
"children"
|
|
58
|
+
]);
|
|
59
|
+
const api = useMenuContext();
|
|
60
|
+
const [mount, setMount] = createSignal();
|
|
61
|
+
createEffect(() => {
|
|
62
|
+
if (typeof document === "undefined") return;
|
|
63
|
+
const triggerId = api().getTriggerProps().id;
|
|
64
|
+
const trigger = triggerId ? document.getElementById(triggerId) : null;
|
|
65
|
+
setMount(local.portalMount ?? trigger?.closest("[role=\"dialog\"], [role=\"alertdialog\"]") ?? document.body);
|
|
66
|
+
});
|
|
67
|
+
const content = createComponent(Menu.Positioner, {
|
|
68
|
+
"class": "dds-menu-positioner",
|
|
69
|
+
get children() {
|
|
70
|
+
return createComponent(Menu.Content, mergeProps$1(rest, {
|
|
71
|
+
get ["class"]() {
|
|
72
|
+
return ["dds-menu", local.class].filter(Boolean).join(" ");
|
|
73
|
+
},
|
|
74
|
+
get children() {
|
|
75
|
+
return local.children;
|
|
76
|
+
}
|
|
77
|
+
}));
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
return local.portal === false ? content : createComponent(Show, {
|
|
81
|
+
get when() {
|
|
82
|
+
return mount();
|
|
83
|
+
},
|
|
84
|
+
children: (target) => createComponent(Portal, {
|
|
85
|
+
get mount() {
|
|
86
|
+
return target();
|
|
87
|
+
},
|
|
88
|
+
children: content
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
var DropdownMenu = {
|
|
93
|
+
Root,
|
|
94
|
+
Trigger: Menu.Trigger,
|
|
95
|
+
Content,
|
|
96
|
+
Item: Menu.Item,
|
|
97
|
+
Group: Menu.ItemGroup,
|
|
98
|
+
Label: Menu.ItemGroupLabel,
|
|
99
|
+
Separator: Menu.Separator,
|
|
100
|
+
CheckboxItem: Menu.CheckboxItem,
|
|
101
|
+
RadioGroup: Menu.RadioItemGroup,
|
|
102
|
+
RadioItem: Menu.RadioItem,
|
|
103
|
+
ItemText: Menu.ItemText,
|
|
104
|
+
ItemIndicator: Menu.ItemIndicator,
|
|
105
|
+
Submenu: Root,
|
|
106
|
+
SubmenuTrigger: Menu.TriggerItem
|
|
107
|
+
};
|
|
108
|
+
//#endregion
|
|
109
|
+
export { DropdownMenu };
|
|
110
|
+
|
|
111
|
+
//# sourceMappingURL=dropdown-menu.server.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-menu.server.js","names":["createContext","useContext","onMount","onCleanup","splitProps","createEffect","createSignal","Show","ComponentProps","Portal","Menu","ArkMenu","useMenu","useMenuContext","UseMenuReturn","DropdownMenuProps","Omit","Root","onOpenChange","open","onSelect","value","dir","DropdownMenuContentProps","Content","portal","portalMount","HTMLElement","MenuTree","props","parent","local","rest","menu","positioning","strategy","const","event","active","queueMicrotask","api","setChild","service","setParent","_$createComponent","Provider","children","RootProvider","_$mergeProps","lazyMount","unmountOnExit","mount","setMount","document","triggerId","getTriggerProps","id","trigger","getElementById","closest","body","content","Positioner","class","filter","Boolean","join","when","target","DropdownMenu","Trigger","Item","Group","ItemGroup","Label","ItemGroupLabel","Separator","CheckboxItem","RadioGroup","RadioItemGroup","RadioItem","ItemText","ItemIndicator","Submenu","SubmenuTrigger","TriggerItem"],"sources":["../src/dropdown-menu.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n onMount,\n onCleanup,\n splitProps,\n createEffect,\n createSignal,\n Show,\n type ComponentProps,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport {\n Menu as ArkMenu,\n useMenu,\n useMenuContext,\n type UseMenuReturn,\n} from \"@ark-ui/solid/menu\";\nexport interface DropdownMenuProps\n extends Omit<\n ComponentProps<typeof ArkMenu.Root>,\n \"onOpenChange\" | \"onSelect\"\n > {\n onOpenChange?: (open: boolean) => void;\n onSelect?: (value: string) => void;\n dir?: \"ltr\" | \"rtl\";\n}\nexport interface DropdownMenuContentProps\n extends ComponentProps<typeof ArkMenu.Content> {\n portal?: boolean;\n portalMount?: HTMLElement;\n}\nconst MenuTree = createContext<UseMenuReturn>();\nfunction Root(props: DropdownMenuProps) {\n const parent = useContext(MenuTree);\n const [local, rest] = splitProps(props, [\n \"onOpenChange\",\n \"onSelect\",\n \"positioning\",\n \"children\",\n \"lazyMount\",\n \"unmountOnExit\",\n ]);\n const menu = useMenu(() => ({\n ...rest,\n positioning: { strategy: \"fixed\" as const, ...local.positioning },\n onOpenChange: (event: { open: boolean }) =>\n local.onOpenChange?.(event.open),\n onSelect: (event: { value: string }) => local.onSelect?.(event.value),\n }));\n let active = true;\n onCleanup(() => {\n active = false;\n });\n onMount(() =>\n queueMicrotask(() => {\n if (!active || !parent) return;\n parent.api().setChild(menu.service);\n menu.api().setParent(parent.service);\n }),\n );\n return (\n <MenuTree.Provider value={menu}>\n <ArkMenu.RootProvider\n {...props}\n value={menu}\n lazyMount={local.lazyMount ?? false}\n unmountOnExit={local.unmountOnExit ?? false}\n >\n {local.children}\n </ArkMenu.RootProvider>\n </MenuTree.Provider>\n );\n}\nfunction Content(props: DropdownMenuContentProps) {\n const [local, rest] = splitProps(props, [\n \"portal\",\n \"portalMount\",\n \"class\",\n \"children\",\n ]);\n const api = useMenuContext();\n const [mount, setMount] = createSignal<HTMLElement>();\n createEffect(() => {\n if (typeof document === \"undefined\") return;\n const triggerId = api().getTriggerProps().id;\n const trigger = triggerId ? document.getElementById(triggerId) : null;\n // Keep nested overlays inside the modal isolation subtree.\n setMount(\n local.portalMount ??\n trigger?.closest<HTMLElement>(\n '[role=\"dialog\"], [role=\"alertdialog\"]',\n ) ??\n document.body,\n );\n });\n const content = (\n <ArkMenu.Positioner class=\"dds-menu-positioner\">\n <ArkMenu.Content\n {...rest}\n class={[\"dds-menu\", local.class].filter(Boolean).join(\" \")}\n >\n {local.children}\n </ArkMenu.Content>\n </ArkMenu.Positioner>\n );\n return local.portal === false ? (\n content\n ) : (\n <Show when={mount()}>\n {(target) => <Portal mount={target()}>{content}</Portal>}\n </Show>\n );\n}\nexport const DropdownMenu = {\n Root,\n Trigger: ArkMenu.Trigger,\n Content,\n Item: ArkMenu.Item,\n Group: ArkMenu.ItemGroup,\n Label: ArkMenu.ItemGroupLabel,\n Separator: ArkMenu.Separator,\n CheckboxItem: ArkMenu.CheckboxItem,\n RadioGroup: ArkMenu.RadioItemGroup,\n RadioItem: ArkMenu.RadioItem,\n ItemText: ArkMenu.ItemText,\n ItemIndicator: ArkMenu.ItemIndicator,\n Submenu: Root,\n SubmenuTrigger: ArkMenu.TriggerItem,\n};\n"],"mappings":";;;;AAgCA,IAAM4B,WAAW5B,cAA6B;AAC9C,SAASiB,KAAKY,OAA0B;CACtC,MAAMC,SAAS7B,WAAW2B,QAAQ;CAClC,MAAM,CAACG,OAAOC,QAAQ5B,WAAWyB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;CAAe,CAChB;CACD,MAAMI,OAAOrB,eAAe;EAC1B,GAAGoB;EACHE,aAAa;GAAEC,UAAU;GAAkB,GAAGJ,MAAMG;EAAY;EAChEhB,eAAemB,UACbN,MAAMb,eAAemB,MAAMlB,IAAI;EACjCC,WAAWiB,UAA6BN,MAAMX,WAAWiB,MAAMhB,KAAK;CACtE,EAAE;CACF,IAAIiB,SAAS;CACbnC,gBAAgB;EACdmC,SAAS;CACX,CAAC;CACDpC,cACEqC,qBAAqB;EACnB,IAAI,CAACD,UAAU,CAACR,QAAQ;EACxBA,OAAOU,IAAI,CAAC,CAACC,SAASR,KAAKS,OAAO;EAClCT,KAAKO,IAAI,CAAC,CAACG,UAAUb,OAAOY,OAAO;CACrC,CAAC,CACH;CACA,OAAAE,gBACGhB,SAASiB,UAAQ;EAACxB,OAAOY;EAAI,IAAAa,WAAA;GAAA,OAAAF,gBAC3BjC,KAAQoC,cAAYC,aACfnB,OAAK;IACTR,OAAOY;IAAI,IACXgB,YAAS;KAAA,OAAElB,MAAMkB,aAAa;IAAK;IAAA,IACnCC,gBAAa;KAAA,OAAEnB,MAAMmB,iBAAiB;IAAK;IAAA,IAAAJ,WAAA;KAAA,OAE1Cf,MAAMe;IAAQ;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIvB;AACA,SAAStB,QAAQK,OAAiC;CAChD,MAAM,CAACE,OAAOC,QAAQ5B,WAAWyB,OAAO;EACtC;EACA;EACA;EACA;CAAU,CACX;CACD,MAAMW,MAAM3B,eAAe;CAC3B,MAAM,CAACsC,OAAOC,YAAY9C,aAA0B;CACpDD,mBAAmB;EACjB,IAAI,OAAOgD,aAAa,aAAa;EACrC,MAAMC,YAAYd,IAAI,CAAC,CAACe,gBAAgB,CAAC,CAACC;EAC1C,MAAMC,UAAUH,YAAYD,SAASK,eAAeJ,SAAS,IAAI;EAEjEF,SACErB,MAAML,eACJ+B,SAASE,QACP,2CACF,KACAN,SAASO,IACb;CACF,CAAC;CACD,MAAMC,UAAOjB,gBACVjC,KAAQmD,YAAU;EAAA,SAAA;EAAA,IAAAhB,WAAA;GAAA,OAAAF,gBAChBjC,KAAQa,SAAOwB,aACVhB,MAAI;IAAA,KAAA,WAAA;KAAA,OACD,CAAC,YAAYD,MAAMgC,KAAK,CAAC,CAACC,OAAOC,OAAO,CAAC,CAACC,KAAK,GAAG;IAAC;IAAA,IAAApB,WAAA;KAAA,OAEzDf,MAAMe;IAAQ;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;CAIrB,OAAOf,MAAMN,WAAW,QACtBoC,UAAOjB,gBAENrC,MAAI;EAAA,IAAC4D,OAAI;GAAA,OAAEhB,MAAM;EAAC;EAAAL,WACfsB,WAAMxB,gBAAMnC,QAAM;GAAA,IAAC0C,QAAK;IAAA,OAAEiB,OAAO;GAAC;GAAAtB,UAAGe;EAAO,CAAA;CAAU,CAAA;AAG9D;AACA,IAAaQ,eAAe;CAC1BpD;CACAqD,SAAS3D,KAAQ2D;CACjB9C;CACA+C,MAAM5D,KAAQ4D;CACdC,OAAO7D,KAAQ8D;CACfC,OAAO/D,KAAQgE;CACfC,WAAWjE,KAAQiE;CACnBC,cAAclE,KAAQkE;CACtBC,YAAYnE,KAAQoE;CACpBC,WAAWrE,KAAQqE;CACnBC,UAAUtE,KAAQsE;CAClBC,eAAevE,KAAQuE;CACvBC,SAASlE;CACTmE,gBAAgBzE,KAAQ0E;AAC1B"}
|
package/dist/index.d.ts
CHANGED
|
@@ -10,4 +10,10 @@ export { Tab, TabList, TabPanel, Tabs, type TabPanelProps, type TabProps, type T
|
|
|
10
10
|
export { ToastProvider, useToast, type ToastApi, type ToastInput, type ToastProviderProps, type ToastTone } from "./toast";
|
|
11
11
|
export { Tooltip, type TooltipProps, type TooltipTriggerProps } from "./tooltip";
|
|
12
12
|
export { DatePicker, type DatePickerProps } from "./date-picker";
|
|
13
|
+
export * from "./input";
|
|
14
|
+
export * from "./combobox";
|
|
15
|
+
export * from "./select-picker";
|
|
16
|
+
export * from "./dropdown-menu";
|
|
17
|
+
export * from "./popover";
|
|
18
|
+
export * from "./calendar";
|
|
13
19
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/J,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3H,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEjF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/J,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3H,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEjF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAEjE,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}
|