veloce-vue 0.36.0 → 0.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button.css +1 -1
- package/components/Button.vue.js +112 -5
- package/components/Button.vue3.js +5 -0
- package/components/Drawer.vue.js +19 -17
- package/components/JsonRenderer.vue.js +8 -7
- package/components/Layout.vue.js +19 -17
- package/components/MiniEditor.vue.js +24 -23
- package/components/Modal.vue.js +17 -15
- package/components/Select.vue.js +39 -37
- package/components/typography/Code.vue.js +14 -12
- package/package.json +1 -1
- package/style.css +1 -1
- package/ui.js +46 -44
- package/components/Button.vue2.js +0 -114
package/components/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.veloce-button-neumorphic{position:relative}.veloce-button-neumorphic:after{content:" ";position:absolute;inset:-1px;border-top:inset;border-color:#ffffff20;border-top-width:2px;border-radius:var(--radius)}
|
package/components/Button.vue.js
CHANGED
|
@@ -1,7 +1,114 @@
|
|
|
1
|
-
import o from "
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
const p = /* @__PURE__ */
|
|
1
|
+
import { defineComponent as u, computed as h, createElementBlock as t, openBlock as r, normalizeClass as a, renderSlot as v, Fragment as c, createCommentVNode as n, createBlock as i, toDisplayString as x, unref as o } from "vue";
|
|
2
|
+
import k from "../icons/Loading.vue.js";
|
|
3
|
+
import s from "./icon/Icon.vue.js";
|
|
4
|
+
const p = ["disabled"], B = /* @__PURE__ */ u({
|
|
5
|
+
__name: "Button",
|
|
6
|
+
props: {
|
|
7
|
+
label: { type: String, default: "" },
|
|
8
|
+
loading: { type: Boolean, default: !1 },
|
|
9
|
+
disabled: { type: Boolean, default: !1 },
|
|
10
|
+
variant: { type: String, default: "solid" },
|
|
11
|
+
severity: { type: String, default: "primary" },
|
|
12
|
+
icon: { type: Object, default: () => null },
|
|
13
|
+
iconClass: { type: String, default: "" },
|
|
14
|
+
iconPosition: { type: String, default: "right" },
|
|
15
|
+
rounded: { type: Boolean, default: !1 },
|
|
16
|
+
size: { type: String, default: "md" },
|
|
17
|
+
fontWeight: { type: String, default: "medium" },
|
|
18
|
+
neumorphic: { type: Boolean, default: !1 },
|
|
19
|
+
highlighted: { type: Boolean, default: !1 }
|
|
20
|
+
},
|
|
21
|
+
setup(g) {
|
|
22
|
+
const e = g, d = {
|
|
23
|
+
primary: {
|
|
24
|
+
ghost: "bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-neutral-800",
|
|
25
|
+
outlined: "border-primary! text-primary hover:bg-primary hover:text-inverted disabled:hover:text-primary disabled:hover:bg-primary disabled:hover:text-inverted",
|
|
26
|
+
link: "text-primary hover:underline",
|
|
27
|
+
soft: "bg-primary-light text-primary hover:bg-primary-light/80 dark:bg-primary/10 dark:text-primary dark:hover:bg-primary/20",
|
|
28
|
+
solid: "bg-primary text-inverted hover:bg-primary/70 disabled:hover:bg-primary dark:hover:bg-primary/80",
|
|
29
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
30
|
+
},
|
|
31
|
+
secondary: {
|
|
32
|
+
ghost: "bg-transparent text-secondary hover:bg-secondary/10 dark:hover:bg-neutral-800",
|
|
33
|
+
outlined: "border-secondary! text-secondary hover:bg-secondary hover:text-inverted disabled:hover:text-secondary disabled:hover:bg-secondary disabled:hover:text-inverted",
|
|
34
|
+
link: "text-secondary hover:underline",
|
|
35
|
+
soft: "bg-secondary-light text-secondary hover:bg-secondary-light/80 dark:bg-secondary/10 dark:text-secondary dark:hover:bg-secondary/20",
|
|
36
|
+
solid: "bg-secondary text-inverted hover:bg-secondary/70 disabled:hover:bg-secondary dark:hover:bg-secondary/80",
|
|
37
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
38
|
+
},
|
|
39
|
+
success: {
|
|
40
|
+
ghost: "bg-transparent text-success hover:bg-success/10 dark:hover:bg-neutral-800",
|
|
41
|
+
outlined: "border-success! text-success hover:bg-success hover:text-inverted disabled:hover:text-success disabled:hover:bg-success disabled:hover:text-inverted",
|
|
42
|
+
link: "text-success hover:underline",
|
|
43
|
+
soft: "bg-success-light text-success hover:bg-success-light/80 dark:bg-success/10 dark:text-success dark:hover:bg-success/20",
|
|
44
|
+
solid: "bg-success text-inverted hover:bg-success/70 disabled:hover:bg-success dark:hover:bg-success/80",
|
|
45
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
46
|
+
},
|
|
47
|
+
info: {
|
|
48
|
+
ghost: "bg-transparent text-info hover:bg-info/10 dark:hover:bg-neutral-800",
|
|
49
|
+
outlined: "border-info! text-info hover:bg-info hover:text-inverted disabled:hover:text-info disabled:hover:bg-info disabled:hover:text-inverted",
|
|
50
|
+
link: "text-info hover:underline",
|
|
51
|
+
soft: "bg-info-light text-info hover:bg-info-light/80 dark:bg-info/10 dark:text-info dark:hover:bg-info/20",
|
|
52
|
+
solid: "bg-info text-inverted hover:bg-info/70 disabled:hover:bg-info dark:hover:bg-info/80",
|
|
53
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
54
|
+
},
|
|
55
|
+
warning: {
|
|
56
|
+
ghost: "bg-transparent text-warning hover:bg-warning/10 dark:hover:bg-neutral-800",
|
|
57
|
+
outlined: "border-warning! text-warning hover:bg-warning hover:text-inverted disabled:hover:text-warning disabled:hover:bg-warning disabled:hover:text-inverted",
|
|
58
|
+
link: "text-warning hover:underline",
|
|
59
|
+
soft: "bg-warning-light text-warning hover:bg-warning-light/80 dark:bg-warning/10 dark:text-warning dark:hover:bg-warning/20",
|
|
60
|
+
solid: "bg-warning text-inverted hover:bg-warning/70 disabled:hover:bg-warning dark:hover:bg-warning/80",
|
|
61
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
62
|
+
},
|
|
63
|
+
error: {
|
|
64
|
+
ghost: "bg-transparent text-error hover:bg-error/10 dark:hover:bg-neutral-800",
|
|
65
|
+
outlined: "border-error! text-error hover:bg-error hover:text-inverted disabled:hover:text-error disabled:hover:bg-error disabled:hover:text-inverted",
|
|
66
|
+
link: "text-error hover:underline",
|
|
67
|
+
soft: "bg-error-light text-error hover:bg-error-light/80 dark:bg-error/10 dark:text-error dark:hover:bg-error/20",
|
|
68
|
+
solid: "bg-error text-inverted hover:bg-error/70 disabled:hover:bg-error dark:hover:bg-error/80",
|
|
69
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
70
|
+
},
|
|
71
|
+
neutral: {
|
|
72
|
+
ghost: "bg-transparent text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
73
|
+
outlined: "border-neutral-300! dark:border-neutral-700! text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800 disabled:hover:text-neutral-700 disabled:hover:text-inverted",
|
|
74
|
+
link: "text-neutral-700 dark:text-neutral-300 hover:underline",
|
|
75
|
+
soft: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700",
|
|
76
|
+
solid: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-100/80",
|
|
77
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
78
|
+
}
|
|
79
|
+
}, b = h(() => d[e.severity]?.[e.variant] || d.primary.solid);
|
|
80
|
+
return (l, y) => (r(), t("button", {
|
|
81
|
+
type: "button",
|
|
82
|
+
disabled: e.disabled || e.loading,
|
|
83
|
+
class: a([[
|
|
84
|
+
b.value,
|
|
85
|
+
{ "rounded-full": e.rounded },
|
|
86
|
+
{ "justify-center": !e.icon },
|
|
87
|
+
{ "px-2 py-1 text-sm": e.size === "sm", "px-2.5 py-1.5 text-sm": e.size === "md", "px-3 py-2 text-base": e.size === "lg", "px-3.5 py-2.5 text-lg": e.size === "xl" },
|
|
88
|
+
{ "font-normal": e.fontWeight === "normal", "font-medium": e.fontWeight === "medium", "font-semibold": e.fontWeight === "semibold", "font-bold": e.fontWeight === "bold" },
|
|
89
|
+
{ "veloce-button-neumorphic": e.neumorphic },
|
|
90
|
+
{ "bg-highlight": e.highlighted }
|
|
91
|
+
], "flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"])
|
|
92
|
+
}, [
|
|
93
|
+
l.$slots.default ? v(l.$slots, "default", { key: 0 }) : (r(), t(c, { key: 1 }, [
|
|
94
|
+
e.label ? (r(), t("span", {
|
|
95
|
+
key: 0,
|
|
96
|
+
class: a({ "order-2": e.iconPosition === "left" })
|
|
97
|
+
}, x(e.label), 3)) : n("", !0),
|
|
98
|
+
e.icon && !e.loading ? (r(), i(o(s), {
|
|
99
|
+
key: 1,
|
|
100
|
+
icon: e.icon,
|
|
101
|
+
class: a([e.iconClass, "size-5 text-current duration-200"])
|
|
102
|
+
}, null, 8, ["icon", "class"])) : n("", !0),
|
|
103
|
+
e.loading ? (r(), i(o(s), {
|
|
104
|
+
key: 2,
|
|
105
|
+
icon: o(k),
|
|
106
|
+
class: "size-5 text-current duration-200"
|
|
107
|
+
}, null, 8, ["icon"])) : n("", !0)
|
|
108
|
+
], 64))
|
|
109
|
+
], 10, p));
|
|
110
|
+
}
|
|
111
|
+
});
|
|
5
112
|
export {
|
|
6
|
-
|
|
113
|
+
B as default
|
|
7
114
|
};
|
package/components/Drawer.vue.js
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { defineComponent as v, mergeModels as h, useModel as g, computed as n, createElementBlock as d, openBlock as u, Fragment as w, createElementVNode as o, renderSlot as i, normalizeClass as f, createCommentVNode as x, createVNode as k, toDisplayString as
|
|
1
|
+
import { defineComponent as v, mergeModels as h, useModel as g, computed as n, createElementBlock as d, openBlock as u, Fragment as w, createElementVNode as o, renderSlot as i, normalizeClass as f, createCommentVNode as x, createVNode as k, toDisplayString as m, unref as c } from "vue";
|
|
2
|
+
/* empty css */
|
|
2
3
|
import y from "../icons/Close.vue.js";
|
|
3
4
|
import "motion-v";
|
|
4
5
|
import C from "./Button.vue.js";
|
|
6
|
+
/* empty css */
|
|
5
7
|
import "@vueuse/core";
|
|
6
8
|
/* empty css */
|
|
7
|
-
const
|
|
9
|
+
const $ = { class: "border-b p-2" }, V = { class: "flex items-center justify-between gap-2" }, S = { class: "text-[0.95em] font-medium" }, z = { class: "text-muted text-sm" }, B = { class: "size-full overflow-auto p-2" }, F = {
|
|
8
10
|
key: 0,
|
|
9
11
|
class: "border-t p-2"
|
|
10
|
-
},
|
|
12
|
+
}, A = /* @__PURE__ */ v({
|
|
11
13
|
__name: "Drawer",
|
|
12
14
|
props: /* @__PURE__ */ h({
|
|
13
15
|
direction: { type: String, default: "bottom", options: ["left", "bottom", "right"] },
|
|
@@ -21,9 +23,9 @@ const V = { class: "border-b p-2" }, $ = { class: "flex items-center justify-bet
|
|
|
21
23
|
}),
|
|
22
24
|
emits: ["update:modelValue"],
|
|
23
25
|
setup(s) {
|
|
24
|
-
const
|
|
26
|
+
const r = s, t = g(s, "modelValue"), p = n(() => {
|
|
25
27
|
let e = "";
|
|
26
|
-
switch (
|
|
28
|
+
switch (r.direction) {
|
|
27
29
|
case "left":
|
|
28
30
|
e = t.value ? "fixed top-0 left-0 bottom-0" : "fixed top-0 -left-full bottom-0";
|
|
29
31
|
break;
|
|
@@ -39,7 +41,7 @@ const V = { class: "border-b p-2" }, $ = { class: "flex items-center justify-bet
|
|
|
39
41
|
return e;
|
|
40
42
|
}), b = n(() => {
|
|
41
43
|
let e = "";
|
|
42
|
-
switch (
|
|
44
|
+
switch (r.direction) {
|
|
43
45
|
case "left":
|
|
44
46
|
e = "w-full max-w-[22.5rem]";
|
|
45
47
|
break;
|
|
@@ -54,27 +56,27 @@ const V = { class: "border-b p-2" }, $ = { class: "flex items-center justify-bet
|
|
|
54
56
|
});
|
|
55
57
|
return (e, l) => (u(), d(w, null, [
|
|
56
58
|
o("div", {
|
|
57
|
-
onClick: l[0] || (l[0] = (
|
|
59
|
+
onClick: l[0] || (l[0] = (a) => t.value = !t.value)
|
|
58
60
|
}, [
|
|
59
61
|
i(e.$slots, "default")
|
|
60
62
|
]),
|
|
61
63
|
o("div", {
|
|
62
64
|
class: f([[p.value, b.value], "bg-background z-51 flex flex-col justify-between duration-300"])
|
|
63
65
|
}, [
|
|
64
|
-
o("div",
|
|
65
|
-
o("div",
|
|
66
|
-
o("h4",
|
|
67
|
-
k(
|
|
68
|
-
icon:
|
|
66
|
+
o("div", $, [
|
|
67
|
+
o("div", V, [
|
|
68
|
+
o("h4", S, m(s.title), 1),
|
|
69
|
+
k(c(C), {
|
|
70
|
+
icon: c(y),
|
|
69
71
|
class: "p-1!",
|
|
70
72
|
circle: "",
|
|
71
73
|
variant: "ghost",
|
|
72
|
-
onClick: l[1] || (l[1] = (
|
|
74
|
+
onClick: l[1] || (l[1] = (a) => t.value = !1)
|
|
73
75
|
}, null, 8, ["icon"])
|
|
74
76
|
]),
|
|
75
|
-
o("p",
|
|
77
|
+
o("p", z, m(s.description), 1)
|
|
76
78
|
]),
|
|
77
|
-
o("div",
|
|
79
|
+
o("div", B, [
|
|
78
80
|
i(e.$slots, "content")
|
|
79
81
|
]),
|
|
80
82
|
s.showFooter ? (u(), d("div", F, [
|
|
@@ -83,11 +85,11 @@ const V = { class: "border-b p-2" }, $ = { class: "flex items-center justify-bet
|
|
|
83
85
|
], 2),
|
|
84
86
|
o("div", {
|
|
85
87
|
class: f([t.value ? "opacity-100" : "pointer-events-none", "fixed inset-0 z-50 bg-black/40 opacity-0 duration-200"]),
|
|
86
|
-
onClick: l[2] || (l[2] = (
|
|
88
|
+
onClick: l[2] || (l[2] = (a) => t.value = !1)
|
|
87
89
|
}, null, 2)
|
|
88
90
|
], 64));
|
|
89
91
|
}
|
|
90
92
|
});
|
|
91
93
|
export {
|
|
92
|
-
|
|
94
|
+
A as default
|
|
93
95
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as _, createElementBlock as m, openBlock as r, Fragment as
|
|
1
|
+
import { defineComponent as _, createElementBlock as m, openBlock as r, Fragment as e, renderList as f, createBlock as n, resolveDynamicComponent as p, mergeProps as s, withCtx as c, createTextVNode as a, toDisplayString as l } from "vue";
|
|
2
2
|
import u from "./typography/Blockquote.vue.js";
|
|
3
3
|
import $ from "./typography/Code.vue.js";
|
|
4
4
|
import d from "./typography/H1.vue.js";
|
|
@@ -11,18 +11,19 @@ import b from "./typography/Label.vue.js";
|
|
|
11
11
|
import B from "./typography/List.vue.js";
|
|
12
12
|
import C from "./typography/P.vue.js";
|
|
13
13
|
import j from "./typography/Span.vue.js";
|
|
14
|
+
/* empty css */
|
|
14
15
|
import "motion-v";
|
|
15
16
|
/* empty css */
|
|
16
17
|
import "@vueuse/core";
|
|
17
18
|
import q from "./Message.vue.js";
|
|
18
19
|
/* empty css */
|
|
19
|
-
const v = { class: "*:first:mt-0 *:last:mb-0" },
|
|
20
|
+
const v = { class: "*:first:mt-0 *:last:mb-0" }, U = /* @__PURE__ */ _({
|
|
20
21
|
__name: "JsonRenderer",
|
|
21
22
|
props: {
|
|
22
23
|
json: { type: Array, required: !0 }
|
|
23
24
|
},
|
|
24
25
|
setup(i) {
|
|
25
|
-
const
|
|
26
|
+
const t = {
|
|
26
27
|
h1: d,
|
|
27
28
|
h2: h,
|
|
28
29
|
h3: k,
|
|
@@ -38,10 +39,10 @@ const v = { class: "*:first:mt-0 *:last:mb-0" }, Q = /* @__PURE__ */ _({
|
|
|
38
39
|
message: q
|
|
39
40
|
};
|
|
40
41
|
return (D, w) => (r(), m("div", v, [
|
|
41
|
-
(r(!0), m(
|
|
42
|
+
(r(!0), m(e, null, f(i.json, (o) => (r(), m(e, {
|
|
42
43
|
key: o.id
|
|
43
44
|
}, [
|
|
44
|
-
o.component === "message" ? (r(), n(p(
|
|
45
|
+
o.component === "message" ? (r(), n(p(t[o.component]), s({
|
|
45
46
|
key: 0,
|
|
46
47
|
ref_for: !0
|
|
47
48
|
}, o.props), {
|
|
@@ -49,7 +50,7 @@ const v = { class: "*:first:mt-0 *:last:mb-0" }, Q = /* @__PURE__ */ _({
|
|
|
49
50
|
a(l(o.props?.text), 1)
|
|
50
51
|
]),
|
|
51
52
|
_: 2
|
|
52
|
-
}, 1040)) : (r(), n(p(
|
|
53
|
+
}, 1040)) : (r(), n(p(t[o.component]), s({
|
|
53
54
|
key: 1,
|
|
54
55
|
ref_for: !0
|
|
55
56
|
}, o.props), null, 16))
|
|
@@ -58,5 +59,5 @@ const v = { class: "*:first:mt-0 *:last:mb-0" }, Q = /* @__PURE__ */ _({
|
|
|
58
59
|
}
|
|
59
60
|
});
|
|
60
61
|
export {
|
|
61
|
-
|
|
62
|
+
U as default
|
|
62
63
|
};
|
package/components/Layout.vue.js
CHANGED
|
@@ -1,42 +1,44 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as v, ref as n, onMounted as h, createElementBlock as b, openBlock as r, Fragment as _, createElementVNode as t, createVNode as u, renderSlot as a, unref as i, withCtx as c, createBlock as g, createCommentVNode as w, normalizeClass as d } from "vue";
|
|
2
|
+
/* empty css */
|
|
2
3
|
import x from "../icons/Hamburger.vue.js";
|
|
3
4
|
import { AnimatePresence as k, motion as C } from "motion-v";
|
|
4
5
|
import z from "./Button.vue.js";
|
|
6
|
+
/* empty css */
|
|
5
7
|
import { useWindowSize as S } from "@vueuse/core";
|
|
6
8
|
/* empty css */
|
|
7
|
-
const
|
|
9
|
+
const $ = { class: "flex h-14 items-center justify-between gap-4 border-b px-4" }, y = { class: "flex items-center gap-2" }, B = { class: "header-actions flex items-center gap-2" }, N = { class: "relative h-[calc(100dvh-3.5rem)] overflow-hidden" }, T = /* @__PURE__ */ v({
|
|
8
10
|
__name: "Layout",
|
|
9
11
|
emits: ["sidebar"],
|
|
10
12
|
setup(V, { emit: m }) {
|
|
11
|
-
const f = m, { width:
|
|
13
|
+
const f = m, { width: p } = S(), e = n(!1), s = n(!0);
|
|
12
14
|
h(() => {
|
|
13
15
|
setTimeout(() => {
|
|
14
|
-
s.value = !1,
|
|
16
|
+
s.value = !1, p.value > 992 && (e.value = !0);
|
|
15
17
|
}, 500);
|
|
16
18
|
});
|
|
17
|
-
const
|
|
19
|
+
const l = () => {
|
|
18
20
|
e.value = !e.value, f("sidebar", e.value);
|
|
19
21
|
};
|
|
20
|
-
return (o, E) => (r(), b(
|
|
21
|
-
t("header",
|
|
22
|
-
t("div",
|
|
23
|
-
u(
|
|
24
|
-
icon:
|
|
22
|
+
return (o, E) => (r(), b(_, null, [
|
|
23
|
+
t("header", $, [
|
|
24
|
+
t("div", y, [
|
|
25
|
+
u(i(z), {
|
|
26
|
+
icon: i(x),
|
|
25
27
|
iconClass: "size-6",
|
|
26
28
|
class: "p-1!",
|
|
27
29
|
variant: "soft",
|
|
28
|
-
onClick:
|
|
30
|
+
onClick: l
|
|
29
31
|
}, null, 8, ["icon"]),
|
|
30
32
|
a(o.$slots, "left-actions")
|
|
31
33
|
]),
|
|
32
|
-
t("div",
|
|
34
|
+
t("div", B, [
|
|
33
35
|
a(o.$slots, "right-actions")
|
|
34
36
|
])
|
|
35
37
|
]),
|
|
36
38
|
t("main", N, [
|
|
37
|
-
u(
|
|
39
|
+
u(i(k), null, {
|
|
38
40
|
default: c(() => [
|
|
39
|
-
e.value ? (r(),
|
|
41
|
+
e.value ? (r(), g(i(C).div, {
|
|
40
42
|
key: 0,
|
|
41
43
|
class: "bg-background absolute bottom-0 left-0 top-0 z-50 w-[240px] shrink-0 overflow-hidden border-r",
|
|
42
44
|
initial: s.value && e.value ? { x: 0 } : { x: -240 },
|
|
@@ -50,7 +52,7 @@ const B = { class: "flex h-14 items-center justify-between gap-4 border-b px-4"
|
|
|
50
52
|
default: c(() => [
|
|
51
53
|
a(o.$slots, "sidebar", {
|
|
52
54
|
showSidebar: e.value,
|
|
53
|
-
onClose:
|
|
55
|
+
onClose: l
|
|
54
56
|
})
|
|
55
57
|
]),
|
|
56
58
|
_: 3
|
|
@@ -63,7 +65,7 @@ const B = { class: "flex h-14 items-center justify-between gap-4 border-b px-4"
|
|
|
63
65
|
}, [
|
|
64
66
|
t("div", {
|
|
65
67
|
class: d([e.value ? "left-0" : "-left-full", "duration-250 absolute top-0 z-40 h-full w-full bg-black/40 backdrop-blur-[1px] ease-in-out lg:hidden"]),
|
|
66
|
-
onClick:
|
|
68
|
+
onClick: l
|
|
67
69
|
}, null, 2),
|
|
68
70
|
a(o.$slots, "view")
|
|
69
71
|
], 2)
|
|
@@ -72,5 +74,5 @@ const B = { class: "flex h-14 items-center justify-between gap-4 border-b px-4"
|
|
|
72
74
|
}
|
|
73
75
|
});
|
|
74
76
|
export {
|
|
75
|
-
|
|
77
|
+
T as default
|
|
76
78
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { defineComponent as k, ref as h, onMounted as y, watch as M, createElementBlock as b, openBlock as
|
|
1
|
+
import { defineComponent as k, ref as h, onMounted as y, watch as M, createElementBlock as b, openBlock as z, createElementVNode as E, createVNode as m, unref as g } from "vue";
|
|
2
2
|
import v from "./Button.vue.js";
|
|
3
|
-
|
|
4
|
-
import A from "../icons/
|
|
3
|
+
/* empty css */
|
|
4
|
+
import A from "../icons/Bold.vue.js";
|
|
5
|
+
import B from "../icons/Italic.vue.js";
|
|
5
6
|
import F from "../icons/Highlight.vue.js";
|
|
6
7
|
const I = { class: "overflow-hidden rounded border" }, V = { class: "flex gap-2 border-b bg-neutral-50 p-2 dark:bg-neutral-800/25" }, W = /* @__PURE__ */ k({
|
|
7
8
|
__name: "MiniEditor",
|
|
@@ -9,12 +10,12 @@ const I = { class: "overflow-hidden rounded border" }, V = { class: "flex gap-2
|
|
|
9
10
|
modelValue: {}
|
|
10
11
|
},
|
|
11
12
|
emits: ["update:modelValue"],
|
|
12
|
-
setup(S, { emit:
|
|
13
|
-
const p = S,
|
|
13
|
+
setup(S, { emit: _ }) {
|
|
14
|
+
const p = S, x = _, i = h(null), s = h(!1), c = h(!1), u = h(!1);
|
|
14
15
|
function N(e) {
|
|
15
16
|
i.value && (i.value.focus(), document.execCommand(e, !1), f(), a());
|
|
16
17
|
}
|
|
17
|
-
function
|
|
18
|
+
function L(e) {
|
|
18
19
|
const t = e.parentNode;
|
|
19
20
|
if (t) {
|
|
20
21
|
for (; e.firstChild; )
|
|
@@ -22,7 +23,7 @@ const I = { class: "overflow-hidden rounded border" }, V = { class: "flex gap-2
|
|
|
22
23
|
t.removeChild(e), t.normalize();
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
|
-
function
|
|
26
|
+
function T() {
|
|
26
27
|
if (!i.value) return;
|
|
27
28
|
i.value.focus();
|
|
28
29
|
const e = window.getSelection();
|
|
@@ -50,7 +51,7 @@ const I = { class: "overflow-hidden rounded border" }, V = { class: "flex gap-2
|
|
|
50
51
|
}
|
|
51
52
|
if (l.length > 0)
|
|
52
53
|
[...l].sort((o, d) => o.contains(d) ? 1 : d.contains(o) ? -1 : 0).forEach((o) => {
|
|
53
|
-
o.parentNode &&
|
|
54
|
+
o.parentNode && L(o);
|
|
54
55
|
});
|
|
55
56
|
else {
|
|
56
57
|
const n = document.createElement("span");
|
|
@@ -68,14 +69,14 @@ const I = { class: "overflow-hidden rounded border" }, V = { class: "flex gap-2
|
|
|
68
69
|
if (!i.value) return;
|
|
69
70
|
const e = window.getSelection();
|
|
70
71
|
if (!e || e.rangeCount === 0) {
|
|
71
|
-
s.value = !1,
|
|
72
|
+
s.value = !1, c.value = !1, u.value = !1;
|
|
72
73
|
return;
|
|
73
74
|
}
|
|
74
75
|
const t = e.anchorNode?.parentElement;
|
|
75
|
-
s.value = document.queryCommandState("bold"),
|
|
76
|
+
s.value = document.queryCommandState("bold"), c.value = document.queryCommandState("italic"), u.value = !!t?.classList?.contains("text-highlight");
|
|
76
77
|
}
|
|
77
78
|
function f() {
|
|
78
|
-
i.value &&
|
|
79
|
+
i.value && x("update:modelValue", i.value.innerHTML);
|
|
79
80
|
}
|
|
80
81
|
return y(() => {
|
|
81
82
|
i.value && (i.value.innerHTML = p.modelValue || "", a());
|
|
@@ -84,34 +85,34 @@ const I = { class: "overflow-hidden rounded border" }, V = { class: "flex gap-2
|
|
|
84
85
|
(e) => {
|
|
85
86
|
i.value && i.value.innerHTML !== e && (i.value.innerHTML = e || "", a());
|
|
86
87
|
}
|
|
87
|
-
), (e, t) => (
|
|
88
|
+
), (e, t) => (z(), b("div", I, [
|
|
88
89
|
E("div", V, [
|
|
89
|
-
|
|
90
|
-
icon:
|
|
90
|
+
m(v, {
|
|
91
|
+
icon: g(A),
|
|
91
92
|
highlighted: s.value,
|
|
92
93
|
variant: s.value ? "solid" : "ghost",
|
|
93
94
|
severity: "neutral",
|
|
94
95
|
size: "sm",
|
|
95
96
|
onClick: t[0] || (t[0] = (l) => N("bold"))
|
|
96
97
|
}, null, 8, ["icon", "highlighted", "variant"]),
|
|
97
|
-
|
|
98
|
-
icon:
|
|
98
|
+
m(v, {
|
|
99
|
+
icon: g(B),
|
|
99
100
|
"icon-class": "size-4",
|
|
100
|
-
highlighted:
|
|
101
|
-
variant:
|
|
101
|
+
highlighted: c.value,
|
|
102
|
+
variant: c.value ? "solid" : "ghost",
|
|
102
103
|
severity: "neutral",
|
|
103
104
|
size: "sm",
|
|
104
105
|
onClick: t[1] || (t[1] = (l) => N("italic"))
|
|
105
106
|
}, null, 8, ["icon", "highlighted", "variant"]),
|
|
106
|
-
|
|
107
|
-
icon:
|
|
107
|
+
m(v, {
|
|
108
|
+
icon: g(F),
|
|
108
109
|
"icon-class": "size-4",
|
|
109
|
-
highlighted:
|
|
110
|
-
variant:
|
|
110
|
+
highlighted: u.value,
|
|
111
|
+
variant: u.value ? "solid" : "ghost",
|
|
111
112
|
severity: "neutral",
|
|
112
113
|
size: "sm",
|
|
113
114
|
title: "Highlight",
|
|
114
|
-
onClick:
|
|
115
|
+
onClick: T
|
|
115
116
|
}, null, 8, ["icon", "highlighted", "variant"])
|
|
116
117
|
]),
|
|
117
118
|
E("div", {
|
package/components/Modal.vue.js
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
import { defineComponent as f, useModel as x, createElementBlock as n, openBlock as a, Fragment as v, createElementVNode as o, createVNode as d, renderSlot as
|
|
1
|
+
import { defineComponent as f, useModel as x, createElementBlock as n, openBlock as a, Fragment as v, createElementVNode as o, createVNode as d, renderSlot as i, unref as t, withCtx as m, createBlock as h, createCommentVNode as c } from "vue";
|
|
2
|
+
/* empty css */
|
|
2
3
|
import w from "../icons/Close.vue.js";
|
|
3
4
|
import { AnimatePresence as y, motion as b } from "motion-v";
|
|
4
5
|
import k from "./Button.vue.js";
|
|
5
|
-
|
|
6
|
+
/* empty css */
|
|
7
|
+
import { useWindowSize as _ } from "@vueuse/core";
|
|
6
8
|
/* empty css */
|
|
7
|
-
const
|
|
9
|
+
const g = {
|
|
8
10
|
class: "bg-background text-muted flex max-w-[600px] flex-col overflow-hidden rounded border shadow-xl shadow-slate-700/10 sm:max-h-[95dvh] sm:w-[90%]",
|
|
9
11
|
role: "document"
|
|
10
|
-
},
|
|
12
|
+
}, $ = { class: "flex items-center gap-4 border-b px-4 py-2" }, C = { class: "max-h-[calc(100dvh-100px)] flex-1 overflow-auto px-4 py-2 sm:max-h-[75vh]" }, V = {
|
|
11
13
|
key: 0,
|
|
12
14
|
class: "border-t px-4 py-2"
|
|
13
|
-
},
|
|
15
|
+
}, A = /* @__PURE__ */ f({
|
|
14
16
|
__name: "Modal",
|
|
15
17
|
props: {
|
|
16
18
|
modelValue: {},
|
|
@@ -18,20 +20,20 @@ const C = {
|
|
|
18
20
|
},
|
|
19
21
|
emits: ["update:modelValue"],
|
|
20
22
|
setup(p) {
|
|
21
|
-
const s = x(p, "modelValue"), { width:
|
|
23
|
+
const s = x(p, "modelValue"), { width: r } = _();
|
|
22
24
|
return (l, e) => (a(), n(v, null, [
|
|
23
25
|
o("div", {
|
|
24
26
|
class: "w-fit",
|
|
25
27
|
onClick: e[0] || (e[0] = (u) => s.value = !0)
|
|
26
28
|
}, [
|
|
27
|
-
|
|
29
|
+
i(l.$slots, "default")
|
|
28
30
|
]),
|
|
29
31
|
d(t(y), { initial: !1 }, {
|
|
30
32
|
default: m(() => [
|
|
31
33
|
s.value ? (a(), h(t(b).div, {
|
|
32
34
|
key: 0,
|
|
33
35
|
class: "modal-backdrop z-99999999 fixed left-0 top-0 flex items-center justify-center backdrop-blur-[2px] sm:h-screen sm:w-screen",
|
|
34
|
-
initial: { opacity: 0, scale: t(
|
|
36
|
+
initial: { opacity: 0, scale: t(r) < 768 ? 1 : 0.85, translateX: t(r) < 768 ? "-120px" : "0" },
|
|
35
37
|
animate: { opacity: 1, scale: 1, translateX: "0" },
|
|
36
38
|
exit: { opacity: 0, scale: 1, translateX: "-120px" },
|
|
37
39
|
transition: {
|
|
@@ -40,8 +42,8 @@ const C = {
|
|
|
40
42
|
}
|
|
41
43
|
}, {
|
|
42
44
|
default: m(() => [
|
|
43
|
-
o("div",
|
|
44
|
-
o("div",
|
|
45
|
+
o("div", g, [
|
|
46
|
+
o("div", $, [
|
|
45
47
|
e[2] || (e[2] = o("h3", { class: "text-primary flex-1 text-lg font-medium" }, "Modal title", -1)),
|
|
46
48
|
d(t(k), {
|
|
47
49
|
icon: t(w),
|
|
@@ -51,11 +53,11 @@ const C = {
|
|
|
51
53
|
onClick: e[1] || (e[1] = (u) => s.value = !1)
|
|
52
54
|
}, null, 8, ["icon"])
|
|
53
55
|
]),
|
|
54
|
-
o("div",
|
|
55
|
-
|
|
56
|
+
o("div", C, [
|
|
57
|
+
i(l.$slots, "content")
|
|
56
58
|
]),
|
|
57
|
-
l.$slots.footer ? (a(), n("div",
|
|
58
|
-
|
|
59
|
+
l.$slots.footer ? (a(), n("div", V, [
|
|
60
|
+
i(l.$slots, "footer")
|
|
59
61
|
])) : c("", !0)
|
|
60
62
|
])
|
|
61
63
|
]),
|
|
@@ -68,5 +70,5 @@ const C = {
|
|
|
68
70
|
}
|
|
69
71
|
});
|
|
70
72
|
export {
|
|
71
|
-
|
|
73
|
+
A as default
|
|
72
74
|
};
|
package/components/Select.vue.js
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
1
|
+
import { defineComponent as _, mergeModels as w, useModel as j, computed as d, ref as v, useTemplateRef as A, watch as b, createElementBlock as s, openBlock as n, createVNode as y, unref as a, withCtx as O, createBlock as C, createCommentVNode as m, createElementVNode as z, Fragment as D, renderList as E, normalizeClass as S, toDisplayString as W } from "vue";
|
|
2
|
+
/* empty css */
|
|
3
|
+
import q from "../icons/Check.vue.js";
|
|
4
|
+
import H from "../icons/ChevronDown.vue.js";
|
|
5
|
+
import P from "../icons/Search.vue.js";
|
|
6
|
+
import Q from "./icon/Icon.vue.js";
|
|
7
|
+
import { AnimatePresence as R, motion as T } from "motion-v";
|
|
8
|
+
import U from "./Button.vue.js";
|
|
9
|
+
/* empty css */
|
|
8
10
|
import G from "./Input.vue.js";
|
|
9
11
|
import { onClickOutside as I } from "@vueuse/core";
|
|
10
12
|
/* empty css */
|
|
11
13
|
const J = {
|
|
12
14
|
key: 0,
|
|
13
15
|
class: "border-b p-2"
|
|
14
|
-
}, K = { class: "h-full max-h-[220px] overflow-y-auto overflow-x-hidden p-2" }, X = ["onClick"],
|
|
16
|
+
}, K = { class: "h-full max-h-[220px] overflow-y-auto overflow-x-hidden p-2" }, X = ["onClick"], ce = /* @__PURE__ */ _({
|
|
15
17
|
__name: "Select",
|
|
16
18
|
props: /* @__PURE__ */ w({
|
|
17
19
|
options: { type: Array, required: !0 },
|
|
@@ -28,7 +30,7 @@ const J = {
|
|
|
28
30
|
}),
|
|
29
31
|
emits: /* @__PURE__ */ w(["update:isOpen"], ["update:modelValue"]),
|
|
30
32
|
setup(l, { emit: V }) {
|
|
31
|
-
const r = l, B = V, g =
|
|
33
|
+
const r = l, B = V, g = j(l, "modelValue"), u = d(() => g.value), e = v(r.isOpen ?? !1), f = v(!1), h = A("target");
|
|
32
34
|
I(h, () => {
|
|
33
35
|
r.closeOnClickOutside, e.value = !1, p();
|
|
34
36
|
}), b(
|
|
@@ -39,11 +41,11 @@ const J = {
|
|
|
39
41
|
});
|
|
40
42
|
const M = () => {
|
|
41
43
|
e.value = !e.value, e.value || p();
|
|
42
|
-
},
|
|
44
|
+
}, $ = (t) => {
|
|
43
45
|
g.value = t, p();
|
|
44
46
|
}, p = () => {
|
|
45
|
-
e.value = !1,
|
|
46
|
-
},
|
|
47
|
+
e.value = !1, f.value = !1, i.value = "";
|
|
48
|
+
}, i = v(""), k = d(() => i.value ? r.options.filter((t) => t.toLowerCase().includes(i.value.toLowerCase())) : r.options), x = d(() => {
|
|
47
49
|
switch (r.size) {
|
|
48
50
|
case "sm":
|
|
49
51
|
return "text-sm py-1 px-2";
|
|
@@ -54,26 +56,26 @@ const J = {
|
|
|
54
56
|
case "xl":
|
|
55
57
|
return "text-lg py-2.5 px-3.5";
|
|
56
58
|
}
|
|
57
|
-
}),
|
|
58
|
-
return (t, c) => (n(),
|
|
59
|
+
}), L = d(() => u.value || "Select");
|
|
60
|
+
return (t, c) => (n(), s("div", {
|
|
59
61
|
class: "relative",
|
|
60
62
|
ref_key: "target",
|
|
61
63
|
ref: h
|
|
62
64
|
}, [
|
|
63
|
-
y(a(
|
|
65
|
+
y(a(U), {
|
|
64
66
|
"icon-class": e.value ? "rotate-180 transition-transform duration-200" : "transition-transform duration-200",
|
|
65
|
-
icon: a(
|
|
67
|
+
icon: a(H),
|
|
66
68
|
class: "justify-between! w-full capitalize",
|
|
67
69
|
variant: l.variant,
|
|
68
70
|
size: l.size,
|
|
69
|
-
label:
|
|
71
|
+
label: L.value,
|
|
70
72
|
"font-weight": l.fontWeight,
|
|
71
73
|
severity: l.severity,
|
|
72
74
|
onClick: M
|
|
73
75
|
}, null, 8, ["icon-class", "icon", "variant", "size", "label", "font-weight", "severity"]),
|
|
74
|
-
y(a(
|
|
76
|
+
y(a(R), null, {
|
|
75
77
|
default: O(() => [
|
|
76
|
-
e.value ? (n(), C(a(
|
|
78
|
+
e.value ? (n(), C(a(T).div, {
|
|
77
79
|
key: 0,
|
|
78
80
|
class: "bg-background absolute top-full z-10 mt-1 flex w-full list-none flex-col rounded border shadow-md shadow-slate-500/10 dark:shadow-slate-900/20",
|
|
79
81
|
initial: { opacity: 0, scale: 1, y: -25 },
|
|
@@ -86,37 +88,37 @@ const J = {
|
|
|
86
88
|
}
|
|
87
89
|
}, {
|
|
88
90
|
default: O(() => [
|
|
89
|
-
l.showFilter ? (n(),
|
|
91
|
+
l.showFilter ? (n(), s("div", J, [
|
|
90
92
|
y(a(G), {
|
|
91
|
-
modelValue:
|
|
92
|
-
"onUpdate:modelValue": c[0] || (c[0] = (o) =>
|
|
93
|
-
"trailing-icon": a(
|
|
93
|
+
modelValue: i.value,
|
|
94
|
+
"onUpdate:modelValue": c[0] || (c[0] = (o) => i.value = o),
|
|
95
|
+
"trailing-icon": a(P),
|
|
94
96
|
placeholder: "Search",
|
|
95
97
|
size: l.size
|
|
96
98
|
}, null, 8, ["modelValue", "trailing-icon", "size"])
|
|
97
|
-
])) :
|
|
99
|
+
])) : m("", !0),
|
|
98
100
|
z("ul", K, [
|
|
99
|
-
(n(!0),
|
|
100
|
-
key:
|
|
101
|
-
class: S([[x.value, { "dark:text-neutral-300": o !== u.value }, { "bg-neutral-100/75 dark:bg-neutral-800/75": o === u.value && !
|
|
102
|
-
onMouseenter: c[1] || (c[1] = (F) =>
|
|
103
|
-
onClick: (F) =>
|
|
101
|
+
(n(!0), s(D, null, E(k.value, (o, N) => (n(), s("li", {
|
|
102
|
+
key: N,
|
|
103
|
+
class: S([[x.value, { "dark:text-neutral-300": o !== u.value }, { "bg-neutral-100/75 dark:bg-neutral-800/75": o === u.value && !f.value }], "flex w-full cursor-pointer items-center justify-between rounded border border-transparent text-left transition-colors duration-150 hover:bg-neutral-100/75 dark:hover:bg-neutral-800/75"]),
|
|
104
|
+
onMouseenter: c[1] || (c[1] = (F) => f.value = !0),
|
|
105
|
+
onClick: (F) => $(o)
|
|
104
106
|
}, [
|
|
105
|
-
z("span", null,
|
|
106
|
-
o === u.value ? (n(), C(a(
|
|
107
|
+
z("span", null, W(o), 1),
|
|
108
|
+
o === u.value ? (n(), C(a(Q), {
|
|
107
109
|
key: 0,
|
|
108
|
-
icon: a(
|
|
110
|
+
icon: a(q),
|
|
109
111
|
class: "size-5"
|
|
110
|
-
}, null, 8, ["icon"])) :
|
|
112
|
+
}, null, 8, ["icon"])) : m("", !0)
|
|
111
113
|
], 42, X))), 128)),
|
|
112
|
-
k.value.length === 0 ? (n(),
|
|
114
|
+
k.value.length === 0 ? (n(), s("li", {
|
|
113
115
|
key: 0,
|
|
114
116
|
class: S([x.value, ""])
|
|
115
|
-
}, "No options found", 2)) :
|
|
117
|
+
}, "No options found", 2)) : m("", !0)
|
|
116
118
|
])
|
|
117
119
|
]),
|
|
118
120
|
_: 1
|
|
119
|
-
})) :
|
|
121
|
+
})) : m("", !0)
|
|
120
122
|
]),
|
|
121
123
|
_: 1
|
|
122
124
|
})
|
|
@@ -124,5 +126,5 @@ const J = {
|
|
|
124
126
|
}
|
|
125
127
|
});
|
|
126
128
|
export {
|
|
127
|
-
|
|
129
|
+
ce as default
|
|
128
130
|
};
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as v, computed as B, ref as C, createElementBlock as x, openBlock as L, normalizeClass as R, createElementVNode as _, createVNode as z, toDisplayString as w, unref as i } from "vue";
|
|
2
|
+
/* empty css */
|
|
2
3
|
import H from "../../icons/Check.vue.js";
|
|
3
4
|
import W from "../../icons/Copy.vue.js";
|
|
4
5
|
import "motion-v";
|
|
5
6
|
import E from "../Button.vue.js";
|
|
7
|
+
/* empty css */
|
|
6
8
|
import { getTypography as N } from "../../utils/typography.js";
|
|
7
9
|
import { getMargin as P } from "../../utils/margin.js";
|
|
8
10
|
import { getPadding as V } from "../../utils/padding.js";
|
|
9
11
|
import "@vueuse/core";
|
|
10
12
|
/* empty css */
|
|
11
|
-
const
|
|
13
|
+
const U = /* @__PURE__ */ v({
|
|
12
14
|
__name: "Code",
|
|
13
15
|
props: {
|
|
14
16
|
text: { type: String, default: "" },
|
|
@@ -32,42 +34,42 @@ const Q = /* @__PURE__ */ T({
|
|
|
32
34
|
paddingBottom: { type: String, default: "" }
|
|
33
35
|
},
|
|
34
36
|
setup(n) {
|
|
35
|
-
const { fontSizes: r, fontWeights: o, textColors: g, letterSpacings:
|
|
37
|
+
const { fontSizes: r, fontWeights: o, textColors: g, letterSpacings: p, lineHeights: d } = N(), { margin: l, marginLeft: m, marginRight: f, marginTop: s, marginBottom: u } = P(), { padding: c, paddingLeft: y, paddingRight: S, paddingTop: h, paddingBottom: b } = V(), t = n, k = B(() => [
|
|
36
38
|
r[t.fontSize],
|
|
37
39
|
g[t.color],
|
|
38
40
|
o[t.fontWeight],
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
d[t.lineHeight],
|
|
42
|
+
p[t.letterSpacing],
|
|
41
43
|
// margin
|
|
42
44
|
l[t.margin],
|
|
43
45
|
m[t.marginLeft],
|
|
44
46
|
f[t.marginRight],
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
s[t.marginTop],
|
|
48
|
+
u[t.marginBottom],
|
|
47
49
|
// padding
|
|
48
50
|
c[t.padding],
|
|
49
51
|
y[t.paddingLeft],
|
|
50
52
|
S[t.paddingRight],
|
|
51
53
|
h[t.paddingTop],
|
|
52
54
|
b[t.paddingBottom]
|
|
53
|
-
]), e = C(!1),
|
|
55
|
+
]), e = C(!1), T = async () => {
|
|
54
56
|
navigator.clipboard.writeText(t.text), e.value = !0, await new Promise((a) => setTimeout(a, 3e3)), e.value = !1;
|
|
55
57
|
};
|
|
56
58
|
return (a, D) => (L(), x("code", {
|
|
57
59
|
class: R([[k.value, n.block ? "block p-2.5" : "px-1.5 py-0.5"], "relative rounded border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800"])
|
|
58
60
|
}, [
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
_("span", null, w(t.text), 1),
|
|
62
|
+
z(i(E), {
|
|
61
63
|
disabled: e.value,
|
|
62
64
|
icon: e.value ? i(H) : i(W),
|
|
63
65
|
class: "dark:hover:bg-neutral-700! p-1! absolute right-2 top-1/2 -translate-y-1/2",
|
|
64
66
|
size: "sm",
|
|
65
67
|
variant: "ghost",
|
|
66
|
-
onClick:
|
|
68
|
+
onClick: T
|
|
67
69
|
}, null, 8, ["disabled", "icon"])
|
|
68
70
|
], 2));
|
|
69
71
|
}
|
|
70
72
|
});
|
|
71
73
|
export {
|
|
72
|
-
|
|
74
|
+
U as default
|
|
73
75
|
};
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--ui-primary: #e88711;--ui-secondary: #2b7fff;--ui-success: #00c271;--ui-info: #2b7fff;--ui-warning: #f0b100;--ui-error: #fb2c36;--ui-text: var(--color-neutral-700);--ui-text-muted: var(--color-neutral-500);--ui-text-inverted: var(--color-white);--ui-background: var(--color-white);--ui-border: var(--color-slate-200);--ui-border-radius: .25rem}:root:where(.dark){--ui-primary: #e58b1d;--ui-secondary: #51a2ff;--ui-success: #00dc82;--ui-info: #51a2ff;--ui-warning: #fdc700;--ui-error: #ff6467;--ui-text: var(--color-neutral-300);--ui-text-muted: var(--color-neutral-400);--ui-text-inverted: var(--color-neutral-900);--ui-background: var(--color-neutral-900);--ui-border: var(--color-neutral-800)}@theme{ --shadow: 0px 1px 3px 0px rgba(0, 0, 0, .1), 0px 1px 2px 0px rgba(0, 0, 0, .06); --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05); --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, .1), 0px 2px 4px -1px rgba(0, 0, 0, .06); --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, .1), 0px 4px 6px -2px rgba(0, 0, 0, .05); --shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, .1), 0px 10px 10px -5px rgba(0, 0, 0, .04); --shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, .25); }@theme inline{ --color-primary: var(--ui-primary); --color-primary-light: color-mix(in srgb, var(--ui-primary) 12%, transparent); --color-secondary: var(--ui-secondary); --color-secondary-light: color-mix(in srgb, var(--ui-secondary) 12%, transparent); --color-success: var(--ui-success); --color-success-light: color-mix(in srgb, var(--ui-success) 12%, transparent); --color-info: var(--ui-info); --color-info-light: color-mix(in srgb, var(--ui-info) 12%, transparent); --color-warning: var(--ui-warning); --color-warning-light: color-mix(in srgb, var(--ui-warning) 12%, transparent); --color-error: var(--ui-error); --color-error-light: color-mix(in srgb, var(--ui-error) 12%, transparent); --color-neutral: var(--ui-neutral); --color-neutral-light: color-mix(in srgb, var(--ui-neutral) 12%, transparent); --color-background: var(--ui-background); --color-border: var(--ui-border); --radius: var(--ui-border-radius); }@utility text-inverted{color: var(--ui-text-inverted);}@utility text-muted{color: var(--ui-text-muted);}@utility text-dimmed{color: var(--color-neutral-500);}@utility bg-stripes{background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem;}@utility text-highlight{@apply inline-table rounded
|
|
1
|
+
:root{--ui-primary: #e88711;--ui-secondary: #2b7fff;--ui-success: #00c271;--ui-info: #2b7fff;--ui-warning: #f0b100;--ui-error: #fb2c36;--ui-text: var(--color-neutral-700);--ui-text-muted: var(--color-neutral-500);--ui-text-inverted: var(--color-white);--ui-background: var(--color-white);--ui-border: var(--color-slate-200);--ui-border-radius: .25rem}:root:where(.dark){--ui-primary: #e58b1d;--ui-secondary: #51a2ff;--ui-success: #00dc82;--ui-info: #51a2ff;--ui-warning: #fdc700;--ui-error: #ff6467;--ui-text: var(--color-neutral-300);--ui-text-muted: var(--color-neutral-400);--ui-text-inverted: var(--color-neutral-900);--ui-background: var(--color-neutral-900);--ui-border: var(--color-neutral-800)}@theme{ --shadow: 0px 1px 3px 0px rgba(0, 0, 0, .1), 0px 1px 2px 0px rgba(0, 0, 0, .06); --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05); --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, .1), 0px 2px 4px -1px rgba(0, 0, 0, .06); --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, .1), 0px 4px 6px -2px rgba(0, 0, 0, .05); --shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, .1), 0px 10px 10px -5px rgba(0, 0, 0, .04); --shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, .25); }@theme inline{ --color-primary: var(--ui-primary); --color-primary-light: color-mix(in srgb, var(--ui-primary) 12%, transparent); --color-secondary: var(--ui-secondary); --color-secondary-light: color-mix(in srgb, var(--ui-secondary) 12%, transparent); --color-success: var(--ui-success); --color-success-light: color-mix(in srgb, var(--ui-success) 12%, transparent); --color-info: var(--ui-info); --color-info-light: color-mix(in srgb, var(--ui-info) 12%, transparent); --color-warning: var(--ui-warning); --color-warning-light: color-mix(in srgb, var(--ui-warning) 12%, transparent); --color-error: var(--ui-error); --color-error-light: color-mix(in srgb, var(--ui-error) 12%, transparent); --color-neutral: var(--ui-neutral); --color-neutral-light: color-mix(in srgb, var(--ui-neutral) 12%, transparent); --color-background: var(--ui-background); --color-border: var(--ui-border); --radius: var(--ui-border-radius); }@utility text-inverted{color: var(--ui-text-inverted);}@utility text-muted{color: var(--ui-text-muted);}@utility text-dimmed{color: var(--color-neutral-500);}@utility bg-stripes{background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem;}@utility text-highlight{@apply inline-table rounded bg-neutral-100 px-1.5 outline outline-neutral-200/75 dark:bg-neutral-800 dark:outline-neutral-700/75;}@source "./utils";
|
package/ui.js
CHANGED
|
@@ -1,46 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
import { default as a } from "./components/
|
|
3
|
-
import { default as
|
|
4
|
-
import { default as
|
|
5
|
-
|
|
6
|
-
import { default as
|
|
7
|
-
import { default as
|
|
8
|
-
import { default as
|
|
9
|
-
import { default as
|
|
10
|
-
import { default as
|
|
11
|
-
import { default as
|
|
12
|
-
import { default as
|
|
13
|
-
import { default as
|
|
14
|
-
import { default as
|
|
15
|
-
import { default as
|
|
16
|
-
import { default as
|
|
17
|
-
import { default as
|
|
18
|
-
import { default as
|
|
19
|
-
import { default as
|
|
20
|
-
import { default as
|
|
21
|
-
import { default as
|
|
22
|
-
import { default as
|
|
1
|
+
/* empty css */
|
|
2
|
+
import { default as a } from "./components/Accordion.vue.js";
|
|
3
|
+
import { default as p } from "./components/Badge.vue.js";
|
|
4
|
+
import { default as d } from "./components/Button.vue.js";
|
|
5
|
+
/* empty css */
|
|
6
|
+
import { default as u } from "./components/Checkbox.vue.js";
|
|
7
|
+
import { default as x } from "./components/Chip.vue.js";
|
|
8
|
+
import { default as n } from "./components/Drawer.vue.js";
|
|
9
|
+
import { default as c } from "./components/Fieldset.vue.js";
|
|
10
|
+
import { default as h } from "./components/Input.vue.js";
|
|
11
|
+
import { default as M } from "./components/JsonRenderer.vue.js";
|
|
12
|
+
import { default as k } from "./components/Layout.vue.js";
|
|
13
|
+
import { default as C } from "./components/Message.vue.js";
|
|
14
|
+
import { default as b } from "./components/Modal.vue.js";
|
|
15
|
+
import { default as y } from "./components/Popover.vue.js";
|
|
16
|
+
import { default as D } from "./components/ProgressBar.vue.js";
|
|
17
|
+
import { default as F } from "./components/ProgressSpinner.vue.js";
|
|
18
|
+
import { default as J } from "./components/RangeSlider.vue.js";
|
|
19
|
+
import { default as T } from "./components/Select.vue.js";
|
|
20
|
+
import { default as q } from "./components/Separator.vue.js";
|
|
21
|
+
import { default as G } from "./components/Skeleton.vue.js";
|
|
22
|
+
import { default as K } from "./components/Switch.vue.js";
|
|
23
|
+
import { default as O } from "./components/Tooltip.vue.js";
|
|
24
|
+
import { default as U } from "./components/MiniEditor.vue.js";
|
|
23
25
|
export {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
26
|
+
a as Accordion,
|
|
27
|
+
p as Badge,
|
|
28
|
+
d as Button,
|
|
29
|
+
u as Checkbox,
|
|
30
|
+
x as Chip,
|
|
31
|
+
n as Drawer,
|
|
32
|
+
c as Fieldset,
|
|
33
|
+
h as Input,
|
|
34
|
+
M as JsonRenderer,
|
|
35
|
+
k as Layout,
|
|
36
|
+
C as Message,
|
|
37
|
+
U as MiniEditor,
|
|
38
|
+
b as Modal,
|
|
39
|
+
y as Popover,
|
|
40
|
+
D as ProgressBar,
|
|
41
|
+
F as ProgressSpinner,
|
|
42
|
+
J as RangeSlider,
|
|
43
|
+
T as Select,
|
|
44
|
+
q as Separator,
|
|
45
|
+
G as Skeleton,
|
|
46
|
+
K as Switch,
|
|
47
|
+
O as Tooltip
|
|
46
48
|
};
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import { defineComponent as u, computed as h, createElementBlock as t, openBlock as r, normalizeClass as a, renderSlot as v, Fragment as c, createCommentVNode as n, createBlock as i, toDisplayString as x, unref as o } from "vue";
|
|
2
|
-
import k from "../icons/Loading.vue.js";
|
|
3
|
-
import s from "./icon/Icon.vue.js";
|
|
4
|
-
const p = ["disabled"], B = /* @__PURE__ */ u({
|
|
5
|
-
__name: "Button",
|
|
6
|
-
props: {
|
|
7
|
-
label: { type: String, default: "" },
|
|
8
|
-
loading: { type: Boolean, default: !1 },
|
|
9
|
-
disabled: { type: Boolean, default: !1 },
|
|
10
|
-
variant: { type: String, default: "solid" },
|
|
11
|
-
severity: { type: String, default: "primary" },
|
|
12
|
-
icon: { type: Object, default: () => null },
|
|
13
|
-
iconClass: { type: String, default: "" },
|
|
14
|
-
iconPosition: { type: String, default: "right" },
|
|
15
|
-
rounded: { type: Boolean, default: !1 },
|
|
16
|
-
size: { type: String, default: "md" },
|
|
17
|
-
fontWeight: { type: String, default: "medium" },
|
|
18
|
-
neumorphic: { type: Boolean, default: !1 },
|
|
19
|
-
highlighted: { type: Boolean, default: !1 }
|
|
20
|
-
},
|
|
21
|
-
setup(g) {
|
|
22
|
-
const e = g, d = {
|
|
23
|
-
primary: {
|
|
24
|
-
ghost: "bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-neutral-800",
|
|
25
|
-
outlined: "border-primary! text-primary hover:bg-primary hover:text-inverted disabled:hover:text-primary disabled:hover:bg-primary disabled:hover:text-inverted",
|
|
26
|
-
link: "text-primary hover:underline",
|
|
27
|
-
soft: "bg-primary-light text-primary hover:bg-primary-light/80 dark:bg-primary/10 dark:text-primary dark:hover:bg-primary/20",
|
|
28
|
-
solid: "bg-primary text-inverted hover:bg-primary/70 disabled:hover:bg-primary dark:hover:bg-primary/80",
|
|
29
|
-
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
30
|
-
},
|
|
31
|
-
secondary: {
|
|
32
|
-
ghost: "bg-transparent text-secondary hover:bg-secondary/10 dark:hover:bg-neutral-800",
|
|
33
|
-
outlined: "border-secondary! text-secondary hover:bg-secondary hover:text-inverted disabled:hover:text-secondary disabled:hover:bg-secondary disabled:hover:text-inverted",
|
|
34
|
-
link: "text-secondary hover:underline",
|
|
35
|
-
soft: "bg-secondary-light text-secondary hover:bg-secondary-light/80 dark:bg-secondary/10 dark:text-secondary dark:hover:bg-secondary/20",
|
|
36
|
-
solid: "bg-secondary text-inverted hover:bg-secondary/70 disabled:hover:bg-secondary dark:hover:bg-secondary/80",
|
|
37
|
-
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
38
|
-
},
|
|
39
|
-
success: {
|
|
40
|
-
ghost: "bg-transparent text-success hover:bg-success/10 dark:hover:bg-neutral-800",
|
|
41
|
-
outlined: "border-success! text-success hover:bg-success hover:text-inverted disabled:hover:text-success disabled:hover:bg-success disabled:hover:text-inverted",
|
|
42
|
-
link: "text-success hover:underline",
|
|
43
|
-
soft: "bg-success-light text-success hover:bg-success-light/80 dark:bg-success/10 dark:text-success dark:hover:bg-success/20",
|
|
44
|
-
solid: "bg-success text-inverted hover:bg-success/70 disabled:hover:bg-success dark:hover:bg-success/80",
|
|
45
|
-
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
46
|
-
},
|
|
47
|
-
info: {
|
|
48
|
-
ghost: "bg-transparent text-info hover:bg-info/10 dark:hover:bg-neutral-800",
|
|
49
|
-
outlined: "border-info! text-info hover:bg-info hover:text-inverted disabled:hover:text-info disabled:hover:bg-info disabled:hover:text-inverted",
|
|
50
|
-
link: "text-info hover:underline",
|
|
51
|
-
soft: "bg-info-light text-info hover:bg-info-light/80 dark:bg-info/10 dark:text-info dark:hover:bg-info/20",
|
|
52
|
-
solid: "bg-info text-inverted hover:bg-info/70 disabled:hover:bg-info dark:hover:bg-info/80",
|
|
53
|
-
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
54
|
-
},
|
|
55
|
-
warning: {
|
|
56
|
-
ghost: "bg-transparent text-warning hover:bg-warning/10 dark:hover:bg-neutral-800",
|
|
57
|
-
outlined: "border-warning! text-warning hover:bg-warning hover:text-inverted disabled:hover:text-warning disabled:hover:bg-warning disabled:hover:text-inverted",
|
|
58
|
-
link: "text-warning hover:underline",
|
|
59
|
-
soft: "bg-warning-light text-warning hover:bg-warning-light/80 dark:bg-warning/10 dark:text-warning dark:hover:bg-warning/20",
|
|
60
|
-
solid: "bg-warning text-inverted hover:bg-warning/70 disabled:hover:bg-warning dark:hover:bg-warning/80",
|
|
61
|
-
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
62
|
-
},
|
|
63
|
-
error: {
|
|
64
|
-
ghost: "bg-transparent text-error hover:bg-error/10 dark:hover:bg-neutral-800",
|
|
65
|
-
outlined: "border-error! text-error hover:bg-error hover:text-inverted disabled:hover:text-error disabled:hover:bg-error disabled:hover:text-inverted",
|
|
66
|
-
link: "text-error hover:underline",
|
|
67
|
-
soft: "bg-error-light text-error hover:bg-error-light/80 dark:bg-error/10 dark:text-error dark:hover:bg-error/20",
|
|
68
|
-
solid: "bg-error text-inverted hover:bg-error/70 disabled:hover:bg-error dark:hover:bg-error/80",
|
|
69
|
-
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
70
|
-
},
|
|
71
|
-
neutral: {
|
|
72
|
-
ghost: "bg-transparent text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
73
|
-
outlined: "border-neutral-300! dark:border-neutral-700! text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800 disabled:hover:text-neutral-700 disabled:hover:text-inverted",
|
|
74
|
-
link: "text-neutral-700 dark:text-neutral-300 hover:underline",
|
|
75
|
-
soft: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700",
|
|
76
|
-
solid: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-100/80",
|
|
77
|
-
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
78
|
-
}
|
|
79
|
-
}, b = h(() => d[e.severity]?.[e.variant] || d.primary.solid);
|
|
80
|
-
return (l, y) => (r(), t("button", {
|
|
81
|
-
type: "button",
|
|
82
|
-
disabled: e.disabled || e.loading,
|
|
83
|
-
class: a([[
|
|
84
|
-
b.value,
|
|
85
|
-
{ "rounded-full": e.rounded },
|
|
86
|
-
{ "justify-center": !e.icon },
|
|
87
|
-
{ "px-2 py-1 text-sm": e.size === "sm", "px-2.5 py-1.5 text-sm": e.size === "md", "px-3 py-2 text-base": e.size === "lg", "px-3.5 py-2.5 text-lg": e.size === "xl" },
|
|
88
|
-
{ "font-normal": e.fontWeight === "normal", "font-medium": e.fontWeight === "medium", "font-semibold": e.fontWeight === "semibold", "font-bold": e.fontWeight === "bold" },
|
|
89
|
-
{ neumorphic: e.neumorphic },
|
|
90
|
-
{ "bg-highlight": e.highlighted }
|
|
91
|
-
], "flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"])
|
|
92
|
-
}, [
|
|
93
|
-
l.$slots.default ? v(l.$slots, "default", { key: 0 }, void 0, !0) : (r(), t(c, { key: 1 }, [
|
|
94
|
-
e.label ? (r(), t("span", {
|
|
95
|
-
key: 0,
|
|
96
|
-
class: a({ "order-2": e.iconPosition === "left" })
|
|
97
|
-
}, x(e.label), 3)) : n("", !0),
|
|
98
|
-
e.icon && !e.loading ? (r(), i(o(s), {
|
|
99
|
-
key: 1,
|
|
100
|
-
icon: e.icon,
|
|
101
|
-
class: a([e.iconClass, "size-5 text-current duration-200"])
|
|
102
|
-
}, null, 8, ["icon", "class"])) : n("", !0),
|
|
103
|
-
e.loading ? (r(), i(o(s), {
|
|
104
|
-
key: 2,
|
|
105
|
-
icon: o(k),
|
|
106
|
-
class: "size-5 text-current duration-200"
|
|
107
|
-
}, null, 8, ["icon"])) : n("", !0)
|
|
108
|
-
], 64))
|
|
109
|
-
], 10, p));
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
export {
|
|
113
|
-
B as default
|
|
114
|
-
};
|