@ulu/frontend-vue 0.1.0-beta.16 → 0.1.0-beta.18

package/lib/components/elements/UluCard.vue

@@ -54,7 +54,7 @@
         </component>
         <slot name="body"/>
       </div>
-      <div class="card__aside" v-if="$slots.body">
+      <div class="card__aside" v-if="$slots.aside">
         <slot name="aside"/>
       </div>
     </div>

package/lib/components/systems/facets/_facets.scss

@@ -54,9 +54,8 @@ $config: (
   $prefix: selector.class("facets");
 
   #{ $prefix }__body {
-        .FacetView__body {
-        display: flex
-;
+    .FacetView__body {
+      display: flex;
     }
   }
 }

package/lib/components/systems/index.js

@@ -5,17 +5,21 @@ export { default as UluFacetsSearch } from './facets/UluFacetsSearch.vue';
 export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayout.vue';
 export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
+
 export { default as UluScrollAnchors } from './scroll-anchors/UluScrollAnchors.vue';
 export { default as UluScrollAnchorsNav } from './scroll-anchors/UluScrollAnchorsNav.vue';
 export { default as UluScrollAnchorsNavAnimated } from './scroll-anchors/UluScrollAnchorsNavAnimated.vue';
 export { default as UluScrollAnchorsSection } from './scroll-anchors/UluScrollAnchorsSection.vue';
+
 export { default as UluShowSkeleton } from './skeleton/UluShowSkeleton.vue';
 export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue';
 export { default as UluSkeletonMedia } from './skeleton/UluSkeletonMedia.vue';
-export { default as UluSkeletonTextInline } from './skeleton/UluSkeletonTextInline.vue';
+export { default as UluSkeletonText } from './skeleton/UluSkeletonText.vue';
+
 export { default as UluImageSlideShow } from './slider/UluImageSlideShow.vue';
 export { default as UluSlideShow } from './slider/UluSlideShow.vue';
 export { default as UluSlideShowSlide } from './slider/UluSlideShowSlide.vue';
+
 export { default as UluTableSticky } from './table-sticky/UluTableSticky.vue';
 export { default as UluTableStickyRows } from './table-sticky/UluTableStickyRows.vue';
 export { default as UluTableStickyTable } from './table-sticky/UluTableStickyTable.vue';

package/lib/components/systems/skeleton/UluShowSkeleton.vue

@@ -1,13 +1,14 @@
 <template>
   <slot v-if="!when"/>
-  <SkeletonTextInline class="skeleton" v-else/>
+  <UluSkeletonText v-else inline/>
 </template>
 
-<script>
-  export default {
-    name: "ShowSkeleton",
-    props: {
-      when: Boolean,
-    },
-  };
+<script setup>
+  import UluSkeletonText from "./UluSkeletonText.vue";
+  defineProps({
+    /**
+     * If true will show whatever is passed to slot, else skeleton text
+     */
+    when: Boolean,
+  });
 </script>

package/lib/components/systems/skeleton/UluSkeletonContent.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="skeleton">
+  <div>
     <div v-for="(line, index) in linesWithSegments" :key="index">
       <span 
         v-for="segment in line"
         :key="segment"
-        class="skeleton__text skeleton__text--inline"
-        :class="{ 'skeleton__alt' : segment.alt }"
+        class="skeleton skeleton--text skeleton--inline"
+        :class="{ 'skeleton--background-alt' : segment.alt }"
         :style="{ width: `${ segment.width }%` }"
       > 
       </span>
@@ -13,48 +13,44 @@
   </div>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import { randomInt } from "@ulu/utils/random.js";
   import { arrayCreate } from "@ulu/utils/array.js";
