@astryx-vue/core 0.1.1 → 0.2.0

package/dist/types-DZoEm_DG.d.ts

@@ -0,0 +1,97 @@
+import { Component, VNodeChild } from "vue";
+//#region src/Icon/types.d.ts
+/**
+ * Icon sizes are expressed in `rem` so they scale with the root font-size.
+ * Values are the px-equivalents at a 16px root: 12, 16, 20, and 24px.
+ */
+type IconSize = 'xsm' | 'sm' | 'md' | 'lg';
+interface IconColorMap {
+  accent: true;
+  blue: true;
+  cyan: true;
+  disabled: true;
+  error: true;
+  gray: true;
+  green: true;
+  inherit: true;
+  orange: true;
+  pink: true;
+  primary: true;
+  purple: true;
+  red: true;
+  secondary: true;
+  success: true;
+  teal: true;
+  tertiary: true;
+  warning: true;
+  yellow: true;
+}
+type IconColor = Extract<keyof IconColorMap, string>;
+/**
+ * The semantic names of the artwork astryx-vue keeps for its own chrome.
+ *
+ * A name describes what the icon is for, not one particular drawing, so a theme
+ * can replace the artwork with one declaration. Applications never pass these
+ * names: the artwork is a library implementation detail, and a `icon` prop or
+ * slot takes a CSS icon class or the application's own component instead.
+ */
+type IconName = 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'check' | 'moreHorizontal' | 'copy' | 'calendar' | 'clock' | 'upload' | 'arrowUp' | 'arrowDown' | 'close' | 'funnel' | 'image';
+/**
+ * A built-in name, or any other string.
+ *
+ * The `(string & {})` intersection keeps the built-in names available for
+ * autocomplete while allowing keys contributed by a component or application.
+ */
+type ExtendedIconName = IconName | (string & {});
+interface IconProps {
+  /**
+   * The icon to render. Three forms are accepted:
+   *
+   * - a string, treated as a CSS icon class you provide — for example an
+   *   UnoCSS icon such as `'i-carbon-search'`, or your own class;
+   * - a name from the library's own chrome, which only the components use;
+   * - a component, rendered as it is.
+   *
+   * Omit it when the default slot provides the artwork instead.
+   */
+  icon?: ExtendedIconName | Component;
+  /**
+   * The color of the icon.
+   *
+   * `inherit` (the default) leaves the icon at the surrounding text color,
+   * which is what you want for an icon next to a label. Use a semantic color
+   * only when the color itself carries meaning.
+   *
+   * @default 'inherit'
+   */
+  color?: IconColor;
+  /**
+   * The size of the icon.
+   *
+   * An explicit value wins. When omitted, Icon uses the nearest default
+   * supplied by an owning astryx-vue component for its icon slot, then falls
+   * back to `md`.
+   */
+  size?: IconSize;
+  /**
+   * Accessible name for the icon.
+   *
+   * Set it only when the icon is meaningful on its own, such as a standalone
+   * status glyph with no adjacent text. A non-empty `label` renders the icon as
+   * `role="img"` with this string as `aria-label`; omitting it (or passing an
+   * empty string) keeps the icon `aria-hidden="true"` as decoration.
+   *
+   * Do not set `label` when an interactive parent such as a button or a link
+   * already names the control, or screen readers announce the name twice.
+   */
+  label?: string;
+}
+interface IconSlots {
+  /**
+   * The SVG markup to render. Use it instead of the `icon` prop when the
+   * artwork is written inline.
+   */
+  default?: () => VNodeChild;
+}
+//#endregion
+export { IconSize as a, IconProps as i, IconColor as n, IconSlots as o, IconName as r, ExtendedIconName as t };

package/dist/{index-Bovw9_8d.d.ts → types-Db3Owy8Q.d.ts}

@@ -36,39 +36,4 @@ interface PopoverProps {
   hasEscapeDismiss?: boolean;
 }
 //#endregion
