@sellmate/design-system 1.0.76 → 1.0.78

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

@@ -1,444 +0,0 @@
-import { h } from "@stencil/core";
-export class SdSelectDropdown {
-    itemIndex;
-    value = null;
-    options;
-    width;
-    dropdownHeight;
-    searchable;
-    optionPlaceholder;
-    useCheckbox = false;
-    useAll = false;
-    filteredOptions = [];
-    searchText = null;
-    isScrolled = false;
-    isDropdownReady = false;
-    optionClick;
-    optionFiltered;
-    scroll;
-    filteredOptionsChanged(newValue) {
-        this.optionFiltered.emit(newValue);
-    }
-    searchTextChanged() {
-        this.filterOptions();
-    }
-    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)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.sdIsDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
-    }
-    componentWillLoad() {
-        this.filteredOptions = this.options;
-        // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
-        requestAnimationFrame(() => {
-            requestAnimationFrame(async () => {
-                const selectedOptions = this.getSelectedOption();
-                // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
-                if (selectedOptions) {
-                    const selectedIndex = Array.isArray(selectedOptions)
-                        ? this.options.indexOf(selectedOptions[0])
-                        : this.options.indexOf(selectedOptions);
-                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
-                    // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
-                    const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
-                    // 선택된 옵션이 화면 가운데에 오도록 index 조정
-                    const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
-                    const currentItem = optionElements?.[targetIndex];
-                    if (currentItem) {
-                        this.scrollToOption(currentItem, 'instant');
-                    }
-                }
-                this.isDropdownReady = true;
-                if (this.searchable) {
-                    const searchInput = await this.getNativeInputElement();
-                    if (searchInput) {
-                        requestAnimationFrame(() => {
-                            searchInput.focus({ preventScroll: true });
-                        });
-                    }
-                }
-            });
-        });
-    }
-    dropdownRef;
-    searchRef;
-    optionRef;
-    get dropdownSize() {
-        return {
-            '--select-dropdown-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-    }
-    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() {
-        if (typeof this.value !== 'object') {
-            return this.options.find(option => option.value === this.value);
-        }
-        return this.options.filter(option => this.value?.includes(option));
-    }
-    isOptionSelected(value) {
-        if (Array.isArray(this.value)) {
-            return this.value.some(selected => selected.value === value);
-        }
-        return value === this.value;
-    }
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.sdGetNativeElement();
-        }
-        return null;
-    }
-    scrollToOption(optionElement, scrollBehavior = 'smooth') {
-        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-input');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTo({
-                top: optionTop + optionHeight - dropdownHeight + searchOffset,
-                behavior: scrollBehavior,
-            });
-        }
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
-    render() {
-        return (h("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', class: {
-                'sd-select-dropdown': true,
-                'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'f09a5575454c30387aeac9996d15625d7581a367', 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: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
-    }
-    static get is() { return "sd-select-dropdown"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-select-dropdown.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-select-dropdown.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "itemIndex": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "item-index"
-            },
-            "value": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectValue",
-                    "resolved": "SelectOption[] | null | number | string",
-                    "references": {
-                        "SelectValue": {
-                            "location": "global",
-                            "id": "global::SelectValue"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "null"
-            },
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectOption[]",
-                    "resolved": "SelectOption[]",
-                    "references": {
-                        "SelectOption": {
-                            "location": "import",
-                            "path": "../sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption",
-                            "referenceLocation": "SelectOption"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width"
-            },
-            "dropdownHeight": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dropdown-height"
-            },
-            "searchable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "searchable"
-            },
-            "optionPlaceholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "option-placeholder"
-            },
-            "useCheckbox": {
-                "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-checkbox",
-                "defaultValue": "false"
-            },
-            "useAll": {
-                "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": "use-all",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "filteredOptions": {},
-            "searchText": {},
-            "isScrolled": {},
-            "isDropdownReady": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "optionClick",
-                "name": "sdOptionClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{\n  option: SelectOption;\n  index: number;\n  event: MouseEvent;\n }",
-                    "resolved": "{ option: SelectOption; index: number; event: MouseEvent; }",
-                    "references": {
-                        "SelectOption": {
-                            "location": "import",
-                            "path": "../sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption",
-                            "referenceLocation": "SelectOption"
-                        },
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "optionFiltered",
-                "name": "sdOptionFiltered",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "SelectOption[]",
-                    "resolved": "SelectOption[]",
-                    "references": {
-                        "SelectOption": {
-                            "location": "import",
-                            "path": "../sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption",
-                            "referenceLocation": "SelectOption"
-                        }
-                    }
-                }
-            }, {
-                "method": "scroll",
-                "name": "sdScroll",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "Event",
-                    "resolved": "Event",
-                    "references": {
-                        "Event": {
-                            "location": "import",
-                            "path": "@stencil/core",
-                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
-                            "referenceLocation": "Event"
-                        }
-                    }
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "filteredOptions",
-                "methodName": "filteredOptionsChanged"
-            }, {
-                "propName": "searchText",
-                "methodName": "searchTextChanged"
-            }, {
-                "propName": "itemIndex",
-                "methodName": "itemIndexChanged"
-            }];
-    }
-}

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css

@@ -1,36 +0,0 @@
-sd-select-option {
-  display: block;
-  height: fit-content;
-  line-height: 0;
-}
-sd-select-option .sd-select__option {
-  display: flex;
-  padding: 4px 12px;
-  font-size: 12px;
-  line-height: 20px;
-  cursor: pointer;
-}
-sd-select-option .sd-select__option__checkbox-wrapper {
-  display: flex;
-  width: 100%;
-  column-gap: 8px;
-  align-items: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-sd-select-option .sd-select__option--focused {
-  background-color: #E6F1FF;
-}
-sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox), sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox) {
-  color: #0075FF;
-  font-weight: 700;
-}
-sd-select-option .sd-select__option--disabled {
-  color: #AAAAAA;
-  cursor: not-allowed;
-}
-sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled) {
-  background-color: #0075FF;
-  color: white;
-}