@ulu/frontend-vue 0.5.16 → 0.6.1

package/lib/components/forms/UluSelectableMenu.vue

@@ -32,75 +32,75 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+  import { computed } from 'vue';
 
-const props = defineProps({
-  /**
-   * The legend for the menu.
-   */
-  legend: String,
-  /**
-   * An array of options for the menu.
-   */
-  options: Array,
-  /**
-   * Use compact modifier on menu stack
-   */
-  compact: Boolean,
-  /**
-   * The type of input to use ('checkbox' or 'radio').
-   */
-  type: {
-    type: String,
-    default: 'checkbox',
-  },
-  /**
-   * The value of the menu (for v-model).
-   */
-  modelValue: [String, Array],
-  /**
-   * If true, the input elements will be visually hidden.
-   */
-  hideInputs: Boolean
-});
+  const props = defineProps({
+    /**
+     * The legend for the menu.
+     */
+    legend: String,
+    /**
+     * An array of options for the menu.
+     */
+    options: Array,
+    /**
+     * Use compact modifier on menu stack
+     */
+    compact: Boolean,
+    /**
+     * The type of input to use ('checkbox' or 'radio').
+     */
+    type: {
+      type: String,
+      default: 'checkbox',
+    },
+    /**
+     * The value of the menu (for v-model).
+     */
+    modelValue: [String, Array],
+    /**
+     * If true, the input elements will be visually hidden.
+     */
+    hideInputs: Boolean
+  });
 
-const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(['update:modelValue']);
 
-const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${ Math.random().toString(36).substring(7) }`);
-const legendId = computed(() => name.value ? `${name.value}-legend` : null);
-const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
+  const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${ Math.random().toString(36).substring(7) }`);
+  const legendId = computed(() => name.value ? `${name.value}-legend` : null);
+  const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
 
-const getId = (option) => `${name.value}-${option.uid}`;
+  const getId = (option) => `${name.value}-${option.uid}`;
 