-//#region src/Popover/Popover.vue.d.ts
-declare var __VLS_1: {}, __VLS_9: {};
-type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_1) => any;
-} & {
-  content?: (props: typeof __VLS_9) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  openChange: (isOpen: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
-  onOpenChange?: ((isOpen: boolean) => any) | undefined;
-}>, {
-  label: string;
-  width: string | number;
-  padding: PopoverPadding;
-  hasAutoFocus: boolean;
-  placement: LayerPlacement;
-  alignment: LayerAlignment;
-  isEnabled: boolean;
-  isOpen: boolean;
-  role: PopoverRole;
-  isModal: boolean;
-  hasCloseButton: boolean;
-  closeButtonLabel: string;
-  hasLightDismiss: boolean;
-  hasEscapeDismiss: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
-//#endregion
-export { PopoverProps as a, PopoverPlacement as i, PopoverAlignment as n, PopoverRole as o, PopoverPadding as r, _default as t };
+export { PopoverRole as a, PopoverProps as i, PopoverPadding as n, PopoverPlacement as r, PopoverAlignment as t };

package/dist/types-JktRxujg.d.ts

@@ -0,0 +1,107 @@
+import { VNode, VNodeChild } from "vue";
+//#region src/Table/types.d.ts
+type TableDensity = 'compact' | 'balanced' | 'spacious';
+type TableDividers = 'rows' | 'columns' | 'grid' | 'none';
+type TableTextOverflow = 'wrap' | 'truncate';
+type TableVerticalAlign = 'top' | 'middle' | 'bottom';
+type TableColumnAlign = 'start' | 'center' | 'end';
+type TableSortDirection = 'ascending' | 'descending';
+interface ProportionalWidth {
+  type: 'proportional';
+  value: number;
+  minWidth?: number;
+}
+interface PixelWidth {
+  type: 'pixel';
+  value: number;
+}
+type ColumnWidth = ProportionalWidth | PixelWidth;
+interface TableSortEntry<TSortKey extends string = string> {
+  sortKey: TSortKey;
+  direction: TableSortDirection;
+}
+type TableSortState<TSortKey extends string = string> = TableSortEntry<TSortKey>[];
+interface TableColumn<T extends Record<string, unknown> = Record<string, unknown>> {
+  key: string;
+  header?: string;
+  width?: ColumnWidth;
+  align?: TableColumnAlign;
+  verticalAlign?: TableVerticalAlign;
+  sortable?: boolean | {
+    sortKey?: string;
+    compare?: (a: T, b: T) => number;
+  };
+  /** Field key used by the filtering plugin. */
+  filter?: string;
+  renderCell?: (item: T, index: number) => VNodeChild;
+}
+interface TableFilterField {
+  key: string;
+  label: string;
+  type: 'string' | 'enum';
+  options?: readonly {
+    value: string;
+    label: string;
+  }[];
+}
+type TableFilterValue = string | string[];
+type TableFilterState = Record<string, TableFilterValue>;
+interface TableSortContribution {
+  direction: TableSortDirection | null;
+  rank: number | null;
+  label: string;
+  onClick: (event: MouseEvent) => void;
+}
+interface TableFilterContribution {
+  variant: 'inline' | 'popover';
+  field: TableFilterField;
+  value: TableFilterValue | null;
+  onChange: (value: TableFilterValue | null) => void;
+}
+interface TableSelectionContribution<T> {
+  isAllSelected: () => boolean;
+  isIndeterminate: () => boolean;
+  isSelected: (row: T) => boolean;
+  isSelectable?: (row: T) => boolean;
+  selectAll: (selected: boolean) => void;
+  selectRow: (row: T, selected: boolean) => void;
+  rowLabel?: (row: T) => string;
+  hasRowHighlight?: boolean;
+}
+interface TablePlugin<T extends Record<string, unknown> = Record<string, unknown>> {
+  transformColumns?: (columns: TableColumn<T>[]) => TableColumn<T>[];
+  sortFor?: (column: TableColumn<T>) => TableSortContribution | null;
+  filterFor?: (column: TableColumn<T>) => TableFilterContribution | null;
+  selection?: TableSelectionContribution<T>;
+  widthFor?: (column: TableColumn<T>) => number | undefined;
+  onColumnResizeEnd?: (key: string, width: number) => void;
+  below?: () => VNodeChild;
+}
+interface TableProps<T extends Record<string, unknown> = Record<string, unknown>> {
+  data?: readonly T[];
+  columns?: readonly TableColumn<T>[];
+  idKey?: string;
+  density?: TableDensity;
+  dividers?: TableDividers;
+  isStriped?: boolean;
+  hasHover?: boolean;
+  verticalAlign?: TableVerticalAlign;
+  textOverflow?: TableTextOverflow;
+  plugins?: Record<string, TablePlugin<T> | undefined>;
+  label?: string;
+}
+interface TableSlots {
+  default?: () => VNode[];
+  empty?: () => VNode[];
+}
+interface TableRowProps {
+  isHeaderRow?: boolean;
+}
+interface TableCellProps {
+  align?: TableColumnAlign;
+  colSpan?: number;
+  rowSpan?: number;
+  headers?: string;
+}
+//#endregion
+export { TableSortEntry as _, TableColumn as a, TableVerticalAlign as b, TableDividers as c, TableFilterValue as d, TablePlugin as f, TableSortDirection as g, TableSlots as h, TableCellProps as i, TableFilterField as l, TableRowProps as m, PixelWidth as n, TableColumnAlign as o, TableProps as p, ProportionalWidth as r, TableDensity as s, ColumnWidth as t, TableFilterState as u, TableSortState as v, TableTextOverflow as y };

package/dist/useAppShellMobile-DTsyuAJ4.js

@@ -0,0 +1,19 @@
+import { inject } from "vue";
+//#region src/composables/useAppShellMobile.ts
+const appShellMobileKey = Symbol("astryx-app-shell-mobile");
+const fallback = {
+	isMobile: false,
+	isMobileNavOpen: false,
+	isMobileNavEnabled: false,
+	hasAutoToggle: true,
+	hasSideNav: false,
+	toggleMobileNav: () => {},
+	openMobileNav: () => {},
+	closeMobileNav: () => {}
+};
+/** 外壳外面、或者关掉了移动导航时，返回一组不会做事的默认值。 */
+function useAppShellMobile() {
+	return inject(appShellMobileKey, fallback);
+}
+//#endregion
+export { useAppShellMobile as n, appShellMobileKey as t };

package/dist/useClickableContainer-DyNpnSEa.js

@@ -0,0 +1,112 @@
+//#region src/composables/useClickableContainer.ts
+/**
+* 对应原版 Astryx 的 `hooks/useClickableContainer`。
+*
+* 让整块容器可点，同时把点在嵌套按钮、链接、输入框上的点击留给那些控件自己。
+* ClickableCard 和 SelectableCard 都走这里，避免两套“点到谁算谁”的判断。
+*/
+const INTERACTIVE_SELECTORS = [
+	"button",
+	"a",
+	"input",
+	"select",
+	"textarea",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"radio\"]",
+	"[role=\"switch\"]",
+	"[role=\"tab\"]",
+	"[role=\"menuitem\"]",
+	"[role=\"option\"]",
+	"[role=\"combobox\"]",
+	"[role=\"listbox\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]",
+	"[data-pressable-container]"
+].join(",");
+const NON_INTERACTIVE_SELECTORS = "[aria-readonly=\"true\"]";
+function hasInteractiveAncestor(element, root) {
+	let current = element;
+	while (current != null && current !== root && current !== document.body) {
+		if (current.matches(INTERACTIVE_SELECTORS) && !current.matches(NON_INTERACTIVE_SELECTORS)) return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+function hasTextSelection(node) {
+	if (typeof document === "undefined" || document.getSelection == null) return false;
+	const selection = document.getSelection();
+	if (selection == null || selection.isCollapsed) return false;
+	return node.contains(selection.anchorNode);
+}
+function openInNewTab(href) {
+	window.open(href, "_blank", "noopener");
+}
+/**
+* 把容器的 click / mouseup 交给调用方绑到根元素上。
+* 组件挂载后会给容器加上 `data-pressable-container`，嵌套的可点容器因此不会互相抢走点击。
+*/
+function useClickableContainer(options) {
+	function markContainer() {
+		const container = options.containerRef.value;
+		if (container != null) container.dataset.pressableContainer = "true";
+	}
+	function onClick(event) {
+		markContainer();
+		if (options.disabled) return;
+		const container = options.containerRef.value;
+		if (container == null) return;
+		if (hasTextSelection(container)) return;
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		if (target !== event.currentTarget && hasInteractiveAncestor(target, container)) return;
+		options.onClick?.(event);
+		if (event.defaultPrevented) return;
+		const href = options.href;
+		if (href != null && href !== "") {
+			if (options.target === "_blank" || event.metaKey || event.ctrlKey) {
+				openInNewTab(href);
+				return;
+			}
+			const interactive = options.interactiveRef?.value;
+			if (interactive != null) {
+				interactive.click();
+				return;
+			}
+			window.location.assign(href);
+			return;
+		}
+		if (options.onClick == null) {
+			const interactive = options.interactiveRef?.value;
+			if (interactive != null) {
+				interactive.dispatchEvent(new MouseEvent("click", {
+					bubbles: true,
+					cancelable: true,
+					button: event.button,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					shiftKey: event.shiftKey,
+					altKey: event.altKey
+				}));
+				event.stopPropagation();
+			}
+		}
+	}
+	function onMouseUp(event) {
+		if (options.disabled) return;
+		const href = options.href;
+		if (href == null || href === "" || event.button !== 1) return;
+		const container = options.containerRef.value;
+		const target = event.target;
+		if (container == null || !(target instanceof Element)) return;
+		if (target !== event.currentTarget && hasInteractiveAncestor(target, container)) return;
+		openInNewTab(href);
+	}
+	return {
+		onClick,
+		onMouseUp
+	};
+}
+//#endregion
+export { useClickableContainer as n, INTERACTIVE_SELECTORS as t };

package/dist/useResizable-CeESZS1v.d.ts

@@ -0,0 +1,72 @@
+import { n as PixelWidth } from "./types-JktRxujg.js";
+import { Ref } from "vue";
+//#region src/composables/useResizable.d.ts
+type ResizableDirection = 'horizontal' | 'vertical';
+interface ResizablePercentSize {
+  type: 'percent';
+  value: number;
+  min?: PixelWidth;
+  max?: PixelWidth;
+}
+type ResizableSize = number | `${number}px` | `${number}%` | PixelWidth | ResizablePercentSize;
+interface ResizableRegionConfig {
+  defaultSize?: ResizableSize | string;
+  minSize?: ResizableSize | string;
+  maxSize?: ResizableSize | string;
+  collapsible?: boolean;
+  collapsedSize?: number;
+  snaps?: number[];
+  /** Cascade priority. A lower number gives up space first when the shared container is narrower than the regions. */
+  shrinkOrder?: number;
+}
+interface UseResizableSingleOptions extends ResizableRegionConfig {
+  containerRef?: Ref<HTMLElement | null>;
+  direction?: ResizableDirection;
+  autoSaveId?: string;
+  defaultIsCollapsed?: boolean;
+  isCollapsed?: boolean;
+  onSizeChange?: (size: number) => void;
+  onCollapseChange?: (isCollapsed: boolean) => void;
+}
+interface UseResizableMultiConfig {
+  direction?: ResizableDirection;
+  containerRef?: Ref<HTMLElement | null>;
+  regions: Record<string, ResizableRegionConfig>;
+  autoSaveId?: string;
+}
+interface ResizableProps {
+  _size: number;
+  _isCollapsed: boolean;
+  _onResizeStart: () => void;
+  _onResizeMove: (delta: number) => void;
+  _onResizeEnd: () => void;
+  _onResizeCancel?: () => void;
+  _minSizePx: number;
+  _maxSizePx: number;
+  _snaps: number[];
+  _collapsedSize: number;
+  _collapsible: boolean;
+  _direction?: ResizableDirection;
+  _isResizableProps: true;
+}
+interface ResizableRegion {
+  size: number;
+  isCollapsed: boolean;
+  collapse: () => void;
+  expand: () => void;
+  resize: (size: number) => void;
+  props: ResizableProps;
+}
+declare function percent(value: number, options: {
+  min: PixelWidth;
+  max?: never;
+} | {
+  min?: never;
+  max: PixelWidth;
+}): ResizablePercentSize;
+declare function useResizable(options: UseResizableMultiConfig): Record<string, ResizableRegion>;
+declare function useResizable(options: UseResizableSingleOptions): ResizableRegion;
+type UseResizableOptions = UseResizableSingleOptions | UseResizableMultiConfig;
+type ResizableState = ResizableRegion;
+//#endregion
+export { ResizableRegionConfig as a, UseResizableMultiConfig as c, percent as d, useResizable as f, ResizableRegion as i, UseResizableOptions as l, ResizablePercentSize as n, ResizableSize as o, ResizableProps as r, ResizableState as s, ResizableDirection as t, UseResizableSingleOptions as u };

package/dist/useScrollableArea-DDk_CluT.js

@@ -0,0 +1,172 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+//#region src/composables/useScrollableArea.ts
+const TOLERANCE = 1;
+const idleAxis = () => ({
+	isScrollable: false,
+	atStart: true,
+	atEnd: true
+});
+function mappingFor(element) {
+	const style = getComputedStyle(element);
+	const mode = style.writingMode.toLowerCase();
+	const vertical = mode.startsWith("vertical") || mode.startsWith("sideways");
+	const rtl = style.direction === "rtl";
+	if (!vertical) return {
+		inline: "x",
+		block: "y",
+		inlineReversed: rtl,
+		blockReversed: false
+	};
+	return {
+		inline: "y",
+		block: "x",
+		inlineReversed: mode === "sideways-lr" ? !rtl : rtl,
+		blockReversed: mode.endsWith("-rl")
+	};
+}
+function extent(element, axis) {
+	if (axis === "x") return {
+		client: element.clientWidth,
+		content: element.scrollWidth,
+		offset: element.scrollLeft
+	};
+	return {
+		client: element.clientHeight,
+		content: element.scrollHeight,
+		offset: element.scrollTop
+	};
+}
+function useScrollableArea(options) {
+	const viewport = ref(null);
+	const content = ref(null);
+	const inline = ref(idleAxis());
+	const block = ref(idleAxis());
+	const overflowInline = ref(false);
+	const overflowBlock = ref(false);
+	const mapping = ref({
+		inline: "x",
+		block: "y",
+		inlineReversed: false,
+		blockReversed: false
+	});
+	let observer;
+	const axis = computed(() => options.axis ?? "block");
+	const overscroll = computed(() => options.overscroll ?? "allow");
+	const stickyContainment = computed(() => options.stickyContainment ?? "whenScrollable");
+	function requested(name) {
+		return axis.value === name || axis.value === "both";
+	}
+	function sameAxis(current, next) {
+		return current.isScrollable === next.isScrollable && current.atStart === next.atStart && current.atEnd === next.atEnd;
+	}
+	function measure() {
+		const element = viewport.value;
+		if (element == null) return;
+		const nextMapping = mappingFor(element);
+		const read = (name, reversed) => {
+			const box = extent(element, nextMapping[name]);
+			const overflowing = box.content > box.client + TOLERANCE;
+			const max = Math.max(0, box.content - box.client);
+			const offset = reversed ? max - Math.abs(box.offset) : Math.abs(box.offset);
+			const active = requested(name) && overflowing;
+			return {
+				overflowing,
+				state: {
+					isScrollable: active,
+					atStart: !active || offset <= TOLERANCE,
+					atEnd: !active || offset >= max - TOLERANCE
+				}
+			};
+		};
+		const inlineRead = read("inline", nextMapping.inlineReversed);
+		const blockRead = read("block", nextMapping.blockReversed);
+		const nextInline = requested("inline") ? inlineRead.state : idleAxis();
+		const nextBlock = requested("block") ? blockRead.state : idleAxis();
+		if (mapping.value.inline === nextMapping.inline && mapping.value.block === nextMapping.block && mapping.value.inlineReversed === nextMapping.inlineReversed && mapping.value.blockReversed === nextMapping.blockReversed && overflowInline.value === inlineRead.overflowing && overflowBlock.value === blockRead.overflowing && sameAxis(inline.value, nextInline) && sameAxis(block.value, nextBlock)) return;
+		mapping.value = nextMapping;
+		overflowInline.value = inlineRead.overflowing;
+		overflowBlock.value = blockRead.overflowing;
+		inline.value = nextInline;
+		block.value = nextBlock;
+	}
+	let queued = false;
+	function queueMeasure() {
+		if (queued) return;
+		queued = true;
+		queueMicrotask(() => {
+			queued = false;
+			measure();
+		});
+	}
+	function bind(element) {
+		const node = element instanceof HTMLElement ? element : null;
+		if (viewport.value === node) return;
+		viewport.value?.removeEventListener("scroll", measure);
+		observer?.disconnect();
+		observer = void 0;
+		viewport.value = node;
+		if (node == null) return;
+		node.addEventListener("scroll", measure, { passive: true });
+		if (typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver(() => queueMeasure());
+			observer.observe(node);
+			if (content.value) observer.observe(content.value);
+		}
+		queueMeasure();
+	}
+	watch(content, (element) => {
+		if (element && observer) observer.observe(element);
+		queueMeasure();
+	});
+	watch([
+		axis,
+		overscroll,
+		stickyContainment
+	], queueMeasure);
+	onMounted(queueMeasure);
+	onBeforeUnmount(() => {
+		viewport.value?.removeEventListener("scroll", measure);
+		observer?.disconnect();
+	});
+	const viewportStyle = computed(() => {
+		const map = mapping.value;
+		const requestedX = requested("inline") && map.inline === "x" || requested("block") && map.block === "x";
+		const requestedY = requested("inline") && map.inline === "y" || requested("block") && map.block === "y";
+		const overflowingX = overflowInline.value && map.inline === "x" || overflowBlock.value && map.block === "x";
+		const overflowingY = overflowInline.value && map.inline === "y" || overflowBlock.value && map.block === "y";
+		const contains = overflowingX || overflowingY || stickyContainment.value === "always";
+		const scrollsX = stickyContainment.value === "always" ? requestedX : overflowingX;
+		const scrollsY = stickyContainment.value === "always" ? requestedY : overflowingY;
+		const style = {
+			overflowX: contains ? scrollsX ? "auto" : "hidden" : "clip",
+			overflowY: contains ? scrollsY ? "auto" : "hidden" : "clip"
+		};
+		if (requested("inline")) style[map.inline === "x" ? "overscrollBehaviorX" : "overscrollBehaviorY"] = overscroll.value === "contain" && inline.value.isScrollable ? "contain" : "auto";
+		if (requested("block")) style[map.block === "x" ? "overscrollBehaviorX" : "overscrollBehaviorY"] = overscroll.value === "contain" && block.value.isScrollable ? "contain" : "auto";
+		return style;
+	});
+	const scrollable = computed(() => inline.value.isScrollable || block.value.isScrollable);
+	return {
+		viewport: bind,
+		content,
+		viewportAttrs: computed(() => ({
+			"role": options.role ?? "group",
+			"aria-label": options.label,
+			"tabindex": scrollable.value ? 0 : void 0,
+			"data-scroll-axis": axis.value,
+			"data-scrollable-inline": inline.value.isScrollable ? "true" : void 0,
+			"data-scrollable-block": block.value.isScrollable ? "true" : void 0,
+			"data-scroll-inline-start": inline.value.atStart ? "true" : void 0,
+			"data-scroll-inline-end": inline.value.atEnd ? "true" : void 0,
+			"data-scroll-block-start": block.value.atStart ? "true" : void 0,
+			"data-scroll-block-end": block.value.atEnd ? "true" : void 0
+		})),
+		viewportStyle,
+		state: computed(() => ({
+			inline: inline.value,
+			block: block.value
+		}))
+	};
+}
+//#endregion
+export { useScrollableArea as t };