@atscript/vue-table 0.1.58

package/dist/as-row-actions-CeWBBGqh.mjs

@@ -0,0 +1,115 @@
+import { a as useTableContext, c as applyRowGate, d as extractIdentifier, f as intentClass, l as ariaLabelFor, m as triggerAction } from "./use-table-state-C4JbonEZ.mjs";
+import { t as as_action_menu_content_default } from "./as-action-menu-content-CXsdPn42.mjs";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui";
+//#region src/components/defaults/as-row-actions.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = {
+	key: 0,
+	class: "as-row-actions"
+};
+const _hoisted_2 = {
+	key: 1,
+	class: "as-row-actions"
+};
+const _hoisted_3 = [
+	"data-default",
+	"aria-label",
+	"title"
+];
+const _hoisted_4 = {
+	key: 1,
+	class: "as-row-actions-btn-label"
+};
+const _hoisted_5 = {
+	key: 2,
+	class: "as-row-actions"
+};
+//#endregion
+//#region src/components/defaults/as-row-actions.vue
+var as_row_actions_default = /* @__PURE__ */ defineComponent({
+	__name: "as-row-actions",
+	props: {
+		row: {
+			type: Object,
+			required: false
+		},
+		pk: {
+			type: Object,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { state } = useTableContext();
+		const view = computed(() => {
+			const sourceDefault = state.actions.default.row;
+			const filtered = applyRowGate({
+				default: sourceDefault,
+				others: state.actions.others.row,
+				rows: state.actions.rows
+			}, props.row);
+			const total = (filtered.default ? 1 : 0) + filtered.others.length + filtered.rows.length;
+			const single = total === 1 ? filtered.default ?? filtered.others[0] ?? filtered.rows[0] : void 0;
+			return {
+				total,
+				default: filtered.default,
+				single,
+				singleLabelOnly: !!single && !single.icon,
+				singleIntentClass: single ? intentClass("as-row-actions", single) : void 0,
+				singleIsDefault: !!single && single === sourceDefault,
+				menuGroups: [
+					filtered.default ? [filtered.default] : [],
+					filtered.others,
+					filtered.rows
+				]
+			};
+		});
+		async function trigger(action, event) {
+			const preferredId = state.tableDef.value?.preferredId ?? [];
+			const id = props.pk !== void 0 ? props.pk : extractIdentifier(props.row, preferredId);
+			await triggerAction(state, action, {
+				identifiers: id === void 0 ? [] : [id],
+				preferredId
+			}, event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" table-layout: fixed needs a placeholder cell so column widths line up. "), view.value.total === 0 ? (openBlock(), createElementBlock("td", _hoisted_1)) : view.value.single ? (openBlock(), createElementBlock("td", _hoisted_2, [createElementVNode("button", {
+				type: "button",
+				class: normalizeClass(["as-row-actions-btn", [view.value.singleLabelOnly ? "as-row-actions-btn-labelled" : void 0, view.value.singleIntentClass]]),
+				"data-default": view.value.singleIsDefault || void 0,
+				"aria-label": unref(ariaLabelFor)(view.value.single),
+				title: unref(ariaLabelFor)(view.value.single),
+				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => trigger(view.value.single, $event), ["stop"]))
+			}, [view.value.single.icon ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(["as-row-actions-btn-icon", view.value.single.icon]),
+				"aria-hidden": "true"
+			}, null, 2)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(view.value.single.label || view.value.single.name), 1))], 10, _hoisted_3)])) : (openBlock(), createElementBlock("td", _hoisted_5, [createVNode(unref(DropdownMenuRoot), { modal: false }, {
+				default: withCtx(() => [createVNode(unref(DropdownMenuTrigger), { "as-child": "" }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						class: "as-row-actions-btn as-row-actions-more",
+						"aria-label": "Row actions",
+						title: "Row actions",
+						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+					}, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
+						class: "as-row-actions-btn-icon i-as-menu",
+						"aria-hidden": "true"
+					}, null, -1)])])]),
+					_: 1
+				}), createVNode(unref(DropdownMenuPortal), null, {
+					default: withCtx(() => [createVNode(as_action_menu_content_default, {
+						groups: view.value.menuGroups,
+						"default-marker": view.value.default,
+						prefix: "as-row-actions",
+						onSelect: trigger
+					}, null, 8, ["groups", "default-marker"])]),
+					_: 1
+				})]),
+				_: 1
+			})]))], 2112);
+		};
+	}
+});
+//#endregion
+export { as_row_actions_default as t };

