@eodash/eodash 5.0.0-alpha.2.8 → 5.0.0-processing

package/dist/client/MobileLayout-BAo8Wr8T.js

@@ -0,0 +1,1210 @@
+import { ref, computed, createVNode, mergeProps, Fragment, shallowRef, watch, provide, withDirectives, resolveDirective, inject, vShow, nextTick, toRef, useCssVars, onMounted, openBlock, createBlock, withCtx, Suspense, unref, resolveDynamicComponent, createCommentVNode, createElementBlock, renderList, createTextVNode, createElementVNode, toDisplayString } from 'vue';
+import { k as keys, p as propsFactory, o as omit, m as makeVBtnProps, g as genericComponent, u as useTextColor, a as useRender, V as VBtn, b as makeComponentProps, c as makeTagProps, d as makeThemeProps, e as provideTheme, f as useRtl, h as useLocale, i as useGroup, j as useProxiedModel, l as makeGroupItemProps, n as useGroupItem, q as convertToUnit, I as IconValue, r as makeDisplayProps, s as makeGroupProps, t as useDisplay, v as useResizeObserver, w as useGoTo, x as IN_BROWSER, y as VIcon, z as focusableChildren, A as makeDensityProps, B as useDensity, C as useBackgroundColor, D as provideDefaults, E as isObject, _ as _export_sfc, F as eodashKey, G as useDefineWidgets, H as useLayout } from './asWebComponent-DUUoR7MZ.js';
+import { V as VMain } from './VMain-DnGlQUyr.js';
+import { f as forwardRefs, a as animate, s as standardEasing, m as makeLazyProps, u as useLazy, b as useScopeId } from './forwardRefs-CZJhEAKW.js';
+import { u as useSsrBoot } from './ssrBoot-BP7SYRyC.js';
+import { M as MaybeTransition } from './transition-BiR8wMn1.js';
+import { V as VFadeTransition } from './index-DlIO7sJ3.js';
+
+// Utilities
+const handleGesture = wrapper => {
+  const {
+    touchstartX,
+    touchendX,
+    touchstartY,
+    touchendY
+  } = wrapper;
+  const dirRatio = 0.5;
+  const minDistance = 16;
+  wrapper.offsetX = touchendX - touchstartX;
+  wrapper.offsetY = touchendY - touchstartY;
+  if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
+    wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
+    wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
+  }
+  if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
+    wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
+    wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
+  }
+};
+function touchstart(event, wrapper) {
+  const touch = event.changedTouches[0];
+  wrapper.touchstartX = touch.clientX;
+  wrapper.touchstartY = touch.clientY;
+  wrapper.start?.({
+    originalEvent: event,
+    ...wrapper
+  });
+}
+function touchend(event, wrapper) {
+  const touch = event.changedTouches[0];
+  wrapper.touchendX = touch.clientX;
+  wrapper.touchendY = touch.clientY;
+  wrapper.end?.({
+    originalEvent: event,
+    ...wrapper
+  });
+  handleGesture(wrapper);
+}
+function touchmove(event, wrapper) {
+  const touch = event.changedTouches[0];
+  wrapper.touchmoveX = touch.clientX;
+  wrapper.touchmoveY = touch.clientY;
+  wrapper.move?.({
+    originalEvent: event,
+    ...wrapper
+  });
+}
+function createHandlers() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const wrapper = {
+    touchstartX: 0,
+    touchstartY: 0,
+    touchendX: 0,
+    touchendY: 0,
+    touchmoveX: 0,
+    touchmoveY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    left: value.left,
+    right: value.right,
+    up: value.up,
+    down: value.down,
+    start: value.start,
+    move: value.move,
+    end: value.end
+  };
+  return {
+    touchstart: e => touchstart(e, wrapper),
+    touchend: e => touchend(e, wrapper),
+    touchmove: e => touchmove(e, wrapper)
+  };
+}
+function mounted(el, binding) {
+  const value = binding.value;
+  const target = value?.parent ? el.parentElement : el;
+  const options = value?.options ?? {
+    passive: true
+  };
+  const uid = binding.instance?.$.uid; // TODO: use custom uid generator
+
+  if (!target || !uid) return;
+  const handlers = createHandlers(binding.value);
+  target._touchHandlers = target._touchHandlers ?? Object.create(null);
+  target._touchHandlers[uid] = handlers;
+  keys(handlers).forEach(eventName => {
+    target.addEventListener(eventName, handlers[eventName], options);
+  });
+}
+function unmounted(el, binding) {
+  const target = binding.value?.parent ? el.parentElement : el;
+  const uid = binding.instance?.$.uid;
+  if (!target?._touchHandlers || !uid) return;
+  const handlers = target._touchHandlers[uid];
+  keys(handlers).forEach(eventName => {
+    target.removeEventListener(eventName, handlers[eventName]);
+  });
+  delete target._touchHandlers[uid];
+}
+const Touch = {
+  mounted,
+  unmounted
+};
+
+// Types
+
+const VTabsSymbol = Symbol.for('vuetify:v-tabs');
+
+const makeVTabProps = propsFactory({
+  fixed: Boolean,
+  sliderColor: String,
+  hideSlider: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
+  ...omit(makeVBtnProps({
+    selectedClass: 'v-tab--selected',
+    variant: 'text'
+  }), ['active', 'block', 'flat', 'location', 'position', 'symbol'])
+}, 'VTab');
+const VTab = genericComponent()({
+  name: 'VTab',
+  props: makeVTabProps(),
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs
+    } = _ref;
+    const {
+      textColorClasses: sliderColorClasses,
+      textColorStyles: sliderColorStyles
+    } = useTextColor(props, 'sliderColor');
+    const rootEl = ref();
+    const sliderEl = ref();
+    const isHorizontal = computed(() => props.direction === 'horizontal');
+    const isSelected = computed(() => rootEl.value?.group?.isSelected.value ?? false);
+    function updateSlider(_ref2) {
+      let {
+        value
+      } = _ref2;
+      if (value) {
+        const prevEl = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider');
+        const nextEl = sliderEl.value;
+        if (!prevEl || !nextEl) return;
+        const color = getComputedStyle(prevEl).color;
+        const prevBox = prevEl.getBoundingClientRect();
+        const nextBox = nextEl.getBoundingClientRect();
+        const xy = isHorizontal.value ? 'x' : 'y';
+        const XY = isHorizontal.value ? 'X' : 'Y';
+        const rightBottom = isHorizontal.value ? 'right' : 'bottom';
+        const widthHeight = isHorizontal.value ? 'width' : 'height';
+        const prevPos = prevBox[xy];
+        const nextPos = nextBox[xy];
+        const delta = prevPos > nextPos ? prevBox[rightBottom] - nextBox[rightBottom] : prevBox[xy] - nextBox[xy];
+        const origin = Math.sign(delta) > 0 ? isHorizontal.value ? 'right' : 'bottom' : Math.sign(delta) < 0 ? isHorizontal.value ? 'left' : 'top' : 'center';
+        const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight]);
+        const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0;
+        const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0;
+        const sigma = 1.5;
+        animate(nextEl, {
+          backgroundColor: [color, 'currentcolor'],
+          transform: [`translate${XY}(${delta}px) scale${XY}(${initialScale})`, `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`, 'none'],
+          transformOrigin: Array(3).fill(origin)
+        }, {
+          duration: 225,
+          easing: standardEasing
+        });
+      }
+    }
+    useRender(() => {
+      const btnProps = VBtn.filterProps(props);
+      return createVNode(VBtn, mergeProps({
+        "symbol": VTabsSymbol,
+        "ref": rootEl,
+        "class": ['v-tab', props.class],
+        "style": props.style,
+        "tabindex": isSelected.value ? 0 : -1,
+        "role": "tab",
+        "aria-selected": String(isSelected.value),
+        "active": false
+      }, btnProps, attrs, {
+        "block": props.fixed,
+        "maxWidth": props.fixed ? 300 : undefined,
+        "onGroup:selected": updateSlider
+      }), {
+        ...slots,
+        default: () => createVNode(Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && createVNode("div", {
+          "ref": sliderEl,
+          "class": ['v-tab__slider', sliderColorClasses.value],
+          "style": sliderColorStyles.value
+        }, null)])
+      });
+    });
+    return forwardRefs({}, rootEl);
+  }
+});
+
+const VWindowSymbol = Symbol.for('vuetify:v-window');
+const VWindowGroupSymbol = Symbol.for('vuetify:v-window-group');
+const makeVWindowProps = propsFactory({
+  continuous: Boolean,
+  nextIcon: {
+    type: [Boolean, String, Function, Object],
+    default: '$next'
+  },
+  prevIcon: {
+    type: [Boolean, String, Function, Object],
+    default: '$prev'
+  },
+  reverse: Boolean,
+  showArrows: {
+    type: [Boolean, String],
+    validator: v => typeof v === 'boolean' || v === 'hover'
+  },
+  touch: {
+    type: [Object, Boolean],
+    default: undefined
+  },
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
+  modelValue: null,
+  disabled: Boolean,
+  selectedClass: {
+    type: String,
+    default: 'v-window-item--active'
+  },
+  // TODO: mandatory should probably not be exposed but do this for now
+  mandatory: {
+    type: [Boolean, String],
+    default: 'force'
+  },
+  ...makeComponentProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'VWindow');
+const VWindow = genericComponent()({
+  name: 'VWindow',
+  directives: {
+    Touch
+  },
+  props: makeVWindowProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      isRtl
+    } = useRtl();
+    const {
+      t
+    } = useLocale();
+    const group = useGroup(props, VWindowGroupSymbol);
+    const rootRef = ref();
+    const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse);
+    const isReversed = shallowRef(false);
+    const transition = computed(() => {
+      const axis = props.direction === 'vertical' ? 'y' : 'x';
+      const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value;
+      const direction = reverse ? '-reverse' : '';
+      return `v-window-${axis}${direction}-transition`;
+    });
+    const transitionCount = shallowRef(0);
+    const transitionHeight = ref(undefined);
+    const activeIndex = computed(() => {
+      return group.items.value.findIndex(item => group.selected.value.includes(item.id));
+    });
+    watch(activeIndex, (newVal, oldVal) => {
+      const itemsLength = group.items.value.length;
+      const lastIndex = itemsLength - 1;
+      if (itemsLength <= 2) {
+        isReversed.value = newVal < oldVal;
+      } else if (newVal === lastIndex && oldVal === 0) {
+        isReversed.value = true;
+      } else if (newVal === 0 && oldVal === lastIndex) {
+        isReversed.value = false;
+      } else {
+        isReversed.value = newVal < oldVal;
+      }
+    });
+    provide(VWindowSymbol, {
+      transition,
+      isReversed,
+      transitionCount,
+      transitionHeight,
+      rootRef
+    });
+    const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0);
+    const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+    function prev() {
+      canMoveBack.value && group.prev();
+    }
+    function next() {
+      canMoveForward.value && group.next();
+    }
+    const arrows = computed(() => {
+      const arrows = [];
+      const prevProps = {
+        icon: isRtl.value ? props.nextIcon : props.prevIcon,
+        class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,
+        onClick: group.prev,
+        'aria-label': t('$vuetify.carousel.prev')
+      };
+      arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
+        props: prevProps
+      }) : createVNode(VBtn, prevProps, null) : createVNode("div", null, null));
+      const nextProps = {
+        icon: isRtl.value ? props.prevIcon : props.nextIcon,
+        class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
+        onClick: group.next,
+        'aria-label': t('$vuetify.carousel.next')
+      };
+      arrows.push(canMoveForward.value ? slots.next ? slots.next({
+        props: nextProps
+      }) : createVNode(VBtn, nextProps, null) : createVNode("div", null, null));
+      return arrows;
+    });
+    const touchOptions = computed(() => {
+      if (props.touch === false) return props.touch;
+      const options = {
+        left: () => {
+          isRtlReverse.value ? prev() : next();
+        },
+        right: () => {
+          isRtlReverse.value ? next() : prev();
+        },
+        start: _ref2 => {
+          let {
+            originalEvent
+          } = _ref2;
+          originalEvent.stopPropagation();
+        }
+      };
+      return {
+        ...options,
+        ...(props.touch === true ? {} : props.touch)
+      };
+    });
+    useRender(() => withDirectives(createVNode(props.tag, {
+      "ref": rootRef,
+      "class": ['v-window', {
+        'v-window--show-arrows-on-hover': props.showArrows === 'hover'
+      }, themeClasses.value, props.class],
+      "style": props.style
+    }, {
+      default: () => [createVNode("div", {
+        "class": "v-window__container",
+        "style": {
+          height: transitionHeight.value
+        }
+      }, [slots.default?.({
+        group
+      }), props.showArrows !== false && createVNode("div", {
+        "class": "v-window__controls"
+      }, [arrows.value])]), slots.additional?.({
+        group
+      })]
+    }), [[resolveDirective("touch"), touchOptions.value]]));
+    return {
+      group
+    };
+  }
+});
+
+const makeVTabsWindowProps = propsFactory({
+  ...omit(makeVWindowProps(), ['continuous', 'nextIcon', 'prevIcon', 'showArrows', 'touch', 'mandatory'])
+}, 'VTabsWindow');
+const VTabsWindow = genericComponent()({
+  name: 'VTabsWindow',
+  props: makeVTabsWindowProps(),
+  emits: {
+    'update:modelValue': v => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const group = inject(VTabsSymbol, null);
+    const _model = useProxiedModel(props, 'modelValue');
+    const model = computed({
+      get() {
+        // Always return modelValue if defined
+        // or if not within a VTabs group
+        if (_model.value != null || !group) return _model.value;
+
+        // If inside of a VTabs, find the currently selected
+        // item by id. Item value may be assigned by its index
+        return group.items.value.find(item => group.selected.value.includes(item.id))?.value;
+      },
+      set(val) {
+        _model.value = val;
+      }
+    });
+    useRender(() => {
+      const windowProps = VWindow.filterProps(props);
+      return createVNode(VWindow, mergeProps({
+        "_as": "VTabsWindow"
+      }, windowProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "class": ['v-tabs-window', props.class],
+        "style": props.style,
+        "mandatory": false,
+        "touch": false
+      }), slots);
+    });
+    return {};
+  }
+});
+
+const makeVWindowItemProps = propsFactory({
+  reverseTransition: {
+    type: [Boolean, String],
+    default: undefined
+  },
+  transition: {
+    type: [Boolean, String],
+    default: undefined
+  },
+  ...makeComponentProps(),
+  ...makeGroupItemProps(),
+  ...makeLazyProps()
+}, 'VWindowItem');
+const VWindowItem = genericComponent()({
+  name: 'VWindowItem',
+  directives: {
+    Touch
+  },
+  props: makeVWindowItemProps(),
+  emits: {
+    'group:selected': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const window = inject(VWindowSymbol);
+    const groupItem = useGroupItem(props, VWindowGroupSymbol);
+    const {
+      isBooted
+    } = useSsrBoot();
+    if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
+    const isTransitioning = shallowRef(false);
+    const hasTransition = computed(() => isBooted.value && (window.isReversed.value ? props.reverseTransition !== false : props.transition !== false));
+    function onAfterTransition() {
+      if (!isTransitioning.value || !window) {
+        return;
+      }
+
+      // Finalize transition state.
+      isTransitioning.value = false;
+      if (window.transitionCount.value > 0) {
+        window.transitionCount.value -= 1;
+
+        // Remove container height if we are out of transition.
+        if (window.transitionCount.value === 0) {
+          window.transitionHeight.value = undefined;
+        }
+      }
+    }
+    function onBeforeTransition() {
+      if (isTransitioning.value || !window) {
+        return;
+      }
+
+      // Initialize transition state here.
+      isTransitioning.value = true;
+      if (window.transitionCount.value === 0) {
+        // Set initial height for height transition.
+        window.transitionHeight.value = convertToUnit(window.rootRef.value?.clientHeight);
+      }
+      window.transitionCount.value += 1;
+    }
+    function onTransitionCancelled() {
+      onAfterTransition(); // This should have the same path as normal transition end.
+    }
+    function onEnterTransition(el) {
+      if (!isTransitioning.value) {
+        return;
+      }
+      nextTick(() => {
+        // Do not set height if no transition or cancelled.
+        if (!hasTransition.value || !isTransitioning.value || !window) {
+          return;
+        }
+
+        // Set transition target height.
+        window.transitionHeight.value = convertToUnit(el.clientHeight);
+      });
+    }
+    const transition = computed(() => {
+      const name = window.isReversed.value ? props.reverseTransition : props.transition;
+      return !hasTransition.value ? false : {
+        name: typeof name !== 'string' ? window.transition.value : name,
+        onBeforeEnter: onBeforeTransition,
+        onAfterEnter: onAfterTransition,
+        onEnterCancelled: onTransitionCancelled,
+        onBeforeLeave: onBeforeTransition,
+        onAfterLeave: onAfterTransition,
+        onLeaveCancelled: onTransitionCancelled,
+        onEnter: onEnterTransition
+      };
+    });
+    const {
+      hasContent
+    } = useLazy(props, groupItem.isSelected);
+    useRender(() => createVNode(MaybeTransition, {
+      "transition": transition.value,
+      "disabled": !isBooted.value
+    }, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": ['v-window-item', groupItem.selectedClass.value, props.class],
+        "style": props.style
+      }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
+    }));
+    return {
+      groupItem
+    };
+  }
+});
+
+const makeVTabsWindowItemProps = propsFactory({
+  ...makeVWindowItemProps()
+}, 'VTabsWindowItem');
+const VTabsWindowItem = genericComponent()({
+  name: 'VTabsWindowItem',
+  props: makeVTabsWindowItemProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useRender(() => {
+      const windowItemProps = VWindowItem.filterProps(props);
+      return createVNode(VWindowItem, mergeProps({
+        "_as": "VTabsWindowItem"
+      }, windowItemProps, {
+        "class": ['v-tabs-window-item', props.class],
+        "style": props.style
+      }), slots);
+    });
+    return {};
+  }
+});
+
+function calculateUpdatedTarget(_ref) {
+  let {
+    selectedElement,
+    containerElement,
+    isRtl,
+    isHorizontal
+  } = _ref;
+  const containerSize = getOffsetSize(isHorizontal, containerElement);
+  const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement);
+  const childrenSize = getOffsetSize(isHorizontal, selectedElement);
+  const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement);
+  const additionalOffset = childrenSize * 0.4;
+  if (scrollPosition > childrenStartPosition) {
+    return childrenStartPosition - additionalOffset;
+  } else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) {
+    return childrenStartPosition - containerSize + childrenSize + additionalOffset;
+  }
+  return scrollPosition;
+}
+function calculateCenteredTarget(_ref2) {
+  let {
+    selectedElement,
+    containerElement,
+    isHorizontal
+  } = _ref2;
+  const containerOffsetSize = getOffsetSize(isHorizontal, containerElement);
+  const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement);
+  const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement);
+  return childrenOffsetPosition - containerOffsetSize / 2 + childrenOffsetSize / 2;
+}
+function getScrollSize(isHorizontal, element) {
+  const key = isHorizontal ? 'scrollWidth' : 'scrollHeight';
+  return element?.[key] || 0;
+}
+function getClientSize(isHorizontal, element) {
+  const key = isHorizontal ? 'clientWidth' : 'clientHeight';
+  return element?.[key] || 0;
+}
+function getScrollPosition(isHorizontal, rtl, element) {
+  if (!element) {
+    return 0;
+  }
+  const {
+    scrollLeft,
+    offsetWidth,
+    scrollWidth
+  } = element;
+  if (isHorizontal) {
+    return rtl ? scrollWidth - offsetWidth + scrollLeft : scrollLeft;
+  }
+  return element.scrollTop;
+}
+function getOffsetSize(isHorizontal, element) {
+  const key = isHorizontal ? 'offsetWidth' : 'offsetHeight';
+  return element?.[key] || 0;
+}
+function getOffsetPosition(isHorizontal, element) {
+  const key = isHorizontal ? 'offsetLeft' : 'offsetTop';
+  return element?.[key] || 0;
+}
+
+const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
+const makeVSlideGroupProps = propsFactory({
+  centerActive: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
+  symbol: {
+    type: null,
+    default: VSlideGroupSymbol
+  },
+  nextIcon: {
+    type: IconValue,
+    default: '$next'
+  },
+  prevIcon: {
+    type: IconValue,
+    default: '$prev'
+  },
+  showArrows: {
+    type: [Boolean, String],
+    validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
+  },
+  ...makeComponentProps(),
+  ...makeDisplayProps({
+    mobile: null
+  }),
+  ...makeTagProps(),
+  ...makeGroupProps({
+    selectedClass: 'v-slide-group-item--active'
+  })
+}, 'VSlideGroup');
+const VSlideGroup = genericComponent()({
+  name: 'VSlideGroup',
+  props: makeVSlideGroupProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      isRtl
+    } = useRtl();
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props);
+    const group = useGroup(props, props.symbol);
+    const isOverflowing = shallowRef(false);
+    const scrollOffset = shallowRef(0);
+    const containerSize = shallowRef(0);
+    const contentSize = shallowRef(0);
+    const isHorizontal = computed(() => props.direction === 'horizontal');
+    const {
+      resizeRef: containerRef,
+      contentRect: containerRect
+    } = useResizeObserver();
+    const {
+      resizeRef: contentRef,
+      contentRect
+    } = useResizeObserver();
+    const goTo = useGoTo();
+    const goToOptions = computed(() => {
+      return {
+        container: containerRef.el,
+        duration: 200,
+        easing: 'easeOutQuart'
+      };
+    });
+    const firstSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[0]);
+    });
+    const lastSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]);
+    });
+    if (IN_BROWSER) {
+      let frame = -1;
+      watch(() => [group.selected.value, containerRect.value, contentRect.value, isHorizontal.value], () => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          if (containerRect.value && contentRect.value) {
+            const sizeProperty = isHorizontal.value ? 'width' : 'height';
+            containerSize.value = containerRect.value[sizeProperty];
+            contentSize.value = contentRect.value[sizeProperty];
+            isOverflowing.value = containerSize.value + 1 < contentSize.value;
+          }
+          if (firstSelectedIndex.value >= 0 && contentRef.el) {
+            // TODO: Is this too naive? Should we store element references in group composable?
+            const selectedElement = contentRef.el.children[lastSelectedIndex.value];
+            scrollToChildren(selectedElement, props.centerActive);
+          }
+        });
+      });
+    }
+    const isFocused = shallowRef(false);
+    function scrollToChildren(children, center) {
+      let target = 0;
+      if (center) {
+        target = calculateCenteredTarget({
+          containerElement: containerRef.el,
+          isHorizontal: isHorizontal.value,
+          selectedElement: children
+        });
+      } else {
+        target = calculateUpdatedTarget({
+          containerElement: containerRef.el,
+          isHorizontal: isHorizontal.value,
+          isRtl: isRtl.value,
+          selectedElement: children
+        });
+      }
+      scrollToPosition(target);
+    }
+    function scrollToPosition(newPosition) {
+      if (!IN_BROWSER || !containerRef.el) return;
+      const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el);
+      const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el);
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
+      if (scrollSize <= offsetSize ||
+      // Prevent scrolling by only a couple of pixels, which doesn't look smooth
+      Math.abs(newPosition - scrollPosition) < 16) return;
+      if (isHorizontal.value && isRtl.value && containerRef.el) {
+        const {
+          scrollWidth,
+          offsetWidth: containerWidth
+        } = containerRef.el;
+        newPosition = scrollWidth - containerWidth - newPosition;
+      }
+      if (isHorizontal.value) {
+        goTo.horizontal(newPosition, goToOptions.value);
+      } else {
+        goTo(newPosition, goToOptions.value);
+      }
+    }
+    function onScroll(e) {
+      const {
+        scrollTop,
+        scrollLeft
+      } = e.target;
+      scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop;
+    }
+    function onFocusin(e) {
+      isFocused.value = true;
+      if (!isOverflowing.value || !contentRef.el) return;
+
+      // Focused element is likely to be the root of an item, so a
+      // breadth-first search will probably find it in the first iteration
+      for (const el of e.composedPath()) {
+        for (const item of contentRef.el.children) {
+          if (item === el) {
+            scrollToChildren(item);
+            return;
+          }
+        }
+      }
+    }
+    function onFocusout(e) {
+      isFocused.value = false;
+    }
+
+    // Affix clicks produce onFocus that we have to ignore to avoid extra scrollToChildren
+    let ignoreFocusEvent = false;
+    function onFocus(e) {
+      if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget))) focus();
+      ignoreFocusEvent = false;
+    }
+    function onFocusAffixes() {
+      ignoreFocusEvent = true;
+    }
+    function onKeydown(e) {
+      if (!contentRef.el) return;
+      function toFocus(location) {
+        e.preventDefault();
+        focus(location);
+      }
+      if (isHorizontal.value) {
+        if (e.key === 'ArrowRight') {
+          toFocus(isRtl.value ? 'prev' : 'next');
+        } else if (e.key === 'ArrowLeft') {
+          toFocus(isRtl.value ? 'next' : 'prev');
+        }
+      } else {
+        if (e.key === 'ArrowDown') {
+          toFocus('next');
+        } else if (e.key === 'ArrowUp') {
+          toFocus('prev');
+        }
+      }
+      if (e.key === 'Home') {
+        toFocus('first');
+      } else if (e.key === 'End') {
+        toFocus('last');
+      }
+    }
+    function focus(location) {
+      if (!contentRef.el) return;
+      let el;
+      if (!location) {
+        const focusable = focusableChildren(contentRef.el);
+        el = focusable[0];
+      } else if (location === 'next') {
+        el = contentRef.el.querySelector(':focus')?.nextElementSibling;
+        if (!el) return focus('first');
+      } else if (location === 'prev') {
+        el = contentRef.el.querySelector(':focus')?.previousElementSibling;
+        if (!el) return focus('last');
+      } else if (location === 'first') {
+        el = contentRef.el.firstElementChild;
+      } else if (location === 'last') {
+        el = contentRef.el.lastElementChild;
+      }
+      if (el) {
+        el.focus({
+          preventScroll: true
+        });
+      }
+    }
+    function scrollTo(location) {
+      const direction = isHorizontal.value && isRtl.value ? -1 : 1;
+      const offsetStep = (location === 'prev' ? -direction : direction) * containerSize.value;
+      let newPosition = scrollOffset.value + offsetStep;
+
+      // TODO: improve it
+      if (isHorizontal.value && isRtl.value && containerRef.el) {
+        const {
+          scrollWidth,
+          offsetWidth: containerWidth
+        } = containerRef.el;
+        newPosition += scrollWidth - containerWidth;
+      }
+      scrollToPosition(newPosition);
+    }
+    const slotProps = computed(() => ({
+      next: group.next,
+      prev: group.prev,
+      select: group.select,
+      isSelected: group.isSelected
+    }));
+    const hasAffixes = computed(() => {
+      switch (props.showArrows) {
+        // Always show arrows on desktop & mobile
+        case 'always':
+          return true;
+
+        // Always show arrows on desktop
+        case 'desktop':
+          return !mobile.value;
+
+        // Show arrows on mobile when overflowing.
+        // This matches the default 2.2 behavior
+        case true:
+          return isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+
+        // Always show on mobile
+        case 'mobile':
+          return mobile.value || isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+
+        // https://material.io/components/tabs#scrollable-tabs
+        // Always show arrows when
+        // overflowed on desktop
+        default:
+          return !mobile.value && (isOverflowing.value || Math.abs(scrollOffset.value) > 0);
+      }
+    });
+    const hasPrev = computed(() => {
+      // 1 pixel in reserve, may be lost after rounding
+      return Math.abs(scrollOffset.value) > 1;
+    });
+    const hasNext = computed(() => {
+      if (!containerRef.value) return false;
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
+      const clientSize = getClientSize(isHorizontal.value, containerRef.el);
+      const scrollSizeMax = scrollSize - clientSize;
+
+      // 1 pixel in reserve, may be lost after rounding
+      return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
+    });
+    useRender(() => createVNode(props.tag, {
+      "class": ['v-slide-group', {
+        'v-slide-group--vertical': !isHorizontal.value,
+        'v-slide-group--has-affixes': hasAffixes.value,
+        'v-slide-group--is-overflowing': isOverflowing.value
+      }, displayClasses.value, props.class],
+      "style": props.style,
+      "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
+      "onFocus": onFocus
+    }, {
+      default: () => [hasAffixes.value && createVNode("div", {
+        "key": "prev",
+        "class": ['v-slide-group__prev', {
+          'v-slide-group__prev--disabled': !hasPrev.value
+        }],
+        "onMousedown": onFocusAffixes,
+        "onClick": () => hasPrev.value && scrollTo('prev')
+      }, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
+        default: () => [createVNode(VIcon, {
+          "icon": isRtl.value ? props.nextIcon : props.prevIcon
+        }, null)]
+      })]), createVNode("div", {
+        "key": "container",
+        "ref": containerRef,
+        "class": "v-slide-group__container",
+        "onScroll": onScroll
+      }, [createVNode("div", {
+        "ref": contentRef,
+        "class": "v-slide-group__content",
+        "onFocusin": onFocusin,
+        "onFocusout": onFocusout,
+        "onKeydown": onKeydown
+      }, [slots.default?.(slotProps.value)])]), hasAffixes.value && createVNode("div", {
+        "key": "next",
+        "class": ['v-slide-group__next', {
+          'v-slide-group__next--disabled': !hasNext.value
+        }],
+        "onMousedown": onFocusAffixes,
+        "onClick": () => hasNext.value && scrollTo('next')
+      }, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
+        default: () => [createVNode(VIcon, {
+          "icon": isRtl.value ? props.prevIcon : props.nextIcon
+        }, null)]
+      })])]
+    }));
+    return {
+      selected: group.selected,
+      scrollTo,
+      scrollOffset,
+      focus,
+      hasPrev,
+      hasNext
+    };
+  }
+});
+
+function parseItems(items) {
+  if (!items) return [];
+  return items.map(item => {
+    if (!isObject(item)) return {
+      text: item,
+      value: item
+    };
+    return item;
+  });
+}
+const makeVTabsProps = propsFactory({
+  alignTabs: {
+    type: String,
+    default: 'start'
+  },
+  color: String,
+  fixedTabs: Boolean,
+  items: {
+    type: Array,
+    default: () => []
+  },
+  stacked: Boolean,
+  bgColor: String,
+  grow: Boolean,
+  height: {
+    type: [Number, String],
+    default: undefined
+  },
+  hideSlider: Boolean,
+  sliderColor: String,
+  ...makeVSlideGroupProps({
+    mandatory: 'force',
+    selectedClass: 'v-tab-item--selected'
+  }),
+  ...makeDensityProps(),
+  ...makeTagProps()
+}, 'VTabs');
+const VTabs = genericComponent()({
+  name: 'VTabs',
+  props: makeVTabsProps(),
+  emits: {
+    'update:modelValue': v => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
+    const items = computed(() => parseItems(props.items));
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'bgColor'));
+    const {
+      scopeId
+    } = useScopeId();
+    provideDefaults({
+      VTab: {
+        color: toRef(props, 'color'),
+        direction: toRef(props, 'direction'),
+        stacked: toRef(props, 'stacked'),
+        fixed: toRef(props, 'fixedTabs'),
+        sliderColor: toRef(props, 'sliderColor'),
+        hideSlider: toRef(props, 'hideSlider')
+      }
+    });
+    useRender(() => {
+      const slideGroupProps = VSlideGroup.filterProps(props);
+      const hasWindow = !!(slots.window || props.items.length > 0);
+      return createVNode(Fragment, null, [createVNode(VSlideGroup, mergeProps(slideGroupProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
+          'v-tabs--fixed-tabs': props.fixedTabs,
+          'v-tabs--grow': props.grow,
+          'v-tabs--stacked': props.stacked
+        }, densityClasses.value, backgroundColorClasses.value, props.class],
+        "style": [{
+          '--v-tabs-height': convertToUnit(props.height)
+        }, backgroundColorStyles.value, props.style],
+        "role": "tablist",
+        "symbol": VTabsSymbol
+      }, scopeId, attrs), {
+        default: () => [slots.default?.() ?? items.value.map(item => slots.tab?.({
+          item
+        }) ?? createVNode(VTab, mergeProps(item, {
+          "key": item.text,
+          "value": item.value
+        }), {
+          default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({
+            item
+          }) : undefined
+        }))]
+      }), hasWindow && createVNode(VTabsWindow, mergeProps({
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "key": "tabs-window"
+      }, scopeId), {
+        default: () => [items.value.map(item => slots.item?.({
+          item
+        }) ?? createVNode(VTabsWindowItem, {
+          "value": item.value
+        }, {
+          default: () => slots[`item.${item.value}`]?.({
+            item
+          })
+        })), slots.window?.()]
+      })]);
+    });
+    return {};
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  id: "overlay",
+  class: "pa-2 panel bg-surface"
+};
+const _hoisted_2 = { class: "component-container" };
+
+
+const _sfc_main = {
+  __name: 'MobileLayout',
+  setup(__props) {
+
+useCssVars(_ctx => ({
+  "fbf7b91a": (mainRectTopPx.value),
+  "2c845582": (tabsHeightFromBtm.value),
+  "fdee920e": (mainRectBtmPx.value)
+}));
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+//import widgets
+const widgetsConfig = eodash.template.widgets;
+const importedWidgets = useDefineWidgets(widgetsConfig);
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
+
+const { mainRect } = useLayout();
+
+const activeIdx = ref(-1);
+
+/** @type {import("vue").Ref<import("vuetify/components").VTabs | null>} */
+const tabs = ref(null);
+const tabsHeightFromBtm = ref("");
+const mainRectTopPx = ref("");
+const mainRectBtmPx = ref("");
+
+onMounted(() => {
+  mainRectTopPx.value = mainRect.value.top + "px";
+  mainRectBtmPx.value = (mainRect.value.bottom || 48) + "px";
+  tabsHeightFromBtm.value =
+    mainRect.value.bottom + (tabs.value?.$el?.clientHeight ?? 0) + "px";
+});
+
+return (_ctx, _cache) => {
+                                                     
+                                                     
+                                                       
+                                                       
+
+  return (openBlock(), createBlock(VMain, { class: "overflow-hidden main" }, {
+    default: withCtx(() => [
+      (openBlock(), createBlock(Suspense, { suspensible: "" }, {
+        default: withCtx(() => [
+          (unref(bgWidget).component)
+            ? (openBlock(), createBlock(resolveDynamicComponent(unref(bgWidget).component), mergeProps({
+                key: 0,
+                id: "bg-widget"
+              }, unref(bgWidget).props), null, 16 /* FULL_PROPS */))
+            : createCommentVNode("v-if", true)
+        ]),
+        _: 1 /* STABLE */
+      })),
+      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(importedWidgets), (importedWidget, idx) => {
+        return (openBlock(), createElementBlock(Fragment, { key: idx }, [
+          (importedWidget.value.component)
+            ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+                createVNode(VBtn, {
+                  icon: "",
+                  variant: "text",
+                  class: "close-btn",
+                  onClick: _cache[0] || (_cache[0] = $event => (activeIdx.value = -1))
+                }, {
+                  default: withCtx(() => _cache[2] || (_cache[2] = [
+                    createTextVNode("✕")
+                  ])),
+                  _: 1 /* STABLE */
+                }),
+                (openBlock(), createBlock(Suspense, { suspensible: "" }, {
+                  default: withCtx(() => [
+                    withDirectives(createElementVNode("div", _hoisted_2, [
+                      (openBlock(), createBlock(resolveDynamicComponent(importedWidget.value.component), mergeProps({
+                        key: importedWidget.value.id,
+                        ref_for: true
+                      }, importedWidget.value.props), null, 16 /* FULL_PROPS */))
+                    ], 512 /* NEED_PATCH */), [
+                      [vShow, activeIdx.value === idx]
+                    ])
+                  ]),
+                  _: 2 /* DYNAMIC */
+                }, 1024 /* DYNAMIC_SLOTS */))
+              ], 512 /* NEED_PATCH */)), [
+                [vShow, activeIdx.value === idx]
+              ])
+            : createCommentVNode("v-if", true)
+        ], 64 /* STABLE_FRAGMENT */))
+      }), 128 /* KEYED_FRAGMENT */)),
+      createVNode(VTabs, {
+        ref_key: "tabs",
+        ref: tabs,
+        "align-tabs": "center",
+        "bg-color": "surface",
+        class: "tabs",
+        "show-arrows": "",
+        modelValue: activeIdx.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((activeIdx).value = $event))
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(importedWidgets), (importedWidget, idx) => {
+            return (openBlock(), createElementBlock(Fragment, { key: idx }, [
+              (importedWidget.value.component)
+                ? (openBlock(), createBlock(VTab, {
+                    key: 0,
+                    value: idx
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(importedWidget.value.title), 1 /* TEXT */)
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["value"]))
+                : createCommentVNode("v-if", true)
+            ], 64 /* STABLE_FRAGMENT */))
+          }), 128 /* KEYED_FRAGMENT */))
+        ]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["modelValue"])
+    ]),
+    _: 1 /* STABLE */
+  }))
+}
+}
+
+};
+const MobileLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-e69b9875"]]);
+
+export { MobileLayout as default };