@threadlabs/looma 0.28.7 → 0.28.9

package/vue/chunks/UiEditorCodeLanguage.js

@@ -0,0 +1,163 @@
+import { _ as uniqueKeys, i as checkHydratedRoot, n as KeyedBoundary, o as createDispatch, p as nativeAttrs, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./props.js";
+import { t as UiCombobox_default } from "./UiCombobox.js";
+import { Fragment, computed, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
+//#region .build/vue/UiEditorCodeLanguage.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-languages", "data-value"];
+var _hoisted_2 = ["value"];
+//#endregion
+//#region .build/vue/UiEditorCodeLanguage.vue
+var UiEditorCodeLanguage_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorCodeLanguage",
+	props: {
+		languages: {
+			type: null,
+			default: () => []
+		},
+		value: {
+			type: null,
+			default: "auto"
+		}
+	},
+	emits: ["update:value", "language"],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			languages: {
+				type: {
+					kind: "list",
+					item: {
+						kind: "object",
+						fields: [{
+							name: "value",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						}, {
+							name: "label",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						}],
+						open: false
+					}
+				},
+				required: false,
+				target: { attribute: "languages" },
+				description: "The languages to offer, in order, each with its label; the editor lists Auto first and marks a saved language it cannot highlight.",
+				default: []
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The code block's language, or auto to detect it.",
+				default: "auto"
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			languages: () => [],
+			value: "auto"
+		};
+		const checkedProps = computed(() => ({
+			languages: checkedProp(props["languages"], {
+				kind: "list",
+				item: {
+					kind: "object",
+					fields: [{
+						name: "value",
+						type: {
+							kind: "terminal",
+							name: "string"
+						},
+						optional: false
+					}, {
+						name: "label",
+						type: {
+							kind: "terminal",
+							name: "string"
+						},
+						optional: false
+					}],
+					open: false
+				}
+			}, false, "languages", 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);
+		checkHydratedRoot("div", "ui-editor-code-language");
+		const isLanguageDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && Object.keys(detail).every((key) => ["value"].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { language: isLanguageDetail },
+			modeled: ["value"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-code-language/ui-editor-code-language.js"), {
+			root,
+			dispatch,
+			controllerSource: {
+				specifier: "../components/ui-editor-code-language/ui-editor-code-language.js",
+				definition: "./components/ui-editor-code-language/ui-editor-code-language.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: ["languages", "value"],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps(unref(nativeAttrs)(_ctx.$attrs), {
+				"data-languages": unref(reflectedProp)("languages", "languages", checkedProps.value.languages, void 0, false),
+				"data-value": unref(reflectedProp)("value", "value", checkedProps.value.value, void 0, false),
+				ref_key: "root",
+				ref: root
+			}), [createVNode(UiCombobox_default, {
+				label: "Code language",
+				"label-visibility": "sr-only",
+				size: "sm",
+				filter: "label",
+				disclosure: true,
+				value: checkedProps.value.value
+			}, {
+				default: withCtx(() => [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(uniqueKeys)(checkedProps.value.languages, (language, index, loop) => language.value), (language) => {
+						return openBlock(), createElementBlock("option", {
+							key: language.value,
+							value: language.value
+						}, toDisplayString(language.label), 9, _hoisted_2);
+					}), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["value"])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+});
+//#endregion
+export { UiEditorCodeLanguage_default as t };