@simplysm/solid 13.0.61 → 13.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/dist/components/data/crud-detail/CrudDetail.d.ts.map +1 -1
- package/dist/components/data/crud-detail/CrudDetail.js +62 -41
- package/dist/components/data/crud-detail/CrudDetail.js.map +2 -2
- package/dist/components/data/crud-sheet/CrudSheet.d.ts.map +1 -1
- package/dist/components/data/crud-sheet/CrudSheet.js +164 -19
- package/dist/components/data/crud-sheet/CrudSheet.js.map +2 -2
- package/dist/components/data/crud-sheet/types.d.ts +9 -3
- package/dist/components/data/crud-sheet/types.d.ts.map +1 -1
- package/dist/components/data/sheet/DataSheet.d.ts.map +1 -1
- package/dist/components/data/sheet/DataSheet.js +3 -2
- package/dist/components/data/sheet/DataSheet.js.map +2 -2
- package/dist/components/form-control/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/form-control/checkbox/Checkbox.js +10 -10
- package/dist/components/form-control/checkbox/Checkbox.js.map +2 -2
- package/dist/components/form-control/checkbox/Checkbox.styles.d.ts.map +1 -1
- package/dist/components/form-control/checkbox/Checkbox.styles.js +2 -2
- package/dist/components/form-control/checkbox/Checkbox.styles.js.map +1 -1
- package/dist/components/form-control/checkbox/Radio.d.ts.map +1 -1
- package/dist/components/form-control/checkbox/Radio.js +13 -13
- package/dist/components/form-control/checkbox/Radio.js.map +2 -2
- package/dist/components/form-control/data-select-button/DataSelectButton.d.ts +38 -0
- package/dist/components/form-control/data-select-button/DataSelectButton.d.ts.map +1 -0
- package/dist/components/form-control/data-select-button/DataSelectButton.js +184 -0
- package/dist/components/form-control/data-select-button/DataSelectButton.js.map +6 -0
- package/dist/components/form-control/select/Select.d.ts +7 -3
- package/dist/components/form-control/select/Select.d.ts.map +1 -1
- package/dist/components/form-control/select/Select.js +146 -45
- package/dist/components/form-control/select/Select.js.map +2 -2
- package/dist/components/form-control/select-list/SelectList.d.ts +54 -0
- package/dist/components/form-control/select-list/SelectList.d.ts.map +1 -0
- package/dist/components/form-control/select-list/SelectList.js +280 -0
- package/dist/components/form-control/select-list/SelectList.js.map +6 -0
- package/dist/components/form-control/select-list/SelectListContext.d.ts +13 -0
- package/dist/components/form-control/select-list/SelectListContext.d.ts.map +1 -0
- package/dist/components/form-control/select-list/SelectListContext.js +14 -0
- package/dist/components/form-control/select-list/SelectListContext.js.map +6 -0
- package/dist/components/form-control/shared-data/SharedDataSelect.d.ts +32 -0
- package/dist/components/form-control/shared-data/SharedDataSelect.d.ts.map +1 -0
- package/dist/components/form-control/shared-data/SharedDataSelect.js +74 -0
- package/dist/components/form-control/shared-data/SharedDataSelect.js.map +6 -0
- package/dist/components/form-control/shared-data/SharedDataSelectButton.d.ts +29 -0
- package/dist/components/form-control/shared-data/SharedDataSelectButton.d.ts.map +1 -0
- package/dist/components/form-control/shared-data/SharedDataSelectButton.js +17 -0
- package/dist/components/form-control/shared-data/SharedDataSelectButton.js.map +6 -0
- package/dist/components/form-control/shared-data/SharedDataSelectList.d.ts +29 -0
- package/dist/components/form-control/shared-data/SharedDataSelectList.d.ts.map +1 -0
- package/dist/components/form-control/shared-data/SharedDataSelectList.js +80 -0
- package/dist/components/form-control/shared-data/SharedDataSelectList.js.map +6 -0
- package/dist/features/address/AddressSearch.d.ts +8 -0
- package/dist/features/address/AddressSearch.d.ts.map +1 -0
- package/dist/features/address/AddressSearch.js +72 -0
- package/dist/features/address/AddressSearch.js.map +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/providers/shared-data/SharedDataContext.d.ts +14 -0
- package/dist/providers/shared-data/SharedDataContext.d.ts.map +1 -1
- package/dist/providers/shared-data/SharedDataContext.js.map +1 -1
- package/dist/providers/shared-data/SharedDataProvider.d.ts.map +1 -1
- package/dist/providers/shared-data/SharedDataProvider.js +5 -1
- package/dist/providers/shared-data/SharedDataProvider.js.map +2 -2
- package/docs/data-components.md +15 -4
- package/docs/form-controls.md +257 -0
- package/docs/hooks.md +30 -0
- package/docs/providers.md +7 -0
- package/package.json +3 -3
- package/src/components/data/crud-detail/CrudDetail.tsx +51 -26
- package/src/components/data/crud-sheet/CrudSheet.tsx +157 -20
- package/src/components/data/crud-sheet/types.ts +13 -3
- package/src/components/data/sheet/DataSheet.tsx +6 -7
- package/src/components/form-control/checkbox/Checkbox.styles.ts +2 -2
- package/src/components/form-control/checkbox/Checkbox.tsx +18 -20
- package/src/components/form-control/checkbox/Radio.tsx +18 -20
- package/src/components/form-control/data-select-button/DataSelectButton.tsx +279 -0
- package/src/components/form-control/select/Select.tsx +192 -36
- package/src/components/form-control/select-list/SelectList.tsx +385 -0
- package/src/components/form-control/select-list/SelectListContext.ts +23 -0
- package/src/components/form-control/shared-data/SharedDataSelect.tsx +101 -0
- package/src/components/form-control/shared-data/SharedDataSelectButton.tsx +47 -0
- package/src/components/form-control/shared-data/SharedDataSelectList.tsx +85 -0
- package/src/features/address/AddressSearch.tsx +75 -0
- package/src/index.ts +18 -0
- package/src/providers/shared-data/SharedDataContext.ts +14 -0
- package/src/providers/shared-data/SharedDataProvider.tsx +4 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/form-control/checkbox/Radio.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;AAAA,SAAyCA,MAAMC,YAAYC,kBAAkB;AAC7E,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,cAAc;AACvB,OAAOC,UAAU;AACjB,SAEEC,mBACAC,oBACAC,cACAC,qBACAC,oBACAC,gCACAC,qBACAC,6BACK;AACP,SAASC,eAAe;AAExB,MAAMC,gBAAgBV,KAAK,UAAU,gBAAgB,YAAY;AAGjE,KAAKD;AAiBE,MAAMY,QAAsCC,WAAU;AAC3D,QAAM,CAACC,OAAOC,IAAI,IAAInB,WAAWiB,OAAO,CACtC,SACA,iBACA,YACA,QACA,SACA,UACA,YACA,YACA,aACA,SACA,SACA,UAAU,CACX;AAED,QAAM,CAACG,OAAOC,QAAQ,IAAIlB,yBAAyB;IACjDiB,OAAOA,MAAMF,MAAME,SAAS;IAC5BE,UAAUA,MAAMJ,MAAMK;EACxB,CAAC;AAED,QAAMC,cAAcA,MAAM;AACxB,QAAIN,MAAMO,SAAU;AACpBJ,aAAS,IAAI;EACf;AAEA,QAAMK,gBAAiBC,OAAqB;AAC1C,QAAIA,EAAEC,QAAQ,KAAK;AACjBD,QAAEE,eAAe;AACjBL,kBAAY;IACd;EACF;AAEA,QAAMM,kBAAkBA,MACtB5B,QACEI,mBACAY,MAAMa,QAAQtB,oBAAoBS,MAAMa,IAAI,GAC5Cb,MAAMc,SAAStB,oBACfQ,MAAMc,SAASd,MAAMa,QAAQpB,+BAA+BO,MAAMa,IAAI,GACtEb,MAAMe,UAAUrB,qBAChBM,MAAMO,YAAYZ,uBAClBK,MAAMgB,KACR;AAEF,QAAMC,oBAAoBA,MACxBjC,QAAQK,oBAAoB,gBAAgBa,MAAM,KAAKZ,YAAY;AAErE,QAAM4B,WAAWnC,WAAW,MAAM;;AAChC,UAAMoC,IAAInB,MAAME,SAAS;AACzB,QAAIF,MAAMoB,YAAY,CAACD,EAAG,QAAO;AACjC,YAAOnB,WAAMqB,aAANrB,+BAAiBmB;EAC1B,CAAC;AAED,SAAAG,kBACG1B,SAAO;IAAA,IAAC2B,UAAO;AAAA,aAAEL,SAAS;IAAC;IAAEM,SAAO;IAAA,IAAUC,YAAS;AAAA,aAAEzB,MAAMyB;IAAS;IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,QAAA,GAAAC,QAAAF,KAAAG
|
|
5
|
-
"names": ["Show", "splitProps", "createMemo", "twMerge", "createControllableSignal", "ripple", "clsx", "checkboxBaseClass", "indicatorBaseClass", "checkedClass", "checkboxSizeClasses", "checkboxInsetClass", "checkboxInsetSizeHeightClasses", "checkboxInlineClass", "checkboxDisabledClass", "Invalid", "radioDotClass", "Radio", "props", "local", "rest", "value", "setValue", "onChange", "onValueChange", "handleClick", "disabled", "handleKeyDown", "e", "key", "preventDefault", "getWrapperClass", "size", "inset", "inline", "class", "getIndicatorClass", "errorMsg", "v", "required", "validate", "_$createComponent", "message", "variant", "touchMode", "children", "_el$", "_tmpl$3", "_el$2", "firstChild", "
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["Show", "splitProps", "createMemo", "twMerge", "createControllableSignal", "ripple", "clsx", "checkboxBaseClass", "indicatorBaseClass", "checkedClass", "checkboxSizeClasses", "checkboxInsetClass", "checkboxInsetSizeHeightClasses", "checkboxInlineClass", "checkboxDisabledClass", "Invalid", "radioDotClass", "Radio", "props", "local", "rest", "value", "setValue", "onChange", "onValueChange", "handleClick", "disabled", "handleKeyDown", "e", "key", "preventDefault", "getWrapperClass", "size", "inset", "inline", "class", "getIndicatorClass", "errorMsg", "v", "required", "validate", "_$createComponent", "message", "variant", "touchMode", "children", "_el$", "_tmpl$3", "_el$2", "firstChild", "_$use", "_$spread", "_$mergeProps", "tabIndex", "style", "_$insert", "when", "_el$3", "_tmpl$", "_$className", "_el$4", "_tmpl$2", "_$effect"]
|
|
6
6
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { type JSX } from "solid-js";
|
|
2
|
+
import { type DialogShowOptions } from "../../disclosure/DialogContext";
|
|
3
|
+
import { type ComponentSize } from "../../../styles/tokens.styles";
|
|
4
|
+
/** 모달에서 반환하는 결과 인터페이스 */
|
|
5
|
+
export interface DataSelectModalResult<TKey> {
|
|
6
|
+
selectedKeys: TKey[];
|
|
7
|
+
}
|
|
8
|
+
/** DataSelectButton Props */
|
|
9
|
+
export interface DataSelectButtonProps<TItem, TKey = string | number> {
|
|
10
|
+
/** 현재 선택된 키 (단일 또는 다중) */
|
|
11
|
+
value?: TKey | TKey[];
|
|
12
|
+
/** 값 변경 콜백 */
|
|
13
|
+
onValueChange?: (value: TKey | TKey[] | undefined) => void;
|
|
14
|
+
/** 키로 아이템을 로드하는 함수 */
|
|
15
|
+
load: (keys: TKey[]) => TItem[] | Promise<TItem[]>;
|
|
16
|
+
/** 선택 모달 컴포넌트 팩토리 */
|
|
17
|
+
modal: () => JSX.Element;
|
|
18
|
+
/** 아이템 렌더링 함수 */
|
|
19
|
+
renderItem: (item: TItem) => JSX.Element;
|
|
20
|
+
/** 다중 선택 모드 */
|
|
21
|
+
multiple?: boolean;
|
|
22
|
+
/** 필수 입력 */
|
|
23
|
+
required?: boolean;
|
|
24
|
+
/** 비활성화 */
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
/** 트리거 크기 */
|
|
27
|
+
size?: ComponentSize;
|
|
28
|
+
/** 테두리 없는 스타일 */
|
|
29
|
+
inset?: boolean;
|
|
30
|
+
/** 커스텀 유효성 검사 함수 */
|
|
31
|
+
validate?: (value: unknown) => string | undefined;
|
|
32
|
+
/** touchMode: 포커스 해제 후에만 에러 표시 */
|
|
33
|
+
touchMode?: boolean;
|
|
34
|
+
/** 다이얼로그 옵션 */
|
|
35
|
+
dialogOptions?: DialogShowOptions;
|
|
36
|
+
}
|
|
37
|
+
export declare function DataSelectButton<TItem, TKey = string | number>(props: DataSelectButtonProps<TItem, TKey>): JSX.Element;
|
|
38
|
+
//# sourceMappingURL=DataSelectButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataSelectButton.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\data-select-button\\DataSelectButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,GAAG,EAIT,MAAM,UAAU,CAAC;AAMlB,OAAO,EAAa,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnF,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,+BAA+B,CAAC;AAQ9E,yBAAyB;AACzB,MAAM,WAAW,qBAAqB,CAAC,IAAI;IACzC,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,6BAA6B;AAC7B,MAAM,WAAW,qBAAqB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM;IAClE,0BAA0B;IAC1B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,CAAC;IACtB,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAE3D,sBAAsB;IACtB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,KAAK,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IACnD,qBAAqB;IACrB,KAAK,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACzB,iBAAiB;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,GAAG,CAAC,OAAO,CAAC;IAEzC,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,eAAe;IACf,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AA+BD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5D,KAAK,EAAE,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,GACxC,GAAG,CAAC,OAAO,CAsLb"}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
import { template as _$template } from "solid-js/web";
|
|
2
|
+
import { delegateEvents as _$delegateEvents } from "solid-js/web";
|
|
3
|
+
import { effect as _$effect } from "solid-js/web";
|
|
4
|
+
import { setAttribute as _$setAttribute } from "solid-js/web";
|
|
5
|
+
import { memo as _$memo } from "solid-js/web";
|
|
6
|
+
import { insert as _$insert } from "solid-js/web";
|
|
7
|
+
import { createComponent as _$createComponent } from "solid-js/web";
|
|
8
|
+
import { className as _$className } from "solid-js/web";
|
|
9
|
+
var _tmpl$ = /* @__PURE__ */ _$template(`<span>`), _tmpl$2 = /* @__PURE__ */ _$template(`<span class="flex items-center gap-1">`), _tmpl$3 = /* @__PURE__ */ _$template(`<span>,`), _tmpl$4 = /* @__PURE__ */ _$template(`<button type=button data-clear-button tabindex=-1 aria-label="\uC120\uD0DD \uD574\uC81C">`), _tmpl$5 = /* @__PURE__ */ _$template(`<button type=button data-search-button tabindex=-1 aria-label=\uAC80\uC0C9>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div data-data-select-button><div role=combobox aria-haspopup=dialog><div></div><div class="flex items-center gap-0.5">`);
|
|
10
|
+
import { createEffect, createMemo, createResource, createSignal, For, on, Show, splitProps } from "solid-js";
|
|
11
|
+
import clsx from "clsx";
|
|
12
|
+
import { twMerge } from "tailwind-merge";
|
|
13
|
+
import { IconSearch, IconX } from "@tabler/icons-solidjs";
|
|
14
|
+
import { Icon } from "../../display/Icon.js";
|
|
15
|
+
import { Invalid } from "../Invalid.js";
|
|
16
|
+
import { useDialog } from "../../disclosure/DialogContext.js";
|
|
17
|
+
import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
|
|
18
|
+
import { textMuted } from "../../../styles/tokens.styles.js";
|
|
19
|
+
import { triggerBaseClass, triggerDisabledClass, triggerInsetClass, triggerSizeClasses } from "../DropdownTrigger.styles.js";
|
|
20
|
+
const containerClass = clsx("inline-flex items-center", "group");
|
|
21
|
+
const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden", "text-ellipsis");
|
|
22
|
+
const actionButtonClass = clsx("flex-shrink-0", "p-0.5", "rounded", "cursor-pointer", "transition-colors", "hover:bg-base-200 dark:hover:bg-base-700", "focus:outline-none");
|
|
23
|
+
function getTriggerContainerClass(options) {
|
|
24
|
+
return twMerge(triggerBaseClass, "px-2 py-1", options.size && triggerSizeClasses[options.size], options.disabled && triggerDisabledClass, options.inset && triggerInsetClass, options.class);
|
|
25
|
+
}
|
|
26
|
+
function DataSelectButton(props) {
|
|
27
|
+
const [local] = splitProps(props, ["value", "onValueChange", "load", "modal", "renderItem", "multiple", "required", "disabled", "size", "inset", "validate", "touchMode", "dialogOptions"]);
|
|
28
|
+
const dialog = useDialog();
|
|
29
|
+
const normalizeKeys = (value) => {
|
|
30
|
+
if (value === void 0 || value === null) return [];
|
|
31
|
+
if (Array.isArray(value)) return value;
|
|
32
|
+
return [value];
|
|
33
|
+
};
|
|
34
|
+
const [getValue, setValue] = createControllableSignal({
|
|
35
|
+
value: () => local.value,
|
|
36
|
+
onChange: () => local.onValueChange
|
|
37
|
+
});
|
|
38
|
+
const [loadKeys, setLoadKeys] = createSignal(normalizeKeys(local.value));
|
|
39
|
+
createEffect(on(() => getValue(), (value) => {
|
|
40
|
+
setLoadKeys(normalizeKeys(value));
|
|
41
|
+
}));
|
|
42
|
+
const [selectedItems] = createResource(loadKeys, async (keys) => {
|
|
43
|
+
if (keys.length === 0) return [];
|
|
44
|
+
return Promise.resolve(local.load(keys));
|
|
45
|
+
});
|
|
46
|
+
const hasValue = createMemo(() => {
|
|
47
|
+
const keys = normalizeKeys(getValue());
|
|
48
|
+
return keys.length > 0;
|
|
49
|
+
});
|
|
50
|
+
const clearable = createMemo(() => !local.required && hasValue() && !local.disabled);
|
|
51
|
+
const errorMsg = createMemo(() => {
|
|
52
|
+
var _a;
|
|
53
|
+
const v = getValue();
|
|
54
|
+
if (local.required) {
|
|
55
|
+
const keys = normalizeKeys(v);
|
|
56
|
+
if (keys.length === 0) return "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4";
|
|
57
|
+
}
|
|
58
|
+
return (_a = local.validate) == null ? void 0 : _a.call(local, v);
|
|
59
|
+
});
|
|
60
|
+
const handleOpenModal = async () => {
|
|
61
|
+
if (local.disabled) return;
|
|
62
|
+
const result = await dialog.show(local.modal, local.dialogOptions ?? {});
|
|
63
|
+
if (result) {
|
|
64
|
+
const newKeys = result.selectedKeys;
|
|
65
|
+
if (local.multiple) {
|
|
66
|
+
setValue(newKeys);
|
|
67
|
+
} else {
|
|
68
|
+
setValue(newKeys.length > 0 ? newKeys[0] : void 0);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
const handleClear = (e) => {
|
|
73
|
+
e.stopPropagation();
|
|
74
|
+
if (local.multiple) {
|
|
75
|
+
setValue([]);
|
|
76
|
+
} else {
|
|
77
|
+
setValue(void 0);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
const renderSelectedDisplay = () => {
|
|
81
|
+
const items = selectedItems();
|
|
82
|
+
if (!items || items.length === 0) {
|
|
83
|
+
return (() => {
|
|
84
|
+
var _el$ = _tmpl$();
|
|
85
|
+
_$className(_el$, textMuted);
|
|
86
|
+
return _el$;
|
|
87
|
+
})();
|
|
88
|
+
}
|
|
89
|
+
return (() => {
|
|
90
|
+
var _el$2 = _tmpl$2();
|
|
91
|
+
_$insert(_el$2, _$createComponent(For, {
|
|
92
|
+
each: items,
|
|
93
|
+
children: (item, index) => [_$createComponent(Show, {
|
|
94
|
+
get when() {
|
|
95
|
+
return index() > 0;
|
|
96
|
+
},
|
|
97
|
+
get children() {
|
|
98
|
+
var _el$3 = _tmpl$3();
|
|
99
|
+
_$className(_el$3, textMuted);
|
|
100
|
+
return _el$3;
|
|
101
|
+
}
|
|
102
|
+
}), _$memo(() => local.renderItem(item))]
|
|
103
|
+
}));
|
|
104
|
+
return _el$2;
|
|
105
|
+
})();
|
|
106
|
+
};
|
|
107
|
+
const triggerClassName = () => getTriggerContainerClass({
|
|
108
|
+
size: local.size,
|
|
109
|
+
disabled: local.disabled,
|
|
110
|
+
inset: local.inset
|
|
111
|
+
});
|
|
112
|
+
return _$createComponent(Invalid, {
|
|
113
|
+
get message() {
|
|
114
|
+
return errorMsg();
|
|
115
|
+
},
|
|
116
|
+
variant: "border",
|
|
117
|
+
get touchMode() {
|
|
118
|
+
return local.touchMode;
|
|
119
|
+
},
|
|
120
|
+
get children() {
|
|
121
|
+
var _el$4 = _tmpl$6(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
|
|
122
|
+
_$className(_el$4, containerClass);
|
|
123
|
+
_el$5.$$keydown = (e) => {
|
|
124
|
+
if (local.disabled) return;
|
|
125
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
126
|
+
e.preventDefault();
|
|
127
|
+
void handleOpenModal();
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
_$setAttribute(_el$5, "aria-expanded", false);
|
|
131
|
+
_$className(_el$6, selectedValueClass);
|
|
132
|
+
_$insert(_el$6, renderSelectedDisplay);
|
|
133
|
+
_$insert(_el$7, _$createComponent(Show, {
|
|
134
|
+
get when() {
|
|
135
|
+
return clearable();
|
|
136
|
+
},
|
|
137
|
+
get children() {
|
|
138
|
+
var _el$8 = _tmpl$4();
|
|
139
|
+
_el$8.$$click = handleClear;
|
|
140
|
+
_$insert(_el$8, _$createComponent(Icon, {
|
|
141
|
+
icon: IconX,
|
|
142
|
+
size: "0.875em"
|
|
143
|
+
}));
|
|
144
|
+
_$effect(() => _$className(_el$8, twMerge(actionButtonClass, "text-base-400 hover:text-danger-500")));
|
|
145
|
+
return _el$8;
|
|
146
|
+
}
|
|
147
|
+
}), null);
|
|
148
|
+
_$insert(_el$7, _$createComponent(Show, {
|
|
149
|
+
get when() {
|
|
150
|
+
return !local.disabled;
|
|
151
|
+
},
|
|
152
|
+
get children() {
|
|
153
|
+
var _el$9 = _tmpl$5();
|
|
154
|
+
_el$9.$$click = () => void handleOpenModal();
|
|
155
|
+
_$insert(_el$9, _$createComponent(Icon, {
|
|
156
|
+
icon: IconSearch,
|
|
157
|
+
size: "0.875em"
|
|
158
|
+
}));
|
|
159
|
+
_$effect(() => _$className(_el$9, twMerge(actionButtonClass, "text-base-400 hover:text-primary-500")));
|
|
160
|
+
return _el$9;
|
|
161
|
+
}
|
|
162
|
+
}), null);
|
|
163
|
+
_$effect((_p$) => {
|
|
164
|
+
var _v$ = local.disabled || void 0, _v$2 = local.required || void 0, _v$3 = local.disabled ? -1 : 0, _v$4 = triggerClassName();
|
|
165
|
+
_v$ !== _p$.e && _$setAttribute(_el$5, "aria-disabled", _p$.e = _v$);
|
|
166
|
+
_v$2 !== _p$.t && _$setAttribute(_el$5, "aria-required", _p$.t = _v$2);
|
|
167
|
+
_v$3 !== _p$.a && _$setAttribute(_el$5, "tabindex", _p$.a = _v$3);
|
|
168
|
+
_v$4 !== _p$.o && _$className(_el$5, _p$.o = _v$4);
|
|
169
|
+
return _p$;
|
|
170
|
+
}, {
|
|
171
|
+
e: void 0,
|
|
172
|
+
t: void 0,
|
|
173
|
+
a: void 0,
|
|
174
|
+
o: void 0
|
|
175
|
+
});
|
|
176
|
+
return _el$4;
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
_$delegateEvents(["keydown", "click"]);
|
|
181
|
+
export {
|
|
182
|
+
DataSelectButton
|
|
183
|
+
};
|
|
184
|
+
//# sourceMappingURL=DataSelectButton.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/form-control/data-select-button/DataSelectButton.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["createEffect", "createMemo", "createResource", "createSignal", "For", "on", "Show", "splitProps", "clsx", "twMerge", "IconSearch", "IconX", "Icon", "Invalid", "useDialog", "createControllableSignal", "textMuted", "triggerBaseClass", "triggerDisabledClass", "triggerInsetClass", "triggerSizeClasses", "containerClass", "selectedValueClass", "actionButtonClass", "getTriggerContainerClass", "options", "size", "disabled", "inset", "class", "DataSelectButton", "props", "local", "dialog", "normalizeKeys", "value", "undefined", "Array", "isArray", "getValue", "setValue", "onChange", "onValueChange", "loadKeys", "setLoadKeys", "selectedItems", "keys", "length", "Promise", "resolve", "load", "hasValue", "clearable", "required", "errorMsg", "v", "validate", "handleOpenModal", "result", "show", "modal", "dialogOptions", "newKeys", "selectedKeys", "multiple", "handleClear", "e", "stopPropagation", "renderSelectedDisplay", "items", "_el$", "_tmpl$", "_$className", "_el$2", "_tmpl$2", "_$insert", "_$createComponent", "each", "children", "item", "index", "when", "_el$3", "_tmpl$3", "_$memo", "renderItem", "triggerClassName", "message", "variant", "touchMode", "_el$4", "_tmpl$6", "_el$5", "firstChild", "_el$6", "_el$7", "nextSibling", "$$keydown", "key", "preventDefault", "_$setAttribute", "_el$8", "_tmpl$4", "$$click", "icon", "_$effect", "_el$9", "_tmpl$5", "_p$", "_v$", "_v$2", "_v$3", "_v$4", "t", "a", "o", "_$delegateEvents"]
|
|
6
|
+
}
|
|
@@ -14,7 +14,7 @@ declare const SelectHeader: ParentComponent;
|
|
|
14
14
|
declare const SelectItemTemplate: <TArgs extends unknown[]>(props: {
|
|
15
15
|
children: (...args: TArgs) => JSX.Element;
|
|
16
16
|
}) => null;
|
|
17
|
-
interface SelectCommonProps {
|
|
17
|
+
interface SelectCommonProps<TValue = unknown> {
|
|
18
18
|
/** 비활성화 */
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
/** 필수 입력 */
|
|
@@ -29,12 +29,16 @@ interface SelectCommonProps {
|
|
|
29
29
|
validate?: (value: unknown) => string | undefined;
|
|
30
30
|
/** touchMode: 포커스 해제 후에만 에러 표시 */
|
|
31
31
|
touchMode?: boolean;
|
|
32
|
+
/** 검색 텍스트 추출 함수 (설정 시 검색 입력 자동 표시) */
|
|
33
|
+
getSearchText?: (item: TValue) => string;
|
|
34
|
+
/** 숨김 여부 판별 함수 */
|
|
35
|
+
getIsHidden?: (item: TValue) => boolean;
|
|
32
36
|
/** 커스텀 class */
|
|
33
37
|
class?: string;
|
|
34
38
|
/** 커스텀 style */
|
|
35
39
|
style?: JSX.CSSProperties;
|
|
36
40
|
}
|
|
37
|
-
interface SelectSingleBaseProps<TValue> extends SelectCommonProps {
|
|
41
|
+
interface SelectSingleBaseProps<TValue> extends SelectCommonProps<TValue> {
|
|
38
42
|
/** 다중 선택 모드 */
|
|
39
43
|
multiple?: false;
|
|
40
44
|
/** 현재 선택된 값 */
|
|
@@ -46,7 +50,7 @@ interface SelectSingleBaseProps<TValue> extends SelectCommonProps {
|
|
|
46
50
|
/** 전체 선택 버튼 숨기기 (단일 선택에서는 사용 안 함) */
|
|
47
51
|
hideSelectAll?: never;
|
|
48
52
|
}
|
|
49
|
-
interface SelectMultipleBaseProps<TValue> extends SelectCommonProps {
|
|
53
|
+
interface SelectMultipleBaseProps<TValue> extends SelectCommonProps<TValue> {
|
|
50
54
|
/** 다중 선택 모드 */
|
|
51
55
|
multiple: true;
|
|
52
56
|
/** 현재 선택된 값 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\select\\Select.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\select\\Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,8 +10,8 @@ import { insert as _$insert } from "solid-js/web";
|
|
|
10
10
|
import { use as _$use } from "solid-js/web";
|
|
11
11
|
import { spread as _$spread } from "solid-js/web";
|
|
12
12
|
import { mergeProps as _$mergeProps } from "solid-js/web";
|
|
13
|
-
var _tmpl$ = /* @__PURE__ */ _$template(`<button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<span>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div role=combobox aria-haspopup=listbox><div></div><div>`);
|
|
14
|
-
import { children, createMemo, createSignal, For, onCleanup, Show, splitProps } from "solid-js";
|
|
13
|
+
var _tmpl$ = /* @__PURE__ */ _$template(`<button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<span>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div role=combobox aria-haspopup=listbox><div></div><div>`), _tmpl$5 = /* @__PURE__ */ _$template(`<input type=text data-select-search placeholder=\uAC80\uC0C9...>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div><button type=button data-select-all>\uC804\uCCB4\uC120\uD0DD</button><button type=button data-deselect-all>\uC804\uCCB4\uD574\uC81C`), _tmpl$7 = /* @__PURE__ */ _$template(`<span>\uBBF8\uC9C0\uC815`);
|
|
14
|
+
import { children, createEffect, createMemo, createSignal, For, onCleanup, Show, splitProps } from "solid-js";
|
|
15
15
|
import clsx from "clsx";
|
|
16
16
|
import { twMerge } from "tailwind-merge";
|
|
17
17
|
import { IconChevronDown } from "@tabler/icons-solidjs";
|
|
@@ -22,7 +22,7 @@ import { SelectContext } from "./SelectContext.js";
|
|
|
22
22
|
import { useSelectContext } from "./SelectContext.js";
|
|
23
23
|
import { SelectItem } from "./SelectItem.js";
|
|
24
24
|
import { ripple } from "../../../directives/ripple.js";
|
|
25
|
-
import { borderDefault, textMuted } from "../../../styles/tokens.styles.js";
|
|
25
|
+
import { borderDefault, borderSubtle, textMuted, textPlaceholder } from "../../../styles/tokens.styles.js";
|
|
26
26
|
import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
|
|
27
27
|
import { createSlotSignal } from "../../../hooks/createSlotSignal.js";
|
|
28
28
|
import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles.js";
|
|
@@ -30,6 +30,9 @@ import { Invalid } from "../Invalid.js";
|
|
|
30
30
|
void ripple;
|
|
31
31
|
const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
|
|
32
32
|
const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
|
|
33
|
+
const searchInputClass = clsx("w-full", "border-b", borderSubtle, "bg-transparent", "px-2 py-1.5", "text-sm", "outline-none", textPlaceholder);
|
|
34
|
+
const selectAllBarClass = clsx("flex gap-2", "border-b", borderSubtle, "px-2 py-1", "text-xs");
|
|
35
|
+
const selectAllBtnClass = clsx("text-primary-500", "hover:text-primary-600 dark:hover:text-primary-400", "cursor-pointer");
|
|
33
36
|
const SelectAction = (props) => {
|
|
34
37
|
const [local, rest] = splitProps(props, ["children", "class"]);
|
|
35
38
|
const ctx = useSelectContext();
|
|
@@ -62,31 +65,37 @@ const SelectItemTemplate = (props) => {
|
|
|
62
65
|
return null;
|
|
63
66
|
};
|
|
64
67
|
const Select = (props) => {
|
|
65
|
-
const [local, rest] = splitProps(props, ["children", "class", "style", "value", "onValueChange", "multiple", "disabled", "required", "placeholder", "size", "inset", "multiDisplayDirection", "hideSelectAll", "items", "getChildren", "renderValue", "validate", "touchMode"]);
|
|
68
|
+
const [local, rest] = splitProps(props, ["children", "class", "style", "value", "onValueChange", "multiple", "disabled", "required", "placeholder", "size", "inset", "multiDisplayDirection", "hideSelectAll", "items", "getChildren", "renderValue", "validate", "touchMode", "getSearchText", "getIsHidden"]);
|
|
66
69
|
const [open, setOpen] = createSignal(false);
|
|
67
|
-
const [
|
|
70
|
+
const [searchText, setSearchText] = createSignal("");
|
|
71
|
+
createEffect(() => {
|
|
72
|
+
if (!open()) {
|
|
73
|
+
setSearchText("");
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
const [value, setValue] = createControllableSignal({
|
|
68
77
|
value: () => local.value,
|
|
69
78
|
onChange: () => local.onValueChange
|
|
70
79
|
});
|
|
71
|
-
const isSelected = (
|
|
72
|
-
const current =
|
|
80
|
+
const isSelected = (itemValue) => {
|
|
81
|
+
const current = value();
|
|
73
82
|
if (current === void 0) return false;
|
|
74
83
|
if (local.multiple) {
|
|
75
|
-
return Array.isArray(current) && current.includes(
|
|
84
|
+
return Array.isArray(current) && current.includes(itemValue);
|
|
76
85
|
}
|
|
77
|
-
return current ===
|
|
86
|
+
return current === itemValue;
|
|
78
87
|
};
|
|
79
|
-
const toggleValue = (
|
|
88
|
+
const toggleValue = (itemValue) => {
|
|
80
89
|
if (local.multiple) {
|
|
81
|
-
const current =
|
|
82
|
-
const idx = current.indexOf(
|
|
90
|
+
const current = value() ?? [];
|
|
91
|
+
const idx = current.indexOf(itemValue);
|
|
83
92
|
if (idx >= 0) {
|
|
84
|
-
|
|
93
|
+
setValue([...current.slice(0, idx), ...current.slice(idx + 1)]);
|
|
85
94
|
} else {
|
|
86
|
-
|
|
95
|
+
setValue([...current, itemValue]);
|
|
87
96
|
}
|
|
88
97
|
} else {
|
|
89
|
-
|
|
98
|
+
setValue(itemValue);
|
|
90
99
|
}
|
|
91
100
|
};
|
|
92
101
|
const closeDropdown = () => {
|
|
@@ -114,7 +123,7 @@ const Select = (props) => {
|
|
|
114
123
|
};
|
|
115
124
|
const errorMsg = createMemo(() => {
|
|
116
125
|
var _a;
|
|
117
|
-
const v =
|
|
126
|
+
const v = value();
|
|
118
127
|
if (local.required && (v === void 0 || v === null || v === "")) return "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4";
|
|
119
128
|
return (_a = local.validate) == null ? void 0 : _a.call(local, v);
|
|
120
129
|
});
|
|
@@ -124,6 +133,40 @@ const Select = (props) => {
|
|
|
124
133
|
inset: local.inset,
|
|
125
134
|
class: local.class
|
|
126
135
|
});
|
|
136
|
+
const filteredItems = createMemo(() => {
|
|
137
|
+
if (!local.items) return void 0;
|
|
138
|
+
if (!local.getSearchText || !searchText()) return local.items;
|
|
139
|
+
const terms = searchText().trim().split(" ").filter(Boolean);
|
|
140
|
+
if (terms.length === 0) return local.items;
|
|
141
|
+
const matchesSearch = (item) => {
|
|
142
|
+
const text = local.getSearchText(item).toLowerCase();
|
|
143
|
+
if (terms.every((t) => text.includes(t.toLowerCase()))) return true;
|
|
144
|
+
if (local.getChildren) {
|
|
145
|
+
const itemChildren = local.getChildren(item, 0, 0);
|
|
146
|
+
if (itemChildren == null ? void 0 : itemChildren.some((child) => matchesSearch(child))) return true;
|
|
147
|
+
}
|
|
148
|
+
return false;
|
|
149
|
+
};
|
|
150
|
+
return local.items.filter((item) => matchesSearch(item));
|
|
151
|
+
});
|
|
152
|
+
const visibleItems = createMemo(() => {
|
|
153
|
+
const items = filteredItems();
|
|
154
|
+
if (!items || !local.getIsHidden) return items;
|
|
155
|
+
return items.filter((item) => {
|
|
156
|
+
if (local.getIsHidden(item)) {
|
|
157
|
+
return isSelected(item);
|
|
158
|
+
}
|
|
159
|
+
return true;
|
|
160
|
+
});
|
|
161
|
+
});
|
|
162
|
+
const handleSelectAll = () => {
|
|
163
|
+
const items = visibleItems();
|
|
164
|
+
if (!items) return;
|
|
165
|
+
setValue(items);
|
|
166
|
+
};
|
|
167
|
+
const handleDeselectAll = () => {
|
|
168
|
+
setValue([]);
|
|
169
|
+
};
|
|
127
170
|
const SelectInner = (innerProps) => {
|
|
128
171
|
const resolved = children(() => innerProps.children);
|
|
129
172
|
const getItemTemplate = () => {
|
|
@@ -133,44 +176,62 @@ const Select = (props) => {
|
|
|
133
176
|
const tpl = getItemTemplate();
|
|
134
177
|
return _$createComponent(For, {
|
|
135
178
|
each: itemList,
|
|
136
|
-
children: (item, index) =>
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
return
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
179
|
+
children: (item, index) => {
|
|
180
|
+
const hidden = () => {
|
|
181
|
+
var _a;
|
|
182
|
+
return ((_a = local.getIsHidden) == null ? void 0 : _a.call(local, item)) ?? false;
|
|
183
|
+
};
|
|
184
|
+
return _$createComponent(SelectItem, {
|
|
185
|
+
value: item,
|
|
186
|
+
get ["class"]() {
|
|
187
|
+
return hidden() ? "line-through opacity-60" : void 0;
|
|
188
|
+
},
|
|
189
|
+
get children() {
|
|
190
|
+
return [_$memo(() => tpl ? tpl(item, index(), depth) : String(item)), _$createComponent(Show, {
|
|
146
191
|
get when() {
|
|
147
|
-
|
|
192
|
+
var _a;
|
|
193
|
+
return (_a = local.getChildren) == null ? void 0 : _a.call(local, item, index(), depth);
|
|
148
194
|
},
|
|
149
|
-
|
|
150
|
-
|
|
195
|
+
keyed: true,
|
|
196
|
+
children: (itemChildren) => {
|
|
197
|
+
const visibleChildren = () => {
|
|
198
|
+
if (!local.getIsHidden) return itemChildren;
|
|
199
|
+
return itemChildren.filter((child) => {
|
|
200
|
+
if (local.getIsHidden(child)) return isSelected(child);
|
|
201
|
+
return true;
|
|
202
|
+
});
|
|
203
|
+
};
|
|
204
|
+
return _$createComponent(Show, {
|
|
205
|
+
get when() {
|
|
206
|
+
return visibleChildren().length > 0;
|
|
207
|
+
},
|
|
151
208
|
get children() {
|
|
152
|
-
return
|
|
209
|
+
return _$createComponent(SelectItem.Children, {
|
|
210
|
+
get children() {
|
|
211
|
+
return renderItems(visibleChildren(), depth + 1);
|
|
212
|
+
}
|
|
213
|
+
});
|
|
153
214
|
}
|
|
154
215
|
});
|
|
155
216
|
}
|
|
156
|
-
})
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}
|
|
217
|
+
})];
|
|
218
|
+
}
|
|
219
|
+
});
|
|
220
|
+
}
|
|
160
221
|
});
|
|
161
222
|
};
|
|
162
|
-
const renderValue = (
|
|
223
|
+
const renderValue = (renderVal) => {
|
|
163
224
|
if (local.renderValue) {
|
|
164
|
-
return local.renderValue(
|
|
225
|
+
return local.renderValue(renderVal);
|
|
165
226
|
}
|
|
166
227
|
const tpl = getItemTemplate();
|
|
167
228
|
if (tpl) {
|
|
168
|
-
return tpl(
|
|
229
|
+
return tpl(renderVal, 0, 0);
|
|
169
230
|
}
|
|
170
|
-
return _$memo(() => String(
|
|
231
|
+
return _$memo(() => String(renderVal));
|
|
171
232
|
};
|
|
172
233
|
const renderSelectedValue = () => {
|
|
173
|
-
const current =
|
|
234
|
+
const current = value();
|
|
174
235
|
if (current === void 0 || Array.isArray(current) && current.length === 0) {
|
|
175
236
|
return (() => {
|
|
176
237
|
var _el$2 = _tmpl$2();
|
|
@@ -198,6 +259,8 @@ const Select = (props) => {
|
|
|
198
259
|
}
|
|
199
260
|
return renderValue(current);
|
|
200
261
|
};
|
|
262
|
+
const showUnsetItem = () => !local.multiple && !local.required && local.items !== void 0;
|
|
263
|
+
const showSelectAllBar = () => local.multiple === true && !local.hideSelectAll && local.items !== void 0;
|
|
201
264
|
return (() => {
|
|
202
265
|
var _el$5 = _tmpl$3();
|
|
203
266
|
_$spread(_el$5, _$mergeProps(rest, {
|
|
@@ -256,6 +319,30 @@ const Select = (props) => {
|
|
|
256
319
|
get children() {
|
|
257
320
|
return header()();
|
|
258
321
|
}
|
|
322
|
+
}), _$createComponent(Show, {
|
|
323
|
+
get when() {
|
|
324
|
+
return _$memo(() => !!local.getSearchText)() && local.items;
|
|
325
|
+
},
|
|
326
|
+
get children() {
|
|
327
|
+
var _el$9 = _tmpl$5();
|
|
328
|
+
_el$9.$$input = (e) => setSearchText(e.currentTarget.value);
|
|
329
|
+
_$className(_el$9, searchInputClass);
|
|
330
|
+
_$effect(() => _el$9.value = searchText());
|
|
331
|
+
return _el$9;
|
|
332
|
+
}
|
|
333
|
+
}), _$createComponent(Show, {
|
|
334
|
+
get when() {
|
|
335
|
+
return showSelectAllBar();
|
|
336
|
+
},
|
|
337
|
+
get children() {
|
|
338
|
+
var _el$0 = _tmpl$6(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
|
|
339
|
+
_$className(_el$0, selectAllBarClass);
|
|
340
|
+
_el$1.$$click = handleSelectAll;
|
|
341
|
+
_$className(_el$1, selectAllBtnClass);
|
|
342
|
+
_el$10.$$click = handleDeselectAll;
|
|
343
|
+
_$className(_el$10, selectAllBtnClass);
|
|
344
|
+
return _el$0;
|
|
345
|
+
}
|
|
259
346
|
}), _$createComponent(List, {
|
|
260
347
|
inset: true,
|
|
261
348
|
role: "listbox",
|
|
@@ -268,7 +355,21 @@ const Select = (props) => {
|
|
|
268
355
|
return resolved();
|
|
269
356
|
},
|
|
270
357
|
get children() {
|
|
271
|
-
return
|
|
358
|
+
return [_$createComponent(Show, {
|
|
359
|
+
get when() {
|
|
360
|
+
return showUnsetItem();
|
|
361
|
+
},
|
|
362
|
+
get children() {
|
|
363
|
+
return _$createComponent(SelectItem, {
|
|
364
|
+
value: void 0,
|
|
365
|
+
get children() {
|
|
366
|
+
var _el$11 = _tmpl$7();
|
|
367
|
+
_$className(_el$11, textMuted);
|
|
368
|
+
return _el$11;
|
|
369
|
+
}
|
|
370
|
+
});
|
|
371
|
+
}
|
|
372
|
+
}), _$memo(() => renderItems(visibleItems() ?? [], 0))];
|
|
272
373
|
}
|
|
273
374
|
});
|
|
274
375
|
}
|
|
@@ -282,10 +383,10 @@ const Select = (props) => {
|
|
|
282
383
|
return action();
|
|
283
384
|
},
|
|
284
385
|
get children() {
|
|
285
|
-
var _el$
|
|
286
|
-
_$insert(_el$
|
|
287
|
-
_$effect(() => _$className(_el$
|
|
288
|
-
return _el$
|
|
386
|
+
var _el$12 = _tmpl$3();
|
|
387
|
+
_$insert(_el$12, action());
|
|
388
|
+
_$effect(() => _$className(_el$12, clsx("contents", "[&>[data-select-action]:last-child]:rounded-r", "[&>[data-select-action]+[data-select-action]]:-ml-px")));
|
|
389
|
+
return _el$12;
|
|
289
390
|
}
|
|
290
391
|
}), null);
|
|
291
392
|
return _el$5;
|
|
@@ -317,7 +418,7 @@ Select.Item = SelectItem;
|
|
|
317
418
|
Select.Action = SelectAction;
|
|
318
419
|
Select.Header = SelectHeader;
|
|
319
420
|
Select.ItemTemplate = SelectItemTemplate;
|
|
320
|
-
_$delegateEvents(["keydown"]);
|
|
421
|
+
_$delegateEvents(["keydown", "input", "click"]);
|
|
321
422
|
export {
|
|
322
423
|
Select
|
|
323
424
|
};
|