@ulu/frontend-vue 0.1.0-beta.4 → 0.1.0-beta.6

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

@@ -17,53 +17,48 @@
 </template>
 
 <script setup>
-  import { ref, defineAsyncComponent, markRaw, watchEffect, computed } from "vue";
+  import { ref, defineAsyncComponent, markRaw, watchEffect, computed, inject } from "vue";
   import { useIcon } from "../../composables/useIcon.js";
-  import { getSetting, getIconByType } from "../../settings.js"; 
 
+  const uluCore = inject('uluCore');
   const faIconComponent = ref(null);
   const { getIconProps, getClassesFromDefinition } = useIcon();
 
   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(() => {
-    return getSetting("fontAwesomeStatic");
+    return uluCore.getSetting("fontAwesomeStatic");
   });
 
   const customIconComponent = computed(() => {
-    return getSetting("iconComponent");
+    return uluCore.getSetting("iconComponent");
   });
 
   const iconPropResolver = computed(() => {
-    return getSetting("iconPropResolver");
+    return uluCore.getSetting("iconPropResolver");
   });
 
   // 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 getIconByType(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/index.js

@@ -28,7 +28,6 @@ export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
 export { default as UluTag } from './elements/UluTag.vue';
 export { default as UluCheckboxMenu } from './forms/UluCheckboxMenu.vue';
 export { default as UluFileDisplay } from './forms/UluFileDisplay.vue';
-export { default as UluFormDropzone } from './forms/UluFormDropzone.vue';
 export { default as UluFormFile } from './forms/UluFormFile.vue';
 export { default as UluFormMessage } from './forms/UluFormMessage.vue';
 export { default as UluFormSelect } from './forms/UluFormSelect.vue';

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/index.js

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

package/lib/plugins/core/index.js

@@ -0,0 +1,87 @@
+/**
+ * @module plugins/core/index.js
+ * @description Core plugin for managing shared configuration for the library.
+ */
+import { reactive } from 'vue';
+
+const defaults = {
+  fontAwesomeStatic: false,
+  iconComponent: null,
+  iconPropResolver: (definition) => ({ icon: definition }),
+  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"
+  }
+};
+
+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 { iconsByType: iconOverrides, ...otherOptions } = userSettings || {};
+
+  // Merge any user-provided options during installation
+  if (otherOptions) {
+    Object.assign(settings, otherOptions);
+  }
+
+  const api = {
+    // Methods to interact with settings
+    getSettings() {
+      return settings;
+    },
+    getDefaultSettings() {
+      return { ...defaults };
+    },
+    updateSettings(changes) {
+      return Object.assign(settings, changes);
+    },
+    getSetting(key) {
+      if (!settings.hasOwnProperty(key)) {
+        console.warn(`Attempted to access non-existent setting: ${key}`);
+        return;
+      }
+      return settings[key];
+    },
+    updateSetting(key, value) {
+      if (typeof key !== "string") {
+        throw new Error("Expected key to be string");
+      }
+      settings[key] = value;
+    },
+    getIcon(type) {
+      const icons = settings.iconsByType;
+      if (!icons[type]) {
+        throw new Error(`Icon type "${type}" not found!`);
+      }
+      return icons[type];
+    },
+    setIcon(type, definition) {
+      settings.iconsByType[type] = definition;
+    }
+  };
+
+  // Apply any individual icon overrides passed during installation
+  if (iconOverrides) {
+    for (const [type, definition] of Object.entries(iconOverrides)) {
+      api.setIcon(type, definition);
+    }
+  }
+
+  app.provide('uluCore', api);
+  app.config.globalProperties.$uluCore = api;
+}

package/lib/plugins/index.js

@@ -5,6 +5,7 @@
  */
 
 
+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';

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,9 +1,9 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.4",
-  "description": "Frontend theming library (Vue)",
+  "version": "0.1.0-beta.6",
+  "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
-  "files" : [
+  "files": [
     "lib",
     "dist"
   ],
@@ -18,17 +18,35 @@
     "./*": "./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": [],
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "component-library",
+    "design-system",
+    "ulu",
+    "frontend",
+    "scss"
+  ],
   "author": "Joseph Scherben <jscherbe@gmail.com>",
   "license": "MIT",
   "bugs": {
@@ -49,7 +67,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
     "@ulu/utils": "^0.0.30",
-    "lodash-es" : "^4.17.21"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -68,9 +86,11 @@
     "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/lib/components/forms/UluFormDropzone.vue

@@ -1,62 +0,0 @@
-<!-- Based on https://react-dropzone.js.org/#section-basic-example -->
-<template>
-  <div 
-    class="site-dropzone site-form__item site-form__item--file"
-    :class="{ 'is-danger' : fileErrors.length }"
-  >
-    <div 
-      class="site-dropzone__target" 
-      :class="{
-        'site-dropzone__target--dropping' : isDragActive
-      }"
-      v-bind="getRootProps()"
-    >
-      <input v-bind="getInputProps()" />
-      <div class="site-dropzone__instructions">
-        <strong class="type-normal">
-          Drag 'n' drop files here, or click to select
-        </strong>
-      </div>
-    </div>
-    <p class="site-form__description">
-      <em>Only images allowed (.jpg, .png)</em>
-    </p>
-    <div v-if="fileErrors.length" class="site-dropzone__errors site-form__description site-form__error">
-      <ul class="list-unordered">
-        <li v-for="(fileErr, index) in fileErrors" :key="index">
-          <strong>{{ fileErr.file.name }}</strong>:
-          <span>{{ fileErr.errors.map(e => e.message).join() }}</span>
-        </li>
-      </ul>
-    </div>
-    <div class="site-dropzone__display margin-top" v-if="files.length">
-      <strong>Files</strong>
-      <FilesDisplay class="site-dropzone__list" :files="files"/>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import { ref } from "vue";
-  import { useDropzone } from "vue3-dropzone";
-
-  const files = ref([]);
-  const fileErrors = ref([]);
-
-  const $emit = defineEmits(["filesChange"]);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
-    onDrop: (acceptFiles, rejectReasons) => {
-      if (rejectReasons) {
-        fileErrors.value = rejectReasons.map(err => err);
-      } else {
-        fileErrors.value = [];
-      }
-      if (acceptFiles.length) {
-        files.value = acceptFiles.map(file => file);
-        $emit("filesChange", files.value);
-      }
-    },
-    accept: [".png", ".jpg", ".jpeg"]
-  });
-</script>

package/lib/settings.js

@@ -1,119 +0,0 @@
-/**
- * @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];
-}