@threadlabs/looma 0.23.8 → 0.23.10

package/vue/chunks/UiTree.js

@@ -9,6 +9,7 @@ var _hoisted_1 = [
 	"data-label",
 	"data-marquee",
 	"data-max-depth",
+	"data-move-activation",
 	"data-selection",
 	"data-ui-tree-state"
 ];
@@ -38,6 +39,10 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: null,
 			default: 0
 		},
+		moveActivation: {
+			type: null,
+			default: "click"
+		},
 		selection: {
 			type: null,
 			default: "none"
@@ -103,6 +108,17 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				description: "The deepest level a drag may produce, counting the top level as 1. A drop that would place the dragged item, or any item beneath it, deeper than this is\n      refused and reported as reorder-rejected. 0 means no limit.",
 				default: 0
 			},
+			moveActivation: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "moveactivation" },
+				description: "Which handle activations start guided moving. click preserves two-click moving with any pointer. keyboard-touch leaves ordinary mouse and pen clicks inert\n      while retaining keyboard activation and touch taps. Actual pointer dragging works in either mode. Guided moves show Cancel on the source row; Escape or\n      reactivating that source handle also cancels without requesting a reorder.",
+				values: ["click", "keyboard-touch"],
+				default: "click"
+			},
 			selection: {
 				type: {
 					kind: "terminal",
@@ -126,6 +142,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			label: "Tree",
 			marquee: false,
 			maxDepth: 0,
+			moveActivation: "click",
 			selection: "none"
 		};
 		const checkedProps = computed(() => ({
@@ -149,6 +166,10 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				kind: "terminal",
 				name: "number"
 			}, false, "maxDepth", acceptedProps),
+			moveActivation: checkedProp(props["moveActivation"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "moveActivation", acceptedProps),
 			selection: checkedProp(props["selection"], {
 				kind: "terminal",
 				name: "keyword"
@@ -236,6 +257,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"label",
 				"marquee",
 				"maxDepth",
+				"moveActivation",
 				"selection"
 			],
 			propValidity: (name) => propValidityState({
@@ -253,6 +275,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-marquee": reflectedProp("marquee", "marquee", checkedProps.value.marquee, void 0, false),
 				"data-max-depth": reflectedProp("maxDepth", "max-depth", checkedProps.value.maxDepth, void 0, false),
+				"data-move-activation": reflectedProp("moveActivation", "move-activation", checkedProps.value.moveActivation, void 0, false),
 				"data-selection": reflectedProp("selection", "selection", checkedProps.value.selection, void 0, false),
 				"data-ui-tree-state": hostState.value || void 0,
 				ref_key: "root",
@@ -263,6 +286,6 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ba04ad17"]]);
+}), [["__scopeId", "data-v-7845ed59"]]);
 //#endregion
 export { UiTree_default as t };

package/vue/chunks/UiTreeItem.js

@@ -1,7 +1,8 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as useComponentHost, t as createDispatch } from "./host.js";
 import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
+import { t as UiButton_default } from "./UiButton.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiTreeItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
@@ -245,7 +246,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				},
 				required: false,
 				target: { attribute: "sortable" },
-				description: "Gives the item a move handle. Drag it, or activate it and choose a target by a second click or the keyboard. The tree reports reorder and leaves moving the\n      item to you. Needs itemId; disabled items show no handle.",
+				description: "Gives the item a move handle. Drag it, or activate it according to the tree's moveActivation and choose a target by a second click or the keyboard. A\n      guided move exposes Cancel on this row. The tree reports reorder and leaves moving the item to you. Needs itemId; disabled items show no handle.",
 				default: false
 			},
 			subtreeDepth: {
@@ -364,6 +365,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const structuralLevel = ref(1);
 		const tabStop = ref(false);
 		const isContainer = ref(false);
+		const moving = ref(false);
 		let guardedPrevious;
 		const guarded = computed(() => {
 			if (!(structuralLevel.value == null || Number.isInteger(structuralLevel.value))) return guardedPrevious;
@@ -383,6 +385,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		provide("html-next:ui-tree-item:structuralLevel", structuralLevel);
 		provide("html-next:ui-tree-item:tabStop", tabStop);
 		provide("html-next:ui-tree-item:isContainer", isContainer);
+		provide("html-next:ui-tree-item:moving", moving);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-tree-item> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -458,9 +461,18 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				internalExpanded,
 				structuralLevel,
 				tabStop,
-				isContainer
+				isContainer,
+				moving
 			}
 		});
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-tree-item",
@@ -494,7 +506,16 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						class: "drag-handle",
 						type: "button",
 						draggable: "true",
-						"aria-label": `Drag ${checkedProps.value.label ?? ""} to reorder`,
+						"aria-label": typeof {
+							true: `Cancel moving ${checkedProps.value.label ?? ""}`,
+							false: `Drag ${checkedProps.value.label ?? ""} to reorder`
+						}[`${moving.value}`] === "boolean" ? String({
+							true: `Cancel moving ${checkedProps.value.label ?? ""}`,
+							false: `Drag ${checkedProps.value.label ?? ""} to reorder`
+						}[`${moving.value}`]) : attribute({
+							true: `Cancel moving ${checkedProps.value.label ?? ""}`,
+							false: `Drag ${checkedProps.value.label ?? ""} to reorder`
+						}[`${moving.value}`]),
 						ref: "dragHandle"
 					}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						"aria-hidden": "true",
@@ -557,8 +578,18 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					}, null, 8, _hoisted_6)]),
 					createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "leading")], 512),
 					createElementVNode("span", _hoisted_8, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(checkedProps.value.label), 1)])], 512)], 512),
-					createElementVNode("span", _hoisted_10, [renderSlot(_ctx.$slots, "actions")], 512),
-					_cache[2] || (_cache[2] = createElementVNode("span", {
+					createElementVNode("span", _hoisted_10, [moving.value ? (openBlock(), createBlock(UiButton_default, {
+						key: 0,
+						"data-tree-cancel-move": "",
+						variant: "ghost",
+						tone: "neutral",
+						size: "sm",
+						"aria-label": "Cancel move"
+					}, {
+						default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Cancel", -1)])]),
+						_: 1
+					})) : createCommentVNode("v-if", true), createElementVNode("span", null, [renderSlot(_ctx.$slots, "actions")])], 512),
+					_cache[3] || (_cache[3] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
 						"aria-hidden": "true"
 					}, null, -1))
@@ -569,7 +600,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					hidden: guardedBinding2.value,
 					ref: "children"
 				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_11),
-				_cache[3] || (_cache[3] = createElementVNode("span", {
+				_cache[4] || (_cache[4] = createElementVNode("span", {
 					class: "drop-indicator subtree-drop-indicator",
 					"aria-hidden": "true"
 				}, null, -1))
@@ -579,6 +610,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-567c1a55"]]);
+}), [["__scopeId", "data-v-d2b1bbe0"]]);
 //#endregion
 export { UiTreeItem_default as t };