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

package/library/components/VcIcon/VcIcon.vue.mjs

@@ -0,0 +1,113 @@
+import '../../assets/components/VcIcon/VcIcon.css';
+import { defineComponent, shallowRef, computed, watch, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, createCommentVNode } from "vue";
+import { isIconComponent, isIconString } from "../../types/icons.types.mjs";
+import { isLegacyIconClass, getCachedLucideIcon, resolveLucideIcon } from "../../utils/lucideIcon.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcIcon",
+  props: {
+    icon: { default: void 0 },
+    size: { default: void 0 },
+    strokeWidth: { default: 2 },
+    color: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const resolvedLucideIcon = shallowRef(null);
+    let lucideResolveRequestId = 0;
+    const iconKind = computed(() => {
+      const icon = props.icon;
+      if (icon == null) return "none";
+      if (typeof icon !== "string") return "component";
+      if (icon.trim().length === 0) return "none";
+      if (isLegacyIconClass(icon)) return "legacy";
+      return "lucide-string";
+    });
+    watch(
+      () => props.icon,
+      (icon) => {
+        const requestId = ++lucideResolveRequestId;
+        if (typeof icon !== "string" || isLegacyIconClass(icon)) {
+          resolvedLucideIcon.value = null;
+          return;
+        }
+        const cached = getCachedLucideIcon(icon);
+        if (cached) {
+          resolvedLucideIcon.value = cached;
+          return;
+        }
+        resolvedLucideIcon.value = null;
+        resolveLucideIcon(icon).then((resolved) => {
+          if (requestId === lucideResolveRequestId) {
+            resolvedLucideIcon.value = resolved;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    const hasIcon = computed(() => iconKind.value !== "none");
+    const isRenderable = computed(() => {
+      if (iconKind.value === "lucide-string") {
+        return resolvedLucideIcon.value != null;
+      }
+      return hasIcon.value;
+    });
+    const resolvedTag = computed(() => {
+      switch (iconKind.value) {
+        case "legacy":
+          return "i";
+        case "lucide-string":
+          return resolvedLucideIcon.value;
+        case "component":
+          return isIconComponent(props.icon) ? props.icon : null;
+        default:
+          return null;
+      }
+    });
+    const iconClass = computed(() => {
+      if (iconKind.value === "legacy" && isIconString(props.icon)) {
+        return props.icon;
+      }
+      if (iconKind.value === "lucide-string" || iconKind.value === "component") {
+        return props.size == null ? "vc-icon-component" : void 0;
+      }
+      return void 0;
+    });
+    const isLucideLike = computed(() => {
+      return iconKind.value === "lucide-string" || iconKind.value === "component";
+    });
+    const lucideStrokeWidth = computed(() => {
+      return isLucideLike.value ? props.strokeWidth : void 0;
+    });
+    const lucideSize = computed(() => {
+      return isLucideLike.value && props.size != null ? props.size : void 0;
+    });
+    const lucideColor = computed(() => {
+      return isLucideLike.value && props.color != null ? props.color : void 0;
+    });
+    function resolveIconCSSValue(size) {
+      return typeof size === "number" ? `${size}px` : size;
+    }
+    const legacyIconStyle = computed(() => {
+      if (iconKind.value !== "legacy" || props.size == null) return void 0;
+      const resolvedSize = resolveIconCSSValue(props.size);
+      return {
+        fontSize: resolvedSize,
+        width: resolvedSize,
+        height: resolvedSize
+      };
+    });
+    return (_ctx, _cache) => {
+      return hasIcon.value && isRenderable.value ? (openBlock(), createBlock(resolveDynamicComponent(resolvedTag.value), {
+        key: 0,
+        class: normalizeClass(iconClass.value),
+        "stroke-width": lucideStrokeWidth.value,
+        size: lucideSize.value,
+        color: lucideColor.value,
+        style: normalizeStyle(legacyIconStyle.value)
+      }, null, 8, ["class", "stroke-width", "size", "color", "style"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcIcon/VcIcon.vue3.mjs

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

package/library/components/VcIconPicker/VcIconPicker.vue.mjs

@@ -0,0 +1,125 @@
+import '../../assets/components/VcIconPicker/VcIconPicker.css';
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createVNode, createElementVNode, Fragment, renderList, normalizeClass, unref, normalizeStyle } from "vue";
+import _sfc_main$1 from "../VcInput/VcInput.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcInput/VcInput.css';/* empty css                       */
+import _sfc_main$2 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+import { tVU } from "../../localization/index.mjs";
+import { useVModel, watchDebounced } from "@vueuse/core";
+const _hoisted_1 = { class: "vc-picker-icon" };
+const _hoisted_2 = {
+  class: "vc-picker-icon-wrapper",
+  "data-test": "icon-picker"
+};
+const _hoisted_3 = ["data-test", "title", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcIconPicker",
+  props: {
+    modelValue: { default: void 0 },
+    inputPlaceholder: { default: void 0 },
+    dataTestName: { default: "vc-picker-icon" },
+    color: { default: () => ({}) },
+    config: { default: void 0 },
+    options: { default: () => [] }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { optionSearch, optionListMap } = useOptionMethods();
+    const searchQuery = ref("");
+    const activeIcon = useVModel(
+      props,
+      "modelValue",
+      emit
+    );
+    const iconList = ref([]);
+    const optionsMapped = computed(() => {
+      return optionListMap(iconList.value, props.config);
+    });
+    const hexColor = computed(() => {
+      var _a;
+      return "hex" in props.color && ((_a = props.color) == null ? void 0 : _a.hex) ? `color: ${props.color.hex}` : "";
+    });
+    const inputPlaceholderText = computed(() => {
+      return props.inputPlaceholder ? props.inputPlaceholder : tVU.t("voicenterUi.icon.picker.search.icon");
+    });
+    const colorClass = computed(() => {
+      var _a, _b;
+      if ("className" in props.color && ((_a = props.color) == null ? void 0 : _a.className)) {
+        return props.color.className;
+      }
+      if (!((_b = props.color) == null ? void 0 : _b.hex)) {
+        return "text-active-elements";
+      }
+      return "";
+    });
+    function onClick(option) {
+      const value = option.value;
+      activeIcon.value = value;
+      emit("change", option.originalItem);
+      emit("update:modelValue", value);
+    }
+    function searchIcon() {
+      const _options = [...props.options];
+      if (!searchQuery.value) {
+        iconList.value = [..._options];
+      } else {
+        iconList.value = optionSearch(searchQuery.value, _options, props.config);
+      }
+    }
+    watchDebounced(
+      searchQuery,
+      searchIcon,
+      {
+        debounce: 300,
+        maxWait: 1e3
+      }
+    );
+    watch(
+      () => props.options,
+      (val) => {
+        iconList.value = [...val];
+        searchQuery.value = "";
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    __expose({
+      searchQuery
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          modelValue: searchQuery.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+          placeholder: inputPlaceholderText.value,
+          class: "vc-picker-icon--input"
+        }, null, 8, ["modelValue", "placeholder"]),
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(optionsMapped.value, (option) => {
+            return openBlock(), createElementBlock("div", {
+              key: option.key,
+              class: normalizeClass([{ "vc-picker-icon-item--active": option.value === unref(activeIcon) }, "vc-picker-icon-item"]),
+              "data-test": __props.dataTestName,
+              title: typeof option.icon === "string" ? option.icon : option.label,
+              onClick: ($event) => onClick(option)
+            }, [
+              createVNode(_sfc_main$2, {
+                icon: option.icon,
+                class: normalizeClass([[colorClass.value], "icon-2xl"]),
+                style: normalizeStyle(hexColor.value)
+              }, null, 8, ["icon", "class", "style"])
+            ], 10, _hoisted_3);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcIconPicker/VcIconPicker.vue3.mjs

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

package/library/components/VcImageUploader/VcImageUploader.vue.mjs

@@ -0,0 +1,402 @@
+import '../../assets/components/VcImageUploader/VcImageUploader.css';
+import { defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, unref, TransitionGroup, createBlock, createCommentVNode, Fragment } from "vue";
+import { getMimeTypeFromBuffer } from "../../utils/mime-types.mjs";
+import { Cropper, Preview } from "vue-advanced-cropper";
+import _sfc_main$1 from "../VcButton/VcButton.vue.mjs";
+import '../../assets/components/VcModal/VcModal.css';import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcButton/VcButton.css';/* empty css                         */
+import _sfc_main$4 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$2 from "../VcModal/VcModal.vue.mjs";
+/* empty css                       */
+import _sfc_main$3 from "../VcSkeletonLoader/VcSkeletonLoader.vue.mjs";
+const _hoisted_1 = { class: "vc-image-uploader" };
+const _hoisted_2 = { class: "vc-image-uploader__upload-action" };
+const _hoisted_3 = { class: "vc-image-uploader__content" };
+const _hoisted_4 = { class: "vc-image-uploader__content-header" };
+const _hoisted_5 = { class: "vc-image-uploader__cropper-content" };
+const _hoisted_6 = { class: "cropper-block relative" };
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = { class: "overflow-hidden relative rounded-md" };
+const _hoisted_9 = { class: "cropper-block__actions" };
+const _hoisted_10 = { class: "flex items-center py-3" };
+const _hoisted_11 = { class: "flex items-center py-3" };
+const _hoisted_12 = { class: "preview-block" };
+const _hoisted_13 = { class: "font-semibold text-sm" };
+const _hoisted_14 = {
+  class: "flex items-end flex-wrap my-2 relative",
+  style: { "min-height": "36px" }
+};
+const _hoisted_15 = { class: "flex items-center justify-center px-2 min-h-10" };
+const _hoisted_16 = { class: "flex items-center justify-center px-2" };
+const _hoisted_17 = { class: "mt-10" };
+const _hoisted_18 = { class: "vc-image-uploader__modal-footer" };
+const _hoisted_19 = { class: "px-3 w-full sm:w-auto" };
+const _hoisted_20 = { class: "px-3 w-full sm:w-auto" };
+const DEFAULT_UPLOAD_TYPE = "default";
+const DEFAULT_UPLOAD_COLOR = "primary";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcImageUploader",
+  props: {
+    buttonType: { default: DEFAULT_UPLOAD_TYPE },
+    buttonColor: { default: DEFAULT_UPLOAD_COLOR },
+    icon: { default: "vc-icon-upload" },
+    contentTitle: { default: "" },
+    previewTitle: { default: "" }
+  },
+  emits: ["upload:file", "save"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const settings = {
+      aspectRatio: 1,
+      handlers: {},
+      movable: false,
+      scalable: false
+    };
+    const dialog = ref(false);
+    const loading = ref(false);
+    const imageState = ref(null);
+    const result = ref({
+      coordinates: null,
+      image: null
+    });
+    const cropElementRef = ref();
+    const inputUploaderRef = ref();
+    const contentTitleText = computed(() => {
+      return props.contentTitle || tVU.t("voicenterUi.uploader.image.contentTitle");
+    });
+    const previewTitleText = computed(() => {
+      return props.contentTitle || tVU.t("voicenterUi.uploader.image.previewTitle");
+    });
+    function zoom(factor) {
+      var _a, _b;
+      if (loading.value) {
+        return;
+      }
+      (_b = (_a = cropElementRef.value) == null ? void 0 : _a.zoom) == null ? void 0 : _b.call(_a, factor);
+    }
+    function rotate(angle) {
+      var _a, _b;
+      if (loading.value) {
+        return;
+      }
+      (_b = (_a = cropElementRef.value) == null ? void 0 : _a.rotate) == null ? void 0 : _b.call(_a, angle);
+    }
+    function openExplorer() {
+      var _a;
+      (_a = inputUploaderRef.value) == null ? void 0 : _a.click();
+    }
+    async function onFileInput(event) {
+      var _a;
+      if (!(event.target instanceof HTMLInputElement)) return;
+      const target = event.target;
+      const file = (_a = target.files) == null ? void 0 : _a.item(0);
+      if (!file) {
+        return;
+      }
+      loading.value = true;
+      await loadFile(file);
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+      target.value = "";
+    }
+    function resetUrlData() {
+      var _a, _b;
+      if ((_a = imageState.value) == null ? void 0 : _a.url) {
+        URL.revokeObjectURL(imageState.value.url);
+      }
+      if ((_b = result.value.image) == null ? void 0 : _b.src) {
+        URL.revokeObjectURL(result.value.image.src);
+        resetResult();
+      }
+    }
+    async function loadFile(file) {
+      if (!file) {
+        return;
+      }
+      resetUrlData();
+      const url = URL.createObjectURL(file);
+      const reader = new FileReader();
+      try {
+        return await new Promise((resolve, reject) => {
+          reader.addEventListener("load", () => {
+            if (!reader.result) {
+              return reject(new Error("Could not read the file."));
+            }
+            if (!(reader.result instanceof ArrayBuffer)) {
+              return reject(new Error("Could not read the file."));
+            }
+            const type = getMimeTypeFromBuffer(reader.result, file.type);
+            if (!(type == null ? void 0 : type.startsWith("image"))) {
+              return reject(new Error(`Unsupported mime type: ${type}`));
+            }
+            imageState.value = {
+              url,
+              type,
+              name: file.name,
+              size: file.size
+            };
+            emit("upload:file", imageState.value);
+            dialog.value = true;
+            resolve(imageState.value);
+          });
+          reader.readAsArrayBuffer(file);
+        });
+      } catch (error2) {
+        console.warn(error2);
+      }
+    }
+    function change({ coordinates, image }) {
+      result.value = {
+        coordinates,
+        image
+      };
+    }
+    function resetResult() {
+      result.value = {
+        coordinates: null,
+        image: null
+      };
+    }
+    function error(error2) {
+      console.warn(error2);
+    }
+    function closeDialog() {
+      dialog.value = false;
+      resetUrlData();
+    }
+    function onSaveHandler() {
+      var _a, _b;
+      const originalData = (_b = (_a = cropElementRef.value) == null ? void 0 : _a.getResult) == null ? void 0 : _b.call(_a);
+      const croppedImage = originalData.canvas.toDataURL();
+      emit("save", croppedImage, originalData);
+      closeDialog();
+    }
+    __expose({
+      open: openExplorer,
+      close: closeDialog,
+      dialog,
+      loading,
+      imageState,
+      result,
+      cropElementRef,
+      loadFile,
+      onSaveHandler,
+      zoom,
+      rotate,
+      resetUrlData,
+      closeDialog,
+      error,
+      contentTitleText,
+      previewTitleText
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "upload-action", {
+            loading: loading.value,
+            handler: openExplorer
+          }, () => [
+            createVNode(_sfc_main$1, {
+              type: __props.buttonType,
+              loading: loading.value,
+              color: __props.buttonColor,
+              icon: __props.icon,
+              onClick: openExplorer
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(tVU).t("voicenterUi.general.upload")), 1)
+              ]),
+              _: 1
+            }, 8, ["type", "loading", "color", "icon"])
+          ]),
+          createElementVNode("input", {
+            ref_key: "inputUploaderRef",
+            ref: inputUploaderRef,
+            hidden: "",
+            name: "file-upload-input",
+            accept: "image/*",
+            type: "file",
+            class: "sr-only",
+            onChange: onFileInput
+          }, null, 544)
+        ]),
+        createVNode(_sfc_main$2, {
+          visible: dialog.value,
+          header: "Image Editor",
+          width: "760px",
+          onClose: closeDialog
+        }, {
+          footer: withCtx(() => [
+            createElementVNode("div", _hoisted_18, [
+              createElementVNode("div", _hoisted_19, [
+                createVNode(_sfc_main$1, {
+                  block: "",
+                  size: "large",
+                  color: "secondary",
+                  type: "outline",
+                  icon: "vc-icon-cancel",
+                  onClick: closeDialog
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(tVU).t("voicenterUi.general.cancel")), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              createElementVNode("div", _hoisted_20, [
+                createVNode(_sfc_main$1, {
+                  size: "large",
+                  icon: "vc-icon-save",
+                  block: "",
+                  onClick: onSaveHandler
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(tVU).t("voicenterUi.general.save")), 1)
+                  ]),
+                  _: 1
+                })
+              ])
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, toDisplayString(contentTitleText.value), 1),
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", _hoisted_6, [
+                  createVNode(TransitionGroup, {
+                    name: "fade-image",
+                    mode: "in-out"
+                  }, {
+                    default: withCtx(() => [
+                      loading.value ? (openBlock(), createBlock(_sfc_main$3, {
+                        key: 0,
+                        height: "320",
+                        width: "320",
+                        "row-height": "320",
+                        class: "absolute left-0 top-0"
+                      })) : (openBlock(), createElementBlock("div", _hoisted_7, [
+                        createElementVNode("div", _hoisted_8, [
+                          !!imageState.value && !loading.value ? (openBlock(), createBlock(unref(Cropper), {
+                            key: 0,
+                            ref_key: "cropElementRef",
+                            ref: cropElementRef,
+                            class: "cropper w-full h-full",
+                            src: imageState.value.url,
+                            debounce: false,
+                            "stencil-props": settings,
+                            "stencil-size": {
+                              width: 280,
+                              height: 280
+                            },
+                            "resize-image": {
+                              adjustStencil: false
+                            },
+                            "image-restriction": "stencil",
+                            onChange: change,
+                            onError: error
+                          }, null, 8, ["src"])) : createCommentVNode("", true)
+                        ]),
+                        createElementVNode("div", _hoisted_9, [
+                          createElementVNode("div", _hoisted_10, [
+                            createElementVNode("span", {
+                              class: "px-1 cursor-pointer",
+                              onClick: _cache[0] || (_cache[0] = ($event) => zoom(0.5))
+                            }, [
+                              createVNode(_sfc_main$4, { icon: "vc-icon-minus-linear icon-lg text-active" })
+                            ]),
+                            createElementVNode("span", {
+                              class: "px-1 cursor-pointer",
+                              onClick: _cache[1] || (_cache[1] = ($event) => zoom(1.5))
+                            }, [
+                              createVNode(_sfc_main$4, { icon: "vc-icon-plus-linear icon-lg text-active" })
+                            ])
+                          ]),
+                          createElementVNode("div", _hoisted_11, [
+                            createElementVNode("span", {
+                              class: "px-1 cursor-pointer",
+                              onClick: _cache[2] || (_cache[2] = ($event) => rotate(90))
+                            }, [
+                              createVNode(_sfc_main$4, { icon: "vc-icon-transfer icon-lg text-active" })
+                            ]),
+                            createElementVNode("span", {
+                              class: "px-1 cursor-pointer",
+                              onClick: _cache[3] || (_cache[3] = ($event) => rotate(-90))
+                            }, [
+                              createVNode(_sfc_main$4, { icon: "vc-icon-cancel icon-lg text-active" })
+                            ])
+                          ])
+                        ])
+                      ]))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                createElementVNode("div", _hoisted_12, [
+                  createElementVNode("div", _hoisted_13, toDisplayString(previewTitleText.value), 1),
+                  createElementVNode("div", _hoisted_14, [
+                    createVNode(TransitionGroup, {
+                      name: "fade-image",
+                      mode: "out-in"
+                    }, {
+                      default: withCtx(() => [
+                        loading.value ? (openBlock(), createBlock(_sfc_main$3, {
+                          key: 0,
+                          height: "36",
+                          width: "120",
+                          "row-height": "36",
+                          type: "square@2",
+                          class: "absolute left-0 top-0 flex gap-4"
+                        })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          createElementVNode("div", _hoisted_15, [
+                            createVNode(unref(Preview), {
+                              width: 36,
+                              height: 36,
+                              image: result.value.image,
+                              coordinates: result.value.coordinates,
+                              class: "rounded-md transition-all duration-300"
+                            }, null, 8, ["image", "coordinates"])
+                          ]),
+                          createElementVNode("div", _hoisted_16, [
+                            createVNode(unref(Preview), {
+                              width: 36,
+                              height: 36,
+                              image: result.value.image,
+                              coordinates: result.value.coordinates,
+                              class: "rounded-full transition-all duration-300"
+                            }, null, 8, ["image", "coordinates"])
+                          ])
+                        ], 64))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  createElementVNode("div", _hoisted_17, [
+                    createVNode(_sfc_main$1, {
+                      type: "outline",
+                      loading: loading.value,
+                      color: __props.buttonColor,
+                      icon: "vc-icon-restart",
+                      onClick: openExplorer
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(tVU).t("voicenterUi.uploader.change.image")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["loading", "color"])
+                  ])
+                ])
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["visible"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcImageUploader/VcImageUploader.vue3.mjs

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