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

package/library/components/VcNotification/VcNotification.vue.mjs

@@ -0,0 +1,138 @@
+import '../../assets/components/VcNotification/VcNotification.css';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createBlock, Teleport, createElementVNode, mergeProps, createVNode, TransitionGroup, withCtx, createElementBlock, Fragment, renderList } from "vue";
+import uniqueComponentId from "../../utils/UniqueComponentId.mjs";
+import ZIndexUtils from "../../utils/ZIndexUtils.mjs";
+import ToastEventBus from "../../utils/ToastEventBus.mjs";
+import _sfc_main$1 from "./VcNotificationMessage.vue.mjs";
+const _hoisted_1 = ["data-test"];
+const BASE_Z_INDEX = 3e3;
+const DEFAULT_POSITION = "top-right";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "VcNotification",
+  props: {
+    position: { default: DEFAULT_POSITION },
+    group: { default: void 0 },
+    autoZIndex: { type: Boolean, default: true },
+    baseZIndex: { default: BASE_Z_INDEX },
+    dataTestName: { default: "default" },
+    teleportedTo: { default: "body" }
+  },
+  setup(__props, { expose: __expose }) {
+    const attributeSelector = uniqueComponentId("vc-toast-id_");
+    const props = __props;
+    const containerRef = ref();
+    const messages = ref([]);
+    const messageIdx = ref(0);
+    const customPosition = ref("");
+    const containerClass = computed(() => {
+      const position = customPosition.value || props.position;
+      return [
+        "vc-toast vc-toast-component vc-toast-" + position
+      ];
+    });
+    const add = (message) => {
+      if (message.id == null) {
+        message.id = messageIdx.value++;
+      }
+      messages.value = [...messages.value, message];
+    };
+    const remove = (message) => {
+      const _mess = [...messages.value];
+      const _index = _mess.findIndex((i) => i.id === message.id);
+      if (_index >= -1) {
+        _mess.splice(_index, 1);
+      }
+      messages.value = [..._mess];
+    };
+    const onAdd = (message) => {
+      if (message.position) {
+        customPosition.value = message.position;
+      }
+      if (props.group === message.group) {
+        add(message);
+      }
+    };
+    const onRemoveGroup = (group) => {
+      if (props.group === group) {
+        messages.value = [];
+      }
+    };
+    const onRemoveAllGroups = () => {
+      messages.value = [];
+    };
+    const onEnter = () => {
+      const container = containerRef.value;
+      if (!container) {
+        return;
+      }
+      container.setAttribute(attributeSelector, "");
+      if (props.autoZIndex) {
+        ZIndexUtils.set(container);
+      }
+    };
+    const onLeave = () => {
+      const container = containerRef.value;
+      if (!container) {
+        return;
+      }
+      if (container && props.autoZIndex && !messages.value.length) {
+        ZIndexUtils.clear(container);
+      }
+    };
+    onMounted(() => {
+      ToastEventBus.on("add", onAdd);
+      ToastEventBus.on("remove-group", onRemoveGroup);
+      ToastEventBus.on("remove-all-groups", onRemoveAllGroups);
+    });
+    onBeforeUnmount(() => {
+      const container = containerRef.value;
+      if (container && props.autoZIndex) {
+        ZIndexUtils.clear(container);
+      }
+      ToastEventBus.off("add", onAdd);
+      ToastEventBus.off("remove-group", onRemoveGroup);
+      ToastEventBus.off("remove-all-groups", onRemoveAllGroups);
+    });
+    __expose({
+      add,
+      remove,
+      removeGroup: onRemoveGroup,
+      removeAllGroups: onRemoveAllGroups,
+      messages,
+      onLeave
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: __props.teleportedTo }, [
+        createElementVNode("div", mergeProps({
+          ref_key: "containerRef",
+          ref: containerRef,
+          class: containerClass.value
+        }, _ctx.$attrs, { "data-test": __props.dataTestName }), [
+          createVNode(TransitionGroup, {
+            name: "vc-toast-message",
+            tag: "div",
+            onEnter,
+            onAfterLeave: onLeave
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(messages.value, (msg) => {
+                return openBlock(), createBlock(_sfc_main$1, {
+                  key: msg.id,
+                  message: msg,
+                  onClose: ($event) => remove(msg)
+                }, null, 8, ["message", "onClose"]);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ], 16, _hoisted_1)
+      ], 8, ["to"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcNotification/VcNotification.vue3.mjs

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

package/library/components/VcNotification/VcNotificationMessage.vue.mjs

@@ -0,0 +1,115 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, Fragment, toDisplayString, createBlock, resolveDynamicComponent, mergeProps, createCommentVNode } from "vue";
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';/* empty css                     */
+const _hoisted_1 = { class: "vc-toast-message-text" };
+const _hoisted_2 = { class: "vc-toast-summary" };
+const _hoisted_3 = { class: "vc-toast-detail" };
+const DEFAULT_DURATION = 4500;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcNotificationMessage",
+  props: {
+    message: {}
+  },
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const TYPE_CLASSES = {
+      info: "vc-toast-message-info",
+      warning: "vc-toast-message-warn",
+      error: "vc-toast-message-error",
+      success: "vc-toast-message-success"
+    };
+    const TYPE_ICONS = {
+      info: "vc-icon-info",
+      warning: "vc-icon-alert",
+      error: "vc-icon-cross",
+      success: "vc-icon-checkmark"
+    };
+    const props = __props;
+    const emit = __emit;
+    const closeTimeout = ref(null);
+    const containerClass = computed(() => {
+      var _a, _b;
+      const type = ((_a = props.message) == null ? void 0 : _a.type) || "";
+      const typeClass = TYPE_CLASSES[type] || "";
+      return [
+        "vc-toast-message",
+        ((_b = props.message) == null ? void 0 : _b.styleClass) || "",
+        typeClass
+      ];
+    });
+    const typeIcon = computed(() => {
+      var _a;
+      const type = ((_a = props.message) == null ? void 0 : _a.type) || "";
+      return TYPE_ICONS[type] || "";
+    });
+    const isClosable = computed(() => {
+      var _a, _b;
+      return ((_a = props.message) == null ? void 0 : _a.closable) !== false || ((_b = props.message) == null ? void 0 : _b.duration) === 0;
+    });
+    function onCloseClick() {
+      clearCloseTimeout();
+      close();
+    }
+    function close() {
+      emit("close", props.message);
+    }
+    function clearCloseTimeout() {
+      if (closeTimeout.value) {
+        clearTimeout(closeTimeout.value);
+        closeTimeout.value = null;
+      }
+    }
+    onMounted(() => {
+      var _a, _b;
+      const duration = ((_a = props.message) == null ? void 0 : _a.duration) === void 0 ? DEFAULT_DURATION : (_b = props.message) == null ? void 0 : _b.duration;
+      if (duration) {
+        closeTimeout.value = window.setTimeout(() => {
+          close();
+        }, duration);
+      }
+    });
+    onBeforeUnmount(() => {
+      clearCloseTimeout();
+    });
+    __expose({
+      close: onCloseClick
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(containerClass.value),
+        role: "alert",
+        "aria-live": "assertive",
+        "aria-atomic": "true"
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["vc-toast-message-content", __props.message.contentStyleClass])
+        }, [
+          createVNode(_sfc_main$1, {
+            icon: typeIcon.value,
+            class: "vc-toast-message-icon text-[24px] md:text-[32px]"
+          }, null, 8, ["icon"]),
+          createElementVNode("div", _hoisted_1, [
+            !__props.message.component ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createElementVNode("span", _hoisted_2, toDisplayString(__props.message.title), 1),
+              createElementVNode("div", _hoisted_3, toDisplayString(__props.message.message), 1)
+            ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(__props.message.component), mergeProps({
+              key: 1,
+              message: __props.message
+            }, __props.message.componentAttrs, { onClose: onCloseClick }), null, 16, ["message"]))
+          ]),
+          isClosable.value ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: "vc-toast-icon-close",
+            type: "button",
+            onClick: onCloseClick
+          }, [
+            createVNode(_sfc_main$1, { icon: "vc-icon-close" })
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcNotification/VcNotificationMessage.vue2.mjs

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

package/library/components/VcOtpInput/VcOtpInput.vue.mjs

@@ -0,0 +1,356 @@
+import '../../assets/components/VcOtpInput/VcOtpInput.css';
+import { defineComponent, ref, computed, watch, onMounted, nextTick, openBlock, createElementBlock, normalizeClass, Fragment, renderList, toDisplayString, createCommentVNode, createElementVNode, createVNode } from "vue";
+import { useRTL } from "../../composables/useRTL.mjs";
+import { EVENT_CODE } from "../../enum/constants.mjs";
+import makeDataTestAttributeValue from "../../utils/makeDataTestAttributeValue.mjs";
+import dataTestAttributes from "../../enum/dataTestAttributes.mjs";
+import { DEFAULT_COLOR } from "../../enum/inputDefaults.mjs";
+import VcLoading from "../VcLoading/VcLoading.vue.mjs";
+const _hoisted_1 = ["id", "data-test"];
+const _hoisted_2 = {
+  key: 0,
+  class: "vc-otp-input__separator"
+};
+const _hoisted_3 = ["value", "type", "inputmode", "pattern", "placeholder", "disabled", "readonly", "autocomplete", "name", "aria-label", "onInput", "onKeydown", "onPaste", "onFocus"];
+const COLOR_CLASS = "vc-otp-input--";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VcOtpInput",
+    inheritAttrs: false
+  },
+  __name: "VcOtpInput",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    type: { default: "numeric" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    isError: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    color: { default: DEFAULT_COLOR },
+    placeholder: { default: "" },
+    separator: { default: "" },
+    separatorAfter: { default: 3 },
+    autofocus: { type: Boolean, default: false },
+    autocomplete: { default: "one-time-code" },
+    id: { default: void 0 },
+    name: { default: void 0 },
+    dataTestName: { default: "otp-input" }
+  },
+  emits: ["update:modelValue", "complete", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { isRTL } = useRTL();
+    const inputRefs = ref([]);
+    const focusedIndex = ref(null);
+    const lastEmittedValue = ref("");
+    const digits = computed(() => {
+      const value = props.modelValue || "";
+      return value.split("").slice(0, props.length);
+    });
+    const containerClasses = computed(() => {
+      const colorClass = props.color ? COLOR_CLASS + props.color : "";
+      return [
+        colorClass,
+        {
+          "is--error": props.isError,
+          "is--disabled": props.disabled,
+          "is--readonly": props.readonly,
+          "is--loading": props.loading,
+          "is--rtl": isRTL.value,
+          "is--focused": focusedIndex.value !== null
+        }
+      ];
+    });
+    const inputClasses = computed(() => {
+      return [
+        {
+          "is--filled": true
+        }
+      ];
+    });
+    const inputType = computed(() => {
+      return props.type === "numeric" ? "tel" : "text";
+    });
+    const inputMode = computed(() => {
+      return props.type === "numeric" ? "numeric" : "text";
+    });
+    const inputPattern = computed(() => {
+      return props.type === "numeric" ? "[0-9]*" : void 0;
+    });
+    const ariaLabel = computed(() => {
+      return "OTP";
+    });
+    const dataTestAttributeValue = computed(() => {
+      return makeDataTestAttributeValue(dataTestAttributes.input, props.dataTestName);
+    });
+    function setInputRef(el, index) {
+      inputRefs.value[index] = el;
+    }
+    function isValidChar(char, type) {
+      if (type === "numeric") {
+        return /^[0-9]$/.test(char);
+      }
+      return /^[a-zA-Z0-9]$/.test(char);
+    }
+    function sanitizeValue(value, type) {
+      if (type === "numeric") {
+        return value.replace(/[^0-9]/g, "");
+      }
+      return value.replace(/[^a-zA-Z0-9]/g, "");
+    }
+    function updateValue(newDigits) {
+      const newValue = newDigits.join("");
+      emit("update:modelValue", newValue);
+      if (newValue.length === props.length && newDigits.every((d) => d !== "")) {
+        emit("complete", newValue);
+      }
+    }
+    function focusInput(index) {
+      const targetIndex = Math.max(0, Math.min(index, props.length - 1));
+      nextTick(() => {
+        const input = inputRefs.value[targetIndex];
+        if (input && !props.disabled && !props.readonly) {
+          input.focus();
+          input.select();
+        }
+      });
+    }
+    function onInput(event, index) {
+      if (!(event.target instanceof HTMLInputElement)) return;
+      const input = event.target;
+      const value = input.value;
+      if (!value) {
+        const newDigits2 = [...digits.value];
+        newDigits2[index] = "";
+        updateValue(newDigits2);
+        return;
+      }
+      const char = value.slice(-1);
+      if (!isValidChar(char, props.type)) {
+        input.value = digits.value[index] || "";
+        return;
+      }
+      const newDigits = [...digits.value];
+      while (newDigits.length < props.length) {
+        newDigits.push("");
+      }
+      newDigits[index] = char;
+      updateValue(newDigits);
+      if (index < props.length - 1) {
+        focusInput(index + 1);
+      }
+    }
+    function onKeyDown(event, index) {
+      const key = event.key;
+      switch (key) {
+        case EVENT_CODE.backspace:
+          event.preventDefault();
+          handleBackspace(index);
+          break;
+        case EVENT_CODE.delete:
+          event.preventDefault();
+          handleDelete(index);
+          break;
+        case EVENT_CODE.left:
+          event.preventDefault();
+          handleArrowLeft(index);
+          break;
+        case EVENT_CODE.right:
+          event.preventDefault();
+          handleArrowRight(index);
+          break;
+        case EVENT_CODE.home:
+          event.preventDefault();
+          focusInput(0);
+          break;
+        case EVENT_CODE.end:
+          event.preventDefault();
+          focusInput(props.length - 1);
+          break;
+        case EVENT_CODE.tab:
+          break;
+        default:
+          if (key.length === 1 && !isValidChar(key, props.type)) {
+            event.preventDefault();
+          }
+      }
+    }
+    function handleBackspace(index) {
+      const newDigits = [...digits.value];
+      while (newDigits.length < props.length) {
+        newDigits.push("");
+      }
+      if (newDigits[index]) {
+        newDigits[index] = "";
+        updateValue(newDigits);
+      } else if (index > 0) {
+        newDigits[index - 1] = "";
+        updateValue(newDigits);
+        focusInput(index - 1);
+      }
+    }
+    function handleDelete(index) {
+      const newDigits = [...digits.value];
+      while (newDigits.length < props.length) {
+        newDigits.push("");
+      }
+      if (newDigits[index]) {
+        newDigits[index] = "";
+        updateValue(newDigits);
+      }
+    }
+    function handleArrowLeft(index) {
+      if (isRTL.value) {
+        if (index < props.length - 1) {
+          focusInput(index + 1);
+        }
+      } else {
+        if (index > 0) {
+          focusInput(index - 1);
+        }
+      }
+    }
+    function handleArrowRight(index) {
+      if (isRTL.value) {
+        if (index > 0) {
+          focusInput(index - 1);
+        }
+      } else {
+        if (index < props.length - 1) {
+          focusInput(index + 1);
+        }
+      }
+    }
+    function onPaste(event, index) {
+      var _a;
+      event.preventDefault();
+      const pastedData = ((_a = event.clipboardData) == null ? void 0 : _a.getData("text")) || "";
+      const sanitized = sanitizeValue(pastedData, props.type);
+      if (!sanitized) return;
+      const newDigits = [...digits.value];
+      while (newDigits.length < props.length) {
+        newDigits.push("");
+      }
+      let pasteIndex = 0;
+      for (let i = index; i < props.length && pasteIndex < sanitized.length; i++) {
+        newDigits[i] = sanitized[pasteIndex];
+        pasteIndex++;
+      }
+      updateValue(newDigits);
+      const nextEmptyIndex = newDigits.findIndex((d, i) => i >= index && !d);
+      if (nextEmptyIndex !== -1) {
+        focusInput(nextEmptyIndex);
+      } else {
+        focusInput(props.length - 1);
+      }
+    }
+    function onFocus(index) {
+      focusedIndex.value = index;
+      nextTick(() => {
+        const input = inputRefs.value[index];
+        if (input) {
+          input.select();
+        }
+      });
+    }
+    function onBlur() {
+      focusedIndex.value = null;
+      const currentValue = props.modelValue || "";
+      if (currentValue !== lastEmittedValue.value) {
+        lastEmittedValue.value = currentValue;
+        emit("change", currentValue);
+      }
+    }
+    function focus() {
+      const valueLength = (props.modelValue || "").length;
+      if (valueLength < props.length) {
+        focusInput(valueLength);
+      } else {
+        focusInput(0);
+      }
+    }
+    function blur() {
+      inputRefs.value.forEach((input) => {
+        if (input) {
+          input.blur();
+        }
+      });
+    }
+    function clear() {
+      emit("update:modelValue", "");
+      focusInput(0);
+    }
+    function getValidState() {
+      const value = props.modelValue || "";
+      return value.length === props.length;
+    }
+    __expose({
+      focus,
+      blur,
+      clear,
+      getValidState
+    });
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue === void 0) {
+        return;
+      }
+      const sanitized = sanitizeValue(newValue, props.type).slice(0, props.length);
+      if (sanitized !== newValue) {
+        emit("update:modelValue", sanitized);
+      }
+    });
+    onMounted(() => {
+      if (props.autofocus) {
+        nextTick(() => {
+          focus();
+        });
+      }
+      lastEmittedValue.value = props.modelValue || "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: __props.id,
+        class: normalizeClass([containerClasses.value, "vc-otp-input"]),
+        "data-test": dataTestAttributeValue.value
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (_, index) => {
+          return openBlock(), createElementBlock(Fragment, { key: index }, [
+            __props.separator && index > 0 && index % (__props.separatorAfter ?? 0) === 0 ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.separator), 1)) : createCommentVNode("", true),
+            createElementVNode("input", {
+              ref_for: true,
+              ref: (el) => setInputRef(el, index),
+              value: digits.value[index] || "",
+              type: inputType.value,
+              inputmode: inputMode.value,
+              pattern: inputPattern.value,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled || __props.loading,
+              readonly: __props.readonly,
+              autocomplete: index === 0 ? __props.autocomplete : "off",
+              name: __props.name ? `${__props.name}-${index}` : void 0,
+              "aria-label": `${ariaLabel.value} digit ${index + 1} of ${__props.length}`,
+              class: normalizeClass([inputClasses.value, "vc-otp-input__field"]),
+              maxlength: "1",
+              onInput: ($event) => onInput($event, index),
+              onKeydown: ($event) => onKeyDown($event, index),
+              onPaste: ($event) => onPaste($event, index),
+              onFocus: ($event) => onFocus(index),
+              onBlur
+            }, null, 42, _hoisted_3)
+          ], 64);
+        }), 128)),
+        createVNode(VcLoading, {
+          active: __props.loading,
+          color: "primary",
+          size: "24px",
+          loader: "lds-spinner"
+        }, null, 8, ["active"])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcOtpInput/VcOtpInput.vue3.mjs

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