@ulu/frontend-vue 0.2.0-beta.9 → 0.3.0

package/dist/components/systems/slider/UluSlideShow.vue.d.ts

@@ -1,205 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /**
-     * Should slides be focusable by tab key
-     */
-    slideFocusable: BooleanConstructor;
-    /**
-     * Setting for element.focus() when navigating to() a specific slide
-     */
-    focusOptions: {
-        type: ObjectConstructor;
-        default: () => {
-            preventScroll: boolean;
-            focusVisible: boolean;
-        };
-    };
-    /**
-     * Array of slide items (data)
-     * - Use slot (#slide) to template
-     */
-    items: ArrayConstructor;
-    /**
-     * Slideshow without a nav
-     */
-    noNav: BooleanConstructor;
-    /**
-     * Allow user to change the scroll behavior when a slide is navigated to()
-     */
-    scrollBehaviorNav: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Allow user to change the scroll behavior when a slide is navigated via next/prev
-     */
-    scrollBehaviorControl: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Observe
-     */
-    observerOptions: {
-        type: ObjectConstructor;
-        default: () => {
-            threshhold: number;
-            rootMargin: string;
-        };
-    };
-    /**
-     * The intial slide index to use for active slide (zero based)
-     */
-    initialActive: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * Allow user to control scroll amount (element.scrollTo) for prev/next controls
-     * - For future scroll implementations (like ulu scroll-slider for cards, etc)
-     * - Function is passed (direction, DomRefs)
-     * - Number is passed directly
-     */
-    scrollAmount: (FunctionConstructor | NumberConstructor)[];
-}>, {}, {
-    slides: any;
-}, {
-    canScrollRight(): boolean;
-    canScrollLeft(): boolean;
-}, {
-    /**
-     * Creates the internal array of slides based on user's passed items
-     */
-    createSlides(): {
-        element: null;
-        active: boolean;
-        item: unknown;
-    }[];
-    /**
-     * Find the corresponding slide data by slide element
-     */
-    getSlideByElement(el: any): any;
-    /**
-     * Provides scroll measurements
-     */
-    getScrollData(): {
-        scrollLeft: any;
-        offsetWidth: any;
-        scrollWidth: any;
-    };
-    /**
-     * Determines the amount to scroll the track
-     */
-    resolveAmount(dir: any): any;
-    /**
-     * Scroll the track to a specified point
-     */
-    scrollTo(left: any, behavior: any): void;
-    /**
-     * Scroll to specific index
-     * @param {Number} index Slide index
-     */
-    to(index: number): void;
-    /**
-     * Goto to next slide
-     */
-    next(): void;
-    /**
-     * Goto to previous slide
-     */
-    previous(): void;
-    /**
-     * Sets up a new observer to watch the slides visibility (within track)
-     */
-    createObserver(): void;
-    /**
-     * Add all slide elements as targets in observer
-     */
-    observeSlides(): void;
-    /**
-     * Remove observer and it's internal DOM references (GC)
-     */
-    destroyObserver(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "slide-change"[], "slide-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /**
-     * Should slides be focusable by tab key
-     */
-    slideFocusable: BooleanConstructor;
-    /**
-     * Setting for element.focus() when navigating to() a specific slide
-     */
-    focusOptions: {
-        type: ObjectConstructor;
-        default: () => {
-            preventScroll: boolean;
-            focusVisible: boolean;
-        };
-    };
-    /**
-     * Array of slide items (data)
-     * - Use slot (#slide) to template
-     */
-    items: ArrayConstructor;
-    /**
-     * Slideshow without a nav
-     */
-    noNav: BooleanConstructor;
-    /**
-     * Allow user to change the scroll behavior when a slide is navigated to()
-     */
-    scrollBehaviorNav: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Allow user to change the scroll behavior when a slide is navigated via next/prev
-     */
-    scrollBehaviorControl: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Observe
-     */
-    observerOptions: {
-        type: ObjectConstructor;
-        default: () => {
-            threshhold: number;
-            rootMargin: string;
-        };
-    };
-    /**
-     * The intial slide index to use for active slide (zero based)
-     */
-    initialActive: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * Allow user to control scroll amount (element.scrollTo) for prev/next controls
-     * - For future scroll implementations (like ulu scroll-slider for cards, etc)
-     * - Function is passed (direction, DomRefs)
-     * - Number is passed directly
-     */
-    scrollAmount: (FunctionConstructor | NumberConstructor)[];
-}>> & Readonly<{
-    "onSlide-change"?: ((...args: any[]) => any) | undefined;
-}>, {
-    observerOptions: Record<string, any>;
-    slideFocusable: boolean;
-    noNav: boolean;
-    focusOptions: Record<string, any>;
-    scrollBehaviorNav: string;
-    scrollBehaviorControl: string;
-    initialActive: number;
-}, {}, {
-    UluIcon: import('vue').DefineComponent<{}, {
-        spaced: boolean;
-        icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-        $props: {
-            readonly spaced?: boolean | undefined;
-            readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-        };
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=UluSlideShow.vue.d.ts.map

package/dist/components/systems/slider/UluSlideShow.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UluSlideShow.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/slider/UluSlideShow.vue"],"names":[],"mappings":"AAiGA;;IAyVM;;OAEG;;IAEH;;OAEG;;;;;;;;IAQH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;;;;IAQH;;OAEG;;;;;IAKH;;;;;OAKG;;;;;;;;IA2BH;;OAEG;;;;;;IAQH;;OAEG;;IAIH;;OAEG;;;;;;IAKH;;OAEG;;IAgBH;;OAEG;;IAIH;;;OAGG;;IAcH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAsBH;;OAEG;;IAUH;;OAEG;;;IA1MH;;OAEG;;IAEH;;OAEG;;;;;;;;IAQH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;;;;IAQH;;OAEG;;;;;IAKH;;;;;OAKG"}

package/dist/components/systems/slider/UluSlideShow.vue.js

@@ -1,292 +0,0 @@
-import p from "../../elements/UluIcon.vue.js";
-import { resolveComponent as S, createElementBlock as a, openBlock as d, createElementVNode as r, createCommentVNode as w, Fragment as v, renderList as f, normalizeClass as _, renderSlot as m, createVNode as b, toDisplayString as g } from "vue";
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = {
-  name: "SlideShow",
-  emits: ["slide-change"],
-  components: {
-    UluIcon: p
-  },
-  props: {
-    /**
-     * Should slides be focusable by tab key
-     */
-    slideFocusable: Boolean,
-    /**
-     * Setting for element.focus() when navigating to() a specific slide
-     */
-    focusOptions: {
-      type: Object,
-      default: () => ({
-        preventScroll: !0,
-        focusVisible: !1
-      })
-    },
-    /**
-     * Array of slide items (data)
-     * - Use slot (#slide) to template
-     */
-    items: Array,
-    /**
-     * Slideshow without a nav
-     */
-    noNav: Boolean,
-    /**
-     * Allow user to change the scroll behavior when a slide is navigated to()
-     */
-    scrollBehaviorNav: {
-      type: String,
-      default: "instant"
-    },
-    /**
-     * Allow user to change the scroll behavior when a slide is navigated via next/prev
-     */
-    scrollBehaviorControl: {
-      type: String,
-      default: "smooth"
-    },
-    /**
-     * Observe 
-     */
-    observerOptions: {
-      type: Object,
-      default: () => ({
-        threshhold: 0,
-        rootMargin: "-50% 0px"
-      })
-    },
-    /**
-     * The intial slide index to use for active slide (zero based)
-     */
-    initialActive: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Allow user to control scroll amount (element.scrollTo) for prev/next controls
-     * - For future scroll implementations (like ulu scroll-slider for cards, etc)
-     * - Function is passed (direction, DomRefs)
-     * - Number is passed directly
-     */
-    scrollAmount: [Number, Function]
-  },
-  data() {
-    return {
-      slides: this.createSlides()
-    };
-  },
-  computed: {
-    canScrollRight() {
-      const { slides: e } = this;
-      return !e[e.length - 1].active;
-    },
-    canScrollLeft() {
-      const { slides: e } = this;
-      return !e[0].active;
-    }
-  },
-  watch: {
-    "items.length"() {
-      this.slides = this.createSlides(), this.$nextTick(() => {
-        this.observeSlides();
-      });
-    }
-  },
-  methods: {
-    /**
-     * Creates the internal array of slides based on user's passed items
-     */
-    createSlides() {
-      return this.items.map((e) => ({
-        element: null,
-        active: !1,
-        item: e
-      }));
-    },
-    /**
-     * Find the corresponding slide data by slide element
-     */
-    getSlideByElement(e) {
-      return this.slides.find(({ element: t }) => e === t);
-    },
-    /**
-     * Provides scroll measurements
-     */
-    getScrollData() {
-      const { scrollLeft: e, offsetWidth: t, scrollWidth: s } = this.$refs.track;
-      return { scrollLeft: e, offsetWidth: t, scrollWidth: s };
-    },
-    /**
-     * Determines the amount to scroll the track
-     */
-    resolveAmount(e) {
-      const t = e === "next", { scrollAmount: s } = this, { scrollLeft: n, offsetWidth: l } = this.getScrollData();
-      return typeof s == "function" ? s(e, this.$refs) : typeof s == "number" ? t ? n + s : n - s : t ? n + l : n - l;
-    },
-    /**
-     * Scroll the track to a specified point 
-     */
-    scrollTo(e, t) {
-      this.$refs.track.scrollTo({ left: e, top: 0, behavior: t });
-    },
-    /**
-     * Scroll to specific index
-     * @param {Number} index Slide index
-     */
-    to(e) {
-      const t = this.slides[e], { track: s } = this.$refs;
-      if (t) {
-        let n = t.element.offsetLeft;
-        const l = () => {
-          t.element.focus(this.focusOptions), s.removeEventListener("scrollend", l);
-        };
-        s.addEventListener("scrollend", l), this.scrollTo(n, this.scrollBehaviorNav);
-      }
-    },
-    /**
-     * Goto to next slide
-     */
-    next() {
-      const e = this.resolveAmount("next");
-      this.scrollTo(e, this.scrollBehaviorControl);
-    },
-    /**
-     * Goto to previous slide
-     */
-    previous() {
-      const e = this.resolveAmount("previous");
-      this.scrollTo(e, this.scrollBehaviorControl);
-    },
-    /**
-     * Sets up a new observer to watch the slides visibility (within track)
-     */
-    createObserver() {
-      const { observerOptions: e } = this, { track: t, nav: s } = this.$refs, n = (l) => {
-        l.forEach((i) => {
-          this.$nextTick(() => {
-            const h = this.getSlideByElement(i.target);
-            h.active = i.isIntersecting, this.$emit("slide-change", { slide: h, track: t, nav: s });
-          });
-        });
-      };
-      this.observer = new IntersectionObserver(n, {
-        root: t,
-        ...e
-      });
-    },
-    /**
-     * Add all slide elements as targets in observer
-     */
-    observeSlides() {
-      const { observer: e, slides: t } = this;
-      e.disconnect(), t.forEach(({ element: s }) => {
-        s && e.observe(s);
-      });
-    },
-    /**
-     * Remove observer and it's internal DOM references (GC)
-     */
-    destroyObserver() {
-      this.observer.disconnect(), this.observer = null;
-    }
-  },
-  mounted() {
-    this.createObserver(), this.observeSlides();
-  },
-  beforeUnmount() {
-    this.destroyObserver();
-  }
-}, x = { class: "slideshow" }, O = {
-  class: "slideshow__control-context",
-  ref: "context"
-}, B = {
-  class: "slideshow__track-crop",
-  ref: "crop"
-}, C = {
-  class: "slideshow__track",
-  ref: "track"
-}, N = ["tabindex"], E = { class: "slideshow__controls" }, L = { class: "slideshow__controls-item slideshow__controls-item--previous" }, A = ["disabled"], T = { class: "slideshow__controls-item slideshow__controls-item--next" }, I = ["disabled"], U = {
-  key: 0,
-  class: "slideshow__nav",
-  ref: "nav"
-}, $ = ["onClick"], F = { class: "hidden-visually" };
-function V(e, t, s, n, l, i) {
-  const h = S("UluIcon");
-  return d(), a("div", x, [
-    r("div", O, [
-      r("div", B, [
-        r("ul", C, [
-          (d(!0), a(v, null, f(l.slides, (o, c) => (d(), a("li", {
-            class: _(["slideshow__slide", { "is-active": o.active }]),
-            key: c,
-            tabindex: s.slideFocusable ? "0" : "-1",
-            ref_for: !0,
-            ref: (u) => {
-              o.element = u;
-            }
-          }, [
-            m(e.$slots, "slide", {
-              item: o.item,
-              index: c
-            })
-          ], 10, N))), 128))
-        ], 512)
-      ], 512),
-      r("ul", E, [
-        r("li", L, [
-          r("button", {
-            class: "slideshow__control-button slideshow__control-button--previous",
-            "aria-label": "Scroll Right",
-            onClick: t[0] || (t[0] = (...o) => i.previous && i.previous(...o)),
-            disabled: !i.canScrollLeft
-          }, [
-            b(h, {
-              class: "slideshow__control-icon",
-              icon: "type:previous"
-            })
-          ], 8, A)
-        ]),
-        r("li", T, [
-          r("button", {
-            class: "slideshow__control-button slideshow__control-button--next",
-            "aria-label": "Scroll Left",
-            onClick: t[1] || (t[1] = (...o) => i.next && i.next(...o)),
-            disabled: !i.canScrollRight
-          }, [
-            b(h, {
-              class: "slideshow__control-icon",
-              icon: "type:next"
-            })
-          ], 8, I)
-        ])
-      ])
-    ], 512),
-    s.noNav ? w("", !0) : (d(), a("ul", U, [
-      (d(!0), a(v, null, f(l.slides, (o, c) => (d(), a("li", {
-        class: _(["slideshow__nav-item", { "is-active": o.active }]),
-        ref_for: !0,
-        ref: (u) => {
-          o.navElement = u;
-        },
-        key: c
-      }, [
-        r("button", {
-          class: _(["slideshow__nav-button", { "is-active": o.active }]),
-          onClick: (u) => i.to(c)
-        }, [
-          m(e.$slots, "nav", {
-            item: o.item,
-            index: c,
-            active: o.active
-          }, () => [
-            r("span", F, "Item " + g(c + 1), 1)
-          ])
-        ], 10, $)
-      ], 2))), 128))
-    ], 512))
-  ]);
-}
-const j = /* @__PURE__ */ k(y, [["render", V]]);
-export {
-  j as default
-};

package/dist/components/systems/slider/UluSlideShowSlide.vue.d.ts

@@ -1,17 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /**
-     * Provided by grandparent, not user
-     */
-    active: BooleanConstructor;
-    someClassTest: StringConstructor;
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /**
-     * Provided by grandparent, not user
-     */
-    active: BooleanConstructor;
-    someClassTest: StringConstructor;
-}>> & Readonly<{}>, {
-    active: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=UluSlideShowSlide.vue.d.ts.map

package/dist/components/systems/slider/UluSlideShowSlide.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UluSlideShowSlide.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/slider/UluSlideShowSlide.vue"],"names":[],"mappings":"AASA;;IA6BM;;OAEG;;;;IAFH;;OAEG"}

package/dist/components/systems/slider/UluSlideShowSlide.vue.js

@@ -1,26 +0,0 @@
-import { createElementBlock as s, openBlock as t, normalizeClass as l, renderSlot as i } from "vue";
-import n from "../../../_virtual/_plugin-vue_export-helper.js";
-const r = {
-  name: "SlideShowSlide",
-  props: {
-    /**
-     * Provided by grandparent, not user
-     */
-    active: Boolean,
-    someClassTest: String
-  },
-  mounted() {
-    console.log("slide mounted");
-  }
-};
-function a(e, c, o, d, m, p) {
-  return t(), s("li", {
-    class: l(["slideshow__slide", { "is-active": o.active }])
-  }, [
-    i(e.$slots, "default")
-  ], 2);
-}
-const u = /* @__PURE__ */ n(r, [["render", a]]);
-export {
-  u as default
-};

package/lib/components/systems/slider/UluImageSlideShow.vue

@@ -1,75 +0,0 @@
-<!-- 
-  Note: This is the image implementation of SlideShow 
-  Notes:
-    - Should the images resize to fit the nav?
-    - Should the nav slide based on the active index?
-
--->
-<template>
-  <UluSlideShow 
-    class="slideshow--images" 
-    :items="images"
-    @slide-change="slideChange"
-  >
-    <template #slide="{ item }">
-      <img :src="item.src" :alt="item.alt">
-      <!-- Adding this in here for now, not generic meant for selection in compare ui -->
-      <div class="slideshow__image-actions">
-        <AppButton v-if="selectButton" class="type-small" icon="plus" small iconBefore>
-          Select
-        </AppButton>
-      </div>
-    </template>
-    <template #nav="{ index }">
-      <img :src="images[index].src" :alt="`View image ${ index }`">
-    </template>
-  </UluSlideShow>
-</template>
-
-<script>
-  import UluSlideShow from "./UluSlideShow.vue";
-  export default {
-    name: 'ImageSlideShow',
-    components: {
-      UluSlideShow,
-    },
-    props: {
-      images: Array,
-      selectButton: Boolean
-    },
-    watch: {
-      images() {
-        console.log('watch image from outer');
-      }
-    },
-    methods: {
-      /**
-       * Test to see if the active slide's nav button (thumbnail) is in view
-       * if not, scroll the nav to ensure it is visible. This function will take 
-       * into account which side of the overflow nav the item is hidden in and will 
-       * scroll either to fit it to the flush end (if overflow to the right) or flush start
-       */
-      slideChange({ slide, nav }) {
-        const { active, navElement } = slide;
-        if (!navElement) return;
-        const { offsetWidth, scrollLeft: left } = nav;
-        const { offsetLeft, offsetWidth: navWidth } = navElement;
-        const right = left + offsetWidth;
-        const navRight = offsetLeft + navWidth;
-        let amount = null;
-        console.log('left/right', left, right);
-        if (active && navElement) {
-          
-          if (navRight > right) {
-            amount = left + (navRight - right);
-          } else if (offsetLeft < left) {
-            amount = offsetLeft;
-          }
-          if (amount !== null) {
-            nav.scrollTo({ left: amount, top: 0, behavior: "smooth" });
-          }
-        }
-      }
-    }
-  }
-</script>