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

package/library/components/VcMeterGroup/VcMeterGroupLabel.vue.mjs

@@ -0,0 +1,51 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createBlock, normalizeStyle, createElementVNode, toDisplayString } from "vue";
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';/* empty css                     */
+const _hoisted_1 = { class: "vc-metergroup-label-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcMeterGroupLabel",
+  props: {
+    value: { default: () => [] },
+    labelPosition: { default: "end" },
+    labelOrientation: { default: "horizontal" },
+    iconClass: { default: "icon-base" },
+    labelClass: { default: void 0 }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ol", {
+        class: normalizeClass([{
+          "is--horizontal": __props.labelOrientation === "horizontal",
+          "is--vertical": __props.labelOrientation === "vertical"
+        }, "vc-metergroup-labels"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.value, (val, index) => {
+          return openBlock(), createElementBlock("li", {
+            key: index + "_label",
+            class: normalizeClass([__props.labelClass, "vc-metergroup-label"])
+          }, [
+            renderSlot(_ctx.$slots, "icon", {
+              value: val,
+              class: "vc-metergroup-label-icon"
+            }, () => [
+              val.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                icon: val.icon,
+                class: normalizeClass([__props.iconClass, "vc-metergroup-label-icon"]),
+                style: normalizeStyle({ color: val.color })
+              }, null, 8, ["icon", "class", "style"])) : (openBlock(), createElementBlock("span", {
+                key: 1,
+                class: "vc-metergroup-label-marker",
+                style: normalizeStyle({ backgroundColor: val.color })
+              }, null, 4))
+            ]),
+            createElementVNode("span", _hoisted_1, toDisplayString(val.label) + " (" + toDisplayString(val.percent) + ")", 1)
+          ], 2);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcMeterGroup/VcMeterGroupLabel.vue2.mjs

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

package/library/components/VcModal/VcConfirmModal.vue.mjs

@@ -0,0 +1,155 @@
+import { defineComponent, computed, openBlock, createBlock, withCtx, createElementVNode, createTextVNode, toDisplayString, resolveDynamicComponent, createCommentVNode, createVNode } from "vue";
+import { confirmModalState } from "../../composables/useConfirmModal.mjs";
+import _sfc_main$1 from "./VcModal.vue.mjs";
+import '../../assets/components/VcButton/VcButton.css';import '../../assets/components/VcModal/VcModal.css';/* empty css              */
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$2 from "../VcButton/VcButton.vue.mjs";
+/* empty css                         */
+const _hoisted_1 = { class: "w-full flex items-center justify-center" };
+const _hoisted_2 = { class: "mx-1 text-lg font-bold md:font-medium text-center" };
+const _hoisted_3 = { class: "w-full flex flex-col items-center justify-center py-6" };
+const _hoisted_4 = { class: "w-64 text-base font-normal text-default-text text-center" };
+const _hoisted_5 = {
+  class: "w-full flex justify-between items-center gap-4",
+  "data-test": "modal-action-buttons"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcConfirmModal",
+  props: {
+    confirmHeader: { default: void 0 },
+    confirmMessageDefault: { default: void 0 },
+    actions: { default: void 0 },
+    appendTo: { default: void 0 }
+  },
+  emits: ["close", "confirm"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const defaultHeaderContent = computed(() => {
+      return props.confirmHeader || tVU.t("voicenterUi.confirm.action");
+    });
+    const defaultMessage = computed(() => {
+      return props.confirmMessageDefault || tVU.t("voicenterUi.confirm.message");
+    });
+    const isOpen = computed(() => {
+      return confirmModalState.value.open;
+    });
+    const header = computed(() => {
+      return confirmModalState.value.header;
+    });
+    const message = computed(() => {
+      return confirmModalState.value.message;
+    });
+    const renderContent = computed(() => {
+      return confirmModalState.value.renderContent;
+    });
+    const type = computed(() => {
+      return confirmModalState.value.type;
+    });
+    const emit = __emit;
+    const confirmAction = computed(() => {
+      const actions = props.actions;
+      const _type = type.value;
+      if (actions && _type && (_type === "confirm" || _type === "save" || _type === "edit" || _type === "delete")) {
+        return actions[_type] || "";
+      }
+      return tVU.t(`voicenterUi.general.${type.value}`);
+    });
+    const buttonConfirmColor = computed(() => {
+      if (type.value === "delete") {
+        return "destructive";
+      }
+      return "primary";
+    });
+    const buttonConfirmIcon = computed(() => {
+      let icon = "vc-icon-checkmark";
+      switch (type.value) {
+        case "save":
+          icon = "vc-icon-save";
+          break;
+        case "edit":
+          icon = "vc-icon-edit-pencil";
+          break;
+        case "delete":
+          icon = "vc-icon-recycle-bin";
+          break;
+      }
+      return icon;
+    });
+    const cancelLabel = computed(() => {
+      return confirmModalState.value.modalCancelLabel || tVU.t("voicenterUi.general.cancel");
+    });
+    const confirmLabel = computed(() => {
+      return confirmModalState.value.modalConfirmLabel || confirmAction.value;
+    });
+    const closeModal = () => {
+      if (confirmModalState.value.onClose !== void 0) {
+        confirmModalState.value.onClose();
+      }
+      emit("close");
+    };
+    const confirm = () => {
+      if (confirmModalState.value.onConfirm !== void 0) {
+        confirmModalState.value.onConfirm();
+      }
+      emit("confirm");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        "append-to": __props.appendTo,
+        visible: isOpen.value,
+        breakpoints: {
+          "680px": "98vw"
+        },
+        width: "400",
+        "data-test-name": "confirm-modal",
+        class: "vc-confirm-modal",
+        onClose: closeModal
+      }, {
+        header: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, toDisplayString(header.value || defaultHeaderContent.value), 1)
+          ])
+        ]),
+        footer: withCtx(() => [
+          createElementVNode("div", _hoisted_5, [
+            createVNode(_sfc_main$2, {
+              icon: "vc-icon-close",
+              type: "outline",
+              color: "secondary",
+              "data-test-name": "button-cancel",
+              onClick: closeModal
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(cancelLabel.value), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_sfc_main$2, {
+              icon: buttonConfirmIcon.value,
+              color: buttonConfirmColor.value,
+              "data-test-name": "button-confirm",
+              onClick: confirm
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(confirmLabel.value), 1)
+              ]),
+              _: 1
+            }, 8, ["icon", "color"])
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
+              createTextVNode(toDisplayString(message.value || defaultMessage.value) + " ", 1),
+              renderContent.value ? (openBlock(), createBlock(resolveDynamicComponent(renderContent.value), { key: 0 })) : createCommentVNode("", true)
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["append-to", "visible"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcModal/VcConfirmModal.vue2.mjs

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

package/library/components/VcModal/VcModal.vue.mjs

@@ -0,0 +1,363 @@
+import '../../assets/components/VcModal/VcModal.css';
+import { defineComponent, useSlots, ref, computed, onMounted, onUpdated, onBeforeUnmount, openBlock, createBlock, Teleport, withDirectives, createElementBlock, withModifiers, normalizeClass, createVNode, Transition, withCtx, normalizeStyle, renderSlot, toDisplayString, createCommentVNode, createElementVNode, createTextVNode, vShow, nextTick } from "vue";
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';/* empty css                     */
+import uniqueComponentId from "../../utils/UniqueComponentId.mjs";
+import ZIndexUtils from "../../utils/ZIndexUtils.mjs";
+import DomHandler, { createStyleElementFn } from "../../utils/DomHandler.mjs";
+import { convertToUnit } from "../../utils/helpers.mjs";
+const _hoisted_1 = ["aria-labelledby", "data-test"];
+const _hoisted_2 = {
+  key: 0,
+  class: "vc-dialog-header"
+};
+const _hoisted_3 = ["id"];
+const _hoisted_4 = { class: "vc-dialog-header-icons" };
+const _hoisted_5 = ["aria-label"];
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = ["data-test"];
+const autoZIndex = true;
+const MASK_CLASS = "vc-component-overlay vc-component-overlay-enter";
+const DIALOG_CLASS = "vc-dialog vc-dialog-component";
+const DIALOG_MAX_CLASS = "vc-dialog-maximized";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "VcModal",
+  props: {
+    lazy: { type: Boolean, default: true },
+    appendTo: { default: "body" },
+    header: { default: "" },
+    footer: { default: "" },
+    contentClass: { default: "" },
+    modalClass: { default: "" },
+    ariaCloseLabel: { default: "close" },
+    width: { default: "60vw" },
+    maxWidth: { default: "100%" },
+    dataTestName: { default: "default" },
+    closable: { type: Boolean, default: true },
+    maximizable: { type: Boolean, default: false },
+    closeOnEscape: { type: Boolean, default: true },
+    hideHeader: { type: Boolean, default: false },
+    fullScreen: { type: Boolean, default: false },
+    dismissableMask: { type: Boolean, default: true },
+    visible: { type: Boolean, default: false },
+    position: { default: "center" },
+    contentStyle: { default: void 0 },
+    baseZIndex: { default: 0 },
+    breakpoints: { default: void 0 }
+  },
+  emits: ["show", "hide", "close", "maximize", "unmaximize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ariaId = uniqueComponentId("vc-modal-");
+    const attributeSelector = uniqueComponentId("vc-modal-aria-");
+    const slots = useSlots();
+    const props = __props;
+    const emit = __emit;
+    const containerVisible = ref(props.visible);
+    const maximized = ref(false);
+    const maskRef = ref();
+    const containerRef = ref();
+    const styleElement = ref(null);
+    const documentKeydownListener = ref(null);
+    const appendDisabled = computed(() => {
+      return props.appendTo === "self";
+    });
+    const appendTarget = computed(() => {
+      return appendDisabled.value ? null : props.appendTo;
+    });
+    const shouldRenderContainer = computed(() => {
+      return props.lazy ? containerVisible.value : true;
+    });
+    const shouldRenderModal = computed(() => {
+      return props.lazy ? props.visible : true;
+    });
+    const maskClass = computed(() => {
+      return [
+        MASK_CLASS,
+        getPositionClass()
+      ];
+    });
+    const dialogClass = computed(() => {
+      return [
+        DIALOG_CLASS,
+        {
+          [DIALOG_MAX_CLASS]: props.fullScreen || props.maximizable && maximized.value
+        },
+        props.modalClass || ""
+      ];
+    });
+    const ariaLabelledById = computed(() => {
+      return props.header ? ariaId + "_header" : "ariaLabelledId";
+    });
+    const contentStyleClass = computed(() => {
+      return ["vc-dialog-content", props.contentClass, { "vc-dialog-no-footer": !props.footer && !slots.footer }];
+    });
+    const modalWidth = computed(() => {
+      return convertToUnit(props.width);
+    });
+    const modalMaxWidth = computed(() => {
+      return convertToUnit(props.maxWidth);
+    });
+    function createStyle() {
+      if (!styleElement.value && props.breakpoints) {
+        let innerHTML = "";
+        for (const breakpoint in props.breakpoints) {
+          innerHTML += `
+                        @media screen and (max-width: ${breakpoint}) {
+                            .vc-dialog[${attributeSelector}]:not(.vc-dialog-maximized) {
+                                width: ${props.breakpoints[breakpoint]} !important;
+                            }
+                        }
+                    `;
+        }
+        styleElement.value = createStyleElementFn(innerHTML);
+      }
+    }
+    function destroyStyle() {
+      const styles = styleElement.value;
+      if (styles) {
+        document.head.removeChild(styles);
+        styleElement.value = null;
+      }
+    }
+    function onMaskClick(event) {
+      if (props.dismissableMask && props.closable && maskRef.value === event.target) {
+        close();
+      }
+    }
+    function getPositionClass() {
+      const positions = ["left", "right", "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right"];
+      const pos = positions.find((item) => item === props.position);
+      return pos ? `vc-dialog-${pos}` : "";
+    }
+    function onBeforeEnter(el) {
+      if (!props.lazy && !props.visible) {
+        return;
+      }
+      if (el instanceof HTMLElement) {
+        ZIndexUtils.set(el);
+      }
+      el.setAttribute(attributeSelector, "");
+      ZIndexUtils.setModal(ariaId);
+      if (maskRef.value) {
+        DomHandler.removeClass(maskRef.value, "vc-component-overlay-leave");
+        DomHandler.addClass(maskRef.value, "vc-component-overlay-enter");
+      }
+    }
+    function onEnter() {
+      if (!maskRef.value || !containerRef.value) {
+        return;
+      }
+      maskRef.value.style.overflowY = "hidden";
+      maskRef.value.style.zIndex = String(parseInt(containerRef.value.style.zIndex, 10) - 1);
+      emit("show");
+      focus();
+      bindGlobalListeners();
+    }
+    function onEnterCancelled() {
+      nextTick(() => {
+        if (!maskRef.value || !containerRef.value) {
+          return;
+        }
+        maskRef.value.style.overflowY = "auto";
+      });
+    }
+    function bindGlobalListeners() {
+      if (props.closable && props.closeOnEscape) {
+        bindDocumentKeyDownListener();
+      }
+    }
+    function onKeyDown(event) {
+      const lastModal = ZIndexUtils.lastModal();
+      if (event.code === "Escape" && lastModal === ariaId) {
+        close();
+      }
+    }
+    function bindDocumentKeyDownListener() {
+      if (!documentKeydownListener.value) {
+        documentKeydownListener.value = onKeyDown;
+        document.addEventListener("keydown", documentKeydownListener.value);
+      }
+    }
+    function onBeforeLeave() {
+      if (maskRef.value) {
+        maskRef.value.style.overflowY = "hidden";
+        DomHandler.addClass(maskRef.value, "vc-component-overlay-leave");
+      }
+    }
+    function onLeave() {
+      emit("hide");
+    }
+    function onAfterLeave(el) {
+      if (el instanceof HTMLElement) {
+        ZIndexUtils.clear(el);
+      }
+      ZIndexUtils.removeModal(ariaId);
+      containerVisible.value = false;
+      maximized.value = false;
+      unbindGlobalListeners();
+    }
+    function unbindGlobalListeners() {
+      unbindDocumentKeyDownListener();
+    }
+    function unbindDocumentKeyDownListener() {
+      if (documentKeydownListener.value) {
+        document.removeEventListener("keydown", documentKeydownListener.value);
+        documentKeydownListener.value = null;
+      }
+    }
+    function focus() {
+      if (!containerRef.value) {
+        return;
+      }
+      const focusTarget = containerRef.value.querySelector("[autofocus]");
+      if (focusTarget) {
+        focusTarget.focus();
+      }
+    }
+    function close() {
+      emit("close", false);
+    }
+    function maximize(event) {
+      if (maximized.value) {
+        maximized.value = false;
+        emit("unmaximize", event);
+      } else {
+        maximized.value = true;
+        emit("maximize", event);
+      }
+    }
+    onMounted(() => {
+      if (props.breakpoints) {
+        createStyle();
+      }
+    });
+    onUpdated(() => {
+      if (props.visible) {
+        containerVisible.value = props.visible;
+      }
+    });
+    onBeforeUnmount(() => {
+      unbindGlobalListeners();
+      destroyStyle();
+      if (containerRef.value && autoZIndex) {
+        ZIndexUtils.clear(containerRef.value);
+      }
+      if (ZIndexUtils.getModalByKey(ariaId)) {
+        ZIndexUtils.removeModal(ariaId);
+      }
+    });
+    const visible = computed(() => props.visible);
+    __expose({
+      maximize,
+      close,
+      focus,
+      onMaskClick,
+      onBeforeEnter,
+      onEnter,
+      onLeave,
+      onAfterLeave,
+      containerVisible,
+      visible
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: appendTarget.value,
+        disabled: appendDisabled.value
+      }, [
+        shouldRenderContainer.value ? withDirectives((openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "maskRef",
+          ref: maskRef,
+          class: normalizeClass([maskClass.value, "vc-dialog-mask"]),
+          onClick: withModifiers(onMaskClick, ["stop", "self"])
+        }, [
+          createVNode(Transition, {
+            name: "vc-dialog",
+            appear: "",
+            onBeforeEnter,
+            onEnter,
+            onAfterEnter: onEnterCancelled,
+            onBeforeLeave,
+            onLeave,
+            onAfterLeave
+          }, {
+            default: withCtx(() => [
+              shouldRenderModal.value ? withDirectives((openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "containerRef",
+                ref: containerRef,
+                class: normalizeClass(dialogClass.value),
+                "aria-labelledby": ariaLabelledById.value,
+                style: normalizeStyle({
+                  width: modalWidth.value,
+                  maxWidth: modalMaxWidth.value
+                }),
+                "aria-modal": "true",
+                "data-test": __props.dataTestName,
+                role: "dialog"
+              }, [
+                !__props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                  renderSlot(_ctx.$slots, "header", {}, () => [
+                    __props.header ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      id: ariaLabelledById.value,
+                      class: "vc-dialog-title"
+                    }, toDisplayString(__props.header), 9, _hoisted_3)) : createCommentVNode("", true)
+                  ]),
+                  createElementVNode("div", _hoisted_4, [
+                    __props.maximizable ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      class: "vc-dialog-header-icon vc-dialog-header-maximize vc-link mx-3",
+                      "aria-label": __props.ariaCloseLabel,
+                      type: "button",
+                      tabindex: "-1",
+                      onClick: maximize
+                    }, [
+                      createVNode(_sfc_main$1, { icon: "vc-dialog-header-maximize-icon vc-icon-fullscreen" })
+                    ], 8, _hoisted_5)) : createCommentVNode("", true),
+                    __props.closable ? (openBlock(), createElementBlock("button", {
+                      key: 1,
+                      class: "vc-dialog-header-icon vc-dialog-header-close vc-link",
+                      "aria-label": __props.ariaCloseLabel,
+                      type: "button",
+                      tabindex: "-1",
+                      onClick: close
+                    }, [
+                      createVNode(_sfc_main$1, { icon: "vc-dialog-header-close-icon vc-icon-close" })
+                    ], 8, _hoisted_6)) : createCommentVNode("", true)
+                  ])
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: normalizeClass(contentStyleClass.value),
+                  style: normalizeStyle(__props.contentStyle)
+                }, [
+                  renderSlot(_ctx.$slots, "default")
+                ], 6),
+                __props.footer || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: "vc-dialog-footer",
+                  "data-test": __props.dataTestName
+                }, [
+                  renderSlot(_ctx.$slots, "footer", {}, () => [
+                    createTextVNode(toDisplayString(__props.footer), 1)
+                  ])
+                ], 8, _hoisted_7)) : createCommentVNode("", true)
+              ], 14, _hoisted_1)), [
+                [vShow, visible.value]
+              ]) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 2)), [
+          [vShow, containerVisible.value]
+        ]) : createCommentVNode("", true)
+      ], 8, ["to", "disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcModal/VcModal.vue3.mjs

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