package/dist/as-row-actions.cjs

@@ -0,0 +1,4 @@
+require("./use-table-state-MU-vuzui.cjs");
+require("./as-action-menu-content-CyUfBrWH.cjs");
+const require_as_row_actions = require("./as-row-actions-B6Kob6gt.cjs");
+module.exports = require_as_row_actions.as_row_actions_default;

package/dist/as-row-actions.d.cts

@@ -0,0 +1,2 @@
+import { t as _default } from "./as-row-actions.vue-Bvcc2tUN.cjs";
+export = _default;

package/dist/as-row-actions.d.mts

@@ -0,0 +1,2 @@
+import { t as _default } from "./as-row-actions.vue-BPaQfGev.mjs";
+export { _default as default };

package/dist/as-row-actions.mjs

@@ -0,0 +1,4 @@
+import "./use-table-state-C4JbonEZ.mjs";
+import "./as-action-menu-content-CXsdPn42.mjs";
+import { t as as_row_actions_default } from "./as-row-actions-CeWBBGqh.mjs";
+export { as_row_actions_default as default };

package/dist/as-row-actions.vue-BPaQfGev.d.mts

@@ -0,0 +1,11 @@
+import * as vue from "vue";
+
+//#region src/components/defaults/as-row-actions.vue.d.ts
+type __VLS_Props = {
+  row?: Record<string, unknown>;
+  pk?: Record<string, unknown>;
+};
+declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as t };

package/dist/as-row-actions.vue-Bvcc2tUN.d.cts

@@ -0,0 +1,11 @@
+import * as vue from "vue";
+
+//#region src/components/defaults/as-row-actions.vue.d.ts
+type __VLS_Props = {
+  row?: Record<string, unknown>;
+  pk?: Record<string, unknown>;
+};
+declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as t };

package/dist/as-table-Cnw2fOqZ.mjs

