eco-vue-js 0.26.31 → 0.27.1

package/dist/components/EmptyComponent/WEmptyComponent.vue_vue_type_script_lang.js

@@ -1,4 +1,4 @@
 // src/components/EmptyComponent/WEmptyComponent.vue?vue&type=script&lang.ts
-var WEmptyComponent = (_props, { slots }) => slots.default?.();
+var WEmptyComponent = (_props, { slots }) => slots.default?.({});
 WEmptyComponent.inheritAttrs = false;
 export { WEmptyComponent as default };

package/dist/components/Nav/WNavItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WNavItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItem.vue"],"names":[],"mappings":"AAkGA;AA0JA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAA;AAkBzC,KAAK,WAAW,GAAG;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAC;AAmSF,QAAA,MAAM,UAAU;;;qPAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WNavItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItem.vue"],"names":[],"mappings":"AAuGA;AAqKA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAA;AAqBzC,KAAK,WAAW,GAAG;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAC;AAySF,QAAA,MAAM,UAAU;;;qPAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Nav/WNavItem.vue_vue_type_script_setup_true_lang.js

@@ -5,29 +5,29 @@ import WTextOverflow_default from "../TextOverflow/WTextOverflow.vue.js";
 import { useOptionalRoute, useOptionalRouter } from "../../composables/useOptionalRouter.js";
 import { getRouteTitle, getRouteTitleShort } from "../../utils/useRouteTitle.js";
 import { isEqualObj, numberCompactFormatter } from "../../utils/utils.js";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
 // src/components/Nav/WNavItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	class: "w-nav-item-indicator tone-primary bg-tone-fill absolute left-0 top-0 h-full w-1"
 };
 var _hoisted_2 = {
-	key: 0,
-	class: "absolute left-3 top-0 flex h-full items-center"
-};
-var _hoisted_3 = {
 	ref: "anchor",
 	"aria-hidden": "true",
 	class: "w-nav-item-anchor pointer-events-none absolute inset-x-0"
 };
-var _hoisted_4 = { class: "[overflow:inherit]" };
-var _hoisted_5 = { class: "flex items-center" };
-var _hoisted_6 = { class: "last-not:pr-1 min-w-0 font-normal" };
-var _hoisted_7 = { class: "relative inline-flex max-w-full items-center whitespace-nowrap tracking-wide" };
-var _hoisted_8 = {
+var _hoisted_3 = { class: "[overflow:inherit]" };
+var _hoisted_4 = {
+	key: 0,
+	class: "flex items-center"
+};
+var _hoisted_5 = { class: "last-not:pr-1 min-w-0 font-normal" };
+var _hoisted_6 = { class: "relative inline-flex max-w-full items-center whitespace-nowrap tracking-wide" };
+var _hoisted_7 = {
 	key: 0,
 	class: "shrink-0"
 };
+var INDENT_STEP = 2;
 var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WNavItem",
 	props: {
@@ -38,14 +38,16 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		skeleton: { type: Boolean },
 		hasActive: { type: Boolean },
 		expand: { type: Boolean },
-		indent: { type: Boolean },
+		indent: {},
 		queryFields: {},
+		paramFields: {},
 		hovered: { type: Boolean },
 		even: { type: Boolean },
 		to: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const EXCLUDE_QUERY_FIELDS = ["ordering", "page"];
+		const getParamValue = (value) => [value ?? ""].flat().join("/");
 		const props = __props;
 		const route = useOptionalRoute();
 		const router = useOptionalRouter();
@@ -53,11 +55,13 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const isActive = computed(() => {
 			if (!route) return false;
 			if (routeTo.value?.name !== route?.name) return false;
+			if (props.paramFields?.some((field) => getParamValue(route.params[field]) !== getParamValue(routeTo.value.params[field]))) return false;
 			return isEqualObj(route.query, routeTo.value.query ?? {}, EXCLUDE_QUERY_FIELDS, props.queryFields);
 		});
 		const routeTitle = computed(() => getRouteTitle(routeTo.value?.matched ?? []));
 		const iconLocal = computed(() => props.icon ?? routeTo.value?.meta?.icon);
 		const titleLocal = computed(() => props.title ?? (routeTitle.value ? getRouteTitleShort(routeTitle.value) : void 0) ?? (typeof routeTo.value?.meta?.titleShort === "string" ? routeTo.value.meta.titleShort : typeof routeTo.value?.meta?.title === "string" ? routeTo.value.meta.title : ""));
+		const getIndentLength = (base) => `calc(var(--spacing) * ${base + INDENT_STEP * (props.indent ?? 0)})`;
 		const isTextColor = computed(() => props.hasActive ? !props.indent : isActive.value);
 		__expose({
 			isActive,
@@ -89,25 +93,32 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						"enter-from-class": "opacity-0",
 						"leave-to-class": "opacity-0"
 					}, {
-						default: withCtx(() => [__props.indent && !__props.expand && isActive.value ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "square-1.5 rounded-full bg-(--w-nav-item-dot-color)" }, null, -1)])])) : createCommentVNode("", true)]),
+						default: withCtx(() => [__props.indent && !__props.expand && isActive.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: "absolute top-0 flex h-full items-center",
+							style: normalizeStyle({ left: getIndentLength(1) })
+						}, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "square-1.5 rounded-full bg-(--w-nav-item-dot-color)" }, null, -1)])], 4)) : createCommentVNode("", true)]),
 						_: 1
 					}),
