npm - @sellmate/design-system - Versions diffs - 0.0.41 → 0.0.43 - Mend

@sellmate/design-system 0.0.41 → 0.0.43

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.

Files changed (36) hide show

package/dist/design-system/sd-date-picker.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-date-picker.entry.esm.js","sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n width: 160px;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 20px;\r\n font-size: 14px;\r\n padding: 0 5px;\r\n height: 24px;\r\n line-height: 24px;\r\n\r\n .year-nav,\r\n .month-nav {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 12px;\r\n\r\n button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n }\r\n\r\n .year-nav {\r\n &__current {\r\n width: 40px;\r\n text-align: center;\r\n }\r\n }\r\n\r\n .month-nav {\r\n &__current {\r\n width: 100px;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .sd-date-picker__days {\r\n margin-top: 8px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n column-gap: 10px;\r\n padding: 0 5px;\r\n\r\n .day {\r\n width: 28px;\r\n height: 20px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: center;\r\n color: $grey_65;\r\n }\r\n }\r\n .sd-date-picker__body {\r\n margin-top: 12px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string \| null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string \| null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string \| null>;\r\n\r\n componentWillLoad() {\r\n this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n const base = this.date \|\| today;\r\n const [year, month] = base.split('-').map(Number);\r\n this.currentYear = year;\r\n this.currentMonth = month;\r\n this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n if (this.disabled) return;\r\n\r\n this.setCalendar();\r\n this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string \| null) {\r\n this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' \| 'next') {\r\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n this.currentYear,\r\n this.currentMonth,\r\n type,\r\n );\r\n this.setCurrentYear(newYear);\r\n this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n if (!day) return;\r\n\r\n const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n this.setCurrentDate(date);\r\n this.isOpen = false;\r\n this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n if (!this.selectable) return false;\r\n\r\n const [startSelectable, endSelectable] = this.selectable;\r\n\r\n if (startSelectable && endSelectable) {\r\n return date < startSelectable \|\| date > endSelectable;\r\n }\r\n\r\n if (startSelectable) {\r\n return date < startSelectable;\r\n }\r\n\r\n if (endSelectable) {\r\n return date > endSelectable;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private handleClose = () => {\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class=\"sd-date-picker\">\r\n <sd-input\r\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n value={this.date}\r\n label={this.label}\r\n inside-label\r\n readonly\r\n disabled={this.disabled}\r\n inputClass=\"text-center\"\r\n inputStyle={{\r\n margin: '0 0 0 8px',\r\n }}\r\n onClick={() => this.openMenu()}\r\n >\r\n <sd-icon\r\n slot=\"prefix\"\r\n name=\"date\"\r\n size=\"16\"\r\n color=\"#737373\"\r\n class=\"date-icon\"\r\n onClick={() => this.openMenu()}\r\n ></sd-icon>\r\n </sd-input>\r\n\r\n {this.isOpen && (\r\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n <div class=\"sd-date-picker__menu\">\r\n <div class=\"sd-date-picker__header\">\r\n {/* Year Navigation /}\r\n <div class=\"year-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-year\"\r\n title=\"Previous Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"year-nav__current\">{this.currentYear}</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-year\"\r\n title=\"Next Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n\r\n {/ Month Navigation */}\r\n <div class=\"month-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-month\"\r\n title=\"Previous \"\r\n onClick={() => this.handleUpdateMonth('prev')}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-month\"\r\n title=\"Next Month\"\r\n onClick={() => this.handleUpdateMonth('next')}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sd-date-picker__days\">\r\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n <div key={day} class=\"day\">\r\n {day}\r\n </div>\r\n ))}\r\n </div>\r\n\r\n <div class=\"sd-date-picker__body\">\r\n {[\r\n ...this.calendar.prevMonthDays,\r\n ...this.calendar.days,\r\n ...this.calendar.afterMonthDays,\r\n ].map((day, idx) => {\r\n const formattedDate = this.dateUtil.formatDate(\r\n this.currentYear,\r\n this.currentMonth,\r\n Number(day),\r\n );\r\n\r\n return (\r\n <sd-date-box\r\n key={`${day}_${idx}`}\r\n date={!day ? '' : Number(day)}\r\n selected={this.currentDate === formattedDate}\r\n isToday={today === formattedDate}\r\n disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n onClick={\r\n !this.isDisabledDate(formattedDate) && day\r\n ? () => this.handleDateClick(Number(day))\r\n : undefined\r\n }\r\n />\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-date-picker.entry.esm.js","sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n width: 160px;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 20px;\r\n font-size: 14px;\r\n padding: 0 5px;\r\n height: 24px;\r\n line-height: 24px;\r\n\r\n .year-nav,\r\n .month-nav {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 12px;\r\n\r\n button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n }\r\n\r\n .year-nav {\r\n &__current {\r\n width: 40px;\r\n text-align: center;\r\n }\r\n }\r\n\r\n .month-nav {\r\n &__current {\r\n width: 100px;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .sd-date-picker__days {\r\n margin-top: 8px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n column-gap: 10px;\r\n padding: 0 5px;\r\n\r\n .day {\r\n width: 28px;\r\n height: 20px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: center;\r\n color: $grey_65;\r\n }\r\n }\r\n .sd-date-picker__body {\r\n margin-top: 12px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string \| null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string \| null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string \| null>;\r\n\r\n componentWillLoad() {\r\n this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n const base = this.date \|\| today;\r\n const [year, month] = base.split('-').map(Number);\r\n this.currentYear = year;\r\n this.currentMonth = month;\r\n this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n if (this.disabled) return;\r\n\r\n this.setCalendar();\r\n this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string \| null) {\r\n this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' \| 'next') {\r\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n this.currentYear,\r\n this.currentMonth,\r\n type,\r\n );\r\n this.setCurrentYear(newYear);\r\n this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n if (!day) return;\r\n\r\n const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n this.setCurrentDate(date);\r\n this.isOpen = false;\r\n this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n if (!this.selectable) return false;\r\n\r\n const [startSelectable, endSelectable] = this.selectable;\r\n\r\n if (startSelectable && endSelectable) {\r\n return date < startSelectable \|\| date > endSelectable;\r\n }\r\n\r\n if (startSelectable) {\r\n return date < startSelectable;\r\n }\r\n\r\n if (endSelectable) {\r\n return date > endSelectable;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private handleClose = () => {\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class=\"sd-date-picker\">\r\n <sd-input\r\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n value={this.date}\r\n label={this.label}\r\n inside-label\r\n readonly\r\n disabled={this.disabled}\r\n inputClass=\"text-center\"\r\n onClick={() => this.openMenu()}\r\n >\r\n <sd-icon\r\n slot=\"prefix\"\r\n name=\"date\"\r\n size=\"16\"\r\n color=\"#737373\"\r\n class=\"date-icon\"\r\n onClick={() => this.openMenu()}\r\n ></sd-icon>\r\n </sd-input>\r\n\r\n {this.isOpen && (\r\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n <div class=\"sd-date-picker__menu\">\r\n <div class=\"sd-date-picker__header\">\r\n {/* Year Navigation /}\r\n <div class=\"year-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-year\"\r\n title=\"Previous Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"year-nav__current\">{this.currentYear}</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-year\"\r\n title=\"Next Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n\r\n {/ Month Navigation */}\r\n <div class=\"month-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-month\"\r\n title=\"Previous \"\r\n onClick={() => this.handleUpdateMonth('prev')}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-month\"\r\n title=\"Next Month\"\r\n onClick={() => this.handleUpdateMonth('next')}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sd-date-picker__days\">\r\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n <div key={day} class=\"day\">\r\n {day}\r\n </div>\r\n ))}\r\n </div>\r\n\r\n <div class=\"sd-date-picker__body\">\r\n {[\r\n ...this.calendar.prevMonthDays,\r\n ...this.calendar.days,\r\n ...this.calendar.afterMonthDays,\r\n ].map((day, idx) => {\r\n const formattedDate = this.dateUtil.formatDate(\r\n this.currentYear,\r\n this.currentMonth,\r\n Number(day),\r\n );\r\n\r\n return (\r\n <sd-date-box\r\n key={`${day}_${idx}`}\r\n date={!day ? '' : Number(day)}\r\n selected={this.currentDate === formattedDate}\r\n isToday={today === formattedDate}\r\n disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n onClick={\r\n !this.isDisabledDate(formattedDate) && day\r\n ? () => this.handleDateClick(Number(day))\r\n : undefined\r\n }\r\n />\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}