@sellmate/design-system 0.0.55 → 1.0.0

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
 import { SelectKeyboardNavigation } from "../../utils/select-keyboard-navigation";
 export class SdSelect extends BaseDropdownEvent {
@@ -8,99 +8,82 @@ export class SdSelect extends BaseDropdownEvent {
     el;
     // props
     value = null;
-    label = '';
     options = [];
     placeholder = '선택';
     optionPlaceholder = '옵션이 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
+    autoFocus = false;
     disabled = false;
     clearable = false;
     searchable = false;
+    // props - label
+    label = '';
+    insideLabel = false;
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
     // props - custom slots
     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() {
-        const selectedOption = this.getSelectedOption();
-        this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
+    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({ preventScroll: true });
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__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();
     }
-    componentWillLoad() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
-        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
-    }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    async valueChanged() {
+        const selectedOption = this.getSelectedOption();
+        this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
     }
     async isOpenChanged() {
         // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
         this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = /* this.searchable ?  */ -1 /* : 0 */;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption);
-        }
         this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];
-        const currentItem = optionElements?.[this.itemIndex];
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus({ preventScroll: true });
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
         }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        this.scrollToOption(currentItem);
+    }
+    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에서 제거 + 이벤트 정리
     }
     handleDocumentClick(event) {
         if (!this.selectRef?.contains(event.target)) {
@@ -124,7 +107,6 @@ export class SdSelect extends BaseDropdownEvent {
                 const selectedOption = this.filteredOptions[this.itemIndex];
                 if (selectedOption && !selectedOption.disabled) {
                     this.value = selectedOption.value;
-                    this.searchText = null;
                     this.isOpen = false;
                 }
                 break;
@@ -133,11 +115,12 @@ export class SdSelect extends BaseDropdownEvent {
                 break;
         }
     }
-    // closeDropdown 메서드 구현 (Manager에서 호출됨)
+    getSelectedOption() {
+        return this.options.find(option => option.value === this.value);
+    }
     closeDropdown() {
         this.isOpen = false;
     }
-    // event handlers
     handleTriggerClick = (event) => {
         event.stopPropagation();
         if (!this.disabled) {
@@ -153,82 +136,28 @@ export class SdSelect extends BaseDropdownEvent {
             this.isOpen = false;
         }
     };
-    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.find(option => option.value === this.value);
-    }
-    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;
-    }
-    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;
-        }
-    }
-    // render method
     render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (h(Host, { key: '8f90fd48d8e20b97d35a047d15507d3116c79b23', style: style }, h("div", { key: '91bc6bab24b9d99ab595357ec5591b56510ed161', class: {
+        return (h("sd-field", { key: '507736637b3b7acee4bfef07eac7175c5e196c86', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'd905202201f5977d04a929af507653900af3ee75', class: {
                 'sd-select': true,
-                'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'a2ceb7cc71b13887f55f3a44e0f1babd4be388b9', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label) {
-        if (!label)
-            return null;
-        return h("label", { class: "sd-select__label" }, label);
+                'sd-select--error': !!this.error,
+                'sd-select--label': !!this.label,
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
+        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__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__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
     }
     renderDropdown() {
-        const style = {
-            '--select-dropdown-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
         if (this.isOpen === false)
             return null;
-        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select__dropdown", style: style, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: option.value === this.value, isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select__option-placeholder' }, this.optionPlaceholder))))));
+        const parentRef = (this.selectRef?.querySelector('.sd-select__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, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {
@@ -263,26 +192,6 @@ export class SdSelect extends BaseDropdownEvent {
                 "attribute": "value",
                 "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,
@@ -387,6 +296,26 @@ export class SdSelect 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,
@@ -447,6 +376,173 @@ export class SdSelect extends BaseDropdownEvent {
                 "attribute": "searchable",
                 "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": "''"
+            },
+            "insideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inside-label",
+                "defaultValue": "false"
+            },
+            "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": "../sd-tooltip/sd-tooltip",
+                            "id": "src/components/sd-tooltip/sd-tooltip.tsx::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,
@@ -474,17 +570,15 @@ export class SdSelect 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,
@@ -493,7 +587,7 @@ export class SdSelect extends BaseDropdownEvent {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "SelectEvents['sdChange']",
+                    "original": "SelectEvents['sdUpdate']",
                     "resolved": "{ value: string | number | null; option: SelectOption | null; }",
                     "references": {
                         "SelectEvents": {
@@ -505,7 +599,7 @@ export class SdSelect extends BaseDropdownEvent {
                 }
             }, {
                 "method": "dropDownShow",
-                "name": "dropDownShow",
+                "name": "sdDropDownShow",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -528,7 +622,75 @@ export class SdSelect 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": [],
@@ -552,71 +714,10 @@ export class SdSelect extends BaseDropdownEvent {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
-            }, {
-                "propName": "options",
-                "methodName": "optionsChanged"
-            }, {
-                "propName": "searchText",
-                "methodName": "searchTextChanged"
-            }, {
-                "propName": "itemIndex",
-                "methodName": "itemIndexChanged"
             }, {
                 "propName": "isOpen",
                 "methodName": "isOpenChanged"
             }];
     }
 }
-{
-    /*
-     <sd-select id="select-1">
-       <!-- <div slot="option-placeholder">옵션이 없습니다.</div> -->
-      </sd-select>
-      <sd-select id="select-2"> </sd-select>
-      <sd-select id="select-3" searchable clearable>
-       <div slot="option-3">test</div>
-      </sd-select>
-   
-       <script>
-     document.addEventListener('DOMContentLoaded', () => {
-      const select1 = document.getElementById('select-1');
-      const select2 = document.getElementById('select-2');
-      const select3 = document.getElementById('select-3');
-      const select = document.querySelector('sd-select slot[name="option-3"]');
-      select1.optionPlaceholder = 'No options available';
-   
-      const options = [
-       { label: 'Option 1', value: '1' },
-       { label: 'Option 2', value: '2' },
-       { label: 'Option 3', value: '3', disabled: true },
-       { label: 'Option 4', value: '4' },
-       { label: 'Option 5', value: '5' },
-       { label: 'Option 6', value: '6' },
-       { label: 'Option 7', value: '7', disabled: true },
-       { label: 'Option 8', value: '8' },
-       { label: 'Option 9', value: '9' },
-       { label: 'Option 10', value: '10' },
-       { label: 'Option 11', value: '11', disabled: true },
-       { label: 'Option 12', value: '12' },
-       { label: 'Option 13', value: '13' },
-       { label: 'Option 14', value: '14' },
-       { label: 'Option 15', value: '15', disabled: true },
-       { label: 'Option 16', value: '16' },
-       { label: 'Option 17', value: '17' },
-       { label: 'Option 18', value: '18' },
-       { label: 'Option 19', value: '19', disabled: true },
-       { label: 'Option 20', value: '20' },
-       { label: 'Option 21', value: '21' },
-       { label: 'Option 22', value: '22' },
-       { label: 'Option 23', value: '23', disabled: true },
-       { label: 'Option 24', value: '24' },
-      ];
-   
-      select2.options = options;
-      select3.options = options;
-     });
-    </script>
-   
-    */
-}
 //# sourceMappingURL=sd-select.js.map