-					createElementVNode("span", _hoisted_3, null, 512),
-					createElementVNode("div", _hoisted_4, [createElementVNode("div", { class: normalizeClass(["w-ripple w-ripple-hover relative grid grid-cols-[1.5rem_1fr_auto] items-center rounded-(--w-nav-item-rounded,var(--radius-lg)) pr-2", {
-						"before:opacity-10": __props.hovered,
-						"pl-4": __props.indent,
-						"pl-2": !__props.indent
-					}]) }, [
-						createElementVNode("div", _hoisted_5, [iconLocal.value ? (openBlock(), createBlock(resolveDynamicComponent(iconLocal.value), {
+					createElementVNode("span", _hoisted_2, null, 512),
+					createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+						class: normalizeClass(["w-ripple w-ripple-hover relative grid items-center rounded-(--w-nav-item-rounded,var(--radius-lg)) pr-2", {
+							"before:opacity-10": __props.hovered,
+							"grid-cols-[1.5rem_1fr_auto]": iconLocal.value || _ctx.$slots.icon,
+							"grid-cols-[1fr_auto]": !iconLocal.value && !_ctx.$slots.icon
+						}]),
+						style: normalizeStyle({ paddingLeft: getIndentLength(2) })
+					}, [
+						iconLocal.value || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_4, [iconLocal.value ? (openBlock(), createBlock(resolveDynamicComponent(iconLocal.value), {
 							key: 0,
 							class: "square-[1.25em]"
-						})) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)]),
-						createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, [
+						})) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, [
 							createVNode(WTextOverflow_default, { class: "min-w-0 leading-loose" }, {
 								default: withCtx(() => [createTextVNode(toDisplayString(titleLocal.value), 1)]),
 								_: 1
 							}),
-							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(typeof __props.count === "number" ? `\u00A0(${unref(numberCompactFormatter).format(__props.count)})` : ""), 1)) : (openBlock(), createBlock(WSkeleton_default, {
+							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(typeof __props.count === "number" ? `\u00A0(${unref(numberCompactFormatter).format(__props.count)})` : ""), 1)) : (openBlock(), createBlock(WSkeleton_default, {
 								key: 1,
 								class: "w-skeleton-w-10 ml-1 inline-flex shrink-0"
 							})),
@@ -119,7 +130,7 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							}, null, 8, ["count"])) : createCommentVNode("", true)
 						])]),
 						renderSlot(_ctx.$slots, "right")
-					], 2)])
+					], 6)])
 				]),
 				_: 3
 			}, 8, ["to", "class"]);

package/dist/components/Nav/WNavItemExpand.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WNavItemExpand.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItemExpand.vue"],"names":[],"mappings":"AAiGA;AAuKA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAC,KAAK,KAAK,EAA2D,MAAM,KAAK,CAAA;AAoDxF,KAAK,WAAW,GAAG;IACjB,4HAA4H;IAC5H,OAAO,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;IACvB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;CACrB,CAAC;AAkVF,QAAA,MAAM,UAAU;;;2PAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WNavItemExpand.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItemExpand.vue"],"names":[],"mappings":"AAwGA;AAkLA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAC,KAAK,KAAK,EAA2D,MAAM,KAAK,CAAA;AAwDxF,KAAK,WAAW,GAAG;IACjB,4HAA4H;IAC5H,OAAO,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;IACvB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;CACrB,CAAC;AAwVF,QAAA,MAAM,UAAU;;;2PAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Nav/WNavItemExpand.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ import WNavItem_default from "./WNavItem.vue.js";
 import WNavItemTransition_default from "./WNavItemTransition.vue.js";
 import { useNavGroupDropdown } from "./use/useNavGroupDropdown.js";
 import WClickOutside_default from "../ClickOutside/WClickOutside.vue.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
 // src/components/Nav/WNavItemExpand.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 1 };
 var _hoisted_2 = { class: "w-nav-bar w-nav-bar-dropdown w-nav-bar-width overflow-y-auto overscroll-contain border border-solid border-line-raised text-start font-normal shadow" };
