vlite3 0.2.3 → 0.2.4
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 +7 -5
- package/components/Modal.vue.js +10 -10
- package/components/Navbar/Navbar.vue.d.ts +13 -2
- package/components/Navbar/Navbar.vue.js +169 -130
- package/components/Slider.vue.js +76 -62
- package/components/Tabes/Tabes.vue.js +1 -1
- package/package.json +1 -1
- package/style.css +12 -4
- package/types/navbar.type.d.ts +2 -0
package/README.md
CHANGED
|
@@ -62,7 +62,7 @@ In your `main.ts` or `main.js`, import `createVLite` and `vScrollReveal` and reg
|
|
|
62
62
|
```typescript
|
|
63
63
|
import { createApp } from 'vue'
|
|
64
64
|
import App from './App.vue'
|
|
65
|
-
import {
|
|
65
|
+
import { createVLite, vScrollReveal, GoogleSignInPlugin } from 'vlite3'
|
|
66
66
|
|
|
67
67
|
const app = createApp(App)
|
|
68
68
|
|
|
@@ -372,7 +372,9 @@ Follow these rules strictly to ensure visual consistency and predictable styling
|
|
|
372
372
|
|
|
373
373
|
## Complete reference for AI agents and developers:
|
|
374
374
|
|
|
375
|
-
- [
|
|
376
|
-
- [
|
|
377
|
-
- [
|
|
378
|
-
- [
|
|
375
|
+
- [1-setup.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-setup.md)
|
|
376
|
+
- [2-theming.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/2-theming.md)
|
|
377
|
+
- [3-all-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/3-all-components.md)
|
|
378
|
+
- [4-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/4-forms.md)
|
|
379
|
+
- [5-utility.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/5-utility.md)
|
|
380
|
+
- [6-advance-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/6-advance-components.md)
|
package/components/Modal.vue.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as w, ref as $, watch as m, provide as B, onUnmounted as O, openBlock as s, createElementBlock as a, Fragment as S, createElementVNode as r, mergeProps as y, withModifiers as b, renderSlot as i, createCommentVNode as n, createBlock as h, Teleport as z, createVNode as v, Transition as E, withCtx as N, normalizeClass as d, toDisplayString as
|
|
1
|
+
import { defineComponent as w, ref as $, watch as m, provide as B, onUnmounted as O, openBlock as s, createElementBlock as a, Fragment as S, createElementVNode as r, mergeProps as y, withModifiers as b, renderSlot as i, createCommentVNode as n, createBlock as h, Teleport as z, createVNode as v, Transition as E, withCtx as N, normalizeClass as d, toDisplayString as p, resolveDynamicComponent as P } from "vue";
|
|
2
2
|
import V from "./Button.vue.js";
|
|
3
3
|
import { useKeyStroke as j } from "../composables/useKeyStroke.js";
|
|
4
4
|
const D = {
|
|
@@ -25,18 +25,18 @@ const D = {
|
|
|
25
25
|
bodyProps: {}
|
|
26
26
|
},
|
|
27
27
|
emits: ["close", "update:show", "onOpen"],
|
|
28
|
-
setup(e, { emit:
|
|
29
|
-
const c = e,
|
|
28
|
+
setup(e, { emit: g }) {
|
|
29
|
+
const c = e, f = g, l = $(c.show);
|
|
30
30
|
m(
|
|
31
31
|
() => c.show,
|
|
32
32
|
(t) => {
|
|
33
|
-
l.value = t, t &&
|
|
33
|
+
l.value = t, t && f("onOpen");
|
|
34
34
|
}
|
|
35
35
|
);
|
|
36
36
|
const x = () => {
|
|
37
37
|
l.value = !0;
|
|
38
38
|
}, o = () => {
|
|
39
|
-
l.value = !1,
|
|
39
|
+
l.value = !1, f("update:show", !1), f("close");
|
|
40
40
|
};
|
|
41
41
|
B("modal-context", { close: o });
|
|
42
42
|
const k = () => {
|
|
@@ -46,7 +46,7 @@ const D = {
|
|
|
46
46
|
t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
|
|
47
47
|
}), O(() => {
|
|
48
48
|
document.body.style.overflow = "";
|
|
49
|
-
}), (t,
|
|
49
|
+
}), (t, u) => (s(), a(S, null, [
|
|
50
50
|
r("span", y({
|
|
51
51
|
onClick: b(x, ["stop"]),
|
|
52
52
|
class: `${e.triggerClass}`
|
|
@@ -72,14 +72,14 @@ const D = {
|
|
|
72
72
|
}, [
|
|
73
73
|
r("div", {
|
|
74
74
|
class: d(["modal-body relative w-full rounded border border-border bg-body shadow-lg text-foreground flex flex-col max-h-[85vh] sm:max-h-[90vh]", [e.maxWidth]]),
|
|
75
|
-
onClick:
|
|
75
|
+
onClick: u[0] || (u[0] = b(() => {
|
|
76
76
|
}, ["stop"]))
|
|
77
77
|
}, [
|
|
78
78
|
e.title ? (s(), a("div", D, [
|
|
79
79
|
r("div", {
|
|
80
|
-
class: d(["flex items-center justify-between
|
|
80
|
+
class: d(["flex items-center justify-between py-1 px-4 rounded-t-md", e.headerClass])
|
|
81
81
|
}, [
|
|
82
|
-
r("h3", K,
|
|
82
|
+
r("h3", K, p(e.title), 1),
|
|
83
83
|
v(V, {
|
|
84
84
|
rounded: "full",
|
|
85
85
|
size: "sm",
|
|
@@ -93,7 +93,7 @@ const D = {
|
|
|
93
93
|
r("div", {
|
|
94
94
|
class: d(["flex-1 overflow-y-auto px-4 pt-4 pb-3.5 min-h-0", e.bodyClass])
|
|
95
95
|
}, [
|
|
96
|
-
e.description ? (s(), a("p", M,
|
|
96
|
+
e.description ? (s(), a("p", M, p(e.description), 1)) : n("", !0),
|
|
97
97
|
e.body ? (s(), h(P(e.body), y({ key: 1 }, { ...e.bodyProps, ...t.$attrs }, { close: o }), null, 16)) : i(t.$slots, "default", {
|
|
98
98
|
key: 2,
|
|
99
99
|
close: o
|
|
@@ -18,6 +18,8 @@ declare function __VLS_template(): {
|
|
|
18
18
|
left?(_: {}): any;
|
|
19
19
|
left?(_: {}): any;
|
|
20
20
|
left?(_: {}): any;
|
|
21
|
+
left?(_: {}): any;
|
|
22
|
+
center?(_: {}): any;
|
|
21
23
|
center?(_: {}): any;
|
|
22
24
|
center?(_: {}): any;
|
|
23
25
|
center?(_: {}): any;
|
|
@@ -28,8 +30,12 @@ declare function __VLS_template(): {
|
|
|
28
30
|
default?(_: {}): any;
|
|
29
31
|
default?(_: {}): any;
|
|
30
32
|
'mobile-menu'?(_: {}): any;
|
|
33
|
+
'mobile-menu'?(_: {}): any;
|
|
34
|
+
};
|
|
35
|
+
refs: {
|
|
36
|
+
mobileTriggerRef: HTMLButtonElement;
|
|
37
|
+
mobileMenuRef: HTMLDivElement;
|
|
31
38
|
};
|
|
32
|
-
refs: {};
|
|
33
39
|
rootEl: HTMLElement;
|
|
34
40
|
};
|
|
35
41
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
@@ -51,9 +57,14 @@ declare const __VLS_component: import('vue').DefineComponent<NavbarProps, {}, {}
|
|
|
51
57
|
floating: boolean;
|
|
52
58
|
mobileBreakpoint: "sm" | "md" | "lg" | "xl";
|
|
53
59
|
logoClass: string;
|
|
60
|
+
menuClass: string;
|
|
54
61
|
rightClass: string;
|
|
55
62
|
mobileTriggerClass: string;
|
|
56
|
-
|
|
63
|
+
mobileMenuVariant: "sidepanel" | "dropdown";
|
|
64
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
65
|
+
mobileTriggerRef: HTMLButtonElement;
|
|
66
|
+
mobileMenuRef: HTMLDivElement;
|
|
67
|
+
}, HTMLElement>;
|
|
57
68
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
58
69
|
export default _default;
|
|
59
70
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { useRoute as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
1
|
+
import { defineComponent as R, ref as g, useSlots as V, onMounted as L, onUnmounted as N, computed as p, provide as P, watch as C, openBlock as t, createElementBlock as n, normalizeClass as i, Fragment as x, createElementVNode as r, renderSlot as s, createVNode as B, createBlock as y, resolveDynamicComponent as E, withCtx as k, createCommentVNode as d, toDisplayString as A, createTextVNode as D } from "vue";
|
|
2
|
+
import { useRoute as H } from "vue-router";
|
|
3
|
+
import { onClickOutside as U, useBreakpoints as F, breakpointsTailwind as Y } from "@vueuse/core";
|
|
4
|
+
import T from "../Icon.vue.js";
|
|
5
|
+
import q from "../SidePanel.vue.js";
|
|
6
|
+
import G from "../Logo.vue.js";
|
|
7
|
+
const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K = { key: 2 }, Q = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, W = { class: "space-y-1 p-2" }, X = { class: "space-y-1 p-2" }, Z = { class: "flex flex-col space-y-6 pt-4 h-full" }, _ = {
|
|
7
8
|
key: 0,
|
|
8
9
|
class: "flex flex-col space-y-1"
|
|
9
|
-
},
|
|
10
|
+
}, ee = {
|
|
10
11
|
key: 1,
|
|
11
12
|
class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
|
|
12
|
-
},
|
|
13
|
+
}, le = {
|
|
13
14
|
key: 2,
|
|
14
15
|
class: "mt-auto pt-2 border-t border-border px-3! py-2!"
|
|
15
|
-
},
|
|
16
|
+
}, ue = /* @__PURE__ */ R({
|
|
16
17
|
__name: "Navbar",
|
|
17
18
|
props: {
|
|
18
19
|
variant: { default: "header" },
|
|
19
20
|
position: { default: "sticky" },
|
|
20
21
|
centerPosition: { default: "center" },
|
|
21
|
-
glass: { type: Boolean, default: !
|
|
22
|
+
glass: { type: Boolean, default: !1 },
|
|
22
23
|
border: { type: Boolean, default: !0 },
|
|
23
24
|
floating: { type: Boolean, default: !1 },
|
|
24
25
|
class: { default: "" },
|
|
@@ -30,37 +31,47 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
|
|
|
30
31
|
mobileBreakpoint: { default: "md" },
|
|
31
32
|
logoClass: { default: "" },
|
|
32
33
|
contentClass: { default: "" },
|
|
34
|
+
menuClass: { default: "" },
|
|
33
35
|
rightClass: { default: "" },
|
|
34
|
-
mobileTriggerClass: { default: "" }
|
|
36
|
+
mobileTriggerClass: { default: "" },
|
|
37
|
+
mobileMenuVariant: { default: "sidepanel" }
|
|
35
38
|
},
|
|
36
39
|
emits: ["toggle-mobile"],
|
|
37
|
-
setup(m, { emit:
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
|
|
40
|
+
setup(m, { emit: oe }) {
|
|
41
|
+
const l = m, a = g(!1), b = g(!1);
|
|
42
|
+
V();
|
|
43
|
+
const w = g(null), h = g(null);
|
|
44
|
+
U(
|
|
45
|
+
w,
|
|
46
|
+
() => {
|
|
47
|
+
a.value = !1;
|
|
48
|
+
},
|
|
49
|
+
{ ignore: [h] }
|
|
50
|
+
);
|
|
51
|
+
const $ = () => {
|
|
52
|
+
b.value = window.scrollY > 10;
|
|
42
53
|
};
|
|
43
54
|
L(() => {
|
|
44
|
-
window.addEventListener("scroll",
|
|
45
|
-
}),
|
|
46
|
-
window.removeEventListener("scroll",
|
|
55
|
+
window.addEventListener("scroll", $, { passive: !0 });
|
|
56
|
+
}), N(() => {
|
|
57
|
+
window.removeEventListener("scroll", $);
|
|
47
58
|
});
|
|
48
|
-
const
|
|
49
|
-
const
|
|
59
|
+
const z = p(() => {
|
|
60
|
+
const e = l.variant === "sidebar", o = {
|
|
50
61
|
fixed: "fixed top-0 left-0 z-40",
|
|
51
62
|
sticky: "sticky top-0 z-40",
|
|
52
63
|
relative: "relative z-10",
|
|
53
64
|
absolute: "absolute top-0 left-0 w-full z-40"
|
|
54
|
-
}, f = "bg-body",
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
65
|
+
}, f = "bg-body", v = [
|
|
66
|
+
l.glass && (b.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
|
|
67
|
+
l.border && !l.floating ? e ? "border-r border-border" : "border-b border-border" : "",
|
|
68
|
+
l.floating ? "m-4 rounded shadow-lg border border-border/50" : "",
|
|
69
|
+
b.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
|
|
59
70
|
];
|
|
60
71
|
let c = "";
|
|
61
|
-
return
|
|
62
|
-
}), u =
|
|
63
|
-
const
|
|
72
|
+
return e ? c = u.value.sidebarLayout : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [f, o[l.position], ...v, c, l.class].join(" ");
|
|
73
|
+
}), u = p(() => {
|
|
74
|
+
const e = l.mobileBreakpoint || "md", o = {
|
|
64
75
|
sm: "sm:hidden",
|
|
65
76
|
md: "md:hidden",
|
|
66
77
|
lg: "lg:hidden",
|
|
@@ -70,32 +81,32 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
|
|
|
70
81
|
md: "hidden md:flex",
|
|
71
82
|
lg: "hidden lg:flex",
|
|
72
83
|
xl: "hidden xl:flex"
|
|
73
|
-
},
|
|
74
|
-
sm: `flex flex-col max-sm:w-full ${
|
|
75
|
-
md: `flex flex-col max-md:w-full ${
|
|
76
|
-
lg: `flex flex-col max-lg:w-full ${
|
|
77
|
-
xl: `flex flex-col max-xl:w-full ${
|
|
84
|
+
}, v = {
|
|
85
|
+
sm: `flex flex-col max-sm:w-full ${l.compact ? "w-20" : l.width} h-auto sm:h-full sm:max-h-screen`,
|
|
86
|
+
md: `flex flex-col max-md:w-full ${l.compact ? "w-20" : l.width} h-auto md:h-full md:max-h-screen`,
|
|
87
|
+
lg: `flex flex-col max-lg:w-full ${l.compact ? "w-20" : l.width} h-auto lg:h-full lg:max-h-screen`,
|
|
88
|
+
xl: `flex flex-col max-xl:w-full ${l.compact ? "w-20" : l.width} h-auto xl:h-full xl:max-h-screen`
|
|
78
89
|
}, c = {
|
|
79
90
|
sm: "sm:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
|
|
80
91
|
md: "md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
|
|
81
92
|
lg: "lg:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
|
|
82
93
|
xl: "xl:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background"
|
|
83
|
-
},
|
|
94
|
+
}, O = {
|
|
84
95
|
sm: "hidden sm:flex flex-col h-full w-full overflow-hidden",
|
|
85
96
|
md: "hidden md:flex flex-col h-full w-full overflow-hidden",
|
|
86
97
|
lg: "hidden lg:flex flex-col h-full w-full overflow-hidden",
|
|
87
98
|
xl: "hidden xl:flex flex-col h-full w-full overflow-hidden"
|
|
88
99
|
};
|
|
89
100
|
return {
|
|
90
|
-
mobileTrigger:
|
|
91
|
-
desktopContent: f[
|
|
92
|
-
sidebarLayout:
|
|
93
|
-
mobileHeader: c[
|
|
94
|
-
desktopSidebar:
|
|
101
|
+
mobileTrigger: o[e],
|
|
102
|
+
desktopContent: f[e],
|
|
103
|
+
sidebarLayout: v[e],
|
|
104
|
+
mobileHeader: c[e],
|
|
105
|
+
desktopSidebar: O[e]
|
|
95
106
|
};
|
|
96
|
-
}),
|
|
97
|
-
if (
|
|
98
|
-
switch (
|
|
107
|
+
}), S = p(() => {
|
|
108
|
+
if (l.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
|
|
109
|
+
switch (l.centerPosition) {
|
|
99
110
|
case "left":
|
|
100
111
|
return "flex items-center justify-start";
|
|
101
112
|
case "right":
|
|
@@ -104,77 +115,83 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
|
|
|
104
115
|
return `${u.value.desktopContent} items-center justify-center mx-auto`;
|
|
105
116
|
}
|
|
106
117
|
});
|
|
107
|
-
|
|
108
|
-
compact:
|
|
118
|
+
P("navbar-context", {
|
|
119
|
+
compact: p(() => l.compact)
|
|
109
120
|
});
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
() =>
|
|
121
|
+
const M = H();
|
|
122
|
+
C(
|
|
123
|
+
() => M.path,
|
|
113
124
|
() => {
|
|
114
|
-
|
|
125
|
+
a.value = !1;
|
|
115
126
|
}
|
|
116
|
-
)
|
|
117
|
-
|
|
127
|
+
);
|
|
128
|
+
const j = F(Y).greater(l.mobileBreakpoint);
|
|
129
|
+
return C(j, (e) => {
|
|
130
|
+
e && (a.value = !1);
|
|
131
|
+
}), (e, o) => (t(), n("nav", {
|
|
132
|
+
class: i(z.value),
|
|
118
133
|
role: "navigation"
|
|
119
134
|
}, [
|
|
120
|
-
m.variant === "header" ? (
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
isOpen:
|
|
124
|
-
toggle: () =>
|
|
135
|
+
m.variant === "header" ? (t(), n(x, { key: 0 }, [
|
|
136
|
+
r("div", I, [
|
|
137
|
+
s(e.$slots, "mobile-trigger", {
|
|
138
|
+
isOpen: a.value,
|
|
139
|
+
toggle: () => a.value = !a.value
|
|
125
140
|
}, () => [
|
|
126
|
-
|
|
141
|
+
r("button", {
|
|
127
142
|
type: "button",
|
|
128
|
-
|
|
129
|
-
|
|
143
|
+
ref_key: "mobileTriggerRef",
|
|
144
|
+
ref: h,
|
|
145
|
+
class: i(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [u.value.mobileTrigger, l.mobileTriggerClass]]),
|
|
146
|
+
onClick: o[0] || (o[0] = (f) => a.value = !a.value)
|
|
130
147
|
}, [
|
|
131
|
-
|
|
148
|
+
B(T, {
|
|
132
149
|
icon: "lucide:menu",
|
|
133
150
|
class: "w-5 h-5"
|
|
134
151
|
}),
|
|
135
|
-
|
|
152
|
+
o[3] || (o[3] = r("span", { class: "sr-only" }, "Open Menu", -1))
|
|
136
153
|
], 2)
|
|
137
154
|
]),
|
|
138
|
-
|
|
155
|
+
e.$slots?.logo ? (t(), n("div", {
|
|
139
156
|
key: 0,
|
|
140
|
-
class:
|
|
157
|
+
class: i(["shrink-0", l.logoClass])
|
|
141
158
|
}, [
|
|
142
|
-
|
|
143
|
-
(
|
|
144
|
-
src:
|
|
159
|
+
s(e.$slots, "logo", {}, () => [
|
|
160
|
+
(t(), y(E(l.logo ? "img" : "div"), {
|
|
161
|
+
src: l.logo,
|
|
145
162
|
class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
|
|
146
163
|
}, {
|
|
147
|
-
default:
|
|
148
|
-
|
|
164
|
+
default: k(() => [
|
|
165
|
+
l.logo ? d("", !0) : (t(), y(G, {
|
|
149
166
|
key: 0,
|
|
150
167
|
class: "h-6 w-6"
|
|
151
168
|
})),
|
|
152
|
-
!
|
|
169
|
+
!l.logo && l.logoAlt ? (t(), n("span", J, A(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), n("span", K, "Brand"))
|
|
153
170
|
]),
|
|
154
171
|
_: 1
|
|
155
172
|
}, 8, ["src"]))
|
|
156
173
|
])
|
|
157
174
|
], 2)) : d("", !0),
|
|
158
|
-
|
|
175
|
+
e.$slots?.left ? (t(), n("div", {
|
|
159
176
|
key: 1,
|
|
160
|
-
class:
|
|
177
|
+
class: i(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", u.value.desktopContent])
|
|
161
178
|
}, [
|
|
162
|
-
|
|
179
|
+
s(e.$slots, "left")
|
|
163
180
|
], 2)) : d("", !0)
|
|
164
181
|
]),
|
|
165
|
-
|
|
182
|
+
e.$slots?.center ? (t(), n("div", {
|
|
166
183
|
key: 0,
|
|
167
|
-
class:
|
|
168
|
-
|
|
184
|
+
class: i([
|
|
185
|
+
S.value,
|
|
169
186
|
// Width constraint to ensure it doesn't crush others, but allows simple resizing
|
|
170
187
|
"max-w-full",
|
|
171
|
-
|
|
188
|
+
l.contentClass
|
|
172
189
|
])
|
|
173
190
|
}, [
|
|
174
|
-
|
|
191
|
+
s(e.$slots, "center")
|
|
175
192
|
], 2)) : d("", !0),
|
|
176
|
-
|
|
177
|
-
class:
|
|
193
|
+
r("div", {
|
|
194
|
+
class: i(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
|
|
178
195
|
{
|
|
179
196
|
// Always push to end unless Center is pushing it.
|
|
180
197
|
// If Center is 'center' (mx-auto) or 'right' (ml-auto), this naturally falls to end.
|
|
@@ -183,99 +200,121 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
|
|
|
183
200
|
// If center is 'right', Center has ml-auto. Right just sits next to it.
|
|
184
201
|
// But if we add ml-auto here too, they might split space? No, flexbox parses strictly.
|
|
185
202
|
},
|
|
186
|
-
|
|
203
|
+
l.rightClass
|
|
187
204
|
]])
|
|
188
205
|
}, [
|
|
189
|
-
|
|
206
|
+
s(e.$slots, "right")
|
|
190
207
|
], 2)
|
|
191
|
-
], 64)) : (
|
|
192
|
-
|
|
193
|
-
class:
|
|
208
|
+
], 64)) : (t(), n(x, { key: 1 }, [
|
|
209
|
+
r("div", {
|
|
210
|
+
class: i(u.value.mobileHeader)
|
|
194
211
|
}, [
|
|
195
|
-
|
|
196
|
-
|
|
212
|
+
e.$slots?.logo ? s(e.$slots, "logo", { key: 0 }, () => [
|
|
213
|
+
o[4] || (o[4] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
|
|
197
214
|
]) : d("", !0),
|
|
198
|
-
|
|
199
|
-
isOpen:
|
|
200
|
-
toggle: () =>
|
|
215
|
+
s(e.$slots, "mobile-trigger", {
|
|
216
|
+
isOpen: a.value,
|
|
217
|
+
toggle: () => a.value = !a.value
|
|
201
218
|
}, () => [
|
|
202
|
-
|
|
219
|
+
r("button", {
|
|
203
220
|
type: "button",
|
|
204
|
-
|
|
205
|
-
|
|
221
|
+
ref_key: "mobileTriggerRef",
|
|
222
|
+
ref: h,
|
|
223
|
+
class: i(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
|
|
224
|
+
onClick: o[1] || (o[1] = (f) => a.value = !a.value)
|
|
206
225
|
}, [
|
|
207
|
-
|
|
226
|
+
B(T, {
|
|
208
227
|
icon: "lucide:menu",
|
|
209
228
|
class: "w-5 h-5"
|
|
210
229
|
}),
|
|
211
|
-
|
|
230
|
+
o[5] || (o[5] = r("span", { class: "sr-only" }, "Open Menu", -1))
|
|
212
231
|
], 2)
|
|
213
232
|
])
|
|
214
233
|
], 2),
|
|
215
|
-
|
|
216
|
-
class:
|
|
234
|
+
r("div", {
|
|
235
|
+
class: i(u.value.desktopSidebar)
|
|
217
236
|
}, [
|
|
218
|
-
|
|
237
|
+
e.$slots?.logo ? (t(), n("div", {
|
|
219
238
|
key: 0,
|
|
220
|
-
class:
|
|
239
|
+
class: i(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
|
|
221
240
|
}, [
|
|
222
|
-
|
|
223
|
-
|
|
241
|
+
s(e.$slots, "logo", {}, () => [
|
|
242
|
+
o[6] || (o[6] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
|
|
224
243
|
])
|
|
225
244
|
], 2)) : d("", !0),
|
|
226
|
-
|
|
227
|
-
class:
|
|
245
|
+
r("div", {
|
|
246
|
+
class: i(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
|
|
228
247
|
}, [
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
248
|
+
s(e.$slots, "left"),
|
|
249
|
+
s(e.$slots, "default"),
|
|
250
|
+
s(e.$slots, "center")
|
|
232
251
|
], 2),
|
|
233
|
-
|
|
252
|
+
e.$slots?.right ? (t(), n("div", {
|
|
234
253
|
key: 1,
|
|
235
|
-
class:
|
|
254
|
+
class: i(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
|
|
236
255
|
}, [
|
|
237
|
-
|
|
256
|
+
s(e.$slots, "right")
|
|
238
257
|
], 2)) : d("", !0)
|
|
239
258
|
], 2)
|
|
240
259
|
], 64)),
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
260
|
+
l.mobileMenuVariant === "dropdown" ? (t(), n(x, { key: 2 }, [
|
|
261
|
+
a.value ? (t(), n("div", {
|
|
262
|
+
key: 0,
|
|
263
|
+
ref_key: "mobileMenuRef",
|
|
264
|
+
ref: w,
|
|
265
|
+
class: i(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
|
|
266
|
+
}, [
|
|
267
|
+
r("div", Q, [
|
|
268
|
+
s(e.$slots, "mobile-menu", {}, () => [
|
|
269
|
+
r("div", W, [
|
|
270
|
+
s(e.$slots, "left")
|
|
271
|
+
]),
|
|
272
|
+
o[7] || (o[7] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
|
|
273
|
+
r("div", X, [
|
|
274
|
+
s(e.$slots, "center")
|
|
275
|
+
])
|
|
276
|
+
])
|
|
277
|
+
])
|
|
278
|
+
], 2)) : d("", !0)
|
|
279
|
+
], 64)) : (t(), y(q, {
|
|
280
|
+
key: 3,
|
|
281
|
+
show: a.value,
|
|
282
|
+
"onUpdate:show": o[2] || (o[2] = (f) => a.value = f),
|
|
244
283
|
position: "left",
|
|
245
284
|
size: "sm",
|
|
246
285
|
triggerClass: u.value.mobileTrigger,
|
|
247
|
-
class:
|
|
286
|
+
class: i(["z-60", u.value.mobileTrigger]),
|
|
248
287
|
headerClass: "pl-3! pr-4.5! py-3!",
|
|
249
288
|
bodyClass: "p-0!"
|
|
250
289
|
}, {
|
|
251
|
-
header:
|
|
252
|
-
|
|
253
|
-
|
|
290
|
+
header: k(() => [
|
|
291
|
+
s(e.$slots, "logo", {}, () => [
|
|
292
|
+
o[8] || (o[8] = D("Brand", -1))
|
|
254
293
|
])
|
|
255
294
|
]),
|
|
256
|
-
default:
|
|
257
|
-
|
|
258
|
-
m.variant === "header" ? (
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
295
|
+
default: k(() => [
|
|
296
|
+
r("div", Z, [
|
|
297
|
+
m.variant === "header" ? (t(), n("div", _, [
|
|
298
|
+
s(e.$slots, "mobile-menu", {}, () => [
|
|
299
|
+
s(e.$slots, "left"),
|
|
300
|
+
o[9] || (o[9] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
|
|
301
|
+
s(e.$slots, "center")
|
|
263
302
|
])
|
|
264
|
-
])) : (
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
303
|
+
])) : (t(), n("div", ee, [
|
|
304
|
+
s(e.$slots, "left"),
|
|
305
|
+
s(e.$slots, "default"),
|
|
306
|
+
s(e.$slots, "center")
|
|
268
307
|
])),
|
|
269
|
-
|
|
270
|
-
|
|
308
|
+
e.$slots?.right ? (t(), n("div", le, [
|
|
309
|
+
s(e.$slots, "right")
|
|
271
310
|
])) : d("", !0)
|
|
272
311
|
])
|
|
273
312
|
]),
|
|
274
313
|
_: 3
|
|
275
|
-
}, 8, ["show", "triggerClass", "class"])
|
|
314
|
+
}, 8, ["show", "triggerClass", "class"]))
|
|
276
315
|
], 2));
|
|
277
316
|
}
|
|
278
317
|
});
|
|
279
318
|
export {
|
|
280
|
-
|
|
319
|
+
ue as default
|
|
281
320
|
};
|
package/components/Slider.vue.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as I, ref as k, watch as N, computed as r, openBlock as i, createElementBlock as v, normalizeClass as s, createBlock as R, createCommentVNode as f, toDisplayString as C, createElementVNode as b, normalizeStyle as x, withDirectives as F, vModelText as H } from "vue";
|
|
2
|
+
import U from "./Icon.vue.js";
|
|
3
|
+
const W = {
|
|
4
4
|
key: 1,
|
|
5
5
|
class: "text-sm font-medium whitespace-nowrap cursor-pointer"
|
|
6
|
-
}, j = ["min", "max", "step", "disabled"], G = /* @__PURE__ */
|
|
6
|
+
}, j = ["min", "max", "step", "disabled"], G = /* @__PURE__ */ I({
|
|
7
7
|
__name: "Slider",
|
|
8
8
|
props: {
|
|
9
9
|
min: { default: 0 },
|
|
@@ -19,39 +19,53 @@ const U = {
|
|
|
19
19
|
size: { default: "md" }
|
|
20
20
|
},
|
|
21
21
|
emits: ["update:modelValue", "change", "iconClick"],
|
|
22
|
-
setup(
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
() =>
|
|
22
|
+
setup(l, { emit: $ }) {
|
|
23
|
+
const t = l, d = $, o = k(!1), g = k(!1), u = k(t.modelValue);
|
|
24
|
+
N(
|
|
25
|
+
() => t.modelValue,
|
|
26
26
|
(n) => {
|
|
27
|
-
|
|
27
|
+
u.value = n;
|
|
28
28
|
}
|
|
29
29
|
);
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
const h = r(() => t.centerOrigin !== void 0 ? t.centerOrigin : t.min < 0 && t.max > 0), y = r(() => t.max - t.min), p = r(() => (u.value - t.min) / y.value * 100), w = r(() => (0 - t.min) / y.value * 100), V = r(() => {
|
|
31
|
+
switch (t.size) {
|
|
32
|
+
case "xs":
|
|
33
|
+
return 10;
|
|
34
|
+
case "sm":
|
|
35
|
+
return 12;
|
|
36
|
+
case "lg":
|
|
37
|
+
return 16;
|
|
38
|
+
default:
|
|
39
|
+
return 14;
|
|
40
|
+
}
|
|
41
|
+
}), c = (n) => {
|
|
42
|
+
const e = V.value / 2, a = V.value;
|
|
43
|
+
return `calc(${n}% + (${e}px - ${a * (n / 100)}px))`;
|
|
44
|
+
}, z = r(() => {
|
|
45
|
+
if (h.value) {
|
|
46
|
+
const n = Math.min(p.value, w.value), e = Math.max(p.value, w.value), a = c(n), E = c(e);
|
|
33
47
|
return {
|
|
34
48
|
left: a,
|
|
35
|
-
width: `calc(${
|
|
49
|
+
width: `calc(${E} - ${a})`
|
|
36
50
|
};
|
|
37
51
|
} else
|
|
38
52
|
return {
|
|
39
53
|
left: "0%",
|
|
40
|
-
width: c(
|
|
54
|
+
width: c(p.value)
|
|
41
55
|
};
|
|
42
|
-
}),
|
|
43
|
-
left: c(
|
|
44
|
-
})),
|
|
45
|
-
d("update:modelValue",
|
|
46
|
-
},
|
|
47
|
-
d("change",
|
|
48
|
-
},
|
|
49
|
-
if (
|
|
50
|
-
const n =
|
|
51
|
-
|
|
52
|
-
},
|
|
53
|
-
const n =
|
|
54
|
-
return
|
|
56
|
+
}), M = r(() => h.value ? u.value < 0 ? "rounded-r-none" : u.value > 0 ? "rounded-l-none" : "" : ""), B = r(() => ({
|
|
57
|
+
left: c(p.value)
|
|
58
|
+
})), S = () => {
|
|
59
|
+
d("update:modelValue", u.value);
|
|
60
|
+
}, D = () => {
|
|
61
|
+
d("change", u.value), o.value = !1;
|
|
62
|
+
}, P = r(() => Math.abs(t.modelValue) > 1e-3), O = () => {
|
|
63
|
+
if (t.disabled) return;
|
|
64
|
+
const n = h.value ? 0 : t.min;
|
|
65
|
+
u.value = n, d("update:modelValue", n), d("change", n);
|
|
66
|
+
}, T = r(() => {
|
|
67
|
+
const n = t.step.toString().split(".")[1]?.length || 0;
|
|
68
|
+
return u.value.toFixed(n);
|
|
55
69
|
}), m = r(() => ({
|
|
56
70
|
xs: {
|
|
57
71
|
track: "h-0.5",
|
|
@@ -77,24 +91,24 @@ const U = {
|
|
|
77
91
|
wrapper: "h-7",
|
|
78
92
|
tick: "h-4"
|
|
79
93
|
}
|
|
80
|
-
})[
|
|
94
|
+
})[t.size]);
|
|
81
95
|
return (n, e) => (i(), v("div", {
|
|
82
|
-
class: s(["slider-wrapper flex items-center gap-3 w-full select-none touch-none", { "opacity-50 pointer-events-none":
|
|
96
|
+
class: s(["slider-wrapper flex items-center gap-3 w-full select-none touch-none", { "opacity-50 pointer-events-none": l.disabled }]),
|
|
83
97
|
onMouseenter: e[6] || (e[6] = (a) => g.value = !0),
|
|
84
98
|
onMouseleave: e[7] || (e[7] = (a) => g.value = !1)
|
|
85
99
|
}, [
|
|
86
|
-
|
|
100
|
+
l.label || l.icon ? (i(), v("div", {
|
|
87
101
|
key: 0,
|
|
88
|
-
class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary":
|
|
102
|
+
class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary": o.value || g.value }, l.labelClass || "text-muted-foreground"]]),
|
|
89
103
|
onClick: e[0] || (e[0] = (a) => d("iconClick")),
|
|
90
104
|
title: "Double-click to reset"
|
|
91
105
|
}, [
|
|
92
|
-
|
|
106
|
+
l.icon ? (i(), R(U, {
|
|
93
107
|
key: 0,
|
|
94
|
-
icon:
|
|
108
|
+
icon: l.icon,
|
|
95
109
|
class: "h-4 w-4"
|
|
96
110
|
}, null, 8, ["icon"])) : f("", !0),
|
|
97
|
-
|
|
111
|
+
l.label ? (i(), v("label", W, C(l.label), 1)) : f("", !0)
|
|
98
112
|
], 2)) : f("", !0),
|
|
99
113
|
b("div", {
|
|
100
114
|
class: s(["relative flex-1 flex items-center group", m.value.wrapper])
|
|
@@ -102,61 +116,61 @@ const U = {
|
|
|
102
116
|
b("div", {
|
|
103
117
|
class: s(["absolute w-full bg-secondary rounded-full overflow-hidden", m.value.track])
|
|
104
118
|
}, null, 2),
|
|
105
|
-
|
|
119
|
+
h.value ? (i(), v("div", {
|
|
106
120
|
key: 0,
|
|
107
121
|
class: s(["absolute top-1/2 w-0.5 bg-muted-foreground/30 rounded transform -translate-y-1/2 z-0", m.value.tick]),
|
|
108
|
-
style:
|
|
122
|
+
style: x({ left: c(w.value) })
|
|
109
123
|
}, null, 6)) : f("", !0),
|
|
110
124
|
b("div", {
|
|
111
125
|
class: s(["absolute bg-primary rounded-full will-change-transform", [
|
|
112
126
|
{
|
|
113
|
-
"bg-muted-foreground":
|
|
114
|
-
"transition-all duration-75 ease-out": !
|
|
115
|
-
"duration-0":
|
|
127
|
+
"bg-muted-foreground": l.disabled,
|
|
128
|
+
"transition-all duration-75 ease-out": !o.value,
|
|
129
|
+
"duration-0": o.value
|
|
116
130
|
},
|
|
117
131
|
m.value.track,
|
|
118
|
-
|
|
132
|
+
M.value
|
|
119
133
|
]]),
|
|
120
|
-
style:
|
|
134
|
+
style: x(z.value)
|
|
121
135
|
}, null, 6),
|
|
122
136
|
b("div", {
|
|
123
|
-
class: s(["absolute top-1/2 bg-background border border-border shadow-sm rounded-full transform -translate-y-1/2 -translate-x-1/2 pointer-events-none transition-transform duration-100 ease-out z-10", [
|
|
137
|
+
class: s(["absolute top-1/2 bg-background -ml-px border border-border shadow-sm rounded-full transform -translate-y-1/2 -translate-x-1/2 pointer-events-none transition-transform duration-100 ease-out z-10", [
|
|
124
138
|
{
|
|
125
|
-
"border-primary shadow-md scale-110":
|
|
126
|
-
"border-primary":
|
|
139
|
+
"border-primary shadow-md scale-110": o.value,
|
|
140
|
+
"border-primary": P.value
|
|
127
141
|
},
|
|
128
142
|
m.value.thumb
|
|
129
143
|
]]),
|
|
130
|
-
style:
|
|
144
|
+
style: x(B.value)
|
|
131
145
|
}, null, 6),
|
|
132
|
-
|
|
146
|
+
F(b("input", {
|
|
133
147
|
type: "range",
|
|
134
|
-
"onUpdate:modelValue": e[1] || (e[1] = (a) =>
|
|
135
|
-
min:
|
|
136
|
-
max:
|
|
137
|
-
step:
|
|
138
|
-
disabled:
|
|
139
|
-
onInput:
|
|
140
|
-
onChange:
|
|
141
|
-
onMousedown: e[2] || (e[2] = (a) =>
|
|
142
|
-
onTouchstart: e[3] || (e[3] = (a) =>
|
|
143
|
-
onMouseup: e[4] || (e[4] = (a) =>
|
|
144
|
-
onTouchend: e[5] || (e[5] = (a) =>
|
|
148
|
+
"onUpdate:modelValue": e[1] || (e[1] = (a) => u.value = a),
|
|
149
|
+
min: l.min,
|
|
150
|
+
max: l.max,
|
|
151
|
+
step: l.step,
|
|
152
|
+
disabled: l.disabled,
|
|
153
|
+
onInput: S,
|
|
154
|
+
onChange: D,
|
|
155
|
+
onMousedown: e[2] || (e[2] = (a) => o.value = !0),
|
|
156
|
+
onTouchstart: e[3] || (e[3] = (a) => o.value = !0),
|
|
157
|
+
onMouseup: e[4] || (e[4] = (a) => o.value = !1),
|
|
158
|
+
onTouchend: e[5] || (e[5] = (a) => o.value = !1),
|
|
145
159
|
class: "slider-input absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20 m-0 p-0"
|
|
146
160
|
}, null, 40, j), [
|
|
147
161
|
[
|
|
148
|
-
|
|
149
|
-
|
|
162
|
+
H,
|
|
163
|
+
u.value,
|
|
150
164
|
void 0,
|
|
151
165
|
{ number: !0 }
|
|
152
166
|
]
|
|
153
167
|
])
|
|
154
168
|
], 2),
|
|
155
|
-
|
|
169
|
+
l.showValue ? (i(), v("span", {
|
|
156
170
|
key: 1,
|
|
157
|
-
onDblclick:
|
|
171
|
+
onDblclick: O,
|
|
158
172
|
class: "font-mono tabular-nums text-muted-foreground text-right min-w-6 text-sm"
|
|
159
|
-
},
|
|
173
|
+
}, C(T.value), 33)) : f("", !0)
|
|
160
174
|
], 34));
|
|
161
175
|
}
|
|
162
176
|
});
|
|
@@ -39,7 +39,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
|
|
|
39
39
|
const k = (e) => {
|
|
40
40
|
e.disabled || (v("update:modelValue", e.value), v("change", e.value));
|
|
41
41
|
}, C = p(() => ["inline-flex rounded-lg relative isolate", {
|
|
42
|
-
surface: "bg-secondary p-1",
|
|
42
|
+
surface: "bg-secondary/80 p-1",
|
|
43
43
|
primary: "bg-secondary p-1",
|
|
44
44
|
secondary: "bg-secondary p-1",
|
|
45
45
|
danger: "bg-danger/10 p-1",
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -131,6 +131,7 @@
|
|
|
131
131
|
.dark .tooltip-container,
|
|
132
132
|
.bg-card,
|
|
133
133
|
.theme-section,
|
|
134
|
+
.light,
|
|
134
135
|
:root {
|
|
135
136
|
|
|
136
137
|
--color-white: #ffffff;
|
|
@@ -197,11 +198,11 @@
|
|
|
197
198
|
--color-background: var(--color-body);
|
|
198
199
|
--color-foreground: var(--color-gray-900);
|
|
199
200
|
|
|
200
|
-
--color-border: color-mix(in oklab, var(--color-mixture-1)
|
|
201
|
-
--color-input: var(--color-
|
|
201
|
+
--color-border: color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2));
|
|
202
|
+
--color-input: color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2));
|
|
202
203
|
|
|
203
204
|
|
|
204
|
-
--color-secondary: color-mix(in oklab, var(--color-mixture-1)
|
|
205
|
+
--color-secondary: color-mix(in oklab, var(--color-mixture-1) 94.8%, var(--color-mixture-2));
|
|
205
206
|
--color-secondary-foreground: var(--color-foreground);
|
|
206
207
|
|
|
207
208
|
--color-muted-light: var(--color-gray-50);
|
|
@@ -222,6 +223,13 @@
|
|
|
222
223
|
--date-picker-radius: var(--radius) !important;
|
|
223
224
|
}
|
|
224
225
|
|
|
226
|
+
.light {
|
|
227
|
+
--color-white: #ffffff !important;
|
|
228
|
+
--color-mixture-1: #ffffff !important;
|
|
229
|
+
--color-mixture-2: #0c0c0c !important;
|
|
230
|
+
background-color: var(--color-white);
|
|
231
|
+
}
|
|
232
|
+
|
|
225
233
|
.dark {
|
|
226
234
|
--color-white: #0b0b0b !important;
|
|
227
235
|
--color-mixture-1: #0c0c0c !important;
|
|
@@ -265,7 +273,7 @@
|
|
|
265
273
|
|
|
266
274
|
/* Variants (vlite3 custom) */
|
|
267
275
|
--color-primary-light: #212121;
|
|
268
|
-
--color-primary: #
|
|
276
|
+
--color-primary: #E4E6EA;
|
|
269
277
|
--color-primary-dark: #d4d4d8;
|
|
270
278
|
--color-primary-foreground: #18181b;
|
|
271
279
|
--color-primary-fg: #18181b;
|
package/types/navbar.type.d.ts
CHANGED
|
@@ -27,6 +27,8 @@ export interface NavbarProps {
|
|
|
27
27
|
mobileBreakpoint?: 'sm' | 'md' | 'lg' | 'xl';
|
|
28
28
|
logoClass?: string;
|
|
29
29
|
contentClass?: string;
|
|
30
|
+
menuClass?: string;
|
|
30
31
|
rightClass?: string;
|
|
31
32
|
mobileTriggerClass?: string;
|
|
33
|
+
mobileMenuVariant?: 'sidepanel' | 'dropdown';
|
|
32
34
|
}
|