-const isChecked = (option) => {
-  if (props.type === 'radio') {
-    return props.modelValue === option.uid;
-  }
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(option.uid);
-  }
-  if (props.type === 'checkbox') {
-    return option.checked || false;
-  }
-  return false;
-};
-
-const handleChange = (option, event) => {
-  if (props.type === 'radio') {
-    emit('update:modelValue', option.uid);
-  } else {
+  const isChecked = (option) => {
+    if (props.type === 'radio') {
+      return props.modelValue === option.uid;
+    }
     if (Array.isArray(props.modelValue)) {
-      const newValue = [...props.modelValue];
-      const index = newValue.indexOf(option.uid);
-      if (index > -1) {
-        newValue.splice(index, 1);
+      return props.modelValue.includes(option.uid);
+    }
+    if (props.type === 'checkbox') {
+      return option.checked || false;
+    }
+    return false;
+  };
+
+  const handleChange = (option, event) => {
+    if (props.type === 'radio') {
+      emit('update:modelValue', option.uid);
+    } else {
+      if (Array.isArray(props.modelValue)) {
+        const newValue = [...props.modelValue];
+        const index = newValue.indexOf(option.uid);
+        if (index > -1) {
+          newValue.splice(index, 1);
+        } else {
+          newValue.push(option.uid);
+        }
+        emit('update:modelValue', newValue);
       } else {
-        newValue.push(option.uid);
+        option.checked = event.target.checked;
       }
-      emit('update:modelValue', newValue);
-    } else {
-      option.checked = event.target.checked;
     }
-  }
-};
+  };
 </script>

package/lib/components/index.js

@@ -1,3 +1,6 @@
+/**
+ * @module components
+ */
 /**
  * @module components/index.js
  * Responsible for exporting all components
@@ -56,6 +59,7 @@ export { default as UluFormActions } from './forms/UluFormActions.vue';
 export { default as UluFormCheckbox } from './forms/UluFormCheckbox.vue';
 export { default as UluFormFieldset } from './forms/UluFormFieldset.vue';
 export { default as UluFormItem } from './forms/UluFormItem.vue';
+export { default as UluFormLabel } from './forms/UluFormLabel.vue';
 export { default as UluFormItemsInline } from './forms/UluFormItemsInline.vue';
 export { default as UluFormRadio } from './forms/UluFormRadio.vue';
 export { default as UluFormRequiredChar } from './forms/UluFormRequiredChar.vue';

package/lib/components/systems/facets/UluFacetsFilterSelects.vue

@@ -59,9 +59,6 @@ const props = defineProps({
   },
 });
 
-console.log(props);
-
-
 const emit = defineEmits(['facet-change']);
 
 function onFilterChange(group, event) {
@@ -84,15 +81,15 @@ function onFilterChange(group, event) {
 </script>
 
 <style lang="scss">
-.facets-dropdown-filters {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.facets-dropdown-filters__group {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
+  .facets-dropdown-filters {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .facets-dropdown-filters__group {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
 </style>

package/lib/components/systems/facets/useFacets.js

@@ -1,3 +1,6 @@
+/**
+ * @module useFacets
+ */
 import { ref, computed, watch, watchPostEffect } from "vue";
 import Fuse from "fuse.js";
 

package/lib/components/systems/index.js

@@ -1,3 +1,6 @@
+/**
+ * @module systems
+ */
 export { useFacets } from './facets/useFacets.js';
 export { default as UluFacetsActiveFilters } from './facets/UluFacetsActiveFilters.vue';
 export { default as UluFacetsFilterLists } from './facets/UluFacetsFilterLists.vue';

package/lib/components/systems/scroll-anchors/useScrollAnchorSection.js

@@ -1,3 +1,6 @@
+/**
+ * @module useScrollAnchorSection
+ */
 import { ref, onMounted, onUnmounted, inject, computed, reactive, watch } from 'vue';
 import { urlize } from '@ulu/utils/string.js';
 

package/lib/components/systems/scroll-anchors/useScrollAnchorSections.js

@@ -1,3 +1,6 @@
+/**
+ * @module useScrollAnchorSections
+ */
 import { inject } from 'vue';
 
 /**

package/lib/components/systems/scroll-anchors/useScrollAnchors.js

@@ -1,3 +1,6 @@
+/**
+ * @module useScrollAnchors
+ */
 import { onMounted, onUnmounted, nextTick, watch } from "vue";
 import { getScrollParent } from "@ulu/utils/browser/dom.js";
 import { debounce } from "@ulu/utils/performance.js";

package/lib/components/utils/UluAction.vue

@@ -48,7 +48,11 @@
      * Allows passing 'click' as a prop to signify this is an action (used in UluMenu data objects).
      * Note: The actual @click listener should be attached via fallthrough attrs, this is just for logic routing.
      */
-    click: Function
+    click: Function,
+    /**
+     * Button type (e.g. 'submit', 'reset', 'button'). Defaults to 'button' to prevent accidental form submissions.
+     */
+    type: String
   });
 
   const resolvedElement = computed(() => {
@@ -73,7 +77,7 @@
       }
     } else if (!props.element || props.element === "button") {
       // It's a button, ensure it doesn't accidentally submit forms unless requested
-      attrs.type = "button";
+      attrs.type = props.type || "button";
     }
     
     return attrs;

package/lib/composables/useBreakpointManager.js

@@ -1,3 +1,6 @@
+/**
+ * @module useBreakpointManager
+ */
 import { ref, markRaw } from "vue";
 import { isBrowser } from "@ulu/utils/browser/dom.js";
 

package/lib/composables/useDocumentTitle.js

@@ -1,3 +1,6 @@
+/**
+ * @module useDocumentTitle
+ */
 import { reactive, watchEffect, onUnmounted, unref, computed } from "vue";
 import { useHead as defaultUseHead } from "@unhead/vue";
 import { useRoute as defaultUseRoute } from "vue-router";

package/lib/composables/useIcon.js

@@ -1,3 +1,6 @@
+/**
+ * @module useIcon
+ */
 /**
  * A utility composable for handling and formatting icon props for `UluIcon`.
  * It provides helpers to convert various icon definition formats into either

package/lib/composables/useModifiers.js

@@ -1,5 +1,7 @@
 /**
- * @module composables/useModifiers
+ * @module useModifiers
+ */
+/**
  * Handles user modifiers prop and internal modifiers for a given component
  */
 

package/lib/composables/usePagination.js

