@threadlabs/looma 0.14.8 → 0.15.0

package/vue/chunks/UiToast.js

@@ -0,0 +1,81 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { t as UiIconButton_default } from "./UiIconButton.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef, withCtx } from "vue";
+import * as controllerModule from "@threadlabs/looma/components/ui-toast/ui-toast.js";
+//#region .build/vue/UiToast.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "data-ui-toast-state"];
+var _hoisted_2 = { class: "message" };
+var _hoisted_3 = {
+	class: "action",
+	ref: "action"
+};
+//#endregion
+//#region .build/vue/UiToast.vue
+var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiToast",
+	props: {
+		duration: { default: 0 },
+		tone: { default: "neutral" }
+	},
+	emits: ["dismiss"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const root = ref(null);
+		const actionElement = useTemplateRef("action");
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
+		const isDismissDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && (detail["reason"] === "action" || detail["reason"] === "timeout") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"id",
+			"reason",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, { checks: { dismiss: isDismissDetail } });
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { action: actionElement }
+		});
+		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 openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-toast" }, _ctx.$attrs, {
+				role: attribute({
+					neutral: "status",
+					info: "status",
+					success: "status",
+					warning: "status",
+					danger: "alert"
+				}[__props.tone]),
+				"data-ui-toast-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
+			}), [
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "action", {}, void 0, true)], 512),
+				createVNode(UiIconButton_default, {
+					class: "dismiss",
+					size: "sm",
+					variant: "ghost",
+					label: "Dismiss notification",
+					round: true
+				}, {
+					default: withCtx(() => [createVNode(UiIcon_default, { name: "x" })]),
+					_: 1
+				})
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-fdef5729"]]);
+//#endregion
+export { UiToast_default as t };

package/vue/chunks/UiToastRegion.js

@@ -1,65 +1,46 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiIconButton_default } from "./UiIconButton.js";
-import { Fragment, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, withCtx } from "vue";
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, withCtx } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-toast-region/ui-toast-region.js";
 //#region .build/vue/UiToastRegion.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["id", "role"];
-var _hoisted_2 = { class: "message" };
-var _hoisted_3 = ["data-toast"];
+var _hoisted_1 = ["data-ui-toast-region-state"];
+var _hoisted_2 = [
+	"id",
+	"role",
+	"data-tone"
+];
+var _hoisted_3 = { class: "message" };
+var _hoisted_4 = ["data-toast"];
 //#endregion
 //#region .build/vue/UiToastRegion.vue
 var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiToastRegion",
 	props: {
-		auto: {
-			type: Boolean,
-			default: false
-		},
-		duration: { default: 5e3 },
-		message: { default: "Notification" },
-		open: {
-			type: Boolean,
-			default: false
-		}
+		duration: { default: 0 },
+		placement: { default: "top" }
 	},
-	emits: [
-		"update:open",
-		"close",
-		"dismiss"
-	],
+	emits: ["dismiss"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const root = ref(null);
-		const internalOpen = ref(false);
 		const toasts = ref([]);
-		const isCloseDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "timeout" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-			"open",
-			"reason",
-			"trigger"
-		].includes(key));
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.placement && `placement placement=${props.placement}`].filter(Boolean).join(" "));
 		const isDismissDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && (detail["reason"] === "action" || detail["reason"] === "timeout") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"id",
 			"reason",
 			"trigger"
 		].includes(key));
-		const dispatch = createDispatch(root, emit, {
-			checks: {
-				close: isCloseDetail,
-				dismiss: isDismissDetail
-			},
-			modeled: ["open"]
-		});
+		const dispatch = createDispatch(root, emit, { checks: { dismiss: isDismissDetail } });
 		const { host, ready } = useComponentHost(controllerModule.default, {
 			root,
 			dispatch,
 			props,
-			state: {
-				internalOpen,
-				toasts
-			}
+			state: { toasts }
 		});
 		__expose({ show: async (...args) => {
 			await ready();
@@ -73,6 +54,7 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				"aria-live": "polite",
 				popover: "manual"
 			}, _ctx.$attrs, {
+				"data-ui-toast-region-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default"), (openBlock(true), createElementBlock(Fragment, null, renderList(toasts.value, (toast) => {
@@ -80,8 +62,9 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 					key: toast.id,
 					class: normalizeClass(["toast", { closing: toast.closing }]),
 					id: toast.id,
-					role: toast.role
-				}, [createElementVNode("span", _hoisted_2, toDisplayString(toast.message), 1), createElementVNode("span", {
+					role: toast.role,
+					"data-tone": toast.tone
+				}, [createElementVNode("span", _hoisted_3, toDisplayString(toast.message), 1), createElementVNode("span", {
 					class: "dismiss",
 					"data-toast": toast.id
 				}, [createVNode(UiIconButton_default, {
@@ -90,19 +73,12 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 					round: true,
 					label: `Dismiss ${toast.message}`
 				}, {
-					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"stroke-linecap": "round",
-						"aria-hidden": "true"
-					}, [createElementVNode("path", { d: "M18 6 6 18M6 6l12 12" })], -1)])]),
+					default: withCtx(() => [createVNode(UiIcon_default, { name: "x" })]),
 					_: 1
-				}, 8, ["label"])], 8, _hoisted_3)], 10, _hoisted_1);
-			}), 128))], 16);
+				}, 8, ["label"])], 8, _hoisted_4)], 10, _hoisted_2);
+			}), 128))], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2b629142"]]);
+}), [["__scopeId", "data-v-a4727935"]]);
 //#endregion
 export { UiToastRegion_default as t };

