@astryx-vue/core 0.2.6 → 0.4.0

package/dist/SideNav/index.d.ts

@@ -1,2 +1,2 @@
-import { $n as _default$3, Qn as _default$4, _r as useSideNavCollapse, ar as SideNavCollapseButtonSlots, cr as SideNavEmits, dr as SideNavItemEmits, er as _default$2, fr as SideNavItemProps, gr as SideNavCollapseContext, hr as SideNavSectionProps, ir as SideNavCollapseButtonSize, lr as SideNavHandle, mr as SideNavResizable, nr as _default, or as SideNavCollapsible, pr as SideNavProps, rr as SideNavCollapseButtonProps, sr as SideNavControlledCollapsible, tr as _default$1, ur as SideNavHeadingProps } from "../index-CdtZjkmG.js";
+import { $n as _default$3, Qn as _default$4, _r as useSideNavCollapse, ar as SideNavCollapseButtonSlots, cr as SideNavEmits, dr as SideNavItemEmits, er as _default$2, fr as SideNavItemProps, gr as SideNavCollapseContext, hr as SideNavSectionProps, ir as SideNavCollapseButtonSize, lr as SideNavHandle, mr as SideNavResizable, nr as _default, or as SideNavCollapsible, pr as SideNavProps, rr as SideNavCollapseButtonProps, sr as SideNavControlledCollapsible, tr as _default$1, ur as SideNavHeadingProps } from "../index-CpNlPLBF.js";
 export { _default as SideNav, _default$1 as SideNavCollapseButton, type SideNavCollapseButtonProps, type SideNavCollapseButtonSize, type SideNavCollapseButtonSlots, type SideNavCollapseContext, type SideNavCollapsible, type SideNavControlledCollapsible, type SideNavEmits, type SideNavHandle, _default$2 as SideNavHeading, type SideNavHeadingProps, _default$3 as SideNavItem, type SideNavItemEmits, type SideNavItemProps, type SideNavProps, type SideNavResizable, _default$4 as SideNavSection, type SideNavSectionProps, useSideNavCollapse };

package/dist/SideNav/index.js

@@ -1,3 +1,3 @@
 import { r as useSideNavCollapse } from "../context-BjNya0v8.js";
-import { a as _sfc_main$1, i as _sfc_main, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main$4 } from "../SideNav-Dtv8eA2j.js";
+import { a as _sfc_main$1, i as _sfc_main, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main$4 } from "../SideNav-CN2QeAtY.js";
 export { _sfc_main as SideNav, _sfc_main$1 as SideNavCollapseButton, _sfc_main$2 as SideNavHeading, _sfc_main$3 as SideNavItem, _sfc_main$4 as SideNavSection, useSideNavCollapse };

package/dist/{SideNav-Dtv8eA2j.js → SideNav-CN2QeAtY.js}

@@ -1,17 +1,18 @@
 import { n as useLinkComponent } from "./context-C_peZbXf.js";
-import { t as _sfc_main$5 } from "./Button-B6Hj_O_s.js";
+import { t as _sfc_main$5 } from "./Button-ONOoHdkg.js";
 import { t as useHandleRef } from "./useHandleRef-6cdKugm8.js";
-import { n as useResizable, r as useHotkeys } from "./useResizable-B3ahKLoZ.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as _sfc_main$6 } from "./Tooltip-C4Vaqd3G.js";
+import { n as useResizable, r as useHotkeys } from "./useResizable-I3BCiLSL.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { t as _sfc_main$6 } from "./Tooltip-sAM8i1eO.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { i as useSideNavRenderMode, r as useSideNavCollapse, t as sideNavCollapseKey } from "./context-BjNya0v8.js";
-import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
-import { n as resolveNavRoot } from "./link-C4_WogdF.js";
-import { t as _sfc_main$8 } from "./NavItem-BBIGSvDj.js";
-import { t as _sfc_main$9 } from "./NavDisclosure-C_fugrQ3.js";
-import { t as _sfc_main$10 } from "./ResizeHandle-q4nD_586.js";
-import { t as _sfc_main$11 } from "./NavHeadingSurface-B3yJspSN.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, normalizeClass, normalizeProps, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, watchEffect, withCtx, withModifiers } from "vue";
+import { t as _sfc_main$7 } from "./Icon-KDnUyY7f.js";
+import { i as safeNavHref, r as resolveNavRoot } from "./link-DuuA2eCL.js";
+import { t as _sfc_main$8 } from "./NavItem-BPb3yfgz.js";
+import { t as _sfc_main$9 } from "./NavDisclosure-Bq9DTZLO.js";
+import { t as _sfc_main$10 } from "./ResizeHandle-TPlUCAHD.js";
+import { t as _sfc_main$11 } from "./NavHeadingSurface-C4v_MtkX.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useSlots, useTemplateRef, watch, watchEffect, withCtx, withModifiers } from "vue";
 import "../styles/visually-hidden.css";
 import "../styles/side-nav.css";
 //#region src/SideNav/SideNavCollapseButton.vue