@@ -0,0 +1,204 @@
+import { a as useTableContext, g as ROW_ACTIONS_TYPE, h as ROW_ACTIONS_PATH, i as useRegisterMainActionListener } from "./use-table-state-C4JbonEZ.mjs";
+import { o as useSelectModeReset } from "./as-table-status-BjRGGuhC.mjs";
+import { n as useHasEmitListener, t as useTableColumnHandlers } from "./use-table-column-handlers-t6xi1yCE.mjs";
+import { t as as_table_base_default } from "./as-table-base-D0k4k7k_.mjs";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderList, renderSlot, unref, watch, withCtx } from "vue";
+import { rowsToPks } from "@atscript/ui-table";
+//#region src/components/as-table.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "as-table-outer-wrap" };
+const _hoisted_2 = {
+	key: 0,
+	class: "as-table-query-overlay"
+};
+//#endregion
+//#region src/components/as-table.vue
+var as_table_default = /* @__PURE__ */ defineComponent({
+	__name: "as-table",
+	props: {
+		rows: {
+			type: Array,
+			required: false
+		},
+		columns: {
+			type: Array,
+			required: false
+		},
+		stickyHeader: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		virtualRowHeight: {
+			type: Number,
+			required: false
+		},
+		virtualOverscan: {
+			type: Number,
+			required: false,
+			default: 5
+		},
+		columnMenu: {
+			type: Object,
+			required: false
+		},
+		reorderable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		resizable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		columnMinWidth: {
+			type: Number,
+			required: false,
+			default: 48
+		},
+		select: {
+			type: String,
+			required: false,
+			default: "none"
+		},
+		rowDelete: {
+			type: [Boolean, Object],
+			required: false,
+			default: false
+		},
+		rowActionsColumn: {
+			type: [String, Boolean],
+			required: false,
+			default: false
+		}
+	},
+	emits: [
+		"row-click",
+		"row-dblclick",
+		"main-action"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { state } = useTableContext();
+		watch(() => props.rowDelete, (val) => {
+			state.rowDelete.value = val;
+		}, { immediate: true });
+		useSelectModeReset(state, () => props.select);
+		watch(() => {
+			const placement = props.rowActionsColumn;
+			if (!placement) return false;
+			if (placement === "merge-select" && props.select !== "none") return false;
+			return state.actions.cellRow.length > 0;
+		}, (on) => {
+			state.includeActions.value = on;
+		}, { immediate: true });
+		const effectiveRows = computed(() => props.rows ?? state.results.value);
+		const actionsCol = computed(() => {
+			const acts = state.actions.row;
+			return {
+				path: ROW_ACTIONS_PATH,
+				label: "",
+				type: ROW_ACTIONS_TYPE,
+				sortable: false,
+				filterable: false,
+				visible: true,
+				order: 0,
+				fixed: true,
+				width: acts.length === 1 && !acts[0]?.icon ? "8em" : "4em"
+			};
+		});
+		const effectiveColumns = computed(() => {
+			const base = props.columns ?? state.columns.value;
+			const placement = props.rowActionsColumn;
+			if (placement === false || placement === void 0) return base;
+			if (state.actions.row.length === 0) return base;
+			if (placement === "first") return [actionsCol.value, ...base];
+			if (placement === "last") return [...base, actionsCol.value];
+			if (props.select === "none") return [actionsCol.value, ...base];
+			return base;
+		});
+		useRegisterMainActionListener(state, (req) => emit("main-action", req.row, req.absIndex, req.event), useHasEmitListener("onMainAction"));
+		const { onSort, onHide, onFilter, onFiltersOff, onResetWidth, onReorder, onClearFilters } = useTableColumnHandlers(state);
+		function handleSelectAll() {
+			state.selectedRows.value = rowsToPks(effectiveRows.value, state.rowValueFn);
+		}
+		function handleDeselectAll() {
+			state.selectedRows.value = [];
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(as_table_base_default, {
+				"render-mode": "standalone",
+				columns: effectiveColumns.value,
+				rows: effectiveRows.value,
+				sorters: unref(state).sorters.value,
+				"selected-rows": unref(state).selectedRows.value,
+				select: props.select,
+				"row-value-fn": unref(state).rowValueFn,
+				querying: unref(state).querying.value,
+				"query-error": unref(state).queryError.value,
+				"on-retry": unref(state).query,
+				"sticky-header": __props.stickyHeader,
+				"virtual-row-height": __props.virtualRowHeight,
+				"virtual-overscan": __props.virtualOverscan,
+				filters: unref(state).filters.value,
+				"search-term": unref(state).searchTerm.value,
+				"on-clear-filters": unref(onClearFilters),
+				"column-menu": __props.columnMenu,
+				reorderable: __props.reorderable,
+				resizable: __props.resizable,
+				"column-min-width": __props.columnMinWidth,
+				"column-widths": unref(state).columnWidths.value,
+				onSort: unref(onSort),
+				onHide: unref(onHide),
+				onFilter: unref(onFilter),
+				onFiltersOff: unref(onFiltersOff),
+				onSelectAll: handleSelectAll,
+				onDeselectAll: handleDeselectAll,
+				onReorder: unref(onReorder),
+				onResize: unref(state).setColumnWidth,
+				onResetWidth: unref(onResetWidth),
+				onRowClick: _cache[0] || (_cache[0] = (row, ev) => emit("row-click", row, ev)),
+				onRowDblclick: _cache[1] || (_cache[1] = (row, ev) => emit("row-dblclick", row, ev))
+			}, createSlots({ _: 2 }, [renderList(_ctx.$slots, (_, name) => {
+				return {
+					name,
+					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps ?? {})))])
+				};
+			})]), 1032, [
+				"columns",
+				"rows",
+				"sorters",
+				"selected-rows",
+				"select",
+				"row-value-fn",
+				"querying",
+				"query-error",
+				"on-retry",
+				"sticky-header",
+				"virtual-row-height",
+				"virtual-overscan",
+				"filters",
+				"search-term",
+				"on-clear-filters",
+				"column-menu",
+				"reorderable",
+				"resizable",
+				"column-min-width",
+				"column-widths",
+				"onSort",
+				"onHide",
+				"onFilter",
+				"onFiltersOff",
+				"onReorder",
+				"onResize",
+				"onResetWidth"
+			]), unref(state).querying.value ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "query-loading", {}, () => [_cache[2] || (_cache[2] = createElementVNode("span", {
+				class: "as-table-query-overlay-icon",
+				"aria-hidden": "true"
+			}, null, -1))])])) : createCommentVNode("v-if", true)]);
+		};
+	}
+});
+//#endregion
+export { as_table_default as t };

