@veltra/desktop 1.0.0

package/dist/components/radio/radio.js

@@ -0,0 +1,70 @@
+import { Transition, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, vModelRadio, withCtx, withDirectives } from "vue";
+import { bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+//#region src/components/radio/radio.vue
+const _hoisted_1 = ["value", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Radio",
+	__name: "radio",
+	props: /* @__PURE__ */ mergeModels({
+		value: {},
+		label: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		modelValue: {},
+		tips: {},
+		span: {},
+		field: {},
+		readonly: { type: Boolean },
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:modelValue"], ["update:modelValue"]),
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const props = __props;
+		const cls = bem("radio");
+		const { formProps } = useFormComponent();
+		const { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {
+			size: "default",
+			disabled: false
+		});
+		const radioChecked = computed(() => model.value === props.value);
+		const classList = computed(() => {
+			return [
+				cls.b,
+				cls.m(size.value),
+				bem.is("disabled", disabled.value),
+				bem.is("checked", radioChecked.value)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", { class: normalizeClass(classList.value) }, [
+				createCommentVNode(" radio框 "),
+				createElementVNode("section", { class: normalizeClass(unref(cls).e("button")) }, [withDirectives(createElementVNode("input", {
+					type: "radio",
+					class: normalizeClass(unref(cls).e("native")),
+					value: __props.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					disabled: unref(disabled),
+					hidden: ""
+				}, null, 10, _hoisted_1), [[vModelRadio, model.value]]), createVNode(Transition, { name: "zoom-in" }, {
+					default: withCtx(() => [radioChecked.value ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("inner"))
+					}, null, 2)) : createCommentVNode("v-if", true)]),
+					_: 1
+				})], 2),
+				createElementVNode("span", { class: normalizeClass(unref(cls).e("label")) }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n  <label :class=\"classList\">\n    <!-- radio框 -->\n    <section :class=\"cls.e('button')\">\n      <input\n        type=\"radio\"\n        :class=\"cls.e('native')\"\n        :value=\"value\"\n        v-model=\"model\"\n        :disabled=\"disabled\"\n        hidden\n      />\n\n      <transition name=\"zoom-in\">\n        <span :class=\"cls.e('inner')\" v-if=\"radioChecked\"></span>\n      </transition>\n    </section>\n\n    <span :class=\"cls.e('label')\">\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { RadioProps, RadioEmits } from '../../types'\n\ndefineOptions({\n  name: 'Radio'\n})\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  disabled: undefined\n})\n\ndefineEmits<RadioEmits>()\n\nconst cls = bem('radio')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false\n})\n\nconst radioChecked = computed(() => model.value === props.value)\n\nconst classList = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', disabled.value),\n    bem.is('checked', radioChecked.value)\n  ]\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,MAAM,QAAQ,SAAgB,SAAA,aAAC;EAE/B,MAAM,QAAQ;EAMd,MAAM,MAAM,IAAI,QAAO;EAEvB,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE;GACxE,MAAM;GACN,UAAU;GACX,CAAA;EAED,MAAM,eAAe,eAAe,MAAM,UAAU,MAAM,MAAK;EAE/D,MAAM,YAAY,eAAe;AAC/B,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,WAAW,aAAa,MAAK;IACtC;IACD;;uBA5DC,mBAoBQ,SAAA,EApBA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA;IACtB,mBAAA,WAAe;IACf,mBAaU,WAAA,EAbA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA,CAAA,eACpB,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;KACZ,OAAO,QAAA;kEACC,MAAK,QAAA;KACb,UAAU,MAAA,SAAQ;KACnB,QAAA;6CAFS,MAAA,MAAK,CAAA,CAAA,EAKhB,YAEa,YAAA,EAFD,MAAK,WAAS,EAAA;4BACiC,CAArB,aAAA,SAAA,WAAA,EAApC,mBAAyD,QAAA;;MAAlD,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;;;;IAIvB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA,CACjB,WAAwB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBAAf,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/components/radio/radio.vue.d.ts

@@ -0,0 +1,32 @@
+import { RadioProps } from "../../types/radio.js";
+import * as _$vue from "vue";
+
+//#region src/components/radio/radio.vue.d.ts
+type __VLS_Props = RadioProps;
+type __VLS_ModelProps = {
+  modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: any) => any;
+} & {
+  "update:modelValue": (value: any) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+  disabled: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=radio.vue.d.ts.map

package/dist/components/radio/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/radio/style.js

@@ -0,0 +1,2 @@
+import "./style2.css";
+import "@veltra/styles/anime/zoom-in.scss";

package/dist/components/radio/style2.css

@@ -0,0 +1,108 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+html[data-theme=dark] .u-radio {
+  --u-radio-border: #595959;
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme=light]) .u-radio {
+    --u-radio-border: #595959;
+  }
+}
+.u-radio {
+  cursor: pointer;
+  vertical-align: middle;
+  user-select: none;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-radio--small {
+  height: var(--u-form-component-height-small);
+}
+.u-radio--small + .u-radio--small {
+  margin-left: calc(var(--u-gap-small) * 2);
+}
+.u-radio--small .u-radio__button {
+  width: calc(var(--u-form-component-height-small) / 2);
+  height: calc(var(--u-form-component-height-small) / 2);
+  padding: 2px;
+}
+.u-radio--small .u-radio__label {
+  font-size: var(--u-font-size-main-small);
+}
+.u-radio--default {
+  height: var(--u-form-component-height-default);
+}
+.u-radio--default + .u-radio--default {
+  margin-left: calc(var(--u-gap-default) * 2);
+}
+.u-radio--default .u-radio__button {
+  width: calc(var(--u-form-component-height-default) / 2);
+  height: calc(var(--u-form-component-height-default) / 2);
+  padding: 2px;
+}
+.u-radio--default .u-radio__label {
+  font-size: var(--u-font-size-main-default);
+}
+.u-radio--large {
+  height: var(--u-form-component-height-large);
+}
+.u-radio--large + .u-radio--large {
+  margin-left: calc(var(--u-gap-large) * 2);
+}
+.u-radio--large .u-radio__button {
+  width: calc(var(--u-form-component-height-large) / 2);
+  height: calc(var(--u-form-component-height-large) / 2);
+  padding: 2px;
+  padding: 3px;
+}
+.u-radio--large .u-radio__label {
+  font-size: var(--u-font-size-main-large);
+}
+.u-radio__button {
+  border-radius: 50%;
+  border: var(--u-border-width) var(--u-border-style) var(--u-radio-border, #ccc);
+  overflow: hidden;
+}
+.u-radio.is-checked .u-radio__button {
+  border-color: var(--u-color-primary);
+}
+.u-radio__native {
+  opacity: 0;
+}
+.u-radio__label {
+  padding-left: var(--u-gap-small);
+}
+.u-radio__inner {
+  background-color: var(--u-color-primary);
+  border-radius: 50%;
+  display: block;
+  height: 100%;
+}
+.u-radio.is-disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
+}
+.u-radio.is-disabled .u-radio__button {
+  border-color: var(--u-border-color);
+  background-color: var(--u-color-disabled);
+}
+.u-radio.is-disabled .u-radio__inner {
+  background-color: var(--u-text-color-disabled);
+}

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./radio-group.vue.js";

package/dist/components/radio-group/radio-group.js

@@ -0,0 +1,82 @@
+import _sfc_main$1 from "../radio/radio.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
+import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+//#region src/components/radio-group/radio-group.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "RadioGroup",
+	__name: "radio-group",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: {},
+		items: {},
+		valueKey: { default: "value" },
+		labelKey: { default: "label" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		disabledItem: {},
+		block: { type: Boolean },
+		tips: {},
+		span: {},
+		label: {},
+		field: {},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const emit = __emit;
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+			size: "default",
+			disabled: false,
+			readonly: false
+		});
+		const cls = bem("radio-group");
+		const handleUpdate = (value, item) => {
+			model.value = value;
+			emit("change", item);
+		};
+		return (_ctx, _cache) => {
+			return !unref(readonly) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass([
+					unref(cls).b,
+					unref(bem).is("block", __props.block),
+					unref(cls).m(unref(size))
+				])
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return openBlock(), createBlock(_sfc_main$1, {
+					key: item[__props.valueKey],
+					value: item[__props.valueKey],
+					"model-value": model.value,
+					"onUpdate:modelValue": ($event) => handleUpdate($event, item),
+					disabled: __props.disabledItem?.(item) || unref(disabled),
+					size: unref(size)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(item[__props.labelKey]), 1)]),
+					_: 2
+				}, 1032, [
+					"value",
+					"model-value",
+					"onUpdate:modelValue",
+					"disabled",
+					"size"
+				]);
+			}), 128))], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.items.find((item) => item[__props.valueKey] === model.value)?.[__props.labelKey] || unref(FORM_EMPTY_CONTENT)), 1)], 64));
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/components/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n  <div :class=\"[cls.b, bem.is('block', block), cls.m(size)]\" v-if=\"!readonly\">\n    <u-radio\n      v-for=\"item of items\"\n      :key=\"item[valueKey]\"\n      :value=\"item[valueKey]\"\n      :model-value=\"model\"\n      @update:model-value=\"handleUpdate($event, item)\"\n      :disabled=\"disabledItem?.(item) || disabled\"\n      :size=\"size\"\n    >\n      {{ item[labelKey] }}\n    </u-radio>\n  </div>\n\n  <template v-else>\n    {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { FORM_EMPTY_CONTENT } from '@veltra/utils'\n\nimport type { RadioGroupProps, RadioGroupEmits } from '../../types'\nimport URadio from '../radio/radio.vue'\n\ndefineOptions({\n  name: 'RadioGroup'\n})\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst model = defineModel<any>()\n\nconst emit = defineEmits<RadioGroupEmits>()\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst cls = bem('radio-group')\n\nconst handleUpdate = (value: any, item: Record<string, any>) => {\n  model.value = value\n  emit('change', item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,QAAQ;EAOd,MAAM,QAAQ,SAAgB,SAAA,aAAC;EAE/B,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE;GAClF,MAAM;GACN,UAAU;GACV,UAAU;GACX,CAAA;EAED,MAAM,MAAM,IAAI,cAAa;EAE7B,MAAM,gBAAgB,OAAY,SAA8B;AAC9D,SAAM,QAAQ;AACd,QAAK,UAAU,KAAI;;;WAtD+C,MAAA,SAAQ,IAAA,WAAA,EAA1E,mBAYM,OAAA;;IAZA,OAAK,eAAA;KAAG,MAAA,IAAG,CAAC;KAAG,MAAA,IAAG,CAAC,GAAE,SAAU,QAAA,MAAK;KAAG,MAAA,IAAG,CAAC,EAAE,MAAA,KAAI,CAAA;KAAA,CAAA;yBACrD,mBAUU,UAAA,MAAA,WATO,QAAA,QAAR,SAAI;wBADb,YAUU,aAAA;KARP,KAAK,KAAK,QAAA;KACV,OAAO,KAAK,QAAA;KACZ,eAAa,MAAA;KACb,wBAAkB,WAAE,aAAa,QAAQ,KAAI;KAC7C,UAAU,QAAA,eAAe,KAAI,IAAK,MAAA,SAAQ;KAC1C,MAAM,MAAA,KAAI;;4BAES,CAAA,gBAAA,gBAAjB,KAAK,QAAA,UAAQ,EAAA,EAAA,CAAA,CAAA;;;;;;;;;mCAIpB,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,QAAA,MAAM,MAAM,SAAS,KAAK,QAAA,cAAc,MAAA,MAAK,GAAI,QAAA,aAAa,MAAA,mBAAkB,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/components/radio-group/radio-group.vue.d.ts

