@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/dist/client/PopUp--_xn1Cms.js

@@ -0,0 +1,410 @@
+import { createVNode, Transition, mergeProps, ref, onBeforeUnmount, watch, nextTick, toRef, mergeModels, useModel, openBlock, createElementBlock, withCtx, createBlock, resolveDynamicComponent, unref, createCommentVNode, renderSlot } from 'vue';
+import { g as genericComponent, p as propsFactory, j as useProxiedModel, x as IN_BROWSER, a as useRender, z as focusableChildren, Q as VDefaultsProvider, K as makeBorderProps, b as makeComponentProps, H as makeDimensionProps, L as makeElevationProps, at as makeLocationProps, au as makePositionProps, M as makeRoundedProps, c as makeTagProps, d as makeThemeProps, e as provideTheme, C as useBackgroundColor, N as useBorder, J as useDimension, O as useElevation, ay as useLocation, az as usePosition, P as useRounded, aI as useDefineWidgets } from './asWebComponent-BRGyP_j5.js';
+import { m as makeVOverlayProps, V as VOverlay } from './VOverlay-D89omJis.js';
+import { a as animate, d as deceleratedEasing, s as standardEasing, c as acceleratedEasing, g as getTargetBox, n as nullifyTransforms, b as useScopeId, f as forwardRefs } from './forwardRefs-CYrR6bMw.js';
+
+const makeVDialogTransitionProps = propsFactory({
+  target: [Object, Array]
+}, 'v-dialog-transition');
+const VDialogTransition = genericComponent()({
+  name: 'VDialogTransition',
+  props: makeVDialogTransitionProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const functions = {
+      onBeforeEnter(el) {
+        el.style.pointerEvents = 'none';
+        el.style.visibility = 'hidden';
+      },
+      async 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: deceleratedEasing
+        });
+        getChildren(el)?.forEach(el => {
+          animate(el, [{
+            opacity: 0
+          }, {
+            opacity: 0,
+            offset: 0.33
+          }, {}], {
+            duration: 225 * 2 * speed,
+            easing: standardEasing
+          });
+        });
+        animation.finished.then(() => done());
+      },
+      onAfterEnter(el) {
+        el.style.removeProperty('pointer-events');
+      },
+      onBeforeLeave(el) {
+        el.style.pointerEvents = 'none';
+      },
+      async 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: acceleratedEasing
+        });
+        animation.finished.then(() => done());
+        getChildren(el)?.forEach(el => {
+          animate(el, [{}, {
+            opacity: 0,
+            offset: 0.2
+          }, {
+            opacity: 0
+          }], {
+            duration: 125 * 2 * speed,
+            easing: standardEasing
+          });
+        });
+      },
+      onAfterLeave(el) {
+        el.style.removeProperty('pointer-events');
+      }
+    };
+    return () => {
+      return props.target ? createVNode(Transition, mergeProps({
+        "name": "dialog-transition"
+      }, functions, {
+        "css": false
+      }), slots) : createVNode(Transition, {
+        "name": "dialog-transition"
+      }, slots);
+    };
+  }
+});
+
+/** Animatable children (card, sheet, list) */
+function getChildren(el) {
+  const els = el.querySelector(':scope > .v-card, :scope > .v-sheet, :scope > .v-list')?.children;
+  return els && [...els];
+}
+function getDimensions(target, el) {
+  const targetBox = getTargetBox(target);
+  const elBox = nullifyTransforms(el);
+  const [originX, originY] = getComputedStyle(el).transformOrigin.split(' ').map(v => parseFloat(v));
+  const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue('--v-overlay-anchor-origin').split(' ');
+  let offsetX = targetBox.left + targetBox.width / 2;
+  if (anchorSide === 'left' || anchorOffset === 'left') {
+    offsetX -= targetBox.width / 2;
+  } else if (anchorSide === 'right' || anchorOffset === 'right') {
+    offsetX += targetBox.width / 2;
+  }
+  let offsetY = targetBox.top + targetBox.height / 2;
+  if (anchorSide === 'top' || anchorOffset === 'top') {
+    offsetY -= targetBox.height / 2;
+  } else if (anchorSide === 'bottom' || anchorOffset === 'bottom') {
+    offsetY += targetBox.height / 2;
+  }
+  const tsx = targetBox.width / elBox.width;
+  const tsy = targetBox.height / elBox.height;
+  const maxs = Math.max(1, tsx, tsy);
+  const sx = tsx / maxs || 0;
+  const sy = tsy / maxs || 0;
+
+  // Animate elements larger than 12% of the screen area up to 1.5x slower
+  const asa = elBox.width * elBox.height / (window.innerWidth * window.innerHeight);
+  const speed = asa > 0.12 ? Math.min(1.5, (asa - 0.12) * 10 + 1) : 1;
+  return {
+    x: offsetX - (originX + elBox.left),
+    y: offsetY - (originY + elBox.top),
+    sx,
+    sy,
+    speed
+  };
+}
+
+const makeVDialogProps = propsFactory({
+  fullscreen: Boolean,
+  retainFocus: {
+    type: Boolean,
+    default: true
+  },
+  scrollable: Boolean,
+  ...makeVOverlayProps({
+    origin: 'center center',
+    scrollStrategy: 'block',
+    transition: {
+      component: VDialogTransition
+    },
+    zIndex: 2400
+  })
+}, 'VDialog');
+const VDialog = genericComponent()({
+  name: 'VDialog',
+  props: makeVDialogProps(),
+  emits: {
+    'update:modelValue': value => true,
+    afterEnter: () => true,
+    afterLeave: () => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      scopeId
+    } = useScopeId();
+    const overlay = ref();
+    function onFocusin(e) {
+      const before = e.relatedTarget;
+      const after = e.target;
+      if (before !== after && overlay.value?.contentEl &&
+      // We're the topmost dialog
+      overlay.value?.globalTop &&
+      // It isn't the document or the dialog body
+      ![document, overlay.value.contentEl].includes(after) &&
+      // It isn't inside the dialog body
+      !overlay.value.contentEl.contains(after)) {
+        const focusable = focusableChildren(overlay.value.contentEl);
+        if (!focusable.length) return;
+        const firstElement = focusable[0];
+        const lastElement = focusable[focusable.length - 1];
+        if (before === firstElement) {
+          lastElement.focus();
+        } else {
+          firstElement.focus();
+        }
+      }
+    }
+    onBeforeUnmount(() => {
+      document.removeEventListener('focusin', onFocusin);
+    });
+    if (IN_BROWSER) {
+      watch(() => isActive.value && props.retainFocus, val => {
+        val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
+      }, {
+        immediate: true
+      });
+    }
+    function onAfterEnter() {
+      emit('afterEnter');
+      if (overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) {
+        overlay.value.contentEl.focus({
+          preventScroll: true
+        });
+      }
+    }
+    function onAfterLeave() {
+      emit('afterLeave');
+    }
+    watch(isActive, async val => {
+      if (!val) {
+        await nextTick();
+        overlay.value.activatorEl?.focus({
+          preventScroll: true
+        });
+      }
+    });
+    useRender(() => {
+      const overlayProps = VOverlay.filterProps(props);
+      const activatorProps = mergeProps({
+        'aria-haspopup': 'dialog'
+      }, props.activatorProps);
+      const contentProps = mergeProps({
+        tabindex: -1
+      }, props.contentProps);
+      return createVNode(VOverlay, mergeProps({
+        "ref": overlay,
+        "class": ['v-dialog', {
+          'v-dialog--fullscreen': props.fullscreen,
+          'v-dialog--scrollable': props.scrollable
+        }, props.class],
+        "style": props.style
+      }, overlayProps, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "aria-modal": "true",
+        "activatorProps": activatorProps,
+        "contentProps": contentProps,
+        "height": !props.fullscreen ? props.height : undefined,
+        "width": !props.fullscreen ? props.width : undefined,
+        "maxHeight": !props.fullscreen ? props.maxHeight : undefined,
+        "maxWidth": !props.fullscreen ? props.maxWidth : undefined,
+        "role": "dialog",
+        "onAfterEnter": onAfterEnter,
+        "onAfterLeave": onAfterLeave
+      }, scopeId), {
+        activator: slots.activator,
+        default: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(VDefaultsProvider, {
+            "root": "VDialog"
+          }, {
+            default: () => [slots.default?.(...args)]
+          });
+        }
+      });
+    });
+    return forwardRefs({}, overlay);
+  }
+});
+
+const makeVSheetProps = propsFactory({
+  color: String,
+  ...makeBorderProps(),
+  ...makeComponentProps(),
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeLocationProps(),
+  ...makePositionProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'VSheet');
+const VSheet = genericComponent()({
+  name: 'VSheet',
+  props: makeVSheetProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
+    } = usePosition(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    useRender(() => createVNode(props.tag, {
+      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]
+    }, slots));
+    return {};
+  }
+});
+
+const _hoisted_1 = { key: 1 };
+
+
+const _sfc_main = {
+  __name: 'PopUp',
+  props: /*@__PURE__*/mergeModels({
+  widget: {
+    /** @type {import("vue").PropType<import("@/types").Widget>} */
+    type: Object,
+    default: undefined,
+  },
+  maxWidth: {
+    type: String,
+    default: "500px",
+  },
+  maxHeight: {
+    type: String,
+    default: "500px",
+  },
+  width: {
+    type: String,
+    default: "500px",
+  },
+  height: {
+    type: String,
+    default: "500px",
+  },
+}, {
+    "modelValue": { type: Boolean, required: true, default: false },
+    "modelModifiers": {},
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+
+const dialog = useModel(__props, "modelValue");
+
+const props = __props;
+
+const config = {
+  maxWidth: props.maxWidth,
+  maxHeight: props.maxHeight,
+  width: props.width,
+  height: props.height,
+};
+
+const [definedWidget] = useDefineWidgets([props?.widget]);
+
+return (_ctx, _cache) => {
+                                                         
+                                                           
+
+  return (openBlock(), createElementBlock("span", null, [
+    createVNode(VDialog, mergeProps(config, {
+      absolute: "",
+      scrollable: "",
+      "scroll-strategy": "block",
+      "close-on-back": "",
+      modelValue: dialog.value,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((dialog).value = $event))
+    }), {
+      default: withCtx(() => [
+        createVNode(VSheet, null, {
+          default: withCtx(() => [
+            (__props.widget)
+              ? (openBlock(), createBlock(resolveDynamicComponent(unref(definedWidget).component), mergeProps({
+                  key: unref(definedWidget).id
+                }, unref(definedWidget).props), null, 16 /* FULL_PROPS */))
+              : createCommentVNode("v-if", true),
+            (_ctx.$slots.default)
+              ? (openBlock(), createElementBlock("span", _hoisted_1, [
+                  renderSlot(_ctx.$slots, "default")
+                ]))
+              : createCommentVNode("v-if", true)
+          ]),
+          _: 3 /* FORWARDED */
+        })
+      ]),
+      _: 3 /* FORWARDED */
+    }, 16 /* FULL_PROPS */, ["modelValue"])
+  ]))
+}
+}
+
+};
+
+export { _sfc_main as default };