@evance/evance-ui 1.0.24 → 1.0.25

package/dist/cjs/EvDialog.vue_vue_type_script_setup_true_lang-BQrrzWH9.cjs

@@ -1,626 +0,0 @@
-"use strict";
-/*! Evance UI v1.0.24 | MIT License */
-const vue = require("vue");
-const EvOverlay_vue_vue_type_script_setup_true_lang = require("./EvOverlay.vue_vue_type_script_setup_true_lang-BU9yfOKU.cjs");
-const animate = require("./animate-BM9LBt1P.cjs");
-const props = require("./props-BtEOrn6P.cjs");
-const icons = require("./icons-ClG46GXY.cjs");
-const EvSurface_vue_vue_type_script_setup_true_lang = require("./EvSurface.vue_vue_type_script_setup_true_lang-BD8gfIT9.cjs");
-const modelProxy = require("./modelProxy-ChJQIOVG.cjs");
-const EvToolbar_vue_vue_type_script_setup_true_lang = require("./EvToolbar.vue_vue_type_script_setup_true_lang-rd2TkuI2.cjs");
-const helpers = require("./helpers-KaYXJck1.cjs");
-const events = require("./events-B0NEoUZL.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-BQrrzWH9.cjs.map