@eodash/eodash 5.0.0-alpha.2.19 → 5.0.0-alpha.2.20

package/dist/client/VImg-DB_1xaqP.js

@@ -0,0 +1,384 @@
+import { createVNode, computed, toRef, shallowRef, ref, watch, onBeforeMount, nextTick, onBeforeUnmount, withDirectives, mergeProps, Fragment, resolveDirective, vShow } from 'vue';
+import { aw as SUPPORTS_INTERSECTION, p as propsFactory, b as makeComponentProps, J as makeDimensionProps, g as genericComponent, K as useDimension, a as useRender, N as makeRoundedProps, C as useBackgroundColor, Q as useRounded, ax as getCurrentInstance, q as convertToUnit } from './asWebComponent-CIm1IGNl.js';
+import { m as makeTransitionProps, M as MaybeTransition } from './transition-DKGepKqs.js';
+
+// Utilities
+function mounted(el, binding) {
+  if (!SUPPORTS_INTERSECTION) return;
+  const modifiers = binding.modifiers || {};
+  const value = binding.value;
+  const {
+    handler,
+    options
+  } = typeof value === 'object' ? value : {
+    handler: value,
+    options: {}
+  };
+  const observer = new IntersectionObserver(function () {
+    let entries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let observer = arguments.length > 1 ? arguments[1] : undefined;
+    const _observe = el._observe?.[binding.instance.$.uid];
+    if (!_observe) return; // Just in case, should never fire
+
+    const isIntersecting = entries.some(entry => entry.isIntersecting);
+
+    // If is not quiet or has already been
+    // initted, invoke the user callback
+    if (handler && (!modifiers.quiet || _observe.init) && (!modifiers.once || isIntersecting || _observe.init)) {
+      handler(isIntersecting, entries, observer);
+    }
+    if (isIntersecting && modifiers.once) unmounted(el, binding);else _observe.init = true;
+  }, options);
+  el._observe = Object(el._observe);
+  el._observe[binding.instance.$.uid] = {
+    init: false,
+    observer
+  };
+  observer.observe(el);
+}
+function unmounted(el, binding) {
+  const observe = el._observe?.[binding.instance.$.uid];
+  if (!observe) return;
+  observe.observer.unobserve(el);
+  delete el._observe[binding.instance.$.uid];
+}
+const Intersect = {
+  mounted,
+  unmounted
+};
+
+function useAspectStyles(props) {
+  return {
+    aspectStyles: computed(() => {
+      const ratio = Number(props.aspectRatio);
+      return ratio ? {
+        paddingBottom: String(1 / ratio * 100) + '%'
+      } : undefined;
+    })
+  };
+}
+const makeVResponsiveProps = propsFactory({
+  aspectRatio: [String, Number],
+  contentClass: null,
+  inline: Boolean,
+  ...makeComponentProps(),
+  ...makeDimensionProps()
+}, 'VResponsive');
+const VResponsive = genericComponent()({
+  name: 'VResponsive',
+  props: makeVResponsiveProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      aspectStyles
+    } = useAspectStyles(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    useRender(() => createVNode("div", {
+      "class": ['v-responsive', {
+        'v-responsive--inline': props.inline
+      }, props.class],
+      "style": [dimensionStyles.value, props.style]
+    }, [createVNode("div", {
+      "class": "v-responsive__sizer",
+      "style": aspectStyles.value
+    }, null), slots.additional?.(), slots.default && createVNode("div", {
+      "class": ['v-responsive__content', props.contentClass]
+    }, [slots.default()])]));
+    return {};
+  }
+});
+
+// not intended for public use, this is passed in by vuetify-loader
+const makeVImgProps = propsFactory({
+  absolute: Boolean,
+  alt: String,
+  cover: Boolean,
+  color: String,
+  draggable: {
+    type: [Boolean, String],
+    default: undefined
+  },
+  eager: Boolean,
+  gradient: String,
+  lazySrc: String,
+  options: {
+    type: Object,
+    // For more information on types, navigate to:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    default: () => ({
+      root: undefined,
+      rootMargin: undefined,
+      threshold: undefined
+    })
+  },
+  sizes: String,
+  src: {
+    type: [String, Object],
+    default: ''
+  },
+  crossorigin: String,
+  referrerpolicy: String,
+  srcset: String,
+  position: String,
+  ...makeVResponsiveProps(),
+  ...makeComponentProps(),
+  ...makeRoundedProps(),
+  ...makeTransitionProps()
+}, 'VImg');
+const VImg = genericComponent()({
+  name: 'VImg',
+  directives: {
+    intersect: Intersect
+  },
+  props: makeVImgProps(),
+  emits: {
+    loadstart: value => true,
+    load: value => true,
+    error: value => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const vm = getCurrentInstance('VImg');
+    const currentSrc = shallowRef(''); // Set from srcset
+    const image = ref();
+    const state = shallowRef(props.eager ? 'loading' : 'idle');
+    const naturalWidth = shallowRef();
+    const naturalHeight = shallowRef();
+    const normalisedSrc = computed(() => {
+      return props.src && typeof props.src === 'object' ? {
+        src: props.src.src,
+        srcset: props.srcset || props.src.srcset,
+        lazySrc: props.lazySrc || props.src.lazySrc,
+        aspect: Number(props.aspectRatio || props.src.aspect || 0)
+      } : {
+        src: props.src,
+        srcset: props.srcset,
+        lazySrc: props.lazySrc,
+        aspect: Number(props.aspectRatio || 0)
+      };
+    });
+    const aspectRatio = computed(() => {
+      return normalisedSrc.value.aspect || naturalWidth.value / naturalHeight.value || 0;
+    });
+    watch(() => props.src, () => {
+      init(state.value !== 'idle');
+    });
+    watch(aspectRatio, (val, oldVal) => {
+      if (!val && oldVal && image.value) {
+        pollForSize(image.value);
+      }
+    });
+
+    // TODO: getSrc when window width changes
+
+    onBeforeMount(() => init());
+    function init(isIntersecting) {
+      if (props.eager && isIntersecting) return;
+      if (SUPPORTS_INTERSECTION && !isIntersecting && !props.eager) return;
+      state.value = 'loading';
+      if (normalisedSrc.value.lazySrc) {
+        const lazyImg = new Image();
+        lazyImg.src = normalisedSrc.value.lazySrc;
+        pollForSize(lazyImg, null);
+      }
+      if (!normalisedSrc.value.src) return;
+      nextTick(() => {
+        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src);
+        setTimeout(() => {
+          if (vm.isUnmounted) return;
+          if (image.value?.complete) {
+            if (!image.value.naturalWidth) {
+              onError();
+            }
+            if (state.value === 'error') return;
+            if (!aspectRatio.value) pollForSize(image.value, null);
+            if (state.value === 'loading') onLoad();
+          } else {
+            if (!aspectRatio.value) pollForSize(image.value);
+            getSrc();
+          }
+        });
+      });
+    }
+    function onLoad() {
+      if (vm.isUnmounted) return;
+      getSrc();
+      pollForSize(image.value);
+      state.value = 'loaded';
+      emit('load', image.value?.currentSrc || normalisedSrc.value.src);
+    }
+    function onError() {
+      if (vm.isUnmounted) return;
+      state.value = 'error';
+      emit('error', image.value?.currentSrc || normalisedSrc.value.src);
+    }
+    function getSrc() {
+      const img = image.value;
+      if (img) currentSrc.value = img.currentSrc || img.src;
+    }
+    let timer = -1;
+    onBeforeUnmount(() => {
+      clearTimeout(timer);
+    });
+    function pollForSize(img) {
+      let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+      const poll = () => {
+        clearTimeout(timer);
+        if (vm.isUnmounted) return;
+        const {
+          naturalHeight: imgHeight,
+          naturalWidth: imgWidth
+        } = img;
+        if (imgHeight || imgWidth) {
+          naturalWidth.value = imgWidth;
+          naturalHeight.value = imgHeight;
+        } else if (!img.complete && state.value === 'loading' && timeout != null) {
+          timer = window.setTimeout(poll, timeout);
+        } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {
+          naturalWidth.value = 1;
+          naturalHeight.value = 1;
+        }
+      };
+      poll();
+    }
+    const containClasses = computed(() => ({
+      'v-img__img--cover': props.cover,
+      'v-img__img--contain': !props.cover
+    }));
+    const __image = () => {
+      if (!normalisedSrc.value.src || state.value === 'idle') return null;
+      const img = createVNode("img", {
+        "class": ['v-img__img', containClasses.value],
+        "style": {
+          objectPosition: props.position
+        },
+        "src": normalisedSrc.value.src,
+        "srcset": normalisedSrc.value.srcset,
+        "alt": props.alt,
+        "crossorigin": props.crossorigin,
+        "referrerpolicy": props.referrerpolicy,
+        "draggable": props.draggable,
+        "sizes": props.sizes,
+        "ref": image,
+        "onLoad": onLoad,
+        "onError": onError
+      }, null);
+      const sources = slots.sources?.();
+      return createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "appear": true
+      }, {
+        default: () => [withDirectives(sources ? createVNode("picture", {
+          "class": "v-img__picture"
+        }, [sources, img]) : img, [[vShow, state.value === 'loaded']])]
+      });
+    };
+    const __preloadImage = () => createVNode(MaybeTransition, {
+      "transition": props.transition
+    }, {
+      default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createVNode("img", {
+        "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
+        "style": {
+          objectPosition: props.position
+        },
+        "src": normalisedSrc.value.lazySrc,
+        "alt": props.alt,
+        "crossorigin": props.crossorigin,
+        "referrerpolicy": props.referrerpolicy,
+        "draggable": props.draggable
+      }, null)]
+    });
+    const __placeholder = () => {
+      if (!slots.placeholder) return null;
+      return createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "appear": true
+      }, {
+        default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && createVNode("div", {
+          "class": "v-img__placeholder"
+        }, [slots.placeholder()])]
+      });
+    };
+    const __error = () => {
+      if (!slots.error) return null;
+      return createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "appear": true
+      }, {
+        default: () => [state.value === 'error' && createVNode("div", {
+          "class": "v-img__error"
+        }, [slots.error()])]
+      });
+    };
+    const __gradient = () => {
+      if (!props.gradient) return null;
+      return createVNode("div", {
+        "class": "v-img__gradient",
+        "style": {
+          backgroundImage: `linear-gradient(${props.gradient})`
+        }
+      }, null);
+    };
+    const isBooted = shallowRef(false);
+    {
+      const stop = watch(aspectRatio, val => {
+        if (val) {
+          // Doesn't work with nextTick, idk why
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              isBooted.value = true;
+            });
+          });
+          stop();
+        }
+      });
+    }
+    useRender(() => {
+      const responsiveProps = VResponsive.filterProps(props);
+      return withDirectives(createVNode(VResponsive, mergeProps({
+        "class": ['v-img', {
+          'v-img--absolute': props.absolute,
+          'v-img--booting': !isBooted.value
+        }, backgroundColorClasses.value, roundedClasses.value, props.class],
+        "style": [{
+          width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
+        }, backgroundColorStyles.value, props.style]
+      }, responsiveProps, {
+        "aspectRatio": aspectRatio.value,
+        "aria-label": props.alt,
+        "role": props.alt ? 'img' : undefined
+      }), {
+        additional: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
+        default: slots.default
+      }), [[resolveDirective("intersect"), {
+        handler: init,
+        options: props.options
+      }, null, {
+        once: true
+      }]]);
+    });
+    return {
+      currentSrc,
+      image,
+      state,
+      naturalWidth,
+      naturalHeight
+    };
+  }
+});
+
+export { VImg as V };

package/dist/client/VMain-nLmJhfgS.js

@@ -0,0 +1,43 @@
+import { createVNode } from 'vue';
+import { p as propsFactory, b as makeComponentProps, J as makeDimensionProps, c as makeTagProps, g as genericComponent, K as useDimension, H as useLayout, a as useRender } from './asWebComponent-CIm1IGNl.js';
+import { u as useSsrBoot } from './ssrBoot-BP7SYRyC.js';
+
+const makeVMainProps = propsFactory({
+  scrollable: Boolean,
+  ...makeComponentProps(),
+  ...makeDimensionProps(),
+  ...makeTagProps({
+    tag: 'main'
+  })
+}, 'VMain');
+const VMain = genericComponent()({
+  name: 'VMain',
+  props: makeVMainProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      mainStyles
+    } = useLayout();
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
+    useRender(() => createVNode(props.tag, {
+      "class": ['v-main', {
+        'v-main--scrollable': props.scrollable
+      }, props.class],
+      "style": [mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style]
+    }, {
+      default: () => [props.scrollable ? createVNode("div", {
+        "class": "v-main__scroller"
+      }, [slots.default?.()]) : slots.default?.()]
+    }));
+    return {};
+  }
+});
+
+export { VMain as V };