-  export default {
-    name: "SkeletonContent",
-    props: {
-      lines: {
-        type: Number,
-        default: 6
-      },
-    },
-    methods: {
-      randomInt
+
+  const props = defineProps({
+    /**
+     * Amount of lines to generate
+     */
+    lines: {
+      type: Number,
+      default: 6
     },
-    computed: {
-      /**
-       * Creates the segments (like words) for the given line count
-       * - Uses random number of segments and makes sure to fill the line between 70% - 100%
-       */
-      linesWithSegments() {
-        return arrayCreate(this.lines, () => {
-          const minWidth = 15;
-          const total = randomInt(70, 100);
-          let widthCurrent = 0;
-          const newWidth = () => {
-            const remaining = total - widthCurrent;
-            const width = randomInt(minWidth, remaining);
-            widthCurrent += width;
-            return width;
-          };
-          const segments = [];
-          while (widthCurrent < total - minWidth) {
-            segments.push(newWidth());
-          }
-          const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
-          while (getActualTotal() >= total) {
-            let removed = segments.pop();
-            if (!removed) break;
-          }
-          return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
-        });
-      }
+  });
+
+  /**
+   * Creates the segments (like words) for the given line count
+   * - Uses random number of segments and makes sure to fill the line between 70% - 100%
+   */
+  const linesWithSegments = computed(() => arrayCreate(props.lines, () => {
+    const minWidth = 15;
+    const total = randomInt(70, 100);
+    let widthCurrent = 0;
+    const newWidth = () => {
+      const remaining = total - widthCurrent;
+      const width = randomInt(minWidth, remaining);
+      widthCurrent += width;
+      return width;
+    };
+    const segments = [];
+    while (widthCurrent < total - minWidth) {
+      segments.push(newWidth());
+    }
+    const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
+    while (getActualTotal() >= total) {
+      let removed = segments.pop();
+      if (!removed) break;
     }
-  };
+    return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
+  }));
 </script>

package/lib/components/systems/skeleton/UluSkeletonMedia.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="skeleton__block skeleton__block--media layout-flex-center-all">
-    <FaIcon style="font-size: 2rem" icon="image"/>
+  <div class="skeleton skeleton-block--media">
+    <UluIcon icon="type:image"/>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SkeletonMedia",
-  };
+<script setup>
+  import UluIcon from "../../elements/UluIcon.vue";
 </script>

package/lib/components/systems/skeleton/UluSkeletonText.vue

@@ -0,0 +1,27 @@
+<template>
+  <span 
+    class="skeleton skeleton--text"
+    :class="{
+      'skeleton--inline' : inline,
+      'skeleton--background-alt' : alt,
+      [`skeleton--width-${ width }`] : width
+    }"
+  ></span>
+</template>
+
+<script setup>
+  defineProps({
+    /**
+     * Inline modifier
+     */
+    inline: Boolean,
+    /**
+     * Use alternate background color
+     */
+    alt: Boolean,
+    /**
+     * Optional size (width) - should correspond with width setup in scss component
+     */
+    width: String
+  });
+</script>

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

@@ -21,7 +21,8 @@ const defaults = {
     resizeVertical: "fas fa-grip-lines",
     resizeBoth: "fas fa-grip",
     ellipsis: "fas fa-ellipsis",
-    pathSeparator: "fas fa-chevron-right"
+    pathSeparator: "fas fa-chevron-right",
+    image: "fas fa-image"
   }
 };
 

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.16",
+  "version": "0.1.0-beta.18",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -35,7 +35,8 @@
     "docs:build": "storybook build -o docs",
     "build": "vite build",
     "types": "npx tsc",
-    "deploy": "npm run types && npm run build && npm run docs:build"
+    "deploy": "npm run types && npm run build && npm run docs:build",
+    "update-contexts": "rm -rf .contexts && mkdir -p .contexts/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .contexts/frontend/"
   },
   "keywords": [
     "vue",
@@ -56,7 +57,7 @@
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.94",
+    "@ulu/frontend": "^0.1.0-beta.100",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
@@ -78,7 +79,7 @@
     "@storybook/addon-links": "^9.1.1",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.94",
+    "@ulu/frontend": "^0.1.0-beta.100",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",
     "react": "^19.1.1",

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":"AA6BA,mEAyDC;AA3DD,gCAA0D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AA8BA,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/components/systems/skeleton/UluSkeletonTextInline.vue

@@ -1,9 +0,0 @@
-<template>
-  <span class="skeleton__text skeleton__text--inline"></span>
-</template>
-
-<script>
-  export default {
-    name: "SkeletonTextInline",
-  };
-</script>

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>"
-}