@m3ui-vue/m3ui-vue 0.1.1 → 0.1.3

package/README.md

@@ -33,9 +33,7 @@ In your main stylesheet (e.g. `src/style.css`):
 @import 'tailwindcss';
 @import '@m3ui-vue/m3ui-vue/theme';
 @import '@m3ui-vue/m3ui-vue/palettes'; /* optional — includes 20 color palettes */
-
-/* Required: tells Tailwind to scan the library for class names */
-@source '../node_modules/@m3ui-vue/m3ui-vue';
+@import '@m3ui-vue/m3ui-vue/styles';   /* component scoped styles (transitions, animations) */
 ```
 
 ### 4. Register the Plugin (optional)

package/dist/MIcon-CaEooCmZ.js

@@ -0,0 +1,20 @@
+import { createElementBlock as e, defineComponent as t, normalizeStyle as n, openBlock as r, toDisplayString as i } from "vue";
+//#endregion
+//#region src/components/MIcon.vue
+var a = /* @__PURE__ */ t({
+	__name: "MIcon",
+	props: {
+		name: {},
+		size: { default: 24 }
+	},
+	setup(t) {
+		return (a, o) => (r(), e("span", {
+			class: "material-symbols-outlined leading-none",
+			style: n({ fontSize: `${t.size}px` })
+		}, i(t.name), 5));
+	}
+});
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=MIcon-CaEooCmZ.js.map

package/dist/MIcon-CaEooCmZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MIcon-CaEooCmZ.js","names":[],"sources":["../src/components/MIcon.vue","../src/components/MIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nwithDefaults(defineProps<{ name: string; size?: number }>(), { size: 24 })\n</script>\n\n<template>\n  <span class=\"material-symbols-outlined leading-none\" :style=\"{ fontSize: `${size}px` }\">{{\n    name\n  }}</span>\n</template>\n","<script setup lang=\"ts\">\nwithDefaults(defineProps<{ name: string; size?: number }>(), { size: 24 })\n</script>\n\n<template>\n  <span class=\"material-symbols-outlined leading-none\" :style=\"{ fontSize: `${size}px` }\">{{\n    name\n  }}</span>\n</template>\n"],"mappings":";;;;;;;;;;yBAKE,EAES,QAAA;GAFH,OAAM;GAA0C,OAAK,EAAA,EAAA,UAAA,GAAiB,EAAA,KAAI,IAAA,CAAA;OAC9E,EAAA,IAAI,GAAA,CAAA"}

package/dist/_plugin-vue_export-helper-B3ysoDQm.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { e as t };

package/dist/chart.d.ts

@@ -0,0 +1 @@
+export { default as MChart } from './components/MChart.vue';

package/dist/chart.js

@@ -0,0 +1,141 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeStyle as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, resolveDynamicComponent as u, shallowRef as d, watch as f } from "vue";
+//#endregion
+//#region src/components/MChart.vue
+var p = /* @__PURE__ */ i({
+	__name: "MChart",
+	props: {
+		type: {},
+		data: {},
+		options: {},
+		height: { default: "300px" }
+	},
+	setup(i) {
+		let p = i, m = l(!1), h = d(null), g = d({});
+		function _() {
+			let e = getComputedStyle(document.documentElement), t = (t) => e.getPropertyValue(t).trim();
+			return {
+				primary: t("--color-primary"),
+				onSurface: t("--color-on-surface"),
+				onSurfaceVariant: t("--color-on-surface-variant"),
+				outlineVariant: t("--color-outline-variant"),
+				surface: t("--color-surface"),
+				surfaceContainer: t("--color-surface-container")
+			};
+		}
+		let v = l(_()), y = null;
+		s(async () => {
+			v.value = _(), y = new MutationObserver(() => {
+				v.value = _();
+			}), y.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["class"]
+			});
+			let [e, t] = await Promise.all([import("chart.js"), import("vue-chartjs")]);
+			e.Chart.register(e.CategoryScale, e.LinearScale, e.PointElement, e.LineElement, e.BarElement, e.ArcElement, e.RadialLinearScale, e.Filler, e.Tooltip, e.Legend, e.Title), g.value = {
+				line: t.Line,
+				bar: t.Bar,
+				pie: t.Pie,
+				doughnut: t.Doughnut,
+				radar: t.Radar
+			}, m.value = !0;
+		}), o(() => {
+			y?.disconnect();
+		}), f(() => p.type, () => {
+			m.value && (h.value = g.value[p.type] ?? null);
+		}, { immediate: !0 }), f(m, () => {
+			h.value = g.value[p.type] ?? null;
+		});
+		let b = e(() => {
+			let e = v.value, t = {
+				responsive: !0,
+				maintainAspectRatio: !1,
+				plugins: {
+					legend: { labels: {
+						color: e.onSurface,
+						font: {
+							family: "'Roboto', system-ui, sans-serif",
+							size: 12
+						},
+						usePointStyle: !0,
+						pointStyle: "circle",
+						padding: 16
+					} },
+					tooltip: {
+						backgroundColor: e.surfaceContainer,
+						titleColor: e.onSurface,
+						bodyColor: e.onSurfaceVariant,
+						borderColor: e.outlineVariant,
+						borderWidth: 1,
+						cornerRadius: 12,
+						padding: 12,
+						titleFont: {
+							family: "'Roboto', system-ui, sans-serif",
+							size: 13,
+							weight: "600"
+						},
+						bodyFont: {
+							family: "'Roboto', system-ui, sans-serif",
+							size: 12
+						},
+						displayColors: !0,
+						boxPadding: 4
+					}
+				}
+			};
+			return p.type !== "pie" && p.type !== "doughnut" && (t.scales = {
+				x: {
+					grid: {
+						color: e.outlineVariant + "40",
+						drawTicks: !1
+					},
+					ticks: {
+						color: e.onSurfaceVariant,
+						font: { size: 11 },
+						padding: 8
+					},
+					border: { color: e.outlineVariant }
+				},
+				y: {
+					grid: {
+						color: e.outlineVariant + "40",
+						drawTicks: !1
+					},
+					ticks: {
+						color: e.onSurfaceVariant,
+						font: { size: 11 },
+						padding: 8
+					},
+					border: { color: e.outlineVariant }
+				}
+			}), p.type === "radar" && (t.scales = { r: {
+				grid: { color: e.outlineVariant + "40" },
+				angleLines: { color: e.outlineVariant + "40" },
+				pointLabels: {
+					color: e.onSurfaceVariant,
+					font: { size: 11 }
+				},
+				ticks: {
+					color: e.onSurfaceVariant,
+					backdropColor: "transparent"
+				}
+			} }), x(t, p.options ?? {});
+		});
+		function x(e, t) {
+			let n = { ...e };
+			for (let r of Object.keys(t)) t[r] && typeof t[r] == "object" && !Array.isArray(t[r]) ? n[r] = x(e[r] ?? {}, t[r]) : n[r] = t[r];
+			return n;
+		}
+		return (e, o) => (c(), r("div", {
+			class: "rounded-lg border border-outline-variant bg-surface p-4",
+			style: a({ height: i.height })
+		}, [m.value && h.value ? (c(), t(u(h.value), {
+			key: 0,
+			data: i.data,
+			options: b.value
+		}, null, 8, ["data", "options"])) : n("", !0)], 4));
+	}
+});
+//#endregion
+export { p as MChart };
+
+//# sourceMappingURL=chart.js.map

package/dist/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../src/components/MChart.vue","../src/components/MChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch, onMounted, onBeforeUnmount, shallowRef, type Component } from 'vue'\n\ntype ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'radar'\n\nconst props = withDefaults(\n  defineProps<{\n    type: ChartType\n    data: Record<string, any>\n    options?: Record<string, any>\n    height?: string\n  }>(),\n  { height: '300px' },\n)\n\nconst ready = ref(false)\nconst chartComponent = shallowRef<Component | null>(null)\nconst componentMap = shallowRef<Record<string, Component>>({})\n\nfunction getM3Colors() {\n  const style = getComputedStyle(document.documentElement)\n  const get = (v: string) => style.getPropertyValue(v).trim()\n  return {\n    primary: get('--color-primary'),\n    onSurface: get('--color-on-surface'),\n    onSurfaceVariant: get('--color-on-surface-variant'),\n    outlineVariant: get('--color-outline-variant'),\n    surface: get('--color-surface'),\n    surfaceContainer: get('--color-surface-container'),\n  }\n}\n\nconst m3Colors = ref(getM3Colors())\n\nlet themeObserver: MutationObserver | null = null\n\nonMounted(async () => {\n  m3Colors.value = getM3Colors()\n\n  themeObserver = new MutationObserver(() => { m3Colors.value = getM3Colors() })\n  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })\n\n  const [chartjs, vueChartjs] = await Promise.all([\n    import('chart.js'),\n    import('vue-chartjs'),\n  ])\n\n  chartjs.Chart.register(\n    chartjs.CategoryScale,\n    chartjs.LinearScale,\n    chartjs.PointElement,\n    chartjs.LineElement,\n    chartjs.BarElement,\n    chartjs.ArcElement,\n    chartjs.RadialLinearScale,\n    chartjs.Filler,\n    chartjs.Tooltip,\n    chartjs.Legend,\n    chartjs.Title,\n  )\n\n  componentMap.value = {\n    line: vueChartjs.Line,\n    bar: vueChartjs.Bar,\n    pie: vueChartjs.Pie,\n    doughnut: vueChartjs.Doughnut,\n    radar: vueChartjs.Radar,\n  }\n\n  ready.value = true\n})\n\nonBeforeUnmount(() => { themeObserver?.disconnect() })\n\nwatch(() => props.type, () => {\n  if (ready.value) chartComponent.value = componentMap.value[props.type] ?? null\n}, { immediate: true })\n\nwatch(ready, () => {\n  chartComponent.value = componentMap.value[props.type] ?? null\n})\n\nconst mergedOptions = computed<Record<string, any>>(() => {\n  const c = m3Colors.value\n  const base: Record<string, any> = {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: {\n        labels: {\n          color: c.onSurface,\n          font: { family: \"'Roboto', system-ui, sans-serif\", size: 12 },\n          usePointStyle: true,\n          pointStyle: 'circle',\n          padding: 16,\n        },\n      },\n      tooltip: {\n        backgroundColor: c.surfaceContainer,\n        titleColor: c.onSurface,\n        bodyColor: c.onSurfaceVariant,\n        borderColor: c.outlineVariant,\n        borderWidth: 1,\n        cornerRadius: 12,\n        padding: 12,\n        titleFont: { family: \"'Roboto', system-ui, sans-serif\", size: 13, weight: '600' as const },\n        bodyFont: { family: \"'Roboto', system-ui, sans-serif\", size: 12 },\n        displayColors: true,\n        boxPadding: 4,\n      },\n    },\n  }\n\n  if (props.type !== 'pie' && props.type !== 'doughnut') {\n    base.scales = {\n      x: {\n        grid: { color: c.outlineVariant + '40', drawTicks: false },\n        ticks: { color: c.onSurfaceVariant, font: { size: 11 }, padding: 8 },\n        border: { color: c.outlineVariant },\n      },\n      y: {\n        grid: { color: c.outlineVariant + '40', drawTicks: false },\n        ticks: { color: c.onSurfaceVariant, font: { size: 11 }, padding: 8 },\n        border: { color: c.outlineVariant },\n      },\n    }\n  }\n\n  if (props.type === 'radar') {\n    base.scales = {\n      r: {\n        grid: { color: c.outlineVariant + '40' },\n        angleLines: { color: c.outlineVariant + '40' },\n        pointLabels: { color: c.onSurfaceVariant, font: { size: 11 } },\n        ticks: { color: c.onSurfaceVariant, backdropColor: 'transparent' },\n      },\n    }\n  }\n\n  return deepMerge(base, props.options ?? {})\n})\n\nfunction deepMerge(target: any, source: any): any {\n  const output = { ...target }\n  for (const key of Object.keys(source)) {\n    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {\n      output[key] = deepMerge(target[key] ?? {}, source[key])\n    } else {\n      output[key] = source[key]\n    }\n  }\n  return output\n}\n</script>\n\n<template>\n  <div class=\"rounded-lg border border-outline-variant bg-surface p-4\" :style=\"{ height }\">\n    <component\n      v-if=\"ready && chartComponent\"\n      :is=\"chartComponent\"\n      :data=\"data\"\n      :options=\"mergedOptions\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch, onMounted, onBeforeUnmount, shallowRef, type Component } from 'vue'\n\ntype ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'radar'\n\nconst props = withDefaults(\n  defineProps<{\n    type: ChartType\n    data: Record<string, any>\n    options?: Record<string, any>\n    height?: string\n  }>(),\n  { height: '300px' },\n)\n\nconst ready = ref(false)\nconst chartComponent = shallowRef<Component | null>(null)\nconst componentMap = shallowRef<Record<string, Component>>({})\n\nfunction getM3Colors() {\n  const style = getComputedStyle(document.documentElement)\n  const get = (v: string) => style.getPropertyValue(v).trim()\n  return {\n    primary: get('--color-primary'),\n    onSurface: get('--color-on-surface'),\n    onSurfaceVariant: get('--color-on-surface-variant'),\n    outlineVariant: get('--color-outline-variant'),\n    surface: get('--color-surface'),\n    surfaceContainer: get('--color-surface-container'),\n  }\n}\n\nconst m3Colors = ref(getM3Colors())\n\nlet themeObserver: MutationObserver | null = null\n\nonMounted(async () => {\n  m3Colors.value = getM3Colors()\n\n  themeObserver = new MutationObserver(() => { m3Colors.value = getM3Colors() })\n  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })\n\n  const [chartjs, vueChartjs] = await Promise.all([\n    import('chart.js'),\n    import('vue-chartjs'),\n  ])\n\n  chartjs.Chart.register(\n    chartjs.CategoryScale,\n    chartjs.LinearScale,\n    chartjs.PointElement,\n    chartjs.LineElement,\n    chartjs.BarElement,\n    chartjs.ArcElement,\n    chartjs.RadialLinearScale,\n    chartjs.Filler,\n    chartjs.Tooltip,\n    chartjs.Legend,\n    chartjs.Title,\n  )\n\n  componentMap.value = {\n    line: vueChartjs.Line,\n    bar: vueChartjs.Bar,\n    pie: vueChartjs.Pie,\n    doughnut: vueChartjs.Doughnut,\n    radar: vueChartjs.Radar,\n  }\n\n  ready.value = true\n})\n\nonBeforeUnmount(() => { themeObserver?.disconnect() })\n\nwatch(() => props.type, () => {\n  if (ready.value) chartComponent.value = componentMap.value[props.type] ?? null\n}, { immediate: true })\n\nwatch(ready, () => {\n  chartComponent.value = componentMap.value[props.type] ?? null\n})\n\nconst mergedOptions = computed<Record<string, any>>(() => {\n  const c = m3Colors.value\n  const base: Record<string, any> = {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: {\n        labels: {\n          color: c.onSurface,\n          font: { family: \"'Roboto', system-ui, sans-serif\", size: 12 },\n          usePointStyle: true,\n          pointStyle: 'circle',\n          padding: 16,\n        },\n      },\n      tooltip: {\n        backgroundColor: c.surfaceContainer,\n        titleColor: c.onSurface,\n        bodyColor: c.onSurfaceVariant,\n        borderColor: c.outlineVariant,\n        borderWidth: 1,\n        cornerRadius: 12,\n        padding: 12,\n        titleFont: { family: \"'Roboto', system-ui, sans-serif\", size: 13, weight: '600' as const },\n        bodyFont: { family: \"'Roboto', system-ui, sans-serif\", size: 12 },\n        displayColors: true,\n        boxPadding: 4,\n      },\n    },\n  }\n\n  if (props.type !== 'pie' && props.type !== 'doughnut') {\n    base.scales = {\n      x: {\n        grid: { color: c.outlineVariant + '40', drawTicks: false },\n        ticks: { color: c.onSurfaceVariant, font: { size: 11 }, padding: 8 },\n        border: { color: c.outlineVariant },\n      },\n      y: {\n        grid: { color: c.outlineVariant + '40', drawTicks: false },\n        ticks: { color: c.onSurfaceVariant, font: { size: 11 }, padding: 8 },\n        border: { color: c.outlineVariant },\n      },\n    }\n  }\n\n  if (props.type === 'radar') {\n    base.scales = {\n      r: {\n        grid: { color: c.outlineVariant + '40' },\n        angleLines: { color: c.outlineVariant + '40' },\n        pointLabels: { color: c.onSurfaceVariant, font: { size: 11 } },\n        ticks: { color: c.onSurfaceVariant, backdropColor: 'transparent' },\n      },\n    }\n  }\n\n  return deepMerge(base, props.options ?? {})\n})\n\nfunction deepMerge(target: any, source: any): any {\n  const output = { ...target }\n  for (const key of Object.keys(source)) {\n    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {\n      output[key] = deepMerge(target[key] ?? {}, source[key])\n    } else {\n      output[key] = source[key]\n    }\n  }\n  return output\n}\n</script>\n\n<template>\n  <div class=\"rounded-lg border border-outline-variant bg-surface p-4\" :style=\"{ height }\">\n    <component\n      v-if=\"ready && chartComponent\"\n      :is=\"chartComponent\"\n      :data=\"data\"\n      :options=\"mergedOptions\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/code-editor.d.ts

@@ -0,0 +1,2 @@
+export { default as MCodeEditor } from './components/MCodeEditor.vue';
+export { default as MJsonEditor } from './components/MJsonEditor.vue';

package/dist/code-editor.js

@@ -0,0 +1,379 @@
+import { t as e } from "./MIcon-CaEooCmZ.js";
+import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, watch as _, withCtx as v } from "vue";
+//#region src/components/MCodeEditor.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "overflow-hidden rounded-lg border border-outline-variant" }, b = { class: "flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-2" }, x = { class: "text-label-medium text-on-surface-variant" }, S = { class: "flex items-center gap-2" }, C = ["title"], w = {
+	key: 0,
+	class: "text-primary"
+}, T = /*#__PURE__*/ t(/* @__PURE__ */ c({
+	__name: "MCodeEditor",
+	props: {
+		modelValue: {},
+		language: { default: "javascript" },
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		lineNumbers: {
+			type: Boolean,
+			default: !0
+		},
+		theme: { default: "light" },
+		minHeight: { default: "200px" },
+		maxHeight: { default: "600px" },
+		placeholder: {},
+		wrap: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: o }) {
+		let c = t, v = o, T = m(null), E = null, D = null, O = m(!1);
+		async function k() {
+			await navigator.clipboard.writeText(c.modelValue), O.value = !0, setTimeout(() => {
+				O.value = !1;
+			}, 1500);
+		}
+		let A = n(() => ({
+			javascript: "JavaScript",
+			typescript: "TypeScript",
+			json: "JSON",
+			html: "HTML",
+			css: "CSS",
+			python: "Python",
+			vue: "Vue",
+			plain: "Texto"
+		})[c.language]);
+		async function j() {
+			if (D) return D;
+			let [e, t, n, r, i, a, o, s, c, l, u, d] = await Promise.all([
+				import("@codemirror/view"),
+				import("@codemirror/state"),
+				import("@codemirror/commands"),
+				import("@codemirror/language"),
+				import("./dist-Dsrzt6J5.js"),
+				import("@codemirror/theme-one-dark"),
+				import("@codemirror/lang-javascript"),
+				import("@codemirror/lang-json"),
+				import("@codemirror/lang-html"),
+				import("@codemirror/lang-css"),
+				import("@codemirror/lang-python"),
+				import("@codemirror/lang-vue")
+			]);
+			return D = {
+				viewMod: e,
+				stateMod: t,
+				commandsMod: n,
+				languageMod: r,
+				highlightMod: i,
+				oneDarkMod: a,
+				jsMod: o,
+				jsonMod: s,
+				htmlMod: c,
+				cssMod: l,
+				pyMod: u,
+				vueMod: d
+			}, D;
+		}
+		function M(e, t) {
+			return e.HighlightStyle.define([
+				{
+					tag: t.keyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.controlKeyword,
+					color: "var(--color-primary)",
+					fontWeight: "500"
+				},
+				{
+					tag: t.operatorKeyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.definitionKeyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.moduleKeyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.string,
+					color: "var(--color-tertiary)"
+				},
+				{
+					tag: t.regexp,
+					color: "var(--color-tertiary)"
+				},
+				{
+					tag: t.number,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.bool,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.function(t.variableName),
+					color: "var(--color-secondary)"
+				},
+				{
+					tag: t.function(t.definition(t.variableName)),
+					color: "var(--color-secondary)",
+					fontWeight: "500"
+				},
+				{
+					tag: t.typeName,
+					color: "var(--color-primary)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.className,
+					color: "var(--color-primary)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.namespace,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.propertyName,
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.definition(t.propertyName),
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.variableName,
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.definition(t.variableName),
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.comment,
+					color: "var(--color-outline)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.lineComment,
+					color: "var(--color-outline)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.blockComment,
+					color: "var(--color-outline)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.meta,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.tagName,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.attributeName,
+					color: "var(--color-tertiary)"
+				},
+				{
+					tag: t.attributeValue,
+					color: "var(--color-secondary)"
+				},
+				{
+					tag: t.atom,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.null,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.punctuation,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.bracket,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.operator,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.separator,
+					color: "var(--color-on-surface-variant)"
+				}
+			]);
+		}
+		function N(e) {
+			switch (c.language) {
+				case "javascript": return e.jsMod.javascript();
+				case "typescript": return e.jsMod.javascript({ typescript: !0 });
+				case "json": return e.jsonMod.json();
+				case "html": return e.htmlMod.html();
+				case "css": return e.cssMod.css();
+				case "python": return e.pyMod.python();
+				case "vue": return e.vueMod.vue();
+				default: return [];
+			}
+		}
+		function P(e) {
+			let { viewMod: t, stateMod: n, commandsMod: r, languageMod: i, highlightMod: a, oneDarkMod: o } = e, s = M(i, a.tags), l = [
+				t.keymap.of([
+					...r.defaultKeymap,
+					...r.historyKeymap,
+					r.indentWithTab
+				]),
+				r.history(),
+				i.bracketMatching(),
+				i.indentOnInput(),
+				i.foldGutter(),
+				t.highlightActiveLine(),
+				t.highlightActiveLineGutter(),
+				i.syntaxHighlighting(s),
+				i.syntaxHighlighting(i.defaultHighlightStyle, { fallback: !0 }),
+				N(e),
+				t.EditorView.updateListener.of((e) => {
+					e.docChanged && v("update:modelValue", e.state.doc.toString());
+				}),
+				n.EditorState.readOnly.of(c.readonly)
+			];
+			return c.wrap && l.push(t.EditorView.lineWrapping), c.lineNumbers && l.push(t.lineNumbers()), c.theme === "dark" && l.push(o.oneDark), l;
+		}
+		async function F() {
+			if (!T.value) return;
+			let e = await j(), { viewMod: t, stateMod: n } = e;
+			E?.destroy(), E = new t.EditorView({
+				state: n.EditorState.create({
+					doc: c.modelValue,
+					extensions: P(e)
+				}),
+				parent: T.value
+			});
+		}
+		return f(F), _(() => c.modelValue, (e) => {
+			E && E.state.doc.toString() !== e && E.dispatch({ changes: {
+				from: 0,
+				to: E.state.doc.length,
+				insert: e
+			} });
+		}), _([
+			() => c.language,
+			() => c.theme,
+			() => c.readonly,
+			() => c.lineNumbers,
+			() => c.wrap
+		], F), d(() => E?.destroy()), (n, o) => (p(), i("div", y, [a("div", b, [a("span", x, g(A.value), 1), a("div", S, [h(n.$slots, "actions", {}, void 0, !0), a("button", {
+			type: "button",
+			class: "flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8",
+			title: O.value ? "Copied!" : "Copy code",
+			onClick: k
+		}, [s(e, {
+			name: O.value ? "check" : "content_copy",
+			size: 16,
+			class: l(O.value ? "text-primary" : "")
+		}, null, 8, ["name", "class"]), O.value ? (p(), i("span", w, "Copied")) : r("", !0)], 8, C)])]), a("div", {
+			ref_key: "containerRef",
+			ref: T,
+			class: "code-editor-container overflow-auto bg-surface text-on-surface",
+			style: u({
+				minHeight: t.minHeight,
+				maxHeight: t.maxHeight
+			})
+		}, null, 4)]));
+	}
+}), [["__scopeId", "data-v-b0a66a4b"]]), E = { class: "flex flex-col gap-0" }, D = { class: "flex items-center gap-2" }, O = {
+	key: 0,
+	class: "px-3 py-1.5 text-body-small text-error"
+}, k = /* @__PURE__ */ c({
+	__name: "MJsonEditor",
+	props: {
+		modelValue: {},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		minHeight: { default: "200px" },
+		maxHeight: { default: "600px" }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: c }) {
+		let u = t, d = c, f = m(JSON.stringify(u.modelValue, null, 2)), h = m(null), y = n(() => !h.value);
+		_(() => u.modelValue, (e) => {
+			let t = JSON.stringify(e, null, 2);
+			t !== f.value && (f.value = t, h.value = null);
+		});
+		function b(e) {
+			f.value = e;
+			try {
+				let t = JSON.parse(e);
+				h.value = null, d("update:modelValue", t);
+			} catch (e) {
+				h.value = e.message;
+			}
+		}
+		function x() {
+			try {
+				let e = JSON.parse(f.value);
+				f.value = JSON.stringify(e, null, 2), h.value = null, d("update:modelValue", e);
+			} catch {}
+		}
+		function S() {
+			try {
+				let e = JSON.parse(f.value);
+				f.value = JSON.stringify(e), h.value = null, d("update:modelValue", e);
+			} catch {}
+		}
+		return (n, c) => (p(), i("div", E, [s(T, {
+			"model-value": f.value,
+			language: "json",
+			readonly: t.readonly,
+			"min-height": t.minHeight,
+			"max-height": t.maxHeight,
+			"onUpdate:modelValue": b
+		}, {
+			actions: v(() => [a("div", D, [
+				a("span", { class: l(["flex items-center gap-1 rounded-full px-2.5 py-0.5 text-label-small", y.value ? "bg-success-container text-on-success-container" : "bg-error-container text-on-error-container"]) }, [s(e, {
+					name: y.value ? "check_circle" : "error",
+					size: 14
+				}, null, 8, ["name"]), o(" " + g(y.value ? "Válido" : "Inválido"), 1)], 2),
+				t.readonly ? r("", !0) : (p(), i("button", {
+					key: 0,
+					type: "button",
+					title: "Formatear",
+					class: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8",
+					onClick: x
+				}, [s(e, {
+					name: "format_indent_increase",
+					size: 16
+				}), c[0] ||= o(" Formatear ", -1)])),
+				t.readonly ? r("", !0) : (p(), i("button", {
+					key: 1,
+					type: "button",
+					title: "Minificar",
+					class: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8",
+					onClick: S
+				}, [s(e, {
+					name: "compress",
+					size: 16
+				}), c[1] ||= o(" Minificar ", -1)]))
+			])]),
+			_: 1
+		}, 8, [
+			"model-value",
+			"readonly",
+			"min-height",
+			"max-height"
+		]), h.value ? (p(), i("p", O, g(h.value), 1)) : r("", !0)]));
+	}
+});
+//#endregion
+export { T as MCodeEditor, k as MJsonEditor };
+
+//# sourceMappingURL=code-editor.js.map