@flux-ui/dashboard 3.0.0-next.23 → 3.0.0-next.25

package/dist/component/FluxDashboard.d.ts

@@ -0,0 +1,17 @@
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Slots = {
+    default(): VNode;
+    header?(): VNode;
+    navigation?(): VNode;
+    menu?(): VNode;
+    side?(): VNode;
+};
+declare const __VLS_base: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxDashboardContent.d.ts

@@ -0,0 +1,14 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxDashboardHeader.d.ts

@@ -0,0 +1,21 @@
+import { FluxIconName } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly icon?: FluxIconName;
+    readonly title?: string;
+};
+declare var __VLS_8: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_8) => any;
+} & {
+    end?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxDashboardMenu.d.ts

@@ -0,0 +1,23 @@
+import { FluxIconName } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly icon?: FluxIconName;
+    readonly title?: string;
+};
+declare var __VLS_7: {}, __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    'top-bar-start'?: (props: typeof __VLS_7) => any;
+} & {
+    'top-bar-end'?: (props: typeof __VLS_19) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxDashboardNavigation.d.ts

@@ -0,0 +1,18 @@
+import { FluxTo } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    logoLocation?: FluxTo;
+};
+type __VLS_Slots = {
+    default(): any;
+    logo?(): any;
+};
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxDashboardSide.d.ts

