@astryx-vue/core 0.1.0 → 0.1.3

package/dist/TabList-C411uNQU.js

@@ -0,0 +1,380 @@
+import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
+import { t as useListFocus } from "./useListFocus-D0iOJl39.js";
+import { t as _sfc_main$3 } from "./Icon-5MdZQ18k.js";
+import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, toDisplayString, unref, useId, watch } from "vue";
+import "../styles/tab-list.css";
+import "../styles/tab-menu.css";
+//#region src/TabList/context.ts
+const tabListContextKey = Symbol("tabListContext");
+//#endregion
+//#region src/TabList/Tab.vue
+const _hoisted_1$2 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"disabled"
+];
+const _hoisted_2$1 = { class: "astryx-tab__label" };
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "Tab",
+	props: {
+		value: {},
+		panelId: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = inject(tabListContextKey);
+		const rootRef = ref();
+		const isSelected = computed(() => context?.value.value === props.value);
+		const tabIndex = computed(() => isSelected.value && !props.disabled ? 0 : -1);
+		const classes = computed(() => [
+			"astryx-tab",
+			`astryx-tab--size-${context?.size.value ?? "md"}`,
+			isSelected.value && "astryx-tab--selected",
+			props.disabled && "astryx-tab--disabled"
+		]);
+		function handleClick() {
+			if (props.disabled || !context) return;
+			context.selectTab(props.value);
+		}
+		function handleKeydown(event) {
+			if (props.disabled || !context) return;
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowDown":
+					event.preventDefault();
+					context.moveFocus("next", props.value);
+					break;
+				case "ArrowLeft":
+				case "ArrowUp":
+					event.preventDefault();
+					context.moveFocus("prev", props.value);
+					break;
+				case "Home":
+					event.preventDefault();
+					context.moveFocus("first", props.value);
+					break;
+				case "End":
+					event.preventDefault();
+					context.moveFocus("last", props.value);
+			}
+		}
+		onMounted(() => {
+			if (!context || !rootRef.value) return;
+			context.registerTab({
+				value: props.value,
+				disabled: props.disabled,
+				el: rootRef.value
+			});
+		});
+		onUnmounted(() => {
+			context?.unregisterTab(props.value);
+		});
+		watch(() => props.disabled, (disabled) => {
+			if (!context || !rootRef.value) return;
+			context.registerTab({
+				value: props.value,
+				disabled,
+				el: rootRef.value
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: `astryx-tab-${__props.value}`,
+				ref_key: "rootRef",
+				ref: rootRef,
+				type: "button",
+				role: "tab",
+				class: normalizeClass(classes.value),
+				"aria-selected": isSelected.value,
+				"aria-controls": __props.panelId,
+				tabindex: tabIndex.value,
+				disabled: __props.disabled,
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}, [createElementVNode("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "default")])], 42, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/TabList/TabList.vue
+const _hoisted_1$1 = { class: "astryx-tab-list__strip" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "TabList",
+	props: {
+		value: {},
+		size: { default: "md" },
+		layout: { default: "hug" },
+		hasDivider: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:value", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const tabs = reactive([]);
+		const focusedValue = ref(props.value);
+		const enabledTabs = computed(() => tabs.filter((tab) => !tab.disabled));
+		function selectTab(value) {
+			if (value === props.value) return;
+			emit("update:value", value);
+			emit("change", value);
+			focusedValue.value = value;
+		}
+		function moveFocus(direction, value) {
+			const stops = enabledTabs.value;
+			if (stops.length === 0) return;
+			const index = stops.findIndex((tab) => tab.value === value);
+			let nextIndex = index;
+			switch (direction) {
+				case "next":
+					nextIndex = index >= 0 ? (index + 1) % stops.length : 0;
+					break;
+				case "prev":
+					nextIndex = index >= 0 ? (index - 1 + stops.length) % stops.length : stops.length - 1;
+					break;
+				case "first":
+					nextIndex = 0;
+					break;
+				case "last": nextIndex = stops.length - 1;
+			}
+			const next = stops[nextIndex];
+			if (!next) return;
+			focusedValue.value = next.value;
+			if (next.selectsOnFocus !== false) selectTab(next.value);
+			next.el.focus();
+		}
+		function registerTab(tab) {
+			const existingIndex = tabs.findIndex((t) => t.value === tab.value);
+			if (existingIndex >= 0) tabs.splice(existingIndex, 1, tab);
+			else tabs.push(tab);
+		}
+		function unregisterTab(value) {
+			const index = tabs.findIndex((t) => t.value === value);
+			if (index >= 0) tabs.splice(index, 1);
+		}
+		provide(tabListContextKey, {
+			value: computed(() => props.value),
+			size: computed(() => props.size),
+			layout: computed(() => props.layout),
+			hasDivider: computed(() => props.hasDivider),
+			tabs,
+			focusedValue,
+			registerTab,
+			unregisterTab,
+			selectTab,
+			moveFocus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-tab-list", [
+					`astryx-tab-list--size-${__props.size}`,
+					`astryx-tab-list--layout-${__props.layout}`,
+					__props.hasDivider && "astryx-tab-list--has-divider"
+				]]),
+				role: "tablist"
+			}, [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")])], 2);
+		};
+	}
+});
+//#endregion
+//#region src/TabList/TabMenu.vue
+const _hoisted_1 = [
+	"id",
+	"aria-expanded",
+	"tabindex"
+];
+const _hoisted_2 = { class: "astryx-tab__label" };
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = {
+	class: "astryx-tab-menu-heading",
+	role: "presentation"
+};
+const _hoisted_5 = [
+	"data-selected",
+	"aria-checked",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_6 = { class: "astryx-tab-menu-item-label" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTabMenu",
+	__name: "TabMenu",
+	props: {
+		label: {},
+		options: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = inject(tabListContextKey);
+		const uid = useId();
+		const stopValue = `tab-menu:${uid}`;
+		const menuId = `astryx-tab-menu-${uid}`;
+		const anchorRef = ref(null);
+		const surfaceRef = ref(null);
+		const isOpen = ref(false);
+		const placement = computed(() => "below");
+		const alignment = computed(() => "start");
+		const selectedOption = computed(() => props.options.find((option) => option.value === context?.value.value));
+		const triggerLabel = computed(() => selectedOption.value?.label ?? props.label);
+		const hasSelectedOption = computed(() => selectedOption.value != null);
+		const sizeClass = computed(() => `astryx-tab--size-${context?.size.value ?? "md"}`);
+		const { position, detach } = usePositionedLayer({
+			alignment,
+			anchor: anchorRef,
+			gap: 4,
+			isOpen,
+			layer: surfaceRef,
+			placement
+		});
+		const listFocus = useListFocus({
+			hasRovingTabIndex: true,
+			itemSelector: "[role=\"menuitemradio\"]",
+			onEscape: () => {
+				isOpen.value = false;
+			}
+		});
+		useDismiss({
+			container: surfaceRef,
+			isEnabled: isOpen,
+			onDismiss: () => {
+				isOpen.value = false;
+			},
+			trigger: anchorRef
+		});
+		function register() {
+			if (!context || anchorRef.value == null) return;
+			context.registerTab({
+				disabled: false,
+				el: anchorRef.value,
+				selectsOnFocus: false,
+				value: stopValue
+			});
+		}
+		function toggle() {
+			isOpen.value = !isOpen.value;
+		}
+		function select(value) {
+			context?.selectTab(value);
+			isOpen.value = false;
+		}
+		function onTriggerKeyDown(event) {
+			if (!context || isOpen.value) return;
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowDown":
+					event.preventDefault();
+					context.moveFocus("next", stopValue);
+					break;
+				case "ArrowLeft":
+				case "ArrowUp":
+					event.preventDefault();
+					context.moveFocus("prev", stopValue);
+					break;
+				case "Home":
+					event.preventDefault();
+					context.moveFocus("first", stopValue);
+					break;
+				case "End":
+					event.preventDefault();
+					context.moveFocus("last", stopValue);
+			}
+		}
+		function onMenuKeyDown(event) {
+			if (event.key === "Tab") {
+				isOpen.value = false;
+				return;
+			}
+			listFocus.handleKeyDown(event);
+		}
+		function onItemKeyDown(event, value) {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			select(value);
+		}
+		watch(surfaceRef, (element) => {
+			listFocus.listRef.value = element;
+		}, { immediate: true });
+		watch(isOpen, async (open) => {
+			if (!open) {
+				const shouldRestore = surfaceRef.value?.contains(document.activeElement) ?? false;
+				await nextTick();
+				if (shouldRestore) anchorRef.value?.focus();
+				return;
+			}
+			await nextTick();
+			listFocus.focusFirst();
+		});
+		onMounted(register);
+		onUnmounted(() => {
+			context?.unregisterTab(stopValue);
+			detach();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("button", {
+				id: `astryx-tab-menu-trigger-${unref(uid)}`,
+				ref_key: "anchorRef",
+				ref: anchorRef,
+				type: "button",
+				class: normalizeClass(["astryx-tab astryx-tab-menu", [sizeClass.value, hasSelectedOption.value && "astryx-tab--selected"]]),
+				"data-tab-menu": "",
+				"aria-controls": menuId,
+				"aria-haspopup": "menu",
+				"aria-expanded": isOpen.value,
+				tabindex: hasSelectedOption.value ? 0 : -1,
+				onClick: toggle,
+				onKeydown: onTriggerKeyDown
+			}, [createElementVNode("span", _hoisted_2, toDisplayString(triggerLabel.value), 1), createVNode(_sfc_main$3, {
+				class: "astryx-tab-menu-chevron",
+				"data-state": isOpen.value ? "expanded" : "collapsed",
+				color: "inherit",
+				icon: "chevronDown",
+				size: "sm"
+			}, null, 8, ["data-state"])], 42, _hoisted_1), (openBlock(), createBlock(Teleport, { to: "body" }, [isOpen.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: menuId,
+				ref_key: "surfaceRef",
+				ref: surfaceRef,
+				class: "astryx-tab-menu-dropdown",
+				role: "menu",
+				tabindex: "-1",
+				"aria-label": __props.label,
+				style: normalizeStyle({
+					top: `${unref(position).top}px`,
+					left: `${unref(position).left}px`
+				}),
+				onKeydown: onMenuKeyDown,
+				onFocusin: _cache[0] || (_cache[0] = (...args) => unref(listFocus).handleFocus && unref(listFocus).handleFocus(...args))
+			}, [createElementVNode("span", _hoisted_4, toDisplayString(__props.label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+				return openBlock(), createElementBlock("div", {
+					key: option.value,
+					class: "astryx-tab-menu-item",
+					"data-selected": option.value === unref(context)?.value.value || void 0,
+					role: "menuitemradio",
+					"aria-checked": option.value === unref(context)?.value.value,
+					tabindex: "-1",
+					onClick: ($event) => select(option.value),
+					onKeydown: ($event) => onItemKeyDown($event, option.value)
+				}, [createElementVNode("span", _hoisted_6, [option.iconClass ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["astryx-tab-menu-icon", option.iconClass])
+				}, null, 2)) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(option.label), 1)]), option.value === unref(context)?.value.value ? (openBlock(), createBlock(_sfc_main$3, {
+					key: 0,
+					color: "accent",
+					icon: "check",
+					size: "sm"
+				})) : createCommentVNode("v-if", true)], 40, _hoisted_5);
+			}), 128))], 44, _hoisted_3)) : createCommentVNode("v-if", true)]))], 64);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main$2 as r, _sfc_main as t };

