@sellmate/design-system 0.0.56 → 1.0.0

package/dist/esm/sd-select-dropdown_3.entry.js

@@ -0,0 +1,262 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-C3qNZ7Qh.js';
+
+const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
+
+const SdSelectDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "sdOptionClick");
+        this.optionFiltered = createEvent(this, "sdOptionFiltered");
+        this.scroll = createEvent(this, "sdScroll");
+    }
+    itemIndex;
+    value = null;
+    options;
+    width;
+    dropdownHeight;
+    searchable;
+    optionPlaceholder;
+    useCheckbox = false;
+    useAll = false;
+    filteredOptions = this.options;
+    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(Host, { key: 'de06f67bf93dce6db12fee6bce3c6b11b7ee375f', style: this.dropdownSize }, h("div", { key: '42510dd6a21f1aa224f5141555c02729d09a6baf', class: {
+                'sd-select-dropdown': true,
+                'sd-select-dropdown--ready': this.isDropdownReady,
+            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '2177a7ad0dc3ea5ded63103a55e03b9b0d4d3913', 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 watchers() { return {
+        "filteredOptions": ["filteredOptionsChanged"],
+        "searchText": ["searchTextChanged"],
+        "itemIndex": ["itemIndexChanged"]
+    }; }
+};
+SdSelectDropdown.style = sdSelectDropdownCss();
+
+const sdSelectOptionCss = () => `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}`;
+
+const SdSelectOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "optionClick");
+    }
+    get el() { return getElement(this); }
+    option;
+    index;
+    isSelected = false;
+    isFocused = false;
+    optionStyle;
+    disabled = false;
+    useCheckbox = false;
+    isHovered = false;
+    async sdIsDisabled() {
+        return !!this.option.disabled;
+    }
+    optionClick;
+    handleClick = (event) => {
+        event.stopPropagation();
+        if (!this.option.disabled && !this.disabled) {
+            this.optionClick.emit({
+                option: this.option,
+                index: this.index,
+                event,
+            });
+        }
+    };
+    render() {
+        return (h(Host, { key: '33542be792e3345ee693a6064f9398ecd1fceda1' }, h("div", { key: '408d402f5e4a845ebb896f78a557ac93ca414eaa', class: {
+                'sd-select__option': true,
+                'sd-select__option--selected': this.isSelected,
+                'sd-select__option--disabled': !!this.option.disabled,
+                'sd-select__option--focused': this.isFocused,
+                'sd-select__option--use-checkbox': this.useCheckbox,
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (h("div", { class: "sd-select__option__checkbox-wrapper" }, h("sd-checkbox", { value: this.isSelected, disabled: this.option.disabled,
+            //   checkboxStyle={
+            //    !this.isSelected
+            //     ? { borderColor: '#888' }
+            //     : this.isHovered
+            //       ? { borderColor: 'white' }
+            //       : { borderColor: '#0075ff' }
+            //   }
+            onClick: e => {
+                e.preventDefault();
+                this.handleClick(e);
+            } }), h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label))));
+    }
+};
+SdSelectOption.style = sdSelectOptionCss();
+
+const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
+
+const SdSelectSearchInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchInput = createEvent(this, "sdSearchInput");
+        this.searchFocus = createEvent(this, "sdSearchFocus");
+    }
+    isScrolled = false;
+    searchText = '';
+    searchInput;
+    searchFocus;
+    searchRef;
+    async sdGetNativeElement() {
+        if (this.searchRef) {
+            return this.searchRef.sdGetNativeElement();
+        }
+        return null;
+    }
+    async sdSearchInputFocus() {
+        const input = await this.sdGetNativeElement();
+        input?.focus({ preventScroll: true });
+    }
+    render() {
+        return (h("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+                'sd-select-search-input': true,
+                'sd-select-search-input--scrolled': !!this.isScrolled,
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+                this.searchInput.emit(String(event?.detail));
+            }, onSdFocus: () => {
+                this.searchFocus.emit();
+            }, onKeyDown: event => {
+                if (event.code === 'Enter')
+                    event.stopPropagation();
+            } }, h("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+    }
+};
+SdSelectSearchInput.style = sdSelectSearchInputCss();
+
+export { SdSelectDropdown as sd_select_dropdown, SdSelectOption as sd_select_option, SdSelectSearchInput as sd_select_search_input };
+//# sourceMappingURL=sd-select-dropdown.sd-select-option.sd-select-search-input.entry.js.map