@@ -1,3 +1,6 @@
+/**
+ * @module usePagination
+ */
 import { computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 

package/lib/composables/useRequiredInject.js

@@ -1,3 +1,6 @@
+/**
+ * @module useRequiredInject
+ */
 import { inject } from 'vue';
 import { injectRegistry } from "../meta.js";
 

package/lib/composables/useTableData.js

@@ -1,3 +1,6 @@
+/**
+ * @module useTableData
+ */
 import { ref, computed, watch } from 'vue';
 
 /**

package/lib/composables/useUluFloating.js

@@ -1,3 +1,6 @@
+/**
+ * @module useUluFloating
+ */
 import { ref, computed, watch } from "vue";
 import { 
   useFloating,

package/lib/composables/useWindowResize.js

@@ -1,3 +1,6 @@
+/**
+ * @module useWindowResize
+ */
 /**
  * Reusable window resize
  * - Future could have request animation frame throttled onResize

package/lib/index.js

@@ -1,5 +1,5 @@
 /**
- * @module index.js
+ * @module index
  * - Main library entrypoint
  * - Exports everything
  */

package/lib/meta.js

@@ -1,5 +1,5 @@
 /**
- * @module lib/meta
+ * @module meta
  * @description A central lookup for meta like info in the system
  */
 

package/lib/plugins/breakpoints/index.js

@@ -1,3 +1,6 @@
+/**
+ * @module breakpointsPlugin
+ */
 import { ref, computed } from "vue";
 import { useBreakpointManager } from "../../composables/useBreakpointManager.js";
 

package/lib/plugins/core/index.js

@@ -1,7 +1,8 @@
 /**
- * @module plugins/core/index.js
+ * @module corePlugin
  * @description Core plugin for managing shared configuration for the library.
  */
+
 import { reactive } from 'vue';
 
 const defaults = {
@@ -27,7 +28,8 @@ const defaults = {
     file: "fas fa-file",
     previous: "fas fa-chevron-left",
     next: "fas fa-chevron-right",
-    dropdownExpand: "fas fa-caret-down"
+    dropdownExpand: "fas fa-caret-down",
+    search: "fas fa-search"
   }
 };
 

package/lib/plugins/index.js

@@ -1,5 +1,5 @@
 /**
- * @module plugins/index.js
+ * @module plugins
  * Responsible for exporting all plugins
  * - Used in bundle exports
  */

package/lib/plugins/modals/api.js

@@ -1,3 +1,6 @@
+/**
+ * @module modals.api
+ */
 import { ref, markRaw } from "vue";
 
 // Create array to be used internally to manage individual modals

package/lib/plugins/modals/index.js

@@ -1,7 +1,6 @@
 /**
- * @module plugins/modals/index.js
- * @version 3.0.0
- * Modals plugin (adds components, global registry, etc)
+ * @module modalsPlugin
+ * @description Modals plugin (adds components, global registry, etc)
  * - Updated version handles both independent and global registered/triggered modals
  */
 

package/lib/plugins/modals/useModals.js

@@ -1,3 +1,6 @@
+/**
+ * @module useModals
+ */
 import { inject } from 'vue';
 
 /**

package/lib/plugins/popovers/defaults.js

@@ -1,3 +1,6 @@
+/**
+ * @module popovers.defaults
+ */
 export default {
   /**
    * Default Plugin Options

package/lib/plugins/popovers/index.js

@@ -1,3 +1,6 @@
+/**
+ * @module popoversPlugin
+ */
 import { reactive, markRaw } from 'vue';
 import UluTooltipDisplay from './UluTooltipDisplay.vue';
 import UluPopover from "./UluPopover.vue";

package/lib/plugins/popovers/useTooltip.js

@@ -1,3 +1,6 @@
+/**
+ * @module useTooltip
+ */
 import { useRequiredInject } from '../../composables/useRequiredInject.js';
 import { TOOLTIP_STATE_KEY, POPOVER_OPTIONS_KEY, resolveTooltipConfig } from './index.js';
 

package/lib/plugins/popovers/useTooltipFollow.js

@@ -1,3 +1,6 @@
+/**
+ * @module useTooltipFollow
+ */
 import { ref, computed } from "vue";
 import { useRequiredInject } from '../../composables/useRequiredInject.js';
 import { TOOLTIP_STATE_KEY, POPOVER_OPTIONS_KEY } from './index.js';

package/lib/plugins/toast/defaults.js

@@ -1,3 +1,6 @@
+/**
+ * @module toast.defaults
+ */
 import { markRaw } from "vue";
 import ToastComponent from "./UluToast.vue";
 /**

package/lib/plugins/toast/index.js

@@ -1,3 +1,6 @@
+/**
+ * @module toastPlugin
+ */
 import { store, api } from "./store.js";
 import UluToast from "./UluToast.vue";
 import UluToastDisplay from "./UluToastDisplay.vue";

package/lib/plugins/toast/store.js

@@ -1,3 +1,6 @@
+/**
+ * @module toast.store
+ */
 import { reactive } from "vue";
 import defaults from "./defaults.js";
 

package/lib/plugins/toast/useToast.js

@@ -1,3 +1,6 @@
+/**
+ * @module useToast
+ */
 import { inject } from 'vue';
 
 /**

package/lib/resolver.js

@@ -1,3 +1,6 @@
+/**
+ * @module resolver
+ */
 const defaultExcluded = [
   "UluModalsDisplay",
   "UluTooltipDisplay",

package/lib/utils/dom.js

@@ -1,3 +1,6 @@
+/**
+ * @module utils.dom
+ */
 /**
  * Resolves a Vue template ref's unwrapped value to its underlying DOM element
  *

package/lib/utils/index.js

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

package/lib/utils/props.js

@@ -1,3 +1,6 @@
+/**
+ * @module utils.props
+ */
 /**
  * Ensures the array consists of objects
  * @param {Array} array Array to check 
@@ -5,4 +8,18 @@
  */
 export function isArrayOfObjects(array) {
   return array.every(item => typeof item === "object");
+}
+
+/**
+ * Checks for deprecated props and calls a callback for each match
+ * @param {object} props - The current props object
+ * @param {string[]} deprecatedNames - Array of prop names to check
+ * @param {function} callback - Function called for each match, receiving the prop name
+ */
+export function checkDeprecatedProps(props, deprecatedNames, callback) {
+  deprecatedNames.forEach(name => {
+    if (props[name] !== undefined) {
+      callback(name);
+    }
+  });
 }

package/lib/utils/router.js

@@ -1,8 +1,8 @@
 /**
- * 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
+ * @module utils.router
  */
+/**
+ * This Module Creates Menus from route or router config
 
 /**
  * Resolves a route's title from its meta.
@@ -37,7 +37,7 @@ export function getRouteTitle(route, currentRoute) {
  * @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
+ * @returns {Array<RouteMenuItem>} Array of menu items
  */
 export function createBaseMenu(routes, options) {
   const defaults = {
@@ -97,9 +97,9 @@ export function flattenMenu(menu) {
  * @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 {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
+ * @returns {Array<RouteMenuItem>} Array of menu items
  */
 export function createSectionMenu(routes, sectionPath, options) {
   const defaults = {
@@ -190,7 +190,7 @@ export function isStaticBaseRoute(route) {
 }
 
 /**
- * Function to make normal <a> behave as router links instread of page reload
+ * 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
  */
@@ -246,9 +246,9 @@ function sortByWeight(a, b) {
  * @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 {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
+ * @returns {Array<RouteMenuItem>} Array of menu items
  */
 export function $createSectionMenu(route, options) {
   const defaults = {
@@ -273,7 +273,7 @@ export function $createSectionMenu(route, options) {
  * - Skips routes where `meta.breadcrumb` is set to `false`.
  * - Avoids duplicate crumbs for nested routes with empty paths.
  * @param {Object} route The Vue Router `$route` object.
- * @returns {Array.<{title: String, to: Object, current: Boolean}>} An array of breadcrumb items.
+ * @returns {Array<Object>} An array of breadcrumb items with title, to, and current properties.
  */
 export function $createBreadcrumb(route) {
   const { matched, path: currentPath } = route;

package/lib/vite.js

@@ -1,3 +1,6 @@
+/**
+ * @module vite
+ */
 /**
  * Vite/Vue plugin utility to automatically transform asset URLs for UluImage components.
  *