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

package/lib/components/visualizations/UluAnimateNumber.vue

@@ -2,37 +2,30 @@
   <span><slot :currentValue="currentValue">{{ currentValue }}</slot></span>
 </template>
 
-<script>
+<script setup>
+  import { ref, watch, reactive } from "vue";
   import gsap from "gsap";
 
-  /**
-   * Animates a number from a previous value to a new value.
-   * @slot default - The default slot for customizing the display of the number.
-   * @binding {number} currentValue - The current animated value.
-   */
-  export default {
-    name: 'AnimateNumber',
-    props: {
-      /**
-       * The target number to animate to.
-       */
-      value: Number
-    },
-    watch: {
-      value() {
-        gsap.to(this, {
-          tweenValue: this.value,
-          onUpdate: () => {
-            this.currentValue = Math.ceil(this.tweenValue);
-          },
-        });
+  const props = defineProps({
+    /**
+     * The target number to animate to.
+     */
+    value: Number
+  });
+
+  const currentValue = ref(props.value);
+  
+  // Need an object for GSAP to animate its properties
+  const animationState = reactive({
+    tweenValue: props.value
+  });
+
+  watch(() => props.value, (newValue) => {
+    gsap.to(animationState, {
+      tweenValue: newValue,
+      onUpdate: () => {
+        currentValue.value = Math.ceil(animationState.tweenValue);
       },
-    },
-    data() {
-      return {
-        currentValue: this.value,
-        tweenValue: this.value,
-      };
-    },
-  }
+    });
+  });
 </script>

package/lib/composables/useModifiers.js

@@ -24,37 +24,32 @@ import { normalizeClasses } from "@ulu/utils/templating.js";
  * <div :class="[resolvedModifiers, 'other-class']"></div>
  * </template>
  *
- * <script>
+ * <script setup>
  * import { computed, ref } from 'vue';
  * import { useModifiers } from './composables/useModifiers.js'; // Adjust path
  *
- * export default {
- *   props: {
- *     variant: String, // e.g., 'primary', 'secondary'
- *     isActive: Boolean,
- *     modifiers: [String, Array, Object] // User-passed modifiers
- *   },
- *   setup(props) {
- *     const isHovered = ref(false);
- *
- *     // Define component-internal modifiers based on props or local state
- *     const internalModifiers = computed(() => ({
- *       [props.variant]: !!props.variant, // Add 'primary' or 'secondary' if prop exists
- *       'active': props.isActive, // Add 'active' if isActive prop is true
- *       'hovered': isHovered.value, // Add 'hovered' if local state is true
- *       'default': !props.variant && !props.isActive // Add 'default' if no variant/active
- *     }));
+ * const props = defineProps({
+ *   variant: String, // e.g., 'primary', 'secondary'
+ *   isActive: Boolean,
+ *   modifiers: [String, Array, Object] // User-passed modifiers
+ * });
+ * 
+ * const isHovered = ref(false);
  *
- *     // Use the composable to get the combined modifier classes
- *     const { resolvedModifiers } = useModifiers({
- *       props: props, // Pass component props for 'modifiers' prop
- *       baseClass: 'button', // The BEM block name
- *       internal: internalModifiers // The computed internal modifiers
- *     });
+ * // Define component-internal modifiers based on props or local state
+ * const internalModifiers = computed(() => ({
+ *   [props.variant]: !!props.variant, // Add 'primary' or 'secondary' if prop exists
+ *   'active': props.isActive, // Add 'active' if isActive prop is true
+ *   'hovered': isHovered.value, // Add 'hovered' if local state is true
+ *   'default': !props.variant && !props.isActive // Add 'default' if no variant/active
+ * }));
  *
- *     return { resolvedModifiers, isHovered };
- *   }
- * };
+ * // Use the composable to get the combined modifier classes
+ * const { resolvedModifiers } = useModifiers({
+ *   props: props, // Pass component props for 'modifiers' prop
+ *   baseClass: 'button', // The BEM block name
+ *   internal: internalModifiers // The computed internal modifiers
+ * });
  * </script>
  *
  * // Resulting class examples for 'my-component':

package/lib/plugins/modals/UluModalsDisplay.vue

@@ -9,51 +9,50 @@
   />
 </template>
 
-<script>
-  export default {
-    name: "UluModalsDisplay",
-    emits: [
-      "modal-unmount",
-      "modal-mount"
-    ],
-    data() {
-      return {
-        open: false
-      };
-    },
-    computed: {
-      currentModal() {
-        return this.$uluModalsState.data?.active;
-      },
-      currentProps() {
-        return this.$uluModalsState.data?.activeProps;
-      }
-    },
-    watch: {
-      // Watch for changes in the global state (e.g., when $uluModals.open() is called)
-      currentModal(newValue) {
-        if (newValue) {
-          this.open = true;
-        } else {
-          this.open = false;
-        }
-      },
-      // Watch for changes in the local state (e.g., when the modal emits 'update:modelValue')
-      open(newValue) {
-        if (!newValue && this.currentModal) {
-          this.$uluModals.close();
-        }
-      }
-    },
-    methods: {
-      modalMounted() {
-        this.$emit("modal-mount", { modal: this.currentModal });
-      },
-      modalUnmounted() {
-        this.$nextTick(() => {
-          this.$emit("modal-unmount");
-        });
-      }
+<script setup>
+  import { ref, computed, watch, nextTick, inject } from "vue";
+  import { modalsState } from "./api.js";
+
+  const emit = defineEmits([
+    "modal-unmount",
+    "modal-mount"
+  ]);
+
+  const uluModals = inject("uluModals");
+
+  const open = ref(false);
+
+  const currentModal = computed(() => {
+    return modalsState.data?.active;
+  });
+
+  const currentProps = computed(() => {
+    return modalsState.data?.activeProps;
+  });
+
+  // Watch for changes in the global state (e.g., when $uluModals.open() is called)
+  watch(currentModal, (newValue) => {
+    if (newValue) {
+      open.value = true;
+    } else {
+      open.value = false;
     }
+  });
+
+  // Watch for changes in the local state (e.g., when the modal emits 'update:modelValue')
+  watch(open, (newValue) => {
+    if (!newValue && currentModal.value) {
+      uluModals?.close();
+    }
+  });
+
+  const modalMounted = () => {
+    emit("modal-mount", { modal: currentModal.value });
+  };
+
+  const modalUnmounted = () => {
+    nextTick(() => {
+      emit("modal-unmount");
+    });
   };
 </script>

package/lib/plugins/toast/UluToast.vue

@@ -48,40 +48,34 @@
   </div>
 </template>
 
-<script>
+<script setup>
+  import { nextTick } from "vue";
   import UluIcon from "../../components/elements/UluIcon.vue";
-  export default {
-    name: 'UluToast',
-    components: {
-      UluIcon
-    },
-    props: {
-      /**
-       * Toast configuration
-       */
-      toast: Object,
-      /**
-       * Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }
-       */
-      classes: {
-        type: Object,
-        default: () => ({
-          content: "type-small",
-          date: "type-small-x",
-          actions: "type-small-x",
-          action: "button button--small button--outline",
-          closeButton: "button button--icon button--transparent"
-        })
-      }
-    },
-    methods: {
-      handleAction(event, action) {
-        const { toast } = this;
-        this.toast.close();
-        this.$nextTick(() => {
-          action(event, toast, action);
-        });
-      }
+
+  const props = defineProps({
+    /**
+     * Toast configuration
+     */
+    toast: Object,
+    /**
+     * Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        content: "type-small",
+        date: "type-small-x",
+        actions: "type-small-x",
+        action: "button button--small button--outline",
+        closeButton: "button button--icon button--transparent"
+      })
     }
-  }
+  });
+
+  const handleAction = (event, action) => {
+    props.toast.close();
+    nextTick(() => {
+      action(event, props.toast, action);
+    });
+  };
 </script>

package/lib/plugins/toast/UluToastDisplay.vue

@@ -16,22 +16,16 @@
   </Teleport>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import { store } from "./store.js";
-  export default {
-    name: 'UluTooltipDisplay',
-    data() {
-      const { toasts, pluginOptions } = store;
-      return { toasts, pluginOptions };
-    },
-    computed: {
-      classes() {
-        const { position } = this.pluginOptions;
-        const positionClasses = position.map(p => `toast-container--${ p }`);
-        return positionClasses;
-      }
-    }
-  }
+  
+  const { toasts, pluginOptions } = store;
+
+  const classes = computed(() => {
+    const { position } = pluginOptions;
+    return position.map(p => `toast-container--${ p }`);
+  });
 </script>
 
 <style lang="css">

package/lib/utils/props.js

@@ -0,0 +1,8 @@
+/**
+ * Ensures the array consists of objects
+ * @param {Array} array Array to check 
+ * @returns {Boolean} Whether all are objects within
+ */
+export function isArrayOfObjects(array) {
+  return array.every(item => typeof item === "object");
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.2.0-beta.8",
-  "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
+  "version": "0.3.0",
+  "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [
     "dist",
@@ -43,9 +43,13 @@
     "components",
     "component-library",
     "design-system",
+    "tree-shakeable",
     "ulu",
     "frontend",
-    "scss"
+    "scss",
+    "sass",
+    "theme",
+    "utilities"
   ],
   "author": "Joseph Scherben <jscherbe@gmail.com>",
   "license": "MIT",
@@ -61,7 +65,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@headlessui/vue": "^1.7.23",
     "@portabletext/vue": "^1.0.14",
-    "@ulu/frontend": "^0.2.0-beta.11",
+    "@ulu/frontend": "^0.3.0",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "fuse.js": "^6.6.2",
@@ -83,7 +87,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.2.0-beta.11",
+    "@ulu/frontend": "^0.3.3",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",

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

@@ -1,130 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    images: ArrayConstructor;
-    selectButton: BooleanConstructor;
-}>, {}, {}, {}, {
-    /**
-     * 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 }: {
-        slide: any;
-        nav: any;
-    }): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    images: ArrayConstructor;
-    selectButton: BooleanConstructor;
-}>> & Readonly<{}>, {
-    selectButton: boolean;
-}, {}, {
-    UluSlideShow: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        slideFocusable: BooleanConstructor;
-        focusOptions: {
-            type: ObjectConstructor;
-            default: () => {
-                preventScroll: boolean;
-                focusVisible: boolean;
-            };
-        };
-        items: ArrayConstructor;
-        noNav: BooleanConstructor;
-        scrollBehaviorNav: {
-            type: StringConstructor;
-            default: string;
-        };
-        scrollBehaviorControl: {
-            type: StringConstructor;
-            default: string;
-        };
-        observerOptions: {
-            type: ObjectConstructor;
-            default: () => {
-                threshhold: number;
-                rootMargin: string;
-            };
-        };
-        initialActive: {
-            type: NumberConstructor;
-            default: number;
-        };
-        scrollAmount: (FunctionConstructor | NumberConstructor)[];
-    }>, {}, {
-        slides: any;
-    }, {
-        canScrollRight(): boolean;
-        canScrollLeft(): boolean;
-    }, {
-        createSlides(): {
-            element: null;
-            active: boolean;
-            item: unknown;
-        }[];
-        getSlideByElement(el: any): any;
-        getScrollData(): {
-            scrollLeft: any;
-            offsetWidth: any;
-            scrollWidth: any;
-        };
-        resolveAmount(dir: any): any;
-        scrollTo(left: any, behavior: any): void;
-        to(index: number): void;
-        next(): void;
-        previous(): void;
-        createObserver(): void;
-        observeSlides(): void;
-        destroyObserver(): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "slide-change"[], "slide-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        slideFocusable: BooleanConstructor;
-        focusOptions: {
-            type: ObjectConstructor;
-            default: () => {
-                preventScroll: boolean;
-                focusVisible: boolean;
-            };
-        };
-        items: ArrayConstructor;
-        noNav: BooleanConstructor;
-        scrollBehaviorNav: {
-            type: StringConstructor;
-            default: string;
-        };
-        scrollBehaviorControl: {
-            type: StringConstructor;
-            default: string;
-        };
-        observerOptions: {
-            type: ObjectConstructor;
-            default: () => {
-                threshhold: number;
-                rootMargin: string;
-            };
-        };
-        initialActive: {
-            type: NumberConstructor;
-            default: number;
-        };
-        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>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=UluImageSlideShow.vue.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"UluImageSlideShow.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/slider/UluImageSlideShow.vue"],"names":[],"mappings":"AA2BA;;;;;IA4FM;;;;;OAKG"}

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

@@ -1,73 +0,0 @@
-import _ from "./UluSlideShow.vue.js";
-import { resolveComponent as h, createBlock as u, openBlock as g, withCtx as a, createElementVNode as r, createCommentVNode as p, createTextVNode as S } from "vue";
-import w from "../../../_virtual/_plugin-vue_export-helper.js";
-const B = {
-  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: m, nav: o }) {
-      const { active: s, navElement: n } = m;
-      if (!n) return;
-      const { offsetWidth: d, scrollLeft: t } = o, { offsetLeft: l, offsetWidth: c } = n, e = t + d, f = l + c;
-      let i = null;
-      console.log("left/right", t, e), s && n && (f > e ? i = t + (f - e) : l < t && (i = l), i !== null && o.scrollTo({ left: i, top: 0, behavior: "smooth" }));
-    }
-  }
-}, v = ["src", "alt"], C = { class: "slideshow__image-actions" }, x = ["src", "alt"];
-function U(m, o, s, n, d, t) {
-  const l = h("AppButton"), c = h("UluSlideShow");
-  return g(), u(c, {
-    class: "slideshow--images",
-    items: s.images,
-    onSlideChange: t.slideChange
-  }, {
-    slide: a(({ item: e }) => [
-      r("img", {
-        src: e.src,
-        alt: e.alt
-      }, null, 8, v),
-      r("div", C, [
-        s.selectButton ? (g(), u(l, {
-          key: 0,
-          class: "type-small",
-          icon: "plus",
-          small: "",
-          iconBefore: ""
-        }, {
-          default: a(() => [...o[0] || (o[0] = [
-            S(" Select ", -1)
-          ])]),
-          _: 1
-        })) : p("", !0)
-      ])
-    ]),
-    nav: a(({ index: e }) => [
-      r("img", {
-        src: s.images[e].src,
-        alt: `View image ${e}`
-      }, null, 8, x)
-    ]),
-    _: 1
-  }, 8, ["items", "onSlideChange"]);
-}
-const A = /* @__PURE__ */ w(B, [["render", U]]);
-export {
-  A as default
-};