spicykatsu 0.4.0 → 0.4.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/README.md +12 -4
- package/dist/lib/SpicyDataTable/SpicyDataTable.css +1 -0
- package/dist/lib/SpicyDataTable/SpicyDataTable.js +196 -0
- package/dist/lib/SpicyProgress/SpicyProgress.js +2 -74
- package/dist/spicykatsu.es.js +53 -50
- package/package.json +1 -1
- package/dist/lib/SpicyProgress/SpicyProgress.css +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# SpicyKatsuLib
|
|
2
2
|
|
|
3
|
-
Fun, simple component library for Vue 3. Built as a personal playground
|
|
3
|
+
Fun, simple component library for Vue 3. Built as a personal playground for my website. Feel free to use it in your own projects.
|
|
4
4
|
|
|
5
5
|
📖 **[Docs](https://satoru8.gitlab.io/spicykatsuvlib/)** | 📦 **[npm](https://www.npmjs.com/package/spicykatsu)**
|
|
6
6
|
|
|
@@ -18,25 +18,32 @@ npm install spicykatsu
|
|
|
18
18
|
import { createApp } from 'vue'
|
|
19
19
|
import App from './App.vue'
|
|
20
20
|
import { SpicyKatsu } from 'spicykatsu'
|
|
21
|
-
import 'spicykatsu/dist/style.css'
|
|
22
21
|
|
|
23
22
|
const app = createApp(App)
|
|
24
23
|
app.use(SpicyKatsu)
|
|
25
24
|
app.mount('#app')
|
|
26
25
|
```
|
|
27
26
|
|
|
28
|
-
|
|
27
|
+
Styles are automatically injected when you call `app.use(SpicyKatsu)` — no CSS import needed.
|
|
28
|
+
|
|
29
|
+
You can also import components individually for JS tree-shaking:
|
|
29
30
|
|
|
30
31
|
```ts
|
|
31
32
|
import { SpicyBtn, SpicyModal } from 'spicykatsu'
|
|
32
33
|
```
|
|
33
34
|
|
|
35
|
+
For CSS tree-shaking, set `useStyles: false` and import only what you need:
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import 'spicykatsu/dist/lib/SpicyBtn/SpicyBtn.css'
|
|
39
|
+
```
|
|
40
|
+
|
|
34
41
|
## Options
|
|
35
42
|
|
|
36
43
|
```ts
|
|
37
44
|
app.use(SpicyKatsu, {
|
|
38
45
|
useComponents: true, // Register all components globally (default: true)
|
|
39
|
-
useStyles: true, // Inject
|
|
46
|
+
useStyles: true, // Inject all component styles into <head> (default: true)
|
|
40
47
|
useDirectives: true // Register v-spicyDrag and v-spicyRipple (default: true)
|
|
41
48
|
})
|
|
42
49
|
```
|
|
@@ -49,6 +56,7 @@ app.use(SpicyKatsu, {
|
|
|
49
56
|
| `SpicyAlert` | Dismissible alerts with variants and auto-close |
|
|
50
57
|
| `SpicyBtn` | Button with MDI icon support and ripple effect |
|
|
51
58
|
| `SpicyCarousel` | Image carousel with autoplay, touch, and pagination |
|
|
59
|
+
| `SpicyDataTable` | Data table with sorting, filtering, and pagination |
|
|
52
60
|
| `SpicyDialog` | Teleported overlay dialog |
|
|
53
61
|
| `SpicyDivider` | Horizontal or vertical divider |
|
|
54
62
|
| `SpicyDropdown` | Dropdown menu with click-outside close |
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.spicyProgress{background-color:#e0e0e0;border-radius:8px;width:100%;position:relative;overflow:hidden}.spicyProgressBar{transition:width .4s}.spicyProgressLabel{color:#fff;font-size:12px;position:absolute;top:0;right:10px}.spicyProgressCircular{justify-content:center;align-items:center;display:flex;position:relative}.spicyCircularSvg{background-color:#00000080;border-radius:50%;transform:rotate(-90deg)}.spicyCircularTrack{fill:none;stroke:#e0e0e0}.spicyCircularProgress{fill:none;transition:stroke-dashoffset .4s}.spicyCircularLabel{font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spicyDataTable{background-color:var(--skBgColor);width:100%;color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize);flex-direction:column;display:flex;position:relative}.spicyDataTableContainer{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);overflow-x:auto}.spicyDataTableTable{border-collapse:collapse;table-layout:fixed;width:100%}.spicyDataTableHeader{background-color:var(--skBgSecondaryColor);z-index:10;position:sticky;top:0}.spicyDataTableHeaderCell{border-bottom:2px solid var(--skBorderColor);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;font-weight:600;overflow:hidden}.spicyDataTableHeaderCell.sortable{cursor:pointer;transition:background-color .2s}.spicyDataTableHeaderCell.sortable:hover{background-color:var(--skHoverColor)}.headerText{margin-right:4px;display:inline-block}.sortIcon{opacity:.7;font-size:12px;display:inline-block}.spicyDataTableBody{background-color:var(--skBgColor)}.spicyDataTableRow{border-bottom:1px solid var(--skBorderColor);transition:background-color .2s}.spicyDataTableRow.clickable{cursor:pointer}.spicyDataTableRow:hover{background-color:var(--skHoverColor)}.spicyDataTableRow:nth-child(2n){background-color:rgba(var(--skBgSecondaryColor), .3)}.spicyDataTableRow:nth-child(2n):hover{background-color:var(--skHoverColor)}.spicyDataTableCell{white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;overflow:hidden}.spicyDataTableCell.left{text-align:left}.spicyDataTableCell.center{text-align:center}.spicyDataTableCell.right{text-align:right}.spicyDataTableLoading{background-color:rgba(var(--skBgColor), .8);z-index:20;border-radius:var(--skBorderRadius);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spicyDataTablePagination{border:1px solid var(--skBorderColor);border-radius:0 0 var(--skBorderRadius) var(--skBorderRadius);background-color:var(--skBgSecondaryColor);border-top:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.paginationInfo{color:var(--skTextColor);font-size:14px}.paginationControls{gap:8px;display:flex}.paginationPerPage{align-items:center;display:flex}.itemsPerPageSelect{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);background-color:var(--skBgColor);color:var(--skTextColor);font-family:var(--skFontFamily);cursor:pointer;outline:none;padding:6px 12px;font-size:14px}.itemsPerPageSelect:hover{border-color:var(--skPrimaryColor)}.itemsPerPageSelect:focus{border-color:var(--skPrimaryColor);outline:2px solid var(--skPrimaryColor);outline-offset:2px}@media (width<=768px){.spicyDataTablePagination{flex-direction:column;align-items:stretch}.paginationInfo{text-align:center}.paginationControls,.paginationPerPage{justify-content:center}.itemsPerPageSelect{width:100%}.spicyDataTableHeaderCell,.spicyDataTableCell{padding:8px 12px;font-size:14px}}@media (width<=480px){.spicyDataTableHeaderCell,.spicyDataTableCell{padding:6px 8px;font-size:12px}.paginationInfo{font-size:12px}}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import { t as e } from "../SpicyBtn/SpicyBtn.js";
|
|
2
|
+
import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, watch as g } from "vue";
|
|
3
|
+
//#region src/components/SpicyDataTable/SpicyDataTable.css?inline
|
|
4
|
+
var _ = ".spicyDataTable{background-color:var(--skBgColor);width:100%;color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize);flex-direction:column;display:flex;position:relative}.spicyDataTableContainer{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);overflow-x:auto}.spicyDataTableTable{border-collapse:collapse;table-layout:fixed;width:100%}.spicyDataTableHeader{background-color:var(--skBgSecondaryColor);z-index:10;position:sticky;top:0}.spicyDataTableHeaderCell{border-bottom:2px solid var(--skBorderColor);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;font-weight:600;overflow:hidden}.spicyDataTableHeaderCell.sortable{cursor:pointer;transition:background-color .2s}.spicyDataTableHeaderCell.sortable:hover{background-color:var(--skHoverColor)}.headerText{margin-right:4px;display:inline-block}.sortIcon{opacity:.7;font-size:12px;display:inline-block}.spicyDataTableBody{background-color:var(--skBgColor)}.spicyDataTableRow{border-bottom:1px solid var(--skBorderColor);transition:background-color .2s}.spicyDataTableRow.clickable{cursor:pointer}.spicyDataTableRow:hover{background-color:var(--skHoverColor)}.spicyDataTableRow:nth-child(2n){background-color:rgba(var(--skBgSecondaryColor), .3)}.spicyDataTableRow:nth-child(2n):hover{background-color:var(--skHoverColor)}.spicyDataTableCell{white-space:nowrap;text-overflow:ellipsis;padding:12px 16px;overflow:hidden}.spicyDataTableCell.left{text-align:left}.spicyDataTableCell.center{text-align:center}.spicyDataTableCell.right{text-align:right}.spicyDataTableLoading{background-color:rgba(var(--skBgColor), .8);z-index:20;border-radius:var(--skBorderRadius);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spicyDataTablePagination{border:1px solid var(--skBorderColor);border-radius:0 0 var(--skBorderRadius) var(--skBorderRadius);background-color:var(--skBgSecondaryColor);border-top:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.paginationInfo{color:var(--skTextColor);font-size:14px}.paginationControls{gap:8px;display:flex}.paginationPerPage{align-items:center;display:flex}.itemsPerPageSelect{border:1px solid var(--skBorderColor);border-radius:var(--skBorderRadius);background-color:var(--skBgColor);color:var(--skTextColor);font-family:var(--skFontFamily);cursor:pointer;outline:none;padding:6px 12px;font-size:14px}.itemsPerPageSelect:hover{border-color:var(--skPrimaryColor)}.itemsPerPageSelect:focus{border-color:var(--skPrimaryColor);outline:2px solid var(--skPrimaryColor);outline-offset:2px}@media (width<=768px){.spicyDataTablePagination{flex-direction:column;align-items:stretch}.paginationInfo{text-align:center}.paginationControls,.paginationPerPage{justify-content:center}.itemsPerPageSelect{width:100%}.spicyDataTableHeaderCell,.spicyDataTableCell{padding:8px 12px;font-size:14px}}@media (width<=480px){.spicyDataTableHeaderCell,.spicyDataTableCell{padding:6px 8px;font-size:12px}.paginationInfo{font-size:12px}}", v = {
|
|
5
|
+
key: 0,
|
|
6
|
+
class: "spicyProgress"
|
|
7
|
+
}, y = {
|
|
8
|
+
key: 0,
|
|
9
|
+
class: "spicyProgressLabel"
|
|
10
|
+
}, b = {
|
|
11
|
+
key: 1,
|
|
12
|
+
class: "spicyProgressCircular"
|
|
13
|
+
}, x = ["width", "height"], S = [
|
|
14
|
+
"stroke-width",
|
|
15
|
+
"r",
|
|
16
|
+
"cx",
|
|
17
|
+
"cy"
|
|
18
|
+
], C = [
|
|
19
|
+
"stroke",
|
|
20
|
+
"stroke-width",
|
|
21
|
+
"r",
|
|
22
|
+
"cx",
|
|
23
|
+
"cy"
|
|
24
|
+
], w = {
|
|
25
|
+
key: 0,
|
|
26
|
+
class: "spicyCircularLabel"
|
|
27
|
+
}, T = /* @__PURE__ */ c({
|
|
28
|
+
__name: "SpicyProgress",
|
|
29
|
+
props: {
|
|
30
|
+
value: {},
|
|
31
|
+
max: { default: 100 },
|
|
32
|
+
color: { default: "#4caf50" },
|
|
33
|
+
height: { default: "8px" },
|
|
34
|
+
strokeWidth: { default: 8 },
|
|
35
|
+
type: { default: "linear" },
|
|
36
|
+
showLabel: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: !1
|
|
39
|
+
},
|
|
40
|
+
size: { default: 100 }
|
|
41
|
+
},
|
|
42
|
+
setup(e) {
|
|
43
|
+
let o = e, s = n(() => Math.round(o.value / o.max * 100)), c = n(() => o.type === "linear"), l = n(() => ({
|
|
44
|
+
width: `${s.value}%`,
|
|
45
|
+
backgroundColor: o.color,
|
|
46
|
+
height: o.height
|
|
47
|
+
})), f = n(() => o.size / 2), p = n(() => (o.size - o.strokeWidth) / 2), g = n(() => 2 * Math.PI * p.value), _ = n(() => ({
|
|
48
|
+
strokeDasharray: `${g.value} ${g.value}`,
|
|
49
|
+
strokeDashoffset: `${g.value - s.value / 100 * g.value}`,
|
|
50
|
+
transition: "stroke-dashoffset 400ms ease"
|
|
51
|
+
}));
|
|
52
|
+
return (n, o) => (d(), i(t, null, [c.value ? (d(), i("div", v, [a("div", {
|
|
53
|
+
class: "spicyProgressBar",
|
|
54
|
+
style: u(l.value)
|
|
55
|
+
}, null, 4), e.showLabel ? (d(), i("div", y, h(s.value) + "%", 1)) : r("", !0)])) : (d(), i("div", b, [(d(), i("svg", {
|
|
56
|
+
class: "spicyCircularSvg",
|
|
57
|
+
width: e.size,
|
|
58
|
+
height: e.size
|
|
59
|
+
}, [a("circle", {
|
|
60
|
+
class: "spicyCircularTrack",
|
|
61
|
+
"stroke-width": e.strokeWidth,
|
|
62
|
+
r: p.value,
|
|
63
|
+
cx: f.value,
|
|
64
|
+
cy: f.value
|
|
65
|
+
}, null, 8, S), a("circle", {
|
|
66
|
+
class: "spicyCircularProgress",
|
|
67
|
+
stroke: e.color,
|
|
68
|
+
"stroke-width": e.strokeWidth,
|
|
69
|
+
r: p.value,
|
|
70
|
+
cx: f.value,
|
|
71
|
+
cy: f.value,
|
|
72
|
+
style: u(_.value)
|
|
73
|
+
}, null, 12, C)], 8, x)), e.showLabel ? (d(), i("div", w, h(s.value) + "%", 1)) : r("", !0)])), m(n.$slots, "default")], 64));
|
|
74
|
+
}
|
|
75
|
+
}), E = { class: "spicyDataTable" }, D = { class: "spicyDataTableContainer" }, O = { class: "spicyDataTableTable" }, k = { class: "spicyDataTableHeader" }, A = ["onClick"], j = { class: "headerText" }, M = {
|
|
76
|
+
key: 0,
|
|
77
|
+
class: "sortIcon"
|
|
78
|
+
}, N = { class: "spicyDataTableBody" }, P = ["onClick"], F = {
|
|
79
|
+
key: 0,
|
|
80
|
+
class: "spicyDataTableLoading"
|
|
81
|
+
}, I = {
|
|
82
|
+
key: 1,
|
|
83
|
+
class: "spicyDataTablePagination"
|
|
84
|
+
}, L = { class: "paginationInfo" }, R = { class: "paginationControls" }, z = { class: "paginationPerPage" }, B = ["value"], V = ["value"], H = /* @__PURE__ */ c({
|
|
85
|
+
__name: "SpicyDataTable",
|
|
86
|
+
props: {
|
|
87
|
+
headers: {},
|
|
88
|
+
items: {},
|
|
89
|
+
itemKey: { default: "id" },
|
|
90
|
+
itemsPerPage: { default: 10 },
|
|
91
|
+
page: { default: 1 },
|
|
92
|
+
loading: {
|
|
93
|
+
type: Boolean,
|
|
94
|
+
default: !1
|
|
95
|
+
},
|
|
96
|
+
serverItemsLength: {},
|
|
97
|
+
showPagination: {
|
|
98
|
+
type: Boolean,
|
|
99
|
+
default: !0
|
|
100
|
+
},
|
|
101
|
+
sortable: {
|
|
102
|
+
type: Boolean,
|
|
103
|
+
default: !0
|
|
104
|
+
},
|
|
105
|
+
fixedRowHeight: { default: "auto" }
|
|
106
|
+
},
|
|
107
|
+
emits: [
|
|
108
|
+
"update:page",
|
|
109
|
+
"update:itemsPerPage",
|
|
110
|
+
"click:row"
|
|
111
|
+
],
|
|
112
|
+
setup(c, { emit: _ }) {
|
|
113
|
+
let v = _, y = c, b = f(""), x = f(!1), S = f(y.page), C = [
|
|
114
|
+
5,
|
|
115
|
+
10,
|
|
116
|
+
25,
|
|
117
|
+
50,
|
|
118
|
+
100
|
|
119
|
+
], w = n(() => {
|
|
120
|
+
if (!b.value || !y.sortable) return y.items;
|
|
121
|
+
let e = [...y.items].sort((e, t) => {
|
|
122
|
+
let n = e[b.value], r = t[b.value];
|
|
123
|
+
return n === r ? 0 : n == null ? 1 : r == null ? -1 : typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r));
|
|
124
|
+
});
|
|
125
|
+
return x.value ? e.reverse() : e;
|
|
126
|
+
}), H = n(() => y.serverItemsLength || w.value.length), U = n(() => Math.ceil(H.value / y.itemsPerPage)), W = n(() => {
|
|
127
|
+
let e = (S.value - 1) * y.itemsPerPage, t = e + y.itemsPerPage;
|
|
128
|
+
return w.value.slice(e, t);
|
|
129
|
+
}), G = n(() => `${(S.value - 1) * y.itemsPerPage + 1}-${Math.min(S.value * y.itemsPerPage, H.value)} of ${H.value}`), K = (e) => {
|
|
130
|
+
e.sortable === !1 || !y.sortable || (b.value === e.value ? x.value = !x.value : (b.value = e.value, x.value = !1));
|
|
131
|
+
}, q = (e, t) => {
|
|
132
|
+
v("click:row", e, t);
|
|
133
|
+
}, J = () => {
|
|
134
|
+
S.value > 1 && (S.value--, v("update:page", S.value));
|
|
135
|
+
}, Y = () => {
|
|
136
|
+
S.value < U.value && (S.value++, v("update:page", S.value));
|
|
137
|
+
}, X = (e) => {
|
|
138
|
+
let t = e.target;
|
|
139
|
+
v("update:itemsPerPage", Number(t.value)), S.value = 1, v("update:page", 1);
|
|
140
|
+
};
|
|
141
|
+
return g(() => y.page, (e) => {
|
|
142
|
+
S.value = e;
|
|
143
|
+
}), (n, f) => (d(), i("div", E, [
|
|
144
|
+
a("div", D, [a("table", O, [a("thead", k, [a("tr", null, [(d(!0), i(t, null, p(c.headers, (e) => (d(), i("th", {
|
|
145
|
+
key: e.value,
|
|
146
|
+
class: l([
|
|
147
|
+
"spicyDataTableCell",
|
|
148
|
+
"spicyDataTableHeaderCell",
|
|
149
|
+
e.align || "left",
|
|
150
|
+
{ sortable: e.sortable !== !1 && c.sortable }
|
|
151
|
+
]),
|
|
152
|
+
onClick: (t) => K(e)
|
|
153
|
+
}, [a("span", j, h(e.text), 1), e.sortable !== !1 && c.sortable && b.value === e.value ? (d(), i("span", M, h(x.value ? "▼" : "▲"), 1)) : r("", !0)], 10, A))), 128))])]), a("tbody", N, [(d(!0), i(t, null, p(W.value, (e, r) => (d(), i("tr", {
|
|
154
|
+
key: e[c.itemKey],
|
|
155
|
+
class: l(["spicyDataTableRow", { clickable: n.$attrs["onClick:row"] }]),
|
|
156
|
+
style: u({ height: c.fixedRowHeight }),
|
|
157
|
+
onClick: (t) => q(e, t)
|
|
158
|
+
}, [(d(!0), i(t, null, p(c.headers, (t) => (d(), i("td", {
|
|
159
|
+
key: t.value,
|
|
160
|
+
class: l(["spicyDataTableCell", t.align || "left"])
|
|
161
|
+
}, [m(n.$slots, `item.${t.value}`, {
|
|
162
|
+
item: e,
|
|
163
|
+
index: r
|
|
164
|
+
}, () => [o(h(e[t.value]), 1)])], 2))), 128))], 14, P))), 128))])])]),
|
|
165
|
+
c.loading ? (d(), i("div", F, [m(n.$slots, "loading", {}, () => [s(T, {
|
|
166
|
+
value: 0,
|
|
167
|
+
type: "circular",
|
|
168
|
+
size: 60
|
|
169
|
+
})])])) : r("", !0),
|
|
170
|
+
c.showPagination ? (d(), i("div", I, [
|
|
171
|
+
a("div", L, [a("span", null, h(G.value), 1)]),
|
|
172
|
+
a("div", R, [s(e, {
|
|
173
|
+
disabled: S.value === 1,
|
|
174
|
+
onClick: J,
|
|
175
|
+
text: "Previous",
|
|
176
|
+
size: "small"
|
|
177
|
+
}, null, 8, ["disabled"]), s(e, {
|
|
178
|
+
disabled: S.value === U.value,
|
|
179
|
+
onClick: Y,
|
|
180
|
+
text: "Next",
|
|
181
|
+
size: "small"
|
|
182
|
+
}, null, 8, ["disabled"])]),
|
|
183
|
+
a("div", z, [a("select", {
|
|
184
|
+
value: c.itemsPerPage,
|
|
185
|
+
onChange: X,
|
|
186
|
+
class: "itemsPerPageSelect"
|
|
187
|
+
}, [(d(), i(t, null, p(C, (e) => a("option", {
|
|
188
|
+
key: e,
|
|
189
|
+
value: e
|
|
190
|
+
}, h(e) + " / page ", 9, V)), 64))], 40, B)])
|
|
191
|
+
])) : r("", !0)
|
|
192
|
+
]));
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
//#endregion
|
|
196
|
+
export { T as n, _ as r, H as t };
|
|
@@ -1,76 +1,4 @@
|
|
|
1
|
-
import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeStyle as o, openBlock as s, renderSlot as c, toDisplayString as l } from "vue";
|
|
2
1
|
//#region src/components/SpicyProgress/SpicyProgress.css?inline
|
|
3
|
-
var
|
|
4
|
-
key: 0,
|
|
5
|
-
class: "spicyProgress"
|
|
6
|
-
}, f = {
|
|
7
|
-
key: 0,
|
|
8
|
-
class: "spicyProgressLabel"
|
|
9
|
-
}, p = {
|
|
10
|
-
key: 1,
|
|
11
|
-
class: "spicyProgressCircular"
|
|
12
|
-
}, m = ["width", "height"], h = [
|
|
13
|
-
"stroke-width",
|
|
14
|
-
"r",
|
|
15
|
-
"cx",
|
|
16
|
-
"cy"
|
|
17
|
-
], g = [
|
|
18
|
-
"stroke",
|
|
19
|
-
"stroke-width",
|
|
20
|
-
"r",
|
|
21
|
-
"cx",
|
|
22
|
-
"cy"
|
|
23
|
-
], _ = {
|
|
24
|
-
key: 0,
|
|
25
|
-
class: "spicyCircularLabel"
|
|
26
|
-
}, v = /* @__PURE__ */ a({
|
|
27
|
-
__name: "SpicyProgress",
|
|
28
|
-
props: {
|
|
29
|
-
value: {},
|
|
30
|
-
max: { default: 100 },
|
|
31
|
-
color: { default: "#4caf50" },
|
|
32
|
-
height: { default: "8px" },
|
|
33
|
-
strokeWidth: { default: 8 },
|
|
34
|
-
type: { default: "linear" },
|
|
35
|
-
showLabel: {
|
|
36
|
-
type: Boolean,
|
|
37
|
-
default: !1
|
|
38
|
-
},
|
|
39
|
-
size: { default: 100 }
|
|
40
|
-
},
|
|
41
|
-
setup(a) {
|
|
42
|
-
let u = a, v = t(() => Math.round(u.value / u.max * 100)), y = t(() => u.type === "linear"), b = t(() => ({
|
|
43
|
-
width: `${v.value}%`,
|
|
44
|
-
backgroundColor: u.color,
|
|
45
|
-
height: u.height
|
|
46
|
-
})), x = t(() => u.size / 2), S = t(() => (u.size - u.strokeWidth) / 2), C = t(() => 2 * Math.PI * S.value), w = t(() => ({
|
|
47
|
-
strokeDasharray: `${C.value} ${C.value}`,
|
|
48
|
-
strokeDashoffset: `${C.value - v.value / 100 * C.value}`,
|
|
49
|
-
transition: "stroke-dashoffset 400ms ease"
|
|
50
|
-
}));
|
|
51
|
-
return (t, u) => (s(), r(e, null, [y.value ? (s(), r("div", d, [i("div", {
|
|
52
|
-
class: "spicyProgressBar",
|
|
53
|
-
style: o(b.value)
|
|
54
|
-
}, null, 4), a.showLabel ? (s(), r("div", f, l(v.value) + "%", 1)) : n("", !0)])) : (s(), r("div", p, [(s(), r("svg", {
|
|
55
|
-
class: "spicyCircularSvg",
|
|
56
|
-
width: a.size,
|
|
57
|
-
height: a.size
|
|
58
|
-
}, [i("circle", {
|
|
59
|
-
class: "spicyCircularTrack",
|
|
60
|
-
"stroke-width": a.strokeWidth,
|
|
61
|
-
r: S.value,
|
|
62
|
-
cx: x.value,
|
|
63
|
-
cy: x.value
|
|
64
|
-
}, null, 8, h), i("circle", {
|
|
65
|
-
class: "spicyCircularProgress",
|
|
66
|
-
stroke: a.color,
|
|
67
|
-
"stroke-width": a.strokeWidth,
|
|
68
|
-
r: S.value,
|
|
69
|
-
cx: x.value,
|
|
70
|
-
cy: x.value,
|
|
71
|
-
style: o(w.value)
|
|
72
|
-
}, null, 12, g)], 8, m)), a.showLabel ? (s(), r("div", _, l(v.value) + "%", 1)) : n("", !0)])), c(t.$slots, "default")], 64));
|
|
73
|
-
}
|
|
74
|
-
});
|
|
2
|
+
var e = ".spicyProgress{background-color:#e0e0e0;border-radius:8px;width:100%;position:relative;overflow:hidden}.spicyProgressBar{transition:width .4s}.spicyProgressLabel{color:#fff;font-size:12px;position:absolute;top:0;right:10px}.spicyProgressCircular{justify-content:center;align-items:center;display:flex;position:relative}.spicyCircularSvg{background-color:#00000080;border-radius:50%;transform:rotate(-90deg)}.spicyCircularTrack{fill:none;stroke:#e0e0e0}.spicyCircularProgress{fill:none;transition:stroke-dashoffset .4s}.spicyCircularLabel{font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}";
|
|
75
3
|
//#endregion
|
|
76
|
-
export {
|
|
4
|
+
export { e as t };
|
package/dist/spicykatsu.es.js
CHANGED
|
@@ -2,22 +2,23 @@ import { n as e, t } from "./lib/SpicyAccordion/SpicyAccordion.js";
|
|
|
2
2
|
import { n, t as r } from "./lib/SpicyAlert/SpicyAlert.js";
|
|
3
3
|
import { n as i, t as a } from "./lib/SpicyBtn/SpicyBtn.js";
|
|
4
4
|
import { n as o, t as s } from "./lib/SpicyCarousel/SpicyCarousel.js";
|
|
5
|
-
import { n as c,
|
|
6
|
-
import { n as
|
|
7
|
-
import { n as
|
|
8
|
-
import { n as
|
|
9
|
-
import { n as
|
|
10
|
-
import {
|
|
11
|
-
import { n as b, t as x } from "./lib/
|
|
12
|
-
import { n as S, t as C } from "./lib/
|
|
13
|
-
import { n as w, t as T } from "./lib/
|
|
14
|
-
import { n as E, t as D } from "./lib/
|
|
15
|
-
import { n as O, t as k } from "./lib/
|
|
16
|
-
import { n as A, t as j } from "./lib/
|
|
17
|
-
import { n as M,
|
|
18
|
-
import {
|
|
5
|
+
import { n as c, r as l, t as u } from "./lib/SpicyDataTable/SpicyDataTable.js";
|
|
6
|
+
import { n as d, t as f } from "./lib/SpicyDialog/SpicyDialog.js";
|
|
7
|
+
import { n as p, t as m } from "./lib/SpicyDropdown/SpicyDropdown.js";
|
|
8
|
+
import { n as h, t as g } from "./lib/SpicyFileInput/SpicyFileInput.js";
|
|
9
|
+
import { n as _, t as v } from "./lib/SpicyModal/SpicyModal.js";
|
|
10
|
+
import { t as y } from "./lib/SpicyProgress/SpicyProgress.js";
|
|
11
|
+
import { n as b, t as x } from "./lib/SpicySheet/SpicySheet.js";
|
|
12
|
+
import { n as S, t as C } from "./lib/SpicySlider/SpicySlider.js";
|
|
13
|
+
import { n as w, t as T } from "./lib/SpicyTabs/SpicyTabs.js";
|
|
14
|
+
import { n as E, t as D } from "./lib/SpicyTextArea/SpicyTextArea.js";
|
|
15
|
+
import { n as O, t as k } from "./lib/SpicyTextField/SpicyTextField.js";
|
|
16
|
+
import { n as A, t as j } from "./lib/SpicyToggle/SpicyToggle.js";
|
|
17
|
+
import { n as M, t as N } from "./lib/SpicyTooltip/SpicyTooltip.js";
|
|
18
|
+
import { n as P, r as F, t as I } from "./lib/SpicyTree/SpicyTree.js";
|
|
19
|
+
import { t as L } from "./lib/SpicyDivider/SpicyDivider.js";
|
|
19
20
|
//#region src/styles/main.css?inline
|
|
20
|
-
var
|
|
21
|
+
var R = ":root{--skBgColor:#28292a;--skBgSecondaryColor:#424344;--skBorderColor:#515353;--skPrimaryColor:#811faf;--skSecondaryColor:#0066b3;--skAccentColor:#004a77;--skHoverColor:#656769;--skTextColor:#ddd;--skFontFamily:\"Helvetica Neue\", Helvetica, Arial, sans-serif;--skFontSize:1rem;--skFontWeight:500;--skBorderRadius:4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active,.spicyLink:focus{color:var(--skPrimaryColor)}.spicyLink:disabled{opacity:.3}", z = ".spicyRipple{pointer-events:none;z-index:1;background:currentColor;border-radius:50%;animation:.6s linear spicy-ripple-animation;position:absolute;transform:scale(0)}@keyframes spicy-ripple-animation{to{opacity:0;transform:scale(4)}}", B = {
|
|
21
22
|
mounted(e, t) {
|
|
22
23
|
let { axis: n } = t.value || {};
|
|
23
24
|
e.style.position = "relative", e.style.cursor = "move";
|
|
@@ -51,7 +52,7 @@ var I = ":root{--skBgColor:#28292a;--skBgSecondaryColor:#424344;--skBorderColor:
|
|
|
51
52
|
let t = e;
|
|
52
53
|
t._cleanup && t._cleanup();
|
|
53
54
|
}
|
|
54
|
-
},
|
|
55
|
+
}, V = {
|
|
55
56
|
beforeMount(e) {
|
|
56
57
|
e.style.position = "relative", e.style.overflow = "hidden";
|
|
57
58
|
let t = (t, n) => {
|
|
@@ -83,63 +84,65 @@ var I = ":root{--skBgColor:#28292a;--skBgSecondaryColor:#424344;--skBorderColor:
|
|
|
83
84
|
let t = e;
|
|
84
85
|
t._rippleCleanup && t._rippleCleanup();
|
|
85
86
|
}
|
|
86
|
-
},
|
|
87
|
+
}, H = {
|
|
87
88
|
SpicyAccordion: t,
|
|
88
89
|
SpicyAlert: r,
|
|
89
90
|
SpicyBtn: a,
|
|
90
91
|
SpicyCarousel: s,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
92
|
+
SpicyDataTable: u,
|
|
93
|
+
SpicyDialog: f,
|
|
94
|
+
SpicyDivider: L,
|
|
95
|
+
SpicyDropdown: m,
|
|
96
|
+
SpicyFileInput: g,
|
|
97
|
+
SpicyModal: v,
|
|
98
|
+
SpicyProgress: c,
|
|
99
|
+
SpicySheet: x,
|
|
100
|
+
SpicySlider: C,
|
|
101
|
+
SpicyTabs: T,
|
|
102
|
+
SpicyTextArea: D,
|
|
103
|
+
SpicyTextField: k,
|
|
104
|
+
SpicyToggle: j,
|
|
105
|
+
SpicyTooltip: N,
|
|
106
|
+
SpicyTree: I,
|
|
107
|
+
SpicyTreeNode: P
|
|
108
|
+
}, U = {
|
|
109
|
+
spicyDrag: B,
|
|
110
|
+
spicyRipple: V
|
|
111
|
+
}, W = { install(t, r = {}) {
|
|
112
|
+
let { useComponents: a = !0, useStyles: s = !0, useDirectives: c = !0 } = r;
|
|
113
|
+
if (a && Object.entries(H).forEach(([e, n]) => {
|
|
112
114
|
t.component(e, n);
|
|
113
115
|
}), s) {
|
|
114
116
|
let t = document.createElement("style");
|
|
115
117
|
t.id = "SpicyStyles", t.textContent = [
|
|
116
|
-
|
|
118
|
+
R,
|
|
117
119
|
e,
|
|
118
120
|
n,
|
|
119
121
|
i,
|
|
120
122
|
o,
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
123
|
+
l,
|
|
124
|
+
d,
|
|
125
|
+
p,
|
|
126
|
+
h,
|
|
127
|
+
_,
|
|
128
|
+
y,
|
|
127
129
|
b,
|
|
128
130
|
S,
|
|
129
131
|
w,
|
|
130
132
|
E,
|
|
131
133
|
O,
|
|
132
134
|
A,
|
|
133
|
-
|
|
135
|
+
M,
|
|
136
|
+
F
|
|
134
137
|
].join("\n"), document.head.appendChild(t);
|
|
135
138
|
}
|
|
136
|
-
if (
|
|
137
|
-
Object.entries(
|
|
139
|
+
if (c) {
|
|
140
|
+
Object.entries(U).forEach(([e, n]) => {
|
|
138
141
|
t.directive(e, n);
|
|
139
142
|
});
|
|
140
143
|
let e = document.createElement("style");
|
|
141
|
-
e.id = "SpicyRippleStyles", e.textContent =
|
|
144
|
+
e.id = "SpicyRippleStyles", e.textContent = z, document.head.appendChild(e);
|
|
142
145
|
}
|
|
143
146
|
} };
|
|
144
147
|
//#endregion
|
|
145
|
-
export { t as SpicyAccordion, r as SpicyAlert, a as SpicyBtn, s as SpicyCarousel,
|
|
148
|
+
export { t as SpicyAccordion, r as SpicyAlert, a as SpicyBtn, s as SpicyCarousel, u as SpicyDataTable, f as SpicyDialog, L as SpicyDivider, m as SpicyDropdown, g as SpicyFileInput, W as SpicyKatsu, v as SpicyModal, c as SpicyProgress, x as SpicySheet, C as SpicySlider, T as SpicyTabs, D as SpicyTextArea, k as SpicyTextField, j as SpicyToggle, N as SpicyTooltip, I as SpicyTree, P as SpicyTreeNode, B as spicyDrag, V as spicyRipple };
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.spicyProgress{background-color:#e0e0e0;border-radius:8px;width:100%;position:relative;overflow:hidden}.spicyProgressBar{transition:width .4s}.spicyProgressLabel{color:#fff;font-size:12px;position:absolute;top:0;right:10px}.spicyProgressCircular{justify-content:center;align-items:center;display:flex;position:relative}.spicyCircularSvg{background-color:#00000080;border-radius:50%;transform:rotate(-90deg)}.spicyCircularTrack{fill:none;stroke:#e0e0e0}.spicyCircularProgress{fill:none;transition:stroke-dashoffset .4s}.spicyCircularLabel{font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
|