@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{ScrollableArea-CJiaALHm.js → ScrollableArea-0u6RWtGG.js}

@@ -1,6 +1,7 @@
-import { t as useScrollableArea } from "./useScrollableArea-DDk_CluT.js";
+import { t as useScrollableArea } from "./useScrollableArea-BE8b3qm7.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { i as spacingVariable, n as resolvePadding, t as formatSize } from "./size-Cpn_wzXi.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, unref, useAttrs } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, shallowRef, unref, useAttrs } from "vue";
 import "../styles/scrollable-area.css";
 //#region src/ScrollableArea/ScrollableArea.vue
 const _hoisted_1 = ["data-axis", "data-full-bleed"];
@@ -22,6 +23,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		scrollbars: {
+			type: Boolean,
+			default: true
+		},
 		padding: { default: 0 },
 		paddingInline: {},
 		paddingInlineStart: {},
@@ -34,6 +39,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const attrs = useAttrs();
 		const scroll = useScrollableArea(props);
+		const viewportEl = shallowRef(null);
+		function bindViewport(el) {
+			scroll.viewport(el);
+			viewportEl.value = el instanceof HTMLElement ? el : null;
+		}
+		useScrollbars(viewportEl, { enabled: () => props.scrollbars });
 		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
 		const rootClass = computed(() => ["astryx-scrollable-area", attrs.class]);
 		const rootStyle = computed(() => [
@@ -57,7 +68,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			};
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ ref: unref(scroll).viewport }, {
+			return openBlock(), createElementBlock("div", mergeProps({ ref: bindViewport }, {
 				...forwardedAttrs.value,
 				...unref(scroll).viewportAttrs.value
 			}, {

package/dist/Scrollbars/index.d.ts

@@ -0,0 +1,2 @@
+import { a as ScrollbarsContext, c as ScrollbarsProviderProps, d as UseScrollbarsResult, i as ScrollbarsAutoHide, l as ScrollbarsProviderSlots, n as _default, o as ScrollbarsHandle, r as scrollbarsKey, s as ScrollbarsOptions, t as useScrollbars, u as UseScrollbarsOptions } from "../index-fAZaRruV.js";
+export { type ScrollbarsAutoHide, type ScrollbarsContext, type ScrollbarsHandle, type ScrollbarsOptions, _default as ScrollbarsProvider, type ScrollbarsProviderProps, type ScrollbarsProviderSlots, type UseScrollbarsOptions, type UseScrollbarsResult, scrollbarsKey, useScrollbars };

package/dist/Scrollbars/index.js

@@ -0,0 +1,3 @@
+import { n as scrollbarsKey, t as useScrollbars } from "../useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main } from "../Scrollbars-D_93hJYK.js";
+export { _sfc_main as ScrollbarsProvider, scrollbarsKey, useScrollbars };

package/dist/Scrollbars-D_93hJYK.js

@@ -0,0 +1,75 @@
+import { n as scrollbarsKey } from "./useScrollbars-C2NJ6Qwq.js";
+import { computed, defineComponent, provide, renderSlot } from "vue";
+import { OverlayScrollbars } from "overlayscrollbars";
+import "../styles/scrollbars.css";
+//#region src/Scrollbars/options.ts
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+/**
+* 把 `override` 深合并到 `base` 上，返回新对象，两个入参都不会被改动。
+* 只有纯对象会递归合并，数组和其他值直接用 `override` 的。
+* `override` 里值为 `undefined` 的字段会被忽略。
+*/
+function mergeOptions(base, override) {
+	const result = { ...base };
+	if (!override) return result;
+	for (const [key, value] of Object.entries(override)) {
+		if (value === void 0) continue;
+		const current = result[key];
+		result[key] = isPlainObject(current) && isPlainObject(value) ? mergeOptions(current, value) : value;
+	}
+	return result;
+}
+//#endregion
+//#region src/Scrollbars/ScrollbarsProvider.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxScrollbarsProvider",
+	inheritAttrs: false,
+	__name: "ScrollbarsProvider",
+	props: {
+		enabled: {
+			type: Boolean,
+			default: true
+		},
+		autoHide: { default: "scroll" },
+		autoHideDelay: { default: 800 },
+		options: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		/** 什么都不做的句柄：元素已被别处接管时使用，避免一方销毁连带另一方。 */
+		const noopHandle = {
+			update: () => {},
+			destroy: () => {}
+		};
+		const options = computed(() => mergeOptions({ scrollbars: {
+			theme: "os-theme-astryx",
+			autoHide: props.autoHide,
+			autoHideDelay: props.autoHideDelay
+		} }, props.options));
+		function mount(element, initial) {
+			if (OverlayScrollbars(element)) return noopHandle;
+			const instance = OverlayScrollbars({
+				target: element,
+				elements: { viewport: element }
+			}, initial);
+			return {
+				update: (next) => instance.options(next, true),
+				destroy: () => instance.destroy()
+			};
+		}
+		provide(scrollbarsKey, {
+			enabled: computed(() => props.enabled),
+			options,
+			mount
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/SegmentedControl/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../SegmentedControl-ChHmFrrC.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../SegmentedControl-D1wWGBZo.js";
 export { _sfc_main as SegmentedControl, _sfc_main$1 as SegmentedControlItem };

package/dist/{SegmentedControl-ChHmFrrC.js → SegmentedControl-D1wWGBZo.js}

@@ -1,9 +1,11 @@
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
 import { t as invokeNativeEventHandler } from "./eventHandlers-DUXzBWZy.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeModels, mergeProps, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, openBlock, provide, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, openBlock, provide, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef } from "vue";
 import "../styles/segmented-control.css";
 //#region src/SegmentedControl/context.ts
-const segmentedControlContextKey = Symbol("astryx-segmented-control");
+const segmentedControlContextKey = defineLayerScopedKey("astryx-segmented-control", null);
 //#endregion
 //#region src/SegmentedControl/SegmentedControl.vue
 const _hoisted_1$1 = [
@@ -269,7 +271,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const attrs = useAttrs();
-		const context = inject(segmentedControlContextKey, null);
+		const press = usePressFeedback({ hasOverlay: false });
+		const context = readLayerScoped(segmentedControlContextKey);
 		const root = useTemplateRef("root");
 		__expose({ element: computed(() => root.value ?? null) });
 		const size = computed(() => context?.size.value ?? "md");
@@ -304,7 +307,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return openBlock(), createElementBlock("button", mergeProps({
 				ref_key: "root",
 				ref: root
-			}, forwardedAttrs.value, {
+			}, {
+				...forwardedAttrs.value,
+				...isDisabled.value ? {} : unref(press).pressableProps
+			}, {
 				"aria-checked": isSelected.value,
 				"aria-disabled": isDisabled.value || void 0,
 				"aria-label": __props.isLabelHidden ? __props.label : void 0,

package/dist/SelectableCard/index.d.ts

@@ -1,2 +1,2 @@
-import { br as SelectableCardProps, vr as _default, xr as SelectableCardSlots, yr as SelectableCardEmits } from "../index-CdtZjkmG.js";
+import { br as SelectableCardProps, vr as _default, xr as SelectableCardSlots, yr as SelectableCardEmits } from "../index-CpNlPLBF.js";
 export { _default as SelectableCard, _default as default, type SelectableCardEmits, type SelectableCardProps, type SelectableCardSlots };

package/dist/SelectableCard/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as SelectableCard_default } from "../SelectableCard-Bj5s_tIN.js";
+import { n as _sfc_main, t as SelectableCard_default } from "../SelectableCard-BEqnhPaX.js";
 export { _sfc_main as SelectableCard, SelectableCard_default as default };

package/dist/{SelectableCard-Bj5s_tIN.js → SelectableCard-BEqnhPaX.js}

@@ -1,7 +1,8 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useClickableContainer } from "./useClickableContainer-DyNpnSEa.js";
-import { t as _sfc_main$2 } from "./Card-HAjZQg2s.js";
-import { computed, createBlock, createVNode, defineComponent, mergeModels, openBlock, renderSlot, useModel, useTemplateRef, withCtx } from "vue";
+import { i as useClickableContainer } from "./useClickableContainer-CdGp_Cev.js";
+import { t as _sfc_main$2 } from "./Card-B-I24X9S.js";
+import { computed, createBlock, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, useTemplateRef, withCtx } from "vue";
 import "../styles/clickable-card.css";
 //#region src/SelectableCard/SelectableCard.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -54,13 +55,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (props.isDisabled) return;
 			handlers.onClick(event);
 		}
+		const { pressableProps } = usePressFeedback({ hasOverlay: false });
 		function onKeyDown(event) {
-			if (props.isDisabled || event.key !== "Enter") return;
+			if (props.isDisabled) {
+				if (event.key === " " || event.key === "Enter") event.preventDefault();
+				return;
+			}
+			if (event.key !== "Enter") return;
 			event.preventDefault();
 			commit(!isSelected.value);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$2, {
+			return openBlock(), createBlock(_sfc_main$2, mergeProps({
 				ref: "card",
 				class: "astryx-clickable-card astryx-selectable-card",
 				"data-disabled": __props.isDisabled || void 0,
@@ -70,25 +76,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"max-width": __props.maxWidth,
 				padding: __props.padding,
 				variant: __props.variant,
-				width: __props.width,
-				onClick: onSurfaceClick
-			}, {
+				width: __props.width
+			}, __props.isDisabled ? void 0 : unref(pressableProps), { onClick: onSurfaceClick }), {
 				default: withCtx(() => [createVNode(_sfc_main$1, {
 					ref: "interactive",
 					as: "input",
+					"aria-disabled": __props.isDisabled || void 0,
 					"aria-label": __props.label,
 					checked: isSelected.value,
-					disabled: __props.isDisabled,
 					type: "checkbox",
 					onChange: _cache[0] || (_cache[0] = ($event) => commit($event.target.checked)),
 					onKeydown: onKeyDown
 				}, null, 8, [
+					"aria-disabled",
 					"aria-label",
-					"checked",
-					"disabled"
+					"checked"
 				]), renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, [
+			}, 16, [
 				"data-disabled",
 				"data-selected",
 				"elevation",

package/dist/Selector/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SelectorOption, c as SelectorProps, d as SelectorSlots, f as SelectorStatus, h as SelectorVariant, i as SelectorIndicatorPosition, l as SelectorSection, m as SelectorStatusVariant, n as SelectorEmits, o as SelectorOptionInput, p as SelectorStatusInput, r as SelectorEntry, s as SelectorPresentation, t as _default, u as SelectorSize } from "../index-N7OVZ38M.js";
+import { a as SelectorOption, c as SelectorProps, d as SelectorSlots, f as SelectorStatus, h as SelectorVariant, i as SelectorIndicatorPosition, l as SelectorSection, m as SelectorStatusVariant, n as SelectorEmits, o as SelectorOptionInput, p as SelectorStatusInput, r as SelectorEntry, s as SelectorPresentation, t as _default, u as SelectorSize } from "../index-Cs1xsHKi.js";
 export { _default as Selector, type SelectorEmits, type SelectorEntry, type SelectorIndicatorPosition, type SelectorOption, type SelectorOptionInput, type SelectorPresentation, type SelectorProps, type SelectorSection, type SelectorSize, type SelectorSlots, type SelectorStatus, type SelectorStatusInput, type SelectorStatusVariant, type SelectorVariant };

package/dist/Selector/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Selector-DuVozKNq.js";
+import { t as _sfc_main } from "../Selector-CPISLzp7.js";
 export { _sfc_main as Selector };