@sellmate/design-system 1.0.60 → 1.0.61

package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js

@@ -0,0 +1,246 @@
+import { h } from "@stencil/core";
+import { today } from "../../../utils/date";
+import { useDatePicker } from "../../../modules/useDatePicker";
+import { CALENDAR_LAYOUT, WEEK_LABELS } from "../sd-date-picker.config";
+export class SdDatePickerCalendar {
+    value = null;
+    selectable;
+    currentYear;
+    currentMonth;
+    select;
+    viewChange;
+    dateUtil = useDatePicker();
+    componentWillLoad() {
+        this.syncViewFromValue();
+    }
+    handleValueChange() {
+        this.syncViewFromValue();
+    }
+    syncViewFromValue() {
+        const base = this.value || today;
+        const [year, month] = base.split('-').map(Number);
+        this.currentYear = year;
+        this.currentMonth = month;
+    }
+    formatDate(year, month, day) {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    get cells() {
+        const year = this.currentYear;
+        const month = this.currentMonth;
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const daysInCurrent = new Date(year, month, 0).getDate();
+        const prevMonth = month === 1 ? 12 : month - 1;
+        const prevYear = month === 1 ? year - 1 : year;
+        const daysInPrev = new Date(prevYear, prevMonth, 0).getDate();
+        const nextMonth = month === 12 ? 1 : month + 1;
+        const nextYear = month === 12 ? year + 1 : year;
+        const cells = [];
+        for (let i = firstDayIndex - 1; i >= 0; i--) {
+            const day = daysInPrev - i;
+            cells.push({
+                date: this.formatDate(prevYear, prevMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
+        }
+        for (let day = 1; day <= daysInCurrent; day++) {
+            cells.push({
+                date: this.formatDate(year, month, day),
+                day,
+                inCurrentMonth: true,
+            });
+        }
+        const remaining = (7 - (cells.length % 7)) % 7;
+        for (let day = 1; day <= remaining; day++) {
+            cells.push({
+                date: this.formatDate(nextYear, nextMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
+        }
+        return cells;
+    }
+    emitViewChange() {
+        this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
+    }
+    goPrevYear = (event) => {
+        event.stopPropagation();
+        this.currentYear -= 1;
+        this.emitViewChange();
+    };
+    goNextYear = (event) => {
+        event.stopPropagation();
+        this.currentYear += 1;
+        this.emitViewChange();
+    };
+    goPrevMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'prev');
+        this.currentYear = newYear;
+        this.currentMonth = newMonth;
+        this.emitViewChange();
+    };
+    goNextMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'next');
+        this.currentYear = newYear;
+        this.currentMonth = newMonth;
+        this.emitViewChange();
+    };
+    isDisabled(date) {
+        if (!this.selectable)
+            return false;
+        const [start, end] = this.selectable;
+        if (start && date < start)
+            return true;
+        if (end && date > end)
+            return true;
+        return false;
+    }
+    handleDayClick(cell) {
+        if (this.isDisabled(cell.date))
+            return;
+        this.select.emit(cell.date);
+    }
+    render() {
+        const cssVars = {
+            '--calendar-bg': CALENDAR_LAYOUT.bg,
+            '--calendar-padding': `${CALENDAR_LAYOUT.paddingXY}px`,
+            '--calendar-gap': `${CALENDAR_LAYOUT.gap}px`,
+            '--calendar-radius': `${CALENDAR_LAYOUT.radius}px`,
+            '--calendar-header-gap': `${CALENDAR_LAYOUT.header.gap}px`,
+            '--calendar-header-divider': CALENDAR_LAYOUT.header.divider,
+            '--calendar-header-font-size': `${CALENDAR_LAYOUT.header.fontSize}px`,
+            '--calendar-header-line-height': `${CALENDAR_LAYOUT.header.lineHeight}px`,
+            '--calendar-header-font-weight': CALENDAR_LAYOUT.header.fontWeight,
+            '--calendar-week-font-size': `${CALENDAR_LAYOUT.week.fontSize}px`,
+            '--calendar-week-line-height': `${CALENDAR_LAYOUT.week.lineHeight}px`,
+            '--calendar-week-font-weight': CALENDAR_LAYOUT.week.fontWeight,
+            '--calendar-week-color': CALENDAR_LAYOUT.week.color,
+            '--calendar-grid-row-gap': `${CALENDAR_LAYOUT.grid.rowGap}px`,
+            '--calendar-day-size': `${CALENDAR_LAYOUT.day.size}px`,
+            '--calendar-day-circle-size': `${CALENDAR_LAYOUT.day.circleSize}px`,
+            '--calendar-day-circle-radius': `${CALENDAR_LAYOUT.day.circleRadius}px`,
+            '--calendar-day-text': CALENDAR_LAYOUT.day.defaultText,
+            '--calendar-day-hover-text': CALENDAR_LAYOUT.day.hoverText,
+            '--calendar-day-hover-border': CALENDAR_LAYOUT.day.hoverBorder,
+            '--calendar-day-select-bg': CALENDAR_LAYOUT.day.selectBg,
+            '--calendar-day-select-text': CALENDAR_LAYOUT.day.selectText,
+            '--calendar-day-disabled-text': CALENDAR_LAYOUT.day.disabledText,
+            '--calendar-day-font-size': `${CALENDAR_LAYOUT.day.fontSize}px`,
+            '--calendar-day-line-height': `${CALENDAR_LAYOUT.day.lineHeight}px`,
+            '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
+            '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
+        };
+        return (h("div", { key: 'df2517386d844ade51de158c511a7f2ec77714f9', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '16185a3b082fdf59f7ea325a96cf9d7f67622278', class: "sd-date-picker-calendar__header" }, h("div", { key: 'bf6839f659dd01238310721284fae78f2189de8a', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '474514e32f4ce65b07e704f246a60104f0adec0e', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '51c0f67e762a2a9efd166eaeb066d28e6b412f7d', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '9fbb3f071917370764886ab63f2f39d90ff7224d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'b9afde6cc30bf791d487d16b67a50d4a270601f6', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '3d9c647a135376c524036eec85dc80c143225e2d', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '233351d0151458b088264872fca2bb75fa3d3d4f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '26913dd888a4a3589edc3ae63345c2e02e418aa5', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '7700394ff1c9f19a5559e829fb016f2d2a97b242', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '7d2b2577092fb2f817bbd6fcb711425992d4ba34', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: 'c6784bcbf7c939eb1848cfa20f87f17534ade21e', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+            const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
+            const isToday = cell.inCurrentMonth && today === cell.date;
+            const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
+            return (h("button", { type: "button", key: cell.date, class: {
+                    'sd-date-picker-calendar__day': true,
+                    'sd-date-picker-calendar__day--empty': !cell.inCurrentMonth,
+                    'sd-date-picker-calendar__day--today': isToday,
+                    'sd-date-picker-calendar__day--selected': isSelected,
+                    'sd-date-picker-calendar__day--disabled': isDisabled,
+                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, h("span", { class: "sd-date-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
+        }))));
+    }
+    static get is() { return "sd-date-picker-calendar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-date-picker-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-date-picker-calendar.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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "selectable": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[string, string]",
+                    "resolved": "[string, string] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentYear": {},
+            "currentMonth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "select",
+                "name": "sdSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "viewChange",
+                "name": "sdViewChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ year: number; month: number }",
+                    "resolved": "{ year: number; month: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}

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

@@ -0,0 +1,38 @@
+sd-date-picker-trigger {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+sd-date-picker-trigger .sd-date-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-date-picker-trigger .sd-date-picker-trigger--disabled {
+  cursor: not-allowed;
+}
+sd-date-picker-trigger .sd-date-picker-trigger__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+sd-date-picker-trigger .sd-date-picker-trigger__text {
+  flex: 1;
+  min-width: 0;
+  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-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js

@@ -0,0 +1,159 @@
+import { h } from "@stencil/core";
+import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, } from "../sd-date-picker.config";
+export class SdDatePickerTrigger {
+    displayText = '';
+    placeholder = 'YYYY-MM-DD';
+    disabled = false;
+    size = 'md';
+    triggerClick;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerClick.emit();
+    };
+    render() {
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.md;
+        const hasValue = !!this.displayText;
+        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-color': this.disabled
+                ? DATEPICKER_COLORS.text.disabled
+                : hasValue
+                    ? DATEPICKER_COLORS.text.default
+                    : DATEPICKER_COLORS.text.hint,
+            '--trigger-icon-color': this.disabled
+                ? DATEPICKER_COLORS.icon.disabled
+                : DATEPICKER_COLORS.icon.default,
+        };
+        return (h("div", { key: 'e39df39c0b865be9f08e60787ea122dccaa7bff4', class: {
+                'sd-date-picker-trigger': true,
+                'sd-date-picker-trigger--disabled': this.disabled,
+            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: 'a04c576196fb9695a044485f30d459fd6e945b33', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '94b4da3bc41f31519afbb49324548209582be850', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+    }
+    static get is() { return "sd-date-picker-trigger"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-date-picker-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-date-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": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'YYYY-MM-DD'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "DatePickerSize": {
+                            "location": "import",
+                            "path": "../sd-date-picker.config",
+                            "id": "src/components/sd-date-picker/sd-date-picker.config.ts::DatePickerSize",
+                            "referenceLocation": "DatePickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "triggerClick",
+                "name": "sdTriggerClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,69 @@
+import datepickerTokens from "../../tokens/generated/component.datepicker.json";
+const sm = datepickerTokens.datepicker.sm;
+const md = datepickerTokens.datepicker.md;
+export const DATEPICKER_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        iconSize: sm.icon,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        iconSize: md.icon,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+export const DATEPICKER_COLORS = {
+    border: datepickerTokens.datepicker.border,
+    bg: datepickerTokens.datepicker.bg,
+    icon: datepickerTokens.datepicker.icon,
+    text: datepickerTokens.datepicker.text,
+};
+export const CALENDAR_LAYOUT = {
+    bg: datepickerTokens.datepicker.calendar.bg,
+    paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
+    gap: datepickerTokens.datepicker.calendar.gap,
+    radius: datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: datepickerTokens.datepicker.calendar.header.gap,
+        divider: datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: datepickerTokens.datepicker.calendar.day.size,
+        circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+    },
+};
+export const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];

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

@@ -1,16 +1,11 @@
-.sd-date-picker {
-  width: 100%;
-  display: inline-block;
-}
-.sd-date-picker .sd-date-picker--disabled .date-icon {
-  cursor: not-allowed !important;
-  color: #888888 !important;
+sd-date-picker {
+  display: inline-flex;
 }
-.sd-date-picker .sd-date-picker__input {
-  text-align: center !important;
+sd-date-picker sd-portal {
+  display: none;
 }
-
-.sd-date-picker__menu {
-  border-radius: 8px;
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
+sd-date-picker .sd-date-picker {
+  position: relative;
+  width: 100%;
+  height: 100%;
 }