@evance/evance-ui 1.0.21 → 1.0.23

package/dist/cjs/EvDialog.vue_vue_type_script_setup_true_lang-4ZvUpBk-.cjs

@@ -0,0 +1,626 @@
+"use strict";
+/*! Evance UI v1.0.22 | MIT License */
+const vue = require("vue");
+const EvOverlay_vue_vue_type_script_setup_true_lang = require("./EvOverlay.vue_vue_type_script_setup_true_lang-CqSw0_yo.cjs");
+const animate = require("./animate-DB7PXH3K.cjs");
+const props = require("./props-DdJFC6BD.cjs");
+const icons = require("./icons-xb_IXfZU.cjs");
+const EvSurface_vue_vue_type_script_setup_true_lang = require("./EvSurface.vue_vue_type_script_setup_true_lang-zrFESzTD.cjs");
+const modelProxy = require("./modelProxy-BMICOorK.cjs");
+const EvToolbar_vue_vue_type_script_setup_true_lang = require("./EvToolbar.vue_vue_type_script_setup_true_lang-DMtOdGxa.cjs");
+const helpers = require("./helpers-B0q4awNI.cjs");
+const events = require("./events-qAJYqvtb.cjs");
+function getOuterHeight(element, margin) {
+  if (element) {
+    let height = element.offsetHeight;
+    if (margin) {
+      const style = getComputedStyle(element);
+      height += parseFloat(style.marginTop);
+      height += parseFloat(style.marginBottom);
+    }
+    return height;
+  }
+  return 0;
+}
+function getOuterWidth(element, margin) {
+  if (element instanceof HTMLElement) {
+    let width = element.offsetWidth;
+    if (margin) {
+      const style = getComputedStyle(element);
+      width += parseFloat(style.marginLeft);
+      width += parseFloat(style.marginRight);
+    }
+    return width;
+  }
+  return 0;
+}
+function getViewport() {
+  const win = window, d = document, e = d.documentElement, g = d.getElementsByTagName("body")[0], w = win.innerWidth || e.clientWidth || g.clientWidth, h = win.innerHeight || e.clientHeight || g.clientHeight;
+  return { width: w, height: h };
+}
+const EvDialogServiceSymbol = Symbol.for("ev:dialog-service");
+const EvDialogInstanceSymbol = Symbol.for("ev:dialog-instance");
+function useDialog() {
+  const dialogService = vue.inject(EvDialogServiceSymbol);
+  if (!dialogService) {
+    throw new Error("Evance UI: Unable to find injected dialog service");
+  }
+  return dialogService;
+}
+function injectDialog() {
+  return vue.inject(EvDialogInstanceSymbol);
+}
+function provideDialog(instance) {
+  vue.provide(EvDialogInstanceSymbol, instance);
+}
+const makeEvDialogTransitionProps = props.propsFactory(
+  {
+    target: [Object, Array]
+  },
+  "EvDialogTransition"
+);
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvDialogTransition",
+  props: {
+    ...makeEvDialogTransitionProps()
+  },
+  setup(__props) {
+    const props2 = __props;
+    function getDimensions(target, el) {
+      const targetRect = EvOverlay_vue_vue_type_script_setup_true_lang.getTargetRect(target);
+      const elRect = EvOverlay_vue_vue_type_script_setup_true_lang.adjustedBoundingRect(el);
+      const [originX, originY] = getComputedStyle(el).transformOrigin.split(" ").map((v) => parseFloat(v));
+      const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue("--ev-overlay-position").split(" ");
+      let offsetX = targetRect.left + targetRect.width / 2;
+      if (anchorSide === "left" || anchorOffset === "left") {
+        offsetX -= targetRect.width / 2;
+      } else if (anchorSide === "right" || anchorOffset === "right") {
+        offsetX += targetRect.width / 2;
+      }
+      let offsetY = targetRect.top + targetRect.height / 2;
+      if (anchorSide === "top" || anchorOffset === "top") {
+        offsetY -= targetRect.height / 2;
+      } else if (anchorSide === "bottom" || anchorOffset === "bottom") {
+        offsetY += targetRect.height / 2;
+      }
+      const tsx = targetRect.width / elRect.width;
+      const tsy = targetRect.height / elRect.height;
+      const maxs = Math.max(1, tsx, tsy);
+      const sx = tsx / maxs || 0;
+      const sy = tsy / maxs || 0;
+      const asa = elRect.width * elRect.height / (window.innerWidth * window.innerHeight);
+      const speed = asa > 0.12 ? Math.min(1.5, (asa - 0.12) * 10 + 1) : 1;
+      return {
+        x: offsetX - (originX + elRect.left),
+        y: offsetY - (originY + elRect.top),
+        sx,
+        sy,
+        speed
+      };
+    }
+    function onBeforeEnter(el) {
+      el.style.pointerEvents = "none";
+      el.style.visibility = "hidden";
+    }
+    async function onEnter(el, done) {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      el.style.visibility = "";
+      const { x, y, sx, sy, speed } = getDimensions(
+        props2.target,
+        el
+      );
+      const animation = animate.animate(
+        el,
+        [
+          {
+            transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
+            opacity: 0
+          },
+          {}
+        ],
+        {
+          duration: 225 * speed,
+          easing: animate.easingDecelerate
+        }
+      );
+      animation.finished.then(() => done());
+    }
+    function onAfterEnter(el) {
+      el.style.removeProperty("pointer-events");
+    }
+    function onBeforeLeave(el) {
+      el.style.pointerEvents = "none";
+    }
+    async function onLeave(el, done) {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const { x, y, sx, sy, speed } = getDimensions(
+        props2.target,
+        el
+      );
+      const animation = animate.animate(
+        el,
+        [
+          {},
+          {
+            transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
+            opacity: 0
+          }
+        ],
+        {
+          duration: 125 * speed,
+          easing: animate.easingAccelerate
+        }
+      );
+      animation.finished.then(() => done());
+    }
+    function onAfterLeave(el) {
+      el.style.removeProperty("pointer-events");
+    }
+    return (_ctx, _cache) => {
+      return props2.target ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+        key: 0,
+        name: "ev-dialog-transition",
+        css: false,
+        onBeforeEnter,
+        onEnter,
+        onAfterEnter,
+        onBeforeLeave,
+        onLeave,
+        onAfterLeave
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      })) : (vue.openBlock(), vue.createBlock(vue.Transition, {
+        key: 1,
+        name: "ev-dialog-transition"
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }));
+    };
+  }
+});
+const makeEvDialogProps = props.propsFactory(
+  {
+    bodyProps: Object,
+    closeable: {
+      type: Boolean,
+      default: true
+    },
+    draggable: Boolean,
+    dragWithinViewport: {
+      type: Boolean,
+      default: true
+    },
+    dragMinX: {
+      type: Number,
+      default: 0
+    },
+    dragMinY: {
+      type: Number,
+      default: 0
+    },
+    fullscreen: Boolean,
+    headerActions: Array,
+    headerProps: Object,
+    hideHeader: Boolean,
+    icon: icons.IconProp,
+    noPadding: Boolean,
+    retainFocus: {
+      type: Boolean,
+      default: true
+    },
+    scrollable: Boolean,
+    title: String,
+    ...EvOverlay_vue_vue_type_script_setup_true_lang.makeEvOverlayProps({
+      origin: "center center",
+      scrollStrategy: "block",
+      positionStrategy: "static",
+      transition: {
+        component: _sfc_main$4
+      },
+      zIndex: 2400
+    }),
+    __instance: null
+  },
+  "EvDialog"
+);
+const DialogSize = {
+  default: "medium",
+  small: "small",
+  medium: "medium",
+  large: "large",
+  xLarge: "x-large"
+};
+const DialogSizeToWidth = {
+  [DialogSize.small]: 400,
+  [DialogSize.medium]: 600,
+  [DialogSize.large]: 800,
+  [DialogSize.xLarge]: 968
+};
+const makeEvDialogBodyProps = props.propsFactory(
+  {
+    padding: {
+      type: Boolean,
+      default: true
+    }
+  },
+  "EvDialogBody"
+);
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvDialogBody",
+  props: {
+    ...makeEvDialogBodyProps()
+  },
+  setup(__props) {
+    const props2 = __props;
+    const paddingClass = vue.computed(() => {
+      return !props2.padding ? "pa-0" : void 0;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "ev-dialog--body",
+          "is-scrollable",
+          paddingClass.value
+        ])
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$2 = {};
+const _hoisted_1 = { class: "ev-dialog--footer" };
+function _sfc_render(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const EvDialogFooter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const makeEvDialogHeaderProps = props.propsFactory(
+  {
+    modelValue: Boolean,
+    closeable: {
+      type: Boolean,
+      default: true
+    },
+    ...EvToolbar_vue_vue_type_script_setup_true_lang.makeEvToolbarProps({
+      size: "large"
+    })
+  },
+  "EvDialogHeader"
+);
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvDialogHeader",
+  props: {
+    ...makeEvDialogHeaderProps()
+  },
+  emits: ["update:modelValue", "close"],
+  setup(__props, { emit }) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const isActive = modelProxy.useModelProxy(props2, "modelValue");
+    function close() {
+      isActive.value = false;
+      emit("close");
+    }
+    const closeable = vue.computed(() => props2.closeable ? close : void 0);
+    const toolbarProps = vue.computed(() => {
+      return helpers.filterComponentProps(EvToolbar_vue_vue_type_script_setup_true_lang._sfc_main, props2);
+    });
+    return (_ctx, _cache) => {
+      return vue.unref(slots).default ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass(["ev-dialog--header", props2.class]),
+        style: vue.normalizeStyle(props2.style)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 6)) : (vue.openBlock(), vue.createBlock(vue.unref(EvToolbar_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps({
+        key: 1,
+        class: ["ev-dialog--header", { "is-untitled": !props2.title }]
+      }, toolbarProps.value, { "onClick:close": closeable.value }), null, 16, ["class", "onClick:close"]));
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvDialog",
+  props: {
+    ...makeEvDialogProps()
+  },
+  emits: ["update:modelValue", "update:fullscreen", "dragstart", "dragend", "open", "after-open", "close", "after-close"],
+  setup(__props, { expose: __expose, emit }) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const overlayRef = vue.ref();
+    const isActive = modelProxy.useModelProxy(props2, "modelValue");
+    const isFullscreen = modelProxy.useModelProxy(props2, "fullscreen");
+    const overlayProps = vue.computed(() => {
+      return helpers.filterComponentProps(EvOverlay_vue_vue_type_script_setup_true_lang._sfc_main, props2);
+    });
+    const activatorProps = vue.computed(() => {
+      return vue.mergeProps(
+        {
+          "aria-haspopup": "dialog",
+          "aria-expanded": String(isActive.value)
+        },
+        props2.activatorProps
+      );
+    });
+    const headerProps = vue.computed(() => {
+      const separatedProps = {
+        actions: props2.headerActions,
+        closeable: props2.closeable,
+        icon: props2.icon,
+        title: props2.title
+      };
+      const suppliedProps = props2.headerProps ?? {};
+      return Object.assign(separatedProps, suppliedProps);
+    });
+    const bodyProps = vue.computed(() => {
+      const separatedProps = {
+        padding: !props2.noPadding
+      };
+      const suppliedProps = props2.bodyProps ?? {};
+      return Object.assign(separatedProps, suppliedProps);
+    });
+    const width = vue.computed(() => {
+      const size = props2.width ?? DialogSizeToWidth[DialogSize.medium];
+      return DialogSizeToWidth[size] ?? size;
+    });
+    function onFocusin(e) {
+      var _a, _b;
+      const previousEl = e.relatedTarget;
+      const targetEl = e.target;
+      if (previousEl !== targetEl && ((_a = overlayRef.value) == null ? void 0 : _a.contentEl) && ((_b = overlayRef.value) == null ? void 0 : _b.isTopGlobal) && ![document, overlayRef.value.contentEl].includes(targetEl) && !overlayRef.value.contentEl.contains(targetEl)) {
+        const focusable = events.getFocusableChildren(overlayRef.value.contentEl);
+        if (!focusable.length) {
+          return;
+        }
+        const firstEl = focusable[0];
+        const lastEl = focusable[focusable.length - 1];
+        if (previousEl === firstEl) {
+          lastEl.focus();
+        } else {
+          firstEl.focus();
+        }
+      }
+    }
+    if (helpers.Browser.hasWindow) {
+      vue.watch(
+        () => isActive.value && props2.retainFocus,
+        (value) => {
+          if (value) {
+            document.addEventListener("focusin", onFocusin);
+          } else {
+            document.removeEventListener("focusin", onFocusin);
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+    }
+    vue.watch(isActive, async (value) => {
+      var _a, _b;
+      await vue.nextTick();
+      if (value) {
+        (_a = overlayRef.value.contentEl) == null ? void 0 : _a.focus({ preventScroll: true });
+      } else {
+        (_b = overlayRef.value.activatorEl) == null ? void 0 : _b.focus({ preventScroll: true });
+      }
+    });
+    function close() {
+      isActive.value = false;
+    }
+    provideDialog(props2.__instance);
+    __expose({
+      close
+    });
+    let dragging = false;
+    let lastPageX = null;
+    let lastPageY = null;
+    let documentDragListener = null;
+    let documentDragEndListener = null;
+    function initDrag(e) {
+      if (!props2.draggable || e.target.closest("[data-no-drag]")) {
+        return;
+      }
+      dragging = true;
+      lastPageX = e.pageX;
+      lastPageY = e.pageY;
+      document.body.style.userSelect = "none";
+      emit("dragstart", e);
+    }
+    function onEnter() {
+      emit("open");
+      bindGlobalListeners();
+    }
+    function onAfterEnter() {
+      emit("after-open");
+    }
+    function onBeforeLeave() {
+      if (dragging && documentDragEndListener) {
+        documentDragEndListener();
+      }
+    }
+    function onLeave() {
+      emit("close");
+    }
+    function onAfterLeave() {
+      unbindGlobalListeners();
+      emit("after-close");
+    }
+    function bindGlobalListeners() {
+      if (props2.draggable) {
+        bindDocumentDragListener();
+        bindDocumentDragEndListener();
+      }
+    }
+    function bindDocumentDragListener() {
+      documentDragListener = (event) => {
+        var _a;
+        const container = (_a = overlayRef.value) == null ? void 0 : _a.contentEl;
+        if (dragging && container) {
+          const width2 = getOuterWidth(container);
+          const height = getOuterHeight(container);
+          const deltaX = event.pageX - lastPageX;
+          const deltaY = event.pageY - lastPageY;
+          const offset = container.getBoundingClientRect();
+          const leftPos = offset.left + deltaX;
+          const topPos = offset.top + deltaY;
+          const viewport = getViewport();
+          const containerComputedStyle = getComputedStyle(container);
+          const marginLeft = parseFloat(containerComputedStyle.marginLeft);
+          const marginTop = parseFloat(containerComputedStyle.marginTop);
+          container.style.position = "fixed";
+          if (props2.dragWithinViewport) {
+            if (leftPos >= props2.dragMinX && leftPos + width2 < viewport.width) {
+              lastPageX = event.pageX;
+              container.style.left = leftPos - marginLeft + "px";
+            }
+            if (topPos >= props2.dragMinY && topPos + height < viewport.height) {
+              lastPageY = event.pageY;
+              container.style.top = topPos - marginTop + "px";
+            }
+          } else {
+            lastPageX = event.pageX;
+            container.style.left = leftPos - marginLeft + "px";
+            lastPageY = event.pageY;
+            container.style.top = topPos - marginTop + "px";
+          }
+        }
+      };
+      window.document.addEventListener("mousemove", documentDragListener);
+    }
+    function bindDocumentDragEndListener() {
+      documentDragEndListener = (event) => {
+        if (dragging) {
+          dragging = false;
+          document.body.style.userSelect = "";
+          emit("dragend", event);
+        }
+      };
+      window.document.addEventListener("mouseup", documentDragEndListener);
+    }
+    function unbindGlobalListeners() {
+      unbindDocumentDragListener();
+      unbindDocumentDragEndListener();
+    }
+    function unbindDocumentDragListener() {
+      if (documentDragListener) {
+        window.document.removeEventListener("mousemove", documentDragListener);
+        documentDragListener = null;
+      }
+    }
+    function unbindDocumentDragEndListener() {
+      if (documentDragEndListener) {
+        window.document.removeEventListener("mouseup", documentDragEndListener);
+        documentDragEndListener = null;
+      }
+    }
+    vue.onBeforeUnmount(() => {
+      unbindGlobalListeners();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(EvOverlay_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps({
+        ref_key: "overlayRef",
+        ref: overlayRef
+      }, overlayProps.value, {
+        modelValue: vue.unref(isActive),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(isActive) ? isActive.value = $event : null),
+        "aria-modal": "true",
+        role: "dialog",
+        class: [
+          "ev-dialog",
+          {
+            "is-fullscreen": vue.unref(isFullscreen),
+            "is-scrollable": props2.scrollable
+          },
+          props2.class
+        ],
+        style: props2.style,
+        "activator-props": activatorProps.value,
+        width: width.value,
+        onEnter,
+        onAfterEnter,
+        onBeforeLeave,
+        onLeave,
+        onAfterLeave
+      }), vue.createSlots({
+        default: vue.withCtx(() => [
+          vue.unref(slots).container ? vue.renderSlot(_ctx.$slots, "container", { key: 0 }) : (vue.openBlock(), vue.createBlock(EvSurface_vue_vue_type_script_setup_true_lang._sfc_main, {
+            key: 1,
+            class: "ev-dialog--surface",
+            elevation: "overlay",
+            rounded: "small"
+          }, {
+            default: vue.withCtx(() => [
+              !props2.hideHeader ? (vue.openBlock(), vue.createBlock(_sfc_main$1, vue.mergeProps({
+                key: 0,
+                modelValue: vue.unref(isActive),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(isActive) ? isActive.value = $event : null)
+              }, headerProps.value, { onMousedown: initDrag }), vue.createSlots({ _: 2 }, [
+                vue.unref(slots).header ? {
+                  name: "default",
+                  fn: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "header")
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1040, ["modelValue"])) : vue.createCommentVNode("", true),
+              vue.createVNode(_sfc_main$3, vue.normalizeProps(vue.guardReactiveProps(bodyProps.value)), {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              }, 16),
+              vue.unref(slots).footer ? (vue.openBlock(), vue.createBlock(EvDialogFooter, { key: 1 }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "footer")
+                ]),
+                _: 3
+              })) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }))
+        ]),
+        _: 2
+      }, [
+        vue.unref(slots).activator ? {
+          name: "activator",
+          fn: vue.withCtx(({ isActive: isActive2, props: props22 }) => [
+            vue.renderSlot(_ctx.$slots, "activator", {
+              isActive: isActive2,
+              props: props22
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["modelValue", "class", "style", "activator-props", "width"]);
+    };
+  }
+});
+exports.DialogSize = DialogSize;
+exports.DialogSizeToWidth = DialogSizeToWidth;
+exports.EvDialogServiceSymbol = EvDialogServiceSymbol;
+exports._sfc_main = _sfc_main;
+exports.getOuterHeight = getOuterHeight;
+exports.getOuterWidth = getOuterWidth;
+exports.getViewport = getViewport;
+exports.injectDialog = injectDialog;
+exports.makeEvDialogProps = makeEvDialogProps;
+exports.useDialog = useDialog;
+//# sourceMappingURL=EvDialog.vue_vue_type_script_setup_true_lang-4ZvUpBk-.cjs.map