package/vue/chunks/UiTooltip.js

@@ -21,7 +21,7 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			type: Boolean,
 			default: false
 		},
-		placement: { default: "top-start" },
+		placement: { default: "top" },
 		showDelay: { default: 500 },
 		trigger: { default: "hover" }
 	},
@@ -37,11 +37,7 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const root = ref(null);
 		const internalOpen = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [
-			props.inverse && "inverse",
-			props.placement && "placement",
-			`placement=${encodeURIComponent(props.placement)}`
-		].filter(Boolean).join(" "));
+		const hostState = computed(() => [props.inverse && "inverse"].filter(Boolean).join(" "));
 		const isOpenDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"open",
 			"reason",
@@ -72,6 +68,6 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-33cc4c66"]]);
+}), [["__scopeId", "data-v-bb92970c"]]);
 //#endregion
 export { UiTooltip_default as t };

package/vue/chunks/UiTree.js

@@ -17,12 +17,14 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: Boolean,
 			default: false
 		},
-		maxDepth: { default: 0 }
+		maxDepth: { default: 0 },
+		selection: { default: "none" }
 	},
 	emits: [
 		"update:maxDepth",
 		"reorder",
-		"reorder-rejected"
+		"reorder-rejected",
+		"select"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -49,10 +51,12 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			"resultingDepth",
 			"trigger"
 		].includes(key));
+		const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Array.isArray(detail["ids"]) && detail["ids"].every((item) => typeof item === "string") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["ids", "trigger"].includes(key));
 		const dispatch = createDispatch(root, emit, {
 			checks: {
 				reorder: isReorderDetail,
-				"reorder-rejected": isReorderRejectedDetail
+				"reorder-rejected": isReorderRejectedDetail,
+				select: isSelectDetail
 			},
 			modeled: ["maxDepth"]
 		});
@@ -72,6 +76,6 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-549b3238"]]);
+}), [["__scopeId", "data-v-3dab8614"]]);
 //#endregion
 export { UiTree_default as t };

package/vue/chunks/UiTreeItem.js

@@ -22,23 +22,29 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = ["aria-label"];
 var _hoisted_4 = ["disabled", "hidden"];
-var _hoisted_5 = {
+var _hoisted_5 = { class: "selection-hit" };
+var _hoisted_6 = [
+	"checked",
+	"disabled",
+	"aria-label"
+];
+var _hoisted_7 = {
 	class: "leading",
 	ref: "leading"
 };
-var _hoisted_6 = {
+var _hoisted_8 = {
 	class: "label",
 	ref: "label"
 };
-var _hoisted_7 = {
+var _hoisted_9 = {
 	class: "label-text",
 	ref: "labelText"
 };
-var _hoisted_8 = {
+var _hoisted_10 = {
 	class: "actions",
 	ref: "actions"
 };
-var _hoisted_9 = ["hidden"];
+var _hoisted_11 = ["hidden"];
 //#endregion
 //#region .build/vue/UiTreeItem.vue
 var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -63,6 +69,10 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		},
 		itemId: { default: "" },
 		label: { default: "" },
+		lazy: {
+			type: Boolean,
+			default: false
+		},
 		marquee: {
 			type: Boolean,
 			default: false
@@ -213,9 +223,17 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						class: "disclosure-icon",
 						"aria-hidden": "true"
 					}, null, -1)])], 8, _hoisted_4),
-					createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "leading")], 512),
-					createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 512)], 512),
-					createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "actions")], 512),
+					createElementVNode("label", _hoisted_5, [createElementVNode("input", {
+						class: "selection-checkbox",
+						type: "checkbox",
+						tabindex: "-1",
+						checked: __props.selected,
+						disabled: __props.disabled,
+						"aria-label": `Select ${__props.label}`
+					}, 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(__props.label), 1)])], 512)], 512),
+					createElementVNode("span", _hoisted_10, [renderSlot(_ctx.$slots, "actions")], 512),
 					_cache[2] || (_cache[2] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
 						"aria-hidden": "true"
@@ -226,7 +244,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					role: "group",
 					hidden: !(isContainer.value && internalExpanded.value),
 					ref: "children"
-				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_9),
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_11),
 				_cache[3] || (_cache[3] = createElementVNode("span", {
 					class: "drop-indicator subtree-drop-indicator",
 					"aria-hidden": "true"
@@ -234,6 +252,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-18b08b05"]]);
+}), [["__scopeId", "data-v-ad0fbbba"]]);
 //#endregion
 export { UiTreeItem_default as t };