@voicenter-team/voicenter-ui-plus 2.0.12 → 3.0.0

package/library/components/VcForm/VcFormItem.vue.mjs

@@ -0,0 +1,156 @@
+import { defineComponent, inject, ref, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, normalizeClass, createSlots, createCommentVNode, createElementBlock, Fragment } from "vue";
+import { ElFormItem } from "element-plus";
+import '../../assets/components/VcForm/UiComponents/VcInputLabel.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popover.css';import '../../assets/node_modules/element-plus/theme-chalk/src/transfer.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tree.css';import '../../assets/node_modules/element-plus/theme-chalk/src/text.css';import '../../assets/node_modules/element-plus/theme-chalk/src/slider.css';import '../../assets/node_modules/element-plus/theme-chalk/src/color-picker.css';import '../../assets/node_modules/element-plus/theme-chalk/src/color-picker-panel.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tooltip.css';import '../../assets/node_modules/element-plus/theme-chalk/src/date-picker-panel.css';import '../../assets/node_modules/element-plus/theme-chalk/src/button.css';import '../../assets/node_modules/element-plus/theme-chalk/src/checkbox-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/checkbox.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio-button.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio.css';import '../../assets/node_modules/element-plus/theme-chalk/src/select.css';import '../../assets/node_modules/element-plus/theme-chalk/src/option-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/option.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tag.css';import '../../assets/node_modules/element-plus/theme-chalk/src/autocomplete.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popper.css';import '../../assets/node_modules/element-plus/theme-chalk/src/scrollbar.css';import '../../assets/node_modules/element-plus/theme-chalk/src/input-number.css';import '../../assets/node_modules/element-plus/theme-chalk/src/input.css';import '../../assets/node_modules/element-plus/theme-chalk/src/form-item.css';import '../../assets/node_modules/element-plus/theme-chalk/src/form.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcForm/VcFormItem.css';/* empty css                                                         */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                          */
+/* empty css                                                                 */
+/* empty css                                                              */
+/* empty css                                                           */
+/* empty css                                                                 */
+/* empty css                                                        */
+/* empty css                                                           */
+/* empty css                                                                 */
+/* empty css                                                           */
+/* empty css                                                          */
+/* empty css                                                                */
+/* empty css                                                                 */
+/* empty css                                                             */
+/* empty css                                                                   */
+/* empty css                                                           */
+/* empty css                                                                      */
+/* empty css                                                                */
+/* empty css                                                                       */
+/* empty css                                                                 */
+/* empty css                                                            */
+/* empty css                                                           */
+/* empty css                                                         */
+/* empty css                                                         */
+/* empty css                                                             */
+/* empty css                                                            */
+import _sfc_main$1 from "./UiComponents/VcInputLabel.vue.mjs";
+/* empty css                                */
+import dataTestAttributes from "../../enum/dataTestAttributes.mjs";
+import makeDataTestAttributeValue from "../../utils/makeDataTestAttributeValue.mjs";
+import { formContextKey } from "element-plus/es/components/form/src/constants";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "VcFormItem",
+  props: {
+    required: { type: Boolean, default: false },
+    label: { default: "" },
+    icon: { default: "" },
+    infoText: { default: "" },
+    infoTooltipWidth: { default: "" },
+    rules: { default: () => [] },
+    prop: { default: void 0 }
+  },
+  setup(__props, { expose: __expose }) {
+    const formContext = inject(formContextKey, void 0);
+    const props = __props;
+    const elFormItemRef = ref();
+    const showLabel = computed(() => {
+      return props.label || props.icon || props.infoText;
+    });
+    const isRequired = computed(() => {
+      return props.required || props.rules.some((rule) => (rule == null ? void 0 : rule.required) === true);
+    });
+    const parentFormContext = computed(() => {
+      return formContext;
+    });
+    const dataTestAttributeValue = computed(() => {
+      return makeDataTestAttributeValue(dataTestAttributes.formItem, props.prop);
+    });
+    function resetField() {
+      var _a;
+      (_a = elFormItemRef.value) == null ? void 0 : _a.resetField();
+    }
+    function clearValidate() {
+      var _a;
+      (_a = elFormItemRef.value) == null ? void 0 : _a.clearValidate();
+    }
+    function validate(trigger, callback) {
+      var _a;
+      return (_a = elFormItemRef.value) == null ? void 0 : _a.validate(trigger, callback);
+    }
+    __expose({
+      resetField,
+      clearValidate,
+      validate
+    });
+    return (_ctx, _cache) => {
+      return parentFormContext.value ? (openBlock(), createBlock(unref(ElFormItem), mergeProps({
+        key: 0,
+        ref_key: "elFormItemRef",
+        ref: elFormItemRef,
+        rules: __props.rules,
+        prop: __props.prop,
+        class: "vc-form-item"
+      }, _ctx.$attrs, { "data-test": dataTestAttributeValue.value }), {
+        label: withCtx(() => [
+          showLabel.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            label: __props.label,
+            icon: __props.icon,
+            required: isRequired.value,
+            "info-text": __props.infoText,
+            "info-tooltip-width": __props.infoTooltipWidth,
+            class: normalizeClass({ "mb-2": !parentFormContext.value })
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots["label-action"] ? {
+              name: "label-action",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "label-action")
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["info-text"] ? {
+              name: "info-text",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "info-text")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["label", "icon", "required", "info-text", "info-tooltip-width", "class"])) : createCommentVNode("", true)
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["rules", "prop", "data-test"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        showLabel.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          label: __props.label,
+          icon: __props.icon,
+          required: isRequired.value,
+          "info-text": __props.infoText,
+          "info-tooltip-width": __props.infoTooltipWidth,
+          "data-test": dataTestAttributeValue.value,
+          class: "mb-2"
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots["label-action"] ? {
+            name: "label-action",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "label-action")
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["info-text"] ? {
+            name: "info-text",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "info-text")
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["label", "icon", "required", "info-text", "info-tooltip-width", "data-test"])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default")
+      ], 64));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcForm/VcFormItem.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcFormItem.vue.mjs";
+import '../../assets/components/VcForm/VcFormItem.css';/* empty css                 */
+export {
+  _sfc_main as default
+};

package/library/components/VcHtmlEditor/VcHtmlEditor.vue.mjs

@@ -0,0 +1,202 @@
+import '../../assets/components/VcHtmlEditor/VcHtmlEditor.css';
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, createCommentVNode, createElementVNode, createBlock, unref, isRef } from "vue";
+import { useVModel } from "@vueuse/core";
+import CodeMirror from "vue-codemirror6";
+import { html } from "@codemirror/lang-html";
+import { convertToUnit } from "../../utils/helpers.mjs";
+import { buildMustacheSnippet } from "../VcMdEditor/buildMustacheSnippet.mjs";
+import { buildHtmlPreviewDocument, getHtmlInsertAnchorOffset, getHtmlInsertSnippet } from "./htmlEditor.config.mjs";
+import _sfc_main$1 from "./VcHtmlEditorToolbar.vue.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "vc-html-editor__header"
+};
+const _hoisted_2 = { class: "vc-html-editor__content" };
+const _hoisted_3 = ["srcdoc"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcHtmlEditor",
+  props: {
+    modelValue: { default: "" },
+    disabled: { type: Boolean, default: false },
+    useParameters: { type: Boolean, default: false },
+    minHeight: { default: 460 },
+    maxHeight: { default: void 0 },
+    parameters: { default: void 0 },
+    isTeleported: { type: Boolean, default: void 0 },
+    readonly: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const localModel = useVModel(props, "modelValue", emit);
+    const codeMirrorRef = ref(null);
+    const isCopied = ref(false);
+    const isPreviewMode = ref(false);
+    const minHeightProperty = computed(() => {
+      return convertToUnit(props.minHeight);
+    });
+    const maxHeightProperty = computed(() => {
+      return props.maxHeight ? convertToUnit(props.maxHeight) : void 0;
+    });
+    const previewDocument = computed(() => {
+      return buildHtmlPreviewDocument(localModel.value || "");
+    });
+    function getEditorView() {
+      var _a;
+      const editorView = (_a = codeMirrorRef.value) == null ? void 0 : _a.view;
+      if (!editorView || typeof editorView.dispatch !== "function") {
+        return null;
+      }
+      return editorView;
+    }
+    function insertContentAtCursor(content, anchorOffset) {
+      if (props.readonly || props.disabled) {
+        return;
+      }
+      const editorView = getEditorView();
+      if (!editorView) {
+        localModel.value = `${localModel.value || ""}${content}`;
+        return;
+      }
+      const { from, to } = editorView.state.selection.main;
+      const anchor = typeof anchorOffset === "number" ? from + anchorOffset : from + content.length;
+      editorView.dispatch({
+        changes: {
+          from,
+          to,
+          insert: content
+        },
+        selection: {
+          anchor
+        }
+      });
+      editorView.focus();
+    }
+    function wrapSelection(prefix, suffix) {
+      if (props.readonly || props.disabled) {
+        return;
+      }
+      const editorView = getEditorView();
+      if (!editorView) {
+        insertContentAtCursor(`${prefix}${suffix}`);
+        return;
+      }
+      const { from, to } = editorView.state.selection.main;
+      const selectedContent = editorView.state.doc.sliceString(from, to);
+      const nextContent = `${prefix}${selectedContent}${suffix}`;
+      const anchor = from + prefix.length + selectedContent.length;
+      editorView.dispatch({
+        changes: {
+          from,
+          to,
+          insert: nextContent
+        },
+        selection: {
+          anchor
+        }
+      });
+      editorView.focus();
+    }
+    function onInsertHeading(level) {
+      wrapSelection(`<h${level}>`, `</h${level}>`);
+    }
+    function onInsertTemplate(action) {
+      insertContentAtCursor(getHtmlInsertSnippet(action), getHtmlInsertAnchorOffset(action));
+    }
+    function insertLink() {
+      const editorView = getEditorView();
+      if (!editorView) {
+        insertContentAtCursor('<a href=""></a>');
+        return;
+      }
+      const { from, to } = editorView.state.selection.main;
+      const selectedContent = editorView.state.doc.sliceString(from, to) || "link";
+      const nextContent = `<a href="">${selectedContent}</a>`;
+      const anchor = from + '<a href="'.length;
+      editorView.dispatch({
+        changes: {
+          from,
+          to,
+          insert: nextContent
+        },
+        selection: {
+          anchor
+        }
+      });
+      editorView.focus();
+    }
+    function insertParameter(parameter, insertState) {
+      insertContentAtCursor(buildMustacheSnippet(parameter, insertState));
+    }
+    function onCopyContent() {
+      if (isCopied.value) {
+        return;
+      }
+      isCopied.value = true;
+      navigator.clipboard.writeText(localModel.value || "").finally(() => {
+        setTimeout(() => {
+          isCopied.value = false;
+        }, 1500);
+      });
+    }
+    watch(
+      localModel,
+      (value) => {
+        emit("change", value || "");
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["vc-html-editor__wrapper", {
+          "is--scrollable": maxHeightProperty.value
+        }]),
+        style: normalizeStyle({
+          "--min-html-height": minHeightProperty.value,
+          "--max-html-height": maxHeightProperty.value
+        })
+      }, [
+        !__props.disabled ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(_sfc_main$1, {
+            "is-teleported": __props.isTeleported,
+            readonly: __props.readonly,
+            "is-preview-mode": isPreviewMode.value,
+            "use-parameters": __props.useParameters,
+            parameters: __props.parameters,
+            "is-copied": isCopied.value,
+            onCopyContent,
+            onTogglePreview: _cache[0] || (_cache[0] = ($event) => isPreviewMode.value = !isPreviewMode.value),
+            onWrapSelection: wrapSelection,
+            onInsertLink: insertLink,
+            onInsertHeading,
+            onInsertTemplate,
+            onInsertParameter: insertParameter
+          }, null, 8, ["is-teleported", "readonly", "is-preview-mode", "use-parameters", "parameters", "is-copied"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          !isPreviewMode.value ? (openBlock(), createBlock(unref(CodeMirror), {
+            key: 0,
+            ref_key: "codeMirrorRef",
+            ref: codeMirrorRef,
+            modelValue: unref(localModel),
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(localModel) ? localModel.value = $event : null),
+            disabled: __props.disabled,
+            readonly: __props.readonly,
+            lang: unref(html)(),
+            class: normalizeClass([{ "pointer-events-none opacity-50": __props.disabled }, "h-full w-full text-sm vc-html-editor__text-editor"]),
+            basic: ""
+          }, null, 8, ["modelValue", "disabled", "readonly", "lang", "class"])) : (openBlock(), createElementBlock("iframe", {
+            key: 1,
+            class: "vc-html-editor__preview",
+            srcdoc: previewDocument.value,
+            sandbox: "",
+            title: "HTML preview"
+          }, null, 8, _hoisted_3))
+        ])
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcHtmlEditor/VcHtmlEditor.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcHtmlEditor.vue.mjs";
+import '../../assets/components/VcHtmlEditor/VcHtmlEditor.css';/* empty css                   */
+export {
+  _sfc_main as default
+};