@sellmate/design-system 1.29.0 → 1.32.0

package/dist/collection/components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.js

@@ -0,0 +1,266 @@
+import { h } from "@stencil/core";
+import { TIMEPICKER_SELECTOR, clampTimePart, formatTimeValue, parseTimeValue, } from "../sd-time-picker.config";
+export class SdTimePickerSelector {
+    /** 선택된 시간 (HH:mm) */
+    value = null;
+    /** 오전/오후 선택 표시 여부 */
+    useMeridiem = true;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 시간 변경 시 발생합니다. */
+    update;
+    valueChanged() {
+        this.syncFromValue();
+    }
+    editingPart = null;
+    inputDraft = {};
+    hour = 0;
+    minute = 0;
+    componentWillLoad() {
+        this.syncFromValue();
+    }
+    syncFromValue() {
+        const parsed = parseTimeValue(this.value);
+        this.hour = parsed.hour;
+        this.minute = parsed.minute;
+    }
+    get meridiem() {
+        return this.hour >= 12 ? 'PM' : 'AM';
+    }
+    get displayHour() {
+        if (!this.useMeridiem)
+            return this.hour;
+        const hour = this.hour % 12;
+        return hour === 0 ? 12 : hour;
+    }
+    emitNext(hour, minute) {
+        this.hour = clampTimePart(hour, 0, 23);
+        this.minute = clampTimePart(minute, 0, 59);
+        this.update.emit(formatTimeValue(this.hour, this.minute));
+    }
+    sanitizeInput(value) {
+        return value.replace(/\D/g, '').slice(0, 2);
+    }
+    setDraft(part, value) {
+        this.inputDraft = { ...this.inputDraft, [part]: value };
+    }
+    beginEdit(part, value) {
+        this.editingPart = part;
+        this.setDraft(part, String(value).padStart(2, '0'));
+    }
+    commitHourDraft(draft) {
+        const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
+        const nextHour = this.useMeridiem
+            ? this.meridiem === 'PM'
+                ? raw === 12
+                    ? 12
+                    : raw + 12
+                : raw === 12
+                    ? 0
+                    : raw
+            : raw;
+        this.emitNext(nextHour, this.minute);
+        return raw;
+    }
+    commitMinuteDraft(draft) {
+        const minute = clampTimePart(Number(draft), 0, 59);
+        this.emitNext(this.hour, minute);
+        return minute;
+    }
+    endEdit(part) {
+        const draft = this.inputDraft[part];
+        if (part === 'hour' && draft != null && draft !== '') {
+            this.commitHourDraft(draft);
+        }
+        if (part === 'minute' && draft != null && draft !== '') {
+            this.commitMinuteDraft(draft);
+        }
+        this.editingPart = null;
+        this.inputDraft = {};
+    }
+    setMeridiem(meridiem) {
+        if (meridiem === this.meridiem)
+            return;
+        if (meridiem === 'AM') {
+            this.emitNext(this.hour - 12, this.minute);
+            return;
+        }
+        this.emitNext(this.hour + 12, this.minute);
+    }
+    changeHour(delta) {
+        this.emitNext((this.hour + delta + 24) % 24, this.minute);
+    }
+    changeMinute(delta) {
+        const next = this.minute + delta;
+        if (next > 59) {
+            this.emitNext((this.hour + 1) % 24, next - 60);
+            return;
+        }
+        if (next < 0) {
+            this.emitNext((this.hour + 23) % 24, next + 60);
+            return;
+        }
+        this.emitNext(this.hour, next);
+    }
+    handleHourInput = (event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft('hour', draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const raw = this.commitHourDraft(draft);
+        const displayDraft = Number(draft) === raw ? draft : String(raw);
+        target.value = displayDraft;
+        this.setDraft('hour', displayDraft);
+    };
+    handleMinuteInput = (event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft('minute', draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const nextMinute = this.commitMinuteDraft(draft);
+        const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
+        target.value = displayDraft;
+        this.setDraft('minute', displayDraft);
+        this.emitNext(this.hour, nextMinute);
+    };
+    renderMeridiemButton(label, meridiem, position) {
+        const selected = this.meridiem === meridiem;
+        return (h("button", { type: "button", class: {
+                'sd-time-picker-selector__meridiem-button': true,
+                'sd-time-picker-selector__meridiem-button--selected': selected,
+                [`sd-time-picker-selector__meridiem-button--${position}`]: true,
+            }, onClick: () => this.setMeridiem(meridiem) }, label));
+    }
+    renderColumn(type) {
+        const isHour = type === 'hour';
+        const value = isHour ? this.displayHour : this.minute;
+        const displayValue = this.editingPart === type ? (this.inputDraft[type] ?? '') : String(value).padStart(2, '0');
+        return (h("div", { class: `sd-time-picker-selector__column sd-time-picker-selector__column--${type}` }, h("sd-ghost-button", { icon: "chevronUp", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 증가`, onSdClick: () => (isHour ? this.changeHour(1) : this.changeMinute(this.minuteStep)) }), h("input", { class: "sd-time-picker-selector__input", type: "text", inputmode: "numeric", value: displayValue, placeholder: "-", onFocus: () => this.beginEdit(type, value), onBlur: () => this.endEdit(type), onInput: isHour ? this.handleHourInput : this.handleMinuteInput, "aria-label": isHour ? '시' : '분' }), h("sd-ghost-button", { icon: "chevronDown", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 감소`, onSdClick: () => (isHour ? this.changeHour(-1) : this.changeMinute(-this.minuteStep)) })));
+    }
+    render() {
+        const cssVars = {
+            '--selector-bg': TIMEPICKER_SELECTOR.bg,
+            '--selector-radius': `${TIMEPICKER_SELECTOR.radius}px`,
+            '--selector-section-padding-x': `${TIMEPICKER_SELECTOR.section.paddingX}px`,
+            '--selector-section-padding-y': `${TIMEPICKER_SELECTOR.section.paddingY}px`,
+            '--selector-time-gap': `${TIMEPICKER_SELECTOR.time.gap}px`,
+            '--selector-time-column-gap': `${TIMEPICKER_SELECTOR.time.column.gap}px`,
+            '--selector-input-width': `${TIMEPICKER_SELECTOR.inputWidth}px`,
+            '--selector-colon-size': `${TIMEPICKER_SELECTOR.colonSize}px`,
+        };
+        return (h("div", { key: '9bf6683c63cf784bba552872b00b53a19e7bd77d', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (h("div", { key: '096e30217c77ab8faf305965528f97026eefee85', class: "sd-time-picker-selector__meridiem" }, h("div", { key: '4931f8e17bfb1cb356e1d713dfdf1635ced0429a', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && h("div", { key: 'a69fcd7379092069faaa556e7dc6649c46072314', class: "sd-time-picker-selector__divider" }), h("div", { key: '620e20c888b254533c34d626eac5012456b76052', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), h("span", { key: '483fc0afbbaf8faae65012bcead48a04bce6b446', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
+    }
+    static get is() { return "sd-time-picker-selector"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-time-picker-selector.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-time-picker-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC120\uD0DD\uB41C \uC2DC\uAC04 (HH:mm)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "useMeridiem": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC624\uC804/\uC624\uD6C4 \uC120\uD0DD \uD45C\uC2DC \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-meridiem",
+                "defaultValue": "true"
+            },
+            "minuteStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uBD84 \uC99D\uAC10 \uB2E8\uC704"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-step",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editingPart": {},
+            "inputDraft": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "sdUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2DC\uAC04 \uBCC0\uACBD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

package/dist/collection/components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.css

@@ -0,0 +1,38 @@
+sd-time-picker-trigger {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+sd-time-picker-trigger .sd-time-picker-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--trigger-gap);
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--trigger-padding-x);
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--trigger-radius);
+}
+sd-time-picker-trigger .sd-time-picker-trigger--disabled {
+  cursor: not-allowed;
+}
+sd-time-picker-trigger .sd-time-picker-trigger__icon, sd-time-picker-trigger .sd-time-picker-trigger__clear {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+sd-time-picker-trigger .sd-time-picker-trigger__text {
+  flex: 1;
+  min-width: var(--trigger-text-min-width, 80px);
+  font-size: var(--trigger-font-size);
+  line-height: var(--trigger-line-height);
+  font-weight: var(--trigger-font-weight);
+  color: var(--trigger-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}

package/dist/collection/components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.js

@@ -0,0 +1,216 @@
+import { h } from "@stencil/core";
+import { TIMEPICKER_SIZE_MAP, TIMEPICKER_COLORS, } from "../sd-time-picker.config";
+export class SdTimePickerTrigger {
+    /** 표시할 시간 텍스트 */
+    displayText = '';
+    /** 입력 힌트 텍스트 */
+    placeholder = '00:00';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 지우기 버튼 표시 여부 */
+    clearable = false;
+    /** 트리거 크기 */
+    size = 'sm';
+    /** 트리거 클릭 시 발생합니다. */
+    triggerClick;
+    /** 지우기 버튼 클릭 시 발생합니다. */
+    clear;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerClick.emit();
+    };
+    handleClear = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.clear.emit();
+    };
+    render() {
+        const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
+        const hasValue = this.displayText !== '';
+        const textMinWidth = this.size === 'md' ? 96 : 80;
+        const cssVars = {
+            '--trigger-padding-x': `${sizeTokens.paddingX}px`,
+            '--trigger-gap': `${sizeTokens.gap}px`,
+            '--trigger-icon-size': `${sizeTokens.iconSize}px`,
+            '--trigger-font-size': `${sizeTokens.fontSize}px`,
+            '--trigger-line-height': `${sizeTokens.lineHeight}px`,
+            '--trigger-font-weight': sizeTokens.fontWeight,
+            '--trigger-radius': `${sizeTokens.radius}px`,
+            '--trigger-text-min-width': `${textMinWidth}px`,
+            '--trigger-text-color': this.disabled
+                ? TIMEPICKER_COLORS.text.disabled
+                : hasValue
+                    ? TIMEPICKER_COLORS.text.default
+                    : TIMEPICKER_COLORS.text.hint,
+            '--trigger-icon-color': this.disabled
+                ? TIMEPICKER_COLORS.icon.disabled
+                : TIMEPICKER_COLORS.icon.default,
+        };
+        return (h("div", { key: '4cd9086e21a7e7fedb6601c163dcf9c5c8f374d1', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+                'sd-time-picker-trigger': true,
+                'sd-time-picker-trigger--disabled': this.disabled,
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("sd-icon", { key: 'c38c13b3dc8c072430bb5b40765b96582696e04c', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), h("span", { key: '245e636a0645d97c825a44607516d8821cc533f9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (h("sd-ghost-button", { key: 'fa740470bf8b798fcf0863ba9e7822e496e8e841', class: "sd-time-picker-trigger__clear", icon: "close", size: "xs", ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30", onSdClick: this.handleClear }))));
+    }
+    static get is() { return "sd-time-picker-trigger"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-time-picker-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-time-picker-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "displayText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD45C\uC2DC\uD560 \uC2DC\uAC04 \uD14D\uC2A4\uD2B8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-text",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC785\uB825 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'00:00'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC9C0\uC6B0\uAE30 \uBC84\uD2BC \uD45C\uC2DC \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "TimePickerSize": {
+                            "location": "import",
+                            "path": "../sd-time-picker.config",
+                            "id": "src/components/sd-time-picker/sd-time-picker.config.ts::TimePickerSize",
+                            "referenceLocation": "TimePickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD2B8\uB9AC\uAC70 \uD06C\uAE30"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "triggerClick",
+                "name": "sdTriggerClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD2B8\uB9AC\uAC70 \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "clear",
+                "name": "sdClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC9C0\uC6B0\uAE30 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/sd-time-picker/sd-time-picker.config.js

@@ -0,0 +1,78 @@
+import timepickerTokens from "../../tokens/generated/component.timepicker.json";
+import fieldTokens from "../../tokens/generated/component.field.json";
+const sm = timepickerTokens.timepicker.sm;
+const md = timepickerTokens.timepicker.md;
+export const TIMEPICKER_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        iconSize: sm.icon,
+        radius: sm.radius,
+        // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
+        fontSize: '12',
+        lineHeight: '20',
+        fontWeight: '400',
+        minWidth: '128',
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        iconSize: md.icon,
+        radius: md.radius,
+        // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
+        fontSize: '14',
+        lineHeight: '24',
+        fontWeight: '400',
+        minWidth: '160',
+    },
+};
+export const TIMEPICKER_COLORS = {
+    border: timepickerTokens.timepicker.border,
+    bg: timepickerTokens.timepicker.bg,
+    icon: timepickerTokens.timepicker.icon,
+    text: {
+        ...timepickerTokens.timepicker.text,
+        hint: fieldTokens.field.hint.color,
+    },
+};
+export const TIMEPICKER_SELECTOR = {
+    bg: timepickerTokens.timepicker.selector.bg,
+    radius: timepickerTokens.timepicker.selector.radius,
+    section: timepickerTokens.timepicker.selector.section,
+    time: timepickerTokens.timepicker.selector.time,
+    inputWidth: timepickerTokens.timepicker.selector.input.width,
+    colonSize: timepickerTokens.timepicker.selector.colon.size,
+    range: timepickerTokens.timepicker.selector.range,
+};
+export function clampTimePart(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(Math.max(value, min), max);
+}
+export function padTimePart(value) {
+    return String(value).padStart(2, '0');
+}
+export function parseTimeValue(value) {
+    const match = /^(\d{1,2}):(\d{1,2})$/.exec(value ?? '');
+    if (!match)
+        return { hour: 0, minute: 0 };
+    return {
+        hour: clampTimePart(Number(match[1]), 0, 23),
+        minute: clampTimePart(Number(match[2]), 0, 59),
+    };
+}
+export function formatTimeValue(hour, minute) {
+    return `${padTimePart(clampTimePart(hour, 0, 23))}:${padTimePart(clampTimePart(minute, 0, 59))}`;
+}
+export function formatTimeDisplay(value, type) {
+    if (value == null || value === '')
+        return '';
+    const { hour, minute } = parseTimeValue(value);
+    if (type === 'default')
+        return formatTimeValue(hour, minute);
+    const meridiem = hour >= 12 ? '오후' : '오전';
+    const displayHour = hour % 12 === 0 ? 12 : hour % 12;
+    return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
+}

package/dist/collection/components/sd-time-picker/sd-time-picker.css

@@ -0,0 +1,12 @@
+sd-time-picker {
+  display: inline-flex;
+}
+sd-time-picker sd-portal {
+  display: none;
+}
+sd-time-picker .sd-time-picker {
+  position: relative;
+  min-width: var(--sd-time-picker-min-width);
+  width: 100%;
+  height: 100%;
+}