@bigtablet/design-system 1.22.2 → 1.23.0
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/vanilla/bigtablet.min.js +12 -12
- package/package.json +8 -8
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
(function(){'use strict';(function(
|
|
1
|
+
(function(){'use strict';(function(C,m){typeof exports=="object"&&typeof module<"u"?module.exports=m():typeof define=="function"&&define.amd?define(m):(C=C||self,C.Bigtablet=m());})(void 0,function(){function C(t="bt"){return `${t}_${Math.random().toString(36).substring(2,9)}`}function m(t){return String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function y(t,a,o,e){return t.addEventListener(a,o,e),()=>t.removeEventListener(a,o,e)}function E(t,a=document){return a.querySelector(t)}function h(t,a=document){return Array.from(a.querySelectorAll(t))}function S(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={placeholder:"Select...",disabled:false,onChange:null,...a},n={isOpen:false,value:e.defaultValue||null,activeIndex:-1,options:[]},_=o.dataset.options?JSON.parse(o.dataset.options):e.options||[];n.options=_;`${o.id||C("select")}_listbox`;let r=o.querySelector(".bt-select__control"),c=o.querySelector(".bt-select__list");if(!r||!c)return console.warn("Select: Missing required elements (.bt-select__control, .bt-select__list)"),null;function f(s){n.value=s;let l=n.options.find(k=>k.value===s),u=r.querySelector(".bt-select__value, .bt-select__placeholder");u&&(l?(u.textContent=l.label,u.classList.remove("bt-select__placeholder"),u.classList.add("bt-select__value")):(u.textContent=e.placeholder,u.classList.remove("bt-select__value"),u.classList.add("bt-select__placeholder"))),h(".bt-select__option",c).forEach((k,w)=>{k.classList.toggle("is-selected",n.options[w]?.value===s);}),e.onChange&&e.onChange(s,l);}function i(){if(e.disabled)return;n.isOpen=true,r.classList.add("is-open"),c.style.display="block";let s=r.getBoundingClientRect(),l=Math.min(n.options.length*40,288),u=window.innerHeight-s.bottom,k=s.top;u<l&&k>u?c.classList.add("bt-select__list--up"):c.classList.remove("bt-select__list--up");let w=n.options.findIndex(N=>N.value===n.value);n.activeIndex=w>=0?w:0,v();let q=r.querySelector(".bt-select__icon");q&&q.classList.add("is-open");}function d(){n.isOpen=false,r.classList.remove("is-open"),c.style.display="none";let s=r.querySelector(".bt-select__icon");s&&s.classList.remove("is-open");}function b(){n.isOpen?d():i();}function v(){h(".bt-select__option",c).forEach((s,l)=>{s.classList.toggle("is-active",l===n.activeIndex);});}function L(s){let l=n.options.length,u=n.activeIndex;for(let k=0;k<l;k++)if(u=(u+s+l)%l,!n.options[u].disabled){n.activeIndex=u,v();break}}function M(){let s=n.options[n.activeIndex];s&&!s.disabled&&(f(s.value),d());}function P(s){s.preventDefault(),b();}function T(s){if(!e.disabled)switch(s.key){case " ":case "Enter":s.preventDefault(),n.isOpen?M():i();break;case "ArrowDown":s.preventDefault(),n.isOpen?L(1):i();break;case "ArrowUp":s.preventDefault(),n.isOpen?L(-1):i();break;case "Home":s.preventDefault(),i(),n.activeIndex=n.options.findIndex(l=>!l.disabled),v();break;case "End":s.preventDefault(),i();for(let l=n.options.length-1;l>=0;l--)if(!n.options[l].disabled){n.activeIndex=l,v();break}break;case "Escape":s.preventDefault(),d();break}}function B(s){o.contains(s.target)||d();}function H(s){return function(l){l.preventDefault();let u=n.options[s];u&&!u.disabled&&(f(u.value),d());}}function K(s){return function(){n.options[s].disabled||(n.activeIndex=s,v());}}let x=[y(r,"click",P),y(r,"keydown",T),y(document,"mousedown",B)];return h(".bt-select__option",c).forEach((s,l)=>{x.push(y(s,"click",H(l))),x.push(y(s,"mouseenter",K(l)));}),c.style.display="none",e.defaultValue&&f(e.defaultValue),{getValue:()=>n.value,setValue:f,open:i,close:d,toggle:b,setDisabled:s=>{e.disabled=s,r.classList.toggle("is-disabled",s);},destroy:()=>{x.forEach(s=>s());}}}function I(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...a},n={isOpen:false};o.querySelector(".bt-modal__panel");function g(){n.isOpen=true,o.classList.add("is-open"),document.body.style.overflow="hidden",e.onOpen&&e.onOpen();}function p(){n.isOpen=false,o.classList.remove("is-open"),document.body.style.overflow="",e.onClose&&e.onClose();}function r(i){e.closeOnOverlay&&i.target===o&&p();}function c(i){e.closeOnEscape&&i.key==="Escape"&&n.isOpen&&p();}let f=[y(o,"click",r),y(document,"keydown",c)];return h("[data-modal-close]",o).forEach(i=>{f.push(y(i,"click",p));}),{isOpen:()=>n.isOpen,open:g,close:p,toggle:()=>n.isOpen?p():g(),destroy:()=>{f.forEach(i=>i()),document.body.style.overflow="";}}}function A(t={}){let a={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,actionsAlign:"right",onConfirm:null,onCancel:null,...t},o=document.createElement("div");o.className=`bt-alert__overlay bt-alert--${a.variant} is-open`,o.innerHTML=`
|
|
2
2
|
<div class="bt-alert__modal">
|
|
3
|
-
${a.title?`<div class="bt-alert__title">${a.title}</div>`:""}
|
|
4
|
-
<div class="bt-alert__message">${a.message}</div>
|
|
3
|
+
${a.title?`<div class="bt-alert__title">${m(a.title)}</div>`:""}
|
|
4
|
+
<div class="bt-alert__message">${m(a.message)}</div>
|
|
5
5
|
<div class="bt-alert__actions" style="justify-content: ${a.actionsAlign==="left"?"flex-start":a.actionsAlign==="center"?"center":"flex-end"}">
|
|
6
|
-
${a.showCancel?`<button class="bt-button bt-button--md bt-button--secondary" data-alert-cancel>${a.cancelText}</button>`:""}
|
|
7
|
-
<button class="bt-button bt-button--md bt-button--primary" data-alert-confirm>${a.confirmText}</button>
|
|
6
|
+
${a.showCancel?`<button class="bt-button bt-button--md bt-button--secondary" data-alert-cancel>${m(a.cancelText)}</button>`:""}
|
|
7
|
+
<button class="bt-button bt-button--md bt-button--primary" data-alert-confirm>${m(a.confirmText)}</button>
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
|
-
`,document.body.appendChild(o),document.body.style.overflow="hidden";function e(){o.classList.remove("is-open"),setTimeout(()=>{o.remove(),document.body.style.overflow="";},200);}let
|
|
10
|
+
`,document.body.appendChild(o),document.body.style.overflow="hidden";function e(){o.classList.remove("is-open"),setTimeout(()=>{o.remove(),document.body.style.overflow="";},200);}let n=o.querySelector("[data-alert-confirm]"),_=o.querySelector("[data-alert-cancel]");n&&n.addEventListener("click",()=>{a.onConfirm&&a.onConfirm(),e();}),_&&_.addEventListener("click",()=>{a.onCancel&&a.onCancel(),e();}),o.addEventListener("click",p=>{p.target===o&&e();});let g=p=>{p.key==="Escape"&&(e(),document.removeEventListener("keydown",g));};return document.addEventListener("keydown",g),{close:e}}function $(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={defaultChecked:false,disabled:false,onChange:null,...a},n={checked:e.defaultChecked||o.classList.contains("bt-switch--on")};function _(r){n.checked=r,o.classList.toggle("bt-switch--on",r),e.onChange&&e.onChange(r);}function g(){!e.disabled&&!o.classList.contains("bt-switch--disabled")&&_(!n.checked);}let p=y(o,"click",g);return e.defaultChecked&&_(true),{isChecked:()=>n.checked,setChecked:_,toggle:g,setDisabled:r=>{e.disabled=r,o.classList.toggle("bt-switch--disabled",r);},destroy:()=>p()}}function D(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={page:1,totalPages:1,sibling:2,onChange:null,...a};function n(c,f){let i=[];for(let d=c;d<=f;d++)i.push(d);return i}function _(c,f){if(f<=7)return n(1,f);let i=[],d=f,b=e.sibling;if(c<=b+2){for(let v of n(1,b+3))i.push(v);return i.push("ellipsis"),i.push(d),i}if(c>=d-b-1){i.push(1),i.push("ellipsis");for(let v of n(d-b-2,d))i.push(v);return i}i.push(1),i.push("ellipsis");for(let v of n(c-b,c+b))i.push(v);return i.push("ellipsis"),i.push(d),i}function g(){let c=_(e.page,e.totalPages),f=`
|
|
11
11
|
<button class="bt-pagination__item" ${e.page<=1?"disabled":""} data-action="prev" aria-label="Previous page">
|
|
12
12
|
\u2039
|
|
13
13
|
</button>
|
|
14
14
|
<div class="bt-pagination__pages">
|
|
15
|
-
`;c.forEach((b,
|
|
15
|
+
`;c.forEach((b,v)=>{if(b==="ellipsis")f+='<span class="bt-pagination__ellipsis" aria-hidden="true">\u2026</span>';else {let L=b===e.page;f+=`
|
|
16
16
|
<button
|
|
17
|
-
class="bt-pagination__page${
|
|
18
|
-
data-page="${b}"
|
|
19
|
-
${
|
|
17
|
+
class="bt-pagination__page${L?" bt-pagination__page--active":""}"
|
|
18
|
+
data-page="${m(b)}"
|
|
19
|
+
${L?'aria-current="page"':""}
|
|
20
20
|
>
|
|
21
|
-
${b}
|
|
21
|
+
${m(b)}
|
|
22
22
|
</button>
|
|
23
23
|
`;}}),f+=`
|
|
24
24
|
</div>
|
|
25
25
|
<button class="bt-pagination__item" ${e.page>=e.totalPages?"disabled":""} data-action="next" aria-label="Next page">
|
|
26
26
|
\u203A
|
|
27
27
|
</button>
|
|
28
|
-
`,o.innerHTML=f,
|
|
28
|
+
`,o.innerHTML=f,h("[data-page]",o).forEach(b=>{b.addEventListener("click",()=>{let v=parseInt(b.dataset.page,10);p(v);});});let i=o.querySelector('[data-action="prev"]'),d=o.querySelector('[data-action="next"]');i&&i.addEventListener("click",()=>p(e.page-1)),d&&d.addEventListener("click",()=>p(e.page+1));}function p(c){c<1||c>e.totalPages||c===e.page||(e.page=c,g(),e.onChange&&e.onChange(c));}function r(c){e.totalPages=c,e.page>c&&(e.page=c),g();}return g(),{getPage:()=>e.page,setPage:p,setTotalPages:r,render:g}}function O(){h("[data-bt-select]").forEach(t=>{t._btSelect||(t._btSelect=S(t));}),h("[data-bt-modal]").forEach(t=>{t._btModal||(t._btModal=I(t));}),h("[data-bt-modal-open]").forEach(t=>{let a=t.dataset.btModalOpen,o=E(`#${a}`);o&&o._btModal&&t.addEventListener("click",()=>o._btModal.open());}),h("[data-bt-switch]").forEach(t=>{t._btSwitch||(t._btSwitch=$(t));}),h("[data-bt-pagination]").forEach(t=>{if(!t._btPagination){let a=parseInt(t.dataset.page,10)||1,o=parseInt(t.dataset.totalPages,10)||1;t._btPagination=D(t,{page:a,totalPages:o});}});}return typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",O):O()),{Select:S,Modal:I,Alert:A,Switch:$,Pagination:D,init:O,generateId:C,$:E,$$:h,on:y,version:"1.0.0"}});
|
|
29
29
|
/**
|
|
30
30
|
* Bigtablet Design System - Vanilla JavaScript
|
|
31
31
|
* For use with plain HTML/CSS/JS, Thymeleaf, JSP, etc.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigtablet/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.23.0",
|
|
4
4
|
"description": "Bigtablet Design System UI Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -100,14 +100,14 @@
|
|
|
100
100
|
"@types/node": "^24",
|
|
101
101
|
"@types/react": "^19.2.14",
|
|
102
102
|
"@types/react-dom": "^19",
|
|
103
|
-
"@vitest/browser-playwright": "^4.
|
|
104
|
-
"@vitest/coverage-v8": "^4.
|
|
105
|
-
"chromatic": "^
|
|
103
|
+
"@vitest/browser-playwright": "^4.1.2",
|
|
104
|
+
"@vitest/coverage-v8": "^4.1.2",
|
|
105
|
+
"chromatic": "^16.0.0",
|
|
106
106
|
"conventional-changelog-conventionalcommits": "^9.3.1",
|
|
107
107
|
"esbuild-sass-plugin": "^3.7.0",
|
|
108
108
|
"husky": "^9.1.7",
|
|
109
109
|
"jsdom": "^29.0.1",
|
|
110
|
-
"lucide-react": "^
|
|
110
|
+
"lucide-react": "^1.7.0",
|
|
111
111
|
"next": "^16.2.1",
|
|
112
112
|
"playwright": "^1.57.0",
|
|
113
113
|
"react": "^19.2.4",
|
|
@@ -118,9 +118,9 @@
|
|
|
118
118
|
"storybook": "^10.3.3",
|
|
119
119
|
"tsup": "^8.5.0",
|
|
120
120
|
"tsx": "^4.21.0",
|
|
121
|
-
"typescript": "^
|
|
122
|
-
"vite": "^
|
|
123
|
-
"vitest": "^4.
|
|
121
|
+
"typescript": "^6.0.2",
|
|
122
|
+
"vite": "^6.4.1",
|
|
123
|
+
"vitest": "^4.1.2"
|
|
124
124
|
},
|
|
125
125
|
"publishConfig": {
|
|
126
126
|
"access": "public",
|