@bigtablet/design-system 1.24.0 → 1.24.2
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.css +1 -1
- 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 +1 @@
|
|
|
1
|
-
@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: #121212;--bt-color-on-primary: #FFFFFF;--bt-color-background: #FFFFFF;--bt-color-background-dim: #F4F4F4;--bt-color-background-overlay: rgba(0, 0, 0, 0.5);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #888888;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-border: #E5E5E5;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-hover: rgba(0, 0, 0, 0.05);--bt-color-pressed: rgba(26, 26, 26, 0.12);--bt-color-success: #10B981;--bt-color-error: #EF4444;--bt-color-warning: #F59E0B;--bt-color-info: #3B82F6;--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-shadow-sm: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-shadow-md: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-shadow-lg: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-shadow-xl: 0 5px 5px -5px rgba(0, 0, 0, 0.2), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:rgba(0,0,0,.05)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:rgb(235.7842364532, 30.4157635468, 30.4157635468)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-primary);background:var(--bt-color-background);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-primary);border-color:var(--bt-color-primary)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-background);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-primary);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-switch{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-switch__thumb{width:18px;height:18px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base);transform:translateX(0)}.bt-switch--on{background:var(--bt-color-primary)}.bt-switch--on .bt-switch__thumb{transform:translateX(18px)}.bt-switch--sm{width:34px;height:18px}.bt-switch--sm .bt-switch__thumb{width:14px;height:14px}.bt-switch--sm.bt-switch--on .bt-switch__thumb{transform:translateX(16px)}.bt-switch--lg{width:48px;height:26px}.bt-switch--lg .bt-switch__thumb{width:22px;height:22px}.bt-switch--lg.bt-switch--on .bt-switch__thumb{transform:translateX(22px)}.bt-switch--disabled{opacity:.6;cursor:not-allowed}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-md);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;inset:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-shadow-lg);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;inset:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-shadow-xl);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-sm{box-shadow:var(--bt-shadow-sm)}.bt-card--shadow-md{box-shadow:var(--bt-shadow-md)}.bt-card--shadow-lg{box-shadow:var(--bt-shadow-lg)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-primary);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-primary);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;inset:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-lg)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}
|
|
1
|
+
@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: #121212;--bt-color-on-primary: #FFFFFF;--bt-color-background: #FFFFFF;--bt-color-background-dim: #F4F4F4;--bt-color-background-overlay: rgba(0, 0, 0, 0.5);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #888888;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-border: #E5E5E5;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-text-primary: var(--bt-color-text-heading);--bt-color-text-secondary: var(--bt-color-text-body);--bt-color-text-tertiary: var(--bt-color-text-caption);--bt-color-background-secondary: var(--bt-color-background-dim);--bt-color-border-light: #B3B3B3;--bt-color-hover: rgba(0, 0, 0, 0.05);--bt-color-pressed: rgba(26, 26, 26, 0.12);--bt-color-primary-hover: rgb(56.25, 56.25, 56.25);--bt-color-overlay: rgba(0, 0, 0, 0.5);--bt-color-success: #10B981;--bt-color-error: #EF4444;--bt-color-warning: #F59E0B;--bt-color-info: #3B82F6;--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-spacing-xs: var(--bt-spacing-4);--bt-spacing-sm: var(--bt-spacing-8);--bt-spacing-md: var(--bt-spacing-12);--bt-spacing-lg: var(--bt-spacing-16);--bt-spacing-xl: var(--bt-spacing-20);--bt-spacing-2xl: var(--bt-spacing-24);--bt-spacing-3xl: var(--bt-spacing-32);--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-font-size-sm: var(--bt-font-size-14);--bt-font-size-base: var(--bt-font-size-15);--bt-font-size-md: var(--bt-font-size-16);--bt-font-size-lg: var(--bt-font-size-18);--bt-font-size-xl: var(--bt-font-size-20);--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-shadow-sm: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-shadow-md: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-shadow-lg: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-shadow-xl: 0 5px 5px -5px rgba(0, 0, 0, 0.2), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:rgba(0,0,0,.05)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:rgb(235.7842364532, 30.4157635468, 30.4157635468)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-primary);background:var(--bt-color-background);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-primary);border-color:var(--bt-color-primary)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-background);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-primary);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-switch{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-switch__thumb{width:18px;height:18px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base);transform:translateX(0)}.bt-switch--on{background:var(--bt-color-primary)}.bt-switch--on .bt-switch__thumb{transform:translateX(18px)}.bt-switch--sm{width:34px;height:18px}.bt-switch--sm .bt-switch__thumb{width:14px;height:14px}.bt-switch--sm.bt-switch--on .bt-switch__thumb{transform:translateX(16px)}.bt-switch--lg{width:48px;height:26px}.bt-switch--lg .bt-switch__thumb{width:22px;height:22px}.bt-switch--lg.bt-switch--on .bt-switch__thumb{transform:translateX(22px)}.bt-switch--disabled{opacity:.6;cursor:not-allowed}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-md);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;inset:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-shadow-lg);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;inset:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-shadow-xl);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-sm{box-shadow:var(--bt-shadow-sm)}.bt-card--shadow-md{box-shadow:var(--bt-shadow-md)}.bt-card--shadow-lg{box-shadow:var(--bt-shadow-lg)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-primary);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-primary);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-color-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;inset:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-lg)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}
|
|
@@ -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.
|