@@ -20,8 +20,9 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		count: {},
 		counter: {},
 		skeleton: { type: Boolean },
-		indent: { type: Boolean },
+		indent: {},
 		queryFields: {},
+		paramFields: {},
 		even: { type: Boolean },
 		to: {}
 	},
@@ -33,14 +34,17 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const innerRef = useTemplateRef("inner");
 		const { isOpen: isDropdownOpen, show: showDropdown, hide: hideDropdown, close: closeDropdown } = useNavGroupDropdown();
 		const hasActive = ref(false);
-		const isActive = computed(() => hasActive.value || (componentRef.value?.isActive ?? false));
 		const hasInnerActive = computed(() => innerRef.value?.some((item) => item.isActive) ?? false);
+		const isActive = computed(() => hasInnerActive.value || hasActive.value || (componentRef.value?.isActive ?? false));
 		const isVisible = computed(() => isDropdownOpen.value || isActive.value);
 		const updateHasActive = async () => {
 			await nextTick();
 			hasActive.value = innerRef.value?.some((item) => item.isActive) ?? false;
 		};
-		watch(hasInnerActive, updateHasActive, { immediate: true });
+		watch(hasInnerActive, (value) => {
+			hasActive.value = value;
+			updateHasActive();
+		}, { immediate: true });
 		watch(isActive, updateHasActive, { immediate: true });
 		watch(slotsDefault, updateHasActive, { immediate: true });
 		watch(hasActive, closeDropdown, { immediate: true });
@@ -49,10 +53,11 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			isVisible
 		});
 		return (_ctx, _cache) => {
-			return !slotsDefault.value.length ? (openBlock(), createBlock(WNavItem_default, normalizeProps(mergeProps({ key: 0 }, _ctx.$props)), {
-				icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
-				_: 3
-			}, 16)) : (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(WDropdownMenu_default, {
+			return !slotsDefault.value.length ? (openBlock(), createBlock(WNavItem_default, normalizeProps(mergeProps({ key: 0 }, _ctx.$props)), createSlots({ _: 2 }, [_ctx.$slots.icon ? {
+				name: "icon",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+				key: "0"
+			} : void 0]), 1040)) : (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(WDropdownMenu_default, {
 				"is-open": unref(isDropdownOpen) && !isActive.value,
 				"horizontal-align": unref(HorizontalAlign).RIGHT_OUTER,
 				"parent-element": componentRef.value?.anchorRef ?? void 0,
@@ -74,12 +79,16 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					even: __props.even,
 					expand: !__props.to,
 					"query-fields": __props.queryFields,
+					"param-fields": __props.paramFields,
 					hovered: unref(isDropdownOpen) && !hasActive.value
-				}), {
-					icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+				}), createSlots({
 					right: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 transition-transform", { "-rotate-90": !hasActive.value && !__props.even }]) }, null, 8, ["class"])]),
-					_: 3
-				}, 16, [
+					_: 2
+				}, [_ctx.$slots.icon ? {
+					name: "icon",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+					key: "0"
+				} : void 0]), 1040, [
 					"to",
 					"title",
 					"icon",
@@ -91,6 +100,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					"even",
 					"expand",
 					"query-fields",
+					"param-fields",
 					"hovered"
 				])]),
 				content: withCtx(() => [createVNode(WClickOutside_default, {
@@ -128,7 +138,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 							ref_for: true,
 							ref: "inner",
 							even: __props.even,
-							indent: !__props.even
+							indent: __props.even ? void 0 : (__props.indent ?? 0) + 1
 						}, null, 8, ["even", "indent"]);
 					}), 128))]),
 					_: 1

package/dist/components/Nav/types.d.ts

