@ulu/frontend-vue 0.1.0-beta.1

package/lib/settings.js

@@ -0,0 +1,119 @@
+/**
+ * @module settings
+ * @description Manages shared configuration for the library.
+ */
+
+import { reactive } from 'vue'; 
+
+/**
+ * Default settings
+ * @typedef {object} Defaults
+ * @property {string} fontAwesomeStatic - Whether the default UluIcon should use fontawesome vue or fontawesome CSS classes (static)
+ */
+
+/**
+ * @type {Defaults}
+ */
+const defaults = {
+  /**
+   * If set UluIcon will use global css classes instead of Font Awesome vue component
+   */
+  fontAwesomeStatic: false,
+  /**
+   * Use a different icon component (if using a library other than Font Awesome)
+   * - Need to have this component map (iconsByType) to it's implementation
+   * - All components internally use type, so only user defined components change definitions
+   *   - So you should only need to create definitions for the default types to replace this for the library
+   */
+  iconComponent: null,
+  /**
+   * Which prop in iconComponent should receive the resolved definition
+   */
+  iconPropResolver: (definition) => ({ icon: definition }),
+  /**
+   * Default icons by type
+   */
+  iconsByType: {
+    danger: "fas fa-triangle-exclamation",
+    warning: "fas fa-circle-exclamation",
+    info: "fas fa-circle-info",
+    success: "fas fa-circle-check",
+    externalLink: "fas fa-arrow-up-right-from-square",
+    close: "fas fa-xmark",
+    expand: "fas fa-plus",
+    collapse: "fas fa-minus",
+    resizeHorizontal: "fas fa-grip-lines-vertical",
+    resizeVertical: "fas fa-grip-lines",
+    resizeBoth: "fas fa-grip",
+    ellipsis: "fas fa-ellipsis",
+    pathSeparator: "fas fa-chevron-right"
+  }
+};
+
+// Current configuration, initialized with defaults and made reactive
+// We wrap `defaults` in `reactive` so `currentSettings` becomes a reactive object.
+let currentSettings = reactive({ ...defaults });
+
+/**
+ * Retrieves a copy of the default settings.
+ * @returns {object} A copy of the default settings object.
+ */
+export function getDefaultSettings() {
+  // Return a non-reactive copy of defaults
+  return { ...defaults };
+}
+
+/**
+ * Updates multiple configuration settings.
+ * @param {object} changes An object containing the settings to update.
+ */
+export function updateSettings(changes) {
+  Object.assign(currentSettings, changes);
+}
+
+/**
+ * Retrieves a copy of the current configuration settings.
+ * @returns {object} A copy of the current settings object (vue reactive object)
+ */
+export function getSettings() {
+  return currentSettings; 
+}
+
+/**
+ * Retrieves a specific configuration setting by key.
+ * @param {string} key The key of the setting to retrieve.
+ * @returns {*} The value of the setting, or undefined if not found.
+ */
+export function getSetting(key) {
+  if (!currentSettings.hasOwnProperty(key)) {
+    console.warn(`Attempted to access non-existent setting: ${key}`);
+    return;
+  }
+  return currentSettings[key];
+}
+
+/**
+ * Updates a specific configuration setting.
+ * @param {string} key The key of the setting to update.
+ * @param {*} value The new value for the setting.
+ */
+export function updateSetting(key, value) {
+  if (typeof key !== "string") {
+    throw new Error("Expected key to be string");
+  }
+  currentSettings[key] = value;
+}
+
+/**
+ * Retrieves the icon definition by type
+ * @param {string} type - The type of icon to retrieve (e.g., 'error', 'info').
+ * @returns {string} The icon definition
+ * @throws {Error} If the specified icon type is not found
+ */
+export function getIconByType(type) {
+  const icons = currentSettings.iconsByType;
+  if (!icons[type]) {
+    throw new Error(`Icon type "${ type }" not found!`);
+  }
+  return icons[type];
+}

package/lib/utils/dom.js

@@ -0,0 +1,14 @@
+/**
+ * Resolves a Vue template ref's unwrapped value to its underlying DOM element
+ *
+ * @param {HTMLElement|Object} value - The unwrapped value from a template ref (e.g., `this.$refs.myElement` or `this.$refs.myComponent`)
+ * @returns {HTMLElement} The HTMLElement or undefined if not found/resolved.
+ */
+export function refToElement(value) {
+  if (!value) return;
+  if (value instanceof HTMLElement) {
+    return value;
+  } else if (typeof value === 'object' && '$el' in value) {
+    return value.$el;
+  }
+}

package/lib/utils/placeholder.js

@@ -0,0 +1,6 @@
+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>"
+}

package/lib/utils/vue-router.js

