@sellmate/design-system 1.0.61 → 1.0.63

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

@@ -0,0 +1,177 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
+import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+
+const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select .sd-select .sd-select__trigger{cursor:not-allowed}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
+
+const SdSelect = class extends BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
+    }
+    get el() { return getElement(this); }
+    // props
+    value = null;
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '선택지가 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    autoFocus = false;
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    // props - label
+    label = '';
+    addonLabel = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    rules = [];
+    error = false;
+    // props - custom slots
+    optionRenderer;
+    // states
+    isOpen = false;
+    itemIndex = -1;
+    isScrolled = false;
+    // events
+    update;
+    dropDownShow;
+    selectRef;
+    triggerRef;
+    formField;
+    filteredOptions = [];
+    dropDownWidth = '200px';
+    name = nanoid();
+    async sdOpen() {
+        this.isOpen = true;
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    async isOpenChanged() {
+        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
+        this.onDropdownToggle(this.isOpen);
+        this.dropDownShow?.emit({ isOpen: this.isOpen });
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
+        }
+    }
+    componentWillLoad() {
+        this.filteredOptions = this.options;
+        this.dropDownWidth = this.width;
+        this.initializeEvent();
+    }
+    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)) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentKeydown(keyboardEvent) {
+        keyboardEvent.stopPropagation();
+        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKey.includes(keyboardEvent.key))
+            return;
+        keyboardEvent.preventDefault();
+        switch (keyboardEvent.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
+                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
+                this.itemIndex = nextIndex;
+                break;
+            case 'Enter':
+                const selectedOption = this.filteredOptions[this.itemIndex];
+                if (selectedOption && !selectedOption.disabled) {
+                    this.value = selectedOption.value;
+                    this.isOpen = false;
+                }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    getSelectedOption() {
+        return this.options.find(option => option.value === this.value);
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    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();
+        if (!option.disabled) {
+            this.value = option.value;
+            this.isOpen = false;
+            const selectedOption = this.getSelectedOption();
+            this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
+        }
+    };
+    render() {
+        return (h("sd-field", { key: '33f8a4e75ab20389213be5643f479b806e8e78c3', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '148f21e1a19cf4f4b9e61b4192d631d85dbc57a4', class: {
+                'sd-select': true,
+                'sd-select--disabled': this.disabled,
+                '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, 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() {
+        if (this.isOpen === false)
+            return null;
+        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 watchers() { return {
+        "isOpen": [{
+                "isOpenChanged": 0
+            }]
+    }; }
+};
+SdSelect.style = sdSelectCss();
+
+export { SdSelect as sd_select };

package/dist/esm/sd-switch.entry.js

@@ -0,0 +1,108 @@
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+
+var switchTokens = {
+	"switch": {
+	width: "32",
+	height: "20",
+	paddingXY: "2",
+	radius: "9999",
+	knob: {
+		size: "16",
+		bg: "#FFFFFF"
+	},
+	bg: {
+		on: "#0075FF",
+		off: "#CCCCCC",
+		disabled: {
+			on: "#BBDAFF",
+			off: "#E1E1E1"
+		}
+	},
+	label: {
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "500",
+			fontSize: "12",
+			textDecoration: "none",
+			lineHeight: "20"
+		}
+	},
+	gap: "6"
+}
+};
+
+const SWITCH_LAYOUT = {
+    width: Number(switchTokens.switch.width),
+    height: Number(switchTokens.switch.height),
+    paddingXY: Number(switchTokens.switch.paddingXY),
+    radius: Number(switchTokens.switch.radius),
+    knobSize: Number(switchTokens.switch.knob.size),
+    gap: Number(switchTokens.switch.gap),
+};
+const SWITCH_COLORS = {
+    knobBg: switchTokens.switch.knob.bg,
+    bgOn: switchTokens.switch.bg.on,
+    bgOff: switchTokens.switch.bg.off,
+    bgDisabledOn: switchTokens.switch.bg.disabled.on,
+    bgDisabledOff: switchTokens.switch.bg.disabled.off,
+};
+const SWITCH_TYPOGRAPHY = {
+    fontFamily: switchTokens.switch.label.typography.fontFamily,
+    fontWeight: switchTokens.switch.label.typography.fontWeight,
+    fontSize: Number(switchTokens.switch.label.typography.fontSize),
+    lineHeight: Number(switchTokens.switch.label.typography.lineHeight),
+    textDecoration: switchTokens.switch.label.typography.textDecoration,
+};
+
+const sdSwitchCss = () => `sd-switch{display:inline-block;line-height:0}sd-switch .sd-switch{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-switch-gap)}sd-switch .sd-switch>input{display:none}sd-switch .sd-switch__track{position:relative;width:var(--sd-switch-track-width);height:var(--sd-switch-track-height);border-radius:var(--sd-switch-track-radius);background:var(--sd-switch-bg-off);transition:background-color 0.2s ease}sd-switch .sd-switch__knob{position:absolute;top:var(--sd-switch-track-padding);left:var(--sd-switch-track-padding);width:var(--sd-switch-knob-size);height:var(--sd-switch-knob-size);border-radius:50%;background:var(--sd-switch-knob-bg);box-shadow:0 2px 4px rgba(0, 0, 0, 0.16);transition:transform 0.2s ease}sd-switch .sd-switch__label{font-family:var(--sd-switch-font-family);font-weight:var(--sd-switch-font-weight);font-size:var(--sd-switch-font-size);line-height:var(--sd-switch-line-height);text-decoration:var(--sd-switch-text-decoration)}sd-switch .sd-switch--on .sd-switch__track{background:var(--sd-switch-bg-on)}sd-switch .sd-switch--on .sd-switch__knob{transform:translateX(var(--sd-switch-knob-offset))}sd-switch .sd-switch--disabled{cursor:not-allowed}sd-switch .sd-switch--disabled.sd-switch--on .sd-switch__track{background:var(--sd-switch-bg-disabled-on)}sd-switch .sd-switch--disabled.sd-switch--off .sd-switch__track{background:var(--sd-switch-bg-disabled-off)}`;
+
+const SdSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "sdUpdate", 7);
+    }
+    value = false;
+    label = '';
+    disabled = false;
+    change;
+    get switchClasses() {
+        const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
+        if (this.disabled) {
+            classes.push('sd-switch--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        const newValue = !this.value;
+        this.value = newValue;
+        this.change.emit(newValue);
+    };
+    render() {
+        const knobOffset = SWITCH_LAYOUT.width - SWITCH_LAYOUT.knobSize - SWITCH_LAYOUT.paddingXY * 2;
+        const cssVars = {
+            '--sd-switch-track-width': `${SWITCH_LAYOUT.width}px`,
+            '--sd-switch-track-height': `${SWITCH_LAYOUT.height}px`,
+            '--sd-switch-track-padding': `${SWITCH_LAYOUT.paddingXY}px`,
+            '--sd-switch-track-radius': `${SWITCH_LAYOUT.radius}px`,
+            '--sd-switch-knob-size': `${SWITCH_LAYOUT.knobSize}px`,
+            '--sd-switch-knob-offset': `${knobOffset}px`,
+            '--sd-switch-knob-bg': SWITCH_COLORS.knobBg,
+            '--sd-switch-bg-on': SWITCH_COLORS.bgOn,
+            '--sd-switch-bg-off': SWITCH_COLORS.bgOff,
+            '--sd-switch-bg-disabled-on': SWITCH_COLORS.bgDisabledOn,
+            '--sd-switch-bg-disabled-off': SWITCH_COLORS.bgDisabledOff,
+            '--sd-switch-gap': `${SWITCH_LAYOUT.gap}px`,
+            '--sd-switch-font-family': SWITCH_TYPOGRAPHY.fontFamily,
+            '--sd-switch-font-weight': SWITCH_TYPOGRAPHY.fontWeight,
+            '--sd-switch-font-size': `${SWITCH_TYPOGRAPHY.fontSize}px`,
+            '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
+            '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
+        };
+        return (h("label", { key: '44ff8ae899d3f1d7f20df43cab5ceb0987d0dab3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'c7bd9e8ab470c575a52c33b482f83e0113917fda', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '604c57baaea22b389e0d19b2c8a06421ab44063e', class: "sd-switch__track" }, h("div", { key: 'a9329987d6c2295a90fe6b4904eeea98b075b30c', class: "sd-switch__knob" })), this.label && h("span", { key: '77cab17a2dbab5245f26c218a8b60f956770e316', class: "sd-switch__label" }, this.label)));
+    }
+};
+SdSwitch.style = sdSwitchCss();
+
+export { SdSwitch as sd_switch };