@sellmate/design-system 0.0.35 → 0.0.37
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/sd-badge.cjs.entry.js +1 -1
- package/dist/cjs/sd-button_15.cjs.entry.js +18 -18
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-loading-spinner.cjs.entry.js +1 -1
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
- package/dist/cjs/sd-table-backup.cjs.entry.js +32 -24
- package/dist/cjs/sd-table-backup.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-tag.cjs.entry.js +1 -1
- package/dist/cjs/sd-td.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +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.js +3 -3
- 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-loading-spinner/sd-loading-spinner.js +1 -1
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
- 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-tbody/sd-tbody.js +1 -1
- package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
- package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
- package/dist/collection/components/sd-table-backup/sd-table-backup.css +244 -0
- package/dist/collection/components/sd-table-backup/sd-table-backup.js +711 -0
- package/dist/collection/components/sd-table-backup/sd-table-backup.js.map +1 -0
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/{p-BEDQ2CIp.js → p-BKIzbxHd.js} +5 -5
- package/dist/components/{p-BEDQ2CIp.js.map → p-BKIzbxHd.js.map} +1 -1
- package/dist/components/{p-BeBw4eSm.js → p-BKt1fz_c.js} +3 -3
- package/dist/components/{p-BeBw4eSm.js.map → p-BKt1fz_c.js.map} +1 -1
- package/dist/components/{p-Du8-vyL0.js → p-Biuws3x8.js} +3 -3
- package/dist/components/{p-Du8-vyL0.js.map → p-Biuws3x8.js.map} +1 -1
- package/dist/components/{p-CrmdI2cD.js → p-BoGQEY6a.js} +3 -3
- package/dist/components/{p-CrmdI2cD.js.map → p-BoGQEY6a.js.map} +1 -1
- package/dist/components/{p-BEq3cGoC.js → p-C3SqpMHk.js} +3 -3
- package/dist/components/{p-BEq3cGoC.js.map → p-C3SqpMHk.js.map} +1 -1
- package/dist/components/{p-B8lMIjWB.js → p-CEIyDJmm.js} +7 -7
- package/dist/components/{p-B8lMIjWB.js.map → p-CEIyDJmm.js.map} +1 -1
- package/dist/components/{p-ntW8MKYi.js → p-CZcwZjU1.js} +5 -5
- package/dist/components/{p-ntW8MKYi.js.map → p-CZcwZjU1.js.map} +1 -1
- package/dist/components/{p-BzdIpn5T.js → p-D-nkog81.js} +9 -9
- package/dist/components/{p-BzdIpn5T.js.map → p-D-nkog81.js.map} +1 -1
- package/dist/components/{p-D-s8kK6P.js → p-DMZNbNGd.js} +3 -3
- package/dist/components/{p-D-s8kK6P.js.map → p-DMZNbNGd.js.map} +1 -1
- package/dist/components/{p-ybbnPl4X.js → p-DV8AjnfD.js} +7 -7
- package/dist/components/{p-ybbnPl4X.js.map → p-DV8AjnfD.js.map} +1 -1
- package/dist/components/{p-CSnKPDQz.js → p-Dbeg4f0H.js} +5 -5
- package/dist/components/{p-CSnKPDQz.js.map → p-Dbeg4f0H.js.map} +1 -1
- package/dist/components/{p-CqpahWAy.js → p-DfLxcVkb.js} +3 -3
- package/dist/components/{p-CqpahWAy.js.map → p-DfLxcVkb.js.map} +1 -1
- package/dist/components/{p-5yzkkdZ2.js → p-bkzZLdB8.js} +3 -3
- package/dist/components/{p-5yzkkdZ2.js.map → p-bkzZLdB8.js.map} +1 -1
- package/dist/components/{p-GNK9vrin.js → p-nbx4dU8d.js} +3 -3
- package/dist/components/{p-GNK9vrin.js.map → p-nbx4dU8d.js.map} +1 -1
- package/dist/components/{p-BG0UE2wL.js → p-sZjPKctP.js} +3 -3
- package/dist/components/{p-BG0UE2wL.js.map → p-sZjPKctP.js.map} +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-picker.js +5 -5
- package/dist/components/sd-date-range-picker.js +5 -5
- package/dist/components/sd-guide.js +6 -6
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-loading-spinner.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +5 -5
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-progress.js +2 -2
- package/dist/components/sd-select-multiple-group.js +5 -5
- package/dist/components/sd-select-multiple.js +7 -7
- 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 -1
- package/dist/components/sd-table-backup.js +43 -35
- package/dist/components/sd-table-backup.js.map +1 -1
- package/dist/components/sd-table.js +13 -13
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +2 -2
- package/dist/components/sd-th.js +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-7e18d4cf.entry.js → p-01f47211.entry.js} +2 -2
- package/dist/design-system/{p-88745dfe.entry.js → p-0d4df4c3.entry.js} +2 -2
- package/dist/design-system/p-11d861ed.entry.js +2 -0
- package/dist/design-system/{p-d003ee3d.entry.js → p-22234255.entry.js} +2 -2
- package/dist/design-system/{p-78f90517.entry.js → p-3e682362.entry.js} +2 -2
- package/dist/design-system/p-648c4ab4.entry.js +2 -0
- package/dist/design-system/{p-d74bfbe4.entry.js → p-93718467.entry.js} +2 -2
- package/dist/design-system/{p-a72c4b0c.entry.js → p-b0f0a38e.entry.js} +2 -2
- package/dist/design-system/p-bbb3f844.entry.js +2 -0
- package/dist/design-system/{p-985be35d.entry.js.map → p-bbb3f844.entry.js.map} +1 -1
- package/dist/design-system/{p-01f44c51.entry.js → p-cc279370.entry.js} +2 -2
- package/dist/design-system/{p-8b60af66.entry.js → p-cde3982d.entry.js} +2 -2
- package/dist/design-system/{p-49f98f09.entry.js → p-d3bb6c6a.entry.js} +2 -2
- package/dist/design-system/p-fcd5eb87.entry.js +2 -0
- package/dist/design-system/p-fcd5eb87.entry.js.map +1 -0
- package/dist/design-system/sd-table-backup.entry.esm.js.map +1 -1
- package/dist/esm/sd-badge.entry.js +1 -1
- package/dist/esm/sd-button_15.entry.js +18 -18
- package/dist/esm/sd-card.entry.js +1 -1
- package/dist/esm/sd-date-picker.entry.js +2 -2
- package/dist/esm/sd-date-range-picker.entry.js +2 -2
- package/dist/esm/sd-loading-spinner.entry.js +1 -1
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-progress.entry.js +2 -2
- package/dist/esm/sd-select-multiple.entry.js +2 -2
- package/dist/esm/sd-select-option-group.entry.js +3 -3
- package/dist/esm/sd-table-backup.entry.js +32 -24
- package/dist/esm/sd-table-backup.entry.js.map +1 -1
- package/dist/esm/sd-tag.entry.js +1 -1
- package/dist/esm/sd-td.entry.js +2 -2
- package/dist/types/components.d.ts +2 -2
- package/hydrate/index.js +71 -63
- package/hydrate/index.mjs +71 -63
- package/package.json +5 -3
- package/dist/collection/components/sd-table/sd-table-backup.js +0 -2743
- package/dist/collection/components/sd-table/sd-table-backup.js.map +0 -1
- package/dist/design-system/p-671a08a6.entry.js +0 -2
- package/dist/design-system/p-671a08a6.entry.js.map +0 -1
- package/dist/design-system/p-6a624672.entry.js +0 -2
- package/dist/design-system/p-985be35d.entry.js +0 -2
- package/dist/design-system/p-ef5ffaa2.entry.js +0 -2
- /package/dist/design-system/{p-7e18d4cf.entry.js.map → p-01f47211.entry.js.map} +0 -0
- /package/dist/design-system/{p-88745dfe.entry.js.map → p-0d4df4c3.entry.js.map} +0 -0
- /package/dist/design-system/{p-6a624672.entry.js.map → p-11d861ed.entry.js.map} +0 -0
- /package/dist/design-system/{p-d003ee3d.entry.js.map → p-22234255.entry.js.map} +0 -0
- /package/dist/design-system/{p-78f90517.entry.js.map → p-3e682362.entry.js.map} +0 -0
- /package/dist/design-system/{p-ef5ffaa2.entry.js.map → p-648c4ab4.entry.js.map} +0 -0
- /package/dist/design-system/{p-d74bfbe4.entry.js.map → p-93718467.entry.js.map} +0 -0
- /package/dist/design-system/{p-a72c4b0c.entry.js.map → p-b0f0a38e.entry.js.map} +0 -0
- /package/dist/design-system/{p-01f44c51.entry.js.map → p-cc279370.entry.js.map} +0 -0
- /package/dist/design-system/{p-8b60af66.entry.js.map → p-cde3982d.entry.js.map} +0 -0
- /package/dist/design-system/{p-49f98f09.entry.js.map → p-d3bb6c6a.entry.js.map} +0 -0
- /package/dist/types/components/{sd-table → sd-table-backup}/sd-table-backup.d.ts +0 -0
|
@@ -155,9 +155,9 @@ const SdDateRangePicker = class {
|
|
|
155
155
|
this.isOpen = false;
|
|
156
156
|
};
|
|
157
157
|
render() {
|
|
158
|
-
return (h(Host, { key: '
|
|
158
|
+
return (h(Host, { key: '2bf90dc0cc8c7fa28a9ed88d1f67c0826c6f7c74', class: "sd-date-range-picker" }, h("sd-input", { key: '00705df2fe74a5dd5bd270bf69257c937e3b98f0', 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: {
|
|
159
159
|
margin: '0 0 0 8px',
|
|
160
|
-
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '
|
|
160
|
+
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '34916f9c4797bd0ddaaaa66c57221bee5a6681b6', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '29ae017fe4f49df50cb4ff31336e3b44e5a56a5e', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'fb8e0980afac362b22cd9b20b120d2eb6ee23a43', class: "sd-date-range-picker__menu" }, h("div", { key: 'e8107df76a146afa831c62084a6496930a67febd', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '8b668baded6ff07770fd053e27f62789b0b8bce2', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '152132ebf96e70b27815ef01fa4f58dd2e72891e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b8e7020028efbc2cc483a373cedd50b1467cfdfe', class: "header-label" }, this.prevYear), h("button", { key: 'fd19bd0c39030a45455166511a579a50006a82f7', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '0f268ec6557ba76749937c94fdfe4a3d624702c7', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'cb9d72fc71c4cf30dabe739baa78aa12f4ef228a', 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
|
|
161
161
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
162
162
|
: `${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 ===
|
|
163
163
|
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 ===
|
|
@@ -7,7 +7,7 @@ const SdLoadingSpinner = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '32a6ae7706e16b9db81b71c07f3a21fbb220e60b' }, h("svg", { key: 'b61e628718162036c1540596b2c65849db37e145', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '5e22c733ac2e24c65267d657443260b70c2b707f', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
SdLoadingSpinner.style = sdLoadingSpinnerCss;
|
|
@@ -37,11 +37,11 @@ const SdPopover = class {
|
|
|
37
37
|
this.showPopover = false;
|
|
38
38
|
};
|
|
39
39
|
render() {
|
|
40
|
-
return (h(Fragment, { key: '
|
|
40
|
+
return (h(Fragment, { key: 'f7d868fe01f6581696734d08170c59d6e2d66c94' }, 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: '7846b8c93a38969514390a1ea40d5afe6c200de2', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'be1329e93d0ab1e66bf575a094a25290bddd5eeb', class: {
|
|
41
41
|
'sd-popover-menu': true,
|
|
42
42
|
[`sd-popover-menu--${this.placement}`]: true,
|
|
43
43
|
[this.menuClass]: !!this.menuClass,
|
|
44
|
-
} }, h("i", { key: '
|
|
44
|
+
} }, h("i", { key: '1c3127247ddc6044e53a75d4579125e1daab032a', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'd1024814728db04093907521b580bdf0359e9aed' })), h("div", { key: '2e2fcca71d8ac944c55c013eb14cd5b59567aa6e', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'cc6c83b6fa37e70a7deb430720693592b8a41e71', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'f91f9a3f1a45485743d76cae7c016bd63564613d', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'ffd219508aa2f6b3b28f1491091ce1a8fbb2d6aa', 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: '75697c3987694b0f27626b3731b93b84cc9c81a6', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'fc139a83b11abf239e017dd0d9caf1568c36c99d', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
45
45
|
}
|
|
46
46
|
static get watchers() { return {
|
|
47
47
|
"show": ["watchShowHandler"]
|
|
@@ -19,10 +19,10 @@ const SdProgress = class {
|
|
|
19
19
|
error: '#FB4444',
|
|
20
20
|
};
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: '1bbd63533b614796a5eaf2009a3b2be2e33a0fc5', style: {
|
|
23
23
|
'--progress-color': this.statusColor[this.status],
|
|
24
24
|
'--progress-percentage': `${this.percentage}%`,
|
|
25
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '
|
|
25
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '94fd4a76b8fcc32b2a6f0575ffcc819c7e908d28', class: "sd-progress__label" }, this.label)));
|
|
26
26
|
}
|
|
27
27
|
renderBarProgress() {
|
|
28
28
|
return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
|
|
@@ -213,11 +213,11 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
|
|
|
213
213
|
'--select-width': this.width || '200px',
|
|
214
214
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
215
215
|
};
|
|
216
|
-
return (h(Host, { key: '
|
|
216
|
+
return (h(Host, { key: '86eb209469905a2992fc45ad246420d98df6e78a', style: style }, h("div", { key: 'a85fc4b2bb5dbf951a1388704923672bd1430355', class: {
|
|
217
217
|
'sd-select-multiple': true,
|
|
218
218
|
'sd-select-multiple--open': this.isOpen,
|
|
219
219
|
'sd-select-multiple--disabled': this.disabled,
|
|
220
|
-
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '
|
|
220
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '01e1004445aecf2b1f8d1808f6b80cbc675bf378', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
221
221
|
}
|
|
222
222
|
renderLabel(label) {
|
|
223
223
|
if (!label)
|
|
@@ -46,7 +46,7 @@ const SdSelectOptionGroup = class {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
render() {
|
|
49
|
-
return (h("div", { key: '
|
|
49
|
+
return (h("div", { key: 'cd1e638e01313eacc2253ef9f341eeeef90190d9', class: {
|
|
50
50
|
'sd-select__option-group': true,
|
|
51
51
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
52
52
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -55,10 +55,10 @@ const SdSelectOptionGroup = class {
|
|
|
55
55
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
56
56
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
57
57
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
58
|
-
}, 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: '
|
|
58
|
+
}, 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: '85a5ce3861e43d3cbde9cbf82c1d4c51439199f2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '1e4d066daf72f8a1b00927206bda0385bd5a28f0', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
59
59
|
e.preventDefault();
|
|
60
60
|
this.handleClick(this.option, this.isSelected, e);
|
|
61
|
-
} })), h("span", { key: '
|
|
61
|
+
} })), h("span", { key: 'df4f05045d0e14310a79ed9c33486dd98887c771', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'd8995c3f266b0fb6d686e8713e304b73f1e73f4f', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
SdSelectOptionGroup.style = sdSelectOptionGroupCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-B2T3tS5r.js';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-height, auto);border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;position:relative;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;min-height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
|
|
4
4
|
|
|
5
5
|
const SdTable = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -58,6 +58,9 @@ const SdTable = class {
|
|
|
58
58
|
this.innerRows = [...(this.rows || [])];
|
|
59
59
|
this.innerSelected = new Set(this.selected);
|
|
60
60
|
this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
|
|
61
|
+
if (this.pagination?.page) {
|
|
62
|
+
this.currentPage = this.pagination.page;
|
|
63
|
+
}
|
|
61
64
|
}
|
|
62
65
|
componentDidLoad() {
|
|
63
66
|
// SSR 환경 체크
|
|
@@ -195,32 +198,37 @@ const SdTable = class {
|
|
|
195
198
|
}, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
|
|
196
199
|
}
|
|
197
200
|
renderBody() {
|
|
198
|
-
return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))),
|
|
199
|
-
|
|
200
|
-
'sd-td--selected': true,
|
|
201
|
-
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
202
|
-
}, style: {
|
|
203
|
-
'--sticky-left-offset': '0px',
|
|
204
|
-
} }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
|
|
205
|
-
const rendered = this.bodyCellRenderer?.(column, row);
|
|
206
|
-
return (h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
201
|
+
return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.paginatedRows.length > 0 &&
|
|
202
|
+
this.paginatedRows.map((row, rowIdx) => (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (h("td", { class: {
|
|
207
203
|
'sd-td': true,
|
|
208
|
-
|
|
209
|
-
'sticky-left': Boolean(this.stickyColumn.left &&
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
204
|
+
'sd-td--selected': true,
|
|
205
|
+
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
206
|
+
}, style: {
|
|
207
|
+
'--sticky-left-offset': '0px',
|
|
208
|
+
} }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
|
|
209
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
210
|
+
return (h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
211
|
+
'sd-td': true,
|
|
212
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
213
|
+
'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
|
|
214
|
+
'sticky-right': Boolean(this.stickyColumn.right &&
|
|
215
|
+
colIdx >= this.visibleColumns.length - this.stickyColumn.right),
|
|
216
|
+
'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
|
|
217
|
+
'sticky-right-edge': Boolean(this.stickyColumn.right &&
|
|
218
|
+
colIdx === this.visibleColumns.length - this.stickyColumn.right),
|
|
219
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
220
|
+
}, style: this.getStickyStyle(colIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
221
|
+
}))))));
|
|
218
222
|
}
|
|
219
223
|
render() {
|
|
220
|
-
return (h(Host, { key: '
|
|
224
|
+
return (h(Host, { key: 'ee3eb5ad4f65daab37de226dad5dbb9f9a64c82d' }, h("div", { key: '3e05c9484a72cef763c46b1ebcda1832b89f8825', class: "sd-table__wrapper", style: {
|
|
221
225
|
'--table-width': this.width,
|
|
222
226
|
'--table-height': this.height,
|
|
223
|
-
} }, h("div", { key: '
|
|
227
|
+
} }, h("div", { key: 'e31f9c354d9c66eb3e4f5881ea0af7b435725977', class: "sd-table__container" }, h("div", { key: '630e1b8503fc9917b9dd19179aa08612ecd77b25', class: {
|
|
228
|
+
'sd-table__middle': true,
|
|
229
|
+
'sd-table__middle--scrollable': this.paginatedRows.length > 0,
|
|
230
|
+
'sd-table__middle--loading': this.isLoading,
|
|
231
|
+
} }, h("table", { key: 'b80c56b7445ffd197621c5040e27d05b6c97653e', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: 'f6f5bcf2b67dde98c3bb2b766e834d72a2e0c9bc', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: 'a3a85d00cb08cb66af7afbf0a86a2ca9e5666870', class: "sd-table__no-data" }, h("slot", { key: 'c1610ef9b817d35e067d34746286861a24080f90', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'd449f2aa604b623c52cbec21dbb5f07c0c06098e', class: "sd-table__pagination" }, h("sd-pagination", { key: 'f051c1760a8742e9c793efd8f6cebacb6b51e1d8', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
|
|
224
232
|
if (!this.useInternalPagination) {
|
|
225
233
|
this.sdPageChange.emit(e.detail);
|
|
226
234
|
}
|
|
@@ -228,7 +236,7 @@ const SdTable = class {
|
|
|
228
236
|
this.currentPage = e.detail;
|
|
229
237
|
this.sdPageChange.emit(this.currentPage);
|
|
230
238
|
}
|
|
231
|
-
} }), this.useRowsPerPageSelect && (h("sd-select", { key: '
|
|
239
|
+
} }), this.useRowsPerPageSelect && (h("sd-select", { key: '81542b68c3019afa6e1d85d4d92ebf1ab8893646', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
|
|
232
240
|
const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
|
|
233
241
|
if (!this.useInternalPagination) {
|
|
234
242
|
this.sdRowsPerPageChange.emit(changedRowsPerPage);
|
|
@@ -257,7 +265,7 @@ const SdTable = class {
|
|
|
257
265
|
"pagination": ["handlePaginationChange"]
|
|
258
266
|
}; }
|
|
259
267
|
};
|
|
260
|
-
SdTable.style =
|
|
268
|
+
SdTable.style = sdTableBackupCss;
|
|
261
269
|
|
|
262
270
|
export { SdTable as sd_table_backup };
|
|
263
271
|
//# sourceMappingURL=sd-table-backup.entry.js.map
|