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

package/library/components/VcWizard/VcWizardSummary.vue.mjs

@@ -0,0 +1,50 @@
+import '../../assets/components/VcWizard/VcWizardSummary.css';
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, createBlock } from "vue";
+import _sfc_main$1 from "./VcSummaryStep.vue.mjs";
+import '../../assets/components/VcWizard/VcSummaryStep.css';/* empty css                    */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcWizardSummary",
+  props: {
+    steps: { default: () => [] },
+    activeIndex: { default: 0 },
+    visited: { default: 0 },
+    content: { default: () => ({}) },
+    hideDetails: { type: Boolean, default: false }
+  },
+  emits: ["update-step"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    function onClickSummaryStep(data) {
+      emit("update-step", data);
+    }
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ "is--minify": __props.hideDetails }, "vc-wizard-summary"])
+      }, [
+        createElementVNode("div", {
+          style: normalizeStyle({ "--count-steps": ((_a = __props.steps) == null ? void 0 : _a.length) ?? 0 }),
+          class: "vc-wizard-summary-steps"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (stepItem, index) => {
+            var _a2, _b;
+            return openBlock(), createBlock(_sfc_main$1, {
+              key: `summary-${index}`,
+              "step-index": index,
+              step: stepItem,
+              "steps-count": ((_a2 = __props.steps) == null ? void 0 : _a2.length) ?? 0,
+              visited: __props.visited,
+              "active-index": __props.activeIndex,
+              content: ((_b = __props.content) == null ? void 0 : _b[stepItem.step]) || [],
+              "hide-details": __props.hideDetails,
+              onClickStep: onClickSummaryStep
+            }, null, 8, ["step-index", "step", "steps-count", "visited", "active-index", "content", "hide-details"]);
+          }), 128))
+        ], 4)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcWizard/VcWizardSummary.vue3.mjs

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

package/library/composables/input/useInputBase.mjs

@@ -0,0 +1,19 @@
+import useInputColor from "./useInputColor.mjs";
+import { computed } from "vue";
+import { convertToUnit } from "../../utils/helpers.mjs";
+function useInputBase(props, options) {
+  const { prefixClasses, prefixStyle, inputClasses, prefixIcon } = useInputColor(props, options);
+  const maxWidthStyle = computed(() => {
+    return `max-width: ${convertToUnit(props.maxWidth)}`;
+  });
+  return {
+    prefixClasses,
+    prefixStyle,
+    inputClasses,
+    maxWidthStyle,
+    prefixIcon
+  };
+}
+export {
+  useInputBase as default
+};

package/library/composables/input/useInputColor.mjs

@@ -0,0 +1,53 @@
+import { computed } from "vue";
+import { CLASS_FOR_COLOR, CLASS_FOR_ICON_SIZE, DEFAULT_ICON_SIZE, CLASS_FOR_ICON_COLOR } from "../../enum/inputDefaults.mjs";
+const prefixIconColorIsHex = (colorValue) => {
+  if (!colorValue) {
+    return false;
+  }
+  const regex = new RegExp("^(?=#[a-hA-H0-9]*$)(?:.{7}|.{9})$", "g");
+  return regex.test(colorValue);
+};
+function useInputColor(propsData, options) {
+  const {
+    colorClass = CLASS_FOR_COLOR,
+    iconColorClass = CLASS_FOR_ICON_COLOR,
+    iconSizeClass = CLASS_FOR_ICON_SIZE,
+    defaultPrefixIcon = ""
+  } = options;
+  const inputClasses = computed(() => {
+    const result = propsData.color ? colorClass + propsData.color : "";
+    return [
+      result
+    ].join(" ");
+  });
+  const prefixStyle = computed(() => {
+    const style = {};
+    if (prefixIconColorIsHex(propsData.prefixIconColor)) {
+      style.color = propsData.prefixIconColor;
+    }
+    return style;
+  });
+  const prefixIcon = computed(() => {
+    return propsData.prefixIcon || defaultPrefixIcon;
+  });
+  const prefixClasses = computed(() => {
+    const iconSize = iconSizeClass + (propsData.prefixIconSize || DEFAULT_ICON_SIZE);
+    const result = [iconSize];
+    if (!prefixIconColorIsHex(propsData.prefixIconColor)) {
+      const colorClass2 = propsData.prefixIconColor ? iconColorClass + propsData.prefixIconColor : "";
+      if (colorClass2) {
+        result.push(colorClass2);
+      }
+    }
+    return result;
+  });
+  return {
+    prefixStyle,
+    inputClasses,
+    prefixClasses,
+    prefixIcon
+  };
+}
+export {
+  useInputColor as default
+};

