@sellmate/design-system 1.0.60 → 1.0.61

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

@@ -0,0 +1,361 @@
+import { h, Fragment } from "@stencil/core";
+import { today, addDays } from "../../../utils/date";
+import { useDatePicker } from "../../../modules/useDatePicker";
+import { CALENDAR_LAYOUT, RANGE_LAYOUT, WEEK_LABELS } from "../sd-date-range-picker.config";
+export class SdDateRangePickerCalendar {
+    value = null;
+    selectable;
+    maxRange;
+    currentYear;
+    currentMonth;
+    pendingStart = '';
+    hoverDate = '';
+    displayValue = null;
+    select;
+    viewChange;
+    dateUtil = useDatePicker();
+    componentWillLoad() {
+        this.syncFromValue();
+    }
+    handleValueChange() {
+        this.syncFromValue();
+    }
+    syncFromValue() {
+        const base = this.value?.[0] || today;
+        const [year, month] = base.split('-').map(Number);
+        this.currentYear = year;
+        this.currentMonth = month;
+        this.pendingStart = '';
+        this.hoverDate = '';
+        this.displayValue = this.value ? [this.value[0], this.value[1]] : null;
+    }
+    get rightYear() {
+        return this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear;
+    }
+    get rightMonth() {
+        return this.currentMonth === 12 ? 1 : this.currentMonth + 1;
+    }
+    formatDate(year, month, day) {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    buildCells(year, month) {
+        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();
+    };
+    goToday = (event) => {
+        event.stopPropagation();
+        const [year, month] = today.split('-').map(Number);
+        if (this.currentYear === year && this.currentMonth === month)
+            return;
+        this.currentYear = year;
+        this.currentMonth = month;
+        this.emitViewChange();
+    };
+    isDisabled(date) {
+        if (this.selectable) {
+            const [start, end] = this.selectable;
+            if (start && date < start)
+                return true;
+            if (end && date > end)
+                return true;
+        }
+        if (this.maxRange && this.pendingStart) {
+            const min = addDays(this.pendingStart, -this.maxRange);
+            const max = addDays(this.pendingStart, this.maxRange);
+            if (date < min || date > max)
+                return true;
+        }
+        return false;
+    }
+    handleDayClick(cell) {
+        if (!cell.inCurrentMonth)
+            return;
+        if (this.isDisabled(cell.date))
+            return;
+        const hasCompleteRange = !!this.displayValue && !!this.displayValue[0] && !!this.displayValue[1];
+        if (!this.pendingStart || hasCompleteRange || cell.date < this.pendingStart) {
+            this.pendingStart = cell.date;
+            this.displayValue = null;
+            this.hoverDate = '';
+            return;
+        }
+        const newRange = [this.pendingStart, cell.date];
+        this.pendingStart = '';
+        this.hoverDate = '';
+        this.displayValue = newRange;
+        this.select.emit(newRange);
+    }
+    handleDayHover(cell) {
+        if (!cell.inCurrentMonth)
+            return;
+        if (this.pendingStart) {
+            this.hoverDate = cell.date;
+        }
+    }
+    getRangeState(date, inCurrentMonth) {
+        if (!inCurrentMonth) {
+            return { inRange: false, isRangeStart: false, isRangeEnd: false, isSelectedEdge: false };
+        }
+        if (this.pendingStart) {
+            const isStart = date === this.pendingStart;
+            const previewEnd = this.hoverDate && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
+            const inPreview = !!previewEnd && date > this.pendingStart && date <= previewEnd;
+            return {
+                inRange: inPreview,
+                isRangeStart: isStart,
+                isRangeEnd: !!previewEnd && date === previewEnd,
+                isSelectedEdge: isStart,
+            };
+        }
+        if (this.displayValue && this.displayValue[0] && this.displayValue[1]) {
+            const [start, end] = this.displayValue;
+            const isStart = date === start;
+            const isEnd = date === end;
+            return {
+                inRange: date > start && date < end,
+                isRangeStart: isStart,
+                isRangeEnd: isEnd,
+                isSelectedEdge: isStart || isEnd,
+            };
+        }
+        return { inRange: false, isRangeStart: false, isRangeEnd: false, isSelectedEdge: false };
+    }
+    renderHeader(year, month, isLeft) {
+        const monthLabel = `${year}.${String(month).padStart(2, '0')}`;
+        return (h("div", { class: "sd-date-range-picker-calendar__header" }, h("div", { class: "sd-date-range-picker-calendar__nav-group sd-date-range-picker-calendar__nav-group-month" }, h("sd-ghost-button", { class: {
+                'sd-date-range-picker-calendar__nav-placeholder': !isLeft,
+            }, ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { class: "sd-date-range-picker-calendar__label sd-date-range-picker-calendar__label-month" }, monthLabel), h("sd-ghost-button", { class: {
+                'sd-date-range-picker-calendar__nav-placeholder': isLeft,
+            }, ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))));
+    }
+    renderYearNav() {
+        return (h("div", { class: "sd-date-range-picker-calendar__top-bar" }, h("div", { class: "sd-date-range-picker-calendar__year-nav" }, h("sd-ghost-button", { ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { class: "sd-date-range-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("button", { type: "button", class: "sd-date-range-picker-calendar__today-button", onClick: this.goToday }, "\uC624\uB298")));
+    }
+    renderPanel(year, month, isLeft) {
+        const cells = this.buildCells(year, month);
+        return (h("div", { class: "sd-date-range-picker-calendar__panel" }, this.renderHeader(year, month, isLeft), h("div", { class: "sd-date-range-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-range-picker-calendar__week-cell" }, label)))), h("div", { class: "sd-date-range-picker-calendar__grid" }, cells.map(cell => {
+            const { inRange, isRangeStart, isRangeEnd, isSelectedEdge } = this.getRangeState(cell.date, cell.inCurrentMonth);
+            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-range-picker-calendar__day': true,
+                    'sd-date-range-picker-calendar__day--empty': !cell.inCurrentMonth,
+                    'sd-date-range-picker-calendar__day--today': isToday,
+                    'sd-date-range-picker-calendar__day--in-range': inRange,
+                    'sd-date-range-picker-calendar__day--range-start': isRangeStart,
+                    'sd-date-range-picker-calendar__day--range-end': isRangeEnd,
+                    'sd-date-range-picker-calendar__day--selected': isSelectedEdge,
+                    'sd-date-range-picker-calendar__day--disabled': isDisabled,
+                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => this.handleDayClick(cell), onMouseEnter: () => this.handleDayHover(cell) }, h("span", { class: "sd-date-range-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
+        }))));
+    }
+    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,
+            '--range-bg': RANGE_LAYOUT.bg,
+            '--range-height': `${RANGE_LAYOUT.height}px`,
+            '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
+            '--range-divider': RANGE_LAYOUT.divider,
+        };
+        return (h(Fragment, { key: '5c9510be171a638870c8b86ef2c13c81d4920209' }, h("div", { key: 'b9af5cf84625eb19039b6ab2b41622364cbbea82', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '83578cd21d5984e3ffbda26c90a96df82d78deb5', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '8c31d30b60f252adaafa1b830099743f6501e368', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+    }
+    static get is() { return "sd-date-range-picker-calendar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-date-range-picker-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-date-range-picker-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[string, string] | null",
+                    "resolved": "[string, string] | null",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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
+            },
+            "maxRange": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-range"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentYear": {},
+            "currentMonth": {},
+            "pendingStart": {},
+            "hoverDate": {},
+            "displayValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "select",
+                "name": "sdSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "[string, string]",
+                    "resolved": "[string, 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-range-picker/sd-date-range-picker.config.js

@@ -0,0 +1,9 @@
+import datepickerTokens from "../../tokens/generated/component.datepicker.json";
+import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, CALENDAR_LAYOUT, WEEK_LABELS, } from "../sd-date-picker/sd-date-picker.config";
+export { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, CALENDAR_LAYOUT, WEEK_LABELS };
+export const RANGE_LAYOUT = {
+    bg: datepickerTokens.datepicker.calendar.range.bg,
+    height: datepickerTokens.datepicker.calendar.range.height,
+    panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
+    divider: datepickerTokens.datepicker.calendar.range.divider,
+};

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

@@ -1,94 +1,11 @@
 sd-date-range-picker {
-  width: fit-content;
   display: inline-flex;
 }
-sd-date-range-picker .sd-date-range-picker--disabled .date-icon {
-  cursor: not-allowed !important;
-  color: #888888 !important;
+sd-date-range-picker sd-portal {
+  display: none;
 }
-sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native {
-  color: #888888 !important;
-}
-sd-date-range-picker .sd-field .sd-field__control {
-  min-width: 210px;
-}
-sd-date-range-picker .sd-field .sd-input__native {
-  margin-left: 17px !important;
-}
-
-.sd-date-range-picker__menu {
-  width: 609px;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 24px 19px;
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
-  background: white;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__header {
-  margin-bottom: 16px;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__header .header-label {
-  margin: 0 12px;
-  width: 40px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 24px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  gap: 19px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container {
-  width: 266px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header {
-  width: 100%;
-  height: 24px;
-  line-height: 24px;
-  font-size: 14px;
-  text-align: center;
+sd-date-range-picker .sd-date-range-picker {
   position: relative;
-  padding: 0 5px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev {
-  left: 5px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next {
-  right: 5px;
-  left: auto;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days {
-  padding: 0 5px;
-  margin-top: 8px;
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  column-gap: 10px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day {
-  width: 28px;
-  height: 20px;
-  font-size: 12px;
-  line-height: 20px;
-  text-align: center;
-  color: #888888;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body {
-  margin-top: 12px;
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .separator {
-  width: 1px;
-  background-color: #D8D8D8;
+  width: 100%;
+  height: 100%;
 }