@sellmate/design-system 0.0.28 → 0.0.31

package/dist/design-system/{p-e2a11135.entry.js → p-e9800353.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,a as s,h as i,H as l}from"./p-B2T3tS5r.js";import{B as o,S as r}from"./p-C2JaR3A6.js";const c=".sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .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}.sd-select-multiple__container .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__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__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}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";const n=class extends o{constructor(s){super();e(this,s);this.sdChange=t(this,"sdChange");this.dropDownShow=t(this,"dropDownShow")}get el(){return s(this)}value=null;label="";options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";disabled=false;clearable=false;searchable=false;useCheckbox=false;optionRenderer;filteredOptions=this.options;isOpen=false;searchText=null;itemIndex=-1;isScrolled=false;sdChange;dropDownShow;selectRef;searchRef;optionRef;dropdownRef;valueChanged(){this.sdChange?.emit(this.value)}optionsChanged(){this.filteredOptions=this.options;this.filterOptions()}searchTextChanged(){this.filterOptions()}async itemIndexChanged(e,t){if(this.searchable){const e=await this.getNativeInputElement();if(this.itemIndex===-1){e?.focus();return}else if(e?.matches(":focus")){e?.blur()}}const s=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-option")||[]);const i=s?.[this.itemIndex];if(!i||!this.isOpen)return;this.optionRef=i;const l=await this.optionRef.isDisabled();if(l){e>t?this.itemIndex++:this.itemIndex--;return}this.scrollToOption(i)}async isOpenChanged(){this.onDropdownToggle(this.isOpen);const e=this.getSelectedOption();if(!e){this.itemIndex=-1}else{this.itemIndex=this.options.indexOf(e[0])}this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false)return;await new Promise((e=>setTimeout(e,10)));const t=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-item")||[]);const s=t?.[this.itemIndex];if(this.searchable){const e=await this.getNativeInputElement();e?.focus()}if(!s)return;await new Promise((e=>setTimeout(e,10)));this.scrollToOption(s)}connectedCallback(){this.filteredOptions=this.options;this.initializeEvent()}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const t=["ArrowDown","ArrowUp","Enter","Escape"];if(!t.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const t=new r(this.searchable,this.filteredOptions);const s=t.getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.handleOptionSelection(i)}break;case"Escape":this.isOpen=false;break}}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:t,event:s}=e;s.stopPropagation();this.handleOptionSelection(t)};filterOptions(){if(!this.searchText||this.searchText.trim()===""){this.filteredOptions=this.options}else{this.filteredOptions=this.options.filter((e=>e.label.toLowerCase().includes(this.searchText.toLowerCase())))}}getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}handleDropdownScroll=e=>{const t=e.target;const s=t.scrollTop;this.isScrolled=s>0};async getNativeInputElement(){if(this.searchRef){return this.searchRef.getNativeElement()}return null}handleOptionSelection=e=>{if(!e||e.disabled)return;const t=this.value?.some((t=>t.value===e.value));if(t){this.value=this.value?.filter((t=>t.value!==e.value))||null}else{this.value=[...this.value||[],e]}};closeDropdown(){this.isOpen=false}scrollToOption(e){if(!this.dropdownRef||!e)return;const t=this.dropdownRef;const s=e.offsetTop;const i=e.offsetHeight;const l=t.scrollTop;const o=t.clientHeight;const r=t.querySelector(".sd-select__search-container");const c=r?r.offsetHeight:0;const n=l+c;const d=l+o;if(s<n){t.scrollTop=s-c}else if(s+i>d){t.scrollTop=s+i-o+c}}render(){const e={"--select-width":this.width||"200px","--select-dropdown-height":this.dropdownHeight||"260px"};return i(l,{key:"8f2df6c0a3b6e8d2300a77bd84b993101824cae1",style:e},i("div",{key:"9587ca5bb88d7767b5f48344063deef220964027",class:{"sd-select-multiple":true,"sd-select-multiple--open":this.isOpen,"sd-select-multiple--disabled":this.disabled},ref:e=>this.selectRef=e},this.renderLabel(this.label),i("div",{key:"f00fa7d7c2cbc6f751cc89411b1d77037a950e3e",class:"sd-select-multiple__container"},this.renderTrigger(),this.renderDropdown())))}renderLabel(e){if(!e)return null;return i("label",{class:"sd-select-multiple__label"},e)}renderTrigger(){const e=this.getSelectedOption();return i("div",{class:"sd-select-multiple__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick},i("span",{class:"sd-select-multiple__value"},!e?"선택":e.length?e.map((e=>e.label)).join(", "):this.placeholder),this.clearable&&e?.length>0&&!this.disabled&&i("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple__clear",onClick:e=>{e.stopPropagation();this.value=null}}),i("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple__arrow":true,"sd-select-multiple__arrow--open":this.isOpen}}))}renderDropdown(){if(this.isOpen===false)return null;return i("sd-portal",{open:this.isOpen,parentRef:this.selectRef,onSdClose:this.closeDropdown},i("div",{class:"sd-select-multiple__dropdown",onScroll:this.handleDropdownScroll,ref:e=>this.dropdownRef=e},this.searchable&&i("div",{class:{"sd-select-multiple__search-container":true,"sd-select-multiple__search-container--scrolled":this.isScrolled},onClick:e=>e.stopPropagation()},i("sd-input",{ref:e=>this.searchRef=e,value:this.searchText,placeholder:"검색",clearable:true,inputStyle:{"padding-left":"8px"},autofocus:true,onSdInput:e=>{this.searchText=String(e?.detail)},onSdFocus:()=>{this.itemIndex=-1}},i("sd-icon",{name:"search",size:16,color:"#737373",style:{marginRight:"4px"},slot:"prefix"}))),this.filteredOptions.length>0?this.filteredOptions.map(((e,t)=>i("slot",{name:`option-${e.value}`},i("sd-select-option",{option:e,index:t,isSelected:this.value?.some((t=>t.value===e.value)),isFocused:t===this.itemIndex,onOptionClick:({detail:e})=>this.handleOptionClick(e),useCheckbox:this.useCheckbox})))):i("slot",{name:"option-placeholder"},i("div",{class:"sd-select-multiple__option-placeholder"},this.optionPlaceholder))))}static get watchers(){return{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}}};n.style=c;export{n as sd_select_multiple};
-//# sourceMappingURL=p-e2a11135.entry.js.map
+import{r as e,c as t,a as s,h as i,H as l}from"./p-B2T3tS5r.js";import{B as o,S as r}from"./p-C2JaR3A6.js";const c=".sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .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}.sd-select-multiple__container .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__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__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}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";const n=class extends o{constructor(s){super();e(this,s);this.sdChange=t(this,"sdChange");this.dropDownShow=t(this,"dropDownShow")}get el(){return s(this)}value=null;label="";options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";disabled=false;clearable=false;searchable=false;useCheckbox=false;optionRenderer;filteredOptions=this.options;isOpen=false;searchText=null;itemIndex=-1;isScrolled=false;sdChange;dropDownShow;selectRef;searchRef;optionRef;dropdownRef;valueChanged(){this.sdChange?.emit(this.value)}optionsChanged(){this.filteredOptions=this.options;this.filterOptions()}searchTextChanged(){this.filterOptions()}async itemIndexChanged(e,t){if(this.searchable){const e=await this.getNativeInputElement();if(this.itemIndex===-1){e?.focus();return}else if(e?.matches(":focus")){e?.blur()}}const s=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-option")||[]);const i=s?.[this.itemIndex];if(!i||!this.isOpen)return;this.optionRef=i;const l=await this.optionRef.isDisabled();if(l){e>t?this.itemIndex++:this.itemIndex--;return}this.scrollToOption(i)}async isOpenChanged(){this.onDropdownToggle(this.isOpen);const e=this.getSelectedOption();if(!e){this.itemIndex=-1}else{this.itemIndex=this.options.indexOf(e[0])}this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false)return;await new Promise((e=>setTimeout(e,10)));const t=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-item")||[]);const s=t?.[this.itemIndex];if(this.searchable){const e=await this.getNativeInputElement();e?.focus()}if(!s)return;await new Promise((e=>setTimeout(e,10)));this.scrollToOption(s)}connectedCallback(){this.filteredOptions=this.options;this.initializeEvent()}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const t=["ArrowDown","ArrowUp","Enter","Escape"];if(!t.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const t=new r(this.searchable,this.filteredOptions);const s=t.getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.handleOptionSelection(i)}break;case"Escape":this.isOpen=false;break}}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:t,event:s}=e;s.stopPropagation();this.handleOptionSelection(t)};filterOptions(){if(!this.searchText||this.searchText.trim()===""){this.filteredOptions=this.options}else{this.filteredOptions=this.options.filter((e=>e.label.toLowerCase().includes(this.searchText.toLowerCase())))}}getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}handleDropdownScroll=e=>{const t=e.target;const s=t.scrollTop;this.isScrolled=s>0};async getNativeInputElement(){if(this.searchRef){return this.searchRef.getNativeElement()}return null}handleOptionSelection=e=>{if(!e||e.disabled)return;const t=this.value?.some((t=>t.value===e.value));if(t){this.value=this.value?.filter((t=>t.value!==e.value))||null}else{this.value=[...this.value||[],e]}};closeDropdown(){this.isOpen=false}scrollToOption(e){if(!this.dropdownRef||!e)return;const t=this.dropdownRef;const s=e.offsetTop;const i=e.offsetHeight;const l=t.scrollTop;const o=t.clientHeight;const r=t.querySelector(".sd-select__search-container");const c=r?r.offsetHeight:0;const n=l+c;const d=l+o;if(s<n){t.scrollTop=s-c}else if(s+i>d){t.scrollTop=s+i-o+c}}render(){const e={"--select-width":this.width||"200px","--select-dropdown-height":this.dropdownHeight||"260px"};return i(l,{key:"c569bb885003048b6ec22bfb0688c671a70a27d5",style:e},i("div",{key:"94b43199502f44f7d663981c320696c6e8cf968f",class:{"sd-select-multiple":true,"sd-select-multiple--open":this.isOpen,"sd-select-multiple--disabled":this.disabled},ref:e=>this.selectRef=e},this.renderLabel(this.label),i("div",{key:"d4fd6929b78add118c01d7b52c1c1e0be9867924",class:"sd-select-multiple__container"},this.renderTrigger(),this.renderDropdown())))}renderLabel(e){if(!e)return null;return i("label",{class:"sd-select-multiple__label"},e)}renderTrigger(){const e=this.getSelectedOption();return i("div",{class:"sd-select-multiple__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick},i("span",{class:"sd-select-multiple__value"},!e?"선택":e.length?e.map((e=>e.label)).join(", "):this.placeholder),this.clearable&&e?.length>0&&!this.disabled&&i("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple__clear",onClick:e=>{e.stopPropagation();this.value=null}}),i("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple__arrow":true,"sd-select-multiple__arrow--open":this.isOpen}}))}renderDropdown(){if(this.isOpen===false)return null;return i("sd-portal",{open:this.isOpen,parentRef:this.selectRef,onSdClose:this.closeDropdown},i("div",{class:"sd-select-multiple__dropdown",onScroll:this.handleDropdownScroll,ref:e=>this.dropdownRef=e},this.searchable&&i("div",{class:{"sd-select-multiple__search-container":true,"sd-select-multiple__search-container--scrolled":this.isScrolled},onClick:e=>e.stopPropagation()},i("sd-input",{ref:e=>this.searchRef=e,value:this.searchText,placeholder:"검색",clearable:true,inputStyle:{"padding-left":"8px"},autofocus:true,onSdInput:e=>{this.searchText=String(e?.detail)},onSdFocus:()=>{this.itemIndex=-1}},i("sd-icon",{name:"search",size:16,color:"#737373",style:{marginRight:"4px"},slot:"prefix"}))),this.filteredOptions.length>0?this.filteredOptions.map(((e,t)=>i("slot",{name:`option-${e.value}`},i("sd-select-option",{option:e,index:t,isSelected:this.value?.some((t=>t.value===e.value)),isFocused:t===this.itemIndex,onOptionClick:({detail:e})=>this.handleOptionClick(e),useCheckbox:this.useCheckbox})))):i("slot",{name:"option-placeholder"},i("div",{class:"sd-select-multiple__option-placeholder"},this.optionPlaceholder))))}static get watchers(){return{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}}};n.style=c;export{n as sd_select_multiple};
+//# sourceMappingURL=p-e9800353.entry.js.map