@bigtablet/design-system 1.24.0 → 1.24.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 +392 -392
- package/dist/index.d.ts +222 -222
- package/dist/index.js +736 -629
- package/dist/next.d.ts +1 -1
- package/dist/next.js +99 -147
- package/dist/vanilla/bigtablet.min.js +2 -2
- package/package.json +148 -147
package/dist/next.d.ts
CHANGED
package/dist/next.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import './next.css';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import Link from 'next/link';
|
|
5
|
-
import Image from 'next/image';
|
|
6
3
|
import { ChevronDown, CornerDownRight } from 'lucide-react';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
import Link from 'next/link';
|
|
6
|
+
import * as React from 'react';
|
|
7
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
// src/ui/navigation/sidebar/index.tsx
|
|
@@ -16,10 +16,13 @@ var Sidebar = ({
|
|
|
16
16
|
match = "startsWith",
|
|
17
17
|
brandHref = "/main"
|
|
18
18
|
}) => {
|
|
19
|
-
const isActive = (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
const isActive = React.useCallback(
|
|
20
|
+
(href) => {
|
|
21
|
+
if (!activePath) return false;
|
|
22
|
+
return match === "exact" ? activePath === href : activePath.startsWith(href);
|
|
23
|
+
},
|
|
24
|
+
[activePath, match]
|
|
25
|
+
);
|
|
23
26
|
const [openGroups, setOpenGroups] = React.useState([]);
|
|
24
27
|
const [isOpen, setIsOpen] = React.useState(true);
|
|
25
28
|
const toggleSidebar = (next) => {
|
|
@@ -31,166 +34,115 @@ var Sidebar = ({
|
|
|
31
34
|
const autoOpen = items.filter(
|
|
32
35
|
(item) => item.type === "group" && item.children.some((c) => isActive(c.href))
|
|
33
36
|
).map((g) => g.id);
|
|
34
|
-
setOpenGroups(
|
|
35
|
-
|
|
36
|
-
);
|
|
37
|
-
}, [activePath, items]);
|
|
37
|
+
setOpenGroups((prev) => Array.from(/* @__PURE__ */ new Set([...prev, ...autoOpen])));
|
|
38
|
+
}, [activePath, items, isActive]);
|
|
38
39
|
const toggleGroup = (id) => {
|
|
39
|
-
setOpenGroups(
|
|
40
|
-
(prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
|
|
41
|
-
);
|
|
40
|
+
setOpenGroups((prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]);
|
|
42
41
|
};
|
|
43
42
|
const sidebarClassName = [
|
|
44
43
|
"sidebar",
|
|
45
44
|
isOpen ? "sidebar_is_open" : "sidebar_is_closed",
|
|
46
45
|
className ?? ""
|
|
47
46
|
].filter(Boolean).join(" ");
|
|
48
|
-
return /* @__PURE__ */ jsx(
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
src: "/images/logo/bigtablet.png",
|
|
61
|
-
alt: "Bigtablet",
|
|
62
|
-
width: 96,
|
|
63
|
-
height: 30,
|
|
64
|
-
priority: true
|
|
65
|
-
}
|
|
66
|
-
)
|
|
67
|
-
] }),
|
|
68
|
-
/* @__PURE__ */ jsx(
|
|
69
|
-
"button",
|
|
70
|
-
{
|
|
71
|
-
type: "button",
|
|
72
|
-
className: "sidebar_close_btn",
|
|
73
|
-
onClick: () => toggleSidebar(false),
|
|
74
|
-
children: /* @__PURE__ */ jsx(
|
|
75
|
-
Image,
|
|
76
|
-
{
|
|
77
|
-
src: "/images/sidebar/arrow-close.svg",
|
|
78
|
-
alt: "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
|
|
79
|
-
width: 24,
|
|
80
|
-
height: 24
|
|
81
|
-
}
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
] }),
|
|
86
|
-
/* @__PURE__ */ jsx("nav", { className: "sidebar_nav", "aria-label": "\uBA54\uC778 \uBA54\uB274", children: items.map((item) => {
|
|
87
|
-
if (item.type === "group") {
|
|
88
|
-
const open = openGroups.includes(item.id);
|
|
89
|
-
const subClassName = [
|
|
90
|
-
"sidebar_sub",
|
|
91
|
-
open && "sidebar_sub_open"
|
|
92
|
-
].filter(Boolean).join(" ");
|
|
93
|
-
const chevronClassName = [
|
|
94
|
-
"sidebar_chevron",
|
|
95
|
-
open && "sidebar_chevron_open"
|
|
96
|
-
].filter(Boolean).join(" ");
|
|
97
|
-
const subId = `sidebar_sub_${item.id}`;
|
|
98
|
-
return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
|
|
99
|
-
/* @__PURE__ */ jsxs(
|
|
100
|
-
"button",
|
|
101
|
-
{
|
|
102
|
-
type: "button",
|
|
103
|
-
className: "sidebar_item",
|
|
104
|
-
"aria-expanded": open,
|
|
105
|
-
"aria-controls": subId,
|
|
106
|
-
onClick: () => toggleGroup(item.id),
|
|
107
|
-
children: [
|
|
108
|
-
/* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
109
|
-
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
110
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
111
|
-
] }),
|
|
112
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_item_right", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
113
|
-
ChevronDown,
|
|
114
|
-
{
|
|
115
|
-
size: 16,
|
|
116
|
-
className: chevronClassName
|
|
117
|
-
}
|
|
118
|
-
) })
|
|
119
|
-
]
|
|
120
|
-
}
|
|
121
|
-
),
|
|
122
|
-
/* @__PURE__ */ jsx("div", { id: subId, className: subClassName, children: item.children.map((child) => {
|
|
123
|
-
const active2 = isActive(
|
|
124
|
-
child.href
|
|
125
|
-
);
|
|
126
|
-
const subItemClassName = [
|
|
127
|
-
"sidebar_sub_item",
|
|
128
|
-
active2 && "sidebar_sub_item_active"
|
|
129
|
-
].filter(Boolean).join(" ");
|
|
130
|
-
return /* @__PURE__ */ jsxs(
|
|
131
|
-
Link,
|
|
132
|
-
{
|
|
133
|
-
href: child.href,
|
|
134
|
-
className: subItemClassName,
|
|
135
|
-
"aria-current": active2 ? "page" : void 0,
|
|
136
|
-
tabIndex: open ? void 0 : -1,
|
|
137
|
-
onClick: () => onItemSelect?.(
|
|
138
|
-
child.href
|
|
139
|
-
),
|
|
140
|
-
children: [
|
|
141
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
142
|
-
CornerDownRight,
|
|
143
|
-
{
|
|
144
|
-
size: 14
|
|
145
|
-
}
|
|
146
|
-
) }),
|
|
147
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
|
|
148
|
-
]
|
|
149
|
-
},
|
|
150
|
-
child.href
|
|
151
|
-
);
|
|
152
|
-
}) })
|
|
153
|
-
] }, item.id);
|
|
47
|
+
return /* @__PURE__ */ jsx("aside", { className: sidebarClassName, style, children: isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
|
+
/* @__PURE__ */ jsxs("div", { className: "sidebar_brand", children: [
|
|
49
|
+
/* @__PURE__ */ jsxs(Link, { href: brandHref, className: "sidebar_brand_link", children: [
|
|
50
|
+
/* @__PURE__ */ jsx("div", {}),
|
|
51
|
+
/* @__PURE__ */ jsx(
|
|
52
|
+
Image,
|
|
53
|
+
{
|
|
54
|
+
src: "/images/logo/bigtablet.png",
|
|
55
|
+
alt: "Bigtablet",
|
|
56
|
+
width: 96,
|
|
57
|
+
height: 30,
|
|
58
|
+
priority: true
|
|
154
59
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
active && "sidebar_item_active"
|
|
159
|
-
].filter(Boolean).join(" ");
|
|
160
|
-
return /* @__PURE__ */ jsx(
|
|
161
|
-
Link,
|
|
162
|
-
{
|
|
163
|
-
href: item.href,
|
|
164
|
-
className: itemClassName,
|
|
165
|
-
"aria-current": active ? "page" : void 0,
|
|
166
|
-
onClick: () => onItemSelect?.(item.href),
|
|
167
|
-
children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
168
|
-
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
169
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
170
|
-
] })
|
|
171
|
-
},
|
|
172
|
-
item.href
|
|
173
|
-
);
|
|
174
|
-
}) })
|
|
175
|
-
] }) : /* @__PURE__ */ jsx(
|
|
60
|
+
)
|
|
61
|
+
] }),
|
|
62
|
+
/* @__PURE__ */ jsx(
|
|
176
63
|
"button",
|
|
177
64
|
{
|
|
178
65
|
type: "button",
|
|
179
|
-
className: "
|
|
180
|
-
onClick: () => toggleSidebar(
|
|
66
|
+
className: "sidebar_close_btn",
|
|
67
|
+
onClick: () => toggleSidebar(false),
|
|
181
68
|
children: /* @__PURE__ */ jsx(
|
|
182
69
|
Image,
|
|
183
70
|
{
|
|
184
|
-
src: "/images/sidebar/
|
|
185
|
-
alt: "\uC0AC\uC774\uB4DC\uBC14 \
|
|
71
|
+
src: "/images/sidebar/arrow-close.svg",
|
|
72
|
+
alt: "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
|
|
186
73
|
width: 24,
|
|
187
74
|
height: 24
|
|
188
75
|
}
|
|
189
76
|
)
|
|
190
77
|
}
|
|
191
78
|
)
|
|
192
|
-
}
|
|
193
|
-
|
|
79
|
+
] }),
|
|
80
|
+
/* @__PURE__ */ jsx("nav", { className: "sidebar_nav", "aria-label": "\uBA54\uC778 \uBA54\uB274", children: items.map((item) => {
|
|
81
|
+
if (item.type === "group") {
|
|
82
|
+
const open = openGroups.includes(item.id);
|
|
83
|
+
const subClassName = ["sidebar_sub", open && "sidebar_sub_open"].filter(Boolean).join(" ");
|
|
84
|
+
const chevronClassName = ["sidebar_chevron", open && "sidebar_chevron_open"].filter(Boolean).join(" ");
|
|
85
|
+
const subId = `sidebar_sub_${item.id}`;
|
|
86
|
+
return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
|
|
87
|
+
/* @__PURE__ */ jsxs(
|
|
88
|
+
"button",
|
|
89
|
+
{
|
|
90
|
+
type: "button",
|
|
91
|
+
className: "sidebar_item",
|
|
92
|
+
"aria-expanded": open,
|
|
93
|
+
"aria-controls": subId,
|
|
94
|
+
onClick: () => toggleGroup(item.id),
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
97
|
+
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
98
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
99
|
+
] }),
|
|
100
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_item_right", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: chevronClassName }) })
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ jsx("div", { id: subId, className: subClassName, children: item.children.map((child) => {
|
|
105
|
+
const active2 = isActive(child.href);
|
|
106
|
+
const subItemClassName = [
|
|
107
|
+
"sidebar_sub_item",
|
|
108
|
+
active2 && "sidebar_sub_item_active"
|
|
109
|
+
].filter(Boolean).join(" ");
|
|
110
|
+
return /* @__PURE__ */ jsxs(
|
|
111
|
+
Link,
|
|
112
|
+
{
|
|
113
|
+
href: child.href,
|
|
114
|
+
className: subItemClassName,
|
|
115
|
+
"aria-current": active2 ? "page" : void 0,
|
|
116
|
+
tabIndex: open ? void 0 : -1,
|
|
117
|
+
onClick: () => onItemSelect?.(child.href),
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CornerDownRight, { size: 14 }) }),
|
|
120
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
child.href
|
|
124
|
+
);
|
|
125
|
+
}) })
|
|
126
|
+
] }, item.id);
|
|
127
|
+
}
|
|
128
|
+
const active = isActive(item.href);
|
|
129
|
+
const itemClassName = ["sidebar_item", active && "sidebar_item_active"].filter(Boolean).join(" ");
|
|
130
|
+
return /* @__PURE__ */ jsx(
|
|
131
|
+
Link,
|
|
132
|
+
{
|
|
133
|
+
href: item.href,
|
|
134
|
+
className: itemClassName,
|
|
135
|
+
"aria-current": active ? "page" : void 0,
|
|
136
|
+
onClick: () => onItemSelect?.(item.href),
|
|
137
|
+
children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
138
|
+
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
139
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
140
|
+
] })
|
|
141
|
+
},
|
|
142
|
+
item.href
|
|
143
|
+
);
|
|
144
|
+
}) })
|
|
145
|
+
] }) : /* @__PURE__ */ jsx("button", { type: "button", className: "sidebar_open_btn", onClick: () => toggleSidebar(true), children: /* @__PURE__ */ jsx(Image, { src: "/images/sidebar/menu.svg", alt: "\uC0AC\uC774\uB4DC\uBC14 \uC5F4\uAE30", width: 24, height: 24 }) }) });
|
|
194
146
|
};
|
|
195
147
|
|
|
196
148
|
export { Sidebar };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){'use strict';(
|
|
1
|
+
(function(){'use strict';((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 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 l=>{l.preventDefault();let u=n.options[s];u&&!u.disabled&&(f(u.value),d());}}function K(s){return ()=>{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
3
|
${a.title?`<div class="bt-alert__title">${m(a.title)}</div>`:""}
|
|
4
4
|
<div class="bt-alert__message">${m(a.message)}</div>
|
|
@@ -25,7 +25,7 @@
|
|
|
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,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
|
|
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?._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,149 +1,150 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
2
|
+
"name": "@bigtablet/design-system",
|
|
3
|
+
"version": "1.24.1",
|
|
4
|
+
"description": "Bigtablet Design System UI Components",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"style": "dist/index.css",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/Bigtablet/bigtablet-design-system.git"
|
|
11
|
+
},
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/index.js"
|
|
16
|
+
},
|
|
17
|
+
"./next": {
|
|
18
|
+
"types": "./dist/next.d.ts",
|
|
19
|
+
"import": "./dist/next.js"
|
|
20
|
+
},
|
|
21
|
+
"./style.css": "./dist/index.css",
|
|
22
|
+
"./scss/token": "./dist/styles/scss/token.scss",
|
|
23
|
+
"./vanilla": {
|
|
24
|
+
"style": "./dist/vanilla/bigtablet.min.css",
|
|
25
|
+
"default": "./dist/vanilla/bigtablet.min.js"
|
|
26
|
+
},
|
|
27
|
+
"./vanilla/style.min.css": "./dist/vanilla/bigtablet.min.css",
|
|
28
|
+
"./vanilla/bigtablet.min.js": "./dist/vanilla/bigtablet.min.js"
|
|
29
|
+
},
|
|
30
|
+
"files": [
|
|
31
|
+
"dist",
|
|
32
|
+
"!dist/vanilla/bigtablet.css",
|
|
33
|
+
"!dist/vanilla/bigtablet.js",
|
|
34
|
+
"!dist/vanilla/examples",
|
|
35
|
+
"README.md",
|
|
36
|
+
"LICENSE"
|
|
37
|
+
],
|
|
38
|
+
"sideEffects": [
|
|
39
|
+
"**/*.css",
|
|
40
|
+
"**/*.scss",
|
|
41
|
+
"./dist/next.css"
|
|
42
|
+
],
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build": "tsup && pnpm run copy:scss && pnpm run build:vanilla",
|
|
45
|
+
"build:vanilla": "sh scripts/build-vanilla.sh",
|
|
46
|
+
"copy:scss": "sh scripts/copy-scss.sh",
|
|
47
|
+
"dev": "tsup --watch",
|
|
48
|
+
"storybook": "storybook dev -p 6006",
|
|
49
|
+
"build:sb": "storybook build",
|
|
50
|
+
"test": "vitest run --project unit",
|
|
51
|
+
"test:watch": "vitest --project unit",
|
|
52
|
+
"test:coverage": "vitest run --project unit --coverage",
|
|
53
|
+
"chromatic": "npx chromatic --project-token=$CHROMATIC_TOKEN --build-script-name=build:sb",
|
|
54
|
+
"figma:test": "tsx scripts/figma-connect.ts",
|
|
55
|
+
"figma:snapshot": "tsx scripts/figma-snapshot.ts",
|
|
56
|
+
"figma:diff": "tsx scripts/figma-diff.ts",
|
|
57
|
+
"figma:apply": "tsx scripts/figma-apply.ts",
|
|
58
|
+
"size": "size-limit",
|
|
59
|
+
"prepare": "husky"
|
|
60
|
+
},
|
|
61
|
+
"keywords": [
|
|
62
|
+
"design-system",
|
|
63
|
+
"react",
|
|
64
|
+
"storybook",
|
|
65
|
+
"ui",
|
|
66
|
+
"vanilla",
|
|
67
|
+
"thymeleaf",
|
|
68
|
+
"html",
|
|
69
|
+
"css"
|
|
70
|
+
],
|
|
71
|
+
"author": "sangmin",
|
|
72
|
+
"license": "MIT",
|
|
73
|
+
"packageManager": "pnpm@10.20.0",
|
|
74
|
+
"peerDependencies": {
|
|
75
|
+
"lucide-react": ">=0.552.0",
|
|
76
|
+
"next": ">=16",
|
|
77
|
+
"react": "^19",
|
|
78
|
+
"react-dom": "^19"
|
|
79
|
+
},
|
|
80
|
+
"peerDependenciesMeta": {
|
|
81
|
+
"next": {
|
|
82
|
+
"optional": true
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"devDependencies": {
|
|
86
|
+
"@commitlint/cli": "^20.5.0",
|
|
87
|
+
"@commitlint/core": "^20.5.0",
|
|
88
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
89
|
+
"@semantic-release/git": "^10.0.1",
|
|
90
|
+
"@semantic-release/github": "^12.0.1",
|
|
91
|
+
"@semantic-release/npm": "^13.1.1",
|
|
92
|
+
"@size-limit/preset-small-lib": "^12.0.1",
|
|
93
|
+
"@storybook/addon-docs": "^10.3.3",
|
|
94
|
+
"@storybook/addon-vitest": "^10.3.3",
|
|
95
|
+
"@storybook/react": "^10.3.3",
|
|
96
|
+
"@storybook/react-vite": "^10.3.3",
|
|
97
|
+
"@testing-library/dom": "^10.4.1",
|
|
98
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
99
|
+
"@testing-library/react": "^16.3.2",
|
|
100
|
+
"@types/node": "^24",
|
|
101
|
+
"@types/react": "^19.2.14",
|
|
102
|
+
"@types/react-dom": "^19",
|
|
103
|
+
"@vitest/browser-playwright": "^4.1.2",
|
|
104
|
+
"@vitest/coverage-v8": "^4.1.2",
|
|
105
|
+
"chromatic": "^16.0.0",
|
|
106
|
+
"conventional-changelog-conventionalcommits": "^9.3.1",
|
|
107
|
+
"esbuild-sass-plugin": "^3.7.0",
|
|
108
|
+
"husky": "^9.1.7",
|
|
109
|
+
"jsdom": "^29.0.1",
|
|
110
|
+
"lucide-react": "^1.7.0",
|
|
111
|
+
"next": "^16.2.1",
|
|
112
|
+
"playwright": "^1.57.0",
|
|
113
|
+
"react": "^19.2.4",
|
|
114
|
+
"react-dom": "^19.2.4",
|
|
115
|
+
"sass-embedded": "^1.93.3",
|
|
116
|
+
"semantic-release": "^25.0.1",
|
|
117
|
+
"size-limit": "^12.0.1",
|
|
118
|
+
"storybook": "^10.3.3",
|
|
119
|
+
"tsup": "^8.5.0",
|
|
120
|
+
"tsx": "^4.21.0",
|
|
121
|
+
"typescript": "^6.0.2",
|
|
122
|
+
"vite": "^6.4.1",
|
|
123
|
+
"vitest": "^4.1.2",
|
|
124
|
+
"@biomejs/biome": "^2.4.10"
|
|
125
|
+
},
|
|
126
|
+
"publishConfig": {
|
|
127
|
+
"access": "public",
|
|
128
|
+
"registry": "https://registry.npmjs.org/"
|
|
129
|
+
},
|
|
130
|
+
"size-limit": [
|
|
131
|
+
{
|
|
132
|
+
"path": "dist/index.js",
|
|
133
|
+
"limit": "12 kB"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"path": "dist/vanilla/bigtablet.min.js",
|
|
137
|
+
"limit": "5 kB"
|
|
138
|
+
}
|
|
139
|
+
],
|
|
140
|
+
"pnpm": {
|
|
141
|
+
"overrides": {
|
|
142
|
+
"rollup": "^4.59.0",
|
|
143
|
+
"lodash": "^4.18.1",
|
|
144
|
+
"lodash-es": "^4.18.1",
|
|
145
|
+
"immutable": "^5.1.5",
|
|
146
|
+
"minimatch": "^10.2.4",
|
|
147
|
+
"handlebars": "^4.7.9"
|
|
148
|
+
}
|
|
149
|
+
}
|
|
149
150
|
}
|