package/library/composables/option/useOptionMethods.mjs

@@ -0,0 +1,176 @@
+import { isComponentColor } from "../../enum/constants.mjs";
+import { get } from "lodash-es";
+const DEFAULT_DISABLED_KEY = "disabled";
+function isOptionObjectValueType(option) {
+  return option !== null && typeof option === "object";
+}
+function isComponentLike(v) {
+  return v !== null && (typeof v === "object" || typeof v === "function");
+}
+function isStyleValue(v) {
+  if (v === null) return true;
+  if (typeof v === "string") return true;
+  if (Array.isArray(v)) return true;
+  return typeof v === "object";
+}
+function useOptionMethods() {
+  function getValueByPath(option, path) {
+    return path !== void 0 ? get(option, path) : option;
+  }
+  function optionValue(option, config) {
+    const raw = isOptionObjectValueType(option) && config !== void 0 && "valueKey" in config && config.valueKey !== void 0 ? getValueByPath(option, config.valueKey) : option;
+    return raw;
+  }
+  function optionLabel(option, config) {
+    if (isOptionObjectValueType(option) && config !== void 0 && "labelKey" in config) {
+      const key = config.labelKey;
+      if (key !== void 0) {
+        return String(getValueByPath(option, key));
+      } else {
+        return String(option);
+      }
+    }
+    return String(option);
+  }
+  function optionIcon(option, config) {
+    if (isOptionObjectValueType(option) && config !== void 0 && "iconKey" in config) {
+      const key = config.iconKey;
+      if (key !== void 0) {
+        const value = getValueByPath(option, key);
+        if (typeof value === "string") return value;
+        if (isComponentLike(value)) return value;
+        return "";
+      } else {
+        return "";
+      }
+    }
+    return "";
+  }
+  function optionDisabled(option, config) {
+    if (typeof option !== "object" || option === null || config === void 0) {
+      return false;
+    }
+    if ("disabledKey" in config && config.disabledKey) {
+      return Boolean(option[config.disabledKey]);
+    } else if (DEFAULT_DISABLED_KEY in option) {
+      return Boolean(option[DEFAULT_DISABLED_KEY]);
+    }
+    return false;
+  }
+  function optionIconColorHex(option, config) {
+    if (isOptionObjectValueType(option) && config !== void 0 && "iconColorHex" in config) {
+      const key = config.iconColorHex;
+      if (key !== void 0) {
+        return String(getValueByPath(option, key));
+      } else {
+        return "";
+      }
+    }
+    return "";
+  }
+  function optionColor(option, config) {
+    if (isOptionObjectValueType(option) && config !== void 0 && "colorKey" in config) {
+      const key = config.colorKey;
+      if (key !== void 0) {
+        const _color = String(getValueByPath(option, key));
+        return isComponentColor(_color) ? _color : "";
+      } else {
+        return "";
+      }
+    }
+    return "";
+  }
+  function optionClass(option, config) {
+    if (isOptionObjectValueType(option) && "classKey" in config) {
+      const key = config.classKey;
+      if (key !== void 0) {
+        return String(getValueByPath(option, key));
+      } else {
+        return "";
+      }
+    }
+    return "";
+  }
+  function optionStyle(option, config) {
+    if (isOptionObjectValueType(option) && config !== void 0 && "styleKey" in config) {
+      const key = config.styleKey;
+      if (key !== void 0) {
+        return String(getValueByPath(option, key));
+      } else {
+        return "";
+      }
+    }
+    return "";
+  }
+  function optionSearch(query, options, config) {
+    return options.filter((option) => {
+      const _filterOptionValues = optionSearchKeys(option, config).join("");
+      return _filterOptionValues.toLowerCase().includes(query.toLowerCase());
+    });
+  }
+  function optionListMap(options, config) {
+    if (!options.length) {
+      return [];
+    }
+    return options.map((item) => {
+      const value = optionValue(item, config);
+      const label = optionLabel(item, config);
+      const disabled = optionDisabled(item, config);
+      const icon = optionIcon(item, config);
+      const iconStyle = optionIconStyle(item, config);
+      const color = optionColor(item, config);
+      return {
+        originalItem: item,
+        value,
+        icon,
+        iconStyle,
+        label,
+        disabled,
+        color,
+        key: String(value)
+      };
+    });
+  }
+  function optionSearchKeys(option, config) {
+    if (isOptionObjectValueType(option) && config !== void 0 && "searchKey" in config) {
+      const searchKeys = Array.isArray(config.searchKey) ? config.searchKey : config.searchKey ? [config.searchKey] : [];
+      const searchResults = [];
+      searchKeys.forEach((key) => {
+        searchResults.push(String(getValueByPath(option, key)));
+      });
+      return searchResults;
+    }
+    return [];
+  }
+  function optionIconStyle(option, config) {
+    if (isOptionObjectValueType(option) && config && "optionIconStyleKey" in config) {
+      const key = config.optionIconStyleKey;
+      if (key !== void 0) {
+        const value = getValueByPath(option, key);
+        if (isStyleValue(value)) return value;
+        return void 0;
+      } else {
+        return void 0;
+      }
+    }
+    return void 0;
+  }
+  return {
+    optionValue,
+    optionLabel,
+    optionIcon,
+    optionDisabled,
+    optionIconColorHex,
+    optionClass,
+    optionStyle,
+    optionSearchKeys,
+    optionSearch,
+    optionColor,
+    optionListMap,
+    optionIconStyle
+  };
+}
+export {
+  useOptionMethods as default,
+  isOptionObjectValueType
+};