@@ -0,0 +1,21 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly title: string;
+};
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    'top-bar-start'?: (props: typeof __VLS_7) => any;
+} & {
+    'top-bar-end'?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxDashboardTopBar.d.ts

@@ -0,0 +1,14 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/index.d.ts

@@ -1,7 +1,6 @@
-export { default as FluxDashboard } from './FluxDashboard.vue';
-export { default as FluxDashboardContent } from './FluxDashboardContent.vue';
-export { default as FluxDashboardHeader } from './FluxDashboardHeader.vue';
-export { default as FluxDashboardMenu } from './FluxDashboardMenu.vue';
-export { default as FluxDashboardNavigation } from './FluxDashboardNavigation.vue';
-export { default as FluxDashboardSide } from './FluxDashboardSide.vue';
-//# sourceMappingURL=index.d.ts.map
+export { default as FluxDashboard } from './FluxDashboard';
+export { default as FluxDashboardContent } from './FluxDashboardContent';
+export { default as FluxDashboardHeader } from './FluxDashboardHeader';
+export { default as FluxDashboardMenu } from './FluxDashboardMenu';
+export { default as FluxDashboardNavigation } from './FluxDashboardNavigation';
+export { default as FluxDashboardSide } from './FluxDashboardSide';

package/dist/composable/index.d.ts

@@ -1,2 +1 @@
 export { default as useDashboardInjection } from './useDashboardInjection';
-//# sourceMappingURL=index.d.ts.map

package/dist/composable/useDashboardInjection.d.ts

@@ -1,3 +1,2 @@
 import { FluxDashboardInjection } from '../data';
 export default function (): FluxDashboardInjection;
-//# sourceMappingURL=useDashboardInjection.d.ts.map

package/dist/data/index.d.ts

@@ -4,4 +4,3 @@ export type FluxDashboardInjection = {
     readonly isMenuCollapsed: Ref<boolean>;
     readonly isNavigationCollapsed: Ref<boolean>;
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/index.css

@@ -1,13 +1,13 @@
 :root {
-  --dashboard-background: var(--gray-0);
+  --dashboard-background: var(--gray-25);
   --dashboard-duration: 360ms;
-  --dashboard-navigation-background: var(--primary-11);
-  --dashboard-navigation-foreground: var(--primary-0);
+  --dashboard-navigation-background: var(--primary-950);
+  --dashboard-navigation-foreground: var(--primary-25);
 }
 
 [dark] {
-  --dashboard-navigation-background: color-mix(in oklch, var(--gray-0), black 25%);
-  --dashboard-navigation-foreground: var(--gray-9);
+  --dashboard-navigation-background: color-mix(in srgb, var(--gray-25), black 25%);
+  --dashboard-navigation-foreground: var(--gray-800);
 }
 
 body:has(.root > .dashboard) {
@@ -84,7 +84,7 @@ body:has(.root > .dashboard) {
   padding-right: 30px;
 }
 .dashboard-content > .table {
-  border-top: 1px solid var(--gray-2);
+  border-top: 1px solid var(--surface-stroke);
 }
 .dashboard-content > .table .table-cell:first-child .table-cell-content {
   padding-left: 30px;
@@ -107,7 +107,7 @@ body:has(.root > .dashboard) {
   align-items: center;
   flex-flow: row;
   gap: 15px;
-  background: oklch(from var(--gray-0) l c h/0.9);
+  background: rgb(from var(--gray-25) r g b/0.9);
   backdrop-filter: blur(10px) saturate(180%);
   z-index: 100;
 }
@@ -133,7 +133,7 @@ body:has(.root > .dashboard) {
 }
 
 [dark] .dashboard-header-scrolled {
-  box-shadow: 0 1px 0 var(--gray-1), var(--shadow-md);
+  box-shadow: 0 1px 0 var(--gray-50), var(--shadow-md);
 }
 
 @media (max-width: 1023.98px) {
@@ -144,18 +144,18 @@ body:has(.root > .dashboard) {
     display: none;
   }
 }.dashboard-pane {
-  background: var(--gray-1);
+  background: var(--gray-50);
   overflow: auto;
   z-index: 200;
 }
 .dashboard-pane .menu-sub-header {
-  background: linear-gradient(to bottom, var(--gray-1) 75%, transparent);
+  background: linear-gradient(to bottom, var(--gray-50) 75%, transparent);
 }
 .dashboard-pane .dashboard-top-bar {
-  background: oklch(from var(--gray-1) l c h/0.9);
+  background: rgb(from var(--gray-50) r g b/0.9);
 }
 .dashboard-pane .filter {
-  --background: var(--gray-1);
+  --background: var(--gray-50);
   max-height: calc(100dvh - 84px);
   margin-top: -9px;
   padding: 9px 18px 18px;
@@ -182,7 +182,7 @@ body:has(.root > .dashboard) {
 }
 
 .dashboard-menu {
-  border-right: 1px solid var(--gray-2);
+  border-right: 1px solid var(--surface-stroke);
 }
 
 .dashboard-menu-body {
@@ -190,7 +190,7 @@ body:has(.root > .dashboard) {
 }
 
 .dashboard-side {
-  border-left: 1px solid var(--gray-2);
+  border-left: 1px solid var(--surface-stroke);
 }
 
 @media (min-width: 1024px) {
@@ -222,7 +222,7 @@ body:has(.root > .dashboard) {
   margin: 3px 15px;
 }
 .dashboard-navigation .divider-line {
-  background: var(--primary-10);
+  background: var(--primary-900);
 }
 .dashboard-navigation .menu {
   flex-grow: 1;
@@ -237,14 +237,14 @@ body:has(.root > .dashboard) {
 }
 @media (hover: hover) {
   .dashboard-navigation .menu-item:hover {
-    background: var(--primary-10);
+    background: var(--primary-900);
   }
 }
 .dashboard-navigation .menu-item:active {
-  background: var(--primary-9);
+  background: var(--primary-800);
 }
 .dashboard-navigation .menu-item-highlighted {
-  background: oklch(from var(--primary-10) l c h/0.5);
+  background: var(--primary-900);
 }
 .dashboard-navigation .menu-item-icon {
   color: var(--dashboard-navigation-foreground);
@@ -260,18 +260,18 @@ body:has(.root > .dashboard) {
 }
 
 [dark] .dashboard-navigation .divider-line {
-  background: var(--gray-2);
+  background: var(--gray-100);
 }
 @media (hover: hover) {
   [dark] .dashboard-navigation .menu-item:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
   }
 }
 [dark] .dashboard-navigation .menu-item:active {
-  background: var(--gray-3);
+  background: var(--gray-200);
 }
 [dark] .dashboard-navigation .menu-item-highlighted {
-  background: var(--gray-1);
+  background: var(--gray-50);
 }
 
 .dashboard-navigation-logo {
@@ -301,11 +301,11 @@ body:has(.root > .dashboard) {
   display: block;
   inset: 0;
   content: "";
-  background: var(--gray-1);
+  background: var(--gray-50);
 }
 
 .dashboard:not(:has(.dashboard-menu)) .dashboard-navigation-rounding-fix::before {
-  background: var(--gray-0);
+  background: var(--gray-25);
 }
 
 @media (min-width: 1024px) {
@@ -364,7 +364,7 @@ body:has(.root > .dashboard) {
     width: 100dvw;
     height: 100dvh;
     content: "";
-    background: oklch(from var(--gray-3) l c h/0.5);
+    background: rgb(from var(--gray-200) r g b/0.5);
     backdrop-filter: blur(3px) saturate(180%);
     transition: var(--dashboard-duration) var(--swift-out);
     transition-property: background, backdrop-filter;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export * from './component';
 export * from './composable';
 export * from './data';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -18,19 +18,19 @@ var X = class {
 	}
 	#t = [];
 	#e = [];
-	add(e, t, o = !0) {
-		let n = {
+	add(e, t, n = !0) {
+		let o = {
 			id: e,
 			setEnabled: t,
 			isEnabled: !0
 		};
-		if (this.current && this.toggle(this.current, !1), this.#e.push(n), o) this.toggle(n, !0), this.emit();
+		if (this.current && this.toggle(this.current, !1), this.#e.push(o), n) this.toggle(o, !0), this.emit();
 	}
 	remove(e) {
 		let t = this.#e.find((s) => s.id === e);
 		t && this.toggle(t, !1);
-		let n = this.current?.id === e;
-		this.#e = this.#e.filter((s) => s.id !== e), n && this.current && this.toggle(this.current, !0), this.emit();
+		let o = this.current?.id === e;
+		this.#e = this.#e.filter((s) => s.id !== e), o && this.current && this.toggle(this.current, !0), this.emit();
 	}
 	emit() {
 		this.#t.forEach((e) => e(this.active, this.#e));
@@ -44,41 +44,41 @@ var X = class {
 };
 new X();
 globalThis.document;
-function k(e, t, o, n = { passive: !0 }) {
+function k(e, t, n, o = { passive: !0 }) {
 	watch(e, (s, r, a) => {
 		if (!s) return;
-		s.addEventListener(t, o, n), a(() => s.removeEventListener(t, o));
+		s.addEventListener(t, n, o), a(() => s.removeEventListener(t, n));
 	}, { immediate: !0 });
 }
 function ne(e, t) {
-	let o = `flux/${e}`, n = ref(s() ?? t);
+	let n = `flux/${e}`, o = ref(s() ?? t);
 	function s() {
-		if (o in localStorage) {
-			let r = JSON.parse(localStorage.getItem(o));
+		if (n in localStorage) {
+			let r = JSON.parse(localStorage.getItem(n));
 			if (Array.isArray(r) && r[0] === "DateTime") r = DateTime.fromISO(r[1]);
 			return r;
 		}
 		return null;
 	}
-	return watch(n, (r) => {
+	return watch(o, (r) => {
 		let a = r;
 		if (DateTime.isDateTime(r)) a = ["DateTime", r.toISO({
 			includeOffset: !0,
 			extendedZone: !0
 		})];
-		localStorage.setItem(o, JSON.stringify(a));
-	}), n;
+		localStorage.setItem(n, JSON.stringify(a));
+	}), o;
 }
-function re(e) {
-	let t = ref(0), o = ref(0);
+function se(e) {
+	let t = ref(0), n = ref(0);
 	if (!e) e = ref(document);
 	return k(e, "scroll", () => {
-		let n = unref(e);
-		if (n instanceof Document) n = n.scrollingElement;
-		t.value = n?.scrollLeft ?? 0, o.value = n?.scrollTop ?? 0;
+		let o = unref(e);
+		if (o instanceof Document) o = o.scrollingElement;
+		t.value = o?.scrollLeft ?? 0, n.value = o?.scrollTop ?? 0;
 	}), {
 		x: t,
-		y: o
+		y: n
 	};
 }
 const FluxDashboardInjectionKey = Symbol();
@@ -97,7 +97,7 @@ var FluxDashboard_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const isMenuCollapsed = ne("dashboard-menu-collapsed", true);
 		const isNavigationCollapsed = ne("dashboard-navigation-collapsed", true);
-		const isResizing$1 = ref(false);
+		const isResizing = ref(false);
 		provide(FluxDashboardInjectionKey, {
 			isMenuCollapsed,
 			isNavigationCollapsed
@@ -106,14 +106,14 @@ var FluxDashboard_default = /* @__PURE__ */ defineComponent({
 			let timeout;
 			function onResize() {
 				clearTimeout(timeout);
-				isResizing$1.value = true;
-				timeout = setTimeout(() => isResizing$1.value = false, 10);
+				isResizing.value = true;
+				timeout = setTimeout(() => isResizing.value = false, 10);
 			}
 			window.addEventListener("resize", onResize, { passive: true });
 			onCleanup(() => window.removeEventListener("resize", onResize));
 		}, { immediate: true });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(Dashboard_module_default).dashboard, isResizing$1.value && unref(Dashboard_module_default).isResizing]) }, [
+			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(Dashboard_module_default).dashboard, isResizing.value && unref(Dashboard_module_default).isResizing]) }, [
 				renderSlot(_ctx.$slots, "navigation"),
 				renderSlot(_ctx.$slots, "menu"),
 				createElementVNode("div", { class: normalizeClass(unref(Dashboard_module_default).dashboardMount) }, [renderSlot(_ctx.$slots, "header"), renderSlot(_ctx.$slots, "default")], 2),
@@ -174,7 +174,7 @@ var FluxDashboardHeader_default = /* @__PURE__ */ defineComponent({
 		title: {}
 	},
 	setup(__props) {
-		const { y } = re();
+		const { y } = se();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxDashboardTopBar_default, { class: normalizeClass(unref(y) > 0 ? unref(DashboardTopBar_module_default).dashboardHeaderScrolled : unref(DashboardTopBar_module_default).dashboardHeader) }, {
 				default: withCtx(() => [
@@ -255,12 +255,12 @@ var FluxDashboardNavigation_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "FluxDashboardNavigation",
 	props: { logoLocation: {} },
-	setup(__props) {
+	setup(__props, { attrs: $attrs }) {
 		const slots = useSlots();
 		const { isMenuCollapsed, isNavigationCollapsed } = useDashboardInjection_default();
 		return (_ctx, _cache) => {
 			const _component_router_link = resolveComponent("router-link");
-			return openBlock(), createElementBlock("nav", mergeProps(_ctx.$attrs, { class: unref(isNavigationCollapsed) ? unref(DashboardNavigation_module_default).dashboardNavigationCollapsed : unref(DashboardNavigation_module_default).dashboardNavigation }), [
+			return openBlock(), createElementBlock("nav", mergeProps($attrs, { class: unref(isNavigationCollapsed) ? unref(DashboardNavigation_module_default).dashboardNavigationCollapsed : unref(DashboardNavigation_module_default).dashboardNavigation }), [
 				createElementVNode("header", { class: normalizeClass(unref(DashboardNavigation_module_default).dashboardNavigationHeader) }, [
 					createVNode(unref(FluxMenuItem), {
 						"icon-leading": "bars",