@@ -202,7 +203,10 @@ const _hoisted_4$3 = {
 	key: 0,
 	class: "astryx-side-nav__top-content"
 };
-const _hoisted_5$2 = { class: "astryx-side-nav__body" };
+const _hoisted_5$2 = {
+	ref: "body",
+	class: "astryx-side-nav__body"
+};
 const _hoisted_6$2 = {
 	key: 1,
 	class: "astryx-side-nav__bottom"
@@ -212,11 +216,11 @@ const _hoisted_7$1 = {
 	class: "astryx-side-nav__footer-icons"
 };
 const _hoisted_8$1 = ["aria-label", "data-collapsed"];
-const _hoisted_9 = {
+const _hoisted_9$1 = {
 	key: 0,
 	class: "astryx-side-nav__top"
 };
-const _hoisted_10 = {
+const _hoisted_10$1 = {
 	key: 0,
 	class: "astryx-side-nav__heading-row"
 };
@@ -224,7 +228,10 @@ const _hoisted_11 = {
 	key: 1,
 	class: "astryx-side-nav__top-content"
 };
-const _hoisted_12 = { class: "astryx-side-nav__body" };
+const _hoisted_12 = {
+	ref: "body",
+	class: "astryx-side-nav__body"
+};
 const _hoisted_13 = {
 	key: 1,
 	class: "astryx-side-nav__bottom"
@@ -264,6 +271,8 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const messages = useAstryxMessages();
 		const navId = `astryx-side-nav-${useId()}`;
 		const localCollapsed = ref(false);
+		const bodyEl = useTemplateRef("body");
+		useScrollbars(bodyEl);
 		const config = computed(() => typeof props.collapsible === "object" ? props.collapsible : {});
 		function controlledCollapsed() {
 			if (props.isCollapsed !== void 0) return props.isCollapsed;
@@ -340,7 +349,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		return (_ctx, _cache) => {
 			return unref(renderMode) === "topbar" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "header"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_2$3, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : unref(renderMode) === "drawer" || unref(renderMode) === "drawer-content" ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
 				slots.top ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")], 512),
 				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
 			])) : (openBlock(), createElementBlock("div", {
 				key: 2,
@@ -355,11 +364,11 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 				"aria-label": label.value,
 				"data-collapsed": isCollapsed.value || void 0
 			}, [
-				hasTop.value ? (openBlock(), createElementBlock("div", _hoisted_9, [slots.header || showButton.value ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "header"), showButton.value ? (openBlock(), createBlock(_sfc_main$4, {
+				hasTop.value ? (openBlock(), createElementBlock("div", _hoisted_9$1, [slots.header || showButton.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, [renderSlot(_ctx.$slots, "header"), showButton.value ? (openBlock(), createBlock(_sfc_main$4, {
 					key: 0,
 					label: config.value.buttonLabel
 				}, null, 8, ["label"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), slots.top ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")], 512),
 				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_14, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
 			], 14, _hoisted_8$1), showResizeHandle.value ? (openBlock(), createBlock(_sfc_main$10, {
 				key: 0,
@@ -413,7 +422,8 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const hasMenu = computed(() => slots.menu != null);
 		/** 自己的 `as` 优先，其次是 LinkProvider 给的默认链接组件。 */
 		const customLink = computed(() => props.as ?? linkComponent.value);
-		const linkRoot = computed(() => resolveNavRoot(props.headingHref, false, customLink.value));
+		const safeHeadingHref = computed(() => safeNavHref(props.headingHref));
+		const linkRoot = computed(() => resolveNavRoot(safeHeadingHref.value, false, customLink.value));
 		return (_ctx, _cache) => {
 			return collapsed.value && hasIcon.value ? (openBlock(), createBlock(_sfc_main$6, {
 				key: 0,
@@ -439,11 +449,11 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 						focusRequest
 					})])]),
 					_: 3
-				}, 8, ["label"])) : __props.headingHref ? (openBlock(), createBlock(resolveDynamicComponent(linkRoot.value), {
+				}, 8, ["label"])) : safeHeadingHref.value ? (openBlock(), createBlock(resolveDynamicComponent(linkRoot.value), {
 					key: 1,
 					class: "astryx-side-nav-heading astryx-side-nav-heading--collapsed",
-					href: __props.headingHref,
-					to: customLink.value != null ? __props.headingHref : void 0,
+					href: safeHeadingHref.value,
+					to: customLink.value != null ? safeHeadingHref.value : void 0,
 					"aria-label": __props.heading
 				}, {
 					default: withCtx(() => [createElementVNode("span", _hoisted_4$2, [renderSlot(_ctx.$slots, "icon")])]),
@@ -511,11 +521,17 @@ const _hoisted_5 = {
 	key: 1,
 	class: "astryx-side-nav-item"
 };
-const _hoisted_6 = ["aria-expanded", "aria-label"];
-const _hoisted_7 = ["aria-hidden", "inert"];
-const _hoisted_8 = { class: "astryx-side-nav-item__children-inner" };
+const _hoisted_6 = { class: "astryx-side-nav-item__main" };
+const _hoisted_7 = ["aria-expanded", "aria-label"];
+const _hoisted_8 = {
+	key: 2,
+	class: "astryx-side-nav-item__actions"
+};
+const _hoisted_9 = ["aria-hidden", "inert"];
+const _hoisted_10 = { class: "astryx-side-nav-item__children-inner" };
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	name: "AstryxSideNavItem",
+	inheritAttrs: false,
 	__name: "SideNavItem",
 	props: {
 		label: {},
@@ -544,6 +560,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
+		const attrs = useAttrs();
+		const accessibleLabel = computed(() => {
+			const given = attrs["aria-label"];
+			if (typeof given === "string" && given.trim() !== "") return given;
+			return props.label;
+		});
 		const collapse = useSideNavCollapse();
 		const messages = useAstryxMessages();
 		const instance = getCurrentInstance();
@@ -595,9 +617,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				content: __props.label,
 				placement: "end"
 			}, {
-				default: withCtx(() => [createVNode(_sfc_main$8, {
+				default: withCtx(() => [createVNode(_sfc_main$8, mergeProps(unref(attrs), {
 					block: "",
 					"is-icon-only": "",
+					"aria-label": accessibleLabel.value,
 					as: __props.as,
 					href: __props.href,
 					"icon-class": __props.iconClass,
@@ -609,7 +632,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					size: __props.size,
 					target: __props.target,
 					onClick: onActivate
-				}, createSlots({ _: 2 }, [_ctx.$slots.icon ? {
+				}), createSlots({ _: 2 }, [_ctx.$slots.icon ? {
 					name: "icon",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
 					key: "0"
@@ -617,7 +640,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					name: "selectedIcon",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon")]),
 					key: "1"
-				} : void 0]), 1032, [
+				} : void 0]), 1040, [
+					"aria-label",
 					"as",
 					"href",
 					"icon-class",
@@ -643,7 +667,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"aria-expanded": isOpen ? "true" : "false",
 					"aria-controls": panelId,
 					"aria-haspopup": "menu",
-					"aria-label": __props.label
+					"aria-label": accessibleLabel.value
 				}, [createElementVNode("span", _hoisted_2$1, [__props.iconClass ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass(["astryx-nav-item__glyph", __props.isSelected && __props.selectedIconClass ? __props.selectedIconClass : __props.iconClass])
@@ -654,10 +678,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"aria-label": __props.label
 				}, [createElementVNode("div", _hoisted_4$1, toDisplayString(__props.label), 1), renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$1)]),
 				_: 3
-			}, 8, ["label"])) : createCommentVNode("v-if", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_5, [splitToggle.value ? (openBlock(), createElementBlock("div", {
+			}, 8, ["label"])) : createCommentVNode("v-if", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [splitToggle.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(["astryx-nav-item astryx-nav-item--block", [`astryx-nav-item--${__props.size}`, { "astryx-nav-item--selected": __props.isSelected }]])
-			}, [createVNode(_sfc_main$8, {
+			}, [createVNode(_sfc_main$8, mergeProps(unref(attrs), {
 				plain: "",
 				class: "astryx-side-nav-item__split",
 				as: __props.as,
@@ -671,7 +695,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				size: __props.size,
 				target: __props.target,
 				onClick: onActivate
-			}, createSlots({ _: 2 }, [
+			}), createSlots({ _: 2 }, [
 				_ctx.$slots.icon ? {
 					name: "icon",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
@@ -687,7 +711,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "end")]),
 					key: "2"
 				} : void 0
-			]), 1032, [
+			]), 1040, [
 				"as",
 				"href",
 				"icon-class",
@@ -709,8 +733,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				icon: "chevronDown",
 				size: "sm",
 				class: normalizeClass(["astryx-side-nav-item__chevron", { "astryx-side-nav-item__chevron--open": !nestedCollapsed.value }])
-			}, null, 8, ["class"])], 8, _hoisted_6)], 2)) : (openBlock(), createBlock(_sfc_main$8, {
-				key: 1,
+			}, null, 8, ["class"])], 8, _hoisted_7)], 2)) : (openBlock(), createBlock(_sfc_main$8, mergeProps({ key: 1 }, unref(attrs), {
 				block: "",
 				as: __props.as,
 				controls: canNest.value ? childrenId : void 0,
@@ -725,7 +748,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				size: __props.size,
 				target: __props.target,
 				onClick: onActivate
-			}, createSlots({ _: 2 }, [
+			}), createSlots({ _: 2 }, [
 				_ctx.$slots.icon ? {
 					name: "icon",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
@@ -746,7 +769,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					}, null, 8, ["class"])) : createCommentVNode("v-if", true)]),
 					key: "2"
 				} : void 0
-			]), 1032, [
+			]), 1040, [
 				"as",
 				"controls",
 				"expanded",
@@ -759,18 +782,18 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"selected-icon-class",
 				"size",
 				"target"
-			])), hasChildren.value ? (openBlock(), createElementBlock("div", {
-				key: 2,
+			])), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("v-if", true)]), hasChildren.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
 				id: childrenId,
 				class: normalizeClass(["astryx-side-nav-item__children", { "astryx-side-nav-item__children--collapsed": nestedCollapsed.value }]),
 				role: "group",
 				"aria-labelledby": labelId,
 				"aria-hidden": nestedCollapsed.value ? "true" : void 0,
 				inert: nestedCollapsed.value || void 0
-			}, [createElementVNode("div", _hoisted_8, [createElementVNode("span", {
+			}, [createElementVNode("div", _hoisted_10, [createElementVNode("span", {
 				id: labelId,
 				class: "astryx-visually-hidden"
-			}, toDisplayString(__props.label), 1), renderSlot(_ctx.$slots, "default")])], 10, _hoisted_7)) : createCommentVNode("v-if", true)]));
+			}, toDisplayString(__props.label), 1), renderSlot(_ctx.$slots, "default")])], 10, _hoisted_9)) : createCommentVNode("v-if", true)]));
 		};
 	}
 });

package/dist/Slider/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SliderProps, c as SliderValueDisplay, i as SliderOrientation, n as SliderEmits, o as SliderSlots, r as SliderMark, s as SliderValue, t as _default } from "../index-TntQsADQ.js";
+import { a as SliderProps, c as SliderValueDisplay, i as SliderOrientation, n as SliderEmits, o as SliderSlots, r as SliderMark, s as SliderValue, t as _default } from "../index-DEm3kRBO.js";
 export { _default as Slider, type SliderEmits, type SliderMark, type SliderOrientation, type SliderProps, type SliderSlots, type SliderValue, type SliderValueDisplay };

package/dist/Slider/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Slider-DWobsPgm.js";
+import { t as _sfc_main } from "../Slider-pdC0jpHu.js";
 export { _sfc_main as Slider };