@@ -1,6 +1,6 @@
 import { LinkProps } from '../../types/types';
 export interface NavItemProps extends LinkProps {
-  /** Icon before the title. Defaults to the route's `meta.icon`. */
+  /** Icon before the title. Defaults to the route's `meta.icon`. Without an icon the title takes its place. */
   icon?: SVGComponent
   /** Title of the item. Defaults to the title the route's page registers with `useRouteTitle` while it is open, then the route's `meta.titleShort`, then `meta.title`. */
   title?: string
@@ -14,10 +14,12 @@ export interface NavItemProps extends LinkProps {
   hasActive?: boolean
   /** Marks the item as the toggle of a group without a route of its own. Set by WNavItemExpand. */
   expand?: boolean
-  /** Indents the item as a child of a group. Set by WNavItemExpand. */
-  indent?: boolean
+  /** How many groups the item is nested in, which sets its indent. Set by WNavItemExpand. */
+  indent?: number
   /** Query params that must match the current route's for the item to be active, besides its route name. Other params, such as filters, are ignored. */
   queryFields?: string[]
+  /** Route params that must match the current route's for the item to be active, besides its route name. Other route params are ignored. */
+  paramFields?: string[]
   /** Highlights the item as hovered. Set by WNavItemExpand while its menu is open. */
   hovered?: boolean
   /** Lays the item out without the indent of a group. Set by WNavItemExpand. */
@@ -25,7 +27,7 @@ export interface NavItemProps extends LinkProps {
 }
 
 export interface NavItemExpandProps extends Partial<LinkProps> {
-  /** Icon before the title. */
+  /** Icon before the title. Without an icon the title takes its place. */
   icon?: SVGComponent
   /** Title of the group. */
   title: string
@@ -35,10 +37,12 @@ export interface NavItemExpandProps extends Partial<LinkProps> {
   counter?: number
   /** Shows a placeholder for `count` and hides `counter`, while they load. */
   skeleton?: boolean
-  /** Indents the group as a child of another group. */
-  indent?: boolean
+  /** How many groups the group is nested in, which sets its indent. Set by a parent WNavItemExpand. */
+  indent?: number
   /** Query params that must match the current route's for the group's own route to be active. */
   queryFields?: string[]
+  /** Route params that must match the current route's for the group's own route to be active. */
+  paramFields?: string[]
   /** Keeps the items always shown, without indent and without the menu on hover, e.g. for a nav inside a page. */
   even?: boolean
 }

package/dist/composables/useOptionalRouter.d.ts

@@ -3,7 +3,7 @@ import { ComputedRef } from 'vue';
 type Router = ReturnType<typeof useRouter>;
 export type FallbackRouter = {
     push: Router['push'];
-    resolve(to: RouteLocationRaw): Pick<ReturnType<Router['resolve']>, 'name' | 'path' | 'query' | 'href' | 'matched'> & {
+    resolve(to: RouteLocationRaw): Pick<ReturnType<Router['resolve']>, 'name' | 'path' | 'query' | 'href' | 'matched' | 'params'> & {
         meta: Record<string, string> | undefined;
         name: string;
     };
@@ -16,6 +16,7 @@ export type FallbackRoute = {
     name: string;
     path: Route['path'];
     query: LocationQuery;
+    params: Route['params'];
     hash: Route['hash'];
     fullPath: Route['fullPath'];
     matched: Route['matched'];

package/dist/composables/useOptionalRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOptionalRouter.d.ts","sourceRoot":"","sources":["../../../src/composables/useOptionalRouter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,YAAY,CAAA;AAE3G,OAAO,EAAW,KAAK,WAAW,EAAoC,MAAM,KAAK,CAAA;AAkBjF,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1C,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;IACpB,OAAO,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAA;IAC7K,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAmCD,eAAO,MAAM,iBAAiB,QAAO,cAcpC,CAAA;AAED,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAQD,eAAO,MAAM,gBAAgB,QAAO,aAiCnC,CAAA;AAUD,eAAO,MAAM,uBAAuB,QAAO,WAAW,CAAC,qBAAqB,GAAG,SAAS,CAAC,GAAG,SAkB3F,CAAA"}
+{"version":3,"file":"useOptionalRouter.d.ts","sourceRoot":"","sources":["../../../src/composables/useOptionalRouter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,YAAY,CAAA;AAE3G,OAAO,EAAW,KAAK,WAAW,EAAoC,MAAM,KAAK,CAAA;AAkBjF,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1C,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;IACpB,OAAO,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAA;IACxL,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAoCD,eAAO,MAAM,iBAAiB,QAAO,cAcpC,CAAA;AAED,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;IACvB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAQD,eAAO,MAAM,gBAAgB,QAAO,aAkCnC,CAAA;AAUD,eAAO,MAAM,uBAAuB,QAAO,WAAW,CAAC,qBAAqB,GAAG,SAAS,CAAC,GAAG,SAkB3F,CAAA"}

package/dist/composables/useOptionalRouter.js

@@ -19,6 +19,7 @@ var fallbackRouter = {
 			href: typeof to === "string" ? to : "href" in to && typeof to.href === "string" ? to.href : to.path ?? "",
 			path: typeof to === "string" ? to.split(/[?#]/)[0] : "path" in to ? to.path ?? "" : "",
 			query: typeof to === "string" ? {} : to.query ?? {},
+			params: {},
 			meta: void 0
 		};
 		return {
@@ -63,6 +64,7 @@ var useOptionalRoute = () => {
 	const url = new URL(window.location.href);
 	return {
 		query: Object.fromEntries(url.searchParams.entries()),
+		params: {},
 		name: url.pathname,
 		path: url.pathname,
 		hash: url.hash,

package/docs/components/nav-bar.md

@@ -26,6 +26,8 @@ The `footer` slot is the nav's bottom, such as a back button or the app's versio
 
 `WNavItemExpand` groups items under a title. The items show under it while one of them is active; otherwise hovering the group opens them in a menu to the right. One group's menu is open at a time, so moving down the nav switches it. The menu lines up with the group by its top, or by its bottom low on the screen, and shifts to stay on screen when it is taller than the room there — it scrolls once taller than the screen. With `to`, the group is a link of its own. `even` keeps the items always shown and not indented, for a nav inside a page.
 
+Groups can nest, and each level indents further. Items without an icon, from neither `icon`, the `icon` slot nor `meta.icon`, start with the title.
+
 `WNavItemTransition` wraps a list of items so that the ones added or removed with `v-if` — such as an item for the current record — expand and collapse.
 
 The demo below uses `even` to show a group inside a page. Its items link to pages of this site, so the one you're on is active.
@@ -169,15 +171,16 @@ import WNavItem from 'eco-vue-js/dist/components/Nav/WNavItem.vue'
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `icon` | `SVGComponent` | — | Icon before the title. Defaults to the route's `meta.icon`. |
+| `icon` | `SVGComponent` | — | Icon before the title. Defaults to the route's `meta.icon`. Without an icon the title takes its place. |
 | `title` | `string` | — | Title of the item. Defaults to the title the route's page registers with `useRouteTitle` while it is open, then the route's `meta.titleShort`, then `meta.title`. |
 | `count` | `number` | — | Number after the title in brackets, such as the number of items on the page it opens. |
 | `counter` | `number` | — | Number in a badge over the end of the title, such as unread items. Hidden at 0. |
 | `skeleton` | `boolean` | — | Shows a placeholder for `count` and hides `counter`, while they load. |
 | `hasActive` | `boolean` | — | Marks the item as the parent of the active item. Set by WNavItemExpand. |
 | `expand` | `boolean` | — | Marks the item as the toggle of a group without a route of its own. Set by WNavItemExpand. |
-| `indent` | `boolean` | — | Indents the item as a child of a group. Set by WNavItemExpand. |
+| `indent` | `number` | — | How many groups the item is nested in, which sets its indent. Set by WNavItemExpand. |
 | `queryFields` | `string[]` | — | Query params that must match the current route's for the item to be active, besides its route name. Other params, such as filters, are ignored. |
+| `paramFields` | `string[]` | — | Route params that must match the current route's for the item to be active, besides its route name. Other route params are ignored. |
 | `hovered` | `boolean` | — | Highlights the item as hovered. Set by WNavItemExpand while its menu is open. |
 | `even` | `boolean` | — | Lays the item out without the indent of a group. Set by WNavItemExpand. |
 | `to` | `RouteLocationRaw` | **required** | Router location — renders a router link. Needs vue-router installed in the app. |
@@ -199,13 +202,14 @@ import WNavItemExpand from 'eco-vue-js/dist/components/Nav/WNavItemExpand.vue'
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `icon` | `SVGComponent` | — | Icon before the title. |
+| `icon` | `SVGComponent` | — | Icon before the title. Without an icon the title takes its place. |
 | `title` | `string` | **required** | Title of the group. |
 | `count` | `number` | — | Number after the title in brackets. |
 | `counter` | `number` | — | Number in a badge over the end of the title. Hidden at 0. |
 | `skeleton` | `boolean` | — | Shows a placeholder for `count` and hides `counter`, while they load. |
-| `indent` | `boolean` | — | Indents the group as a child of another group. |
+| `indent` | `number` | — | How many groups the group is nested in, which sets its indent. Set by a parent WNavItemExpand. |
 | `queryFields` | `string[]` | — | Query params that must match the current route's for the group's own route to be active. |
+| `paramFields` | `string[]` | — | Route params that must match the current route's for the group's own route to be active. |
 | `even` | `boolean` | — | Keeps the items always shown, without indent and without the menu on hover, e.g. for a nav inside a page. |
 | `to` | `RouteLocationRaw` | — | Router location — renders a router link. Needs vue-router installed in the app. |
 

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.31, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.27.1, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
 

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.26.31",
+  "version": "0.27.1",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",