@evance/evance-ui 1.0.36 → 1.0.38

package/dist/esm/chunks/EvDialog.vue_vue_type_script_setup_true_lang-Dqbh-qtI.mjs

@@ -1,627 +0,0 @@
-/*! Evance UI v1.0.36 | MIT License */
-import { provide, inject, defineComponent, createBlock, openBlock, Transition, withCtx, renderSlot, computed, createElementBlock, normalizeClass, useSlots, unref, normalizeStyle, mergeProps, ref, watch, nextTick, onBeforeUnmount, isRef, createSlots, createCommentVNode, createVNode, normalizeProps, guardReactiveProps } from "vue";
-import { g as getTargetRect, f as adjustedBoundingRect, e as makeEvOverlayProps, _ as _sfc_main$6 } from "./EvOverlay.vue_vue_type_script_setup_true_lang-C526wM5b.mjs";
-import { a as animate, c as easingDecelerate, b as easingAccelerate } from "./animate-Bz27WCqr.mjs";
-import { p as propsFactory } from "./props-2s59DNIa.mjs";
-import { I as IconProp } from "./icons-Bd-Q-1Nq.mjs";
-import { _ as _sfc_main$7 } from "./EvSurface.vue_vue_type_script_setup_true_lang-BlKKIwv7.mjs";
-import { u as useModelProxy } from "./modelProxy-CZKYGR_7.mjs";
-import { _ as _sfc_main$5, m as makeEvToolbarProps } from "./EvToolbar.vue_vue_type_script_setup_true_lang-DzBXECUw.mjs";
-import { f as filterComponentProps, B as Browser } from "./helpers-BU9eM0b_.mjs";
-import { a as getFocusableChildren } from "./events-C0sIOO40.mjs";
-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 = inject(EvDialogServiceSymbol);
-  if (!dialogService) {
-    throw new Error("Evance UI: Unable to find injected dialog service");
-  }
-  return dialogService;
-}
-function injectDialog() {
-  return inject(EvDialogInstanceSymbol);
-}
-function provideDialog(instance) {
-  provide(EvDialogInstanceSymbol, instance);
-}
-const makeEvDialogTransitionProps = propsFactory(
-  {
-    target: [Object, Array]
-  },
-  "EvDialogTransition"
-);
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "EvDialogTransition",
-  props: {
-    ...makeEvDialogTransitionProps()
-  },
-  setup(__props) {
-    const props = __props;
-    function getDimensions(target, el) {
-      const targetRect = getTargetRect(target);
-      const elRect = 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(
-        props.target,
-        el
-      );
-      const animation = animate(
-        el,
-        [
-          {
-            transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
-            opacity: 0
-          },
-          {}
-        ],
-        {
-          duration: 225 * speed,
-          easing: 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(
-        props.target,
-        el
-      );
-      const animation = animate(
-        el,
-        [
-          {},
-          {
-            transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
-            opacity: 0
-          }
-        ],
-        {
-          duration: 125 * speed,
-          easing: easingAccelerate
-        }
-      );
-      animation.finished.then(() => done());
-    }
-    function onAfterLeave(el) {
-      el.style.removeProperty("pointer-events");
-    }
-    return (_ctx, _cache) => {
-      return props.target ? (openBlock(), createBlock(Transition, {
-        key: 0,
-        name: "ev-dialog-transition",
-        css: false,
-        onBeforeEnter,
-        onEnter,
-        onAfterEnter,
-        onBeforeLeave,
-        onLeave,
-        onAfterLeave
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      })) : (openBlock(), createBlock(Transition, {
-        key: 1,
-        name: "ev-dialog-transition"
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }));
-    };
-  }
-});
-const makeEvDialogProps = 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: IconProp,
-    noPadding: Boolean,
-    retainFocus: {
-      type: Boolean,
-      default: true
-    },
-    scrollable: Boolean,
-    title: String,
-    ...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 = propsFactory(
-  {
-    padding: {
-      type: Boolean,
-      default: true
-    }
-  },
-  "EvDialogBody"
-);
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "EvDialogBody",
-  props: {
-    ...makeEvDialogBodyProps()
-  },
-  setup(__props) {
-    const props = __props;
-    const paddingClass = computed(() => {
-      return !props.padding ? "pa-0" : void 0;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          "ev-dialog--body",
-          "is-scrollable",
-          paddingClass.value
-        ])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _sfc_main$2 = {};
-const _hoisted_1 = { class: "ev-dialog--footer" };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default")
-  ]);
-}
-const EvDialogFooter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
-const makeEvDialogHeaderProps = propsFactory(
-  {
-    modelValue: Boolean,
-    closeable: {
-      type: Boolean,
-      default: true
-    },
-    ...makeEvToolbarProps({
-      size: "large"
-    })
-  },
-  "EvDialogHeader"
-);
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "EvDialogHeader",
-  props: {
-    ...makeEvDialogHeaderProps()
-  },
-  emits: ["update:modelValue", "close"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const slots = useSlots();
-    const isActive = useModelProxy(props, "modelValue");
-    function close() {
-      isActive.value = false;
-      emit("close");
-    }
-    const closeable = computed(() => props.closeable ? close : void 0);
-    const toolbarProps = computed(() => {
-      return filterComponentProps(_sfc_main$5, props);
-    });
-    return (_ctx, _cache) => {
-      return unref(slots).default ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: normalizeClass(["ev-dialog--header", props.class]),
-        style: normalizeStyle(props.style)
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 6)) : (openBlock(), createBlock(unref(_sfc_main$5), mergeProps({
-        key: 1,
-        class: ["ev-dialog--header", { "is-untitled": !props.title }]
-      }, toolbarProps.value, { "onClick:close": closeable.value }), null, 16, ["class", "onClick:close"]));
-    };
-  }
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "EvDialog",
-  props: {
-    ...makeEvDialogProps()
-  },
-  emits: ["update:modelValue", "update:fullscreen", "dragstart", "dragend", "open", "after-open", "close", "after-close"],
-  setup(__props, { expose: __expose, emit }) {
-    const props = __props;
-    const slots = useSlots();
-    const overlayRef = ref();
-    const isActive = useModelProxy(props, "modelValue");
-    const isFullscreen = useModelProxy(props, "fullscreen");
-    const overlayProps = computed(() => {
-      return filterComponentProps(_sfc_main$6, props);
-    });
-    const activatorProps = computed(() => {
-      return mergeProps(
-        {
-          "aria-haspopup": "dialog",
-          "aria-expanded": String(isActive.value)
-        },
-        props.activatorProps
-      );
-    });
-    const headerProps = computed(() => {
-      const separatedProps = {
-        actions: props.headerActions,
-        closeable: props.closeable,
-        icon: props.icon,
-        title: props.title
-      };
-      const suppliedProps = props.headerProps ?? {};
-      return Object.assign(separatedProps, suppliedProps);
-    });
-    const bodyProps = computed(() => {
-      const separatedProps = {
-        padding: !props.noPadding
-      };
-      const suppliedProps = props.bodyProps ?? {};
-      return Object.assign(separatedProps, suppliedProps);
-    });
-    const width = computed(() => {
-      const size = props.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 = 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 (Browser.hasWindow) {
-      watch(
-        () => isActive.value && props.retainFocus,
-        (value) => {
-          if (value) {
-            document.addEventListener("focusin", onFocusin);
-          } else {
-            document.removeEventListener("focusin", onFocusin);
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-    }
-    watch(isActive, async (value) => {
-      var _a, _b;
-      await 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(props.__instance);
-    __expose({
-      close
-    });
-    let dragging = false;
-    let lastPageX = null;
-    let lastPageY = null;
-    let documentDragListener = null;
-    let documentDragEndListener = null;
-    function initDrag(e) {
-      if (!props.draggable || e.target instanceof Element && 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 (props.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 (props.dragWithinViewport) {
-            if (leftPos >= props.dragMinX && leftPos + width2 < viewport.width) {
-              lastPageX = event.pageX;
-              container.style.left = leftPos - marginLeft + "px";
-            }
-            if (topPos >= props.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;
-      }
-    }
-    onBeforeUnmount(() => {
-      unbindGlobalListeners();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$6), mergeProps({
-        ref_key: "overlayRef",
-        ref: overlayRef
-      }, overlayProps.value, {
-        modelValue: unref(isActive),
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(isActive) ? isActive.value = $event : null),
-        "aria-modal": "true",
-        role: "dialog",
-        class: [
-          "ev-dialog",
-          {
-            "is-fullscreen": unref(isFullscreen),
-            "is-scrollable": props.scrollable
-          },
-          props.class
-        ],
-        style: props.style,
-        "activator-props": activatorProps.value,
-        width: width.value,
-        onEnter,
-        onAfterEnter,
-        onBeforeLeave,
-        onLeave,
-        onAfterLeave
-      }), createSlots({
-        default: withCtx(() => [
-          unref(slots).container ? renderSlot(_ctx.$slots, "container", { key: 0 }) : (openBlock(), createBlock(_sfc_main$7, {
-            key: 1,
-            class: "ev-dialog--surface",
-            elevation: "overlay",
-            rounded: "small"
-          }, {
-            default: withCtx(() => [
-              !props.hideHeader ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
-                key: 0,
-                modelValue: unref(isActive),
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(isActive) ? isActive.value = $event : null)
-              }, headerProps.value, { onMousedown: initDrag }), createSlots({ _: 2 }, [
-                unref(slots).header ? {
-                  name: "default",
-                  fn: withCtx(() => [
-                    renderSlot(_ctx.$slots, "header")
-                  ]),
-                  key: "0"
-                } : void 0
-              ]), 1040, ["modelValue"])) : createCommentVNode("", true),
-              createVNode(_sfc_main$3, normalizeProps(guardReactiveProps(bodyProps.value)), {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                _: 3
-              }, 16),
-              unref(slots).footer ? (openBlock(), createBlock(EvDialogFooter, { key: 1 }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "footer")
-                ]),
-                _: 3
-              })) : createCommentVNode("", true)
-            ]),
-            _: 3
-          }))
-        ]),
-        _: 2
-      }, [
-        unref(slots).activator ? {
-          name: "activator",
-          fn: withCtx(({ isActive: isActive2, props: props2 }) => [
-            renderSlot(_ctx.$slots, "activator", {
-              isActive: isActive2,
-              props: props2
-            })
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["modelValue", "class", "style", "activator-props", "width"]);
-    };
-  }
-});
-export {
-  DialogSize as D,
-  EvDialogServiceSymbol as E,
-  _sfc_main as _,
-  DialogSizeToWidth as a,
-  getOuterWidth as b,
-  getViewport as c,
-  getOuterHeight as g,
-  injectDialog as i,
-  makeEvDialogProps as m,
-  useDialog as u
-};
-//# sourceMappingURL=EvDialog.vue_vue_type_script_setup_true_lang-Dqbh-qtI.mjs.map