@ulu/frontend-vue 0.1.0-beta.5 → 0.1.0-beta.7

package/lib/components/collapsible/UluAccordion.vue

@@ -23,7 +23,7 @@
         <slot name="icon" :open="open">
           <span class="accordion__icon" :class="classes.icon">
             <UluIcon 
-              :type="open ? 'collapse' : 'expand'"
+              :icon="open ? 'type:collapse' : 'type:expand'"
               style="display: inline;"
             />
           </span>

package/lib/components/collapsible/UluModal.vue

@@ -26,7 +26,7 @@
             <UluIcon 
               v-if="titleIcon" 
               class="modal__title-icon" 
-              :definition="titleIcon" 
+              :icon="titleIcon" 
             />
             <span class="modal__title-text">{{ title }}</span>
           </slot>
@@ -35,8 +35,7 @@
           <slot name="closeIcon">
             <UluIcon 
               class="modal__close-icon" 
-              type="close" 
-              :definition="closeIcon" 
+              :icon="closeIcon || 'type:close'" 
             />
           </slot>
         </button>
@@ -56,7 +55,7 @@
       </div>
       <button v-if="resizerEnabled" class="modal__resizer" ref="resizer" type="button">
         <slot name="resizerIcon">
-          <UluIcon class="modal__resizer-icon" :type="resizerIconType" :definition="resizerIcon" />
+          <UluIcon class="modal__resizer-icon" :icon="resizerIcon || resizerIconType" />
         </slot>
       </button>
     </dialog>
@@ -213,7 +212,7 @@
       });
 
       const resizerIconType = computed(() => {
-        return props.position === 'center' ? 'resizeBoth' : 'resizeHorizontal';
+        return props.position === 'center' ? 'type:resizeBoth' : 'type:resizeHorizontal';
       });
 
       // Define the internal modifiers object as a computed property (so it can react to changes)

package/lib/components/collapsible/UluOverflowPopover.vue

@@ -9,7 +9,7 @@
       size="large"
     >
       <template #trigger>
-        <UluIcon type="ellipsis" :definition="triggerIcon"/>
+        <UluIcon :icon="triggerIcon || 'type:ellipsis'"/>
       </template>
       <template #content>
         <div class="type-word-break">

package/lib/components/elements/UluAlert.vue

@@ -4,8 +4,7 @@
       <UluIcon 
         class="type-large margin-right-small" 
         :class="`color-${ type }`"
-        :type="type"
-        :definition="icon"
+        :icon="icon || `type:${type}`"
       />
       <div class="type-small">
         <div>

package/lib/components/elements/UluButton.vue

@@ -22,7 +22,7 @@
     <slot name="before"/>
     <UluIcon 
       v-if="icon && (iconBefore || iconOnly)"
-      :definition="icon"
+      :icon="icon"
       class="button__icon"
     />
     <span v-if="($slots.default || text) && !iconOnly">
@@ -32,7 +32,7 @@
     </span>
     <UluIcon 
       v-if="icon && (!iconBefore && !iconOnly)"
-      :definition="icon"
+      :icon="icon"
       class="button__icon"
     />
     <slot name="after"/>

package/lib/components/elements/UluExternalLink.vue

@@ -5,8 +5,7 @@
     </span>
     <UluIcon 
       class="external-link__icon margin-left-small-x display-inline"
-      type="externalLink"
-      :definition="icon"
+      :icon="icon || 'type:externalLink'"
     />
   </a>
 </template>

package/lib/components/elements/UluIcon.vue

