@sellmate/design-system 0.0.17 → 0.0.18
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 +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +1 -1
- package/dist/cjs/sd-button_2.cjs.entry.js +1 -1
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- 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 +1 -1
- package/dist/cjs/sd-checkbox_9.cjs.entry.js +92 -39
- package/dist/cjs/sd-date-box.cjs.entry.js +2 -2
- 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-guide.cjs.entry.js +3 -3
- package/dist/cjs/sd-pagination_2.cjs.entry.js +4 -4
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-table.cjs.entry.js +2 -2
- package/dist/cjs/sd-tag.cjs.entry.js +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-checkbox/sd-checkbox.css +15 -17
- package/dist/collection/components/sd-checkbox/sd-checkbox.js +2 -2
- package/dist/collection/components/sd-checkbox/sd-checkbox.js.map +1 -1
- package/dist/collection/components/sd-date-box/sd-date-box.js +2 -2
- 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-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-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select.css +1 -1
- package/dist/collection/components/sd-select/sd-select.js +2 -2
- package/dist/collection/components/sd-select/sd-select.js.map +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-multiple-group.js +71 -15
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js.map +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +32 -11
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +47 -12
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js.map +1 -1
- package/dist/collection/components/sd-table/sd-table.js +2 -2
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/{p-Biihf4L_.js → p-BIPygw9h.js} +3 -3
- package/dist/components/{p-Biihf4L_.js.map → p-BIPygw9h.js.map} +1 -1
- package/dist/components/{p-Ctp8Jcfa.js → p-BYljcT76.js} +6 -6
- package/dist/components/p-BYljcT76.js.map +1 -0
- package/dist/components/{p-C9h8A06v.js → p-C2Pz32ZQ.js} +7 -7
- package/dist/components/{p-C9h8A06v.js.map → p-C2Pz32ZQ.js.map} +1 -1
- package/dist/components/{p-OUj9ew5s.js → p-CJ4AYwcp.js} +5 -5
- package/dist/components/{p-OUj9ew5s.js.map → p-CJ4AYwcp.js.map} +1 -1
- package/dist/components/{p-B60pARKe.js → p-COjeSZYo.js} +3 -3
- package/dist/components/{p-B60pARKe.js.map → p-COjeSZYo.js.map} +1 -1
- package/dist/components/{p-CxfkkYH4.js → p-CvgvoI09.js} +3 -3
- package/dist/components/{p-CxfkkYH4.js.map → p-CvgvoI09.js.map} +1 -1
- package/dist/components/{p-03XlrG8V.js → p-D4mmLFMz.js} +4 -4
- package/dist/components/{p-03XlrG8V.js.map → p-D4mmLFMz.js.map} +1 -1
- package/dist/components/{p-BXPm14Mz.js → p-D7CUg2TH.js} +3 -3
- package/dist/components/{p-BXPm14Mz.js.map → p-D7CUg2TH.js.map} +1 -1
- package/dist/components/{p-BSERuUHP.js → p-GMtCKhd1.js} +5 -5
- package/dist/components/{p-BSERuUHP.js.map → p-GMtCKhd1.js.map} +1 -1
- package/dist/components/{p-ChtYytaJ.js → p-i3HJi3se.js} +5 -5
- package/dist/components/{p-ChtYytaJ.js.map → p-i3HJi3se.js.map} +1 -1
- package/dist/components/{p-CjFMRk1X.js → p-k8sYEez5.js} +16 -17
- package/dist/components/p-k8sYEez5.js.map +1 -0
- 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-box.js +1 -1
- package/dist/components/sd-date-picker.js +6 -6
- package/dist/components/sd-date-range-picker.js +6 -6
- 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-pagination.js +1 -1
- package/dist/components/sd-popover.js +5 -5
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-select-multiple-group.js +76 -20
- package/dist/components/sd-select-multiple-group.js.map +1 -1
- 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 +8 -8
- package/dist/components/sd-select.js.map +1 -1
- package/dist/components/sd-table.js +8 -8
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-3435bfa7.entry.js → p-05e67753.entry.js} +2 -2
- package/dist/design-system/{p-17a6e9a6.entry.js → p-0b798814.entry.js} +2 -2
- package/dist/design-system/{p-53475fb4.entry.js → p-401fc23d.entry.js} +2 -2
- package/dist/design-system/{p-f9d2e115.entry.js → p-493d5ae0.entry.js} +2 -2
- package/dist/design-system/{p-68ce5720.entry.js → p-66889084.entry.js} +2 -2
- package/dist/design-system/p-6925d253.entry.js +2 -0
- package/dist/design-system/p-6925d253.entry.js.map +1 -0
- package/dist/design-system/{p-7e7c4c50.entry.js → p-7b514aae.entry.js} +2 -2
- package/dist/design-system/{p-172ac888.entry.js → p-818f7064.entry.js} +2 -2
- package/dist/design-system/{p-26ee9e78.entry.js → p-a08e4575.entry.js} +2 -2
- package/dist/design-system/{p-fbff7da1.entry.js → p-ba68424d.entry.js} +2 -2
- package/dist/design-system/{p-9c782858.entry.js → p-cb191454.entry.js} +2 -2
- package/dist/design-system/{p-273d1488.entry.js → p-cb5f4323.entry.js} +2 -2
- 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 +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-badge.entry.js +1 -1
- package/dist/esm/sd-button_2.entry.js +1 -1
- package/dist/esm/sd-card.entry.js +1 -1
- 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 +1 -1
- package/dist/esm/sd-checkbox_9.entry.js +92 -39
- package/dist/esm/sd-date-box.entry.js +2 -2
- 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-guide.entry.js +3 -3
- package/dist/esm/sd-pagination_2.entry.js +4 -4
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-table.entry.js +2 -2
- package/dist/esm/sd-tag.entry.js +1 -1
- package/dist/types/components/sd-select/sd-select.d.ts +2 -1
- package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +3 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts +5 -0
- package/dist/types/components.d.ts +16 -0
- package/hydrate/index.js +115 -60
- package/hydrate/index.mjs +115 -60
- package/package.json +2 -2
- package/dist/components/p-CjFMRk1X.js.map +0 -1
- package/dist/components/p-Ctp8Jcfa.js.map +0 -1
- package/dist/design-system/p-f998a926.entry.js +0 -2
- package/dist/design-system/p-f998a926.entry.js.map +0 -1
- /package/dist/design-system/{p-3435bfa7.entry.js.map → p-05e67753.entry.js.map} +0 -0
- /package/dist/design-system/{p-17a6e9a6.entry.js.map → p-0b798814.entry.js.map} +0 -0
- /package/dist/design-system/{p-53475fb4.entry.js.map → p-401fc23d.entry.js.map} +0 -0
- /package/dist/design-system/{p-f9d2e115.entry.js.map → p-493d5ae0.entry.js.map} +0 -0
- /package/dist/design-system/{p-68ce5720.entry.js.map → p-66889084.entry.js.map} +0 -0
- /package/dist/design-system/{p-7e7c4c50.entry.js.map → p-7b514aae.entry.js.map} +0 -0
- /package/dist/design-system/{p-172ac888.entry.js.map → p-818f7064.entry.js.map} +0 -0
- /package/dist/design-system/{p-26ee9e78.entry.js.map → p-a08e4575.entry.js.map} +0 -0
- /package/dist/design-system/{p-fbff7da1.entry.js.map → p-ba68424d.entry.js.map} +0 -0
- /package/dist/design-system/{p-9c782858.entry.js.map → p-cb191454.entry.js.map} +0 -0
- /package/dist/design-system/{p-273d1488.entry.js.map → p-cb5f4323.entry.js.map} +0 -0
|
@@ -82,9 +82,9 @@ const SdDatePicker = class {
|
|
|
82
82
|
this.isOpen = false;
|
|
83
83
|
};
|
|
84
84
|
render() {
|
|
85
|
-
return (index.h(index.Host, { key: '
|
|
85
|
+
return (index.h(index.Host, { key: '84beddb7facbc2eaabc5b606392b30f5c1601eb6', class: "sd-date-picker" }, index.h("sd-input", { key: 'e8110cae23aaa71047762850ab1ac0ecad39fbf8', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
86
86
|
margin: '0 0 0 8px',
|
|
87
|
-
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '
|
|
87
|
+
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '9668799fd1b978b8d84228cbce66020ecf9c953a', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'bdd3d055e108d0965fd33b39521e45d398d56657', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '32c9bf2c90f65d7341a06f1aa885eaf5830b790d', class: "sd-date-picker__menu" }, index.h("div", { key: '998be0bcd3acedce805fa64b6b1d627751c7a021', class: "sd-date-picker__header" }, index.h("div", { key: 'fbcc16d1a914086eac22ec0769041a7cfb68c4ac', class: "year-nav" }, index.h("button", { key: 'a0483c5a5c11b96e4d04a8705eaeb834a67aabc1', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '417934cc7f8d3a26a1ab7f7d06c4a19cc8f71838', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '9cc39d471b835312480483054b11bfb3a524a8a4', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '9963b625be6c33c9a7d6c4aabce8aeac04a5e5d8', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '0414b554e1ae46b414d0829bbbbbd109241a1f0e', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '9eab999da7ef2a34f375f96ff799bf75500866da', class: "month-nav" }, index.h("button", { key: 'ba70f14d3344474b5faaa0778ce1838f00235880', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '3c69117050d690d06071040b7b110f28368d4b2b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'a3f85e24150dcfd644ac98f4075fc63b39cc389a', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '4a2e1c80dad428397120cf226807491474b9fef0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '11f19f794d230afb29854717520dab17b90bf6e2', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '0dc4fb36b3395f3f626726ffc2c564b7efa7bf1f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '973a4f62ac5588ad8398e668dfa9a1a5808e2860', class: "sd-date-picker__body" }, [
|
|
88
88
|
...this.calendar.prevMonthDays,
|
|
89
89
|
...this.calendar.days,
|
|
90
90
|
...this.calendar.afterMonthDays,
|
|
@@ -157,9 +157,9 @@ const SdDateRangePicker = class {
|
|
|
157
157
|
this.isOpen = false;
|
|
158
158
|
};
|
|
159
159
|
render() {
|
|
160
|
-
return (index.h(index.Host, { key: '
|
|
160
|
+
return (index.h(index.Host, { key: '7b5927d900306fe0dd51931ccc606f8cc4799298', class: "sd-date-range-picker" }, index.h("sd-input", { key: 'a88ecd162f6bf66d6a81b008d990741c85836702', 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: {
|
|
161
161
|
margin: '0 0 0 8px',
|
|
162
|
-
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '
|
|
162
|
+
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '22dd8cf3231fd7409cf37474c839d08230daaf0d', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'a5067d11416437d885a42745e95f614c8b85030d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'c4478289503f76363051fec4ea48eab63400da24', class: "sd-date-range-picker__menu" }, index.h("div", { key: '5aa461caf52b0cbcab7e9390b50988c410cac7cb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '9ee59b3d4d08ab1bb22f1ca9a99b658d25163f2b', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '7478ca20ece1d0720c93ab809408af069c3a51e6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '221890339d4c692250a5c204c8ebffd7fff86f12', class: "header-label" }, this.prevYear), index.h("button", { key: 'ccc70fdb3fe6a50460d8156590927edeed0f2eba', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: 'e70523f34340c4948d014d861c5be107385e7181', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: 'ab67de7e6bcc992486bf030b5c648a22265ed411', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
|
|
163
163
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
164
164
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
|
|
165
165
|
this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: useDatePicker.today ===
|
|
@@ -81,7 +81,7 @@ const SdGuide = class {
|
|
|
81
81
|
render() {
|
|
82
82
|
// const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
|
|
83
83
|
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
84
|
-
return (index.h(index.Host, { key: '
|
|
84
|
+
return (index.h(index.Host, { key: 'e6db8a6f508122254393eb1d9a1ccb5f10192e50' }, index.h("sd-button", { key: 'df737688c5eb29485eaec14894a051824d7c1c9b', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
|
|
85
85
|
// buttonStyle={{
|
|
86
86
|
// height: '28px',
|
|
87
87
|
// minHeight: '28px',
|
|
@@ -93,9 +93,9 @@ const SdGuide = class {
|
|
|
93
93
|
// fontWeight: '400',
|
|
94
94
|
// backgroundColor: 'var(--guide-background)',
|
|
95
95
|
// }}
|
|
96
|
-
onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '
|
|
96
|
+
onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: 'badde689ee0f6cdd0c3c0406894761be779e079e', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '5ac87ededf1b8b0ad1d5145551b74e0f2868b8a9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '6e56ea467fdad7037c8331c5a35184530101962e', class: "sd-guide__popup__close", icon: "close", color: color.colors.grey_65, size: "md", variant: "ghost", noHover: true,
|
|
97
97
|
// buttonStyle={{ padding: '0px', minHeight: '0px' }}
|
|
98
|
-
onSdClick: this.closeDropdown }), index.h("div", { key: '
|
|
98
|
+
onSdClick: this.closeDropdown }), index.h("div", { key: '81414d84ee3314912035adce13afd8f559099b72', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'a90da4a81d2da7065bfa3335c26efd834bd941b3', name: "helpOutline", size: 24, color: color.colors.green_65 }), index.h("h3", { key: 'f01358a92ec297782f8ab394c3fa56277d2a9af1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), index.h("ul", { key: '9d0c130e6fdfaa3016199029d0fef5ea153153ed', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
99
99
|
}
|
|
100
100
|
// 현재 2depth까지만 스타일 적용
|
|
101
101
|
renderListItem(message, depth = 0) {
|
|
@@ -83,12 +83,12 @@ const SdPagination = class {
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
render() {
|
|
86
|
-
return (index.h("div", { key: '
|
|
86
|
+
return (index.h("div", { key: 'c73e80cca3ae34331a653f40fcea9f21853729bc', class: this.paginationClasses }, index.h("div", { key: '0c1be2da1bbb9ca12ed44739c45c083da9b94657', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
87
87
|
'pagination-btn': true,
|
|
88
88
|
'pagination-btn--selected': this.currentPage === n,
|
|
89
89
|
}, disabled: this.currentPage === n, style: {
|
|
90
90
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
91
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '
|
|
91
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '866070b571aab944f6f7521b72479c5b26fca000', class: "append-btns" }, this.renderNextButtons())));
|
|
92
92
|
}
|
|
93
93
|
static get watchers() { return {
|
|
94
94
|
"currentPage": ["onPropChange"],
|
|
@@ -129,11 +129,11 @@ const SdTooltip = class {
|
|
|
129
129
|
: {
|
|
130
130
|
onClick: () => (console.log('click tooltip'), (this.showTooltip = !this.showTooltip)),
|
|
131
131
|
};
|
|
132
|
-
return (index.h(index.Fragment, { key: '
|
|
132
|
+
return (index.h(index.Fragment, { key: '888e359c993244c0175ee8526015b9e142110973' }, this.label ? (index.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-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: 'bd304ee555a79fac52fcd03d6c27ba158800b531', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '1c7fb484df8836ffc456029d9b394c249ab19d9d', class: {
|
|
133
133
|
'sd-tooltip-menu': true,
|
|
134
134
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
135
135
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
136
|
-
} }, index.h("i", { key: '
|
|
136
|
+
} }, index.h("i", { key: 'ea7c760b17635a7c09604d99f7d4216970c072db', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '92994ac4e8834bae876a9702f38d074dd697abee' })), index.h("div", { key: '979090bd76ae1a1e5a331faa03d9f670b646ec77', class: "sd-tooltip-menu__content" }, index.h("slot", { key: '273376d5996f788c50c6a0f5093ec766d8bb3b24' }, this.el.textContent)), this.useClose && (index.h("div", { key: 'a45363689d51ebdb68294ecd1b0a163a1175efe3', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'b9e73e19e0e03410fdcd71924a31217b6b58bca3', onClick: () => this.handleClose() }, index.h("sd-icon", { key: '75d7590ef875d3aa035af095bd6cc84a61fb2a43', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
137
137
|
}
|
|
138
138
|
};
|
|
139
139
|
SdTooltip.style = sdTooltipCss;
|
|
@@ -39,11 +39,11 @@ const SdPopover = class {
|
|
|
39
39
|
this.showPopover = false;
|
|
40
40
|
};
|
|
41
41
|
render() {
|
|
42
|
-
return (index.h(index.Fragment, { key: '
|
|
42
|
+
return (index.h(index.Fragment, { key: 'dffadde8218c26c620b641a5d95799fbfe08b34b' }, this.label ? (index.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)) })) : (index.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 && (index.h("sd-tooltip-portal", { key: '6cb7de8b74b9be12131a730a2d02bd304e3524e7', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '901d1fc65e9d94c29acca872c55b02128835f4de', class: {
|
|
43
43
|
'sd-popover-menu': true,
|
|
44
44
|
[`sd-popover-menu--${this.placement}`]: true,
|
|
45
45
|
[this.menuClass]: !!this.menuClass,
|
|
46
|
-
} }, index.h("i", { key: '
|
|
46
|
+
} }, index.h("i", { key: '6465c9decc572754469759e6f9ba237e6098c245', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '8f65907035de80f0ac721df90a76c8cff706892e' })), index.h("div", { key: 'a7dedd510101561be1137fcb1f8c43dca2d13383', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: '425038b84031c4082348d7a2d5bc3384f4ce87ea', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '0a07d84656579a773924b0b066c9dbd48d44c6b3', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'b2daa7b83fbe582cbb829fa8b2bd8e73d3947b48', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '3ceae5f183e487f30570a471bdfada588519ac30', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '7fe6275cc500f8e963766bdfedc3f3b8a79a3609', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
47
47
|
}
|
|
48
48
|
static get watchers() { return {
|
|
49
49
|
"show": ["watchShowHandler"]
|
|
@@ -208,10 +208,10 @@ const SdTable = class {
|
|
|
208
208
|
}))))));
|
|
209
209
|
}
|
|
210
210
|
render() {
|
|
211
|
-
return (index.h(index.Host, { key: '
|
|
211
|
+
return (index.h(index.Host, { key: 'c728250d385b4827eb4ba01f5f196f31d821a47a' }, index.h("div", { key: '53bae364e8b2e57e4da21a96f423260e4daa1258', class: "sd-table__wrapper", style: {
|
|
212
212
|
'--table-width': this.width,
|
|
213
213
|
'--table-height': this.height,
|
|
214
|
-
} }, index.h("div", { key: '
|
|
214
|
+
} }, index.h("div", { key: '335f39cb9f01adce0b619d201cd8157c6abd6d77', class: "sd-table__container" }, index.h("div", { key: '0e8679571f1b06675a263a356cc2c7e7e9bcf38a', class: "sd-table__middle" }, index.h("table", { key: 'cdc472d67359460e73a52057dd9dc0793ff907a9', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), index.h("div", { key: '183446192b9724ef85fbcbcaded436d9247f52e0', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: 'd1d36cd90c3513bada8b86e38f637f318c0595ed', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'c6bba92b076e77f83577772ccbe54e7fc14e52dd', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
|
|
215
215
|
this.currentPage = e.detail;
|
|
216
216
|
this.sdPageChange.emit(this.currentPage);
|
|
217
217
|
} }))))));
|
|
@@ -45,7 +45,7 @@ const SdTag = class {
|
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
47
|
const tagClasses = this.getTagClasses();
|
|
48
|
-
return (index.h("span", { key: '
|
|
48
|
+
return (index.h("span", { key: '42250b22292bd0f6d6ffd4dc46ceda624a7001ba', class: tagClasses, style: {
|
|
49
49
|
'--tag-bg-color': this.bgColor,
|
|
50
50
|
'--tag-text-color': this.textColor,
|
|
51
51
|
}, "aria-label": this.label || 'tag' }, this.renderContent()));
|
|
@@ -6,7 +6,7 @@ export class SdBadge {
|
|
|
6
6
|
label = '';
|
|
7
7
|
render() {
|
|
8
8
|
const resolvedColor = resolveColor(this.color);
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: '51f36d44f20e67ac5fb02ad6ed546742c70a1683' }, h("div", { key: '40ae2bd020c4e13a663a58718c3500aac08dcfb5', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '0c807f3223d4911283d64c2d78200c0f0c64dc9e', class: "sd-badge__dot" }), h("div", { key: 'b024a9a0753ec9b1f7e6dcf8fd2b4ad1b011a01b', class: "sd-badge__label" }, this.label))));
|
|
10
10
|
}
|
|
11
11
|
static get is() { return "sd-badge"; }
|
|
12
12
|
static get encapsulation() { return "scoped"; }
|
|
@@ -3,7 +3,7 @@ export class SdCard {
|
|
|
3
3
|
bordered = true;
|
|
4
4
|
class = '';
|
|
5
5
|
render() {
|
|
6
|
-
return (h(Host, { key: '
|
|
6
|
+
return (h(Host, { key: 'aa59e9617d3a7a0f497328316d932499712e0ba1' }, h("div", { key: 'b3e91d70476abfaae652de71b4d9c2dc9ef268da', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '03ea061b013a5fc927b0f7edca68195d0b01de2d' }))));
|
|
7
7
|
}
|
|
8
8
|
static get is() { return "sd-card"; }
|
|
9
9
|
static get originalStyleUrls() {
|
|
@@ -1307,13 +1307,11 @@ textarea {
|
|
|
1307
1307
|
cursor: pointer;
|
|
1308
1308
|
}
|
|
1309
1309
|
|
|
1310
|
-
|
|
1310
|
+
sd-checkbox {
|
|
1311
1311
|
display: inline-block;
|
|
1312
|
-
height:
|
|
1313
|
-
line-height: 0;
|
|
1312
|
+
height: 20px;
|
|
1314
1313
|
}
|
|
1315
|
-
|
|
1316
|
-
.sd-checkbox {
|
|
1314
|
+
sd-checkbox .sd-checkbox {
|
|
1317
1315
|
cursor: pointer;
|
|
1318
1316
|
display: inline-flex;
|
|
1319
1317
|
align-items: center;
|
|
@@ -1321,22 +1319,22 @@ textarea {
|
|
|
1321
1319
|
height: 20px;
|
|
1322
1320
|
max-height: 20px;
|
|
1323
1321
|
}
|
|
1324
|
-
.sd-checkbox > input {
|
|
1322
|
+
sd-checkbox .sd-checkbox > input {
|
|
1325
1323
|
display: none;
|
|
1326
1324
|
}
|
|
1327
|
-
.sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg, .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg {
|
|
1328
|
-
border-color:
|
|
1325
|
+
sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg {
|
|
1326
|
+
border-color: #005cc9;
|
|
1329
1327
|
background: #005cc9;
|
|
1330
1328
|
}
|
|
1331
|
-
.sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg {
|
|
1329
|
+
sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg {
|
|
1332
1330
|
border: 1px solid #0075ff;
|
|
1333
1331
|
background: #d9eaff;
|
|
1334
1332
|
}
|
|
1335
|
-
.sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg {
|
|
1333
|
+
sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg {
|
|
1336
1334
|
border: 1px solid transparent;
|
|
1337
1335
|
background: #eeeeee;
|
|
1338
1336
|
}
|
|
1339
|
-
.sd-checkbox__bg {
|
|
1337
|
+
sd-checkbox .sd-checkbox__bg {
|
|
1340
1338
|
width: 16px;
|
|
1341
1339
|
height: 16px;
|
|
1342
1340
|
border-radius: 2px;
|
|
@@ -1348,26 +1346,26 @@ textarea {
|
|
|
1348
1346
|
overflow: hidden;
|
|
1349
1347
|
line-height: 0;
|
|
1350
1348
|
}
|
|
1351
|
-
.sd-checkbox__label {
|
|
1349
|
+
sd-checkbox .sd-checkbox__label {
|
|
1352
1350
|
font-size: 12px;
|
|
1353
1351
|
color: #333333;
|
|
1354
1352
|
line-height: 20px;
|
|
1355
1353
|
}
|
|
1356
|
-
.sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg, .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg {
|
|
1354
|
+
sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg {
|
|
1357
1355
|
background: #eeeeee;
|
|
1358
1356
|
border: 1px solid #cccccc !important;
|
|
1359
1357
|
}
|
|
1360
|
-
.sd-checkbox--checked .sd-checkbox__bg, .sd-checkbox--indeterminate .sd-checkbox__bg {
|
|
1358
|
+
sd-checkbox .sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg {
|
|
1361
1359
|
border: 1px solid #0075ff;
|
|
1362
1360
|
background: #0075ff;
|
|
1363
1361
|
}
|
|
1364
|
-
.sd-checkbox--unchecked .sd-checkbox__bg {
|
|
1362
|
+
sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg {
|
|
1365
1363
|
background: white;
|
|
1366
1364
|
}
|
|
1367
|
-
.sd-checkbox--disabled {
|
|
1365
|
+
sd-checkbox .sd-checkbox--disabled {
|
|
1368
1366
|
cursor: not-allowed;
|
|
1369
1367
|
}
|
|
1370
|
-
.sd-checkbox--disabled .sd-checkbox__bg {
|
|
1368
|
+
sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg {
|
|
1371
1369
|
background: #eeeeee;
|
|
1372
1370
|
border: 1px solid #cccccc !important;
|
|
1373
1371
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
2
|
export class SdCheckbox {
|
|
3
3
|
el;
|
|
4
4
|
/** 현재 선택 상태 또는 배열 형태의 값 */
|
|
@@ -67,7 +67,7 @@ export class SdCheckbox {
|
|
|
67
67
|
this.sdChange.emit(newValue);
|
|
68
68
|
};
|
|
69
69
|
render() {
|
|
70
|
-
return (h(
|
|
70
|
+
return (h("label", { key: 'ed21b6997c63578d297ab3e8f1955d369517f0d4', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "checkbox", "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, h("input", { key: '6aa4fbfa0fb6ac3a4a70c8f9a5fd47e5c63ea1f6', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), h("div", { key: 'a5621e29c8ec928cfe746056e409cddfff2e7ede', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '1890cffd55e46bbde10bc4943b17dbe57212da5e', class: "sd-checkbox__label" }, this.label)));
|
|
71
71
|
}
|
|
72
72
|
static get is() { return "sd-checkbox"; }
|
|
73
73
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-checkbox.js","sourceRoot":"","sources":["../../../src/components/sd-checkbox/sd-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"sd-checkbox.js","sourceRoot":"","sources":["../../../src/components/sd-checkbox/sd-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckedType = boolean | any[] | null;\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 */\r\n @Prop() checked!: CheckedType;\r\n\r\n /** 배열 모드에서의 개별 값 */\r\n @Prop() val?: any;\r\n\r\n /** 비활성화 여부 */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** 표시할 라벨 텍스트 */\r\n @Prop() label: string = '';\r\n\r\n /** 내부 체크 상태 */\r\n @State() private isChecked: boolean | null = false;\r\n\r\n /** 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<CheckedType>;\r\n\r\n componentWillLoad() {\r\n this.updateCheckedState(this.checked);\r\n }\r\n\r\n componentWillRender() {\r\n this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: CheckedType) {\r\n this.updateCheckedState(newValue);\r\n }\r\n\r\n private get checkboxClasses(): string {\r\n const classes = [\r\n 'sd-checkbox',\r\n `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\r\n ];\r\n\r\n if (this.disabled) {\r\n classes.push('sd-checkbox--disabled');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: CheckedType) {\r\n if (value === null) {\r\n this.isChecked = null;\r\n } else if (typeof value === 'boolean') {\r\n this.isChecked = value;\r\n } else if (Array.isArray(value)) {\r\n this.isChecked = this.val !== undefined && value.includes(this.val);\r\n } else {\r\n this.isChecked = false;\r\n }\r\n }\r\n\r\n private handleChange = () => {\r\n if (this.disabled) return;\r\n\r\n let newValue: CheckedType;\r\n\r\n if (typeof this.checked === 'boolean') {\r\n newValue = !this.checked;\r\n } else if (Array.isArray(this.checked)) {\r\n if (this.val === undefined) {\r\n console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n }\r\n\r\n const valueSet = new Set(this.checked);\r\n valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n newValue = Array.from(valueSet);\r\n } else {\r\n newValue = !this.isChecked;\r\n }\r\n\r\n this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n return (\r\n <label\r\n aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\r\n aria-disabled={this.disabled.toString()}\r\n role=\"checkbox\"\r\n aria-label={this.label || 'checkbox'}\r\n class={this.checkboxClasses}\r\n >\r\n <input\r\n type=\"checkbox\"\r\n value={this.val}\r\n checked={!!this.isChecked}\r\n disabled={this.disabled}\r\n onChange={this.handleChange}\r\n name={this.label || 'checkbox'}\r\n />\r\n <div class=\"sd-checkbox__bg\">\r\n {this.isChecked !== false ? (\r\n <sd-icon\r\n name={this.isChecked === true ? 'check' : 'minus'}\r\n size={12}\r\n color={this.disabled ? '#888888' : 'white'}\r\n />\r\n ) : null}\r\n </div>\r\n {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n </label>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -23,7 +23,7 @@ export class SdDateBox {
|
|
|
23
23
|
this.sdMouseOver?.emit(this.date);
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: 'd38fb599ea91f851d33d43ffeb064b715dc1e4ad', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
27
27
|
'sd-date-box': true,
|
|
28
28
|
'sd-hoverable': !this.disabled || !this.selected || this.type === '',
|
|
29
29
|
'sd-date-box--disabled': this.disabled,
|
|
@@ -34,7 +34,7 @@ export class SdDateBox {
|
|
|
34
34
|
'sd-date-box--in-range': this.inRange,
|
|
35
35
|
'sd-date-box--type-start': this.type === 'start',
|
|
36
36
|
'sd-date-box--type-end': this.type === 'end',
|
|
37
|
-
}, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: '
|
|
37
|
+
}, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'c2c7dcc9b384e8d000d8803fa4e4a5fcc1f2e527', class: "sd-date-box__content" }, h("div", { key: '7c002c5356d9c3fcf8ec0c8f751e97fd42e59645', class: "sd-date-box__label" }, this.date))));
|
|
38
38
|
}
|
|
39
39
|
static get is() { return "sd-date-box"; }
|
|
40
40
|
static get encapsulation() { return "scoped"; }
|
|
@@ -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: '84beddb7facbc2eaabc5b606392b30f5c1601eb6', class: "sd-date-picker" }, h("sd-input", { key: 'e8110cae23aaa71047762850ab1ac0ecad39fbf8', 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: '9668799fd1b978b8d84228cbce66020ecf9c953a', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'bdd3d055e108d0965fd33b39521e45d398d56657', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '32c9bf2c90f65d7341a06f1aa885eaf5830b790d', class: "sd-date-picker__menu" }, h("div", { key: '998be0bcd3acedce805fa64b6b1d627751c7a021', class: "sd-date-picker__header" }, h("div", { key: 'fbcc16d1a914086eac22ec0769041a7cfb68c4ac', class: "year-nav" }, h("button", { key: 'a0483c5a5c11b96e4d04a8705eaeb834a67aabc1', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '417934cc7f8d3a26a1ab7f7d06c4a19cc8f71838', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '9cc39d471b835312480483054b11bfb3a524a8a4', class: "year-nav__current" }, this.currentYear), h("button", { key: '9963b625be6c33c9a7d6c4aabce8aeac04a5e5d8', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '0414b554e1ae46b414d0829bbbbbd109241a1f0e', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '9eab999da7ef2a34f375f96ff799bf75500866da', class: "month-nav" }, h("button", { key: 'ba70f14d3344474b5faaa0778ce1838f00235880', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3c69117050d690d06071040b7b110f28368d4b2b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'a3f85e24150dcfd644ac98f4075fc63b39cc389a', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '4a2e1c80dad428397120cf226807491474b9fef0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '11f19f794d230afb29854717520dab17b90bf6e2', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '0dc4fb36b3395f3f626726ffc2c564b7efa7bf1f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '973a4f62ac5588ad8398e668dfa9a1a5808e2860', 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: '7b5927d900306fe0dd51931ccc606f8cc4799298', class: "sd-date-range-picker" }, h("sd-input", { key: 'a88ecd162f6bf66d6a81b008d990741c85836702', 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: '22dd8cf3231fd7409cf37474c839d08230daaf0d', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'a5067d11416437d885a42745e95f614c8b85030d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c4478289503f76363051fec4ea48eab63400da24', class: "sd-date-range-picker__menu" }, h("div", { key: '5aa461caf52b0cbcab7e9390b50988c410cac7cb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '9ee59b3d4d08ab1bb22f1ca9a99b658d25163f2b', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '7478ca20ece1d0720c93ab809408af069c3a51e6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '221890339d4c692250a5c204c8ebffd7fff86f12', class: "header-label" }, this.prevYear), h("button", { key: 'ccc70fdb3fe6a50460d8156590927edeed0f2eba', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'e70523f34340c4948d014d861c5be107385e7181', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'ab67de7e6bcc992486bf030b5c648a22265ed411', 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 ===
|
|
@@ -73,7 +73,7 @@ export class SdGuide {
|
|
|
73
73
|
render() {
|
|
74
74
|
// const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
|
|
75
75
|
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
76
|
-
return (h(Host, { key: '
|
|
76
|
+
return (h(Host, { key: 'e6db8a6f508122254393eb1d9a1ccb5f10192e50' }, h("sd-button", { key: 'df737688c5eb29485eaec14894a051824d7c1c9b', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
|
|
77
77
|
// buttonStyle={{
|
|
78
78
|
// height: '28px',
|
|
79
79
|
// minHeight: '28px',
|
|
@@ -85,9 +85,9 @@ export class SdGuide {
|
|
|
85
85
|
// fontWeight: '400',
|
|
86
86
|
// backgroundColor: 'var(--guide-background)',
|
|
87
87
|
// }}
|
|
88
|
-
onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '
|
|
88
|
+
onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'badde689ee0f6cdd0c3c0406894761be779e079e', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '5ac87ededf1b8b0ad1d5145551b74e0f2868b8a9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6e56ea467fdad7037c8331c5a35184530101962e', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
|
|
89
89
|
// buttonStyle={{ padding: '0px', minHeight: '0px' }}
|
|
90
|
-
onSdClick: this.closeDropdown }), h("div", { key: '
|
|
90
|
+
onSdClick: this.closeDropdown }), h("div", { key: '81414d84ee3314912035adce13afd8f559099b72', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'a90da4a81d2da7065bfa3335c26efd834bd941b3', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'f01358a92ec297782f8ab394c3fa56277d2a9af1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '9d0c130e6fdfaa3016199029d0fef5ea153153ed', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
91
91
|
}
|
|
92
92
|
// 현재 2depth까지만 스타일 적용
|
|
93
93
|
renderListItem(message, depth = 0) {
|
|
@@ -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: '20f187a90566d35f7c459480b6917061cd26c734', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '9db914748d948a695b248d04e5008e726ac6e4d2', 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: '099f819c08b8eb4627f7857d10877d2a9bbeac51', style: inputWidth }, this.label && h("div", { key: 'ef1dffa2707e2f2844efee6646e14b750ea7c319', class: "sd-input__label" }, this.label), h("label", { key: '89e8a0ea5a02ecd114b9e1a7cb9fdcdce0130849', 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: 'b1c64655ea940ae454bac4aed58df8944ed579a3', name: "prefix" }), h("input", { key: '1bb32efb0c46d3e1b91ac90c64e60943ac59ee41', 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: 'bcdc6e6780b6eba56e788665669abcfe04406e64', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3f8d9fe950d5313f0df807b06ffd5872dc4b1835', 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,12 +73,12 @@ export class SdPagination {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
render() {
|
|
76
|
-
return (h("div", { key: '
|
|
76
|
+
return (h("div", { key: 'c73e80cca3ae34331a653f40fcea9f21853729bc', class: this.paginationClasses }, h("div", { key: '0c1be2da1bbb9ca12ed44739c45c083da9b94657', 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: '866070b571aab944f6f7521b72479c5b26fca000', class: "append-btns" }, this.renderNextButtons())));
|
|
82
82
|
}
|
|
83
83
|
static get is() { return "sd-pagination"; }
|
|
84
84
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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: 'dffadde8218c26c620b641a5d95799fbfe08b34b' }, 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: '6cb7de8b74b9be12131a730a2d02bd304e3524e7', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '901d1fc65e9d94c29acca872c55b02128835f4de', 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: '6465c9decc572754469759e6f9ba237e6098c245', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8f65907035de80f0ac721df90a76c8cff706892e' })), h("div", { key: 'a7dedd510101561be1137fcb1f8c43dca2d13383', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '425038b84031c4082348d7a2d5bc3384f4ce87ea', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0a07d84656579a773924b0b066c9dbd48d44c6b3', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'b2daa7b83fbe582cbb829fa8b2bd8e73d3947b48', 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: '3ceae5f183e487f30570a471bdfada588519ac30', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '7fe6275cc500f8e963766bdfedc3f3b8a79a3609', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "sd-popover"; }
|
|
41
41
|
static get encapsulation() { return "shadow"; }
|
|
@@ -92,7 +92,7 @@ export class SdPortal {
|
|
|
92
92
|
this.sdClose.emit();
|
|
93
93
|
}
|
|
94
94
|
render() {
|
|
95
|
-
return h("slot", { key: '
|
|
95
|
+
return h("slot", { key: '9ccb84d877ac49b85e64a12c1f1ff4b3105b2213' });
|
|
96
96
|
}
|
|
97
97
|
static get is() { return "sd-portal"; }
|
|
98
98
|
static get properties() {
|
|
@@ -24,7 +24,7 @@ export class SdSelectOption {
|
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
render() {
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: 'cb2d7b25a778f3ea56dd6aaa880dde5b3f109d92' }, h("div", { key: '5b954062fdfc0466bcbbad7c86eeb9ed62655cf9', class: {
|
|
28
28
|
'sd-select__option': true,
|
|
29
29
|
'sd-select__option--selected': this.isSelected,
|
|
30
30
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -200,11 +200,11 @@ export class SdSelect extends BaseDropdownEvent {
|
|
|
200
200
|
'--select-width': this.width || '200px',
|
|
201
201
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
202
202
|
};
|
|
203
|
-
return (h(Host, { key: '
|
|
203
|
+
return (h(Host, { key: '9e528b2c6dd8b59343cb6603dfacfd63b3958e83', style: style }, h("div", { key: 'a6f139df6b21a452bb1e9f1467ca18cbf3c50101', class: {
|
|
204
204
|
'sd-select': true,
|
|
205
205
|
'sd-select--open': this.isOpen,
|
|
206
206
|
'sd-select--disabled': this.disabled,
|
|
207
|
-
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '
|
|
207
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'cc86cf63a8d4f075d2bf5ba3a589f9a395372cc3', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
208
208
|
}
|
|
209
209
|
renderLabel(label) {
|
|
210
210
|
if (!label)
|