package/dist/Table/index.d.ts

@@ -0,0 +1,3 @@
+import { _ as TableSortEntry, a as TableColumn, b as TableVerticalAlign, c as TableDividers, d as TableFilterValue, f as TablePlugin, g as TableSortDirection, i as TableCellProps, l as TableFilterField, m as TableRowProps, n as PixelWidth, o as TableColumnAlign, p as TableProps, r as ProportionalWidth, s as TableDensity, t as ColumnWidth, u as TableFilterState, v as TableSortState, y as TableTextOverflow } from "../types-JktRxujg.js";
+import { A as generateColumns, C as UseTableColumnSettingsConfig, D as useTableColumnResize, E as UseTableColumnResizeConfig, F as sortRows, M as pixel, N as proportional, O as capitalize, P as resolveColumnWidths, S as ColumnSettingsOption, T as useTableColumnSettingsState, _ as useTablePagination, a as _default$3, b as useTableFilterState, c as _default, d as useTableSortableState, f as UseTableSelectionConfig, g as UseTablePaginationConfig, h as useTableSelectionState, i as _default$4, j as paginateData, k as cellText, l as UseTableSortableConfig, m as useTableSelection, n as _default$6, o as _default$2, p as UseTableSelectionStateConfig, r as _default$5, s as _default$1, t as _default$7, u as useTableSortable, v as UseTableFilteringConfig, w as useTableColumnSettings, x as useTableFiltering, y as applyTableFilters } from "../index-DXSs3rwa.js";
+export { type ColumnSettingsOption, type ColumnWidth, type PixelWidth, type ProportionalWidth, _default as Table, _default$1 as TableBody, _default$2 as TableCell, type TableCellProps, type TableColumn, type TableColumnAlign, type TableDensity, type TableDividers, type TableFilterField, type TableFilterState, type TableFilterValue, _default$3 as TableFooter, _default$4 as TableHeader, _default$5 as TableHeaderCell, type TablePlugin, type TableProps, _default$6 as TableRow, type TableRowProps, _default$7 as TableSelectionToolbar, type TableSortDirection, type TableSortEntry, type TableSortState, type TableTextOverflow, type TableVerticalAlign, type UseTableColumnResizeConfig, type UseTableColumnSettingsConfig, type UseTableFilteringConfig, type UseTablePaginationConfig, type UseTableSelectionConfig, type UseTableSelectionStateConfig, type UseTableSortableConfig, applyTableFilters, capitalize, cellText, generateColumns, paginateData, paginateData as paginateTableData, pixel, proportional, resolveColumnWidths, sortRows, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTablePagination, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState };

package/dist/Table/index.js

@@ -0,0 +1,2 @@
+import { C as paginateData, D as sortRows, E as resolveColumnWidths, S as generateColumns, T as proportional, _ as useTableColumnSettings, a as _sfc_main$3, b as capitalize, c as _sfc_main, d as useTableSelection, f as useTableSelectionState, g as useTableFiltering, h as useTableFilterState, i as _sfc_main$4, l as useTableSortable, m as applyTableFilters, n as _sfc_main$6, o as _sfc_main$2, p as useTablePagination, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main$7, u as useTableSortableState, v as useTableColumnSettingsState, w as pixel, x as cellText, y as useTableColumnResize } from "../Table-7qRmlIQd.js";
+export { _sfc_main as Table, _sfc_main$1 as TableBody, _sfc_main$2 as TableCell, _sfc_main$3 as TableFooter, _sfc_main$4 as TableHeader, _sfc_main$5 as TableHeaderCell, _sfc_main$6 as TableRow, _sfc_main$7 as TableSelectionToolbar, applyTableFilters, capitalize, cellText, generateColumns, paginateData, paginateData as paginateTableData, pixel, proportional, resolveColumnWidths, sortRows, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTablePagination, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState };