@morscherlab/mint-sdk 1.0.0 → 1.0.1

package/dist/SettingsModal-LEKI6Ebl.js

@@ -0,0 +1,521 @@
+import { E as getFieldRegistryEntry, b as controlsToSettingsSchema, f as resolveControlModel, g as mergeControlWorkspaceOptions } from "./useControlSchema-0n8Bcftq.js";
+import { t as BaseModal_default } from "./BaseModal-B9UA8Y_I.js";
+import { n as colorPalettes, r as useSettingsStore, t as useAuthStore } from "./auth-D9q2GIcv.js";
+import { i as usePlatformContext, t as useFormBuilder } from "./useFormBuilder-COfYWDuC.js";
+import { canAccessByPolicy } from "./permissions.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, vShow, watch, withCtx, withDirectives } from "vue";
+//#region src/utils/items.ts
+function normalizeItemInput(item) {
+	if (typeof item === "object") return item;
+	return {
+		id: item,
+		label: item
+	};
+}
+function normalizeLabelItemInput(item) {
+	if (typeof item === "object") return item;
+	return { label: item };
+}
+//#endregion
+//#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "mint-form-field" };
+var _hoisted_2$1 = {
+	key: 0,
+	class: "mint-form-field__label-row"
+};
+var _hoisted_3$1 = ["for"];
+var _hoisted_4$1 = {
+	key: 0,
+	class: "mint-form-field__required",
+	"aria-hidden": "true"
+};
+var _hoisted_5$1 = {
+	key: 0,
+	class: "mint-form-field__optional"
+};
+var _hoisted_6$1 = ["id"];
+var _hoisted_7$1 = ["id"];
+//#endregion
+//#region src/components/FormField.vue
+var FormField_default = /* @__PURE__ */ defineComponent({
+	__name: "FormField",
+	props: {
+		label: {},
+		error: {},
+		hint: {},
+		required: { type: Boolean },
+		showOptional: { type: Boolean },
+		htmlFor: {},
+		fieldId: {}
+	},
+	setup(__props) {
+		/** Wraps a form control with a label, optional hint text, and validation error display. */
+		const props = __props;
+		const errorId = computed(() => props.error && props.fieldId ? `${props.fieldId}-error` : void 0);
+		const hintId = computed(() => !props.error && props.hint && props.fieldId ? `${props.fieldId}-hint` : void 0);
+		const describedBy = computed(() => errorId.value ?? hintId.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				__props.label ? (openBlock(), createElementBlock("div", _hoisted_2$1, [createElementVNode("label", {
+					for: __props.htmlFor,
+					class: "mint-form-field__label"
+				}, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", _hoisted_4$1, "*")) : createCommentVNode("", true)], 8, _hoisted_3$1), !__props.required && __props.showOptional ? (openBlock(), createElementBlock("span", _hoisted_5$1, " optional ")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default", { describedBy: describedBy.value }),
+				__props.error ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					id: errorId.value,
+					class: "mint-form-field__error",
+					role: "alert"
+				}, toDisplayString(__props.error), 9, _hoisted_6$1)) : __props.hint ? (openBlock(), createElementBlock("p", {
+					key: 2,
+					id: hintId.value,
+					class: "mint-form-field__hint"
+				}, toDisplayString(__props.hint), 9, _hoisted_7$1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/utils/formModelSync.ts
+function recordValuesEqualForKeys(left, right, keys) {
+	for (const key of keys) if (!valuesEqual(left[key], right[key])) return false;
+	return true;
+}
+function pickRecordKeys(source, keys) {
+	return Object.fromEntries(keys.map((key) => [key, source[key]]));
+}
+function pickExistingRecordKeys(source, keys) {
+	return Object.fromEntries(keys.filter((key) => Object.prototype.hasOwnProperty.call(source, key)).map((key) => [key, source[key]]));
+}
+function formSchemaFieldNames(schema) {
+	return (schema.steps ? schema.steps.flatMap((step) => step.sections) : schema.sections).flatMap((section) => section.fields.map((field) => field.name));
+}
+function valuesEqual(left, right) {
+	if (Object.is(left, right)) return true;
+	if (Array.isArray(left) && Array.isArray(right)) return left.length === right.length && left.every((item, index) => valuesEqual(item, right[index]));
+	if (isRecord(left) && isRecord(right)) return recordValuesEqualForKeys(left, right, [...new Set([...Object.keys(left), ...Object.keys(right)])]);
+	return false;
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+//#endregion
+//#region src/components/internal/FormFieldRendererInternal.vue
+var FormFieldRendererInternal_default = /* @__PURE__ */ defineComponent({
+	__name: "FormFieldRendererInternal",
+	props: {
+		field: {},
+		resolvedProps: {},
+		form: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const entry = computed(() => getFieldRegistryEntry(props.field.type));
+		const isChoiceField = computed(() => props.field.type === "checkbox" || props.field.type === "toggle");
+		const componentProps = computed(() => {
+			if (!isChoiceField.value) return props.resolvedProps;
+			return {
+				variant: "row",
+				label: props.field.label,
+				description: props.field.hint,
+				icon: props.field.icon,
+				iconColor: props.field.iconColor,
+				iconBg: props.field.iconBg,
+				...props.resolvedProps
+			};
+		});
+		const errorMessage = computed(() => {
+			const name = props.field.name;
+			return props.form.touched[name] ? props.form.errors[name] : null;
+		});
+		function handleUpload(files) {
+			props.form.setFieldValue(props.field.name, files);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FormField_default, {
+				label: isChoiceField.value ? void 0 : __props.field.label,
+				error: errorMessage.value ?? void 0,
+				hint: isChoiceField.value ? void 0 : __props.field.hint,
+				required: !!__props.field.validation?.required,
+				"html-for": isChoiceField.value ? void 0 : __props.field.name
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, `field:${__props.field.name}`, {
+					field: __props.field,
+					form: __props.form,
+					fieldProps: __props.form.getFieldProps(__props.field.name)
+				}, () => [entry.value.vModel ? (openBlock(), createBlock(resolveDynamicComponent(entry.value.component), normalizeProps(mergeProps({ key: 0 }, componentProps.value)), null, 16)) : (openBlock(), createBlock(resolveDynamicComponent(entry.value.component), mergeProps({ key: 1 }, componentProps.value, { onUpload: handleUpload }), null, 16))])]),
+				_: 3
+			}, 8, [
+				"label",
+				"error",
+				"hint",
+				"required",
+				"html-for"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/SettingsModal.schema.ts
+var APPEARANCE_TAB_ID = "appearance";
+var APPEARANCE_TAB = {
+	id: APPEARANCE_TAB_ID,
+	label: "Appearance",
+	description: "Theme, color palette, and table density"
+};
+function buildFlatSettingsSchema(schema) {
+	return { sections: schema.groups.map((group) => ({
+		id: group.id,
+		title: "",
+		fields: group.fields,
+		columns: group.columns,
+		condition: group.condition
+	})) };
+}
+function filterSettingsSchemaByAccess(schema, canShow) {
+	return { groups: schema.groups.flatMap((group) => {
+		if (!canShow(group)) return [];
+		const fields = group.fields.filter(canShow);
+		if (fields.length === 0) return [];
+		return [{
+			...group,
+			fields
+		}];
+	}) };
+}
+function settingsGroupToTab(group) {
+	return {
+		id: group.id,
+		label: group.label,
+		icon: group.icon,
+		description: group.description
+	};
+}
+function normalizeVisibleSettingsTabs(tabs, canShow) {
+	return tabs.map(normalizeItemInput).filter(canShow);
+}
+function buildSettingsTabs(baseTabs, showAppearance) {
+	return showAppearance ? [...baseTabs, APPEARANCE_TAB] : baseTabs;
+}
+//#endregion
+//#region src/components/SettingsModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "mint-settings-modal__tabs"
+};
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = {
+	key: 1,
+	class: "mint-settings-modal__rail",
+	role: "tablist",
+	"aria-orientation": "vertical",
+	"aria-label": "Settings sections"
+};
+var _hoisted_4 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"onClick"
+];
+var _hoisted_5 = {
+	class: "mint-settings-modal__rail-item-icon",
+	"aria-hidden": "true"
+};
+var _hoisted_6 = ["innerHTML"];
+var _hoisted_7 = { class: "mint-settings-modal__rail-item-text" };
+var _hoisted_8 = { class: "mint-settings-modal__rail-item-label" };
+var _hoisted_9 = {
+	key: 0,
+	class: "mint-settings-modal__rail-item-description"
+};
+var _hoisted_10 = {
+	key: 0,
+	class: "mint-settings-modal__pane-header"
+};
+var _hoisted_11 = { class: "mint-settings-modal__pane-title" };
+var _hoisted_12 = {
+	key: 0,
+	class: "mint-settings-modal__pane-subtitle"
+};
+var _hoisted_13 = { key: 2 };
+var _hoisted_14 = { class: "mint-settings-modal__section" };
+var _hoisted_15 = { class: "mint-settings-modal__option-group" };
+var _hoisted_16 = ["onClick"];
+var _hoisted_17 = { class: "mint-settings-modal__section" };
+var _hoisted_18 = { class: "mint-settings-modal__option-group" };
+var _hoisted_19 = ["onClick"];
+var _hoisted_20 = { class: "mint-settings-modal__section" };
+var _hoisted_21 = { class: "mint-settings-modal__option-group" };
+var _hoisted_22 = ["onClick"];
+var _hoisted_23 = {
+	key: 0,
+	class: "mint-settings-modal__footer"
+};
+//#endregion
+//#region src/components/SettingsModal.vue
+var SettingsModal_default = /* @__PURE__ */ defineComponent({
+	__name: "SettingsModal",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: "Settings" },
+		tabs: { default: () => [] },
+		showAppearance: {
+			type: Boolean,
+			default: true
+		},
+		size: { default: "lg" },
+		layout: { default: "horizontal" },
+		schema: {},
+		model: { default: void 0 },
+		controls: {},
+		controlOptions: {},
+		values: {},
+		enhancements: {},
+		userType: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:values",
+		"close"
+	],
+	setup(__props, { emit: __emit }) {
+		/**
+		* Tabbed settings modal with three usage modes:
+		*
+		*   1. Schema-driven (recommended) — pass `schema`, compact `controls`, or a
+		*      complete `defineControlModel()` result plus `v-model:values`. Each
+		*      group/section becomes a tab; fields auto-render via the SDK form field
+		*      registry (text, select, number, toggle, molecule, concentration, …).
+		*      Conditional visibility, validation, and dynamic options come for free.
+		*
+		*   2. Manual tabs + slots — pass `tabs` and a `<template #tab-{id}>` slot
+		*      per tab. Use this when you need bespoke widgets the form-builder
+		*      registry doesn't cover (or for legacy plugins).
+		*
+		*   3. Appearance only — `showAppearance` (default true) renders the built-in
+		*      theme / palette / table-density tab. Works alongside both modes above.
+		*
+		* Layout: `horizontal` (underline tabs, default) or `vertical` (sidebar rail
+		* with optional icons + descriptions, recommended for 5+ groups).
+		*/
+		const props = __props;
+		const emit = __emit;
+		const settings = useSettingsStore();
+		const auth = useAuthStore();
+		const { user: platformUser } = usePlatformContext();
+		const isVertical = computed(() => props.layout === "vertical");
+		const uid = `mint-settings-${Math.random().toString(36).slice(2, 9)}`;
+		const tabId = (id) => `${uid}-tab-${id}`;
+		const panelId = (id) => `${uid}-panel-${id}`;
+		const resolvedModel = computed(() => {
+			return resolveControlModel(props.model);
+		});
+		const resolvedControls = computed(() => props.controls ?? resolvedModel.value?.controls);
+		const resolvedControlOptions = computed(() => mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions));
+		const sourceSettingsSchema = computed(() => props.schema ?? (resolvedControls.value ? controlsToSettingsSchema(resolvedControls.value, resolvedControlOptions.value) : void 0));
+		const currentAccessUser = computed(() => {
+			if (props.userType) return { role: props.userType === "admin" ? "admin" : "user" };
+			return auth.userInfo ?? platformUser.value ?? null;
+		});
+		const isAccessUserAuthenticated = computed(() => props.userType !== void 0 || auth.isAuthenticated || !!platformUser.value);
+		const settingsSchema = computed(() => {
+			if (!sourceSettingsSchema.value) return void 0;
+			return filterSettingsSchemaByAccess(sourceSettingsSchema.value, canShowForCurrentUser);
+		});
+		const isSchemaDriven = computed(() => !!settingsSchema.value);
+		const resolvedValues = computed(() => ({
+			...resolvedControlOptions.value.initialValues ?? {},
+			...props.values ?? {}
+		}));
+		const builder = useFormBuilder(settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] }, resolvedValues.value, props.enhancements);
+		watch(() => settingsSchema.value, (schema) => {
+			if (!schema) {
+				builder.updateSchema({ sections: [] }, {});
+				return;
+			}
+			const flatSchema = buildFlatSettingsSchema(schema);
+			const fieldNames = formSchemaFieldNames(flatSchema);
+			const sourceValues = props.values === void 0 ? {
+				...resolvedValues.value,
+				...builder.form.data
+			} : resolvedValues.value;
+			builder.updateSchema(flatSchema, pickExistingRecordKeys(sourceValues ?? {}, fieldNames));
+		}, { deep: true });
+		watch(() => ({ ...resolvedValues.value }), (data) => {
+			if (!settingsSchema.value) return;
+			const fieldNames = builderFieldNames();
+			if (recordValuesEqualForKeys(data, builder.form.data, fieldNames)) return;
+			builder.reset(pickRecordKeys(data, fieldNames));
+		}, { deep: true });
+		watch(() => ({ ...builder.form.data }), (data) => {
+			if (settingsSchema.value) emit("update:values", data);
+		}, { deep: true });
+		const visibleSchemaGroups = computed(() => settingsSchema.value ? settingsSchema.value.groups.filter((g) => builder.isSectionVisible(g.id)) : []);
+		const manualTabs = computed(() => normalizeVisibleSettingsTabs(props.tabs, canShowForCurrentUser));
+		const allTabs = computed(() => {
+			return buildSettingsTabs(settingsSchema.value ? visibleSchemaGroups.value.map(settingsGroupToTab) : manualTabs.value, props.showAppearance);
+		});
+		const activeTab = ref(allTabs.value[0]?.id || "appearance");
+		const activeTabMeta = computed(() => allTabs.value.find((t) => t.id === activeTab.value));
+		watch(allTabs, (tabs) => {
+			if (!tabs.some((t) => t.id === activeTab.value)) activeTab.value = tabs[0]?.id ?? "appearance";
+		});
+		const activeGroup = computed(() => visibleSchemaGroups.value.find((g) => g.id === activeTab.value));
+		const activeGroupVisibleFields = computed(() => {
+			if (!activeGroup.value) return [];
+			return activeGroup.value.fields.filter((f) => builder.isFieldVisible(f.name));
+		});
+		const themeOptions = [
+			{
+				value: "light",
+				label: "Light"
+			},
+			{
+				value: "dark",
+				label: "Dark"
+			},
+			{
+				value: "system",
+				label: "System"
+			}
+		];
+		const densityOptions = [
+			{
+				value: "compact",
+				label: "Compact"
+			},
+			{
+				value: "normal",
+				label: "Normal"
+			},
+			{
+				value: "comfortable",
+				label: "Comfortable"
+			}
+		];
+		function handleClose() {
+			emit("update:modelValue", false);
+			emit("close");
+		}
+		function builderFieldNames() {
+			return builder.fields.map((field) => field.name);
+		}
+		function canShowForCurrentUser(item) {
+			return canAccessByPolicy(currentAccessUser.value, item, isAccessUserAuthenticated.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(BaseModal_default, {
+				"model-value": __props.modelValue,
+				title: __props.title,
+				size: __props.size,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
+				onClose: handleClose
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["mint-settings-modal", `mint-settings-modal--${__props.layout}`]) }, [!isVertical.value && allTabs.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(allTabs.value, (tab) => {
+					return openBlock(), createElementBlock("button", {
+						key: tab.id,
+						type: "button",
+						class: normalizeClass(["mint-settings-modal__tab", { "mint-settings-modal__tab--active": activeTab.value === tab.id }]),
+						onClick: ($event) => activeTab.value = tab.id
+					}, toDisplayString(tab.label), 11, _hoisted_2);
+				}), 128))])) : isVertical.value ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(allTabs.value, (tab) => {
+					return openBlock(), createElementBlock("button", {
+						id: tabId(tab.id),
+						key: tab.id,
+						type: "button",
+						role: "tab",
+						class: normalizeClass(["mint-settings-modal__rail-item", { "mint-settings-modal__rail-item--active": activeTab.value === tab.id }]),
+						"aria-selected": activeTab.value === tab.id,
+						"aria-controls": panelId(tab.id),
+						tabindex: activeTab.value === tab.id ? 0 : -1,
+						onClick: ($event) => activeTab.value = tab.id
+					}, [createElementVNode("span", _hoisted_5, [tab.icon ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						innerHTML: tab.icon
+					}, null, 8, _hoisted_6)) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_7, [createElementVNode("span", _hoisted_8, toDisplayString(tab.label), 1), tab.description ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(tab.description), 1)) : createCommentVNode("", true)])], 10, _hoisted_4);
+				}), 128))])) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent(isVertical.value ? "section" : "div"), {
+					class: normalizeClass(isVertical.value ? "mint-settings-modal__pane" : "mint-settings-modal__content"),
+					id: isVertical.value && activeTabMeta.value ? panelId(activeTabMeta.value.id) : void 0,
+					role: isVertical.value ? "tabpanel" : void 0,
+					"aria-labelledby": isVertical.value && activeTabMeta.value ? tabId(activeTabMeta.value.id) : void 0,
+					tabindex: isVertical.value ? 0 : void 0
+				}, {
+					default: withCtx(() => [isVertical.value && activeTabMeta.value?.label ? (openBlock(), createElementBlock("header", _hoisted_10, [createElementVNode("h4", _hoisted_11, toDisplayString(activeTabMeta.value.label), 1), activeTabMeta.value.description ? (openBlock(), createElementBlock("p", _hoisted_12, toDisplayString(activeTabMeta.value.description), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(isVertical.value ? "mint-settings-modal__pane-body" : null) }, [isSchemaDriven.value && activeGroup.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "mint-settings-modal__group-grid",
+						style: normalizeStyle({ "--mint-settings-cols": activeGroup.value.columns ?? 1 })
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(activeGroupVisibleFields.value, (field) => {
+						return openBlock(), createElementBlock("div", {
+							key: field.name,
+							style: normalizeStyle(field.colSpan ? { gridColumn: `span ${field.colSpan}` } : void 0)
+						}, [renderSlot(_ctx.$slots, `field:${field.name}`, {
+							field,
+							form: unref(builder).form,
+							fieldProps: unref(builder).form.getFieldProps(field.name)
+						}, () => [createVNode(FormFieldRendererInternal_default, {
+							field,
+							"resolved-props": unref(builder).getResolvedFieldProps(field),
+							form: unref(builder).form
+						}, null, 8, [
+							"field",
+							"resolved-props",
+							"form"
+						])])], 4);
+					}), 128))], 4)) : !isSchemaDriven.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(manualTabs.value, (tab) => {
+						return withDirectives((openBlock(), createElementBlock("div", { key: tab.id }, [renderSlot(_ctx.$slots, `tab-${tab.id}`)], 512)), [[vShow, activeTab.value === tab.id]]);
+					}), 128)) : createCommentVNode("", true), __props.showAppearance ? withDirectives((openBlock(), createElementBlock("div", _hoisted_13, [
+						createElementVNode("div", _hoisted_14, [_cache[1] || (_cache[1] = createElementVNode("div", { class: "mint-settings-modal__section-label" }, "Theme", -1)), createElementVNode("div", _hoisted_15, [(openBlock(), createElementBlock(Fragment, null, renderList(themeOptions, (opt) => {
+							return createElementVNode("button", {
+								key: opt.value,
+								type: "button",
+								class: normalizeClass(["mint-settings-modal__option-btn", { "mint-settings-modal__option-btn--active": unref(settings).theme === opt.value }]),
+								onClick: ($event) => unref(settings).theme = opt.value
+							}, toDisplayString(opt.label), 11, _hoisted_16);
+						}), 64))])]),
+						createElementVNode("div", _hoisted_17, [_cache[2] || (_cache[2] = createElementVNode("div", { class: "mint-settings-modal__section-label" }, "Color Palette", -1)), createElementVNode("div", _hoisted_18, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(colorPalettes), (palette, key) => {
+							return openBlock(), createElementBlock("button", {
+								key,
+								type: "button",
+								class: normalizeClass(["mint-settings-modal__option-btn", { "mint-settings-modal__option-btn--active": unref(settings).colorPalette === key }]),
+								onClick: ($event) => unref(settings).colorPalette = key
+							}, toDisplayString(palette.name), 11, _hoisted_19);
+						}), 128))])]),
+						createElementVNode("div", _hoisted_20, [
+							_cache[3] || (_cache[3] = createElementVNode("div", { class: "mint-settings-modal__section-label" }, "Table Density", -1)),
+							createElementVNode("div", _hoisted_21, [(openBlock(), createElementBlock(Fragment, null, renderList(densityOptions, (opt) => {
+								return createElementVNode("button", {
+									key: opt.value,
+									type: "button",
+									class: normalizeClass(["mint-settings-modal__option-btn", { "mint-settings-modal__option-btn--active": unref(settings).tableDensity === opt.value }]),
+									onClick: ($event) => unref(settings).tableDensity = opt.value
+								}, toDisplayString(opt.label), 11, _hoisted_22);
+							}), 64))]),
+							_cache[4] || (_cache[4] = createElementVNode("p", { class: "mint-settings-modal__note" }, "Adjusts row height in data tables.", -1))
+						]),
+						renderSlot(_ctx.$slots, "appearance")
+					], 512)), [[vShow, activeTab.value === unref(APPEARANCE_TAB_ID)]]) : createCommentVNode("", true)], 2)]),
+					_: 3
+				}, 8, [
+					"class",
+					"id",
+					"role",
+					"aria-labelledby",
+					"tabindex"
+				]))], 2), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_23, [renderSlot(_ctx.$slots, "footer", {
+					values: unref(builder).form.data,
+					close: handleClose
+				})])) : createCommentVNode("", true)]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"title",
+				"size"
+			]);
+		};
+	}
+});
+//#endregion
+export { recordValuesEqualForKeys as a, normalizeLabelItemInput as c, pickExistingRecordKeys as i, FormFieldRendererInternal_default as n, FormField_default as o, formSchemaFieldNames as r, normalizeItemInput as s, SettingsModal_default as t };
+
+//# sourceMappingURL=SettingsModal-LEKI6Ebl.js.map