@sellmate/design-system 1.0.2 → 1.0.4
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-field_3.cjs.entry.js +1 -1
- package/dist/cjs/sd-loading-spinner_2.cjs.entry.js +2 -2
- package/dist/cjs/sd-number-input.cjs.entry.js +4 -4
- package/dist/cjs/sd-select-multiple.cjs.entry.js +3 -3
- package/dist/collection/components/sd-field/sd-field.css +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-number-input/sd-number-input.js.map +1 -1
- package/dist/collection/components/sd-select/sd-select.css +0 -1
- package/dist/collection/components/sd-select/sd-select.js +1 -1
- package/dist/collection/components/sd-select/sd-select.js.map +1 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js.map +1 -1
- package/dist/components/{p-CZ0RizvY.js → p-BK9JGlQj.js} +5 -5
- package/dist/components/{p-CZ0RizvY.js.map → p-BK9JGlQj.js.map} +1 -1
- package/dist/components/{p-9E-u4GN-.js → p-BhPP_RGz.js} +4 -4
- package/dist/components/{p-9E-u4GN-.js.map → p-BhPP_RGz.js.map} +1 -1
- package/dist/components/{p-B9qGa5dx.js → p-CmtowV2q.js} +3 -3
- package/dist/components/{p-B9qGa5dx.js.map → p-CmtowV2q.js.map} +1 -1
- package/dist/components/{p-DYLnDz12.js → p-DmBI95-Y.js} +8 -8
- package/dist/components/p-DmBI95-Y.js.map +1 -0
- package/dist/components/{p-COJpIimp.js → p-zXnuPbLK.js} +3 -3
- package/dist/components/p-zXnuPbLK.js.map +1 -0
- package/dist/components/sd-date-picker.js +2 -2
- package/dist/components/sd-date-range-picker.js +2 -2
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-number-input.js +4 -4
- package/dist/components/sd-number-input.js.map +1 -1
- package/dist/components/sd-select-dropdown.js +1 -1
- package/dist/components/sd-select-multiple-group.js +3 -3
- package/dist/components/sd-select-multiple.js +7 -7
- package/dist/components/sd-select-multiple.js.map +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table.js +5 -5
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-4d88d812.entry.js +2 -0
- package/dist/design-system/{p-694c9cc9.entry.js.map → p-4d88d812.entry.js.map} +1 -1
- package/dist/design-system/p-a2291ce8.entry.js +2 -0
- package/dist/design-system/{p-9a68ab88.entry.js.map → p-a2291ce8.entry.js.map} +1 -1
- package/dist/design-system/p-a8650b7e.entry.js +2 -0
- package/dist/design-system/{p-b521ce06.entry.js.map → p-a8650b7e.entry.js.map} +1 -1
- package/dist/design-system/{p-82356c0a.entry.js → p-dfe945c7.entry.js} +2 -2
- package/dist/design-system/{p-82356c0a.entry.js.map → p-dfe945c7.entry.js.map} +1 -1
- package/dist/esm/sd-field_3.entry.js +1 -1
- package/dist/esm/sd-loading-spinner_2.entry.js +2 -2
- package/dist/esm/sd-number-input.entry.js +4 -4
- package/dist/esm/sd-number-input.entry.js.map +1 -1
- package/dist/esm/sd-select-multiple.entry.js +3 -3
- package/dist/esm/sd-select-multiple.entry.js.map +1 -1
- package/hydrate/index.js +10 -10
- package/hydrate/index.mjs +10 -10
- package/package.json +2 -2
- package/dist/components/p-COJpIimp.js.map +0 -1
- package/dist/components/p-DYLnDz12.js.map +0 -1
- package/dist/design-system/p-694c9cc9.entry.js +0 -2
- package/dist/design-system/p-9a68ab88.entry.js +0 -2
- package/dist/design-system/p-b521ce06.entry.js +0 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-D_J8ScR5.js');
|
|
4
4
|
|
|
5
|
-
const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:
|
|
5
|
+
const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
|
|
6
6
|
|
|
7
7
|
const FORM_PARENT_TAGS = [
|
|
8
8
|
'sd-select',
|
|
@@ -20,7 +20,7 @@ const SdLoadingSpinner = class {
|
|
|
20
20
|
};
|
|
21
21
|
SdLoadingSpinner.style = sdLoadingSpinnerCss();
|
|
22
22
|
|
|
23
|
-
const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;
|
|
23
|
+
const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
|
|
24
24
|
|
|
25
25
|
const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
|
|
26
26
|
constructor(hostRef) {
|
|
@@ -161,7 +161,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
|
|
|
161
161
|
}
|
|
162
162
|
};
|
|
163
163
|
render() {
|
|
164
|
-
return (index.h("sd-field", { key: '
|
|
164
|
+
return (index.h("sd-field", { key: 'b53c365ea3fbc27e7b88a6b9d8c543f316ea26e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'cb672c68bf475f1336b993e3f9576048ca482bfb', class: {
|
|
165
165
|
'sd-select': true,
|
|
166
166
|
'sd-select--disabled': this.disabled,
|
|
167
167
|
'sd-select--error': !!this.error,
|
|
@@ -238,17 +238,17 @@ const SdNumberInput = class {
|
|
|
238
238
|
const inputStyles = {
|
|
239
239
|
textAlign: this.useButton ? 'center' : 'right',
|
|
240
240
|
};
|
|
241
|
-
return (index.h(index.Host, { key: '808776f5dac544141ffd67482d23a9e04c410900', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.
|
|
241
|
+
return (index.h(index.Host, { key: '808776f5dac544141ffd67482d23a9e04c410900', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.label && index.h("div", { key: '4185f2438de868f5893b3bc4c4b0d16b7aacb075', class: "sd-number-input__label" }, this.label), index.h("label", { key: '48319c886d76c6aaf1b8900d801aef22d22f2194', class: {
|
|
242
242
|
'sd-number-input': true,
|
|
243
243
|
[this.getInputStatus()]: true,
|
|
244
244
|
'sd-number-input--with-buttons': this.useButton,
|
|
245
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: '
|
|
245
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: '2d559a2c26b5194b8689315c04ac26072986ff2a', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (index.h("div", { key: '949fb43542161f5bf9ca720186a535fb7796e1d1', class: "sd-number-input__buttons" }, index.h("button", { key: 'dacc5c91129c927ddd1bac1554156630da103cb1', type: "button", class: {
|
|
246
246
|
'sd-number-input__button': true,
|
|
247
247
|
'sd-number-input__button--decrement': true,
|
|
248
|
-
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '
|
|
248
|
+
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'f9619cadd5a23f419c7af6690b727d97bcfbdad3', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: '456b1ca36aaf81f4c176528e825d24d9ea60b0d1', type: "button", class: {
|
|
249
249
|
'sd-number-input__button': true,
|
|
250
250
|
'sd-number-input__button--increment': true,
|
|
251
|
-
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '
|
|
251
|
+
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '7f9dbac2ae097ee0b0635245162bc17eb346fc30', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
|
|
252
252
|
}
|
|
253
253
|
static get watchers() { return {
|
|
254
254
|
"value": ["valueChanged"],
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-D_J8ScR5.js');
|
|
4
4
|
var baseDropdownEvent = require('./base-dropdown-event-Dc6AuxR4.js');
|
|
5
5
|
|
|
6
|
-
const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;
|
|
6
|
+
const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
|
|
7
7
|
|
|
8
8
|
const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -153,12 +153,12 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
|
|
|
153
153
|
this.handleOptionSelection(option);
|
|
154
154
|
};
|
|
155
155
|
render() {
|
|
156
|
-
return (index.h("sd-field", { key: '
|
|
156
|
+
return (index.h("sd-field", { key: '079e5eeb997e23ddcd53fd1285b749e0e853485e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'c3c536fb2415dec2bb33f2e5e564de67cd118dc4', class: {
|
|
157
157
|
'sd-select-multiple': true,
|
|
158
158
|
'sd-select-multiple--open': this.isOpen,
|
|
159
159
|
'sd-select-multiple--disabled': this.disabled,
|
|
160
160
|
'sd-select-multiple--error': !!this.error,
|
|
161
|
-
},
|
|
161
|
+
}, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
|
|
162
162
|
}
|
|
163
163
|
renderTrigger() {
|
|
164
164
|
const selectedOption = this.getSelectedOption();
|
|
@@ -227,17 +227,17 @@ export class SdNumberInput {
|
|
|
227
227
|
const inputStyles = {
|
|
228
228
|
textAlign: this.useButton ? 'center' : 'right',
|
|
229
229
|
};
|
|
230
|
-
return (h(Host, { key: '808776f5dac544141ffd67482d23a9e04c410900', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.
|
|
230
|
+
return (h(Host, { key: '808776f5dac544141ffd67482d23a9e04c410900', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.label && h("div", { key: '4185f2438de868f5893b3bc4c4b0d16b7aacb075', class: "sd-number-input__label" }, this.label), h("label", { key: '48319c886d76c6aaf1b8900d801aef22d22f2194', class: {
|
|
231
231
|
'sd-number-input': true,
|
|
232
232
|
[this.getInputStatus()]: true,
|
|
233
233
|
'sd-number-input--with-buttons': this.useButton,
|
|
234
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '
|
|
234
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '2d559a2c26b5194b8689315c04ac26072986ff2a', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (h("div", { key: '949fb43542161f5bf9ca720186a535fb7796e1d1', class: "sd-number-input__buttons" }, h("button", { key: 'dacc5c91129c927ddd1bac1554156630da103cb1', type: "button", class: {
|
|
235
235
|
'sd-number-input__button': true,
|
|
236
236
|
'sd-number-input__button--decrement': true,
|
|
237
|
-
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '
|
|
237
|
+
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'f9619cadd5a23f419c7af6690b727d97bcfbdad3', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '456b1ca36aaf81f4c176528e825d24d9ea60b0d1', type: "button", class: {
|
|
238
238
|
'sd-number-input__button': true,
|
|
239
239
|
'sd-number-input__button--increment': true,
|
|
240
|
-
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '
|
|
240
|
+
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '7f9dbac2ae097ee0b0635245162bc17eb346fc30', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
|
|
241
241
|
}
|
|
242
242
|
static get is() { return "sd-number-input"; }
|
|
243
243
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-number-input.js","sourceRoot":"","sources":["../../../src/components/sd-number-input/sd-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-number-input',\n styleUrl: 'sd-number-input.scss',\n})\nexport class SdNumberInput {\n @Element() el!: HTMLElement;\n\n @Prop() min: number = Number.NEGATIVE_INFINITY;\n @Prop() max: number = Number.POSITIVE_INFINITY;\n @Prop() step: number = 1;\n @Prop() useButton: boolean = false;\n @Prop() useDecimal: boolean = false;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: number | null = null;\n @State() private displayValue: string = '';\n @State() private hovered: boolean = false;\n @State() private error: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n private formatWithCommas(value: number | null): string {\n if (value === null || value === undefined) return '';\n\n const isNegative = value < 0;\n const absValue = Math.abs(value);\n\n const [intPart, decPart] = absValue.toString().split('.');\n const formatted = (+intPart).toLocaleString();\n\n const result = isNegative ? '-' + formatted : formatted;\n return decPart ? result + '.' + decPart : String(result);\n }\n\n private parseInput(input: string): number | null {\n if (!input || input.trim() === '') return null;\n\n const cleaned = input.replace(/,/g, '').trim();\n\n // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n\n if (!/^-?(\\d+\\.?\\d*|\\d*\\.\\d+)$/.test(cleaned)) {\n return null;\n }\n\n const parsed = parseFloat(cleaned);\n\n if (isNaN(parsed)) return null;\n\n // 소수점 사용 하지 않는데 . 이 있는 경우\n if (!this.useDecimal && cleaned.includes('.')) {\n return null;\n }\n\n return parsed;\n }\n\n private clampMinMax(value: number): number {\n return Math.min(Math.max(value, this.min), this.max);\n }\n\n private updateDisplay() {\n this.displayValue = this.formatWithCommas(this.internalValue);\n }\n\n private isIncrementDisabled(): boolean {\n if (this.disabled || this.readonly) return true;\n if (this.internalValue !== null) {\n return this.internalValue >= this.max;\n }\n return false;\n }\n\n private isDecrementDisabled(): boolean {\n if (this.disabled || this.readonly) return true;\n if (this.internalValue !== null) {\n return this.internalValue <= this.min;\n }\n return false;\n }\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n if (newValue === null || newValue === '') {\n this.internalValue = null;\n } else {\n const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;\n if (parsed !== null) {\n this.internalValue = this.clampMinMax(parsed);\n }\n }\n this.updateDisplay();\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: number | null) {\n this.updateDisplay();\n\n if (newValue !== this.value) {\n this.value = newValue;\n this.update?.emit(newValue);\n }\n\n if (!this.rules || this.rules.length === 0) return;\n this.error = false;\n for (const rule of this.rules) {\n const result = rule(newValue);\n if (result !== true) {\n this.error = true;\n break;\n }\n }\n }\n\n componentWillLoad() {\n if (this.value !== null && this.value !== undefined) {\n const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;\n if (parsed !== null) {\n this.internalValue = this.clampMinMax(parsed);\n }\n }\n this.updateDisplay();\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n const inputValue = target.value;\n\n if (inputValue === '') {\n this.internalValue = null;\n this.displayValue = '';\n return;\n }\n\n const commasRemoved = inputValue.replace(/,/g, '');\n\n // 만약에 소수점 (.) 이 여러개 일 경우\n const decimalCount = (commasRemoved.match(/\\./g) || []).length;\n if (decimalCount > 1) {\n target.value = this.displayValue;\n return;\n }\n\n // 가능: \"-\", \".\", \"-.\" (단순 기호만 있는 경우)\n if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {\n target.value = commasRemoved;\n return;\n }\n\n // 숫자 뒤에 . 이 있는 경우 (예: \"1000.\") -> 콤마 포맷 적용 + . 유지\n if (commasRemoved.endsWith('.') && decimalCount === 1) {\n const numberPart = commasRemoved.slice(0, -1);\n const parsed = this.parseInput(numberPart);\n if (parsed !== null) {\n const formatted = this.formatWithCommas(parsed);\n target.value = formatted + '.';\n return;\n }\n }\n\n const parsed = this.parseInput(commasRemoved);\n\n if (parsed !== null) {\n if (parsed < this.min) {\n target.value = this.displayValue;\n return;\n }\n\n if (parsed > this.max) {\n target.value = this.displayValue;\n return;\n }\n\n this.internalValue = parsed;\n this.displayValue = this.formatWithCommas(parsed);\n target.value = this.displayValue;\n } else {\n target.value = this.displayValue;\n }\n };\n\n private handleFocus = (event: Event) => {\n this.focus?.emit(event);\n };\n\n private handleBlur = (event: Event) => {\n this.updateDisplay();\n if (this.nativeEl) {\n this.nativeEl.value = this.displayValue;\n }\n this.blur?.emit(event);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.handleIncrement();\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.handleDecrement();\n }\n };\n\n private handleIncrement = () => {\n if (this.isIncrementDisabled()) return;\n\n const currentVal = this.internalValue ?? this.min ?? 0;\n let nextVal = currentVal + this.step;\n\n if (nextVal > this.max) {\n nextVal = this.max;\n }\n\n if (nextVal === currentVal) return;\n\n this.internalValue = nextVal;\n };\n\n private handleDecrement = () => {\n if (this.isDecrementDisabled()) return;\n\n const currentVal = this.internalValue ?? this.min ?? 0;\n let nextVal = currentVal - this.step;\n\n if (nextVal < this.min) {\n nextVal = this.min;\n }\n\n if (nextVal === currentVal) return;\n\n this.internalValue = nextVal;\n };\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n return this.nativeEl || null;\n }\n\n getInputStatus() {\n if (this.disabled) return 'sd-number-input--disabled';\n if (this.hovered) return 'sd-number-input--hovered';\n if (this.status) return `sd-number-input--${this.status}`;\n if (this.error) return 'sd-number-input--error';\n return '';\n }\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n const inputStyles = {\n textAlign: this.useButton ? 'center' : 'right',\n };\n\n return (\n <Host style={inputWidth} onFocus={this.handleFocus} onBlur={this.handleBlur}>\n {this.useButton ? 'use buttons' : 'dont use buttons'}\n {this.label && <div class=\"sd-number-input__label\">{this.label}</div>}\n <label\n class={{\n 'sd-number-input': true,\n [this.getInputStatus()]: true,\n 'sd-number-input--with-buttons': this.useButton,\n }}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n style={this.inputStyle}\n >\n <input\n ref={el => (this.nativeEl = el)}\n class={`sd-number-input__input ${this.inputClass}`}\n type=\"text\"\n inputMode=\"numeric\"\n value={this.displayValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n style={inputStyles}\n />\n\n {this.useButton && (\n <div class=\"sd-number-input__buttons\">\n <button\n type=\"button\"\n class={{\n 'sd-number-input__button': true,\n 'sd-number-input__button--decrement': true,\n }}\n disabled={this.isDecrementDisabled()}\n onClick={this.handleDecrement}\n tabindex={-1}\n >\n <sd-icon\n name=\"minus\"\n size={12}\n color={this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF'}\n />\n </button>\n <button\n type=\"button\"\n class={{\n 'sd-number-input__button': true,\n 'sd-number-input__button--increment': true,\n }}\n disabled={this.isIncrementDisabled()}\n onClick={this.handleIncrement}\n tabindex={-1}\n >\n <sd-icon name=\"add\" size={12} color={this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF'} />\n </button>\n </div>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sd-number-input.js","sourceRoot":"","sources":["../../../src/components/sd-number-input/sd-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-number-input',\n styleUrl: 'sd-number-input.scss',\n})\nexport class SdNumberInput {\n @Element() el!: HTMLElement;\n\n @Prop() min: number = Number.NEGATIVE_INFINITY;\n @Prop() max: number = Number.POSITIVE_INFINITY;\n @Prop() step: number = 1;\n @Prop() useButton: boolean = false;\n @Prop() useDecimal: boolean = false;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: number | null = null;\n @State() private displayValue: string = '';\n @State() private hovered: boolean = false;\n @State() private error: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n private formatWithCommas(value: number | null): string {\n if (value === null || value === undefined) return '';\n\n const isNegative = value < 0;\n const absValue = Math.abs(value);\n\n const [intPart, decPart] = absValue.toString().split('.');\n const formatted = (+intPart).toLocaleString();\n\n const result = isNegative ? '-' + formatted : formatted;\n return decPart ? result + '.' + decPart : String(result);\n }\n\n private parseInput(input: string): number | null {\n if (!input || input.trim() === '') return null;\n\n const cleaned = input.replace(/,/g, '').trim();\n\n // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n\n if (!/^-?(\\d+\\.?\\d*|\\d*\\.\\d+)$/.test(cleaned)) {\n return null;\n }\n\n const parsed = parseFloat(cleaned);\n\n if (isNaN(parsed)) return null;\n\n // 소수점 사용 하지 않는데 . 이 있는 경우\n if (!this.useDecimal && cleaned.includes('.')) {\n return null;\n }\n\n return parsed;\n }\n\n private clampMinMax(value: number): number {\n return Math.min(Math.max(value, this.min), this.max);\n }\n\n private updateDisplay() {\n this.displayValue = this.formatWithCommas(this.internalValue);\n }\n\n private isIncrementDisabled(): boolean {\n if (this.disabled || this.readonly) return true;\n if (this.internalValue !== null) {\n return this.internalValue >= this.max;\n }\n return false;\n }\n\n private isDecrementDisabled(): boolean {\n if (this.disabled || this.readonly) return true;\n if (this.internalValue !== null) {\n return this.internalValue <= this.min;\n }\n return false;\n }\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n if (newValue === null || newValue === '') {\n this.internalValue = null;\n } else {\n const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;\n if (parsed !== null) {\n this.internalValue = this.clampMinMax(parsed);\n }\n }\n this.updateDisplay();\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: number | null) {\n this.updateDisplay();\n\n if (newValue !== this.value) {\n this.value = newValue;\n this.update?.emit(newValue);\n }\n\n if (!this.rules || this.rules.length === 0) return;\n this.error = false;\n for (const rule of this.rules) {\n const result = rule(newValue);\n if (result !== true) {\n this.error = true;\n break;\n }\n }\n }\n\n componentWillLoad() {\n if (this.value !== null && this.value !== undefined) {\n const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;\n if (parsed !== null) {\n this.internalValue = this.clampMinMax(parsed);\n }\n }\n this.updateDisplay();\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n const inputValue = target.value;\n\n if (inputValue === '') {\n this.internalValue = null;\n this.displayValue = '';\n return;\n }\n\n const commasRemoved = inputValue.replace(/,/g, '');\n\n // 만약에 소수점 (.) 이 여러개 일 경우\n const decimalCount = (commasRemoved.match(/\\./g) || []).length;\n if (decimalCount > 1) {\n target.value = this.displayValue;\n return;\n }\n\n // 가능: \"-\", \".\", \"-.\" (단순 기호만 있는 경우)\n if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {\n target.value = commasRemoved;\n return;\n }\n\n // 숫자 뒤에 . 이 있는 경우 (예: \"1000.\") -> 콤마 포맷 적용 + . 유지\n if (commasRemoved.endsWith('.') && decimalCount === 1) {\n const numberPart = commasRemoved.slice(0, -1);\n const parsed = this.parseInput(numberPart);\n if (parsed !== null) {\n const formatted = this.formatWithCommas(parsed);\n target.value = formatted + '.';\n return;\n }\n }\n\n const parsed = this.parseInput(commasRemoved);\n\n if (parsed !== null) {\n if (parsed < this.min) {\n target.value = this.displayValue;\n return;\n }\n\n if (parsed > this.max) {\n target.value = this.displayValue;\n return;\n }\n\n this.internalValue = parsed;\n this.displayValue = this.formatWithCommas(parsed);\n target.value = this.displayValue;\n } else {\n target.value = this.displayValue;\n }\n };\n\n private handleFocus = (event: Event) => {\n this.focus?.emit(event);\n };\n\n private handleBlur = (event: Event) => {\n this.updateDisplay();\n if (this.nativeEl) {\n this.nativeEl.value = this.displayValue;\n }\n this.blur?.emit(event);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.handleIncrement();\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.handleDecrement();\n }\n };\n\n private handleIncrement = () => {\n if (this.isIncrementDisabled()) return;\n\n const currentVal = this.internalValue ?? this.min ?? 0;\n let nextVal = currentVal + this.step;\n\n if (nextVal > this.max) {\n nextVal = this.max;\n }\n\n if (nextVal === currentVal) return;\n\n this.internalValue = nextVal;\n };\n\n private handleDecrement = () => {\n if (this.isDecrementDisabled()) return;\n\n const currentVal = this.internalValue ?? this.min ?? 0;\n let nextVal = currentVal - this.step;\n\n if (nextVal < this.min) {\n nextVal = this.min;\n }\n\n if (nextVal === currentVal) return;\n\n this.internalValue = nextVal;\n };\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n return this.nativeEl || null;\n }\n\n getInputStatus() {\n if (this.disabled) return 'sd-number-input--disabled';\n if (this.hovered) return 'sd-number-input--hovered';\n if (this.status) return `sd-number-input--${this.status}`;\n if (this.error) return 'sd-number-input--error';\n return '';\n }\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n const inputStyles = {\n textAlign: this.useButton ? 'center' : 'right',\n };\n\n return (\n <Host style={inputWidth} onFocus={this.handleFocus} onBlur={this.handleBlur}>\n {this.label && <div class=\"sd-number-input__label\">{this.label}</div>}\n <label\n class={{\n 'sd-number-input': true,\n [this.getInputStatus()]: true,\n 'sd-number-input--with-buttons': this.useButton,\n }}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n style={this.inputStyle}\n >\n <input\n ref={el => (this.nativeEl = el)}\n class={`sd-number-input__input ${this.inputClass}`}\n type=\"text\"\n inputMode=\"numeric\"\n value={this.displayValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n style={inputStyles}\n />\n\n {this.useButton && (\n <div class=\"sd-number-input__buttons\">\n <button\n type=\"button\"\n class={{\n 'sd-number-input__button': true,\n 'sd-number-input__button--decrement': true,\n }}\n disabled={this.isDecrementDisabled()}\n onClick={this.handleDecrement}\n tabindex={-1}\n >\n <sd-icon\n name=\"minus\"\n size={12}\n color={this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n />\n </button>\n <button\n type=\"button\"\n class={{\n 'sd-number-input__button': true,\n 'sd-number-input__button--increment': true,\n }}\n disabled={this.isIncrementDisabled()}\n onClick={this.handleIncrement}\n tabindex={-1}\n >\n <sd-icon\n name=\"add\"\n size={12}\n color={this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n />\n </button>\n </div>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -137,7 +137,7 @@ export class SdSelect extends BaseDropdownEvent {
|
|
|
137
137
|
}
|
|
138
138
|
};
|
|
139
139
|
render() {
|
|
140
|
-
return (h("sd-field", { key: '
|
|
140
|
+
return (h("sd-field", { key: 'b53c365ea3fbc27e7b88a6b9d8c543f316ea26e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'cb672c68bf475f1336b993e3f9576048ca482bfb', class: {
|
|
141
141
|
'sd-select': true,
|
|
142
142
|
'sd-select--disabled': this.disabled,
|
|
143
143
|
'sd-select--error': !!this.error,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n @Watch('value')\n async valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) {\n await this.formField?.sdValidate();\n }\n }\n\n componentWillLoad() {\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.selectRef?.focus();\n }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n const trigger = this.triggerRef;\n const rect = trigger?.getBoundingClientRect();\n this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n render() {\n return (\n <sd-field\n label={this.label}\n name={this.name}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n useLabelRequired={this.useLabelRequired}\n insideLabel={this.insideLabel}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={{ '--field-width': this.width || '200px' }}\n >\n <div\n class={{\n 'sd-select': true,\n 'sd-select--disabled': this.disabled,\n 'sd-select--error': !!this.error,\n 'sd-select--label': !!this.label,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </sd-field>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n ref={el => (this.triggerRef = el)}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={async event => {\n event.stopPropagation();\n this.value = null;\n await this.formField?.sdValidate();\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n if (this.isOpen === false) return null;\n\n const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n this.selectRef) as HTMLElement;\n\n return (\n <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n <sd-select-dropdown\n value={this.value}\n options={this.options}\n itemIndex={this.itemIndex}\n width={this.dropDownWidth}\n dropdownHeight={this.dropdownHeight}\n searchable={this.searchable}\n optionPlaceholder={this.optionPlaceholder}\n onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n ></sd-select-dropdown>\n </sd-portal>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n @Watch('value')\n async valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) {\n await this.formField?.sdValidate();\n }\n }\n\n componentWillLoad() {\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.selectRef?.focus();\n }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n const trigger = this.triggerRef;\n const rect = trigger?.getBoundingClientRect();\n this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n render() {\n return (\n <sd-field\n label={this.label}\n name={this.name}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n useLabelRequired={this.useLabelRequired}\n insideLabel={this.insideLabel}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n >\n <div\n class={{\n 'sd-select': true,\n 'sd-select--disabled': this.disabled,\n 'sd-select--error': !!this.error,\n 'sd-select--label': !!this.label,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </sd-field>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n ref={el => (this.triggerRef = el)}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={async event => {\n event.stopPropagation();\n this.value = null;\n await this.formField?.sdValidate();\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n if (this.isOpen === false) return null;\n\n const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n this.selectRef) as HTMLElement;\n\n return (\n <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n <sd-select-dropdown\n value={this.value}\n options={this.options}\n itemIndex={this.itemIndex}\n width={this.dropDownWidth}\n dropdownHeight={this.dropdownHeight}\n searchable={this.searchable}\n optionPlaceholder={this.optionPlaceholder}\n onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n ></sd-select-dropdown>\n </sd-portal>\n );\n }\n}\n"]}
|
|
@@ -146,12 +146,12 @@ export class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
146
146
|
this.handleOptionSelection(option);
|
|
147
147
|
};
|
|
148
148
|
render() {
|
|
149
|
-
return (h("sd-field", { key: '
|
|
149
|
+
return (h("sd-field", { key: '079e5eeb997e23ddcd53fd1285b749e0e853485e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'c3c536fb2415dec2bb33f2e5e564de67cd118dc4', class: {
|
|
150
150
|
'sd-select-multiple': true,
|
|
151
151
|
'sd-select-multiple--open': this.isOpen,
|
|
152
152
|
'sd-select-multiple--disabled': this.disabled,
|
|
153
153
|
'sd-select-multiple--error': !!this.error,
|
|
154
|
-
},
|
|
154
|
+
}, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
|
|
155
155
|
}
|
|
156
156
|
renderTrigger() {
|
|
157
157
|
const selectedOption = this.getSelectedOption();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select-multiple.js","sourceRoot":"","sources":["../../../src/components/sd-select-multiple/sd-select-multiple.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { Rule, SdTooltipProps } from '../../components';\n\n@Component({\n tag: 'sd-select-multiple',\n styleUrl: 'sd-select-multiple.scss',\n})\nexport class SdSelectMultiple extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - select multiple specific\n @Prop() useAll: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<\n SelectMultipleEvents['dropDownShow']\n >;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n @Watch('value')\n valueChanged() {\n this.update?.emit(this.value);\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) {\n await this.formField?.sdValidate();\n }\n }\n\n componentWillLoad() {\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.selectRef?.focus();\n }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n const trigger = this.triggerRef;\n const rect = trigger?.getBoundingClientRect();\n this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.handleOptionSelection(selectedOption);\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n private handleOptionSelection = (option: SelectOption) => {\n if (!option || option.disabled) return;\n\n const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n if (isAlreadySelected) {\n // 이미 선택된 옵션인 경우, 선택 해제\n this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n } else {\n // 새로운 옵션 선택\n this.value = [...(this.value || []), option];\n }\n };\n\n private getSelectedOption(): SelectOption[] {\n return this.options.filter(option => this.value?.includes(option));\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n this.handleOptionSelection(option);\n };\n\n render() {\n return (\n <sd-field\n label={this.label}\n name={this.name}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n useLabelRequired={this.useLabelRequired}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={{ '--field-width': this.width || '200px' }}\n >\n <div\n class={{\n 'sd-select-multiple': true,\n 'sd-select-multiple--open': this.isOpen,\n 'sd-select-multiple--disabled': this.disabled,\n 'sd-select-multiple--error': !!this.error,\n }}\n style={{ '--select-width': this.width || '200px' }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </sd-field>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select-multiple__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n ref={el => (this.triggerRef = el)}\n >\n <span class=\"sd-select-multiple__value\">\n {!selectedOption || selectedOption.length === 0\n ? this.placeholder\n : selectedOption.map(option => option.label).join(', ')}\n </span>\n {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n <sd-icon\n key=\"close-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select-multiple__clear\"\n onClick={async event => {\n event.stopPropagation();\n this.value = null;\n await this.formField?.sdValidate();\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n if (this.isOpen === false) return null;\n\n const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||\n this.selectRef) as HTMLElement;\n\n return (\n <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n <sd-select-dropdown\n value={this.value}\n options={this.options}\n itemIndex={this.itemIndex}\n width={this.dropDownWidth}\n dropdownHeight={this.dropdownHeight}\n searchable={this.searchable}\n optionPlaceholder={this.optionPlaceholder}\n useCheckbox={this.useCheckbox}\n useAll={this.useAll}\n onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n ></sd-select-dropdown>\n </sd-portal>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sd-select-multiple.js","sourceRoot":"","sources":["../../../src/components/sd-select-multiple/sd-select-multiple.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { Rule, SdTooltipProps } from '../../components';\n\n@Component({\n tag: 'sd-select-multiple',\n styleUrl: 'sd-select-multiple.scss',\n})\nexport class SdSelectMultiple extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - select multiple specific\n @Prop() useAll: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<\n SelectMultipleEvents['dropDownShow']\n >;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n @Watch('value')\n valueChanged() {\n this.update?.emit(this.value);\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) {\n await this.formField?.sdValidate();\n }\n }\n\n componentWillLoad() {\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.selectRef?.focus();\n }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n const trigger = this.triggerRef;\n const rect = trigger?.getBoundingClientRect();\n this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.handleOptionSelection(selectedOption);\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n private handleOptionSelection = (option: SelectOption) => {\n if (!option || option.disabled) return;\n\n const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n if (isAlreadySelected) {\n // 이미 선택된 옵션인 경우, 선택 해제\n this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n } else {\n // 새로운 옵션 선택\n this.value = [...(this.value || []), option];\n }\n };\n\n private getSelectedOption(): SelectOption[] {\n return this.options.filter(option => this.value?.includes(option));\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n this.handleOptionSelection(option);\n };\n\n render() {\n return (\n <sd-field\n label={this.label}\n name={this.name}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n useLabelRequired={this.useLabelRequired}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n >\n <div\n class={{\n 'sd-select-multiple': true,\n 'sd-select-multiple--open': this.isOpen,\n 'sd-select-multiple--disabled': this.disabled,\n 'sd-select-multiple--error': !!this.error,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </sd-field>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select-multiple__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n ref={el => (this.triggerRef = el)}\n >\n <span class=\"sd-select-multiple__value\">\n {!selectedOption || selectedOption.length === 0\n ? this.placeholder\n : selectedOption.map(option => option.label).join(', ')}\n </span>\n {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n <sd-icon\n key=\"close-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select-multiple__clear\"\n onClick={async event => {\n event.stopPropagation();\n this.value = null;\n await this.formField?.sdValidate();\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n if (this.isOpen === false) return null;\n\n const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||\n this.selectRef) as HTMLElement;\n\n return (\n <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n <sd-select-dropdown\n value={this.value}\n options={this.options}\n itemIndex={this.itemIndex}\n width={this.dropDownWidth}\n dropdownHeight={this.dropdownHeight}\n searchable={this.searchable}\n optionPlaceholder={this.optionPlaceholder}\n useCheckbox={this.useCheckbox}\n useAll={this.useAll}\n onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n ></sd-select-dropdown>\n </sd-portal>\n );\n }\n}\n"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
|
|
2
2
|
import { d as defineCustomElement$9 } from './p-B-HVIIWo.js';
|
|
3
3
|
import { d as defineCustomElement$8 } from './p-ldcuoYNT.js';
|
|
4
|
-
import { d as defineCustomElement$7 } from './p-
|
|
4
|
+
import { d as defineCustomElement$7 } from './p-zXnuPbLK.js';
|
|
5
5
|
import { d as defineCustomElement$6 } from './p-CmghyzXg.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-Sw7TJWkF.js';
|
|
7
|
-
import { d as defineCustomElement$4 } from './p-
|
|
7
|
+
import { d as defineCustomElement$4 } from './p-CmtowV2q.js';
|
|
8
8
|
import { d as defineCustomElement$3 } from './p-BsBjOh8u.js';
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-BhPP_RGz.js';
|
|
10
10
|
import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
|
|
11
11
|
|
|
12
12
|
const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
|
|
@@ -255,6 +255,6 @@ function defineCustomElement() {
|
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
export { SdSelectDropdown as S, defineCustomElement as d };
|
|
258
|
-
//# sourceMappingURL=p-
|
|
258
|
+
//# sourceMappingURL=p-BK9JGlQj.js.map
|
|
259
259
|
|
|
260
|
-
//# sourceMappingURL=p-
|
|
260
|
+
//# sourceMappingURL=p-BK9JGlQj.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-CZ0RizvY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n opacity: 1;\n }\n\n .sd-select-option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] | string | number | null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string | null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n this.filteredOptions = this.options;\n\n // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n requestAnimationFrame(() => {\n requestAnimationFrame(async () => {\n const selectedOptions = this.getSelectedOption();\n\n // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n if (selectedOptions) {\n const selectedIndex = Array.isArray(selectedOptions)\n ? this.options.indexOf(selectedOptions[0])\n : this.options.indexOf(selectedOptions);\n const optionElements = Array.from(\n this.dropdownRef?.querySelectorAll('sd-select-option') || [],\n );\n\n // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n // 선택된 옵션이 화면 가운데에 오도록 index 조정\n const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n const currentItem = optionElements?.[targetIndex];\n\n if (currentItem) {\n this.scrollToOption(currentItem as HTMLElement, 'instant');\n }\n }\n\n this.isDropdownReady = true;\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n\n if (searchInput) {\n requestAnimationFrame(() => {\n searchInput.focus({ preventScroll: true });\n });\n }\n }\n });\n });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n return {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n }\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | SelectOption[] | undefined {\n if (typeof this.value !== 'object') {\n return this.options.find(option => option.value === this.value);\n }\n\n return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n if (Array.isArray(this.value)) {\n return this.value.some(selected => selected.value === value);\n }\n return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select-search-input');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTo({\n top: optionTop + optionHeight - dropdownHeight + searchOffset,\n behavior: scrollBehavior,\n });\n }\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n render() {\n return (\n <Host style={this.dropdownSize}>\n <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={this.isOptionSelected(option.value)}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n useCheckbox={this.useCheckbox}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-BK9JGlQj.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n opacity: 1;\n }\n\n .sd-select-option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] | string | number | null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string | null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n this.filteredOptions = this.options;\n\n // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n requestAnimationFrame(() => {\n requestAnimationFrame(async () => {\n const selectedOptions = this.getSelectedOption();\n\n // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n if (selectedOptions) {\n const selectedIndex = Array.isArray(selectedOptions)\n ? this.options.indexOf(selectedOptions[0])\n : this.options.indexOf(selectedOptions);\n const optionElements = Array.from(\n this.dropdownRef?.querySelectorAll('sd-select-option') || [],\n );\n\n // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n // 선택된 옵션이 화면 가운데에 오도록 index 조정\n const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n const currentItem = optionElements?.[targetIndex];\n\n if (currentItem) {\n this.scrollToOption(currentItem as HTMLElement, 'instant');\n }\n }\n\n this.isDropdownReady = true;\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n\n if (searchInput) {\n requestAnimationFrame(() => {\n searchInput.focus({ preventScroll: true });\n });\n }\n }\n });\n });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n return {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n }\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | SelectOption[] | undefined {\n if (typeof this.value !== 'object') {\n return this.options.find(option => option.value === this.value);\n }\n\n return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n if (Array.isArray(this.value)) {\n return this.value.some(selected => selected.value === value);\n }\n return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select-search-input');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTo({\n top: optionTop + optionHeight - dropdownHeight + searchOffset,\n behavior: scrollBehavior,\n });\n }\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n render() {\n return (\n <Host style={this.dropdownSize}>\n <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={this.isOptionSelected(option.value)}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n useCheckbox={this.useCheckbox}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
|
|
2
2
|
import { d as defineCustomElement$6 } from './p-B-HVIIWo.js';
|
|
3
|
-
import { d as defineCustomElement$5 } from './p-
|
|
3
|
+
import { d as defineCustomElement$5 } from './p-zXnuPbLK.js';
|
|
4
4
|
import { d as defineCustomElement$4 } from './p-CmghyzXg.js';
|
|
5
5
|
import { d as defineCustomElement$3 } from './p-Sw7TJWkF.js';
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-CmtowV2q.js';
|
|
7
7
|
import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
|
|
8
8
|
|
|
9
9
|
const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
|
|
@@ -97,6 +97,6 @@ function defineCustomElement() {
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
export { SdSelectSearchInput as S, defineCustomElement as d };
|
|
100
|
-
//# sourceMappingURL=p-
|
|
100
|
+
//# sourceMappingURL=p-BhPP_RGz.js.map
|
|
101
101
|
|
|
102
|
-
//# sourceMappingURL=p-
|
|
102
|
+
//# sourceMappingURL=p-BhPP_RGz.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BhPP_RGz.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,gbAAgb,CAAC;;MCM1c,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAEC,IAAA,WAAW;AACX,IAAA,WAAW;AAE1C,IAAA,SAAS;AAGjB,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;;AAE3C,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE;QAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGtC,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACrD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,UAAU,EAAE,KAAK,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACxB,aAAC,EACD,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;oBAAE,KAAK,CAAC,eAAe,EAAE;AACpD,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EACH,CAAA,CACD,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-search-input/sd-select-search-input.scss?tag=sd-select-search-input","src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n .sd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n padding: 4px 8px;\n\n sd-input {\n width: 100%;\n }\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n}\n","import { h, Component, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-select-search-input',\n styleUrl: 'sd-select-search-input.scss',\n})\nexport class SdSelectSearchInput {\n @Prop() isScrolled?: boolean = false;\n @Prop() searchText: string | null = '';\n\n @Event({ eventName: 'sdSearchInput' }) searchInput!: EventEmitter<string>;\n @Event({ eventName: 'sdSearchFocus' }) searchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n @Method()\n async sdSearchInputFocus() {\n const input = await this.sdGetNativeElement();\n input?.focus({ preventScroll: true });\n }\n\n render() {\n return (\n <div\n class={{\n 'sd-select-search-input': true,\n 'sd-select-search-input--scrolled': !!this.isScrolled,\n }}\n onClick={event => event.stopPropagation()}\n >\n <sd-input\n ref={el => (this.searchRef = el)}\n value={this.searchText}\n placeholder=\"검색\"\n clearable\n inputStyle={{ 'padding-left': '8px' }}\n autofocus\n onSdUpdate={event => {\n this.searchInput.emit(String(event?.detail));\n }}\n onSdFocus={() => {\n this.searchFocus.emit();\n }}\n onKeyDown={event => {\n if (event.code === 'Enter') event.stopPropagation();\n }}\n >\n <sd-icon\n name=\"search\"\n size={16}\n color=\"#737373\"\n style={{ marginRight: '4px' }}\n slot=\"prefix\"\n ></sd-icon>\n </sd-input>\n </div>\n );\n }\n}\n"],"version":3}
|