package/library/composables/useConfirmModal.mjs

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { ref, nextTick } from "vue";
+import { globalSingleton } from "../utils/globalSingleton.mjs";
+class ConfirmStateClass {
+  constructor() {
+    __publicField(this, "open", false);
+    __publicField(this, "header", "");
+    __publicField(this, "type", "confirm");
+    __publicField(this, "message", "");
+    __publicField(this, "modalConfirmLabel");
+    __publicField(this, "modalCancelLabel");
+    __publicField(this, "renderContent");
+  }
+  openModal(params) {
+    this.header = params.header || "";
+    this.type = params.type || "confirm";
+    this.message = params.message || "";
+    this.renderContent = params.renderContent || void 0;
+    this.modalCancelLabel = params.modalCancelLabel;
+    this.modalConfirmLabel = params.modalConfirmLabel;
+    this.open = true;
+  }
+  closeModal() {
+    this.open = false;
+  }
+}
+const confirmModalState = globalSingleton(
+  "confirmModalState",
+  () => ref(new ConfirmStateClass())
+);
+const useConfirmModal = (params) => {
+  return new Promise((resolve, reject) => {
+    try {
+      confirmModalState.value.openModal(params);
+      confirmModalState.value.onClose = () => {
+        confirmModalState.value.closeModal();
+        nextTick().then(() => {
+          resolve(false);
+        });
+      };
+      confirmModalState.value.onConfirm = () => {
+        confirmModalState.value.closeModal();
+        nextTick().then(() => {
+          resolve(true);
+        });
+      };
+    } catch (err) {
+      reject(err);
+    }
+  });
+};
+export {
+  confirmModalState,
+  useConfirmModal as default
+};