@@ -0,0 +1,27 @@
+import { RadioGroupProps } from "../../types/radio-group.js";
+import * as _$vue from "vue";
+
+//#region src/components/radio-group/radio-group.vue.d.ts
+type __VLS_Props = RadioGroupProps;
+type __VLS_ModelProps = {
+  modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: any) => any;
+} & {
+  "update:modelValue": (modelValue: any) => any;
+  change: (item: Record<string, any>) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+  onChange?: ((item: Record<string, any>) => any) | undefined;
+}>, {
+  readonly: boolean;
+  disabled: boolean;
+  labelKey: string;
+  valueKey: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=radio-group.vue.d.ts.map

package/dist/components/radio-group/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/radio-group/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/radio-group/style2.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-radio-group {
+  vertical-align: middle;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.u-radio-group .u-radio {
+  margin: 0;
+}
+.u-radio-group--small {
+  gap: 0 calc(var(--u-gap-small) * 2);
+}
+.u-radio-group--default {
+  gap: 0 calc(var(--u-gap-default) * 2);
+}
+.u-radio-group--large {
+  gap: 0 calc(var(--u-gap-large) * 2);
+}
+.u-radio-group.is-block {
+  display: inline-block;
+}
+.u-radio-group.is-block .u-radio {
+  display: flex;
+}
+.u-radio-group__button-item {
+  margin: 0px !important;
+  border-right: 0 !important;
+  border-radius: 0 !important;
+}
+.u-radio-group__button-item:first-child {
+  border-radius: var(--u-radius-default) 0 0 var(--u-radius-default) !important;
+}
+.u-radio-group__button-item:last-child {
+  border-right: var(--u-border) !important;
+  border-radius: 0 var(--u-radius-default) var(--u-radius-default) 0 !important;
+}

package/dist/components/rich-text-editor/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./rich-text-editor.vue.js";

package/dist/components/rich-text-editor/rich-text-editor.js

@@ -0,0 +1,230 @@
+import _sfc_main$1 from "./toolbar.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
+import { bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+import { $createParagraphNode, $getRoot, createEditor } from "lexical";
+import { createEmptyHistoryState, registerHistory } from "@lexical/history";
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode, registerList } from "@lexical/list";
+import { HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text";
+//#region src/components/rich-text-editor/rich-text-editor.vue
+const _hoisted_1 = ["contenteditable"];
+const LEXICAL_THEME = {
+	paragraph: "u-rte-paragraph",
+	heading: {
+		h1: "u-rte-h1",
+		h2: "u-rte-h2",
+		h3: "u-rte-h3",
+		h4: "u-rte-h4",
+		h5: "u-rte-h5",
+		h6: "u-rte-h6"
+	},
+	text: {
+		bold: "u-rte-bold",
+		italic: "u-rte-italic",
+		underline: "u-rte-underline",
+		strikethrough: "u-rte-strikethrough"
+	},
+	list: {
+		ul: "u-rte-ul",
+		ol: "u-rte-ol",
+		listitem: "u-rte-li",
+		nested: { listitem: "u-rte-li--nested" }
+	},
+	quote: "u-rte-blockquote",
+	link: "u-rte-link",
+	image: "u-rte-image"
+};
+const DEFAULT_TOOLBAR = [
+	"undo",
+	"redo",
+	"|",
+	"heading",
+	"|",
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"|",
+	"bullet-list",
+	"ordered-list",
+	"|",
+	"blockquote",
+	"|",
+	"link"
+];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "rich-text-editor",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: {},
+		format: { default: "html" },
+		toolbar: { default: () => DEFAULT_TOOLBAR },
+		placeholder: { default: "" },
+		tips: {},
+		span: {},
+		label: {},
+		field: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const cls = bem("rich-text-editor");
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
+		const isDisabled = computed(() => !!disabled.value);
+		const isReadonly = computed(() => !!readonly.value);
+		const className = computed(() => {
+			return [
+				cls.b,
+				cls.m(size.value),
+				bem.is("disabled", isDisabled.value),
+				bem.is("readonly", isReadonly.value)
+			];
+		});
+		const toolbarItems = computed(() => {
+			return props.toolbar ?? DEFAULT_TOOLBAR;
+		});
+		const editorContainer = useTemplateRef("editorContainer");
+		const editor = shallowRef(null);
+		const showPlaceholder = ref(true);
+		let isComposing = false;
+		let cleanupFns = [];
+		function initEditor() {
+			if (!editorContainer.value) return;
+			const editorInstance = createEditor({
+				namespace: "URichTextEditor",
+				theme: LEXICAL_THEME,
+				nodes: [
+					HeadingNode,
+					QuoteNode,
+					ListNode,
+					ListItemNode,
+					LinkNode,
+					AutoLinkNode
+				],
+				editable: !isDisabled.value && !isReadonly.value,
+				onError: (error) => {
+					console.error("Lexical error:", error);
+				}
+			});
+			editorInstance.setRootElement(editorContainer.value);
+			cleanupFns.push(registerRichText(editorInstance));
+			cleanupFns.push(registerList(editorInstance));
+			cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300));
+			if (model.value) setEditorContent(editorInstance, model.value);
+			cleanupFns.push(editorInstance.registerUpdateListener(({ editorState }) => {
+				editorState.read(() => {
+					showPlaceholder.value = $getRoot().getTextContent().trim().length === 0;
+					if (isComposing) return;
+					let value;
+					if (props.format === "json") value = JSON.stringify(editorState.toJSON());
+					else value = $generateHtmlFromNodes(editorInstance);
+					if (value !== model.value) {
+						isComposing = true;
+						model.value = value;
+						queueMicrotask(() => {
+							isComposing = false;
+						});
+					}
+				});
+			}));
+			const rootElement = editorInstance.getRootElement();
+			if (rootElement) {
+				const onCompositionStart = () => {
+					isComposing = true;
+				};
+				const onCompositionEnd = () => {
+					isComposing = false;
+				};
+				rootElement.addEventListener("compositionstart", onCompositionStart);
+				rootElement.addEventListener("compositionend", onCompositionEnd);
+				cleanupFns.push(() => {
+					rootElement.removeEventListener("compositionstart", onCompositionStart);
+					rootElement.removeEventListener("compositionend", onCompositionEnd);
+				});
+			}
+			editor.value = editorInstance;
+		}
+		function setEditorContent(editorInstance, value) {
+			editorInstance.update(() => {
+				const root = $getRoot();
+				root.clear();
+				if (props.format === "json") try {
+					const parsedState = editorInstance.parseEditorState(value);
+					editorInstance.setEditorState(parsedState);
+				} catch {
+					root.append($createParagraphNode());
+				}
+				else {
+					const nodes = $generateNodesFromDOM(editorInstance, new DOMParser().parseFromString(value, "text/html"));
+					root.append(...nodes);
+				}
+			});
+		}
+		watch(model, (newVal) => {
+			if (!editor.value || isComposing) return;
+			const editorInstance = editor.value;
+			editorInstance.getEditorState().read(() => {
+				let currentValue;
+				if (props.format === "json") currentValue = JSON.stringify(editorInstance.getEditorState().toJSON());
+				else currentValue = $generateHtmlFromNodes(editorInstance);
+				if (currentValue !== newVal) {
+					isComposing = true;
+					setEditorContent(editorInstance, newVal ?? "");
+					queueMicrotask(() => {
+						isComposing = false;
+					});
+				}
+			});
+		});
+		watch([isDisabled, isReadonly], () => {
+			if (editor.value) editor.value.setEditable(!isDisabled.value && !isReadonly.value);
+		});
+		onMounted(() => {
+			initEditor();
+		});
+		onBeforeUnmount(() => {
+			cleanupFns.forEach((fn) => fn());
+			cleanupFns = [];
+			editor.value = null;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(className.value) }, [!isReadonly.value && toolbarItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$1, {
+				key: 0,
+				editor: editor.value,
+				toolbar: toolbarItems.value,
+				disabled: isDisabled.value
+			}, null, 8, [
+				"editor",
+				"toolbar",
+				"disabled"
+			])) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(cls).e("content")) }, [createElementVNode("div", {
+				ref_key: "editorContainer",
+				ref: editorContainer,
+				class: normalizeClass(unref(cls).e("editable")),
+				contenteditable: !isDisabled.value && !isReadonly.value
+			}, null, 10, _hoisted_1), showPlaceholder.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(cls).e("placeholder"))
+			}, toDisplayString(__props.placeholder), 3)) : createCommentVNode("v-if", true)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=rich-text-editor.js.map

