@sellmate/design-system 1.0.75 → 1.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +5 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-button_4.cjs.entry.js +2 -2
- package/dist/cjs/sd-ghost-button.cjs.entry.js +10 -5
- package/dist/cjs/sd-modal-container.cjs.entry.js +76 -68
- package/dist/cjs/sd-pagination_5.cjs.entry.js +889 -0
- package/dist/cjs/sd-radio-button.cjs.entry.js +6 -1
- package/dist/cjs/sd-select-v2-list-item_4.cjs.entry.js +65 -5
- package/dist/cjs/sd-switch.cjs.entry.js +1 -1
- package/dist/cjs/sd-table.cjs.entry.js +167 -20
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/sd-tag.cjs.entry.js +2 -2
- package/dist/cjs/sd-td.cjs.entry.js +53 -1
- package/dist/cjs/sd-text-link.cjs.entry.js +3 -3
- package/dist/cjs/sd-textarea.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast.cjs.entry.js +2 -2
- package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +10 -5
- package/dist/collection/components/sd-modal-container/sd-modal-container.js +77 -71
- package/dist/collection/components/sd-radio-button/sd-radio-button.js +6 -1
- package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js +103 -3
- package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js +2 -2
- package/dist/collection/components/sd-select-v2/sd-select-v2.js +82 -4
- package/dist/collection/components/sd-switch/sd-switch.js +1 -1
- package/dist/collection/components/sd-table/sd-table.css +1 -1
- package/dist/collection/components/sd-table/sd-table.js +170 -21
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +7 -2
- package/dist/collection/components/sd-table/sd-td/sd-td.js +91 -1
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +9 -4
- package/dist/collection/components/sd-table/sd-tr/sd-tr.css +8 -0
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +62 -12
- package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +2 -2
- package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
- package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
- package/dist/collection/components/sd-toast/sd-toast.js +2 -2
- package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/collection/utils/modal.js +5 -0
- package/dist/components/index.js +1 -1
- package/dist/components/{p-BALOEavB.js → p-6AvsuYqF.js} +1 -1
- package/dist/components/{p-CTwEbxRN.js → p-6PsyRF61.js} +1 -1
- package/dist/components/{p-DEBakAhm.js → p-7DKZPPev.js} +1 -1
- package/dist/components/p-BBD_1E3n.js +1 -0
- package/dist/components/p-BQvugXhH.js +1 -0
- package/dist/components/p-BRfPoWUn.js +1 -0
- package/dist/components/{p-CHFGWh0m.js → p-C-BOe23n.js} +1 -1
- package/dist/components/p-C7h8lwnU.js +1 -0
- package/dist/components/{p-SDBnyM8D.js → p-CUg9NH6y.js} +1 -1
- package/dist/components/{p-C3dI7f7C.js → p-CgMyz4NQ.js} +1 -1
- package/dist/components/p-Csfj4h1A.js +1 -0
- package/dist/components/{p-Bp0B8tcl.js → p-DAC3TaZV.js} +1 -1
- package/dist/components/p-DfOYYI9m.js +1 -0
- package/dist/components/{p-H-9uoufd.js → p-d4UB2UF7.js} +1 -1
- package/dist/components/p-eEC3ITv0.js +1 -0
- package/dist/components/{p-CWEeXx2E.js → p-nVHDJc9g.js} +1 -1
- package/dist/components/{p-D8fG9Yt7.js → p-rnbt1m4L.js} +1 -1
- package/dist/components/sd-action-modal.js +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-chip.js +1 -1
- package/dist/components/sd-confirm-modal.js +1 -1
- package/dist/components/sd-date-picker-calendar.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker-calendar.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-ghost-button.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-radio-button.js +1 -1
- package/dist/components/sd-select-dropdown.js +1 -1
- package/dist/components/sd-select-group.js +1 -1
- package/dist/components/sd-select-multiple-group.js +1 -1
- package/dist/components/sd-select-multiple.js +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select-v2-listbox.js +1 -1
- package/dist/components/sd-select-v2-trigger.js +1 -1
- package/dist/components/sd-select-v2.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-switch.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-tabs.js +1 -1
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +1 -1
- package/dist/components/sd-text-link.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/components/sd-thead.js +1 -1
- package/dist/components/sd-toast-container.js +1 -1
- package/dist/components/sd-toast.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/index.esm.js +1 -1
- package/dist/design-system/p-0e1b27cc.entry.js +1 -0
- package/dist/design-system/p-11029f6e.entry.js +1 -0
- package/dist/design-system/{p-cc62c180.entry.js → p-140b40ab.entry.js} +1 -1
- package/dist/design-system/p-34f7345b.entry.js +1 -0
- package/dist/design-system/p-363c9451.entry.js +1 -0
- package/dist/design-system/{p-fdcfaa7c.entry.js → p-506f2b68.entry.js} +1 -1
- package/dist/design-system/{p-8200b5f2.entry.js → p-531a6a82.entry.js} +1 -1
- package/dist/design-system/p-55b65a41.entry.js +1 -0
- package/dist/design-system/{p-d1dfa0e1.entry.js → p-68d0d67e.entry.js} +1 -1
- package/dist/design-system/p-7fe3a466.entry.js +1 -0
- package/dist/design-system/{p-05a1c092.entry.js → p-9466cd93.entry.js} +1 -1
- package/dist/design-system/{p-33bec0e3.entry.js → p-b683f2fe.entry.js} +1 -1
- package/dist/design-system/p-c521e731.entry.js +1 -0
- package/dist/design-system/{p-16a15368.entry.js → p-c9eb70f5.entry.js} +1 -1
- package/dist/design-system/p-d1846df9.entry.js +1 -0
- package/dist/design-system/{p-2d154fe0.entry.js → p-fdb52620.entry.js} +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/index.js +5 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button_4.entry.js +2 -2
- package/dist/esm/sd-ghost-button.entry.js +10 -5
- package/dist/esm/sd-modal-container.entry.js +76 -68
- package/dist/esm/sd-pagination_5.entry.js +883 -0
- package/dist/esm/sd-radio-button.entry.js +6 -1
- package/dist/esm/sd-select-v2-list-item_4.entry.js +65 -5
- package/dist/esm/sd-switch.entry.js +1 -1
- package/dist/esm/sd-table.entry.js +168 -21
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/sd-tag.entry.js +2 -2
- package/dist/esm/sd-td.entry.js +53 -1
- package/dist/esm/sd-text-link.entry.js +3 -3
- package/dist/esm/sd-textarea.entry.js +1 -1
- package/dist/esm/sd-toast-container.entry.js +1 -1
- package/dist/esm/sd-toast.entry.js +2 -2
- package/dist/esm/sd-toggle.entry.js +1 -1
- package/dist/types/components/sd-ghost-button/sd-ghost-button.d.ts +1 -0
- package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +1 -1
- package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +6 -4
- package/dist/types/components/sd-radio-button/sd-radio-button.d.ts +1 -0
- package/dist/types/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.d.ts +9 -0
- package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +4 -0
- package/dist/types/components/sd-table/sd-table.d.ts +17 -0
- package/dist/types/components/sd-table/sd-td/sd-td.d.ts +8 -0
- package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +4 -0
- package/dist/types/components.d.ts +52 -0
- package/hydrate/index.js +481 -141
- package/hydrate/index.mjs +481 -141
- package/package.json +1 -1
- package/dist/cjs/sd-pagination_2.cjs.entry.js +0 -427
- package/dist/cjs/sd-tbody.cjs.entry.js +0 -66
- package/dist/cjs/sd-thead.cjs.entry.js +0 -179
- package/dist/cjs/sd-tr.cjs.entry.js +0 -171
- package/dist/components/p-Bbs5Ws0k.js +0 -1
- package/dist/components/p-CgL8_FSD.js +0 -1
- package/dist/components/p-DuMkBStM.js +0 -1
- package/dist/components/p-vQDL-PZ8.js +0 -1
- package/dist/design-system/p-380198bc.entry.js +0 -1
- package/dist/design-system/p-6b537e2f.entry.js +0 -1
- package/dist/design-system/p-6e90fb80.entry.js +0 -1
- package/dist/design-system/p-7b77c65c.entry.js +0 -1
- package/dist/design-system/p-8f88bd67.entry.js +0 -1
- package/dist/design-system/p-ba5fea6f.entry.js +0 -1
- package/dist/design-system/p-be54d6bd.entry.js +0 -1
- package/dist/design-system/p-c3379a6e.entry.js +0 -1
- package/dist/design-system/p-dc07d618.entry.js +0 -1
- package/dist/design-system/p-ef09409c.entry.js +0 -1
- package/dist/design-system/p-f8237991.entry.js +0 -1
- package/dist/esm/sd-pagination_2.entry.js +0 -424
- package/dist/esm/sd-tbody.entry.js +0 -64
- package/dist/esm/sd-thead.entry.js +0 -177
- package/dist/esm/sd-tr.entry.js +0 -169
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as s}from"./p-Bp7ytJz5.js";var i={default:"#888888",disabled:"#BBBBBB"},l={fontWeight:"400",fontSize:"12",lineHeight:"20"},r={default:"#222222",disabled:"#888888"},c={depth1:"12",depth2:"20",depth3:"28"},d={default:{fontWeight:"400",fontSize:"12",lineHeight:"20"},selected:{fontWeight:"700"}},o={default:"#FFFFFF",hover:"#0075FF"},h={default:"#222222",hover:"#FFFFFF",disabled:"#888888",selected:"#0075FF"},n={bg:{default:"#EFF6FF"},border:{color:"#E1E1E1",width:"1"}};const a="12",g="8",u={fontSize:l.fontSize,lineHeight:l.lineHeight,fontWeight:l.fontWeight},v={icon:{default:i.default,disabled:i.disabled},text:{default:r.default,disabled:r.disabled}},m="4",p="12",f={depth1:c.depth1,depth2:c.depth2,depth3:c.depth3},b="8",x={fontSize:d.default.fontSize,lineHeight:d.default.lineHeight,fontWeight:d.default.fontWeight,selectedFontWeight:d.selected.fontWeight},_={bg:{default:o.default,hover:o.hover},content:{default:h.default,hover:h.hover,disabled:h.disabled,selected:h.selected},depth1:{bg:n.bg.default,border:n.border.color,borderWidth:n.border.width},depth2:{bg:{middle:{bg:"#F6F6F6"}}.middle.bg}};function k(e){return e.reduce(((e,t)=>t.children?e+k(t.children):e+1),0)}function w(e,t){const s=t.toLowerCase();return e.reduce(((e,i)=>{const l=i.label.toLowerCase().includes(s);if(i.children){const s=w(i.children,t);s.length>0?e.push({...i,children:s}):l&&e.push({...i,children:[]})}else l&&e.push({...i});return e}),[])}const y=class{constructor(s){e(this,s),this.listItemClick=t(this,"sdListItemClick",7)}option;depth=1;isSelected=!1;isFocused=!1;useCheckbox=!1;countInfo;listItemClick;get isGroup(){return!!this.option.children}get isSelectable(){return!this.isGroup||this.useCheckbox}get depthKey(){return this.depth<=1?"depth1":2===this.depth?"depth2":"depth3"}get paddingLeft(){return`${f[this.depthKey]}px`}handleClick=e=>{e.stopPropagation(),!this.option.disabled&&this.isSelectable&&this.listItemClick.emit(this.option)};handleCheckboxClick=e=>{e.stopPropagation()};handleCheckboxUpdate=e=>{e.stopPropagation(),!this.option.disabled&&this.isSelectable&&this.listItemClick.emit(this.option)};render(){const e=this.isGroup,t=e&&1===this.depth,i=e&&2===this.depth,l={"--list-item-padding-y":`${m}px`,"--list-item-padding-left":this.paddingLeft,"--list-item-padding-right":`${p}px`,"--list-item-gap":`${b}px`,"--list-item-font-size":`${x.fontSize}px`,"--list-item-line-height":`${x.lineHeight}px`,"--list-item-font-weight":x.fontWeight,"--list-item-bg":t?_.depth1.bg:i?_.depth2.bg:_.bg.default,"--list-item-bg-hover":_.bg.hover,"--list-item-color":_.content.default,"--list-item-color-hover":_.content.hover,"--list-item-color-disabled":_.content.disabled,"--list-item-color-selected":_.content.selected,"--list-item-font-weight-selected":x.selectedFontWeight};return t&&(l["--list-item-border-top"]=`${_.depth1.borderWidth}px solid ${_.depth1.border}`),s("div",{key:"62974a8d1442730ca752b3fc11f151c4a5be4ad1",class:{"sd-select-v2-list-item":!0,"sd-select-v2-list-item--group":e,"sd-select-v2-list-item--depth1-group":t,"sd-select-v2-list-item--depth2-group":i,"sd-select-v2-list-item--selected":!0===this.isSelected,"sd-select-v2-list-item--indeterminate":null===this.isSelected,"sd-select-v2-list-item--focused":this.isFocused,"sd-select-v2-list-item--selectable":this.isSelectable&&!this.option.disabled,"sd-select-v2-list-item--disabled":!!this.option.disabled},style:l,onClick:this.handleClick},this.useCheckbox&&s("sd-checkbox",{key:"cf29df3617e45f3b9415b8da1beed7ba5918b8cd",value:null===this.isSelected?null:!!this.isSelected,disabled:this.option.disabled,inverse:this.isFocused&&!1!==this.isSelected,class:"sd-select-v2-list-item__checkbox",onClick:this.handleCheckboxClick,onSdUpdate:this.handleCheckboxUpdate}),s("span",{key:"478e566c74c0078ef72b90d836f67156e905bbac",class:"sd-select-v2-list-item__label"},this.option.label),this.countInfo&&s("span",{key:"0cde990cb1fff4898581c8c7d321c8669dfac226",class:"sd-select-v2-list-item__count"},"(",this.countInfo.selected,"/",this.countInfo.total,")"))}};y.style="sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}";const F=class{constructor(s){e(this,s),this.searchFilter=t(this,"sdSearchFilter",7),this.searchFocus=t(this,"sdSearchFocus",7)}isScrolled=!1;searchText="";searchFilter;searchFocus;inputEl;debounceTimer;focusRafId;componentDidLoad(){requestAnimationFrame((()=>{this.focusRafId=requestAnimationFrame((()=>{this.inputEl?.focus()}))}))}async sdFocus(){this.inputEl?.focus()}handleInput=e=>{this.searchText=e.target.value,this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{this.searchFilter.emit(this.searchText)}),1e3)};handleClear=e=>{e.stopPropagation(),this.searchText="",this.debounceTimer&&clearTimeout(this.debounceTimer),this.searchFilter.emit(""),this.inputEl?.focus()};disconnectedCallback(){this.focusRafId&&cancelAnimationFrame(this.focusRafId),this.debounceTimer&&clearTimeout(this.debounceTimer)}render(){return s("div",{key:"75c6b01fbe256bca732553a27711fa7197535688",class:{"sd-select-v2-list-item-search":!0,"sd-select-v2-list-item-search--scrolled":this.isScrolled}},s("div",{key:"b66cd053b89942f3de55feecdd0eee79b863eb0d",class:"sd-select-v2-list-item-search__inner"},s("sd-icon",{key:"bed6f00452187d1087b6bb4653c04e8babeaa277",name:"search",size:16,color:"grey_70",class:"sd-select-v2-list-item-search__icon"}),s("input",{key:"4c29192547fcf9ec2563b7d843b8e77a3eb900b1",ref:e=>{this.inputEl=e},type:"text",class:"sd-select-v2-list-item-search__input",placeholder:"검색어 입력",value:this.searchText,onInput:this.handleInput,onFocus:()=>this.searchFocus.emit()}),s("button",{key:"55f94ce6eb29cec10897259b894c3460d766268e",type:"button",class:{"sd-select-v2-list-item-search__clear":!0,"sd-select-v2-list-item-search__clear--hidden":!this.searchText},onClick:this.handleClear,tabindex:this.searchText?0:-1,"aria-hidden":this.searchText?"false":"true"},s("sd-icon",{key:"a7332ec5ecebf522797bb6db1fdc385c0dfa1abe",name:"close",size:12,color:"#888888"}))))}};F.style="sd-select-v2-list-item-search{display:block}sd-select-v2-list-item-search .sd-select-v2-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon{flex-shrink:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder{color:#AAAAAA}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover{background:#F0F0F0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}";const S=class{constructor(s){e(this,s),this.optionSelect=t(this,"sdOptionSelect",7)}type="default";options=[];value=null;emitValue=!1;triggerWidth="200px";maxWidth="640px";maxHeight="260px";searchKeyword="";isScrolled=!1;focusedIndex=-1;optionSelect;listEl;lastScrolledIndex=-1;keydownAttached=!1;suppressHover=!1;get isDepth(){return"default_depth"===this.type||"multi_depth"===this.type}get isMulti(){return"multi"===this.type||"multi_depth"===this.type}get showSearch(){return(this.isDepth?k(this.options):this.options.length)>=11}get filteredOptions(){if(!this.searchKeyword)return this.options;if(this.isDepth)return w(this.options,this.searchKeyword);const e=this.searchKeyword.toLowerCase();return this.options.filter((t=>t.label.toLowerCase().includes(e)))}get isEmpty(){return this.isDepth?0===k(this.filteredOptions)&&0===this.filteredOptions.length:0===this.filteredOptions.length}getSelectedValues(){return this.value&&Array.isArray(this.value)?this.emitValue?new Set(this.value):new Set(this.value.map((e=>e.value))):new Set}isOptionSelected(e){return this.isMulti?this.getSelectedValues().has(e.value):this.emitValue||null==this.value||"object"!=typeof this.value||Array.isArray(this.value)?this.value===e.value:this.value.value===e.value}getGroupSelectionState(e){if(!this.isMulti||!e.children)return!1;const t=this.getSelectedValues();if(0===t.size)return!1;const s=this.collectVisibleLeaves(e);if(0===s.length)return!1;const i=s.filter((e=>t.has(e.value))).length;return 0!==i&&(i===s.length||null)}getCountInfo(e){if(!this.isMulti||!e.children)return;const t=this.getSelectedValues(),s=this.collectVisibleLeaves(e);return{selected:s.filter((e=>t.has(e.value))).length,total:s.length}}findOriginalOption(e,t){for(const s of t){if(s.value===e)return s;if(s.children){const t=this.findOriginalOption(e,s.children);if(t)return t}}}collectLeaves(e){return e.children?e.children.flatMap((e=>this.collectLeaves(e))):[e]}collectVisibleLeaves(e){if(e.disabled)return[];if(!e.children)return[e];if(0===e.children.length){const t=this.findOriginalOption(e.value,this.options);return t?this.collectLeaves(t).filter((e=>!e.disabled)):[]}return e.children.flatMap((e=>this.collectVisibleLeaves(e)))}get navigableOptions(){const e=[],t=s=>{for(const i of s){const s=!!i.children;(!s||this.isMulti)&&!i.disabled&&e.push(i),s&&i.children&&i.children.length>0&&t(i.children)}};return t(this.filteredOptions),e}isOptionFocused(e){if(this.focusedIndex<0)return!1;const t=this.navigableOptions[this.focusedIndex];return!!t&&t.value===e.value}resetFocusOnFilter(){this.focusedIndex=this.navigableOptions.length>0?0:-1,this.suppressHover&&(document.removeEventListener("mousemove",this.releaseHoverSuppress,!0),this.suppressHover=!1)}handleSearchFilter=e=>{this.searchKeyword=e.detail};handleScroll=e=>{this.isScrolled=e.target.scrollTop>0};emitOptionSelect(e){this.optionSelect.emit({option:e,leaves:this.collectVisibleLeaves(e)})}handleOptionClick=e=>{e.stopPropagation(),this.emitOptionSelect(e.detail)};handleOptionHover=e=>{if(this.suppressHover)return;const t=this.navigableOptions.findIndex((t=>t.value===e.value));t>=0&&(this.focusedIndex=t)};releaseHoverSuppress=()=>{this.suppressHover=!1,document.removeEventListener("mousemove",this.releaseHoverSuppress,!0)};handleKeyDown=e=>{const t=this.navigableOptions;if("ArrowDown"===e.key){if(0===t.length)return;e.preventDefault(),e.stopPropagation(),this.focusedIndex=this.focusedIndex<0?0:(this.focusedIndex+1)%t.length,this.beginHoverSuppression()}else if("ArrowUp"===e.key){if(0===t.length)return;e.preventDefault(),e.stopPropagation(),this.focusedIndex=this.focusedIndex<=0?t.length-1:this.focusedIndex-1,this.beginHoverSuppression()}else if("Enter"===e.key){if(this.focusedIndex<0||this.focusedIndex>=t.length)return;e.preventDefault(),e.stopPropagation(),this.emitOptionSelect(t[this.focusedIndex])}};beginHoverSuppression(){this.suppressHover||(this.suppressHover=!0,document.addEventListener("mousemove",this.releaseHoverSuppress,!0))}scrollFocusedIntoView(){const e=this.listEl,t=e?.querySelector(".sd-select-v2-list-item--focused");if(!e||!t)return;const s=e.getBoundingClientRect(),i=t.getBoundingClientRect();i.top<s.top?e.scrollTop+=i.top-s.top:i.bottom>s.bottom&&(e.scrollTop+=i.bottom-s.bottom)}connectedCallback(){this.keydownAttached||(document.addEventListener("keydown",this.handleKeyDown,!0),this.keydownAttached=!0)}disconnectedCallback(){this.keydownAttached&&(document.removeEventListener("keydown",this.handleKeyDown,!0),this.keydownAttached=!1),this.suppressHover&&(document.removeEventListener("mousemove",this.releaseHoverSuppress,!0),this.suppressHover=!1)}componentDidRender(){this.focusedIndex!==this.lastScrolledIndex&&(this.lastScrolledIndex=this.focusedIndex,this.focusedIndex>=0&&this.scrollFocusedIntoView())}renderOptions(e,t=1){return e.map((e=>{const i=!!e.children;return[s("sd-select-v2-list-item",{option:e,depth:t,isSelected:i?this.getGroupSelectionState(e):this.isOptionSelected(e),isFocused:this.isOptionFocused(e),useCheckbox:this.isMulti,countInfo:this.getCountInfo(e),onSdListItemClick:this.handleOptionClick,onMouseEnter:()=>this.handleOptionHover(e)}),i&&e.children?this.renderOptions(e.children,t+1):null]}))}render(){return s("div",{key:"d4d80ebd565436cd929961a2f9ce50adf92c124b",class:"sd-select-v2-listbox",style:{"--listbox-trigger-width":this.triggerWidth,"--listbox-max-width":this.maxWidth,"--listbox-max-height":this.maxHeight,"--listbox-radius":"4px"}},this.showSearch&&s("sd-select-v2-list-item-search",{key:"bd549975fe6187aa7e77e718c8d2ba4a6d6e33de",isScrolled:this.isScrolled,onSdSearchFilter:this.handleSearchFilter}),s("div",{key:"4ac6a1512781942fef3e42d6ca32762962df1836",class:"sd-select-v2-listbox__list",onScroll:this.handleScroll,ref:e=>{this.listEl=e}},this.isEmpty?s("div",{class:"sd-select-v2-listbox__empty"},"표시할 항목이 없습니다."):this.isDepth?this.renderOptions(this.filteredOptions):this.filteredOptions.map((e=>s("sd-select-v2-list-item",{option:e,depth:1,isSelected:this.isOptionSelected(e),isFocused:this.isOptionFocused(e),useCheckbox:this.isMulti,onSdListItemClick:this.handleOptionClick,onMouseEnter:()=>this.handleOptionHover(e)})))))}static get watchers(){return{searchKeyword:[{resetFocusOnFilter:0}]}}};S.style=":host{display:block}:host .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}";const C=class{constructor(s){e(this,s),this.triggerClick=t(this,"sdTriggerClick",7),this.triggerFocus=t(this,"sdTriggerFocus",7),this.triggerBlur=t(this,"sdTriggerBlur",7)}displayText="";placeholder="선택";disabled=!1;isOpen=!1;triggerClick;triggerFocus;triggerBlur;triggerEl;async sdFocus(){this.disabled||this.triggerEl?.focus()}handleClick=()=>{this.disabled||this.triggerClick.emit()};handleFocus=()=>{this.triggerFocus.emit()};handleBlur=()=>{this.triggerBlur.emit()};render(){const e=!!this.displayText;return s("div",{key:"7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3",ref:e=>{this.triggerEl=e},tabindex:this.disabled?-1:0,class:{"sd-select-v2-trigger":!0,"sd-select-v2-trigger--open":this.isOpen,"sd-select-v2-trigger--disabled":this.disabled},style:{"--trigger-padding-x":`${a}px`,"--trigger-gap":`${g}px`,"--trigger-font-size":`${u.fontSize}px`,"--trigger-line-height":`${u.lineHeight}px`,"--trigger-font-weight":u.fontWeight,"--trigger-color":this.disabled?v.text.disabled:e?v.text.default:v.icon.default,"--trigger-icon-color":this.disabled?v.icon.disabled:v.icon.default},onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur},s("div",{key:"de5f5a44626fce29c5a83cf0a14dd03352d40b57",class:"sd-select-v2-trigger__content"},s("span",{key:"a36a013e9ef359160c2b9d24b42ee6f228aca302",class:"sd-select-v2-trigger__text"},e?this.displayText:this.placeholder),s("sd-icon",{key:"4bfcfce96fbe2008517ee26d7802d4492292faa5",name:"chevronDown",size:12,color:"var(--trigger-icon-color)",class:{"sd-select-v2-trigger__icon":!0,"sd-select-v2-trigger__icon--open":this.isOpen}})))}};C.style="sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}";export{y as sd_select_v2_list_item,F as sd_select_v2_list_item_search,S as sd_select_v2_listbox,C as sd_select_v2_trigger}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,a as s,h as i}from"./p-Bp7ytJz5.js";import{u as a,r as e,s as o,i as n,a as d}from"./p-DRVnqiWc.js";let l=0;const r=class{constructor(s){t(this,s)}get el(){return s(this)}autoRemove=!1;entry;isVisible=!1;backdropVisible=!1;layerRef;async open(t,s){const i="modal-"+ ++l,a=this.createConfirmModal(i,t);return this.attachModalEventListeners(i,a),this.mountEntry({id:i,modalEl:a,modalRef:s,persistent:!!t.persistent,closing:!1}),i}async openLoading(t,s){const i="modal-"+ ++l,a=this.createLoadingModal(i,t);return this.attachLoadingModalEventListeners(i,a),this.mountEntry({id:i,modalEl:a,modalRef:s,persistent:!!t.persistent,closing:!1}),i}async createCustom(t,s,i){const a="modal-"+ ++l;return t.setAttribute("data-modal-id",a),t.classList.add("sd-modal-container__modal"),this.attachModalEventListeners(a,t),this.mountEntry({id:a,modalEl:t,modalRef:i,persistent:!!s.persistent,closing:!1}),a}componentDidRender(){if(!this.entry||this.entry.closing||!this.layerRef)return;if(this.entry.modalEl.isConnected)return;const{id:t,modalEl:s}=this.entry;this.layerRef.appendChild(s),this.waitForModalReady(s).then((()=>{requestAnimationFrame((()=>{this.entry&&this.entry.id===t&&!this.entry.closing&&s.isConnected&&(this.backdropVisible=!0,s.classList.add("sd-modal-container__modal--visible"))}))}))}disconnectedCallback(){this.entry?.dismissTimerId&&clearTimeout(this.entry.dismissTimerId),this.entry&&a(this.entry.id)}async dismissById(t,s){this.entry?.id===t&&this.requestDismiss(s)}async update(t,s){this.entry&&this.entry.id===t&&!this.entry.closing&&("sd-loading-modal"!==this.entry.modalEl.tagName.toLowerCase()?this.applyProps(this.entry.modalEl,s):this.applyLoadingProps(this.entry.modalEl,s))}mountEntry(t){if(this.entry)throw new Error("[sd-modal-container] This instance already manages an active modal.");this.entry=t,this.backdropVisible=!1,this.isVisible=!0,e({id:t.id,persistent:t.persistent,requestClose:()=>this.dispatchClose(),shake:()=>this.shakeModal(t.modalEl),setZIndex:t=>{this.el.style.setProperty("--sd-modal-container-z-index",String(t))}})}attachModalEventListeners(t,s){s.addEventListener("sdOk",(()=>this.requestDismiss("confirm"))),s.addEventListener("sdCancel",(()=>this.requestDismiss("cancel"))),s.addEventListener("sdClose",(()=>this.requestDismiss("close")))}attachLoadingModalEventListeners(t,s){s.addEventListener("sdClick",(()=>{this.entry?.modalRef._triggerClick?.()}))}dispatchClose(){this.entry?.modalEl.dispatchEvent(new CustomEvent("sdClose"))}requestDismiss(t){const s=this.entry;if(!s||s.closing)return;s.modalEl.classList.remove("sd-modal-container__modal--visible");const i=setTimeout((()=>{this.finalizeDismiss(s.id)}),350);o(s.id,!1),this.entry={...s,closing:!0,dismissTimerId:i},this.backdropVisible=!1,"confirm"===t?s.modalRef._triggerOk():"cancel"===t?s.modalRef._triggerCancel():"close"===t&&s.modalRef._triggerClose()}finalizeDismiss(t){const s=this.entry;s&&s.id===t&&(s.dismissTimerId&&clearTimeout(s.dismissTimerId),s.modalEl.remove(),a(t),s.modalRef._triggerDismissed(),this.entry=void 0,this.backdropVisible=!1,this.isVisible=!1,this.autoRemove&&this.el.remove())}createConfirmModal(t,s){const i=document.createElement("sd-confirm-modal");return i.setAttribute("data-modal-id",t),i.classList.add("sd-modal-container__modal"),this.applyProps(i,s),i}createLoadingModal(t,s){const i=document.createElement("sd-loading-modal");return i.setAttribute("data-modal-id",t),i.classList.add("sd-modal-container__modal"),this.applyLoadingProps(i,s),i}applyLoadingProps(t,s){this.hasOwnProp(s,"state")&&this.setAttr(t,"state",s.state),this.hasOwnProp(s,"message")&&this.setAttr(t,"message",s.message),this.hasOwnProp(s,"useButton")&&(s.useButton?t.setAttribute("use-button",""):t.removeAttribute("use-button")),this.hasOwnProp(s,"buttonLabel")&&this.setAttr(t,"button-label",s.buttonLabel),this.hasOwnProp(s,"width")&&this.setAttr(t,"width",null!=s.width?String(s.width):void 0),this.hasOwnProp(s,"height")&&this.setAttr(t,"height",null!=s.height?String(s.height):void 0)}applyProps(t,s){this.hasOwnProp(s,"type")&&this.setAttr(t,"type",s.type),this.hasOwnProp(s,"title")&&this.setAttr(t,"modal-title",s.title),this.hasOwnProp(s,"titleClass")&&this.setAttr(t,"title-class",s.titleClass),this.hasOwnProp(s,"mainButtonLabel")&&this.setAttr(t,"main-button-label",s.mainButtonLabel),this.hasOwnProp(s,"mainButtonName")&&this.setAttr(t,"main-button-name",s.mainButtonName),this.hasOwnProp(s,"subButtonLabel")&&this.setAttr(t,"sub-button-label",s.subButtonLabel),this.hasOwnProp(s,"tagPreset")&&this.setAttr(t,"tag-preset",s.tagPreset),this.hasOwnProp(s,"tagLabel")&&this.setAttr(t,"tag-label",s.tagLabel),this.hasOwnProp(s,"slotLabel")&&this.setAttr(t,"slot-label",s.slotLabel),this.hasOwnProp(s,"topMessage")&&(t.topMessage=s.topMessage??[]),this.hasOwnProp(s,"bottomMessage")&&(t.bottomMessage=s.bottomMessage??[]),this.hasOwnProp(s,"tagContents")&&(t.tagContents=s.tagContents)}handleBackdropClick=()=>{this.entry&&n(this.entry.id)&&d(this.entry.id)};shakeModal(t){const s="sd-modal-container__modal--shake";t.classList.remove(s),t.addEventListener("animationend",(()=>t.classList.remove(s)),{once:!0}),requestAnimationFrame((()=>{t.classList.add(s)}))}waitForModalReady(t){const s=t.componentOnReady;return"function"==typeof s?s.call(t).then((()=>{})):new Promise((t=>{requestAnimationFrame((()=>{requestAnimationFrame((()=>t()))}))}))}hasOwnProp(t,s){return Object.prototype.hasOwnProperty.call(t,s)}setAttr(t,s,i){null!=i&&t.setAttribute(s,i)}render(){return this.isVisible&&this.entry?i("div",{class:"sd-modal-container"},i("div",{class:"sd-modal-container__layer","data-modal-id":this.entry.id,ref:t=>{this.layerRef=t}},i("div",{class:{"sd-modal-container__backdrop":!0,"sd-modal-container__backdrop--visible":this.backdropVisible},onClick:this.handleBackdropClick}))):null}};r.style="sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}";export{r as sd_modal_container}
|
|
@@ -1,424 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-Bp7ytJz5.js';
|
|
2
|
-
import { n as nanoid } from './index-CCwNgVmC.js';
|
|
3
|
-
|
|
4
|
-
const pagination = {
|
|
5
|
-
height: "24",
|
|
6
|
-
paddingX: "6",
|
|
7
|
-
radius: "6",
|
|
8
|
-
gap: "12",
|
|
9
|
-
move: {
|
|
10
|
-
gap: "4"
|
|
11
|
-
},
|
|
12
|
-
icon: "12",
|
|
13
|
-
typography: {
|
|
14
|
-
"default": {
|
|
15
|
-
fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
|
|
16
|
-
fontSize: "12",
|
|
17
|
-
fontWeight: "500",
|
|
18
|
-
lineHeight: "20"},
|
|
19
|
-
selected: {
|
|
20
|
-
fontWeight: "700"}
|
|
21
|
-
},
|
|
22
|
-
item: {
|
|
23
|
-
bg: {
|
|
24
|
-
hover: "#EEEEEE",
|
|
25
|
-
selected: "#E6F1FF"
|
|
26
|
-
},
|
|
27
|
-
content: {
|
|
28
|
-
"default": "#555555",
|
|
29
|
-
hover: "#004290",
|
|
30
|
-
selected: "#004290"
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
var paginationTokens = {
|
|
35
|
-
pagination: pagination
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
const PAGINATION_LAYOUT = {
|
|
39
|
-
height: `${paginationTokens.pagination.height}px`,
|
|
40
|
-
paddingX: `${paginationTokens.pagination.paddingX}px`,
|
|
41
|
-
radius: `${paginationTokens.pagination.radius}px`,
|
|
42
|
-
gap: `${paginationTokens.pagination.gap}px`,
|
|
43
|
-
moveGap: `${paginationTokens.pagination.move.gap}px`,
|
|
44
|
-
iconSize: Number(paginationTokens.pagination.icon),
|
|
45
|
-
};
|
|
46
|
-
const PAGINATION_TYPOGRAPHY = {
|
|
47
|
-
fontFamily: paginationTokens.pagination.typography.default.fontFamily,
|
|
48
|
-
fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
|
|
49
|
-
lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
|
|
50
|
-
fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
|
|
51
|
-
fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
|
|
52
|
-
};
|
|
53
|
-
const PAGINATION_COLORS = {
|
|
54
|
-
contentDefault: paginationTokens.pagination.item.content.default,
|
|
55
|
-
contentHover: paginationTokens.pagination.item.content.hover,
|
|
56
|
-
contentSelected: paginationTokens.pagination.item.content.selected,
|
|
57
|
-
bgHover: paginationTokens.pagination.item.bg.hover,
|
|
58
|
-
bgSelected: paginationTokens.pagination.item.bg.selected,
|
|
59
|
-
// TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
|
|
60
|
-
iconDefault: '#888888',
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
|
|
64
|
-
|
|
65
|
-
const PER_PAGE = 10;
|
|
66
|
-
const BUTTON_WIDTH = {
|
|
67
|
-
1: 24,
|
|
68
|
-
2: 34,
|
|
69
|
-
3: 40,
|
|
70
|
-
4: 48,
|
|
71
|
-
5: 56,
|
|
72
|
-
};
|
|
73
|
-
const SdPagination = class {
|
|
74
|
-
constructor(hostRef) {
|
|
75
|
-
registerInstance(this, hostRef);
|
|
76
|
-
this.pageChange = createEvent(this, "sdPageChange", 7);
|
|
77
|
-
}
|
|
78
|
-
currentPage = 1;
|
|
79
|
-
lastPage = 1;
|
|
80
|
-
simple = false;
|
|
81
|
-
pageChange;
|
|
82
|
-
get pageNumbers() {
|
|
83
|
-
const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
84
|
-
const end = Math.min(start + PER_PAGE - 1, this.lastPage);
|
|
85
|
-
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
86
|
-
}
|
|
87
|
-
get buttonWidth() {
|
|
88
|
-
const lastPageNum = this.pageNumbers.at(-1) ?? 1;
|
|
89
|
-
const maxPageLength = lastPageNum.toString().length;
|
|
90
|
-
return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
|
|
91
|
-
}
|
|
92
|
-
get isFirstGroup() {
|
|
93
|
-
return this.currentPage <= PER_PAGE;
|
|
94
|
-
}
|
|
95
|
-
get isLastGroup() {
|
|
96
|
-
const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
97
|
-
return startPageGroup + PER_PAGE - 1 >= this.lastPage;
|
|
98
|
-
}
|
|
99
|
-
handlePageChange = (page) => {
|
|
100
|
-
if (page < 1 || page > this.lastPage)
|
|
101
|
-
return;
|
|
102
|
-
this.currentPage = page;
|
|
103
|
-
this.pageChange.emit(page);
|
|
104
|
-
};
|
|
105
|
-
handleGroupChange = (direction) => {
|
|
106
|
-
const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
|
|
107
|
-
const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
|
|
108
|
-
this.handlePageChange(newPage);
|
|
109
|
-
};
|
|
110
|
-
renderNavButton(iconName, ariaLabel, onClick) {
|
|
111
|
-
return (h("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, h("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
|
|
112
|
-
}
|
|
113
|
-
renderPrevButtons() {
|
|
114
|
-
if (this.simple) {
|
|
115
|
-
if (this.currentPage <= 1)
|
|
116
|
-
return null;
|
|
117
|
-
return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
|
|
118
|
-
}
|
|
119
|
-
if (this.isFirstGroup)
|
|
120
|
-
return null;
|
|
121
|
-
return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
|
|
122
|
-
}
|
|
123
|
-
renderNextButtons() {
|
|
124
|
-
if (this.simple) {
|
|
125
|
-
if (this.currentPage >= this.lastPage)
|
|
126
|
-
return null;
|
|
127
|
-
return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
|
|
128
|
-
}
|
|
129
|
-
if (this.isLastGroup)
|
|
130
|
-
return null;
|
|
131
|
-
return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
|
|
132
|
-
}
|
|
133
|
-
render() {
|
|
134
|
-
const cssVars = {
|
|
135
|
-
'--sd-pagination-height': PAGINATION_LAYOUT.height,
|
|
136
|
-
'--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
|
|
137
|
-
'--sd-pagination-radius': PAGINATION_LAYOUT.radius,
|
|
138
|
-
'--sd-pagination-gap': PAGINATION_LAYOUT.gap,
|
|
139
|
-
'--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
|
|
140
|
-
'--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
|
|
141
|
-
'--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
|
|
142
|
-
'--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
|
|
143
|
-
'--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
|
|
144
|
-
'--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
|
|
145
|
-
'--sd-pagination-content': PAGINATION_COLORS.contentDefault,
|
|
146
|
-
'--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
|
|
147
|
-
'--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
|
|
148
|
-
'--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
|
|
149
|
-
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
150
|
-
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
151
|
-
};
|
|
152
|
-
return (h("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
|
|
153
|
-
'sd-pagination': true,
|
|
154
|
-
'sd-pagination--simple': this.simple,
|
|
155
|
-
}, style: cssVars }, h("div", { key: 'cd73997ae59f87b70c31e88fd5b4246bd6044bd0', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
156
|
-
'sd-pagination__item': true,
|
|
157
|
-
'sd-pagination__item--selected': this.currentPage === n,
|
|
158
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
159
|
-
}
|
|
160
|
-
};
|
|
161
|
-
SdPagination.style = sdPaginationCss();
|
|
162
|
-
|
|
163
|
-
const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}`;
|
|
164
|
-
|
|
165
|
-
const SdSelectV2 = class {
|
|
166
|
-
constructor(hostRef) {
|
|
167
|
-
registerInstance(this, hostRef);
|
|
168
|
-
this.update = createEvent(this, "sdUpdate", 7);
|
|
169
|
-
this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
|
|
170
|
-
}
|
|
171
|
-
static VIEWPORT_PADDING = 20;
|
|
172
|
-
static PORTAL_OFFSET_Y = 4;
|
|
173
|
-
static CLOSE_ANIMATION_DURATION = 150;
|
|
174
|
-
get el() { return getElement(this); }
|
|
175
|
-
type = 'default';
|
|
176
|
-
value = null;
|
|
177
|
-
options = [];
|
|
178
|
-
placeholder = '선택';
|
|
179
|
-
maxDropdownWidth = '640px';
|
|
180
|
-
dropdownHeight = '260px';
|
|
181
|
-
disabled = false;
|
|
182
|
-
label = '';
|
|
183
|
-
labelWidth = '';
|
|
184
|
-
addonLabel = '';
|
|
185
|
-
addonAlign = 'start';
|
|
186
|
-
error = false;
|
|
187
|
-
hint = '';
|
|
188
|
-
errorMessage = '';
|
|
189
|
-
rules = [];
|
|
190
|
-
icon = undefined;
|
|
191
|
-
labelTooltip = '';
|
|
192
|
-
labelTooltipProps = null;
|
|
193
|
-
emitValue = false;
|
|
194
|
-
width = '';
|
|
195
|
-
isOpen = false;
|
|
196
|
-
isAnimatingOut = false;
|
|
197
|
-
triggerWidth = '200px';
|
|
198
|
-
resolvedDropdownHeight = '260px';
|
|
199
|
-
resolvedMaxDropdownWidth = '640px';
|
|
200
|
-
focused = false;
|
|
201
|
-
hovered = false;
|
|
202
|
-
update;
|
|
203
|
-
dropDownShow;
|
|
204
|
-
async sdFocus() {
|
|
205
|
-
if (this.disabled)
|
|
206
|
-
return;
|
|
207
|
-
await this.triggerComponentRef?.sdFocus();
|
|
208
|
-
}
|
|
209
|
-
async sdOpen() {
|
|
210
|
-
// sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
|
|
211
|
-
await new Promise(resolve => setTimeout(resolve, 0));
|
|
212
|
-
if (this.disabled || this.isOpen)
|
|
213
|
-
return;
|
|
214
|
-
this.prepareDropdownGeometry();
|
|
215
|
-
if (this.closeAnimationTimer)
|
|
216
|
-
clearTimeout(this.closeAnimationTimer);
|
|
217
|
-
this.isAnimatingOut = false;
|
|
218
|
-
this.isOpen = true;
|
|
219
|
-
}
|
|
220
|
-
triggerRef;
|
|
221
|
-
triggerComponentRef;
|
|
222
|
-
closeAnimationTimer;
|
|
223
|
-
name = nanoid();
|
|
224
|
-
triggerHasFocus = false;
|
|
225
|
-
watchIsOpen(newValue) {
|
|
226
|
-
this.syncFocusedState(newValue);
|
|
227
|
-
this.dropDownShow.emit({ isOpen: newValue });
|
|
228
|
-
}
|
|
229
|
-
get isMulti() {
|
|
230
|
-
return this.type === 'multi' || this.type === 'multi_depth';
|
|
231
|
-
}
|
|
232
|
-
get displayText() {
|
|
233
|
-
if (this.isMulti) {
|
|
234
|
-
if (!Array.isArray(this.value) || this.value.length === 0)
|
|
235
|
-
return '';
|
|
236
|
-
const flat = this.flattenOptions(this.options);
|
|
237
|
-
return this.value
|
|
238
|
-
.map(item => {
|
|
239
|
-
if (item != null && typeof item === 'object') {
|
|
240
|
-
const opt = item;
|
|
241
|
-
return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
|
|
242
|
-
}
|
|
243
|
-
return flat.find(o => o.value === item)?.label ?? '';
|
|
244
|
-
})
|
|
245
|
-
.filter(Boolean)
|
|
246
|
-
.join(', ');
|
|
247
|
-
}
|
|
248
|
-
if (this.value == null)
|
|
249
|
-
return '';
|
|
250
|
-
if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
|
|
251
|
-
return this.value.label ?? '';
|
|
252
|
-
}
|
|
253
|
-
const flat = this.flattenOptions(this.options);
|
|
254
|
-
const found = flat.find(o => o.value === this.value);
|
|
255
|
-
return found?.label ?? '';
|
|
256
|
-
}
|
|
257
|
-
flattenOptions(options) {
|
|
258
|
-
return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
|
|
259
|
-
}
|
|
260
|
-
getSelectedOptions() {
|
|
261
|
-
const val = this.value;
|
|
262
|
-
if (!val || !Array.isArray(val))
|
|
263
|
-
return [];
|
|
264
|
-
if (this.emitValue) {
|
|
265
|
-
return val
|
|
266
|
-
.map(v => this.findOriginalOption(v, this.options))
|
|
267
|
-
.filter((o) => !!o);
|
|
268
|
-
}
|
|
269
|
-
return val;
|
|
270
|
-
}
|
|
271
|
-
toMultiValue(options) {
|
|
272
|
-
return this.emitValue ? options.map(o => o.value) : options;
|
|
273
|
-
}
|
|
274
|
-
parsePixelValue(value, fallback) {
|
|
275
|
-
const parsed = Number.parseFloat(value);
|
|
276
|
-
return Number.isFinite(parsed) ? parsed : fallback;
|
|
277
|
-
}
|
|
278
|
-
updateDropdownViewportConstraints() {
|
|
279
|
-
if (!this.triggerRef)
|
|
280
|
-
return;
|
|
281
|
-
const triggerRect = this.triggerRef.getBoundingClientRect();
|
|
282
|
-
const viewportPadding = SdSelectV2.VIEWPORT_PADDING;
|
|
283
|
-
const offsetY = SdSelectV2.PORTAL_OFFSET_Y;
|
|
284
|
-
const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
|
|
285
|
-
const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
|
|
286
|
-
const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
|
|
287
|
-
const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
|
|
288
|
-
const availableHeight = Math.max(availableBelow, availableAbove);
|
|
289
|
-
const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
|
|
290
|
-
this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
|
|
291
|
-
this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
|
|
292
|
-
}
|
|
293
|
-
handleViewportResize = () => {
|
|
294
|
-
if (!this.isOpen)
|
|
295
|
-
return;
|
|
296
|
-
this.updateDropdownViewportConstraints();
|
|
297
|
-
};
|
|
298
|
-
findOriginalOption(value, options) {
|
|
299
|
-
for (const opt of options) {
|
|
300
|
-
if (opt.value === value)
|
|
301
|
-
return opt;
|
|
302
|
-
if (opt.children) {
|
|
303
|
-
const found = this.findOriginalOption(value, opt.children);
|
|
304
|
-
if (found)
|
|
305
|
-
return found;
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
return undefined;
|
|
309
|
-
}
|
|
310
|
-
closeDropdown() {
|
|
311
|
-
if (!this.isOpen)
|
|
312
|
-
return;
|
|
313
|
-
this.isOpen = false;
|
|
314
|
-
this.isAnimatingOut = true;
|
|
315
|
-
if (this.closeAnimationTimer)
|
|
316
|
-
clearTimeout(this.closeAnimationTimer);
|
|
317
|
-
this.closeAnimationTimer = setTimeout(() => {
|
|
318
|
-
this.isAnimatingOut = false;
|
|
319
|
-
}, SdSelectV2.CLOSE_ANIMATION_DURATION);
|
|
320
|
-
}
|
|
321
|
-
prepareDropdownGeometry() {
|
|
322
|
-
if (this.triggerRef) {
|
|
323
|
-
this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
|
|
324
|
-
}
|
|
325
|
-
this.updateDropdownViewportConstraints();
|
|
326
|
-
}
|
|
327
|
-
syncFocusedState(isOpen = this.isOpen) {
|
|
328
|
-
this.focused = isOpen || this.triggerHasFocus;
|
|
329
|
-
}
|
|
330
|
-
handleTriggerFocus = () => {
|
|
331
|
-
this.triggerHasFocus = true;
|
|
332
|
-
this.syncFocusedState();
|
|
333
|
-
};
|
|
334
|
-
handleTriggerBlur = () => {
|
|
335
|
-
this.triggerHasFocus = false;
|
|
336
|
-
this.syncFocusedState();
|
|
337
|
-
};
|
|
338
|
-
handleTriggerClick = () => {
|
|
339
|
-
if (this.isOpen) {
|
|
340
|
-
this.closeDropdown();
|
|
341
|
-
return;
|
|
342
|
-
}
|
|
343
|
-
this.prepareDropdownGeometry();
|
|
344
|
-
if (this.closeAnimationTimer)
|
|
345
|
-
clearTimeout(this.closeAnimationTimer);
|
|
346
|
-
this.isAnimatingOut = false;
|
|
347
|
-
this.isOpen = true;
|
|
348
|
-
};
|
|
349
|
-
emitUpdate(value) {
|
|
350
|
-
this.update.emit(value);
|
|
351
|
-
}
|
|
352
|
-
handleOptionSelect = (detail) => {
|
|
353
|
-
const { option, leaves } = detail;
|
|
354
|
-
if (this.isMulti) {
|
|
355
|
-
this.handleMultiSelect(option, leaves);
|
|
356
|
-
}
|
|
357
|
-
else {
|
|
358
|
-
this.closeDropdown();
|
|
359
|
-
this.value = this.emitValue ? option.value : option;
|
|
360
|
-
const nextValue = this.value;
|
|
361
|
-
requestAnimationFrame(() => {
|
|
362
|
-
this.emitUpdate(nextValue);
|
|
363
|
-
});
|
|
364
|
-
}
|
|
365
|
-
};
|
|
366
|
-
handleMultiSelect(option, leaves) {
|
|
367
|
-
const selected = this.getSelectedOptions();
|
|
368
|
-
const isGroup = !!option.children;
|
|
369
|
-
let newSelected;
|
|
370
|
-
if (isGroup) {
|
|
371
|
-
const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
|
|
372
|
-
if (allSelected) {
|
|
373
|
-
const leafValues = new Set(leaves.map(l => l.value));
|
|
374
|
-
newSelected = selected.filter(s => !leafValues.has(s.value));
|
|
375
|
-
}
|
|
376
|
-
else {
|
|
377
|
-
const existing = new Set(selected.map(s => s.value));
|
|
378
|
-
const toAdd = leaves.filter(l => !existing.has(l.value));
|
|
379
|
-
newSelected = [...selected, ...toAdd];
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
else {
|
|
383
|
-
const exists = selected.some(s => s.value === option.value);
|
|
384
|
-
newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
|
|
385
|
-
}
|
|
386
|
-
this.value = this.toMultiValue(newSelected);
|
|
387
|
-
this.emitUpdate(this.value);
|
|
388
|
-
}
|
|
389
|
-
connectedCallback() {
|
|
390
|
-
window.addEventListener('resize', this.handleViewportResize);
|
|
391
|
-
}
|
|
392
|
-
disconnectedCallback() {
|
|
393
|
-
window.removeEventListener('resize', this.handleViewportResize);
|
|
394
|
-
if (this.closeAnimationTimer)
|
|
395
|
-
clearTimeout(this.closeAnimationTimer);
|
|
396
|
-
}
|
|
397
|
-
render() {
|
|
398
|
-
const portalProps = {
|
|
399
|
-
open: this.isOpen,
|
|
400
|
-
parentRef: this.triggerRef,
|
|
401
|
-
viewportPadding: SdSelectV2.VIEWPORT_PADDING,
|
|
402
|
-
onSdClose: () => {
|
|
403
|
-
this.closeDropdown();
|
|
404
|
-
},
|
|
405
|
-
};
|
|
406
|
-
return (h("sd-field", { key: '76b432c04fa0f9fca70e63e9c7d16ed768fc9dd1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
407
|
-
this.hovered = true;
|
|
408
|
-
}, onMouseLeave: () => {
|
|
409
|
-
this.hovered = false;
|
|
410
|
-
} }, h("div", { key: 'dba3a313b7e0171a441540877aacdc7d5c2e7f04', class: "sd-select-v2", ref: el => {
|
|
411
|
-
this.triggerRef = el;
|
|
412
|
-
} }, h("sd-select-v2-trigger", { key: '7790357558f174eb70b15ed72574f738b062c479', ref: el => {
|
|
413
|
-
this.triggerComponentRef = el;
|
|
414
|
-
}, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '672f3583b24e363b74d184d13866ee19a78b04d9', ...portalProps }, h("sd-select-v2-listbox", { key: 'f71d95ad06c74356e4d5ce94da7e720c002390b6', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
415
|
-
}
|
|
416
|
-
static get watchers() { return {
|
|
417
|
-
"isOpen": [{
|
|
418
|
-
"watchIsOpen": 0
|
|
419
|
-
}]
|
|
420
|
-
}; }
|
|
421
|
-
};
|
|
422
|
-
SdSelectV2.style = sdSelectV2Css();
|
|
423
|
-
|
|
424
|
-
export { SdPagination as sd_pagination, SdSelectV2 as sd_select_v2 };
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as getElement, h, H as Host } from './index-Bp7ytJz5.js';
|
|
2
|
-
import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
|
|
3
|
-
|
|
4
|
-
const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
|
|
5
|
-
|
|
6
|
-
const SdTbody = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
}
|
|
10
|
-
get el() { return getElement(this); }
|
|
11
|
-
rows = [];
|
|
12
|
-
tableId = '';
|
|
13
|
-
topSpacerHeight = 0;
|
|
14
|
-
bottomSpacerHeight = 0;
|
|
15
|
-
tableEl = null;
|
|
16
|
-
handleRowsChange(newRows) {
|
|
17
|
-
const safeRows = newRows ?? [];
|
|
18
|
-
if (this.tableEl?.setRowCountSync) {
|
|
19
|
-
this.tableEl.setRowCountSync(safeRows.length);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
componentWillLoad() {
|
|
23
|
-
this.syncTableContext();
|
|
24
|
-
this.rows = this.rows ?? [];
|
|
25
|
-
if (this.tableEl?.setRowCountSync) {
|
|
26
|
-
this.tableEl.setRowCountSync(this.rows.length);
|
|
27
|
-
}
|
|
28
|
-
this.el.setSpacersSync = (top, bottom) => {
|
|
29
|
-
this.topSpacerHeight = top;
|
|
30
|
-
this.bottomSpacerHeight = bottom;
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
componentDidLoad() {
|
|
34
|
-
this.syncTableContext();
|
|
35
|
-
}
|
|
36
|
-
syncTableContext() {
|
|
37
|
-
const table = this.el.closest('sd-table');
|
|
38
|
-
this.tableEl = table;
|
|
39
|
-
const fromMethod = table?.getTableIdSync?.();
|
|
40
|
-
const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
|
|
41
|
-
const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
|
|
42
|
-
(fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
|
|
43
|
-
'';
|
|
44
|
-
if (resolvedTableId && resolvedTableId !== this.tableId) {
|
|
45
|
-
this.tableId = resolvedTableId;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
render() {
|
|
49
|
-
const hasRows = this.rows.length > 0;
|
|
50
|
-
return (h(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, h("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
|
|
51
|
-
this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
52
|
-
h("slot", null),
|
|
53
|
-
this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
54
|
-
]) : (h("tr", { class: "tbody__no-data-row" }, h("td", { class: "tbody__no-data-cell", colSpan: 100 }, h("slot", { name: "no-data" })))))));
|
|
55
|
-
}
|
|
56
|
-
static get watchers() { return {
|
|
57
|
-
"rows": [{
|
|
58
|
-
"handleRowsChange": 0
|
|
59
|
-
}]
|
|
60
|
-
}; }
|
|
61
|
-
};
|
|
62
|
-
SdTbody.style = sdTbodyCss();
|
|
63
|
-
|
|
64
|
-
export { SdTbody as sd_tbody };
|