package/library/composables/useConfirmPopup.mjs

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { reactive, nextTick } from "vue";
+import { globalSingleton } from "../utils/globalSingleton.mjs";
+class ConfirmStateClass {
+  constructor() {
+    __publicField(this, "target", "");
+    __publicField(this, "open", false);
+    __publicField(this, "header", "");
+    __publicField(this, "type", "confirm");
+    __publicField(this, "message", "");
+    __publicField(this, "icon", "");
+    __publicField(this, "iconClasses", "");
+    __publicField(this, "placement");
+    __publicField(this, "renderContent");
+    __publicField(this, "popoverMaxWidth");
+    __publicField(this, "confirmAction");
+    __publicField(this, "cancelAction");
+  }
+  openPopup(params) {
+    if (!params.target) {
+      throw new Error("target element is required!");
+    }
+    this.target = params.target;
+    this.header = params.header || "";
+    this.placement = params.placement;
+    this.type = params.type || "confirm";
+    this.icon = params.icon || "";
+    this.iconClasses = params.iconClasses || "text-2xl";
+    this.message = params.message || "";
+    this.renderContent = params.renderContent || void 0;
+    this.popoverMaxWidth = params.popoverMaxWidth;
+    this.confirmAction = params.confirmAction;
+    this.cancelAction = params.cancelAction;
+    this.open = true;
+  }
+  closePopup() {
+    this.open = false;
+  }
+}
+const confirmPopupState = globalSingleton(
+  "confirmPopupState",
+  () => reactive(new ConfirmStateClass())
+);
+const useConfirmPopup = (params) => {
+  return new Promise((resolve, reject) => {
+    try {
+      confirmPopupState.openPopup(params);
+      confirmPopupState.onClose = () => {
+        confirmPopupState.closePopup();
+        nextTick().then(() => {
+          resolve(false);
+          if (params.cancel) {
+            params.cancel();
+          }
+        });
+      };
+      confirmPopupState.onConfirm = () => {
+        confirmPopupState.closePopup();
+        nextTick().then(() => {
+          resolve(true);
+          if (params.confirm) {
+            params.confirm();
+          }
+        });
+      };
+    } catch (e) {
+      reject(e);
+    }
+  });
+};
+export {
+  confirmPopupState,
+  useConfirmPopup as default
+};

package/library/composables/useCopyButton.mjs

@@ -0,0 +1,26 @@
+import { ref } from "vue";
+import { tVU } from "../localization/index.mjs";
+function useCopyButton() {
+  const copyTextAction = ref(tVU.t("voicenterUi.general.copy"));
+  const copyDisabled = ref(false);
+  function onCopyHandler(data) {
+    if (navigator.clipboard && data) {
+      navigator.clipboard.writeText(data).then(() => {
+        copyTextAction.value = tVU.t("voicenterUi.general.copied");
+        copyDisabled.value = true;
+        setTimeout(() => {
+          copyTextAction.value = tVU.t("voicenterUi.general.copy");
+          copyDisabled.value = false;
+        }, 2e3);
+      });
+    }
+  }
+  return {
+    copyTextAction,
+    copyDisabled,
+    onCopyHandler
+  };
+}
+export {
+  useCopyButton as default
+};

package/library/composables/useRTL.mjs

@@ -0,0 +1,46 @@
+import { ref, computed } from "vue";
+let rtlState = null;
+let isInitialized = false;
+let observer = null;
+function updateRTLState(isRTL, direction) {
+  var _a;
+  const dir = document.documentElement.getAttribute("dir") || ((_a = window == null ? void 0 : window.getComputedStyle(document.documentElement)) == null ? void 0 : _a.direction) || "ltr";
+  direction.value = dir === "rtl" ? "rtl" : "ltr";
+  isRTL.value = direction.value === "rtl";
+}
+function initializeRTLState() {
+  if (isInitialized) return;
+  const isRTL = ref(false);
+  const direction = ref("ltr");
+  updateRTLState(isRTL, direction);
+  const baseObserver = new MutationObserver(() => {
+    updateRTLState(isRTL, direction);
+  });
+  observer = baseObserver;
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["dir"]
+  });
+  const styleObserver = new MutationObserver(() => {
+    updateRTLState(isRTL, direction);
+  });
+  styleObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+  observer._styleObserver = styleObserver;
+  rtlState = {
+    isRTL: computed(() => isRTL.value),
+    direction: computed(() => direction.value)
+  };
+  isInitialized = true;
+}
+function useRTL() {
+  if (!isInitialized) {
+    initializeRTLState();
+  }
+  return rtlState;
+}
+export {
+  useRTL
+};

package/library/directives/click-outside.mjs

@@ -0,0 +1,5 @@
+import { ClickOutside } from "element-plus";
+import { ClickOutside as ClickOutside2 } from "element-plus";
+export {
+  ClickOutside2 as default
+};

package/library/directives/index.mjs