@@ -27,15 +27,11 @@
   let FaModule;
 
   const props = defineProps({
-    /**
-     * Semantic type of icon to use, will be resolved from settings
-     */
-    type: String,
     /**
      * Icon definition can be string (fa classes), or array or object (any prop format FaIcon accepts)
      * - This will override the 'type' prop if both are provided
      */
-    definition: [String, Array, Object, Boolean],
+    icon: [String, Array, Object, Boolean],
   });
 
   const useStaticFa = computed(() => {
@@ -52,18 +48,17 @@
 
   // Resolve the final icon definition, giving precedence to the `definition` prop
   const resolvedDefinition = computed(() => {
-    if (props.definition) {
-      return props.definition;
-    }
-    if (props.type) {
+    const { icon } = props;
+    if (typeof icon === 'string' && icon.startsWith('type:')) {
       try {
-        return uluCore.getIcon(props.type);
+        const type = icon.substring(5);
+        return uluCore.getIcon(type);
       } catch (e) {
         console.warn(e);
         return null;
       }
     }
-    return null;
+    return icon;
   });
 
   const customIconProps = computed(() => {

package/lib/components/elements/UluTag.vue

@@ -10,7 +10,7 @@
       resolvedModifiers
     ]"
   >
-    <UluIcon v-if="icon" :definition="icon" />
+    <UluIcon v-if="icon" :icon="icon" />
     <slot>
       {{ text }}
     </slot>

package/lib/components/layout/UluTitleRail.vue

@@ -8,10 +8,9 @@
         :style="{ alignItems: iconAlign }"
       >
         <UluIcon 
-          v-if="icon || iconType" 
+          v-if="icon"
           :class="classes.icon"
-          :type="iconType" 
-          :definition="icon"
+          :icon="icon"
         />
         <slot>
           {{ title }}
@@ -38,7 +37,6 @@
         type: String,
         default: "baseline"
       },
-      iconType: String,
       classes: {
         type: Object,
         default: () => ({

package/lib/components/navigation/UluBreadcrumb.vue

@@ -19,8 +19,7 @@
           <slot name="separator">
             <UluIcon
               :class="classes.separator"
-              type="pathSeparator"
-              :definition="separatorIcon"
+              :icon="separatorIcon || 'type:pathSeparator'"
             />
           </slot>
         </template>

package/lib/components/navigation/UluMenu.vue

@@ -26,7 +26,7 @@
         <slot :item="item" :index="index">
           <UluIcon 
             v-if="item.icon" 
-            :definition="item.icon" 
+            :icon="item.icon" 
             :class="[classes.linkIcon, item?.classes?.linkIcon]"
           />
           <span :class="[classes.linkText, item?.classes?.linkText]">{{ item.title }}</span>

package/lib/plugins/core/index.js

@@ -8,7 +8,7 @@ const defaults = {
   fontAwesomeStatic: false,
   iconComponent: null,
   iconPropResolver: (definition) => ({ icon: definition }),
-  icons: {
+  iconsByType: {
     danger: "fas fa-triangle-exclamation",
     warning: "fas fa-circle-exclamation",
     info: "fas fa-circle-info",
@@ -25,14 +25,14 @@ const defaults = {
   }
 };
 
-export const iconKeys = Object.keys(defaults.icons);
+export const iconKeys = Object.keys(defaults.iconsByType);
 
 export default function install(app, userSettings = {}) {
   // A single reactive object for all settings
   const settings = reactive({ ...defaults });
 
   // Separate icon overrides from other options to handle them safely
-  const { icons: iconOverrides, ...otherOptions } = userSettings || {};
+  const { iconsByType: iconOverrides, ...otherOptions } = userSettings || {};
 
   // Merge any user-provided options during installation
   if (otherOptions) {
@@ -64,14 +64,14 @@ export default function install(app, userSettings = {}) {
       settings[key] = value;
     },
     getIcon(type) {
-      const icons = settings.icons;
+      const icons = settings.iconsByType;
       if (!icons[type]) {
         throw new Error(`Icon type "${type}" not found!`);
       }
       return icons[type];
     },
     setIcon(type, definition) {
-      settings.icons[type] = definition;
+      settings.iconsByType[type] = definition;
     }
   };
 

package/lib/plugins/toast/UluToast.vue

@@ -43,7 +43,7 @@
       </button>
     </div>
     <button class="toast__close" :class="classes.closeButton" @click="toast.close">
-      <UluIcon type="close"/>
+      <UluIcon :icon="'type:close'"/>
     </button>
   </div>
 </template>

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.7",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
     "lib",
-    "dist"
+    "dist",
+    "types"
   ],
   "module": "./lib/index.js",
   "exports": {
@@ -18,15 +19,23 @@
     "./*": "./lib/*",
     "./scss": "./lib/_index.scss"
   },
+  "typesVersions": {
+    "*": {
+      "lib/*": [
+        "./types/*"
+      ]
+    }
+  },
   "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",
+    "docs:build": "storybook build -o docs",
     "build": "vite build",
-    "deploy": "npm run build && npm run docs:build"
+    "types": "npx tsc",
+    "deploy": "npm run types && npm run build && npm run docs:build"
   },
   "keywords": [
     "vue",
@@ -78,7 +87,8 @@
     "storybook": "^9.1.1",
     "storybook-addon-vue-mdx": "^2.0.2",
     "vite": "^7.0.0",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "typescript": "^5.3.3"
   },
   "volta": {
     "node": "22.17.0"

package/types/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./systems/index.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/types/components/systems/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/types/components/systems/index.d.ts.map

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

package/types/components/systems/scroll-anchors/symbols.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Symbol for register provide/inject
+ */
+export const REGISTER: any;
+export const UNREGISTER: any;
+export const SECTIONS: any;
+//# sourceMappingURL=symbols.d.ts.map

package/types/components/systems/scroll-anchors/symbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/symbols.js"],"names":[],"mappings":"AAAA;;GAEG;AACH,2BAAiC;AACjC,6BAAmC;AACnC,2BAAiC"}

package/types/composables/index.d.ts

@@ -0,0 +1,5 @@
+export { useIcon } from "./useIcon.js";
+export { useModifiers } from "./useModifiers.js";
+export { useWindowResize } from "./useWindowResize.js";
+export { useBreakpointManager } from "./useBreakpointManager.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/types/composables/useBreakpointManager.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Use the CssBreakpoints module in Vue
+ * - Normally use only once, unless you have different sets of breakpoints
+ * @param {Object} options Configuration options overrides
+ * @return {Object} { manager, active, direction } (all are null in SSR environment until init)
+ */
+export function useBreakpointManager(options: any): any;
+//# sourceMappingURL=useBreakpointManager.d.ts.map

package/types/composables/useBreakpointManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpointManager.d.ts","sourceRoot":"","sources":["../../lib/composables/useBreakpointManager.js"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,wDAyCC"}

package/types/composables/useIcon.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility composable for handling and formatting icon props for UluIcon.
+ * @returns {Object} An object with utility functions { getIconProps, getClassesFromDefinition }
+ */
+export function useIcon(): any;
+//# sourceMappingURL=useIcon.d.ts.map

package/types/composables/useIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIcon.d.ts","sourceRoot":"","sources":["../../lib/composables/useIcon.js"],"names":[],"mappings":"AAAA;;;GAGG;AACH,+BAyDC"}

package/types/composables/useModifiers.d.ts

@@ -0,0 +1,69 @@
+/**
+ * A composable to manage and resolve BEM style modifiers for a component,
+ * combining user-passed modifiers with internally derived conditional modifiers.
+ *
+ * @param {object} options - The options for the composable.
+ * @param {object} options.props - The component's props object. (Must contain a 'modifiers' prop if user-passed modifiers are expected)
+ * @param {string | import('vue').Ref<string>} options.baseClass - The base CSS class name for the component (e.g., 'modal').
+ * Can be a string or a ref to a string.
+ * @param {string | string[] | Object.<string, any> | import('vue').ComputedRef<string | string[] | Object.<string, any>>} [options.internal={}] -
+ * A flexible input for component's internal modifiers. Can be a string, array of strings/objects, or an object mapping modifier names to conditions.
+ * @returns {object} An object containing the computed property `resolvedModifiers`
+ *
+ * @example
+ * // In MyComponent.vue:
+ * <template>
+ * <div :class="[resolvedModifiers, 'other-class']"></div>
+ * </template>
+ *
+ * <script>
+ * 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
+ *     }));
+ *
+ *     // 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
+ *     });
+ *
+ *     return { resolvedModifiers, isHovered };
+ *   }
+ * };
+ * </script>
+ *
+ * // Resulting class examples for 'my-component':
+ * // <MyComponent />                       => class="my-component my-component--default"
+ * // <MyComponent variant="primary" />     => class="my-component my-component--primary"
+ * // <MyComponent isActive />              => class="my-component my-component--active"
+ * // <MyComponent modifiers="condensed" /> => class="my-component my-component--default my-component--condensed"
+ * // <MyComponent variant="secondary" :isActive="true" modifiers="round" />
+ * //   => class="my-component my-component--secondary my-component--active my-component--round"
+ */
+export function useModifiers({ props, baseClass, internal }: {
+    props: object;
+    baseClass: string | import("vue").Ref<string>;
+    internal?: string | string[] | {
+        [x: string]: any;
+    } | import("vue").ComputedRef<string | string[] | {
+        [x: string]: any;
+    }>;
+}): object;
+//# sourceMappingURL=useModifiers.d.ts.map

package/types/composables/useModifiers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModifiers.d.ts","sourceRoot":"","sources":["../../lib/composables/useModifiers.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,6DAtDG;IAAwB,KAAK,EAArB,MAAM;IACsC,SAAS,EAArD,MAAM,GAAG,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;IAEuF,QAAQ,GAAjI,MAAM,GAAG,MAAM,EAAE,GAAG;YAAQ,MAAM,GAAE,GAAG;KAAC,GAAG,OAAO,KAAK,EAAE,WAAW,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG;YAAQ,MAAM,GAAE,GAAG;KAAC,CAAC;CAEtH,GAAU,MAAM,CA0ElB"}

package/types/composables/useWindowResize.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Composable function
+ * @return {Object} Contains reactive 'resizing' and two methods for calling callbacks (onResizeStart, onResizeEnd)
+ */
+export function useWindowResize(): any;
+//# sourceMappingURL=useWindowResize.d.ts.map

package/types/composables/useWindowResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowResize.d.ts","sourceRoot":"","sources":["../../lib/composables/useWindowResize.js"],"names":[],"mappings":"AAiDA;;;GAGG;AACH,uCAUC"}

package/types/index.d.ts

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

package/types/index.d.ts.map

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

package/types/plugins/breakpoints/index.d.ts

@@ -0,0 +1,2 @@
+export default function install(app: any, userOptions: any): void;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export default function install(app: any, userSettings?: {}): void;
+export const iconKeys: string[];
+//# sourceMappingURL=index.d.ts.map

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

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

package/types/plugins/index.d.ts

@@ -0,0 +1,6 @@
+export { default as corePlugin } from "./core/index.js";
+export { default as popoversPlugin } from "./popovers/index.js";
+export { default as modalsPlugin } from "./modals/index.js";
+export { default as toastPlugin } from "./toast/index.js";
+export { default as breakpointsPlugin } from "./breakpoints/index.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/types/plugins/modals/api.d.ts

@@ -0,0 +1,34 @@
+export namespace modalsState {
+    export { data };
+    export { modals };
+}
+export function createApi(resolveModalOptions: any): {
+    open(name: any, props?: any): void;
+    /**
+     * Close the active modal
+     * @param {String|Node} focusTo The element or selector for an element to programmatically focus after modal close
+     * @see https://www.deque.com/blog/accessible-routing-in-javascript-frameworks/
+     */
+    close(): void;
+    /**
+     * Get a modal's config object by name
+     * @return {Object} Modal config object
+     */
+    get(name: any): any;
+    /**
+     * Add a modal config
+     */
+    add(config: any): void;
+    /**
+     * Removes a modal config by name
+     * @return {Object} Modal that was removed
+     */
+    remove(name: any): any;
+};
+/**
+ * Reactive data from state
+ */
+declare const data: any;
+declare const modals: any[];
+export {};
+//# sourceMappingURL=api.d.ts.map

package/types/plugins/modals/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../lib/plugins/modals/api.js"],"names":[],"mappings":";;;;AA6BO;;IAML;;;;OAIG;;IAKH;;;OAGG;;IASH;;OAEG;;IAKH;;;OAGG;;EASH;AAxDF;;GAEG;AACH,wBAAyB;AAnBzB,4BAAkB"}

package/types/plugins/modals/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Modals Vue Plugin
+ * @param {Object} App Vue app instance passed to plugin
+ * @param {UluModalsPluginOptions} userOptions Options to change (see defaults)
+ */
+export default function install(app: any, userOptions: UluModalsPluginOptions): void;
+/**
+ * Default plugin options
+ */
+export type UluModalsPluginOptions = {
+    /**
+     * Name for modals component that displays app-wide modals
+     */
+    componentNameDisplay: string;
+    /**
+     * Name for modal component
+     */
+    componentNameModal: string;
+    /**
+     * Modals configs [{ name, component, props }]
+     */
+    modals: any[];
+    /**
+     * Options to merge into individual modal options (to serve as defaults for each modal, see UluModalOptions)
+     */
+    modalOptions: UluModalOptions;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/modals/index.js"],"names":[],"mappings":"AA0BA;;;;GAIG;AACH,uDAFW,sBAAsB,QA8BhC;;;;;;;;;;;;;;;;;;;;kBA1Ca,eAAe"}

package/types/plugins/modals/useModals.d.ts

@@ -0,0 +1,2 @@
+export function useModals(): any;
+//# sourceMappingURL=useModals.d.ts.map

package/types/plugins/modals/useModals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModals.d.ts","sourceRoot":"","sources":["../../../lib/plugins/modals/useModals.js"],"names":[],"mappings":"AAEO,iCAMN"}

package/types/plugins/popovers/defaults.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    let plugin: any;
+    namespace popover {
+        let inline: boolean;
+        let delay: number;
+        let placement: string;
+        let strategy: string;
+        let offset: number;
+        let arrow: boolean;
+    }
+    let tooltip: any;
+}
+export default _default;
+//# sourceMappingURL=defaults.d.ts.map

package/types/plugins/popovers/defaults.d.ts.map

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

package/types/plugins/popovers/directive.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    function mounted(trigger: any, binding: any): void;
+    function beforeUpdate(trigger: any): void;
+    function updated(trigger: any, binding: any): void;
+    function umounted(trigger: any): void;
+}
+export default _default;
+//# sourceMappingURL=directive.d.ts.map

package/types/plugins/popovers/directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directive.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/directive.js"],"names":[],"mappings":";IAgBE,mDAEC;IACD,0CAEC;IACD,mDAEC;IACD,sCAEC"}

package/types/plugins/popovers/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Install plugin
+ * - Set user options
+ * - Add the global directive for the user to trigger tooltips
+ */
+export default function install(app: any, userOptions?: {}): void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/index.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,kEAOC"}