@sellmate/design-system 0.0.24 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +2 -2
- package/dist/cjs/{index-BjPOPvqs.js → index-DXo1Fhkn.js} +3 -3
- package/dist/cjs/index-DXo1Fhkn.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/{esm/color-CgyTlXBV.js → cjs/resolveColor-DxvExwgo.js} +17 -4
- package/dist/{esm/resolveColor-CswQ9y2Q.js.map → cjs/resolveColor-DxvExwgo.js.map} +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +3 -4
- package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -0
- package/dist/cjs/{sd-checkbox_9.cjs.entry.js → sd-button_12.cjs.entry.js} +739 -817
- package/dist/cjs/sd-card.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-popover.cjs.entry.js +4 -4
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +380 -0
- package/dist/cjs/sd-select-multiple-group.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-select-multiple.cjs.entry.js +263 -0
- package/dist/cjs/sd-select-multiple.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-select-option-group.cjs.entry.js +69 -0
- package/dist/cjs/sd-select-option-group.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-tag.cjs.entry.js +2 -2
- package/dist/cjs/select-keyboard-navigation-6fO_V4En.js +119 -0
- package/dist/cjs/select-keyboard-navigation-6fO_V4En.js.map +1 -0
- package/dist/cjs/{tooltipArrow-qwvq153k.js → tooltipArrow-DNiGFQNW.js} +3 -3
- package/dist/cjs/{tooltipArrow-qwvq153k.js.map → tooltipArrow-DNiGFQNW.js.map} +1 -1
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-guide/sd-guide.css +6 -1
- package/dist/collection/components/sd-guide/sd-guide.js +4 -4
- package/dist/collection/components/sd-guide/sd-guide.js.map +1 -1
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -3
- package/dist/collection/components/sd-pagination/sd-pagination.js.map +1 -1
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +25 -4
- package/dist/collection/components/sd-portal/sd-portal.js.map +1 -1
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select.css +0 -6
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -6
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +0 -6
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-table/sd-table.css +7 -1316
- package/dist/collection/components/sd-table/sd-table.js +70 -5
- package/dist/collection/components/sd-table/sd-table.js.map +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.css +67 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -5
- package/dist/collection/components/sd-tooltip/sd-tooltip.js.map +1 -1
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-Bl-wgv-z.js → p-B9QE7fbR.js} +6 -6
- package/dist/components/{p-Bl-wgv-z.js.map → p-B9QE7fbR.js.map} +1 -1
- package/dist/components/{p-CZG8wDBH.js → p-BWF8FOjZ.js} +4 -4
- package/dist/components/{p-CZG8wDBH.js.map → p-BWF8FOjZ.js.map} +1 -1
- package/dist/components/{p-Cxrr7vOk.js → p-BhRUodRD.js} +13 -14
- package/dist/components/p-BhRUodRD.js.map +1 -0
- package/dist/components/{p-nehvpX7w.js → p-BtS3tSh2.js} +4 -4
- package/dist/components/{p-nehvpX7w.js.map → p-BtS3tSh2.js.map} +1 -1
- package/dist/components/{p-DpiRZxT1.js → p-BttJlXkp.js} +6 -6
- package/dist/components/{p-DpiRZxT1.js.map → p-BttJlXkp.js.map} +1 -1
- package/dist/components/{p-Bfro0I6y.js → p-BvuTaRpn.js} +3 -3
- package/dist/components/{p-Bfro0I6y.js.map → p-BvuTaRpn.js.map} +1 -1
- package/dist/components/{p-DNUN6dGL.js → p-CMFEznYN.js} +7 -8
- package/dist/components/p-CMFEznYN.js.map +1 -0
- package/dist/components/{p-e74imoE0.js → p-Cafw-qR4.js} +3 -3
- package/dist/components/{p-e74imoE0.js.map → p-Cafw-qR4.js.map} +1 -1
- package/dist/components/{p-DzRr3BEe.js → p-CbnL1UUF.js} +3 -3
- package/dist/components/p-CbnL1UUF.js.map +1 -0
- package/dist/components/p-CkHD07WH.js +323 -0
- package/dist/components/p-CkHD07WH.js.map +1 -0
- package/dist/components/{p-BqIcTSCQ.js → p-Cs1Kf3Tx.js} +4 -4
- package/dist/components/{p-BqIcTSCQ.js.map → p-Cs1Kf3Tx.js.map} +1 -1
- package/dist/components/{p-aU8C4Pcb.js → p-DWYqZdbI.js} +8 -8
- package/dist/components/{p-aU8C4Pcb.js.map → p-DWYqZdbI.js.map} +1 -1
- package/dist/components/{p-CbTvFUCY.js → p-DtOWZESA.js} +28 -7
- package/dist/components/p-DtOWZESA.js.map +1 -0
- package/dist/components/{p-QBJzxOWs.js → p-hf6YF2Mx.js} +4 -4
- package/dist/components/{p-QBJzxOWs.js.map → p-hf6YF2Mx.js.map} +1 -1
- package/dist/components/{p-BvOGkIDI.js → p-wA4KCOG0.js} +3 -3
- package/dist/components/{p-BvOGkIDI.js.map → p-wA4KCOG0.js.map} +1 -1
- package/dist/components/sd-badge.js +2 -2
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +2 -2
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-box.js +1 -1
- package/dist/components/sd-date-picker.js +7 -7
- package/dist/components/sd-date-range-picker.js +7 -7
- package/dist/components/sd-guide.js +9 -9
- package/dist/components/sd-guide.js.map +1 -1
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +7 -7
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-select-multiple-group.js +8 -8
- package/dist/components/sd-select-multiple-group.js.map +1 -1
- package/dist/components/sd-select-multiple.js +10 -10
- package/dist/components/sd-select-multiple.js.map +1 -1
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select.js +1 -318
- package/dist/components/sd-select.js.map +1 -1
- package/dist/components/sd-table.js +64 -17
- package/dist/components/sd-table.js.map +1 -1
- package/dist/components/sd-tag.js +2 -2
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.css +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-054ae376.entry.js +2 -0
- package/dist/design-system/p-054ae376.entry.js.map +1 -0
- package/dist/design-system/{p-b537f724.entry.js → p-12134716.entry.js} +2 -2
- package/dist/design-system/p-12b6c1a5.entry.js +2 -0
- package/dist/design-system/p-12b6c1a5.entry.js.map +1 -0
- package/dist/design-system/p-3d9fccae.entry.js +2 -0
- package/dist/design-system/p-3d9fccae.entry.js.map +1 -0
- package/dist/design-system/{p-691dc436.entry.js → p-871c8d66.entry.js} +2 -2
- package/dist/design-system/p-9975f6f3.entry.js +2 -0
- package/dist/design-system/p-9975f6f3.entry.js.map +1 -0
- package/dist/design-system/{p-CqOU6L62.js → p-B2T3tS5r.js} +3 -3
- package/dist/design-system/p-B2T3tS5r.js.map +1 -0
- package/dist/design-system/p-BE6EMCXm.js +2 -0
- package/dist/design-system/{p-BUzABVug.js.map → p-BE6EMCXm.js.map} +1 -1
- package/dist/design-system/{p-CgyTlXBV.js → p-BYf-ybt2.js} +2 -2
- package/dist/design-system/{p-BoLmB6pG.js.map → p-BYf-ybt2.js.map} +1 -1
- package/dist/design-system/p-C2JaR3A6.js +2 -0
- package/dist/design-system/p-C2JaR3A6.js.map +1 -0
- package/dist/design-system/{p-2aef624e.entry.js → p-a7ab1b43.entry.js} +2 -2
- package/dist/design-system/p-af3a1dbb.entry.js +2 -0
- package/dist/design-system/p-d1aa75e7.entry.js +2 -0
- package/dist/design-system/p-e061c4f8.entry.js +2 -0
- package/dist/design-system/p-e061c4f8.entry.js.map +1 -0
- package/dist/design-system/{p-c4f5ed94.entry.js → p-e25d96e4.entry.js} +2 -2
- package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
- package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -0
- package/dist/design-system/sd-select-multiple-group.entry.esm.js.map +1 -0
- package/dist/design-system/sd-select-multiple.entry.esm.js.map +1 -0
- package/dist/design-system/sd-select-option-group.entry.esm.js.map +1 -0
- package/dist/esm/design-system.js +3 -3
- package/dist/esm/{index-CqOU6L62.js → index-B2T3tS5r.js} +3 -3
- package/dist/esm/index-B2T3tS5r.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/{cjs/color-Oz29vj7L.js → esm/resolveColor-BYf-ybt2.js} +14 -6
- package/dist/{cjs/resolveColor-CauSLF0s.js.map → esm/resolveColor-BYf-ybt2.js.map} +1 -1
- package/dist/esm/sd-badge.entry.js +3 -4
- package/dist/esm/sd-badge.entry.js.map +1 -1
- package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -0
- package/dist/esm/{sd-checkbox_9.entry.js → sd-button_12.entry.js} +732 -813
- package/dist/esm/sd-card.entry.js +2 -2
- package/dist/esm/sd-date-box.entry.js +1 -1
- package/dist/esm/sd-date-picker.entry.js +3 -3
- package/dist/esm/sd-date-range-picker.entry.js +3 -3
- package/dist/esm/sd-popover.entry.js +4 -4
- package/dist/esm/sd-select-multiple-group.entry.js +378 -0
- package/dist/esm/sd-select-multiple-group.entry.js.map +1 -0
- package/dist/esm/sd-select-multiple.entry.js +261 -0
- package/dist/esm/sd-select-multiple.entry.js.map +1 -0
- package/dist/esm/sd-select-option-group.entry.js +67 -0
- package/dist/esm/sd-select-option-group.entry.js.map +1 -0
- package/dist/esm/sd-tag.entry.js +2 -2
- package/dist/esm/select-keyboard-navigation-C2JaR3A6.js +116 -0
- package/dist/esm/select-keyboard-navigation-C2JaR3A6.js.map +1 -0
- package/dist/esm/{tooltipArrow-hOEWkZyH.js → tooltipArrow-Pa2XQhpp.js} +3 -3
- package/dist/esm/{tooltipArrow-hOEWkZyH.js.map → tooltipArrow-Pa2XQhpp.js.map} +1 -1
- package/dist/types/components/sd-table/sd-table.d.ts +3 -0
- package/dist/types/components.d.ts +16 -0
- package/hydrate/index.js +90 -46
- package/hydrate/index.mjs +90 -46
- package/package.json +2 -2
- package/dist/cjs/color-Oz29vj7L.js.map +0 -1
- package/dist/cjs/index-BjPOPvqs.js.map +0 -1
- package/dist/cjs/resolveColor-CauSLF0s.js +0 -18
- package/dist/cjs/sd-button.sd-tooltip-portal.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-button_2.cjs.entry.js +0 -221
- package/dist/cjs/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-guide.cjs.entry.js +0 -84
- package/dist/cjs/sd-guide.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-pagination.sd-tooltip.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-pagination_2.cjs.entry.js +0 -168
- package/dist/cjs/sd-table.cjs.entry.js +0 -237
- package/dist/cjs/sd-table.entry.cjs.js.map +0 -1
- package/dist/components/p-CbTvFUCY.js.map +0 -1
- package/dist/components/p-Cxrr7vOk.js.map +0 -1
- package/dist/components/p-DNUN6dGL.js.map +0 -1
- package/dist/components/p-DzRr3BEe.js.map +0 -1
- package/dist/design-system/p-158f9392.entry.js +0 -2
- package/dist/design-system/p-158f9392.entry.js.map +0 -1
- package/dist/design-system/p-37042d15.entry.js +0 -2
- package/dist/design-system/p-37042d15.entry.js.map +0 -1
- package/dist/design-system/p-949de8eb.entry.js +0 -2
- package/dist/design-system/p-949de8eb.entry.js.map +0 -1
- package/dist/design-system/p-9f5eed30.entry.js +0 -2
- package/dist/design-system/p-BUzABVug.js +0 -2
- package/dist/design-system/p-BoLmB6pG.js +0 -2
- package/dist/design-system/p-CgyTlXBV.js.map +0 -1
- package/dist/design-system/p-CqOU6L62.js.map +0 -1
- package/dist/design-system/p-adee3154.entry.js +0 -2
- package/dist/design-system/p-adee3154.entry.js.map +0 -1
- package/dist/design-system/p-bda05b6f.entry.js +0 -2
- package/dist/design-system/p-bda05b6f.entry.js.map +0 -1
- package/dist/design-system/p-f015c024.entry.js +0 -2
- package/dist/design-system/p-f6a1ff99.entry.js +0 -2
- package/dist/design-system/p-f6a1ff99.entry.js.map +0 -1
- package/dist/design-system/sd-button.sd-tooltip-portal.entry.esm.js.map +0 -1
- package/dist/design-system/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.esm.js.map +0 -1
- package/dist/design-system/sd-guide.entry.esm.js.map +0 -1
- package/dist/design-system/sd-pagination.sd-tooltip.entry.esm.js.map +0 -1
- package/dist/design-system/sd-table.entry.esm.js.map +0 -1
- package/dist/esm/color-CgyTlXBV.js.map +0 -1
- package/dist/esm/index-CqOU6L62.js.map +0 -1
- package/dist/esm/resolveColor-CswQ9y2Q.js +0 -16
- package/dist/esm/sd-button.sd-tooltip-portal.entry.js.map +0 -1
- package/dist/esm/sd-button_2.entry.js +0 -218
- package/dist/esm/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.js.map +0 -1
- package/dist/esm/sd-guide.entry.js +0 -82
- package/dist/esm/sd-guide.entry.js.map +0 -1
- package/dist/esm/sd-pagination.sd-tooltip.entry.js.map +0 -1
- package/dist/esm/sd-pagination_2.entry.js +0 -165
- package/dist/esm/sd-table.entry.js +0 -235
- package/dist/esm/sd-table.entry.js.map +0 -1
- /package/dist/design-system/{p-b537f724.entry.js.map → p-12134716.entry.js.map} +0 -0
- /package/dist/design-system/{p-691dc436.entry.js.map → p-871c8d66.entry.js.map} +0 -0
- /package/dist/design-system/{p-2aef624e.entry.js.map → p-a7ab1b43.entry.js.map} +0 -0
- /package/dist/design-system/{p-f015c024.entry.js.map → p-af3a1dbb.entry.js.map} +0 -0
- /package/dist/design-system/{p-9f5eed30.entry.js.map → p-d1aa75e7.entry.js.map} +0 -0
- /package/dist/design-system/{p-c4f5ed94.entry.js.map → p-e25d96e4.entry.js.map} +0 -0
|
@@ -74,9 +74,9 @@ export class SdDatePicker {
|
|
|
74
74
|
this.isOpen = false;
|
|
75
75
|
};
|
|
76
76
|
render() {
|
|
77
|
-
return (h(Host, { key: '
|
|
77
|
+
return (h(Host, { key: 'f445a752123f1a1a7f8d28ca7472a8ffabda9441', class: "sd-date-picker" }, h("sd-input", { key: '85662ea61b192562311af23f67c1a1ad05636813', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
78
78
|
margin: '0 0 0 8px',
|
|
79
|
-
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '
|
|
79
|
+
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '41634f9170073fbde5e44c55b5985da90763f819', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ce630583ef81cd72ad1b8fdaab7cab2d1df278cb', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '55d4c73a3e17991ebf68495d7bed96399857de1e', class: "sd-date-picker__menu" }, h("div", { key: '0800e3a37eec27bb8a8c59a2ebd8ffdbf4e813a7', class: "sd-date-picker__header" }, h("div", { key: '1518b578ad87a0f5875d980d1c974492f32714e3', class: "year-nav" }, h("button", { key: 'e70f1d4e73650c7bccb1629b679ca366717e5506', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'f679a54b76e304d08c132d6784575831a5d5d61b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '634dcbfe81d328cbc0460958208dc17aaf218158', class: "year-nav__current" }, this.currentYear), h("button", { key: '7e7cef51d7b47b7280cfff4234b88394708ea01a', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '8a6fc4a40f567d2d1ffef5dbc08de5148203970c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '8fad6e92b899a0cb38398ec2f4036b959377d99b', class: "month-nav" }, h("button", { key: '3180c35ad42239a6a97480a4db860182b98724f3', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '6ccef0b13fde4124e0e14959687f60dab753ae51', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'db7db67a1a77f02451bc0a7c97e87e3cd6c9d453', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '5df06269331e9f7ee1cb4801bfd713d433f00af4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '65b0f49b205e9aa38a46cbe672665b31c9ffe542', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '68f3c05f2ffb57b7fc032209dd709e5eaa6fcbdd', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '452c22746ace6b3923acf4912edba2509a56b369', class: "sd-date-picker__body" }, [
|
|
80
80
|
...this.calendar.prevMonthDays,
|
|
81
81
|
...this.calendar.days,
|
|
82
82
|
...this.calendar.afterMonthDays,
|
|
@@ -137,9 +137,9 @@ export class SdDateRangePicker {
|
|
|
137
137
|
this.isOpen = false;
|
|
138
138
|
};
|
|
139
139
|
render() {
|
|
140
|
-
return (h(Host, { key: '
|
|
140
|
+
return (h(Host, { key: '3d95128a2a654e38ceae60e6b89482a454488286', class: "sd-date-range-picker" }, h("sd-input", { key: '4f170abfe6214ffa1044020b2cd59a9219f3ef09', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
141
141
|
margin: '0 0 0 8px',
|
|
142
|
-
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '
|
|
142
|
+
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '7c12c7e3331638f333efdea4bcd3d452eb032561', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '7312ab4a79877de6d6be3edaa404e0b9c52e28d8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '20a485d128de2b2d0a8043cb5fe0de990364bbd8', class: "sd-date-range-picker__menu" }, h("div", { key: '19a0489246b5dccc183f3d3a040086a6a2c565f3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '1f9c5f1188234e2306c033e8e67f9a106b3b39bc', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '52805839d2092886fe4f07c9f95a2e948b00c917', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9f323504223ccfbc4b5703346a310e58d1621c3', class: "header-label" }, this.prevYear), h("button", { key: '810c6fb9eaa16291550455ac1099c15da7b80ed6', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '44cf361ed854292f90c954522c356e17d5a45d29', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '4cc859482a2c010261b64b8ce15f5c754a2234fd', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
|
|
143
143
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
144
144
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
|
|
145
145
|
this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===
|
|
@@ -138,14 +138,19 @@ sd-guide .sd-guide .sd-button {
|
|
|
138
138
|
color: #333333 !important;
|
|
139
139
|
display: flex;
|
|
140
140
|
align-items: center;
|
|
141
|
+
transition: none;
|
|
141
142
|
}
|
|
142
143
|
sd-guide .sd-guide .sd-button .sd-button__content {
|
|
143
144
|
color: #333333 !important;
|
|
144
145
|
}
|
|
145
146
|
sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label {
|
|
146
147
|
color: #333333 !important;
|
|
148
|
+
margin-left: 4px;
|
|
147
149
|
}
|
|
148
|
-
sd-guide
|
|
150
|
+
sd-guide .sd-guide--active .sd-button {
|
|
151
|
+
border: 1px solid #12b553;
|
|
152
|
+
}
|
|
153
|
+
sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
|
|
149
154
|
color: white !important;
|
|
150
155
|
}
|
|
151
156
|
|
|
@@ -11,7 +11,7 @@ const GUIDE_ICON = {
|
|
|
11
11
|
help: {
|
|
12
12
|
name: 'helpOutline',
|
|
13
13
|
size: 20,
|
|
14
|
-
color: colors.
|
|
14
|
+
color: colors.green_70,
|
|
15
15
|
},
|
|
16
16
|
pdf: { name: 'pdf', size: 20, color: colors.red_75 },
|
|
17
17
|
youtube: { name: 'youtube', size: 20, color: colors.red_75 },
|
|
@@ -47,11 +47,11 @@ export class SdGuide {
|
|
|
47
47
|
};
|
|
48
48
|
render() {
|
|
49
49
|
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
50
|
-
return (h(Host, { key: '
|
|
50
|
+
return (h(Host, { key: '1365e7c6c52a218e419f94dc741a70e74b954bc6', style: {
|
|
51
51
|
'--sd-guide-color': GUIDE_ICON[this.type].color,
|
|
52
|
-
} }, h("sd-button", { key: '
|
|
52
|
+
} }, h("sd-button", { key: '23cab4f2354f889012d0eb39ff04daf5a469c24a', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '7d9c7a40a1f1d0a49388b207882ebe3510a0797c', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '4e61879615a5e4466cc572df02b571b4bbf6b604', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e365cd7b185f194871d5780b892683b84a1f97c5', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
|
|
53
53
|
// buttonStyle={{ padding: '0px', minHeight: '0px' }}
|
|
54
|
-
onSdClick: this.closeDropdown }), h("div", { key: '
|
|
54
|
+
onSdClick: this.closeDropdown }), h("div", { key: '1198a0d6a84321395501a7afe9f003c627c1c2bc', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'b4aee8ab7a237c9ae6475291cd5c51997b8505e9', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '9bc0f5ef484f950d6659c9bc8a27ce42bc315048', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: 'bb2d3ec6369dd464410771af81343735963b4a9c', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
55
55
|
}
|
|
56
56
|
// 현재 2depth까지만 스타일 적용
|
|
57
57
|
renderListItem(message, depth = 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n name: 'helpOutline',\r\n size: 20,\r\n color: colors.
|
|
1
|
+
{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n name: 'helpOutline',\r\n size: 20,\r\n color: colors.green_70,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n if (this.type === 'help') {\r\n this.popupShow = !this.popupShow;\r\n return;\r\n }\r\n\r\n if (this.guideUrl) {\r\n window.open(this.guideUrl, '_blank');\r\n }\r\n };\r\n\r\n private get guideClass(): string {\r\n const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n closeDropdown = () => {\r\n this.popupShow = false;\r\n };\r\n\r\n render() {\r\n const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n return (\r\n <Host\r\n style={{\r\n '--sd-guide-color': GUIDE_ICON[this.type].color,\r\n }}\r\n >\r\n <sd-button\r\n ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n class={this.guideClass}\r\n variant={this.popupShow ? 'primary' : 'outline'}\r\n label={GUIDE_LABEL[this.type]}\r\n size=\"sm\"\r\n color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\r\n icon={iconName}\r\n iconColor={this.popupShow ? 'white' : iconColor}\r\n iconSize={iconSize}\r\n noHover={this.popupShow}\r\n onSdClick={this.handleClickGuide}\r\n />\r\n {this.type === 'help' && this.popupShow && (\r\n <sd-portal\r\n open={this.popupShow}\r\n parentRef={this.guideRef}\r\n onSdClose={this.closeDropdown}\r\n offset={[0, 4]}\r\n >\r\n <div\r\n class=\"sd-guide__popup\"\r\n style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n >\r\n <sd-button\r\n class=\"sd-guide__popup__close\"\r\n icon=\"close\"\r\n color={colors.grey_65}\r\n size=\"md\"\r\n variant=\"ghost\"\r\n noHover\r\n // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n onSdClick={this.closeDropdown}\r\n />\r\n <div class=\"sd-guide__popup__header\">\r\n <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n <h3 class=\"sd-guide__popup__title\">{this.label || GUIDE_LABEL[this.type]}</h3>\r\n </div>\r\n <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n const listItems: HTMLElement[] = [];\r\n\r\n if (Array.isArray(message)) {\r\n const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n listItems.push(...depthMsg.flat());\r\n } else {\r\n listItems.push(this.renderLi(message, depth));\r\n }\r\n\r\n return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n const listContent = message.replace(/ /gi, ' ');\r\n return (\r\n <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n <p innerHTML={listContent}></p>\r\n </li>\r\n );\r\n };\r\n}\r\n"]}
|
|
@@ -25,7 +25,7 @@ export class SdIcon {
|
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
27
|
const IconComponent = Icons[this.name]?.[this.size];
|
|
28
|
-
return (h("i", { key: '
|
|
28
|
+
return (h("i", { key: 'c0d4a3993efc47345406ba9b30e49cefaa14f8da', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '47476081ac11dd8ef1b04d9372d05f4afe72b323', color: this.resolvedColor })));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "sd-icon"; }
|
|
31
31
|
static get originalStyleUrls() {
|
|
@@ -89,11 +89,11 @@ export class SdInput {
|
|
|
89
89
|
'--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
90
90
|
}
|
|
91
91
|
: {};
|
|
92
|
-
return (h(Host, { key: '
|
|
92
|
+
return (h(Host, { key: '9a0b975f20b4b8bbc8bff2aef4ee9036450921d4', style: inputWidth }, this.label && h("div", { key: 'ec6c840dcdaa7b9788c32ecbd03dc5daee74c748', class: "sd-input__label" }, this.label), h("label", { key: '4c11c34fd26897b50e0cfbb569de476c9e06884c', class: {
|
|
93
93
|
'sd-input': true,
|
|
94
94
|
[this.getInputStatus()]: true,
|
|
95
95
|
'sd-input--barcode': !!this.barcode,
|
|
96
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '
|
|
96
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '0d7df02ed548b12f415bd72f84ea411fde5ef549', name: "prefix" }), h("input", { key: '6203dcb95fd486d263e0fe33495243e95c332e1a', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '21544173b390be5607c50faf84f1d47fa703e8bf', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'af486def3d146c4638d1f6fecf95a6de61e8d528', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
|
|
97
97
|
this.internalValue = '';
|
|
98
98
|
this.sdChange?.emit(this.internalValue);
|
|
99
99
|
this.sdInput?.emit(this.internalValue);
|
|
@@ -73,15 +73,14 @@ export class SdPagination {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
render() {
|
|
76
|
-
return (h("div", { key: '
|
|
76
|
+
return (h("div", { key: '2707331958e2c375b570590a8742655bacb1aa4d', class: this.paginationClasses }, h("div", { key: 'e98573b80c04454ea0b30f6cb7fe1974028a0464', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
77
77
|
'pagination-btn': true,
|
|
78
78
|
'pagination-btn--selected': this.currentPage === n,
|
|
79
79
|
}, disabled: this.currentPage === n, style: {
|
|
80
80
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
81
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '
|
|
81
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'ccb867eccaece5ecbdcef7abe0e4d333fb169d11', class: "append-btns" }, this.renderNextButtons())));
|
|
82
82
|
}
|
|
83
83
|
static get is() { return "sd-pagination"; }
|
|
84
|
-
static get encapsulation() { return "shadow"; }
|
|
85
84
|
static get originalStyleUrls() {
|
|
86
85
|
return {
|
|
87
86
|
"$": ["sd-pagination.scss"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-pagination.js","sourceRoot":"","sources":["../../../src/components/sd-pagination/sd-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Watch, Fragment } from '@stencil/core';\r\n\r\nconst BUTTON_WIDTH: Record<number, number> = {\r\n 1: 26,\r\n 2: 36,\r\n 3: 42,\r\n 4: 50,\r\n 5: 58,\r\n};\r\n\r\nconst PER_PAGE = 10;\r\n\r\n@Component({\r\n tag: 'sd-pagination',\r\n styleUrl: 'sd-pagination.scss',\r\n shadow: true,\r\n})\r\nexport class SdPagination {\r\n @Prop() currentPage: number = 1;\r\n @Prop() lastPage: number = 1;\r\n @Prop() simple: boolean = false;\r\n\r\n @Event() pageChange!: EventEmitter<number>;\r\n\r\n @Watch('currentPage')\r\n @Watch('lastPage')\r\n onPropChange() {\r\n console.log('Pagination props changed', {\r\n currentPage: this.currentPage,\r\n lastPage: this.lastPage,\r\n });\r\n }\r\n\r\n private get paginationClasses() {\r\n const classes = ['sd-pagination'];\r\n\r\n if (this.simple) {\r\n classes.push('sd-pagination--simple');\r\n }\r\n return classes.join(' ');\r\n }\r\n\r\n private get pageNumbers() {\r\n const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n const end = Math.min(start + PER_PAGE - 1, this.lastPage);\r\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n }\r\n\r\n private get buttonWidth() {\r\n const lastPageNum = this.pageNumbers.at(-1) ?? 1;\r\n const maxPageLength: number = lastPageNum.toString().length;\r\n return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\r\n }\r\n\r\n private handlePageChange(page: number) {\r\n if (page < 1 || page > this.lastPage) return;\r\n this.pageChange.emit(page);\r\n }\r\n\r\n private handleGroupChange(direction: 'forward' | 'backward') {\r\n const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\r\n const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\r\n this.handlePageChange(newPage);\r\n }\r\n\r\n private get isFirstGroup() {\r\n return this.currentPage <= PER_PAGE;\r\n }\r\n\r\n private get isLastGroup() {\r\n const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n return startPageGroup + PER_PAGE - 1 >= this.lastPage;\r\n }\r\n\r\n private renderPrevButtons() {\r\n if (this.simple) {\r\n if (this.currentPage <= 1) return null;\r\n\r\n return (\r\n <Fragment>\r\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button\r\n aria-label=\"Go to previous page\"\r\n onClick={() => this.handlePageChange(this.currentPage - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n\r\n if (!this.isFirstGroup) {\r\n return (\r\n <Fragment>\r\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button\r\n aria-label=\"Go to previous page group\"\r\n onClick={() => this.handleGroupChange('backward')}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n }\r\n\r\n private renderNextButtons() {\r\n if (this.simple) {\r\n if (this.currentPage >= this.lastPage) return null;\r\n\r\n return (\r\n <Fragment>\r\n <button\r\n aria-label=\"Go to next page\"\r\n onClick={() => this.handlePageChange(this.currentPage + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n\r\n if (!this.isLastGroup) {\r\n return (\r\n <Fragment>\r\n <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={this.paginationClasses}>\r\n <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\r\n\r\n {this.simple ? (\r\n <div class=\"pagination-info\">\r\n <span class=\"current-page\">{this.currentPage}</span>\r\n <span>/</span>\r\n <span class=\"last-page\">{this.lastPage}</span>\r\n </div>\r\n ) : (\r\n this.pageNumbers.map(n => (\r\n <button\r\n type=\"button\"\r\n aria-current={this.currentPage === n ? 'page' : undefined}\r\n class={{\r\n 'pagination-btn': true,\r\n 'pagination-btn--selected': this.currentPage === n,\r\n }}\r\n disabled={this.currentPage === n}\r\n style={{\r\n '--pagination-btn-width': `${this.buttonWidth}px`,\r\n }}\r\n onClick={() => this.handlePageChange(n)}\r\n >\r\n {n}\r\n </button>\r\n ))\r\n )}\r\n\r\n <div class=\"append-btns\">{this.renderNextButtons()}</div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"sd-pagination.js","sourceRoot":"","sources":["../../../src/components/sd-pagination/sd-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Watch, Fragment } from '@stencil/core';\r\n\r\nconst BUTTON_WIDTH: Record<number, number> = {\r\n 1: 26,\r\n 2: 36,\r\n 3: 42,\r\n 4: 50,\r\n 5: 58,\r\n};\r\n\r\nconst PER_PAGE = 10;\r\n\r\n@Component({\r\n tag: 'sd-pagination',\r\n styleUrl: 'sd-pagination.scss',\r\n})\r\nexport class SdPagination {\r\n @Prop() currentPage: number = 1;\r\n @Prop() lastPage: number = 1;\r\n @Prop() simple: boolean = false;\r\n\r\n @Event() pageChange!: EventEmitter<number>;\r\n\r\n @Watch('currentPage')\r\n @Watch('lastPage')\r\n onPropChange() {\r\n console.log('Pagination props changed', {\r\n currentPage: this.currentPage,\r\n lastPage: this.lastPage,\r\n });\r\n }\r\n\r\n private get paginationClasses() {\r\n const classes = ['sd-pagination'];\r\n\r\n if (this.simple) {\r\n classes.push('sd-pagination--simple');\r\n }\r\n return classes.join(' ');\r\n }\r\n\r\n private get pageNumbers() {\r\n const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n const end = Math.min(start + PER_PAGE - 1, this.lastPage);\r\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n }\r\n\r\n private get buttonWidth() {\r\n const lastPageNum = this.pageNumbers.at(-1) ?? 1;\r\n const maxPageLength: number = lastPageNum.toString().length;\r\n return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\r\n }\r\n\r\n private handlePageChange(page: number) {\r\n if (page < 1 || page > this.lastPage) return;\r\n this.pageChange.emit(page);\r\n }\r\n\r\n private handleGroupChange(direction: 'forward' | 'backward') {\r\n const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\r\n const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\r\n this.handlePageChange(newPage);\r\n }\r\n\r\n private get isFirstGroup() {\r\n return this.currentPage <= PER_PAGE;\r\n }\r\n\r\n private get isLastGroup() {\r\n const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\r\n return startPageGroup + PER_PAGE - 1 >= this.lastPage;\r\n }\r\n\r\n private renderPrevButtons() {\r\n if (this.simple) {\r\n if (this.currentPage <= 1) return null;\r\n\r\n return (\r\n <Fragment>\r\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button\r\n aria-label=\"Go to previous page\"\r\n onClick={() => this.handlePageChange(this.currentPage - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n\r\n if (!this.isFirstGroup) {\r\n return (\r\n <Fragment>\r\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\r\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button\r\n aria-label=\"Go to previous page group\"\r\n onClick={() => this.handleGroupChange('backward')}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n }\r\n\r\n private renderNextButtons() {\r\n if (this.simple) {\r\n if (this.currentPage >= this.lastPage) return null;\r\n\r\n return (\r\n <Fragment>\r\n <button\r\n aria-label=\"Go to next page\"\r\n onClick={() => this.handlePageChange(this.currentPage + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n\r\n if (!this.isLastGroup) {\r\n return (\r\n <Fragment>\r\n <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\r\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\r\n </button>\r\n </Fragment>\r\n );\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={this.paginationClasses}>\r\n <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\r\n\r\n {this.simple ? (\r\n <div class=\"pagination-info\">\r\n <span class=\"current-page\">{this.currentPage}</span>\r\n <span>/</span>\r\n <span class=\"last-page\">{this.lastPage}</span>\r\n </div>\r\n ) : (\r\n this.pageNumbers.map(n => (\r\n <button\r\n type=\"button\"\r\n aria-current={this.currentPage === n ? 'page' : undefined}\r\n class={{\r\n 'pagination-btn': true,\r\n 'pagination-btn--selected': this.currentPage === n,\r\n }}\r\n disabled={this.currentPage === n}\r\n style={{\r\n '--pagination-btn-width': `${this.buttonWidth}px`,\r\n }}\r\n onClick={() => this.handlePageChange(n)}\r\n >\r\n {n}\r\n </button>\r\n ))\r\n )}\r\n\r\n <div class=\"append-btns\">{this.renderNextButtons()}</div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -31,11 +31,11 @@ export class SdPopover {
|
|
|
31
31
|
this.showPopover = false;
|
|
32
32
|
};
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Fragment, { key: '
|
|
34
|
+
return (h(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
|
|
35
35
|
'sd-popover-menu': true,
|
|
36
36
|
[`sd-popover-menu--${this.placement}`]: true,
|
|
37
37
|
[this.menuClass]: !!this.menuClass,
|
|
38
|
-
} }, h("i", { key: '
|
|
38
|
+
} }, h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "sd-popover"; }
|
|
41
41
|
static get encapsulation() { return "shadow"; }
|
|
@@ -57,9 +57,30 @@ export class SdPortal {
|
|
|
57
57
|
this.rafId = requestAnimationFrame(() => {
|
|
58
58
|
if (!this.parentRef || !this.wrapper)
|
|
59
59
|
return;
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
const parentRect = this.parentRef.getBoundingClientRect();
|
|
61
|
+
const wrapperRect = this.wrapper.getBoundingClientRect();
|
|
62
|
+
const viewport = {
|
|
63
|
+
width: window.innerWidth,
|
|
64
|
+
height: window.innerHeight,
|
|
65
|
+
};
|
|
66
|
+
let top = parentRect.bottom + window.scrollY + this.offset[1];
|
|
67
|
+
let left = parentRect.left + window.scrollX + this.offset[0];
|
|
68
|
+
// 화면 상하단 넘어갈 시 반전
|
|
69
|
+
if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {
|
|
70
|
+
top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];
|
|
71
|
+
}
|
|
72
|
+
if (top < window.scrollY) {
|
|
73
|
+
top = parentRect.bottom + window.scrollY + this.offset[1];
|
|
74
|
+
}
|
|
75
|
+
// 화면 좌우측 넘어갈 시 반전
|
|
76
|
+
if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {
|
|
77
|
+
left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];
|
|
78
|
+
}
|
|
79
|
+
if (left < 0) {
|
|
80
|
+
left = this.offset[0];
|
|
81
|
+
}
|
|
82
|
+
this.wrapper.style.top = `${top}px`;
|
|
83
|
+
this.wrapper.style.left = `${left}px`;
|
|
63
84
|
});
|
|
64
85
|
}
|
|
65
86
|
// parentRef의 이동 / 크기변경 감지
|
|
@@ -92,7 +113,7 @@ export class SdPortal {
|
|
|
92
113
|
this.sdClose.emit();
|
|
93
114
|
}
|
|
94
115
|
render() {
|
|
95
|
-
return h("slot", { key: '
|
|
116
|
+
return h("slot", { key: '4f344b083ff3a2d32d1a23f99e90687aeeb676b1' });
|
|
96
117
|
}
|
|
97
118
|
static get is() { return "sd-portal"; }
|
|
98
119
|
static get properties() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-portal.js","sourceRoot":"","sources":["../../../src/components/sd-portal/sd-portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzF,MAAM,OAAO,QAAQ;IACT,MAAM,CAAe;IACxB,EAAE,GAAyB,MAAM,CAAC;IAClC,SAAS,GAAuB,IAAI,CAAC;IACrC,MAAM,GAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAClC,MAAM,GAAW,IAAI,CAAC;IACtB,IAAI,GAAY,KAAK,CAAC;IAErB,OAAO,CAAsB;IAE9B,SAAS,CAAe;IACxB,OAAO,CAAe;IACtB,KAAK,CAAU;IACf,aAAa,GAAG,KAAK,CAAC;IAEtB,cAAc,CAAkB;IAChC,gBAAgB,CAAoB;IAE5C,gBAAgB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACzC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,kBAAkB;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QAC1D,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IACxB,CAAC;IAEO,gBAAgB;QACvB,MAAM,EAAE,GAAG,OAAO,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QACnF,OAAO,EAAE,YAAY,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;IACvD,CAAC;IAEO,aAAa;QACpB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YACjC,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YAC9B,UAAU,EAAE,cAAc;SAC1B,CAAC,CAAC;QACH,IAAI,CAAC,SAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAEO,eAAe;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/F,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,0BAA0B;IAG1B,cAAc;QACb,IAAI,IAAI,CAAC,KAAK;YAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"sd-portal.js","sourceRoot":"","sources":["../../../src/components/sd-portal/sd-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-portal',\r\n shadow: false,\r\n})\r\nexport class SdPortal {\r\n @Element() hostEl!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 4];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n this.updatePosition();\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n this.wrapper.style.display = this.open ? 'block' : 'none';\r\n if (this.open) this.updatePosition();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const parentRect = this.parentRef.getBoundingClientRect();\r\n const wrapperRect = this.wrapper.getBoundingClientRect();\r\n const viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n };\r\n\r\n let top = parentRect.bottom + window.scrollY + this.offset[1];\r\n let left = parentRect.left + window.scrollX + this.offset[0];\r\n\r\n // 화면 상하단 넘어갈 시 반전\r\n if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\r\n top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\r\n }\r\n if (top < window.scrollY) {\r\n top = parentRect.bottom + window.scrollY + this.offset[1];\r\n }\r\n\r\n // 화면 좌우측 넘어갈 시 반전\r\n if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\r\n left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\r\n }\r\n if (left < 0) {\r\n left = this.offset[0];\r\n }\r\n\r\n this.wrapper.style.top = `${top}px`;\r\n this.wrapper.style.left = `${left}px`;\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"]}
|
|
@@ -24,7 +24,7 @@ export class SdSelectOption {
|
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
render() {
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: '23d87df53fa083e6c9aceb1956de51800117df9f' }, h("div", { key: '569c5d35098350fa4d186ba838925de4f966c491', class: {
|
|
28
28
|
'sd-select__option': true,
|
|
29
29
|
'sd-select__option--selected': this.isSelected,
|
|
30
30
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -18,12 +18,6 @@
|
|
|
18
18
|
background-color: #cccccc;
|
|
19
19
|
border-radius: 4px;
|
|
20
20
|
}
|
|
21
|
-
.sd-select__dropdown::-webkit-scrollbar-thumb:hover {
|
|
22
|
-
background: #e5e5e5;
|
|
23
|
-
}
|
|
24
|
-
.sd-select__dropdown::-webkit-scrollbar-thumb:active {
|
|
25
|
-
background: #e5e5e5;
|
|
26
|
-
}
|
|
27
21
|
.sd-select__dropdown::-webkit-scrollbar-track {
|
|
28
22
|
background-color: transparent;
|
|
29
23
|
}
|
|
@@ -18,12 +18,6 @@
|
|
|
18
18
|
background-color: #cccccc;
|
|
19
19
|
border-radius: 4px;
|
|
20
20
|
}
|
|
21
|
-
.sd-select-multiple__dropdown::-webkit-scrollbar-thumb:hover {
|
|
22
|
-
background: #e5e5e5;
|
|
23
|
-
}
|
|
24
|
-
.sd-select-multiple__dropdown::-webkit-scrollbar-thumb:active {
|
|
25
|
-
background: #e5e5e5;
|
|
26
|
-
}
|
|
27
21
|
.sd-select-multiple__dropdown::-webkit-scrollbar-track {
|
|
28
22
|
background-color: transparent;
|
|
29
23
|
}
|
|
@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
208
208
|
'--select-width': this.width || '200px',
|
|
209
209
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
210
210
|
};
|
|
211
|
-
return (h(Host, { key: '
|
|
211
|
+
return (h(Host, { key: '8a237d4dc7f743a7685b440cd654d51629765a20', style: style }, h("div", { key: 'c1240092508fbb9e9b638803171847b174da9062', class: {
|
|
212
212
|
'sd-select-multiple': true,
|
|
213
213
|
'sd-select-multiple--open': this.isOpen,
|
|
214
214
|
'sd-select-multiple--disabled': this.disabled,
|
|
215
|
-
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '
|
|
215
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'b99913866f316d7eacffd9e0e71fd58baac05c34', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
216
216
|
}
|
|
217
217
|
renderLabel(label) {
|
|
218
218
|
if (!label)
|
|
@@ -18,12 +18,6 @@
|
|
|
18
18
|
background-color: #cccccc;
|
|
19
19
|
border-radius: 4px;
|
|
20
20
|
}
|
|
21
|
-
.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb:hover {
|
|
22
|
-
background: #e5e5e5;
|
|
23
|
-
}
|
|
24
|
-
.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb:active {
|
|
25
|
-
background: #e5e5e5;
|
|
26
|
-
}
|
|
27
21
|
.sd-select-multiple-group__dropdown::-webkit-scrollbar-track {
|
|
28
22
|
background-color: transparent;
|
|
29
23
|
}
|
|
@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
|
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
41
|
render() {
|
|
42
|
-
return (h("div", { key: '
|
|
42
|
+
return (h("div", { key: '0b921cd09e8115ed3af13fc2e9f1ecaff60f2b08', class: {
|
|
43
43
|
'sd-select__option-group': true,
|
|
44
44
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
45
45
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
|
|
|
48
48
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
49
49
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
50
50
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
51
|
-
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '
|
|
51
|
+
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '402a3e272f03930fe049d249c275a2acc1539bc3', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '6f8c05df6de67268636495b3d15dd5f896c8b846', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
52
52
|
e.preventDefault();
|
|
53
53
|
this.handleClick(this.option, this.isSelected, e);
|
|
54
|
-
} })), h("span", { key: '
|
|
54
|
+
} })), h("span", { key: '4cbe65750bace072e680c251e904688c63eb6722', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'af63ce7b9e377da8453049c49c5af28e411b9eec', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
55
55
|
}
|
|
56
56
|
static get is() { return "sd-select-option-group"; }
|
|
57
57
|
static get originalStyleUrls() {
|