@sellmate/design-system 0.0.55 → 1.0.0

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { SelectKeyboardNavigation } from "../../utils/select-keyboard-navigation";
 import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
 export class SdSelectMultiple extends BaseDropdownEvent {
@@ -8,98 +8,80 @@ export class SdSelectMultiple extends BaseDropdownEvent {
     el;
     // props
     value = null;
-    label = '';
     options = [];
     placeholder = '선택';
     optionPlaceholder = '옵션이 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
+    autoFocus = false;
     disabled = false;
     clearable = false;
     searchable = false;
+    // props - select multiple specific
+    useAll = false;
     useCheckbox = false;
-    // props - custom slots
+    // props - label
+    label = '';
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
     optionRenderer;
     // states
-    filteredOptions = this.options;
     isOpen = false;
-    searchText = null;
     itemIndex = -1;
     isScrolled = false;
     // events
-    sdChange;
+    update;
     dropDownShow;
     selectRef;
-    searchRef;
-    optionRef;
-    dropdownRef;
-    async open() {
+    triggerRef;
+    formField;
+    filteredOptions = this.options;
+    dropDownWidth = this.width;
+    async sdOpen() {
         this.isOpen = true;
     }
-    valueChanged() {
-        this.sdChange?.emit(this.value);
+    async sdValidate() {
+        this.formField?.sdValidate();
     }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
+    async sdReset() {
+        this.formField?.sdReset();
     }
-    searchTextChanged() {
-        this.filterOptions();
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
     }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus();
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        if (!currentItem || !this.isOpen)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.isDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    valueChanged() {
+        this.update?.emit(this.value);
     }
     async isOpenChanged() {
         // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
         this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = -1;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption[0]);
-        }
         this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        // 드롭다운이 열릴 때 검색 입력에 포커스
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus();
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
         }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
-        this.scrollToOption(currentItem);
     }
-    connectedCallback() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
+    componentWillLoad() {
         this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
     }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.selectRef?.focus();
+        }
+    }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
     disconnectedCallback() {
         this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
     }
@@ -132,44 +114,6 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                 break;
         }
     }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        this.handleOptionSelection(option);
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            // 검색어가 없으면 전체 옵션 표시
-            this.filteredOptions = this.options;
-        }
-        else {
-            // 검색어가 있으면 필터링
-            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
-        }
-    }
-    getSelectedOption() {
-        return this.options.filter(option => this.value?.includes(option));
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.getNativeElement();
-        }
-        return null;
-    }
     handleOptionSelection = (option) => {
         if (!option || option.disabled)
             return;
@@ -183,67 +127,48 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             this.value = [...(this.value || []), option];
         }
     };
+    getSelectedOption() {
+        return this.options.filter(option => this.value?.includes(option));
+    }
     closeDropdown() {
         this.isOpen = false;
     }
-    scrollToOption(optionElement) {
-        if (!this.dropdownRef || !optionElement)
-            return;
-        const dropdown = this.dropdownRef;
-        const optionTop = optionElement.offsetTop;
-        const optionHeight = optionElement.offsetHeight;
-        const dropdownScrollTop = dropdown.scrollTop;
-        const dropdownHeight = dropdown.clientHeight;
-        const searchContainer = dropdown.querySelector('.sd-select__search-container');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTop = optionTop - searchOffset;
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
         }
