@sellmate/design-system 1.0.60 → 1.0.62

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

@@ -1,36 +1,101 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
+import { nanoid } from "nanoid/non-secure";
+import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, } from "./sd-date-picker.config";
 export class SdDatePicker {
+    static CLOSE_ANIMATION_DURATION = 150;
     el;
     value = null;
-    label;
+    size = 'sm';
+    placeholder = 'YYYY-MM-DD';
     selectable;
     disabled = false;
-    placeholder = '';
+    width = '';
+    // sd-field 공통 props
+    label = '';
+    addonLabel = '';
+    hint = '';
+    errorMessage = '';
+    fieldName = '';
+    rules = [];
+    error = false;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
     isOpen = false;
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
     update;
     viewChange;
-    inputEl;
-    openMenu() {
-        if (this.disabled)
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    internalName = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+    }
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    closeDropdown() {
+        if (!this.isOpen)
             return;
-        this.isOpen = true;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdDatePicker.CLOSE_ANIMATION_DURATION);
     }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
+        }
+    };
     handleSelect = (e) => {
+        this.closeDropdown();
         this.value = e.detail;
-        this.isOpen = false;
-        this.update.emit(e.detail);
-    };
-    handleClose = () => {
-        this.isOpen = false;
+        const nextValue = this.value;
+        requestAnimationFrame(() => {
+            this.update.emit(nextValue);
+        });
     };
     handleViewChange = (e) => {
         this.viewChange.emit(e.detail);
     };
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
     render() {
-        return (h("div", { key: '160bd9b2bbd9d223d4df341ed2fbba79c1701c13', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'cf7c72c144f1222308eb936a14d1786863019126', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '8651ba1d36749667f53e9f064b973cb336389ab3', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '6ee759cf5cbb0afc4cd8adf704a489ef6cffc8f9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '96c038fea5102ffd780fd296534cc294bd1c6912', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'bc8d14f98d5d56e6775f083e4096d1113c28a658', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.md;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': DATEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: '713640ad88e27954a12e75f8672032374f9effef', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '6f4d6a4dabd3909c647ba9e8d672f1c97a4f50ff', class: "sd-date-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-date-picker-trigger", { key: '06703672547b5a96b791eaacfbce4f7d23467e9c', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '74b099498b8cdf75038c5d3e4d81bd2f5ead9068', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '6385470ab1578662f38c6bc4409b0010e55975a5', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-date-picker.scss"]
@@ -59,20 +124,47 @@ export class SdDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "value",
                 "defaultValue": "null"
             },
-            "label": {
+            "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": "'sm'"
+            },
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -80,7 +172,8 @@ export class SdDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label"
+                "attribute": "placeholder",
+                "defaultValue": "'YYYY-MM-DD'"
             },
             "selectable": {
                 "type": "unknown",
@@ -119,7 +212,27 @@ export class SdDatePicker {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "placeholder": {
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -136,14 +249,210 @@ export class SdDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder",
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "addonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-label",
+                "defaultValue": "''"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "fieldName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field-name",
                 "defaultValue": "''"
+            },
+            "rules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
+                    "references": {
+                        "Rule": {
+                            "location": "import",
+                            "path": "../../types/form",
+                            "id": "src/types/form.d.ts::Rule",
+                            "referenceLocation": "Rule"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconProps",
+                    "resolved": "IconProps | undefined",
+                    "references": {
+                        "IconProps": {
+                            "location": "global",
+                            "id": "global::IconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "undefined"
+            },
+            "labelTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-tooltip",
+                "defaultValue": "''"
+            },
+            "labelTooltipProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTooltipProps | null",
+                    "resolved": "SdTooltipProps | null",
+                    "references": {
+                        "SdTooltipProps": {
+                            "location": "import",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
+                            "referenceLocation": "SdTooltipProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
             }
         };
     }
     static get states() {
         return {
-            "isOpen": {}
+            "isOpen": {},
+            "isAnimatingOut": {},
+            "focused": {},
+            "hovered": {}
         };
     }
     static get events() {
@@ -179,5 +488,66 @@ export class SdDatePicker {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "watchIsOpen"
+            }];
+    }
 }

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

@@ -0,0 +1,184 @@
+sd-date-range-picker-calendar {
+  display: block;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-gap);
+  height: 364px;
+  padding: var(--calendar-padding);
+  background: var(--calendar-bg);
+  border-radius: var(--calendar-radius);
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
+  user-select: none;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--calendar-gap);
+  font-size: var(--calendar-header-font-size);
+  line-height: var(--calendar-header-line-height);
+  font-weight: var(--calendar-header-font-weight);
+  color: var(--calendar-day-text);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button {
+  position: absolute;
+  right: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--calendar-week-font-size);
+  font-weight: var(--calendar-header-font-weight);
+  color: var(--calendar-day-text);
+  min-width: 37px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover {
+  text-decoration: underline;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels {
+  display: flex;
+  flex-direction: row;
+  gap: var(--range-panel-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider {
+  flex-shrink: 0;
+  width: 1px;
+  background: var(--range-divider);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__header {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--calendar-header-gap);
+  font-size: var(--calendar-header-font-size);
+  line-height: var(--calendar-header-line-height);
+  font-weight: var(--calendar-header-font-weight);
+  color: var(--calendar-day-text);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--calendar-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--calendar-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  text-align: center;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month {
+  flex: 1;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder {
+  visibility: hidden;
+  pointer-events: none;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, var(--calendar-day-size));
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  font-size: var(--calendar-week-font-size);
+  line-height: var(--calendar-week-line-height);
+  font-weight: var(--calendar-week-font-weight);
+  color: var(--calendar-week-color);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, var(--calendar-day-size));
+  row-gap: var(--calendar-grid-row-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--calendar-day-size);
+  height: var(--range-height);
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--calendar-day-font-size);
+  line-height: var(--calendar-day-line-height);
+  font-weight: var(--calendar-day-font-weight);
+  color: var(--calendar-day-text);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--calendar-day-circle-size);
+  height: var(--calendar-day-circle-size);
+  border-radius: calc(var(--calendar-day-circle-radius) * 1px);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle {
+  border-radius: 16px;
+  border: 1px solid var(--calendar-day-hover-border);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle {
+  font-weight: 700;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range {
+  background: var(--range-bg);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start {
+  background: linear-gradient(to right, transparent 50%, var(--range-bg) 50%);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end {
+  background: var(--range-bg);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end {
+  background: transparent;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle {
+  border-radius: 16px;
+  background: var(--calendar-day-select-bg);
+  color: var(--calendar-day-select-text);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle {
+  background: var(--calendar-day-select-bg);
+  color: var(--calendar-day-select-text);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled {
+  color: var(--calendar-day-disabled-text);
+  cursor: not-allowed;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end) {
+  background: none;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty {
+  visibility: hidden;
+  pointer-events: none;
+  background: transparent;
+}