package/dist/components/rich-text-editor/rich-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n  <div :class=\"className\">\n    <toolbar\n      v-if=\"!isReadonly && toolbarItems.length > 0\"\n      :editor=\"editor\"\n      :toolbar=\"toolbarItems\"\n      :disabled=\"isDisabled\"\n    />\n    <div :class=\"cls.e('content')\">\n      <div\n        ref=\"editorContainer\"\n        :class=\"cls.e('editable')\"\n        :contenteditable=\"!isDisabled && !isReadonly\"\n      ></div>\n      <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n        {{ placeholder }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n  paragraph: 'u-rte-paragraph',\n  heading: {\n    h1: 'u-rte-h1',\n    h2: 'u-rte-h2',\n    h3: 'u-rte-h3',\n    h4: 'u-rte-h4',\n    h5: 'u-rte-h5',\n    h6: 'u-rte-h6'\n  },\n  text: {\n    bold: 'u-rte-bold',\n    italic: 'u-rte-italic',\n    underline: 'u-rte-underline',\n    strikethrough: 'u-rte-strikethrough'\n  },\n  list: {\n    ul: 'u-rte-ul',\n    ol: 'u-rte-ol',\n    listitem: 'u-rte-li',\n    nested: { listitem: 'u-rte-li--nested' }\n  },\n  quote: 'u-rte-blockquote',\n\n  link: 'u-rte-link',\n  image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n  'undo',\n  'redo',\n  '|',\n  'heading',\n  '|',\n  'bold',\n  'italic',\n  'underline',\n  'strikethrough',\n  '|',\n  'bullet-list',\n  'ordered-list',\n  '|',\n  'blockquote',\n  '|',\n  'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  disabled: undefined,\n  readonly: undefined,\n  format: 'html',\n  toolbar: () => DEFAULT_TOOLBAR,\n  placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', isDisabled.value),\n    bem.is('readonly', isReadonly.value)\n  ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n  return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n  if (!editorContainer.value) return\n\n  const editorInstance = createEditor({\n    namespace: 'URichTextEditor',\n    theme: LEXICAL_THEME,\n    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n    editable: !isDisabled.value && !isReadonly.value,\n    onError: (error: Error) => {\n      console.error('Lexical error:', error)\n    }\n  })\n\n  editorInstance.setRootElement(editorContainer.value)\n\n  // Register plugins\n  cleanupFns.push(registerRichText(editorInstance))\n  cleanupFns.push(registerList(editorInstance))\n  cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n  // Set initial value\n  if (model.value) {\n    setEditorContent(editorInstance, model.value)\n  }\n\n  // Listen for content changes\n  cleanupFns.push(\n    editorInstance.registerUpdateListener(({ editorState }) => {\n      editorState.read(() => {\n        const root = $getRoot()\n        const textContent = root.getTextContent()\n        showPlaceholder.value = textContent.trim().length === 0\n\n        if (isComposing) return\n\n        let value: string\n        if (props.format === 'json') {\n          value = JSON.stringify(editorState.toJSON())\n        } else {\n          value = $generateHtmlFromNodes(editorInstance)\n        }\n\n        // Avoid circular updates: only emit if content really changed\n        if (value !== model.value) {\n          isComposing = true\n          model.value = value\n          // Use microtask to reset after Vue processes the update\n          queueMicrotask(() => {\n            isComposing = false\n          })\n        }\n      })\n    })\n  )\n\n  // Composing event listeners for IME\n  const rootElement = editorInstance.getRootElement()\n  if (rootElement) {\n    const onCompositionStart = () => {\n      isComposing = true\n    }\n    const onCompositionEnd = () => {\n      isComposing = false\n    }\n    rootElement.addEventListener('compositionstart', onCompositionStart)\n    rootElement.addEventListener('compositionend', onCompositionEnd)\n    cleanupFns.push(() => {\n      rootElement.removeEventListener('compositionstart', onCompositionStart)\n      rootElement.removeEventListener('compositionend', onCompositionEnd)\n    })\n  }\n\n  editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n  editorInstance.update(() => {\n    const root = $getRoot()\n    root.clear()\n\n    if (props.format === 'json') {\n      try {\n        const parsedState = editorInstance.parseEditorState(value)\n        editorInstance.setEditorState(parsedState)\n      } catch {\n        // If JSON parse fails, treat as empty\n        root.append($createParagraphNode())\n      }\n    } else {\n      // HTML format\n      const parser = new DOMParser()\n      const dom = parser.parseFromString(value, 'text/html')\n      const nodes = $generateNodesFromDOM(editorInstance, dom)\n      root.append(...nodes)\n    }\n  })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n  if (!editor.value || isComposing) return\n\n  const editorInstance = editor.value\n\n  // Compare current content to avoid circular updates\n  editorInstance.getEditorState().read(() => {\n    let currentValue: string\n    if (props.format === 'json') {\n      currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n    } else {\n      currentValue = $generateHtmlFromNodes(editorInstance)\n    }\n\n    if (currentValue !== newVal) {\n      isComposing = true\n      setEditorContent(editorInstance, newVal ?? '')\n      queueMicrotask(() => {\n        isComposing = false\n      })\n    }\n  })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n  if (editor.value) {\n    editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n  }\n})\n\nonMounted(() => {\n  initEditor()\n})\n\nonBeforeUnmount(() => {\n  cleanupFns.forEach((fn) => fn())\n  cleanupFns = []\n  editor.value = null\n})\n</script>\n"],"mappings":"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"}