-    }
-    // render method
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        this.handleOptionSelection(option);
+    };
     render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (h(Host, { key: 'aa11a88a19987be498da603cfa81c95e89f935c0', style: style }, h("div", { key: '35d1a93e5bee37027d43a90fadc32c335569ce66', class: {
+        return (h("sd-field", { key: 'cc40c09b8c1ea2aa049d12857c6cc80cd5a5966b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '0d90b8368287d7e67a384234a976da5d387b065b', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'd4d581d5fe2589dfd5ed5072324954f75f6c7382', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label) {
-        if (!label)
-            return null;
-        return h("label", { class: "sd-select-multiple__label" }, label);
+                'sd-select-multiple--error': !!this.error,
+            }, style: { '--select-width': this.width || '200px' }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, h("span", { class: "sd-select-multiple__value" }, !selectedOption
-            ? '선택'
-            : selectedOption.length
-                ? selectedOption.map(option => option.label).join(', ')
-                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: event => {
+        return (h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select-multiple__value" }, !selectedOption || selectedOption.length === 0
+            ? this.placeholder
+            : selectedOption.map(option => option.label).join(', ')), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: async (event) => {
                 event.stopPropagation();
                 this.value = null;
+                await this.formField?.sdValidate();
             } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
     }
     renderDropdown() {
         if (this.isOpen === false)
             return null;
-        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select-multiple__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
-                'sd-select-multiple__search-container': true,
-                'sd-select-multiple__search-container--scrolled': this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
-                this.searchText = String(event?.detail);
-            }, onSdFocus: () => {
-                this.itemIndex = -1;
-            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.value?.some(selected => selected.value === option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-multiple__option-placeholder' }, this.optionPlaceholder))))));
+        const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||
+            this.selectRef);
+        return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, useCheckbox: this.useCheckbox, useAll: this.useAll, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
     }
     static get is() { return "sd-select-multiple"; }
     static get originalStyleUrls() {
@@ -282,26 +207,6 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                 "setter": false,
                 "defaultValue": "null"
             },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
             "options": {
                 "type": "unknown",
                 "mutable": true,
@@ -406,6 +311,26 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                 "attribute": "dropdown-height",
                 "defaultValue": "'260px'"
             },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -466,6 +391,26 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                 "attribute": "searchable",
                 "defaultValue": "false"
             },
+            "useAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-all",
+                "defaultValue": "false"
+            },
             "useCheckbox": {
                 "type": "boolean",
                 "mutable": false,
@@ -486,6 +431,153 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                 "attribute": "use-checkbox",
                 "defaultValue": "false"
             },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "useLabelRequired": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-label-required",
+                "defaultValue": "false"
+            },
+            "labelTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-tooltip",
+                "defaultValue": "''"
+            },
+            "labelTooltipProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTooltipProps | null",
+                    "resolved": "SdTooltipProps | null",
+                    "references": {
+                        "SdTooltipProps": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::SdTooltipProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "rules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
+                    "references": {
+                        "Rule": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Rule"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
             "optionRenderer": {
                 "type": "unknown",
                 "mutable": false,
@@ -513,17 +605,15 @@ export class SdSelectMultiple extends BaseDropdownEvent {
     }
     static get states() {
         return {
-            "filteredOptions": {},
             "isOpen": {},
-            "searchText": {},
             "itemIndex": {},
             "isScrolled": {}
         };
     }
     static get events() {
         return [{
-                "method": "sdChange",
-                "name": "sdChange",
+                "method": "update",
+                "name": "sdUpdate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -532,7 +622,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "SelectMultipleEvents['sdChange']",
+                    "original": "SelectMultipleEvents['sdUpdate']",
                     "resolved": "SelectOption[] | null",
                     "references": {
                         "SelectMultipleEvents": {
@@ -544,7 +634,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                 }
             }, {
                 "method": "dropDownShow",
-                "name": "dropDownShow",
+                "name": "sdDropDownShow",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -567,7 +657,75 @@ export class SdSelectMultiple extends BaseDropdownEvent {
     }
     static get methods() {
         return {
-            "open": {
+            "sdOpen": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -591,15 +749,6 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
-            }, {
-                "propName": "options",
-                "methodName": "optionsChanged"
-            }, {
-                "propName": "searchText",
-                "methodName": "searchTextChanged"
-            }, {
-                "propName": "itemIndex",
-                "methodName": "itemIndexChanged"
             }, {
                 "propName": "isOpen",
                 "methodName": "isOpenChanged"