@ulu/frontend-vue 0.1.0-beta.17 → 0.1.0-beta.19

package/lib/components/forms/UluFormMessage.vue

@@ -3,18 +3,15 @@
     'site-form__error' : error,
     'site-form__warning' : warning
   }">
-    <FaIcon v-if="error" :icon="$site.getIcon('error')"/>
-    <FaIcon v-if="warning" :icon="$site.getIcon('warning')"/>
+    <UluIcon v-if="error || warning" :icon="`type:${ error ? 'error' : 'warning' }`" />
     <slot/>
   </p>
 </template>
 
-<script>
-  export default {
-    name: "FormMessage",
-    props: {
-      warning: Boolean,
-      error: Boolean,
-    }
-  };
+<script setup>
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    warning: Boolean,
+    error: Boolean,
+  });
 </script>

package/lib/components/forms/UluFormSelect.vue

@@ -18,20 +18,20 @@
   </div>
 </template>
 
-<script>
-  let count = 0;
-  export default {
-    name: "FormSelect",
-    props: {
-      label: String,
-      modelValue: String,
-      options: Array,
-      labelHidden: Boolean
-    },
-    data() {
-      return {
-        id: `select-id-${ ++count }`
-      };
-    }
-  };
+<script setup>
+  const getNextId = (() => {
+    let count = 0;
+    return () => `select-id-${++count}`;
+  })();
+
+  defineProps({
+    label: String,
+    modelValue: String,
+    options: Array,
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>

package/lib/components/forms/UluFormText.vue

@@ -14,19 +14,19 @@
   </div>
 </template>
 
-<script>
-  let count = 0;
-  export default {
-    name: "FormText",
-    props: {
-      label: String,
-      modelValue: String,
-      labelHidden: Boolean
-    },
-    data() {
-      return {
-        id: `text-input-id-${ ++count }`
-      };
-    }
-  };
+<script setup>
+  const getNextId = (() => {
+    let count = 0;
+    return () => `text-input-id-${++count}`;
+  })();
+
+  defineProps({
+    label: String,
+    modelValue: String,
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>

package/lib/components/forms/UluSearchForm.vue

@@ -13,19 +13,17 @@
       class="search-form__submit button button--primary"
       aria-label="Submit Search"
     >
-      <FaIcon :icon="$site.getIcon('search')"/>
+      <UluIcon icon="type:search" />
     </button>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SearchForm",
-    props: {
-      placeholder: {
-        type: String,
-        default: "Titles, keyword…"
-      }
+<script setup>
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    placeholder: {
+      type: String,
+      default: "Titles, keyword…"
     }
-  };
+  });
 </script>

package/lib/components/navigation/UluMenu.vue

@@ -60,7 +60,7 @@
       /**
        * Fired anytime a item is clicked
        */
-      "itemClick"
+      "item-click"
     ],
     props: {
       /**
@@ -98,7 +98,7 @@
         if (item.click) {
           item.click(event);
         }
-        this.$emit("itemClick", { item, event });
+        this.$emit("item-click", { item, event });
       }
     }
   };

package/lib/components/systems/scroll-anchors/UluScrollAnchors.vue

@@ -10,6 +10,7 @@
   import { SECTIONS, REGISTER, UNREGISTER } from "./symbols.js";
   export default {
     name: "ScrollAnchors",
+    emits: ["section-change"],
     props: {
       firstItemActive: Boolean,
       /**
@@ -97,7 +98,7 @@
                 } else if (lastExiting && section.active) {
                   removeActive();
                 }
-                this.$emit("sectionChange", { 
+                this.$emit("section-change", { 
                   section, 
                   sections, 
                   active: isIntersecting 

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

@@ -9,7 +9,7 @@
   <UluSlideShow 
     class="slideshow--images" 
     :items="images"
-    @slideChange="slideChange"
+    @slide-change="slideChange"
   >
     <template #slide="{ item }">
       <img :src="item.src" :alt="item.alt">

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

@@ -50,7 +50,7 @@
             @click="previous"
             :disabled="!canScrollLeft"
           >
-            <FaIcon class="slideshow__control-icon" icon="fas fa-chevron-left"/>
+            <UluIcon class="slideshow__control-icon" icon="type:next"/>
           </button>
         </li>
         <li class="slideshow__controls-item slideshow__controls-item--next">
@@ -60,7 +60,7 @@
             @click="next"
             :disabled="!canScrollRight"
           >
-            <FaIcon class="slideshow__control-icon" icon="fas fa-chevron-right"/>
+            <UluIcon class="slideshow__control-icon" icon="type:previous" />
           </button>
         </li>
       </ul>
@@ -97,8 +97,13 @@
 </template>
 
 <script>
+  import UluIcon from "../../elements/UluIcon.vue";
   export default {
     name: 'SlideShow',
+    emits: ['slide-change'],
+    components: {
+      UluIcon
+    },
     props: {
       /**
        * Should slides be focusable by tab key
@@ -278,7 +283,7 @@
             this.$nextTick(() => {
               const slide = this.getSlideByElement(entry.target);
               slide.active = entry.isIntersecting;
-              this.$emit('slideChange', { slide, track, nav });
+              this.$emit('slide-change', { slide, track, nav });
             });
           });
         };

package/lib/components/systems/table-sticky/UluTableSticky.vue

@@ -43,7 +43,7 @@
             pointerEvents: sizesCalculated ? 'auto' : 'none',
             width: tableWidth
           }"
-          @columnSorted="applySort"
+          @column-sorted="applySort"
         >
           <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
             <slot :name="name" v-bind="slotData" />
@@ -66,7 +66,7 @@
           opacity: headerOpacityX,
           pointerEvents: headerVisibleX ? 'auto' : 'none'
         }"
-        @columnSorted="applySort"
+        @column-sorted="applySort"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
           <slot :name="name" v-bind="slotData" />
@@ -138,9 +138,9 @@
         :getRowValue="getRowValue"
         :getColumnTitle="getColumnTitle"
         @vue:mounted="tableReady"
-        @actualHeaderRemoved="headerRemoved"
-        @actualHeaderAdded="headerAdded"
-        @columnSorted="applySort"
+        @actual-header-removed="headerRemoved"
+        @actual-header-added="headerAdded"
+        @column-sorted="applySort"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
           <slot :name="name" v-bind="slotData" />
@@ -167,7 +167,7 @@
         opacity: headerOpacityX,
         pointerEvents: headerVisibleX ? 'auto' : 'none'
       }"
-      @columnSorted="applySort"
+      @column-sorted="applySort"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
@@ -443,7 +443,7 @@
         } else {
           column.sortApplied = true;
         }
-        this.$emit("columnSort", column);
+        this.$emit("column-sort", column);
       },
       onColumnResize() {
         if (this.sizesPainted) {

package/lib/components/systems/table-sticky/UluTableStickyTable.vue

@@ -50,7 +50,7 @@
             :class="{ 
               'table-sticky__sort-button--focused' : column.sortFocused,
             }"
-            @click="$emit('columnSorted', column)"
+            @click="$emit('column-sorted', column)"
             @focus="handleSortFocus(column, true)"
             @blur="handleSortFocus(column, false)"
             :aria-pressed="column.sortApplied ? 'true' : 'false'"
@@ -199,9 +199,9 @@
         const { id } = column;
         const old = headerRefs[id];
         if (old) {
-          this.$emit("actualHeaderRemoved", old);
+          this.$emit("actual-header-removed", old);
         }
-        this.$emit("actualHeaderAdded", el);
+        this.$emit("actual-header-added", el);
         headerRefs[id] = el;
       },
       /**

package/lib/index.js

@@ -7,3 +7,4 @@
 export * from './plugins/index.js';
 export * from './components/index.js';
 export * from './composables/index.js';
+export * as utils from './utils/index.js';

package/lib/plugins/core/index.js

@@ -22,7 +22,10 @@ const defaults = {
     resizeBoth: "fas fa-grip",
     ellipsis: "fas fa-ellipsis",
     pathSeparator: "fas fa-chevron-right",
-    image: "fas fa-image"
+    image: "fas fa-image",
+    file: "fas fa-file",
+    next: "fas fa-chevron-left",
+    previous: "fas fa-chevron-right"
   }
 };
 

package/lib/plugins/toast/UluToast.vue

@@ -13,7 +13,7 @@
   >
     <div v-if="toast.icon || $slots.icon" class="toast__icon" :class="classes.icon">
       <slot name="icon" :toast="toast">
-        <FaIcon v-if="toast.icon" :icon="toast.icon"/>
+        <UluIcon v-if="toast.icon" :icon="toast.icon"/>
       </slot>
     </div>
     <div class="toast__content" :class="classes.content">

package/lib/utils/index.js

@@ -0,0 +1,2 @@
+export * as dom from './dom.js';
+export * as router from './router.js';

package/lib/utils/{vue-router.js → router.js}

@@ -1,7 +1,7 @@
 /**
  * This Module Creates Menus from route or router config
  * - Note: Functions prefixed with "$" work with $route objects (running application, provided by vue-router ie $router, useRoute, etc), 
- * @module utils/router-utils
+ * @module router-utils
  */
 
 /**
@@ -21,21 +21,56 @@
  */
 export function createBaseMenu(routes, options) {
   const defaults = {
-    qualifier: isStaticBaseRoute,
+    qualifier(route, parentPath) {
+      if (!parentPath) {
+        return isStaticBaseRoute(route);
+      } else {
+        return isStaticRoute(route);
+      }
+    },
     sort: sortByWeight,
-    item: {}
+    item: {},
+    includeChildren: false
   };
   const opts = Object.assign({}, defaults, options);
-  return routes
-    .filter(opts.qualifier)
-    .map(r => {
-      // Need to grab meta from child but use the parent path
-      const menuRoute = r.children ? getChildIndexRoute(r.children) : r;
-      return createMenuItem(menuRoute, r.path, opts.item);
-    })
-    .sort(opts.sort);
+  const getItemPath = (r, parentPath) => parentPath ? `${ parentPath }/${ r.path }` : r.path;
+  const toMenuItems = (currentRoutes, parentPath = null) => {
+    return currentRoutes
+      .filter(r => opts.qualifier(r, parentPath))
+      .map(r => {
+        // Need to grab meta from child but use the parent path
+        const menuRoute = r.children ? getChildIndexRoute(r.children) : r;
+        const children = r.children ? r.children.filter(child => child.path !== "") : false;
+        const item = createMenuItem(menuRoute, getItemPath(r, parentPath), opts.item);
+        if (opts.includeChildren && children.length) {
+          item.children = toMenuItems(children, item.path);
+        }
+        return item;
+      })
+      .sort(opts.sort);
+  };
+  return toMenuItems(routes);
 }
 
+/**
+ * Returns menu flat (no parent children)
+ */
+export function flattenMenu(menu) {
+  function flatten(items) {
+    const result = [];
+    for (const item of items) {
+      const newItem = { ...item };
+      delete newItem.children;
+      result.push(newItem);
+      if (item.children) {
+        result.push(...flatten(item.children));
+      }
+    }
+    return result;
+  }
+  return flatten(menu);
+} 
+
 /**
  * Print out a section's menu based on path
  * @param {*} routes All routes 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.17",
+  "version": "0.1.0-beta.19",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -57,13 +57,13 @@
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.100",
+    "@ulu/frontend": "^0.1.0-beta.102",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
   "optionalDependencies": {
-    "gsap": "^3.13.0",
     "fuse.js": "^6.6.2",
+    "gsap": "^3.13.0",
     "vue3-dropzone": "^2.2.1"
   },
   "dependencies": {
@@ -76,10 +76,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
+    "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.100",
+    "@ulu/frontend": "^0.1.0-beta.102",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",
     "react": "^19.1.1",
@@ -87,12 +87,11 @@
     "sass-embedded": "^1.89.2",
     "storybook": "^9.1.1",
     "storybook-addon-vue-mdx": "^2.0.2",
+    "typescript": "^5.3.3",
     "vite": "^7.0.0",
-    "vue-router": "^4.5.1",
-    "typescript": "^5.3.3"
+    "vue-router": "^4.5.1"
   },
   "volta": {
     "node": "22.17.0"
   }
 }
-

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./plugins/index.js";
 export * from "./components/index.js";
 export * from "./composables/index.js";
+export * as utils from "./utils/index.js";
 //# sourceMappingURL=index.d.ts.map

package/types/plugins/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AA8BA,mEAyDC;AA3DD,gCAA0D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AAiCA,mEAyDC;AA3DD,gCAA0D"}

package/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * as dom from "./dom.js";
+export * as router from "./router.js";
+//# sourceMappingURL=index.d.ts.map

package/types/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.js"],"names":[],"mappings":""}

package/types/utils/router.d.ts

@@ -0,0 +1,126 @@
+/**
+ * This Module Creates Menus from route or router config
+ * - Note: Functions prefixed with "$" work with $route objects (running application, provided by vue-router ie $router, useRoute, etc),
+ * @module router-utils
+ */
+/**
+ * Route Menu Item
+ * @typedef {Object} RouteMenuItem
+ * @property {String} path - Menu item route path
+ * @property {String} title - Menu item title
+ */
+/**
+ * Get root/base static routes as menu items
+ * @param {*} routes Routes to build menu from (not router instance)
+ * @param {Object} options Options
+ * @param {Object} options.qualifier Callback to qualify as a base route (defaults to isStaticBaseRoute)
+ * @param {Object} options.item Options for createMenuItem
+ * @returns {Array.<RouteMenuItem>} Array of menu items
+ */
+export function createBaseMenu(routes: any, options: {
+    qualifier: any;
+    item: any;
+}): Array<RouteMenuItem>;
+/**
+ * Returns menu flat (no parent children)
+ */
+export function flattenMenu(menu: any): any;
+/**
+ * Print out a section's menu based on path
+ * @param {*} routes All routes
+ * @param {*} sectionPath Path for section to create menu
+ * @param {Object} options Options
+ * @param {Boolean} options.includeIndex Include the parent/index in the menu items ie ({ path: "" })
+ * @param {Object} options.item Options to be passed to createMenuItem
+ * @returns {Array.<RouteMenuItem>} Array of menu items
+ */
+export function createSectionMenu(routes: any, sectionPath: any, options: {
+    includeIndex: boolean;
+    item: any;
+}): Array<RouteMenuItem>;
+/**
+ * For a given route this will return the route that renders. For routes without
+ * children this is the route itself for those with children (first child with empty path)
+ * @param {Object} route Route object to resolve
+ * @returns {Object} Resolved route
+ */
+/**
+ * For a given array of child routes return the index
+ * @param {Array} children Children array of routes
+ * @returns {Object} Route
+ */
+export function getChildIndexRoute(children: any[]): any;
+/**
+ * Creates common menu item structure from route, pulls title and weight from meta (on route or index child)
+ * @param {Object} route Route
+ * @param {Object} routePath The final path for the menu item
+ * @param {Object} options Function to allow alterering the menu item (adding meta, etc)
+ * @param {Function} options.modify Function to allow alterering the menu item (adding meta, etc) (args: item, route)
+ * @param {Function} options.indexMeta Include the routes index child's meta (merged on top of route meta)
+ * @returns {RouteMenuItem} Menu item
+ */
+export function createMenuItem(route: any, routePath: any, options: {
+    modify: Function;
+    indexMeta: Function;
+}): RouteMenuItem;
+/**
+ * Test if route is static (doesn't incude parameters)
+ * @param {Object} route Route object to test
+ * @returns {Boolean} Whether or not this route is static (not dynamic)
+ */
+export function isStaticRoute(route: any): boolean;
+/**
+ *
+ * @param {Object} route Route object to test
+ * @returns {Boolean} Whether or not this route is a static base route
+ */
+export function isStaticBaseRoute(route: any): boolean;
+/**
+ * Function to make normal <a> behave as router links instread of page reload
+ * @param {Object} router Router instance (ie src/router) to push routes to
+ * @param {Object} event The event object that triggered route change (ie. onclick) pass event object
+ */
+export function nativeLinkRouter(router: any, event: any): void;
+/**
+ * Returns the child routes for base route
+ * @param {Object} route Route Object
+ * @returns
+ */
+export function $getRouteChildren(route: any, parent?: any): any;
+/**
+ * Returns the route's parent
+ * @param {Object} route Route Object
+ * @param {Object} deepest By default this returns the routes parent, if deepest it will return it's base route (top level parent)
+ * @return {Object|Null} Parent route, if there is no parent route for the given route this will return null
+ */
+export function $getParentRoute(route: any, deepest: any): any | null;
+/**
+ * For a given $route will return all it's children as menu items,
+ * using the route's meta.title property for the title. This is for sections only (routes with children)
+ * - Useful for dynamic menus (menus within some unknown section) where you don't want to write static paths
+ * @param {Object} route Actual $route object
+ * @param {Object} options Options
+ * @param {Object} options.parent Route parent object, defaults to parent of route
+ * @param {Boolean} options.includeIndex Include the parent/index in the menu items ie ({ path: "" })
+ * @param {Object} options.item Options for createMenuItem
+ * @returns {Array.<RouteMenuItem>} Array of menu items
+ */
+export function $createSectionMenu(route: any, options: {
+    parent: any;
+    includeIndex: boolean;
+    item: any;
+}): Array<RouteMenuItem>;
+/**
+ * Route Menu Item
+ */
+export type RouteMenuItem = {
+    /**
+     * - Menu item route path
+     */
+    path: string;
+    /**
+     * - Menu item title
+     */
+    title: string;
+};
+//# sourceMappingURL=router.d.ts.map

package/types/utils/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../lib/utils/router.js"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH;;;;;;;GAOG;AACH,uCANW,GAAC,WAET;IAAwB,SAAS;IACT,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAiCjC;AAED;;GAEG;AACH,4CAcC;AAED;;;;;;;;GAQG;AACH,0CAPW,GAAC,eACD,GAAC,WAET;IAAyB,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CA6BjC;AAED;;;;;GAKG;AASH;;;;GAIG;AACH,yDAEC;AACD;;;;;;;;GAQG;AACH,oEAJG;IAA0B,MAAM;IACN,SAAS;CACnC,GAAU,aAAa,CAsBzB;AACD;;;;GAIG;AACH,mDAEC;AACD;;;;GAIG;AACH,uDAGC;AACD;;;;GAIG;AACH,gEAUC;AACD;;;;GAIG;AACH,iEAEC;AACD;;;;;GAKG;AACH,2DAFY,UAAW,CAUtB;AAUD;;;;;;;;;;GAUG;AACH,wDALG;IAAwB,MAAM;IACL,YAAY;IACb,IAAI;CAC5B,GAAU,KAAK,CAAE,aAAa,CAAC,CAgBjC"}

package/lib/utils/placeholder.js

@@ -1,6 +0,0 @@
-export default {
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.",
-  textSmall: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet.",
-  paragraph: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>",
-  paragraphSmall: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. </p>"
-}