@@ -0,0 +1,7 @@
+import { ClickOutside } from "element-plus";
+const directives = {
+  "click-outside": ClickOutside
+};
+export {
+  directives as default
+};

package/library/directives/input-mask.mjs

@@ -0,0 +1,5 @@
+import { vMaska } from "maska/vue";
+import { vMaska as vMaska2 } from "maska/vue";
+export {
+  vMaska2 as default
+};

package/library/directives/long-press.mjs

@@ -0,0 +1,41 @@
+const PRESS_TIMEOUT = 300;
+let interval;
+const longPress = {
+  beforeMount(el, { value }) {
+    if (typeof value.functionToCall !== "function") {
+      console.warn(`Expect a function, got ${value.functionToCall}`);
+      return;
+    }
+    let pressTimer;
+    const start = (evt) => {
+      if (evt.type === "click") {
+        return;
+      }
+      if (evt instanceof MouseEvent && evt.button !== 0) {
+        return;
+      }
+      if (pressTimer === void 0) {
+        pressTimer = setTimeout(() => {
+          value.functionToCall();
+          if (value.repeat) {
+            interval = setInterval(value.functionToCall, 100);
+          }
+        }, PRESS_TIMEOUT);
+      }
+    };
+    const cancel = () => {
+      if (pressTimer !== void 0) {
+        clearTimeout(pressTimer);
+        pressTimer = void 0;
+        clearInterval(interval);
+      }
+    };
+    const startEvents = ["mousedown", "touchstart"];
+    const endEvents = ["click", "mouseout", "touchend", "touchcancel"];
+    startEvents.forEach((e) => el.addEventListener(e, start));
+    endEvents.forEach((e) => el.addEventListener(e, cancel));
+  }
+};
+export {
+  longPress
+};

package/library/directives/resize.mjs

@@ -0,0 +1,82 @@
+import { debounce, throttle } from "lodash-es";
+let ro;
+let mo;
+const defaultAction = "debounce";
+const actionTypes = ["debounce", "throttle"];
+const defaultDelay = 100;
+const resize = {
+  mounted(el, binding, vNode) {
+    const { arg, value } = binding;
+    const action = actionTypes.includes(arg) ? arg : defaultAction;
+    const delay = Object.prototype.toString.call(value) === "[object Object]" && Object.prototype.hasOwnProperty.call(value, "delay") ? value.delay : defaultDelay;
+    const emitResize = ({ width, height }) => {
+      const result = {
+        detail: {
+          width,
+          height
+        }
+      };
+      if (value) {
+        if (typeof value === "function") {
+          value(result);
+        } else if (Object.prototype.toString.call(value) === "[object Object]" && Object.prototype.hasOwnProperty.call(value, "event") && typeof value.event === "function") {
+          value.event(result);
+        }
+      } else {
+        if (vNode.componentInstance) {
+          vNode.componentInstance.$emit("resize", result);
+        } else {
+          vNode.el.dispatchEvent(new CustomEvent("resize", result));
+        }
+      }
+    };
+    const mutationHandler = (mutationList) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "attributes" && mutation.target instanceof Element) {
+          const {
+            width,
+            height
+          } = mutation.target.getBoundingClientRect();
+          emitResize({
+            width,
+            height
+          });
+        }
+      }
+    };
+    const resizeHandler = () => {
+      const width = el.offsetWidth;
+      const height = el.offsetHeight;
+      emitResize({
+        width,
+        height
+      });
+    };
+    if (action === "debounce") {
+      mo = new MutationObserver(debounce(mutationHandler, delay));
+      mo.observe(el, {
+        attributes: true,
+        childList: false,
+        subtree: false
+      });
+      ro = new ResizeObserver(debounce(resizeHandler, delay));
+      ro.observe(el);
+    } else if (action === "throttle") {
+      mo = new MutationObserver(throttle(mutationHandler, delay));
+      mo.observe(el, {
+        attributes: true,
+        childList: false,
+        subtree: false
+      });
+      ro = new ResizeObserver(throttle(resizeHandler, delay));
+      ro.observe(el);
+    }
+  },
+  beforeUnmount(el) {
+    if (ro) ro.unobserve(el);
+    if (mo) mo.disconnect();
+  }
+};
+export {
+  resize
+};