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

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

@@ -0,0 +1,404 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, Fragment, renderList, unref, toDisplayString, createBlock, createTextVNode, createCommentVNode } from "vue";
+import { ElTooltip } from "element-plus";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcButton/VcButton.css';import '../../assets/components/VcPopover/VcPopover.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tooltip.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popper.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';/* empty css                                                         */
+/* empty css                                                           */
+/* empty css                                                            */
+import { htmlHeadingMenuItems, htmlInsertMenuItems, getParameterDisplayLabel } from "./htmlEditor.config.mjs";
+import _sfc_main$1 from "../VcPopover/VcPopover.vue.mjs";
+/* empty css                           */
+import _sfc_main$2 from "../VcButton/VcButton.vue.mjs";
+/* empty css                         */
+import { tVU } from "../../localization/index.mjs";
+import VcButtonIcon from "../VcButton/VcButtonIcon.vue.mjs";
+import _sfc_main$3 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import { Heading, FileCode2, Bold, Italic, Link, Square, AlignEndVertical, Braces, ChevronRight, Check, Copy, CodeXml, Eye } from "@lucide/vue";
+const _hoisted_1 = { class: "vc-html-editor__toolbar flex items-center justify-between gap-2 w-full" };
+const _hoisted_2 = { class: "flex items-center gap-1" };
+const _hoisted_3 = { class: "p-2 rounded divide-y divide-ui-lines" };
+const _hoisted_4 = { class: "w-full flex items-center gap-2" };
+const _hoisted_5 = { class: "p-2 rounded divide-y divide-ui-lines" };
+const _hoisted_6 = { class: "w-full flex items-center gap-2" };
+const _hoisted_7 = { class: "flex items-center gap-1" };
+const _hoisted_8 = { class: "p-2 rounded divide-y divide-ui-lines max-h-96 overflow-x-auto" };
+const _hoisted_9 = { class: "w-full flex items-center gap-2" };
+const _hoisted_10 = { class: "capitalize" };
+const _hoisted_11 = { class: "w-full flex items-center gap-2" };
+const _hoisted_12 = { class: "capitalize flex-grow text-start" };
+const _hoisted_13 = { class: "p-2 rounded divide-y divide-ui-lines" };
+const _hoisted_14 = { class: "py-0.5" };
+const _hoisted_15 = { class: "py-0.5" };
+const _hoisted_16 = { class: "py-0.5" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcHtmlEditorToolbar",
+  props: {
+    isTeleported: { type: Boolean },
+    readonly: { type: Boolean },
+    isPreviewMode: { type: Boolean },
+    useParameters: { type: Boolean },
+    parameters: {},
+    isCopied: { type: Boolean }
+  },
+  emits: ["toggle-preview", "copy-content", "wrap-selection", "insert-link", "insert-heading", "insert-template", "insert-parameter"],
+  setup(__props, { emit: __emit }) {
+    const headingPopoverRef = ref();
+    const insertPopoverRef = ref();
+    const parameterPopoverRef = ref();
+    const props = __props;
+    const emit = __emit;
+    const toolbarDisabled = computed(() => Boolean(props.readonly || props.isPreviewMode));
+    function onInsertHeading(level) {
+      var _a;
+      emit("insert-heading", level);
+      (_a = headingPopoverRef.value) == null ? void 0 : _a.hide();
+    }
+    function onInsertTemplate(action) {
+      var _a;
+      emit("insert-template", action);
+      (_a = insertPopoverRef.value) == null ? void 0 : _a.hide();
+    }
+    function onInsertParameter(parameter, state) {
+      var _a;
+      emit("insert-parameter", parameter, state);
+      (_a = parameterPopoverRef.value) == null ? void 0 : _a.hide();
+    }
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$1, {
+            ref_key: "headingPopoverRef",
+            ref: headingPopoverRef,
+            teleported: __props.isTeleported,
+            disabled: toolbarDisabled.value,
+            trigger: "click",
+            placement: "bottom",
+            "popover-class": "w-auto"
+          }, {
+            reference: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                size: "small",
+                type: "borderless",
+                disabled: toolbarDisabled.value
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    icon: unref(Heading),
+                    class: "mr-1"
+                  }, null, 8, ["icon"]),
+                  _cache[7] || (_cache[7] = createElementVNode("span", { class: "hidden md:inline-flex" }, "Text", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(htmlHeadingMenuItems), (item) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: item.label,
+                    class: "py-0.5"
+                  }, [
+                    createVNode(_sfc_main$2, {
+                      type: "borderless",
+                      size: "small",
+                      block: "",
+                      onClick: ($event) => onInsertHeading(item.level)
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("div", _hoisted_4, [
+                          createVNode(_sfc_main$3, {
+                            icon: item.icon,
+                            class: "icon-sm"
+                          }, null, 8, ["icon"]),
+                          createElementVNode("span", null, toDisplayString(item.label), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])
+                  ]);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          }, 8, ["teleported", "disabled"]),
+          createVNode(_sfc_main$1, {
+            ref_key: "insertPopoverRef",
+            ref: insertPopoverRef,
+            teleported: __props.isTeleported,
+            disabled: toolbarDisabled.value,
+            trigger: "click",
+            placement: "bottom",
+            "popover-class": "w-auto"
+          }, {
+            reference: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                size: "small",
+                type: "borderless",
+                disabled: toolbarDisabled.value
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    icon: unref(FileCode2),
+                    class: "mr-1"
+                  }, null, 8, ["icon"]),
+                  _cache[8] || (_cache[8] = createElementVNode("span", { class: "hidden md:inline-flex" }, "Insert", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(htmlInsertMenuItems), (item) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: item.label,
+                    class: "py-0.5"
+                  }, [
+                    createVNode(_sfc_main$2, {
+                      type: "borderless",
+                      size: "small",
+                      block: "",
+                      onClick: ($event) => onInsertTemplate(item.key)
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("div", _hoisted_6, [
+                          createVNode(_sfc_main$3, {
+                            icon: item.icon,
+                            class: "icon-sm"
+                          }, null, 8, ["icon"]),
+                          createElementVNode("span", null, toDisplayString(item.label), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])
+                  ]);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          }, 8, ["teleported", "disabled"]),
+          createVNode(unref(ElTooltip), {
+            content: "Bold",
+            teleported: __props.isTeleported
+          }, {
+            default: withCtx(() => [
+              createVNode(VcButtonIcon, {
+                icon: unref(Bold),
+                disabled: toolbarDisabled.value,
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("wrap-selection", "<strong>", "</strong>"))
+              }, null, 8, ["icon", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["teleported"]),
+          createVNode(unref(ElTooltip), {
+            content: "Italic",
+            teleported: __props.isTeleported
+          }, {
+            default: withCtx(() => [
+              createVNode(VcButtonIcon, {
+                icon: unref(Italic),
+                disabled: toolbarDisabled.value,
+                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("wrap-selection", "<em>", "</em>"))
+              }, null, 8, ["icon", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["teleported"]),
+          createVNode(unref(ElTooltip), {
+            content: "Link",
+            teleported: __props.isTeleported
+          }, {
+            default: withCtx(() => [
+              createVNode(VcButtonIcon, {
+                icon: unref(Link),
+                disabled: toolbarDisabled.value,
+                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("insert-link"))
+              }, null, 8, ["icon", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["teleported"]),
+          createVNode(unref(ElTooltip), {
+            content: "Insert div",
+            teleported: __props.isTeleported
+          }, {
+            default: withCtx(() => [
+              createVNode(VcButtonIcon, {
+                icon: unref(Square),
+                disabled: toolbarDisabled.value,
+                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("wrap-selection", "<div>", "</div>"))
+              }, null, 8, ["icon", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["teleported"]),
+          createVNode(unref(ElTooltip), {
+            content: "RTL block",
+            teleported: __props.isTeleported
+          }, {
+            default: withCtx(() => [
+              createVNode(VcButtonIcon, {
+                icon: unref(AlignEndVertical),
+                disabled: toolbarDisabled.value,
+                onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("wrap-selection", '<div dir="rtl">', "</div>"))
+              }, null, 8, ["icon", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["teleported"])
+        ]),
+        createElementVNode("div", _hoisted_7, [
+          __props.useParameters && ((_a = __props.parameters) == null ? void 0 : _a.length) ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            ref_key: "parameterPopoverRef",
+            ref: parameterPopoverRef,
+            teleported: __props.isTeleported,
+            disabled: toolbarDisabled.value,
+            trigger: "click",
+            placement: "bottom",
+            "popover-width": "auto",
+            "popover-max-width": "420px"
+          }, {
+            reference: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                size: "small",
+                type: "borderless",
+                disabled: toolbarDisabled.value
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    icon: unref(Braces),
+                    class: "mr-1"
+                  }, null, 8, ["icon"]),
+                  _cache[9] || (_cache[9] = createTextVNode(" Parameters ", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_8, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.parameters, (parameter, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: `${parameter.tag}-${index}`,
+                    class: "py-0.5"
+                  }, [
+                    parameter.schema ? (openBlock(), createBlock(_sfc_main$2, {
+                      key: 0,
+                      type: "borderless",
+                      size: "small",
+                      block: "",
+                      onClick: ($event) => onInsertParameter(parameter)
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("div", _hoisted_9, [
+                          createVNode(_sfc_main$3, { icon: unref(Braces) }, null, 8, ["icon"]),
+                          createElementVNode("span", _hoisted_10, toDisplayString(unref(getParameterDisplayLabel)(parameter)), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])) : (openBlock(), createBlock(_sfc_main$1, {
+                      key: 1,
+                      teleported: __props.isTeleported,
+                      disabled: toolbarDisabled.value,
+                      trigger: "click",
+                      placement: "right-start"
+                    }, {
+                      reference: withCtx(() => [
+                        createVNode(_sfc_main$2, {
+                          type: "borderless",
+                          size: "small",
+                          block: ""
+                        }, {
+                          default: withCtx(() => [
+                            createElementVNode("div", _hoisted_11, [
+                              createElementVNode("span", _hoisted_12, toDisplayString(unref(getParameterDisplayLabel)(parameter)), 1),
+                              createVNode(_sfc_main$3, { icon: unref(ChevronRight) }, null, 8, ["icon"])
+                            ])
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      default: withCtx(() => [
+                        createElementVNode("div", _hoisted_13, [
+                          createElementVNode("div", _hoisted_14, [
+                            createVNode(_sfc_main$2, {
+                              size: "small",
+                              block: "",
+                              type: "borderless",
+                              onClick: ($event) => onInsertParameter(parameter, "opening")
+                            }, {
+                              default: withCtx(() => [..._cache[10] || (_cache[10] = [
+                                createElementVNode("div", { class: "w-full flex items-center gap-2" }, [
+                                  createElementVNode("span", { class: "capitalize" }, "Opening If")
+                                ], -1)
+                              ])]),
+                              _: 1
+                            }, 8, ["onClick"])
+                          ]),
+                          createElementVNode("div", _hoisted_15, [
+                            createVNode(_sfc_main$2, {
+                              size: "small",
+                              block: "",
+                              type: "borderless",
+                              onClick: ($event) => onInsertParameter(parameter, "closing")
+                            }, {
+                              default: withCtx(() => [..._cache[11] || (_cache[11] = [
+                                createElementVNode("div", { class: "w-full flex items-center gap-2" }, [
+                                  createElementVNode("span", { class: "capitalize" }, "Closing If")
+                                ], -1)
+                              ])]),
+                              _: 1
+                            }, 8, ["onClick"])
+                          ]),
+                          createElementVNode("div", _hoisted_16, [
+                            createVNode(_sfc_main$2, {
+                              size: "small",
+                              block: "",
+                              type: "borderless",
+                              onClick: ($event) => onInsertParameter(parameter)
+                            }, {
+                              default: withCtx(() => [..._cache[12] || (_cache[12] = [
+                                createElementVNode("div", { class: "w-full flex items-center gap-2" }, [
+                                  createElementVNode("span", { class: "capitalize" }, "Value")
+                                ], -1)
+                              ])]),
+                              _: 1
+                            }, 8, ["onClick"])
+                          ])
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["teleported", "disabled"]))
+                  ]);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          }, 8, ["teleported", "disabled"])) : createCommentVNode("", true),
+          createVNode(unref(ElTooltip), {
+            content: unref(tVU).t("voicenterUi.general.copyCode"),
+            teleported: __props.isTeleported
+          }, {
+            default: withCtx(() => [
+              createVNode(VcButtonIcon, {
+                icon: __props.isCopied ? unref(Check) : unref(Copy),
+                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("copy-content"))
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["content", "teleported"]),
+          createVNode(unref(ElTooltip), {
+            content: __props.isPreviewMode ? "Show source" : "Preview",
+            teleported: __props.isTeleported
+          }, {
+            default: withCtx(() => [
+              createVNode(VcButtonIcon, {
+                icon: __props.isPreviewMode ? unref(CodeXml) : unref(Eye),
+                onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("toggle-preview"))
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["content", "teleported"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcHtmlEditor/VcHtmlEditorToolbar.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./VcHtmlEditorToolbar.vue.mjs";
+export {
+  _sfc_main as default
+};

package/library/components/VcHtmlEditor/htmlEditor.config.mjs

@@ -0,0 +1,129 @@
+import { Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Image, Table, Code } from "@lucide/vue";
+const htmlHeadingMenuItems = [
+  {
+    label: "Heading 1",
+    icon: Heading1,
+    level: 1
+  },
+  {
+    label: "Heading 2",
+    icon: Heading2,
+    level: 2
+  },
+  {
+    label: "Heading 3",
+    icon: Heading3,
+    level: 3
+  },
+  {
+    label: "Heading 4",
+    icon: Heading4,
+    level: 4
+  },
+  {
+    label: "Heading 5",
+    icon: Heading5,
+    level: 5
+  },
+  {
+    label: "Heading 6",
+    icon: Heading6,
+    level: 6
+  }
+];
+const htmlInsertMenuItems = [
+  {
+    label: "Image",
+    icon: Image,
+    key: "image"
+  },
+  {
+    label: "Table",
+    icon: Table,
+    key: "table"
+  },
+  {
+    label: "Code Block",
+    icon: Code,
+    key: "code"
+  }
+];
+function getHtmlInsertSnippet(action) {
+  if (action === "image") {
+    return '<img src="" alt="" />';
+  }
+  if (action === "table") {
+    return "<table>\n  <thead>\n    <tr>\n      <th>Column 1</th>\n      <th>Column 2</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Value 1</td>\n      <td>Value 2</td>\n    </tr>\n  </tbody>\n</table>";
+  }
+  return "<pre><code></code></pre>";
+}
+function getHtmlInsertAnchorOffset(action) {
+  if (action === "image") {
+    return '<img src="'.length;
+  }
+  if (action === "code") {
+    return "<pre><code>".length;
+  }
+  return void 0;
+}
+function escapeHtmlAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function buildPreviewStyleTag() {
+  return `<style>
+        .vc-html-preview-parameter {
+            display: inline-flex;
+            align-items: center;
+            border-radius: 4px;
+            border: 1px dashed #7c3aed;
+            background: rgba(124, 58, 237, 0.08);
+            color: #5b21b6;
+            padding: 0 6px;
+            line-height: 1.6;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 0.85em;
+            white-space: nowrap;
+        }
+    </style>`;
+}
+function injectPreviewStyles(html) {
+  const previewStyleTag = buildPreviewStyleTag();
+  if (/<\/head>/i.test(html)) {
+    return html.replace(/<\/head>/i, `${previewStyleTag}</head>`);
+  }
+  if (/<head[\s>]/i.test(html)) {
+    return html.replace(/<head[^>]*>/i, (headTag) => `${headTag}${previewStyleTag}`);
+  }
+  return html;
+}
+function replacePreviewParameters(html) {
+  const mustachePattern = /{{\s*([#/])?\s*([\w.]+)\s*}}/g;
+  return html.replace(mustachePattern, (fullMatch, blockMarker, tag) => {
+    const token = blockMarker ? `${blockMarker}${tag}` : tag;
+    const safeToken = escapeHtmlAttribute(token);
+    const safeFullMatch = escapeHtmlAttribute(fullMatch);
+    return `<span class="vc-html-preview-parameter" data-parameter-token="${safeToken}" title="${safeFullMatch}">${safeFullMatch}</span>`;
+  });
+}
+function buildHtmlPreviewDocument(htmlSource) {
+  const hasHtmlTag = /<html[\s>]/i.test(htmlSource);
+  const sourceWithPreviewParameters = replacePreviewParameters(htmlSource);
+  if (hasHtmlTag) {
+    return injectPreviewStyles(sourceWithPreviewParameters);
+  }
+  return `<!DOCTYPE html><html><head><meta charset="UTF-8">${buildPreviewStyleTag()}</head><body>${sourceWithPreviewParameters}</body></html>`;
+}
+function getParameterDisplayLabel(parameter) {
+  return parameter.label || parameter.tag;
+}
+export {
+  buildHtmlPreviewDocument,
+  buildPreviewStyleTag,
+  getHtmlInsertAnchorOffset,
+  getHtmlInsertSnippet,
+  getParameterDisplayLabel,
+  htmlHeadingMenuItems,
+  htmlInsertMenuItems,
+  injectPreviewStyles,
+  replacePreviewParameters
+};

package/library/components/VcHyperLink/VcHyperLink.vue.mjs

@@ -0,0 +1,53 @@
+import '../../assets/components/VcHyperLink/VcHyperLink.css';
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeProps, withCtx, normalizeClass, createCommentVNode, createElementVNode, renderSlot } from "vue";
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';/* empty css                     */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcHyperLink",
+  props: {
+    icon: { default: "" },
+    href: { default: "" },
+    type: { default: "internal" },
+    color: { default: "primary" },
+    dataTestName: { default: "default" },
+    size: { default: "xs" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attributeName = computed(() => {
+      return props.type === "internal" ? "to" : "href";
+    });
+    const textSize = computed(() => {
+      return props.size ? `text-${props.size}` : "text-xs";
+    });
+    __expose({
+      attributeName,
+      textSize
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.type === "internal" ? "router-link" : "a"), normalizeProps({
+        [attributeName.value || ""]: __props.href,
+        class: [[__props.color, textSize.value], "vc-hyper-link no-underline inline-flex gap-1 justify-center items-center pb-0.156 border-b-[0.1em] border-solid"],
+        target: __props.type === "internal" ? "_self" : "_target",
+        "data-test": __props.dataTestName
+      }), {
+        default: withCtx(() => [
+          __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            icon: __props.icon,
+            class: normalizeClass(["vc-hyper-link-icon", [__props.color]])
+          }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
+          createElementVNode("span", {
+            class: normalizeClass(["vc-hyper-link-text not-italic font-normal", { "icon-margin": __props.icon }])
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 16, ["class", "target", "data-test"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcHyperLink/VcHyperLink.vue3.mjs

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