package/dist/as-table-DlDFxdXI.cjs

@@ -0,0 +1,209 @@
+const require_use_table_state = require("./use-table-state-MU-vuzui.cjs");
+const require_as_table_status = require("./as-table-status-DWYoJIMC.cjs");
+const require_use_table_column_handlers = require("./use-table-column-handlers-CGYAY2xH.cjs");
+const require_as_table_base = require("./as-table-base-VIz-B_6_.cjs");
+let vue = require("vue");
+let _atscript_ui_table = require("@atscript/ui-table");
+//#region src/components/as-table.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "as-table-outer-wrap" };
+const _hoisted_2 = {
+	key: 0,
+	class: "as-table-query-overlay"
+};
+//#endregion
+//#region src/components/as-table.vue
+var as_table_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-table",
+	props: {
+		rows: {
+			type: Array,
+			required: false
+		},
+		columns: {
+			type: Array,
+			required: false
+		},
+		stickyHeader: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		virtualRowHeight: {
+			type: Number,
+			required: false
+		},
+		virtualOverscan: {
+			type: Number,
+			required: false,
+			default: 5
+		},
+		columnMenu: {
+			type: Object,
+			required: false
+		},
+		reorderable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		resizable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		columnMinWidth: {
+			type: Number,
+			required: false,
+			default: 48
+		},
+		select: {
+			type: String,
+			required: false,
+			default: "none"
+		},
+		rowDelete: {
+			type: [Boolean, Object],
+			required: false,
+			default: false
+		},
+		rowActionsColumn: {
+			type: [String, Boolean],
+			required: false,
+			default: false
+		}
+	},
+	emits: [
+		"row-click",
+		"row-dblclick",
+		"main-action"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { state } = require_use_table_state.useTableContext();
+		(0, vue.watch)(() => props.rowDelete, (val) => {
+			state.rowDelete.value = val;
+		}, { immediate: true });
+		require_as_table_status.useSelectModeReset(state, () => props.select);
+		(0, vue.watch)(() => {
+			const placement = props.rowActionsColumn;
+			if (!placement) return false;
+			if (placement === "merge-select" && props.select !== "none") return false;
+			return state.actions.cellRow.length > 0;
+		}, (on) => {
+			state.includeActions.value = on;
+		}, { immediate: true });
+		const effectiveRows = (0, vue.computed)(() => props.rows ?? state.results.value);
+		const actionsCol = (0, vue.computed)(() => {
+			const acts = state.actions.row;
+			return {
+				path: require_use_table_state.ROW_ACTIONS_PATH,
+				label: "",
+				type: require_use_table_state.ROW_ACTIONS_TYPE,
+				sortable: false,
+				filterable: false,
+				visible: true,
+				order: 0,
+				fixed: true,
+				width: acts.length === 1 && !acts[0]?.icon ? "8em" : "4em"
+			};
+		});
+		const effectiveColumns = (0, vue.computed)(() => {
+			const base = props.columns ?? state.columns.value;
+			const placement = props.rowActionsColumn;
+			if (placement === false || placement === void 0) return base;
+			if (state.actions.row.length === 0) return base;
+			if (placement === "first") return [actionsCol.value, ...base];
+			if (placement === "last") return [...base, actionsCol.value];
+			if (props.select === "none") return [actionsCol.value, ...base];
+			return base;
+		});
+		require_use_table_state.useRegisterMainActionListener(state, (req) => emit("main-action", req.row, req.absIndex, req.event), require_use_table_column_handlers.useHasEmitListener("onMainAction"));
+		const { onSort, onHide, onFilter, onFiltersOff, onResetWidth, onReorder, onClearFilters } = require_use_table_column_handlers.useTableColumnHandlers(state);
+		function handleSelectAll() {
+			state.selectedRows.value = (0, _atscript_ui_table.rowsToPks)(effectiveRows.value, state.rowValueFn);
+		}
+		function handleDeselectAll() {
+			state.selectedRows.value = [];
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createVNode)(require_as_table_base.as_table_base_default, {
+				"render-mode": "standalone",
+				columns: effectiveColumns.value,
+				rows: effectiveRows.value,
+				sorters: (0, vue.unref)(state).sorters.value,
+				"selected-rows": (0, vue.unref)(state).selectedRows.value,
+				select: props.select,
+				"row-value-fn": (0, vue.unref)(state).rowValueFn,
+				querying: (0, vue.unref)(state).querying.value,
+				"query-error": (0, vue.unref)(state).queryError.value,
+				"on-retry": (0, vue.unref)(state).query,
+				"sticky-header": __props.stickyHeader,
+				"virtual-row-height": __props.virtualRowHeight,
+				"virtual-overscan": __props.virtualOverscan,
+				filters: (0, vue.unref)(state).filters.value,
+				"search-term": (0, vue.unref)(state).searchTerm.value,
+				"on-clear-filters": (0, vue.unref)(onClearFilters),
+				"column-menu": __props.columnMenu,
+				reorderable: __props.reorderable,
+				resizable: __props.resizable,
+				"column-min-width": __props.columnMinWidth,
+				"column-widths": (0, vue.unref)(state).columnWidths.value,
+				onSort: (0, vue.unref)(onSort),
+				onHide: (0, vue.unref)(onHide),
+				onFilter: (0, vue.unref)(onFilter),
+				onFiltersOff: (0, vue.unref)(onFiltersOff),
+				onSelectAll: handleSelectAll,
+				onDeselectAll: handleDeselectAll,
+				onReorder: (0, vue.unref)(onReorder),
+				onResize: (0, vue.unref)(state).setColumnWidth,
+				onResetWidth: (0, vue.unref)(onResetWidth),
+				onRowClick: _cache[0] || (_cache[0] = (row, ev) => emit("row-click", row, ev)),
+				onRowDblclick: _cache[1] || (_cache[1] = (row, ev) => emit("row-dblclick", row, ev))
+			}, (0, vue.createSlots)({ _: 2 }, [(0, vue.renderList)(_ctx.$slots, (_, name) => {
+				return {
+					name,
+					fn: (0, vue.withCtx)((slotProps) => [(0, vue.renderSlot)(_ctx.$slots, name, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(slotProps ?? {})))])
+				};
+			})]), 1032, [
+				"columns",
+				"rows",
+				"sorters",
+				"selected-rows",
+				"select",
+				"row-value-fn",
+				"querying",
+				"query-error",
+				"on-retry",
+				"sticky-header",
+				"virtual-row-height",
+				"virtual-overscan",
+				"filters",
+				"search-term",
+				"on-clear-filters",
+				"column-menu",
+				"reorderable",
+				"resizable",
+				"column-min-width",
+				"column-widths",
+				"onSort",
+				"onHide",
+				"onFilter",
+				"onFiltersOff",
+				"onReorder",
+				"onResize",
+				"onResetWidth"
+			]), (0, vue.unref)(state).querying.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [(0, vue.renderSlot)(_ctx.$slots, "query-loading", {}, () => [_cache[2] || (_cache[2] = (0, vue.createElementVNode)("span", {
+				class: "as-table-query-overlay-icon",
+				"aria-hidden": "true"
+			}, null, -1))])])) : (0, vue.createCommentVNode)("v-if", true)]);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_table_default", {
+	enumerable: true,
+	get: function() {
+		return as_table_default;
+	}
+});