@threadlabs/looma 0.28.7 → 0.28.9

package/vue/chunks/UiEditorLinkForm.js

@@ -0,0 +1,669 @@
+import { _ as uniqueKeys, a as concat, g as text, i as checkHydratedRoot, n as KeyedBoundary, o as createDispatch, p as nativeAttrs, s as cycleCheckedComputed, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acceptsControllerWrite } from "./props.js";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { t as UiCheckbox_default } from "./UiCheckbox.js";
+import { t as UiScrollArea_default } from "./UiScrollArea.js";
+import { t as UiFormField_default } from "./UiFormField.js";
+import { t as UiIconButton_default } from "./UiIconButton.js";
+import { t as UiInput_default } from "./UiInput.js";
+import { t as UiStack_default } from "./UiStack.js";
+import { t as UiText_default } from "./UiText.js";
+import { t as UiInputGroup_default } from "./UiInputGroup.js";
+import { t as UiSearchResultRow_default } from "./UiSearchResultRow.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
+//#region .build/vue/UiEditorLinkForm.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-error",
+	"data-existing",
+	"data-mode",
+	"data-new-tab",
+	"data-placeholder",
+	"data-results",
+	"data-searchable",
+	"data-selected",
+	"data-status",
+	"data-text",
+	"data-text-editable",
+	"data-value"
+];
+var _hoisted_2 = ["for"];
+var _hoisted_3 = ["for"];
+//#endregion
+//#region .build/vue/UiEditorLinkForm.vue
+var UiEditorLinkForm_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorLinkForm",
+	props: {
+		error: {
+			type: null,
+			default: ""
+		},
+		existing: {
+			type: null,
+			default: false
+		},
+		mode: {
+			type: null,
+			default: "url"
+		},
+		newTab: {
+			type: null,
+			default: false
+		},
+		placeholder: {
+			type: null,
+			default: "https://example.com"
+		},
+		results: {
+			type: null,
+			default: () => []
+		},
+		searchable: {
+			type: null,
+			default: false
+		},
+		selected: {
+			type: null,
+			default: ""
+		},
+		status: {
+			type: null,
+			default: ""
+		},
+		text: {
+			type: null,
+			default: ""
+		},
+		textEditable: {
+			type: null,
+			default: false
+		},
+		value: {
+			type: null,
+			default: ""
+		}
+	},
+	emits: [
+		"update:newTab",
+		"update:text",
+		"update:value",
+		"destination",
+		"text",
+		"new-tab",
+		"choose",
+		"clear",
+		"save",
+		"dismiss"
+	],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			error: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "error" },
+				description: "A problem to show under the fields, announced as an alert.",
+				default: ""
+			},
+			existing: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "existing" },
+				description: "Whether the link already exists, so the heading reads Edit link rather than Add link.",
+				default: false
+			},
+			mode: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "mode" },
+				description: "What the destination field holds: an address, which offers Open in new tab, or a search, which lists results.",
+				values: ["url", "target"],
+				default: "url"
+			},
+			newTab: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "checked" },
+				description: "Whether Open in new tab is checked.",
+				default: false
+			},
+			placeholder: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "placeholder" },
+				description: "The destination field's placeholder.",
+				default: "https://example.com"
+			},
+			results: {
+				type: {
+					kind: "list",
+					item: {
+						kind: "object",
+						fields: [
+							{
+								name: "id",
+								type: {
+									kind: "terminal",
+									name: "string"
+								},
+								optional: false
+							},
+							{
+								name: "label",
+								type: {
+									kind: "terminal",
+									name: "string"
+								},
+								optional: false
+							},
+							{
+								name: "detail",
+								type: {
+									kind: "terminal",
+									name: "string"
+								},
+								optional: true
+							}
+						],
+						open: false
+					}
+				},
+				required: false,
+				target: { attribute: "results" },
+				description: "The destinations a search found.",
+				default: []
+			},
+			searchable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "searchable" },
+				description: "Whether the destination field searches for a destination as well as taking an address. A searchable field has a search icon and a Clear search\n      button.",
+				default: false
+			},
+			selected: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "selected" },
+				description: "The id of the chosen result, which shows a check.",
+				default: ""
+			},
+			status: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "status" },
+				description: "A line above the results, such as Searching… or No results found., announced politely. Shown only for a search.",
+				default: ""
+			},
+			text: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The Text field's value.",
+				default: ""
+			},
+			textEditable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "texteditable" },
+				description: "Shows a Text field, for a link added where no text is selected.",
+				default: false
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The destination field's text: the address, or the search.",
+				default: ""
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			error: "",
+			existing: false,
+			mode: "url",
+			newTab: false,
+			placeholder: "https://example.com",
+			results: () => [],
+			searchable: false,
+			selected: "",
+			status: "",
+			text: "",
+			textEditable: false,
+			value: ""
+		};
+		const checkedProps = computed(() => ({
+			error: checkedProp(props["error"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "error", acceptedProps),
+			existing: checkedProp(props["existing"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "existing", acceptedProps),
+			mode: checkedProp(props["mode"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "mode", acceptedProps),
+			newTab: checkedProp(props["newTab"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "newTab", acceptedProps),
+			placeholder: checkedProp(props["placeholder"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "placeholder", acceptedProps),
+			results: checkedProp(props["results"], {
+				kind: "list",
+				item: {
+					kind: "object",
+					fields: [
+						{
+							name: "id",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						},
+						{
+							name: "label",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						},
+						{
+							name: "detail",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: true
+						}
+					],
+					open: false
+				}
+			}, false, "results", acceptedProps),
+			searchable: checkedProp(props["searchable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "searchable", acceptedProps),
+			selected: checkedProp(props["selected"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "selected", acceptedProps),
+			status: checkedProp(props["status"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "status", acceptedProps),
+			text: checkedProp(props["text"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "text", acceptedProps),
+			textEditable: checkedProp(props["textEditable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "textEditable", acceptedProps),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "value", acceptedProps)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		const base = ref("ui-editor-link-form");
+		let headingPrevious = null;
+		const heading = cycleCheckedComputed(() => {
+			const next = ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "Edit link",
+				false: "Add link"
+			}, concat(checkedProps.value.existing));
+			if (next === Symbol.for("html-next.invalid-result")) return headingPrevious;
+			return headingPrevious = next;
+		});
+		let fieldLabelPrevious = null;
+		const fieldLabel = cycleCheckedComputed(() => {
+			const next = ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "Link destination",
+				false: "URL"
+			}, concat(checkedProps.value.searchable));
+			if (next === Symbol.for("html-next.invalid-result")) return fieldLabelPrevious;
+			return fieldLabelPrevious = next;
+		});
+		let guardedPrevious = null;
+		const guarded = computed(() => {
+			const candidate = concat(base.value, "-destination");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedPrevious;
+			return guardedPrevious = candidate;
+		});
+		let guardedBindingPrevious = null;
+		const guardedBinding = computed(() => {
+			const candidate = ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "search",
+				false: "link"
+			}, concat(checkedProps.value.mode === "target"));
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBindingPrevious;
+			return guardedBindingPrevious = candidate;
+		});
+		let guardedBinding2Previous = null;
+		const guardedBinding2 = computed(() => {
+			const candidate = concat(base.value, "-destination");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding2Previous;
+			return guardedBinding2Previous = candidate;
+		});
+		let guardedBinding3Previous = null;
+		const guardedBinding3 = computed(() => {
+			const candidate = concat(base.value, "-destination");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding3Previous;
+			return guardedBinding3Previous = candidate;
+		});
+		let guardedBinding4Previous = null;
+		const guardedBinding4 = computed(() => {
+			const candidate = concat(base.value, "-text");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding4Previous;
+			return guardedBinding4Previous = candidate;
+		});
+		let guardedBinding5Previous = null;
+		const guardedBinding5 = computed(() => {
+			const candidate = concat(base.value, "-text");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding5Previous;
+			return guardedBinding5Previous = candidate;
+		});
+		provide("html-next:ui-editor-link-form:base", base);
+		checkHydratedRoot("form", "ui-editor-link-form");
+		const isDestinationDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && Object.keys(detail).every((key) => ["value"].includes(key));
+		const isTextDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["text"] === "string" && Object.keys(detail).every((key) => ["text"].includes(key));
+		const isNewTabDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["newTab"] === "boolean" && Object.keys(detail).every((key) => ["newTab"].includes(key));
+		const isChooseDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && Object.keys(detail).every((key) => ["id"].includes(key));
+		const isClearDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Object.values(detail).every((item) => true);
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				destination: isDestinationDetail,
+				text: isTextDetail,
+				"new-tab": isNewTabDetail,
+				choose: isChooseDetail,
+				clear: isClearDetail,
+				save: isClearDetail,
+				dismiss: isClearDetail
+			},
+			modeled: [
+				"newTab",
+				"text",
+				"value"
+			]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-link-form/ui-editor-link-form.js"), {
+			root,
+			dispatch,
+			acceptsState: (name, keys, value) => acceptsControllerWrite(value, { base: {
+				kind: "terminal",
+				name: "string"
+			} }[name], keys),
+			controllerSource: {
+				specifier: "../components/ui-editor-link-form/ui-editor-link-form.js",
+				definition: "./components/ui-editor-link-form/ui-editor-link-form.html"
+			},
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"error",
+				"existing",
+				"mode",
+				"newTab",
+				"placeholder",
+				"results",
+				"searchable",
+				"selected",
+				"status",
+				"text",
+				"textEditable",
+				"value"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
+			state: { base },
+			computed: {
+				heading,
+				fieldLabel
+			}
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("form", mergeProps({ "aria-label": "Edit link" }, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-error": unref(reflectedProp)("error", "error", checkedProps.value.error, void 0, false),
+				"data-existing": unref(reflectedProp)("existing", "existing", checkedProps.value.existing, void 0, false),
+				"data-mode": unref(reflectedProp)("mode", "mode", checkedProps.value.mode, void 0, false),
+				"data-new-tab": unref(reflectedProp)("newTab", "new-tab", checkedProps.value.newTab, void 0, false),
+				"data-placeholder": unref(reflectedProp)("placeholder", "placeholder", checkedProps.value.placeholder, void 0, false),
+				"data-results": unref(reflectedProp)("results", "results", checkedProps.value.results, void 0, false),
+				"data-searchable": unref(reflectedProp)("searchable", "searchable", checkedProps.value.searchable, void 0, false),
+				"data-selected": unref(reflectedProp)("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-status": unref(reflectedProp)("status", "status", checkedProps.value.status, void 0, false),
+				"data-text": unref(reflectedProp)("text", "text", checkedProps.value.text, void 0, false),
+				"data-text-editable": unref(reflectedProp)("textEditable", "text-editable", checkedProps.value.textEditable, void 0, false),
+				"data-value": unref(reflectedProp)("value", "value", checkedProps.value.value, void 0, false),
+				ref_key: "root",
+				ref: root
+			}), [createVNode(UiStack_default, { gap: "s" }, {
+				default: withCtx(() => [
+					createVNode(UiText_default, {
+						as: "h3",
+						size: "sm",
+						weight: "semibold"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(text)(unref(heading))), 1)]),
+						_: 1
+					}),
+					createVNode(UiStack_default, { gap: "s" }, {
+						default: withCtx(() => [
+							createVNode(UiFormField_default, { invalid: checkedProps.value.error !== "" }, {
+								default: withCtx(() => [
+									createElementVNode("label", {
+										slot: "label",
+										for: guarded.value
+									}, toDisplayString(unref(text)(unref(fieldLabel))), 9, _hoisted_2),
+									checkedProps.value.searchable ? (openBlock(), createBlock(UiInputGroup_default, {
+										key: 0,
+										"prefix-kind": "icon"
+									}, {
+										default: withCtx(() => [
+											createVNode(UiIcon_default, {
+												slot: "prefix",
+												name: guardedBinding.value
+											}, null, 8, ["name"]),
+											createVNode(UiInput_default, {
+												"data-link-destination": "",
+												"data-link-search": "",
+												type: "text",
+												role: "searchbox",
+												autocomplete: "off",
+												id: guardedBinding2.value,
+												placeholder: checkedProps.value.placeholder,
+												value: checkedProps.value.value
+											}, null, 8, [
+												"id",
+												"placeholder",
+												"value"
+											]),
+											checkedProps.value.value !== "" ? (openBlock(), createBlock(UiIconButton_default, {
+												key: 0,
+												slot: "action",
+												label: "Clear search",
+												variant: "ghost",
+												size: "sm",
+												"data-link-clear": ""
+											}, {
+												default: withCtx(() => [createVNode(UiIcon_default, { name: "x" })]),
+												_: 1
+											})) : createCommentVNode("v-if", true)
+										]),
+										_: 1
+									})) : createCommentVNode("v-if", true),
+									!checkedProps.value.searchable ? (openBlock(), createBlock(UiInput_default, {
+										key: 1,
+										"data-link-destination": "",
+										type: "text",
+										inputmode: "url",
+										size: "sm",
+										id: guardedBinding3.value,
+										placeholder: checkedProps.value.placeholder,
+										value: checkedProps.value.value
+									}, null, 8, [
+										"id",
+										"placeholder",
+										"value"
+									])) : createCommentVNode("v-if", true)
+								]),
+								_: 1
+							}, 8, ["invalid"]),
+							checkedProps.value.mode === "target" ? (openBlock(), createBlock(UiScrollArea_default, {
+								key: 0,
+								size: "sm",
+								"aria-label": "Destination search results"
+							}, {
+								default: withCtx(() => [checkedProps.value.status !== "" ? (openBlock(), createBlock(UiText_default, {
+									key: 0,
+									size: "sm",
+									tone: "secondary",
+									role: "status"
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(checkedProps.value.status), 1)]),
+									_: 1
+								})) : createCommentVNode("v-if", true), createVNode(unref(KeyedBoundary), null, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(uniqueKeys)(checkedProps.value.results, (result, index, loop) => result.id), (result) => {
+										return openBlock(), createBlock(UiSearchResultRow_default, {
+											key: result.id,
+											density: "compact",
+											"data-link-result": "",
+											selected: result.id === checkedProps.value.selected,
+											"data-link-id": result.id
+										}, {
+											default: withCtx(() => [
+												createVNode(UiIcon_default, {
+													slot: "leading",
+													name: "file-text"
+												}),
+												createVNode(UiText_default, {
+													slot: "title",
+													as: "strong",
+													size: "sm",
+													weight: "medium",
+													truncate: true,
+													title: result.label
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(result.label), 1)]),
+													_: 2
+												}, 1032, ["title"]),
+												result.detail ? (openBlock(), createBlock(UiText_default, {
+													key: 0,
+													slot: "meta",
+													as: "span",
+													size: "xs",
+													tone: "secondary",
+													truncate: true,
+													title: result.detail
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(result.detail), 1)]),
+													_: 2
+												}, 1032, ["title"])) : createCommentVNode("v-if", true),
+												result.id === checkedProps.value.selected ? (openBlock(), createBlock(UiIcon_default, {
+													key: 1,
+													slot: "trailing",
+													name: "check"
+												})) : createCommentVNode("v-if", true)
+											]),
+											_: 2
+										}, 1032, ["selected", "data-link-id"]);
+									}), 128))]),
+									_: 1
+								})]),
+								_: 1
+							})) : createCommentVNode("v-if", true),
+							checkedProps.value.mode === "url" ? (openBlock(), createBlock(UiCheckbox_default, {
+								key: 1,
+								size: "sm",
+								"data-link-new-tab": "",
+								checked: checkedProps.value.newTab
+							}, {
+								default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Open in new tab", -1)])]),
+								_: 1
+							}, 8, ["checked"])) : createCommentVNode("v-if", true)
+						]),
+						_: 1
+					}),
+					checkedProps.value.textEditable ? (openBlock(), createBlock(UiFormField_default, { key: 0 }, {
+						default: withCtx(() => [createElementVNode("label", {
+							slot: "label",
+							for: guardedBinding4.value
+						}, "Text", 8, _hoisted_3), createVNode(UiInput_default, {
+							"data-link-text": "",
+							size: "sm",
+							id: guardedBinding5.value,
+							value: checkedProps.value.text
+						}, null, 8, ["id", "value"])]),
+						_: 1
+					})) : createCommentVNode("v-if", true),
+					checkedProps.value.error !== "" ? (openBlock(), createBlock(UiText_default, {
+						key: 1,
+						size: "sm",
+						tone: "danger",
+						role: "alert"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(checkedProps.value.error), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true)
+				]),
+				_: 1
+			})], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+});
+//#endregion
+export { UiEditorLinkForm_default as t };