@@ -0,0 +1,219 @@
+/**
+ * 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
+ */
+
+/**
+ * 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, options) {
+  const defaults = {
+    qualifier: isStaticBaseRoute,
+    sort: sortByWeight,
+    item: {}
+  };
+  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);
+}
+
+/**
+ * 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, sectionPath, options) {
+  const defaults = {
+    includeIndex: false,
+    item: {},
+    sort: sortByWeight
+  };
+  const opts = Object.assign({}, defaults, options);
+  const base = routes.find(r => r.path !== "/" && sectionPath.includes(r.path));
+  // Go through each item and 
+  const getSection = (current, previous, path) => {
+    if (current.children) {
+      const child = current.children.find(c => c.path.includes(sectionPath));
+      if (child) {
+        return getSection(child, current, path + child.path);
+      }
+    }
+    return { route: previous, path };
+  };
+  const { route, path } = getSection(base, base, base.path);
+  if (!route.children) {
+    console.warn("Unable to build menu for:", sectionPath);
+    return [];
+  }
+  return route.children
+    .filter(includeIndex(opts.includeIndex))
+    .map(r => createMenuItem(r, `${ path }/${ r.path }`, opts.item))
+    .sort(opts.sort);
+}
+
+/**
+ * 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
+ */
+// export function resolveRouteIndex(route) {
+//   if (route.children) {
+//     return getChildIndexRoute(route.children);
+//   } else {
+//     return 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) {
+  return children.find(r => r.path === "");
+}
+/**
+ * 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, routePath = route.path, options) {
+  const defaults = {
+    indexMeta: true,
+    modify: null,
+  };
+  const opts = Object.assign({}, defaults, options);
+  let meta = Object.assign({}, route.meta);
+  if (opts.indexMeta && route.children) {
+    meta = Object.assign({}, meta, getChildIndexRoute(route.children)?.meta);
+  }
+  const item = { 
+    path: routePath, 
+    title: meta?.title || "Missing Title",
+    weight: meta?.weight || 0,
+    meta
+  };
+  if (opts.modify) {
+    opts.modify(item, route);
+  }
+  return item;
+}
+/**
+ * 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) {
+  return !route.path.includes("/:");
+}
+/**
+ * 
+ * @param {Object} route Route object to test
+ * @returns {Boolean} Whether or not this route is a static base route
+ */
+export function isStaticBaseRoute(route) {
+  const matches = route.path.match(/\//) || [];
+  return isStaticRoute(route) && matches.length === 1;
+}
+/**
+ * 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, event) {
+  const { target } = event;
+  const link = target.closest("a");
+  if (link) {
+    let href = link.getAttribute("href");
+    if (href.startsWith("/")) {
+      router.push(href);
+      event.preventDefault();
+    }
+  }
+}
+/**
+ * Returns the child routes for base route
+ * @param {Object} route Route Object
+ * @returns 
+ */
+export function $getRouteChildren(route, parent = $getParentRoute(route)) {
+  return parent?.children;
+}
+/**
+ * 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, deepest)  {
+  const length = route.matched.length;
+  const parentIndex = length - 2;
+  if (deepest) {
+    return length > 1 ? route.matched[0] : null;
+  } else {
+    return parentIndex < 0 ? null : route.matched[parentIndex];
+  }
+}
+
+function includeIndex(include) {
+  return r => include || r.path !== "";
+}
+
+function sortByWeight(a, b) {
+  return a?.weight - b?.weight;
+}
+
+/**
+ * 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, options) {
+  const defaults = {
+    parent: null,
+    includeIndex: false,
+    item: {},
+    sort: sortByWeight
+  };
+  const opts = Object.assign({}, defaults, options);
+  const parent = opts.parent || $getParentRoute(route);
+  const children = ($getRouteChildren(route, parent) || []);
+  return children
+    .filter(includeIndex(opts.includeIndex))
+    .map(r => createMenuItem(r, `${ parent.path }/${ r.path }`, opts.item))
+    .sort(opts.sort);
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@ulu/frontend-vue",
+  "version": "0.1.0-beta.1",
+  "description": "Frontend theming library (Vue)",
+  "type": "module",
+  "files" : [
+    "lib",
+    "dist"
+  ],
+  "module": "./lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js"
+    },
+    "./dist": {
+      "import": "./dist/frontend-vue.js"
+    },
+    "./*": "./lib/*",
+    "./scss": "./lib/_index.scss"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Jscherbe/frontend-vue.git"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "docs:build": "storybook build -o docs --docs",
+    "build": "vite build",
+    "deploy": "npm run build && npm run docs:build"
+  },
+  "keywords": [],
+  "author": "Joseph Scherben <jscherbe@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Jscherbe/frontend-vue/issues"
+  },
+  "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
+  "peerDependencies": {
+    "@headlessui/vue": "^1.7.23",
+    "@ulu/frontend": "^0.1.0-beta.94",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
+  },
+  "optionalDependencies": {
+    "gsap": "^3.13.0",
+    "fuse.js": "^6.6.2",
+    "vue3-dropzone": "^2.2.1"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.8",
+    "@ulu/utils": "^0.0.30"
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@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/vue3-vite": "^9.1.1",
+    "@ulu/frontend": "^0.1.0-beta.94",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "ollama": "^0.5.16",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "sass-embedded": "^1.89.2",
+    "storybook": "^9.1.1",
+    "storybook-addon-vue-mdx": "^2.0.2",
+    "vite": "^7.0.0",
+    "vue-router": "^4.5.1"
+  },
+  "volta": {
+    "node": "22.17.0"
+  }
+}