@bigtablet/design-system 3.14.2 → 3.15.1
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/index.css +12 -5
- package/dist/index.d.ts +5 -0
- package/dist/index.js +216 -300
- package/dist/styles/spacing/_index.scss +6 -0
- package/dist/styles/typography/_index.scss +3 -0
- package/dist/vanilla/bigtablet.min.js +6 -6
- package/package.json +2 -1
|
@@ -5,6 +5,7 @@ $spacing_3: 3px;
|
|
|
5
5
|
$spacing_4: 4px;
|
|
6
6
|
$spacing_6: 6px;
|
|
7
7
|
$spacing_8: 8px;
|
|
8
|
+
$spacing_10: 10px;
|
|
8
9
|
$spacing_12: 12px;
|
|
9
10
|
$spacing_16: 16px;
|
|
10
11
|
$spacing_20: 20px;
|
|
@@ -12,3 +13,8 @@ $spacing_24: 24px;
|
|
|
12
13
|
$spacing_32: 32px;
|
|
13
14
|
$spacing_40: 40px;
|
|
14
15
|
$spacing_48: 48px;
|
|
16
|
+
// 레이아웃 리듬 - 컴포넌트 내부 여백이 아니라 Section 처럼 화면 단위 블록의 상하 여백에 쓴다.
|
|
17
|
+
// 48 에서 스케일이 끝나 Section 이 raw 64/96/128 을 적고 있었다.
|
|
18
|
+
$spacing_64: 64px;
|
|
19
|
+
$spacing_96: 96px;
|
|
20
|
+
$spacing_128: 128px;
|
|
@@ -4,6 +4,9 @@ $font_family_primary: "Pretendard", sans-serif;
|
|
|
4
4
|
|
|
5
5
|
// ── Base: Font size ───────────────────────────────────────────────────────────
|
|
6
6
|
|
|
7
|
+
// 10px - 본문에는 쓰지 않는다. avatar xs(24px 원) 이니셜과 badge count 처럼 장식적인 숫자·글자
|
|
8
|
+
// 전용이다. 그 자리에 12px 을 넣으면 16px 카운트 뱃지를 넘친다.
|
|
9
|
+
$font_size_10: 10px;
|
|
7
10
|
$font_size_12: 12px;
|
|
8
11
|
$font_size_13: 13px;
|
|
9
12
|
$font_size_14: 14px;
|
|
@@ -5,21 +5,21 @@
|
|
|
5
5
|
* @version 1.0.0
|
|
6
6
|
* @license Bigtablet Inc. Open Source License - see LICENSE at the repo root
|
|
7
7
|
* (https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md)
|
|
8
|
-
*/((C,O)=>{typeof exports=="object"&&typeof module<"u"?module.exports=O():typeof define=="function"&&define.amd?define(O):(C=C||self,C.Bigtablet=O());})(void 0,()=>{function C(a="bt"){return `${a}_${Math.random().toString(36).substring(2,9)}`}function O(a){return String(a).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function _(a,r,n,i){return a.addEventListener(r,n,i),()=>a.removeEventListener(r,n,i)}function L(a,r=document){return r.querySelector(a)}function w(a,r=document){return Array.from(r.querySelectorAll(a))}let q=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function G(){let a=document.body,r=document.documentElement,n=parseInt(a.dataset.btOpenModals||"0",10);if(n===0){let i=window.innerWidth-r.clientWidth;if(a.dataset.btOriginalOverflow=a.style.overflow,a.dataset.btOriginalGutter=r.style.scrollbarGutter,a.dataset.btOriginalPaddingRight=a.style.paddingRight,a.dataset.btOriginalScrollbarWidthVar=r.style.getPropertyValue("--bt-scrollbar-width"),i>0){r.style.setProperty("--bt-scrollbar-width",`${i}px`),r.style.scrollbarGutter="auto";let f=parseFloat(window.getComputedStyle(a).paddingRight)||0;a.style.paddingRight=`${f+i}px`;}a.style.overflow="hidden";}a.dataset.btOpenModals=String(n+1);}function B(){let a=document.body,r=document.documentElement,n=parseInt(a.dataset.btOpenModals||"1",10)-1;n<=0?(a.style.overflow=a.dataset.btOriginalOverflow||"",a.style.paddingRight=a.dataset.btOriginalPaddingRight||"",r.style.scrollbarGutter=a.dataset.btOriginalGutter||"",a.dataset.btOriginalScrollbarWidthVar?r.style.setProperty("--bt-scrollbar-width",a.dataset.btOriginalScrollbarWidthVar):r.style.removeProperty("--bt-scrollbar-width"),delete a.dataset.btOpenModals,delete a.dataset.btOriginalOverflow,delete a.dataset.btOriginalGutter,delete a.dataset.btOriginalPaddingRight,delete a.dataset.btOriginalScrollbarWidthVar):a.dataset.btOpenModals=String(n);}function W(a){return String(a).toLowerCase().replace(/\s+/g,"")}function F(a){if(a!==void 0)return a!=="false"}let ne='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>',ae='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';function j(a,r={}){let n=typeof a=="string"?L(a):a;if(!n)return null;let i={placeholder:"Select...",disabled:false,multiple:false,searchable:false,searchPlaceholder:"\uAC80\uC0C9\u2026",emptyText:"\uACB0\uACFC \uC5C6\uC74C",selectedSummary:e=>`${e}\uAC1C \uC120\uD0DD`,onValueChange:null,...r};if(r.multiple===void 0){let e=F(n.dataset.multiple);e!==void 0&&(i.multiple=e);}if(r.searchable===void 0){let e=F(n.dataset.searchable);e!==void 0&&(i.searchable=e);}if(r.searchPlaceholder===void 0&&n.dataset.searchPlaceholder&&(i.searchPlaceholder=n.dataset.searchPlaceholder),r.emptyText===void 0&&n.dataset.emptyText&&(i.emptyText=n.dataset.emptyText),r.placeholder===void 0&&n.dataset.placeholder)i.placeholder=n.dataset.placeholder;else if(r.placeholder===void 0){let e=n.querySelector(".bt-dropdown__placeholder")?.textContent.trim();e&&(i.placeholder=e);}let f=i.multiple===true,p=i.searchable===true,t={isOpen:false,value:null,values:[],activeIndex:-1,options:[],visible:[],committedQuery:""},m=false,y=n.id||C("dropdown"),s=n.querySelector(".bt-dropdown__control"),d=n.querySelector(".bt-dropdown__list");if(!s||!d)return console.warn("Dropdown: Missing required elements (.bt-dropdown__control, .bt-dropdown__list)"),null;let l=d.querySelector(".bt-dropdown__options");if(!l)if(p){let e=d,o=Array.from(e.classList).filter(v=>v.startsWith("bt-dropdown__list")),u=document.createElement("div");u.className=o.join(" "),e.classList.remove(...o),e.classList.add("bt-dropdown__options"),e.style.display="",e.parentNode.insertBefore(u,e),u.appendChild(e),l=e,d=u;}else l=d;(s.disabled||s.classList.contains("is-disabled"))&&(i.disabled=true),s.disabled=i.disabled,s.setAttribute("aria-disabled",i.disabled?"true":"false"),s.classList.toggle("is-disabled",i.disabled);let g=()=>w(".bt-dropdown__option",l).map(e=>({value:e.dataset.value!==void 0?e.dataset.value:e.textContent.trim(),label:e.textContent.trim(),disabled:e.classList.contains("is-disabled")})),c;if(n.dataset.options)try{let e=JSON.parse(n.dataset.options);Array.isArray(e)?c=e:console.warn("Dropdown: data-options is not a JSON array");}catch(e){console.warn("Dropdown: invalid JSON in data-options",e);}c===void 0&&(c=Array.isArray(i.options)?i.options:g()),t.options=c;let h=w(".bt-dropdown__option",l);if(h.length===0&&t.options.length>0){let e=l.tagName==="UL"||l.tagName==="OL"?"li":"div";t.options.forEach(o=>{let u=document.createElement(e);u.className="bt-dropdown__option",o.disabled&&u.classList.add("is-disabled"),u.dataset.value=o.value,u.textContent=o.label,l.appendChild(u);}),h=w(".bt-dropdown__option",l);}l.id=l.id||`${y}_listbox`,l.setAttribute("role","listbox"),f&&l.setAttribute("aria-multiselectable","true"),s.setAttribute("aria-haspopup","listbox"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",l.id),p?s.removeAttribute("role"):s.setAttribute("role","combobox"),h.forEach((e,o)=>{if(e.id=e.id||`${y}_option_${o}`,e.setAttribute("role","option"),e.setAttribute("aria-selected","false"),t.options[o]?.disabled&&e.setAttribute("aria-disabled","true"),f&&!e.querySelector(".bt-dropdown__option-check")){let u=document.createElement("span");u.className="bt-dropdown__option-check",u.setAttribute("aria-hidden","true"),u.innerHTML=ae,e.insertBefore(u,e.firstChild);}});let b=null,A=null;if(p){let e=d.querySelector(".bt-dropdown__search");if(!e){e=document.createElement("div"),e.className="bt-dropdown__search";let o=document.createElement("span");o.className="bt-dropdown__search-icon",o.setAttribute("aria-hidden","true"),o.innerHTML=ne,e.appendChild(o),d.insertBefore(e,d.firstChild);}if(b=e.querySelector(".bt-dropdown__search-input"),b||(b=document.createElement("input"),b.type="text",b.className="bt-dropdown__search-input",b.autocomplete="off",e.appendChild(b)),b.placeholder=i.searchPlaceholder,b.setAttribute("aria-label",i.searchPlaceholder),b.setAttribute("role","combobox"),b.setAttribute("aria-autocomplete","list"),b.setAttribute("aria-expanded","false"),b.setAttribute("aria-controls",l.id),A=l.querySelector(".bt-dropdown__empty"),!A){let o=l.tagName==="UL"||l.tagName==="OL"?"li":"div";A=document.createElement(o),A.className="bt-dropdown__empty",l.appendChild(A);}A.textContent=i.emptyText,A.hidden=true;}let le=()=>p?b:s,E=w('input[type="hidden"]',n),P=i.name||n.dataset.name||E[0]?.name||null;if(E.length===0&&P){let e=document.createElement("input");e.type="hidden",e.name=P,n.appendChild(e),E.push(e);}function re(){if(!P)return;let e=f?t.values.map(o=>o==null?"":String(o)):[t.value==null?"":String(t.value)];for(;E.length>e.length;)E.pop().remove();for(;E.length<e.length;){let o=document.createElement("input");o.type="hidden",o.name=P,n.appendChild(o),E.push(o);}E.forEach((o,u)=>{o.value=e[u];});}function V(e){return t.options.find(o=>String(o.value)===String(e))}function R(e){return e===void 0?false:f?t.values.some(o=>String(o)===String(e)):t.value!=null&&String(t.value)===String(e)}function de(){return t.values.map(V).filter(Boolean)}function H(){let e=s.querySelector(".bt-dropdown__value, .bt-dropdown__placeholder");if(e){let o=i.placeholder,u=false;if(f)u=t.values.length>0,u&&(o=i.selectedSummary(t.values.length));else {let v=V(t.value);u=!!v,v&&(o=v.label);}e.textContent=o,e.classList.toggle("bt-dropdown__value",u),e.classList.toggle("bt-dropdown__placeholder",!u);}h.forEach((o,u)=>{let v=R(t.options[u]?.value);o.classList.toggle("is-selected",v),o.setAttribute("aria-selected",v?"true":"false");}),re();}function D(e){f?(t.values=e==null?[]:Array.isArray(e)?e.slice():[e],H(),i.onValueChange&&i.onValueChange(t.values.slice(),de())):(t.value=Array.isArray(e)?e[0]??null:e,H(),i.onValueChange&&i.onValueChange(t.value,V(t.value)??null));}function ce(e){let o=R(e.value)?t.values.filter(u=>String(u)!==String(e.value)):[...t.values,e.value];D(o);}function N(){let e=null;h.forEach((u,v)=>{let k=v===t.activeIndex;u.classList.toggle("is-active",k),k&&(e=u.id);});let o=le();o&&(e?o.setAttribute("aria-activedescendant",e):o.removeAttribute("aria-activedescendant"));}function X(){return t.visible.find(e=>!t.options[e]?.disabled)??-1}function I(){let e=p?W(t.committedQuery):"";t.visible=[],h.forEach((o,u)=>{let v=t.options[u]?.label??o.textContent,k=e===""||W(v).includes(e);o.hidden=!k,k&&t.visible.push(u);}),A&&(A.hidden=t.visible.length>0),t.isOpen?t.visible.includes(t.activeIndex)||(t.activeIndex=X()):t.activeIndex=-1,N();}function x(){if(i.disabled||s.disabled)return;t.isOpen=true,s.classList.add("is-open"),s.setAttribute("aria-expanded","true"),d.style.display="block",b&&b.setAttribute("aria-expanded","true");let e=s.getBoundingClientRect(),o=Math.min(t.options.length*40,288),u=window.innerHeight-e.bottom,v=e.top;u<o&&v>u?d.classList.add("bt-dropdown__list--up"):d.classList.remove("bt-dropdown__list--up"),t.activeIndex=t.options.findIndex(te=>R(te.value)&&!te.disabled),I(),b&&b.focus();let k=s.querySelector(".bt-dropdown__icon");k&&k.classList.add("is-open");}function T(){t.isOpen=false,s.classList.remove("is-open"),s.setAttribute("aria-expanded","false"),s.removeAttribute("aria-activedescendant"),d.style.display="none",b&&(b.value="",b.setAttribute("aria-expanded","false"),b.removeAttribute("aria-activedescendant")),t.committedQuery="",m=false,t.activeIndex=-1,I();let e=s.querySelector(".bt-dropdown__icon");e&&e.classList.remove("is-open");}function U(){let e=t.isOpen;T(),e&&p&&s.focus();}function Y(){t.isOpen?T():x();}function $(e){let o=t.visible.filter(v=>!t.options[v]?.disabled);if(o.length===0)return;let u=o.indexOf(t.activeIndex);t.activeIndex=u===-1?e===1?o[0]:o[o.length-1]:o[(u+e+o.length)%o.length],N();}function Z(e){let o=t.options[e];!o||o.disabled||(f?ce(o):(D(o.value),U()));}function ee(){t.visible.includes(t.activeIndex)&&Z(t.activeIndex);}function ue(e){e.preventDefault(),Y();}function fe(e){if(!i.disabled)switch(e.key){case " ":case "Enter":e.preventDefault(),t.isOpen?ee():x();break;case "ArrowDown":e.preventDefault(),t.isOpen?$(1):x();break;case "ArrowUp":e.preventDefault(),t.isOpen?$(-1):x();break;case "Home":e.preventDefault(),x(),t.activeIndex=X(),N();break;case "End":e.preventDefault(),x();for(let o=t.visible.length-1;o>=0;o--)if(!t.options[t.visible[o]]?.disabled){t.activeIndex=t.visible[o],N();break}break;case "Escape":e.preventDefault(),T();break;case "Tab":T();break}}function pe(e){if(!(e.isComposing||e.keyCode===229))switch(e.key){case "ArrowDown":e.preventDefault(),$(1);break;case "ArrowUp":e.preventDefault(),$(-1);break;case "Enter":e.preventDefault(),ee();break;case "Escape":e.preventDefault(),U();break;case "Tab":U();break}}function be(e){n.contains(e.target)||T();}function ge(e){return o=>{o.preventDefault(),Z(e);}}function he(e){return ()=>{t.options[e]?.disabled||(t.activeIndex=e,N());}}let S=[_(s,"click",ue),_(s,"keydown",fe),_(document,"mousedown",be)];h.forEach((e,o)=>{S.push(_(e,"click",ge(o))),S.push(_(e,"mouseenter",he(o)));}),b&&(S.push(_(b,"compositionstart",()=>{m=true;})),S.push(_(b,"compositionend",e=>{m=false,t.committedQuery=e.target.value,I();})),S.push(_(b,"input",e=>{m||(t.committedQuery=e.target.value,I());})),S.push(_(b,"keydown",pe)));let K=E.map(e=>e.value).filter(e=>e!=="");if(d.style.display="none",I(),H(),f){let e=Array.isArray(i.defaultValue)?i.defaultValue:i.defaultValue!=null?[i.defaultValue]:K;e.length>0&&D(e);}else i.defaultValue!=null?D(i.defaultValue):K[0]&&D(K[0]);return {getValue:()=>f?t.values.slice():t.value,setValue:D,open:x,close:T,toggle:Y,setDisabled:e=>{i.disabled=e,s.disabled=e,s.setAttribute("aria-disabled",e?"true":"false"),s.classList.toggle("is-disabled",e);},destroy:()=>{S.forEach(e=>{e();});}}}function Q(a,r={}){let n=typeof a=="string"?L(a):a;if(!n)return null;let i={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...r},f={isOpen:false},p=n.querySelector(".bt-modal__panel"),t=null,m=false;if(p&&(p.setAttribute("role","dialog"),p.setAttribute("aria-modal","true"),!p.hasAttribute("aria-label")&&!p.hasAttribute("aria-labelledby"))){let c=p.querySelector(".bt-modal__header");c?(c.id=c.id||C("modal_title"),p.setAttribute("aria-labelledby",c.id)):p.setAttribute("aria-label","Dialog");}function y(){if(!f.isOpen){if(f.isOpen=true,n.classList.add("is-open"),G(),t=document.activeElement,p){let c=p.querySelector(q);c?c.focus():(p.setAttribute("tabindex","-1"),m=true,p.focus());}i.onOpen&&i.onOpen();}}function s(){f.isOpen&&(f.isOpen=false,n.classList.remove("is-open"),B(),m&&p&&(p.removeAttribute("tabindex"),m=false),t&&typeof t.focus=="function"&&t.focus(),t=null,i.onClose&&i.onClose());}function d(c){i.closeOnOverlay&&c.target===n&&s();}function l(c){if(f.isOpen){if(i.closeOnEscape&&c.key==="Escape"){s();return}if(c.key==="Tab"&&p){let h=w(q,p);if(h.length===0){c.preventDefault();return}let b=h[0],A=h[h.length-1];c.shiftKey&&document.activeElement===b?(c.preventDefault(),A.focus()):!c.shiftKey&&document.activeElement===A&&(c.preventDefault(),b.focus());}}}let g=[_(n,"click",d),_(document,"keydown",l)];return w("[data-modal-close]",n).forEach(c=>{g.push(_(c,"click",s));}),{isOpen:()=>f.isOpen,open:y,close:s,toggle:()=>f.isOpen?s():y(),destroy:()=>{g.forEach(c=>{c();}),f.isOpen&&B();}}}let ie="bt-button--filled",oe="bt-button--outline";function se(a={}){let r={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,destructive:false,actionsAlign:"right",closeOnOverlay:true,onConfirm:null,onCancel:null,...a},n=document.createElement("div");n.className=`bt-alert__overlay bt-alert--${r.variant} is-open`,n.innerHTML=`
|
|
8
|
+
*/((C,O)=>{typeof exports=="object"&&typeof module<"u"?module.exports=O():typeof define=="function"&&define.amd?define(O):(C=C||self,C.Bigtablet=O());})(void 0,()=>{function C(n="bt"){return `${n}_${Math.random().toString(36).substring(2,9)}`}function O(n){return String(n).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function _(n,r,a,i){return n.addEventListener(r,a,i),()=>n.removeEventListener(r,a,i)}function L(n,r=document){return r.querySelector(n)}function w(n,r=document){return Array.from(r.querySelectorAll(n))}let q=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function ne(){let n=document.createElement("div");n.style.cssText="position:fixed;top:0;left:0;right:0;height:0;visibility:hidden;pointer-events:none",document.documentElement.appendChild(n);let r=n.getBoundingClientRect().width;return n.remove(),r<=0?0:Math.max(0,window.innerWidth-r)}function G(){let n=document.body,r=document.documentElement,a=parseInt(n.dataset.btOpenModals||"0",10);if(a===0){let i=ne();if(n.dataset.btOriginalOverflow=n.style.overflow,n.dataset.btOriginalGutter=r.style.scrollbarGutter,n.dataset.btOriginalPaddingRight=n.style.paddingRight,n.dataset.btOriginalScrollbarWidthVar=r.style.getPropertyValue("--bt-scrollbar-width"),i>0){r.style.setProperty("--bt-scrollbar-width",`${i}px`),r.style.scrollbarGutter="auto";let f=parseFloat(window.getComputedStyle(n).paddingRight)||0;n.style.paddingRight=`${f+i}px`;}n.style.overflow="hidden";}n.dataset.btOpenModals=String(a+1);}function B(){let n=document.body,r=document.documentElement,a=parseInt(n.dataset.btOpenModals||"1",10)-1;a<=0?(n.style.overflow=n.dataset.btOriginalOverflow||"",n.style.paddingRight=n.dataset.btOriginalPaddingRight||"",r.style.scrollbarGutter=n.dataset.btOriginalGutter||"",n.dataset.btOriginalScrollbarWidthVar?r.style.setProperty("--bt-scrollbar-width",n.dataset.btOriginalScrollbarWidthVar):r.style.removeProperty("--bt-scrollbar-width"),delete n.dataset.btOpenModals,delete n.dataset.btOriginalOverflow,delete n.dataset.btOriginalGutter,delete n.dataset.btOriginalPaddingRight,delete n.dataset.btOriginalScrollbarWidthVar):n.dataset.btOpenModals=String(a);}function F(n){return String(n).toLowerCase().replace(/\s+/g,"")}function W(n){if(n!==void 0)return n!=="false"}let ae='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>',ie='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';function j(n,r={}){let a=typeof n=="string"?L(n):n;if(!a)return null;let i={placeholder:"Select...",disabled:false,multiple:false,searchable:false,searchPlaceholder:"\uAC80\uC0C9\u2026",emptyText:"\uACB0\uACFC \uC5C6\uC74C",selectedSummary:e=>`${e}\uAC1C \uC120\uD0DD`,onValueChange:null,...r};if(r.multiple===void 0){let e=W(a.dataset.multiple);e!==void 0&&(i.multiple=e);}if(r.searchable===void 0){let e=W(a.dataset.searchable);e!==void 0&&(i.searchable=e);}if(r.searchPlaceholder===void 0&&a.dataset.searchPlaceholder&&(i.searchPlaceholder=a.dataset.searchPlaceholder),r.emptyText===void 0&&a.dataset.emptyText&&(i.emptyText=a.dataset.emptyText),r.placeholder===void 0&&a.dataset.placeholder)i.placeholder=a.dataset.placeholder;else if(r.placeholder===void 0){let e=a.querySelector(".bt-dropdown__placeholder")?.textContent.trim();e&&(i.placeholder=e);}let f=i.multiple===true,p=i.searchable===true,t={isOpen:false,value:null,values:[],activeIndex:-1,options:[],visible:[],committedQuery:""},m=false,y=a.id||C("dropdown"),s=a.querySelector(".bt-dropdown__control"),d=a.querySelector(".bt-dropdown__list");if(!s||!d)return console.warn("Dropdown: Missing required elements (.bt-dropdown__control, .bt-dropdown__list)"),null;let l=d.querySelector(".bt-dropdown__options");if(!l)if(p){let e=d,o=Array.from(e.classList).filter(v=>v.startsWith("bt-dropdown__list")),u=document.createElement("div");u.className=o.join(" "),e.classList.remove(...o),e.classList.add("bt-dropdown__options"),e.style.display="",e.parentNode.insertBefore(u,e),u.appendChild(e),l=e,d=u;}else l=d;(s.disabled||s.classList.contains("is-disabled"))&&(i.disabled=true),s.disabled=i.disabled,s.setAttribute("aria-disabled",i.disabled?"true":"false"),s.classList.toggle("is-disabled",i.disabled);let h=()=>w(".bt-dropdown__option",l).map(e=>({value:e.dataset.value!==void 0?e.dataset.value:e.textContent.trim(),label:e.textContent.trim(),disabled:e.classList.contains("is-disabled")})),c;if(a.dataset.options)try{let e=JSON.parse(a.dataset.options);Array.isArray(e)?c=e:console.warn("Dropdown: data-options is not a JSON array");}catch(e){console.warn("Dropdown: invalid JSON in data-options",e);}c===void 0&&(c=Array.isArray(i.options)?i.options:h()),t.options=c;let g=w(".bt-dropdown__option",l);if(g.length===0&&t.options.length>0){let e=l.tagName==="UL"||l.tagName==="OL"?"li":"div";t.options.forEach(o=>{let u=document.createElement(e);u.className="bt-dropdown__option",o.disabled&&u.classList.add("is-disabled"),u.dataset.value=o.value,u.textContent=o.label,l.appendChild(u);}),g=w(".bt-dropdown__option",l);}l.id=l.id||`${y}_listbox`,l.setAttribute("role","listbox"),f&&l.setAttribute("aria-multiselectable","true"),s.setAttribute("aria-haspopup","listbox"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",l.id),p?s.removeAttribute("role"):s.setAttribute("role","combobox"),g.forEach((e,o)=>{if(e.id=e.id||`${y}_option_${o}`,e.setAttribute("role","option"),e.setAttribute("aria-selected","false"),t.options[o]?.disabled&&e.setAttribute("aria-disabled","true"),f&&!e.querySelector(".bt-dropdown__option-check")){let u=document.createElement("span");u.className="bt-dropdown__option-check",u.setAttribute("aria-hidden","true"),u.innerHTML=ie,e.insertBefore(u,e.firstChild);}});let b=null,A=null;if(p){let e=d.querySelector(".bt-dropdown__search");if(!e){e=document.createElement("div"),e.className="bt-dropdown__search";let o=document.createElement("span");o.className="bt-dropdown__search-icon",o.setAttribute("aria-hidden","true"),o.innerHTML=ae,e.appendChild(o),d.insertBefore(e,d.firstChild);}if(b=e.querySelector(".bt-dropdown__search-input"),b||(b=document.createElement("input"),b.type="text",b.className="bt-dropdown__search-input",b.autocomplete="off",e.appendChild(b)),b.placeholder=i.searchPlaceholder,b.setAttribute("aria-label",i.searchPlaceholder),b.setAttribute("role","combobox"),b.setAttribute("aria-autocomplete","list"),b.setAttribute("aria-expanded","false"),b.setAttribute("aria-controls",l.id),A=l.querySelector(".bt-dropdown__empty"),!A){let o=l.tagName==="UL"||l.tagName==="OL"?"li":"div";A=document.createElement(o),A.className="bt-dropdown__empty",l.appendChild(A);}A.textContent=i.emptyText,A.hidden=true;}let re=()=>p?b:s,E=w('input[type="hidden"]',a),P=i.name||a.dataset.name||E[0]?.name||null;if(E.length===0&&P){let e=document.createElement("input");e.type="hidden",e.name=P,a.appendChild(e),E.push(e);}function de(){if(!P)return;let e=f?t.values.map(o=>o==null?"":String(o)):[t.value==null?"":String(t.value)];for(;E.length>e.length;)E.pop().remove();for(;E.length<e.length;){let o=document.createElement("input");o.type="hidden",o.name=P,a.appendChild(o),E.push(o);}E.forEach((o,u)=>{o.value=e[u];});}function V(e){return t.options.find(o=>String(o.value)===String(e))}function R(e){return e===void 0?false:f?t.values.some(o=>String(o)===String(e)):t.value!=null&&String(t.value)===String(e)}function ce(){return t.values.map(V).filter(Boolean)}function H(){let e=s.querySelector(".bt-dropdown__value, .bt-dropdown__placeholder");if(e){let o=i.placeholder,u=false;if(f)u=t.values.length>0,u&&(o=i.selectedSummary(t.values.length));else {let v=V(t.value);u=!!v,v&&(o=v.label);}e.textContent=o,e.classList.toggle("bt-dropdown__value",u),e.classList.toggle("bt-dropdown__placeholder",!u);}g.forEach((o,u)=>{let v=R(t.options[u]?.value);o.classList.toggle("is-selected",v),o.setAttribute("aria-selected",v?"true":"false");}),de();}function T(e){f?(t.values=e==null?[]:Array.isArray(e)?e.slice():[e],H(),i.onValueChange&&i.onValueChange(t.values.slice(),ce())):(t.value=Array.isArray(e)?e[0]??null:e,H(),i.onValueChange&&i.onValueChange(t.value,V(t.value)??null));}function ue(e){let o=R(e.value)?t.values.filter(u=>String(u)!==String(e.value)):[...t.values,e.value];T(o);}function N(){let e=null;g.forEach((u,v)=>{let x=v===t.activeIndex;u.classList.toggle("is-active",x),x&&(e=u.id);});let o=re();o&&(e?o.setAttribute("aria-activedescendant",e):o.removeAttribute("aria-activedescendant"));}function X(){return t.visible.find(e=>!t.options[e]?.disabled)??-1}function I(){let e=p?F(t.committedQuery):"";t.visible=[],g.forEach((o,u)=>{let v=t.options[u]?.label??o.textContent,x=e===""||F(v).includes(e);o.hidden=!x,x&&t.visible.push(u);}),A&&(A.hidden=t.visible.length>0),t.isOpen?t.visible.includes(t.activeIndex)||(t.activeIndex=X()):t.activeIndex=-1,N();}function k(){if(i.disabled||s.disabled)return;t.isOpen=true,s.classList.add("is-open"),s.setAttribute("aria-expanded","true"),d.style.display="block",b&&b.setAttribute("aria-expanded","true");let e=s.getBoundingClientRect(),o=Math.min(t.options.length*40,288),u=window.innerHeight-e.bottom,v=e.top;u<o&&v>u?d.classList.add("bt-dropdown__list--up"):d.classList.remove("bt-dropdown__list--up"),t.activeIndex=t.options.findIndex(te=>R(te.value)&&!te.disabled),I(),b&&b.focus();let x=s.querySelector(".bt-dropdown__icon");x&&x.classList.add("is-open");}function D(){t.isOpen=false,s.classList.remove("is-open"),s.setAttribute("aria-expanded","false"),s.removeAttribute("aria-activedescendant"),d.style.display="none",b&&(b.value="",b.setAttribute("aria-expanded","false"),b.removeAttribute("aria-activedescendant")),t.committedQuery="",m=false,t.activeIndex=-1,I();let e=s.querySelector(".bt-dropdown__icon");e&&e.classList.remove("is-open");}function U(){let e=t.isOpen;D(),e&&p&&s.focus();}function Y(){t.isOpen?D():k();}function $(e){let o=t.visible.filter(v=>!t.options[v]?.disabled);if(o.length===0)return;let u=o.indexOf(t.activeIndex);t.activeIndex=u===-1?e===1?o[0]:o[o.length-1]:o[(u+e+o.length)%o.length],N();}function Z(e){let o=t.options[e];!o||o.disabled||(f?ue(o):(T(o.value),U()));}function ee(){t.visible.includes(t.activeIndex)&&Z(t.activeIndex);}function fe(e){e.preventDefault(),Y();}function pe(e){if(!i.disabled)switch(e.key){case " ":case "Enter":e.preventDefault(),t.isOpen?ee():k();break;case "ArrowDown":e.preventDefault(),t.isOpen?$(1):k();break;case "ArrowUp":e.preventDefault(),t.isOpen?$(-1):k();break;case "Home":e.preventDefault(),k(),t.activeIndex=X(),N();break;case "End":e.preventDefault(),k();for(let o=t.visible.length-1;o>=0;o--)if(!t.options[t.visible[o]]?.disabled){t.activeIndex=t.visible[o],N();break}break;case "Escape":e.preventDefault(),D();break;case "Tab":D();break}}function be(e){if(!(e.isComposing||e.keyCode===229))switch(e.key){case "ArrowDown":e.preventDefault(),$(1);break;case "ArrowUp":e.preventDefault(),$(-1);break;case "Enter":e.preventDefault(),ee();break;case "Escape":e.preventDefault(),U();break;case "Tab":U();break}}function he(e){a.contains(e.target)||D();}function ge(e){return o=>{o.preventDefault(),Z(e);}}function me(e){return ()=>{t.options[e]?.disabled||(t.activeIndex=e,N());}}let S=[_(s,"click",fe),_(s,"keydown",pe),_(document,"mousedown",he)];g.forEach((e,o)=>{S.push(_(e,"click",ge(o))),S.push(_(e,"mouseenter",me(o)));}),b&&(S.push(_(b,"compositionstart",()=>{m=true;})),S.push(_(b,"compositionend",e=>{m=false,t.committedQuery=e.target.value,I();})),S.push(_(b,"input",e=>{m||(t.committedQuery=e.target.value,I());})),S.push(_(b,"keydown",be)));let K=E.map(e=>e.value).filter(e=>e!=="");if(d.style.display="none",I(),H(),f){let e=Array.isArray(i.defaultValue)?i.defaultValue:i.defaultValue!=null?[i.defaultValue]:K;e.length>0&&T(e);}else i.defaultValue!=null?T(i.defaultValue):K[0]&&T(K[0]);return {getValue:()=>f?t.values.slice():t.value,setValue:T,open:k,close:D,toggle:Y,setDisabled:e=>{i.disabled=e,s.disabled=e,s.setAttribute("aria-disabled",e?"true":"false"),s.classList.toggle("is-disabled",e);},destroy:()=>{S.forEach(e=>{e();});}}}function Q(n,r={}){let a=typeof n=="string"?L(n):n;if(!a)return null;let i={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...r},f={isOpen:false},p=a.querySelector(".bt-modal__panel"),t=null,m=false;if(p&&(p.setAttribute("role","dialog"),p.setAttribute("aria-modal","true"),!p.hasAttribute("aria-label")&&!p.hasAttribute("aria-labelledby"))){let c=p.querySelector(".bt-modal__header");c?(c.id=c.id||C("modal_title"),p.setAttribute("aria-labelledby",c.id)):p.setAttribute("aria-label","Dialog");}function y(){if(!f.isOpen){if(f.isOpen=true,a.classList.add("is-open"),G(),t=document.activeElement,p){let c=p.querySelector(q);c?c.focus():(p.setAttribute("tabindex","-1"),m=true,p.focus());}i.onOpen&&i.onOpen();}}function s(){f.isOpen&&(f.isOpen=false,a.classList.remove("is-open"),B(),m&&p&&(p.removeAttribute("tabindex"),m=false),t&&typeof t.focus=="function"&&t.focus(),t=null,i.onClose&&i.onClose());}function d(c){i.closeOnOverlay&&c.target===a&&s();}function l(c){if(f.isOpen){if(i.closeOnEscape&&c.key==="Escape"){s();return}if(c.key==="Tab"&&p){let g=w(q,p);if(g.length===0){c.preventDefault();return}let b=g[0],A=g[g.length-1];c.shiftKey&&document.activeElement===b?(c.preventDefault(),A.focus()):!c.shiftKey&&document.activeElement===A&&(c.preventDefault(),b.focus());}}}let h=[_(a,"click",d),_(document,"keydown",l)];return w("[data-modal-close]",a).forEach(c=>{h.push(_(c,"click",s));}),{isOpen:()=>f.isOpen,open:y,close:s,toggle:()=>f.isOpen?s():y(),destroy:()=>{h.forEach(c=>{c();}),f.isOpen&&B();}}}let oe="bt-button--filled",se="bt-button--outline";function le(n={}){let r={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,destructive:false,actionsAlign:"right",closeOnOverlay:true,onConfirm:null,onCancel:null,...n},a=document.createElement("div");a.className=`bt-alert__overlay bt-alert--${r.variant} is-open`,a.innerHTML=`
|
|
9
9
|
<div class="bt-alert__modal">
|
|
10
10
|
${r.title?`<div class="bt-alert__title">${O(r.title)}</div>`:""}
|
|
11
11
|
<div class="bt-alert__message">${O(r.message)}</div>
|
|
12
12
|
<div class="bt-alert__actions" style="justify-content: ${r.actionsAlign==="left"?"flex-start":r.actionsAlign==="center"?"center":"flex-end"}">
|
|
13
|
-
${r.showCancel?`<button class="bt-button bt-button--md ${
|
|
14
|
-
<button class="bt-button bt-button--md ${
|
|
13
|
+
${r.showCancel?`<button class="bt-button bt-button--md ${se}" data-alert-cancel>${O(r.cancelText)}</button>`:""}
|
|
14
|
+
<button class="bt-button bt-button--md ${oe}${r.destructive?" bt-button--danger":""}" data-alert-confirm>${O(r.confirmText)}</button>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
|
-
`;let i=
|
|
17
|
+
`;let i=a.querySelector(".bt-alert__modal");if(i){i.setAttribute("role","alertdialog"),i.setAttribute("aria-modal","true");let l=a.querySelector(".bt-alert__title"),h=a.querySelector(".bt-alert__message");l&&(l.id=C("alert_title"),i.setAttribute("aria-labelledby",l.id)),h&&(h.id=C("alert_message"),i.setAttribute("aria-describedby",h.id));}let f=document.activeElement;document.body.appendChild(a),G();let p=true;function t(){p&&(p=false,document.removeEventListener("keydown",d),a.classList.remove("is-open"),f&&typeof f.focus=="function"&&f.focus(),setTimeout(()=>{a.remove(),B();},200));}function m(){p&&(r.onCancel&&r.onCancel(),t());}let y=a.querySelector("[data-alert-confirm]"),s=a.querySelector("[data-alert-cancel]");y&&y.addEventListener("click",()=>{r.onConfirm&&r.onConfirm(),t();}),s&&s.addEventListener("click",()=>{r.onCancel&&r.onCancel(),t();}),a.addEventListener("click",l=>{r.closeOnOverlay&&l.target===a&&m();});function d(l){if(l.key==="Escape"){m();return}if(l.key==="Tab"&&i){let h=w(q,i);if(h.length===0){l.preventDefault();return}let c=h[0],g=h[h.length-1];l.shiftKey&&document.activeElement===c?(l.preventDefault(),g.focus()):!l.shiftKey&&document.activeElement===g&&(l.preventDefault(),c.focus());}}return document.addEventListener("keydown",d),y&&y.focus(),{close:t}}function J(n,r={}){let a=typeof n=="string"?L(n):n;if(!a)return null;let i={defaultChecked:false,disabled:false,onCheckedChange:null,...r},f={checked:i.defaultChecked||a.classList.contains("bt-toggle--on")};a.disabled&&(i.disabled=true),a.disabled=i.disabled,a.hasAttribute("role")||a.setAttribute("role","switch"),a.tagName==="BUTTON"&&!a.hasAttribute("type")&&a.setAttribute("type","button");let p=i.name||a.dataset.name||null,t=a.querySelector('input[type="hidden"]')||(p&&a.parentNode?Array.from(a.parentNode.children).find(d=>d.tagName==="INPUT"&&d.type==="hidden"&&d.name===p):null);!t&&p&&(t=document.createElement("input"),t.type="hidden",t.name=p,a.tagName==="BUTTON"&&a.parentNode?a.parentNode.insertBefore(t,a.nextSibling):a.appendChild(t));function m(d){f.checked=d,a.classList.toggle("bt-toggle--on",d),a.setAttribute("aria-checked",d?"true":"false"),t&&(t.value=d?"true":"false"),i.onCheckedChange&&i.onCheckedChange(d);}function y(){!i.disabled&&!a.disabled&&m(!f.checked);}let s=_(a,"click",y);if(t&&!f.checked){let d=String(t.value).trim().toLowerCase();(d==="true"||d==="1"||d==="on"||d==="y"||d==="yes")&&(f.checked=true);}return a.classList.toggle("bt-toggle--on",f.checked),a.setAttribute("aria-checked",f.checked?"true":"false"),t&&(t.value=f.checked?"true":"false"),{isChecked:()=>f.checked,setChecked:m,toggle:y,setDisabled:d=>{i.disabled=d,a.disabled=d;},destroy:()=>s()}}function z(n,r={}){let a=typeof n=="string"?L(n):n;if(!a)return null;let i={page:1,totalPages:1,sibling:2,onPageChange:null,...r};function f(s,d){let l=[];for(let h=s;h<=d;h++)l.push(h);return l}function p(s,d){if(d<=7)return f(1,d);let l=[],h=d,c=i.sibling;if(s<=c+2){for(let g of f(1,c+3))l.push(g);return l.push("ellipsis"),l.push(h),l}if(s>=h-c-1){l.push(1),l.push("ellipsis");for(let g of f(h-c-2,h))l.push(g);return l}l.push(1),l.push("ellipsis");for(let g of f(s-c,s+c))l.push(g);return l.push("ellipsis"),l.push(h),l}function t(){let s=p(i.page,i.totalPages),d=`
|
|
18
18
|
<button class="bt-pagination__item" ${i.page<=1?"disabled":""} data-action="prev" aria-label="Previous page">
|
|
19
19
|
\u2039
|
|
20
20
|
</button>
|
|
21
21
|
<div class="bt-pagination__pages">
|
|
22
|
-
`;s.forEach((c,
|
|
22
|
+
`;s.forEach((c,g)=>{if(c==="ellipsis")d+='<span class="bt-pagination__ellipsis" aria-hidden="true">\u2026</span>';else {let b=c===i.page;d+=`
|
|
23
23
|
<button
|
|
24
24
|
class="bt-pagination__page${b?" bt-pagination__page--active":""}"
|
|
25
25
|
data-page="${O(c)}"
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
<button class="bt-pagination__item" ${i.page>=i.totalPages?"disabled":""} data-action="next" aria-label="Next page">
|
|
33
33
|
\u203A
|
|
34
34
|
</button>
|
|
35
|
-
`,
|
|
35
|
+
`,a.innerHTML=d,w("[data-page]",a).forEach(c=>{c.addEventListener("click",()=>{let g=parseInt(c.dataset.page,10);m(g);});});let l=a.querySelector('[data-action="prev"]'),h=a.querySelector('[data-action="next"]');l&&l.addEventListener("click",()=>m(i.page-1)),h&&h.addEventListener("click",()=>m(i.page+1));}function m(s){s<1||s>i.totalPages||s===i.page||(i.page=s,t(),i.onPageChange&&i.onPageChange(s));}function y(s){i.totalPages=s,i.page>s&&(i.page=s),t();}return t(),{getPage:()=>i.page,setPage:m,setTotalPages:y,render:t}}function M(){w("[data-bt-dropdown]").forEach(n=>{n._btDropdown||(n._btDropdown=j(n));}),w("[data-bt-modal]").forEach(n=>{n._btModal||(n._btModal=Q(n));}),w("[data-bt-modal-open]").forEach(n=>{if(n.dataset.btBound)return;let r=n.dataset.btModalOpen,a=L(`#${r}`);a?._btModal&&(n.dataset.btBound="true",n.addEventListener("click",()=>a._btModal.open()));}),w("[data-bt-toggle]").forEach(n=>{n._btToggle||(n._btToggle=J(n));}),w("[data-bt-pagination]").forEach(n=>{if(!n._btPagination){let r=parseInt(n.dataset.page,10)||1,a=parseInt(n.dataset.totalPages,10)||1;n._btPagination=z(n,{page:r,totalPages:a});}});}return typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",M):M()),{Dropdown:j,Modal:Q,Alert:le,Toggle:J,Pagination:z,init:M,generateId:C,$:L,$$:w,on:_,version:"1.0.0"}});})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigtablet/design-system",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.15.1",
|
|
4
4
|
"description": "Bigtablet Design System UI Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"check:css-vars": "scripts/check-css-vars.sh",
|
|
51
51
|
"check:prose": "scripts/check-prose-headings.sh",
|
|
52
52
|
"check:defaults": "python3 scripts/check-prop-defaults.py",
|
|
53
|
+
"check:geometry": "python3 scripts/check-overlay-geometry.py",
|
|
53
54
|
"size": "size-limit",
|
|
54
55
|
"prepare": "husky"
|
|
55
56
|
},
|