@ulu/frontend-vue 0.1.0-beta.2 → 0.1.0-beta.21

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/UluBadge.vue

@@ -26,33 +26,32 @@
   </component>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import { RouterLink } from "vue-router";
-  export default {
-    name: "UluBadge",
-    props: {
-      skeleton: Boolean,
-      size: String,
-      text: String,
-      alt: String,
-      type: String,
-      click: Function,
-      to: [Object, String],
-      href: String,
-    },
-    computed: {
-      isInteractive() {
-        return Boolean(this.to || this.click);
-      },
-      element() {
-        const { click, to, href } = this;
-        /* eslint-disable */
-        return  click ? 'button' : 
-                to ? RouterLink : 
-                href ? 'a' : 
-                'span';
-        /* eslint-enable */
-      }
-    }
-  };
+
+  const props = defineProps({
+    skeleton: Boolean,
+    size: String,
+    text: String,
+    alt: String,
+    type: String,
+    click: Function,
+    to: [Object, String],
+    href: String,
+  });
+
+  const isInteractive = computed(() => {
+    return Boolean(props.to || props.click);
+  });
+
+  const element = computed(() => {
+    const { click, to, href } = props;
+    /* eslint-disable */
+    return  click ? "button" : 
+            to ? RouterLink : 
+            href ? "a" : 
+            "span";
+    /* eslint-enable */
+  });
 </script>

package/lib/components/elements/UluBadgeStack.vue

@@ -10,18 +10,13 @@
   </ul>
 </template>
 
-<script>
+<script setup>
   import UluBadge from "./UluBadge.vue";
-  export default {
-    name: 'UluBadgeStack',
-    components: {
-      UluBadge
-    },
-    props: {
-      /**
-       * Array of props for each badge
-       */
-      items: Array
-    }
-  }
+
+  defineProps({
+    /**
+     * Array of props for each badge
+     */
+    items: Array
+  });
 </script>

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/UluButtonVerbose.vue

@@ -0,0 +1,119 @@
+<template>
+  <component
+    :is="element"
+    class="button-verbose"
+    :class="[
+      {
+        'button-verbose--inline': inline,
+        'button-verbose--full-width': fullWidth,
+      },
+      resolvedModifiers
+    ]"
+    v-bind="attrs"
+  >
+    <component 
+      v-if="$slots.title || title" 
+      :is="titleElement"
+      class="button-verbose__title"
+    >
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </component>
+    <span v-if="$slots.default || body" class="button-verbose__body">
+      <slot>
+        {{ body }}
+      </slot>
+    </span>
+    <UluIcon
+      v-if="icon"
+      :icon="icon"
+      class="button-verbose__icon"
+      aria-hidden="true"
+    />
+  </component>
+</template>
+
+<script>
+  import { RouterLink } from "vue-router";
+  import UluIcon from "./UluIcon.vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  export default {
+    name: "UluButtonVerbose",
+    components: {
+      UluIcon
+    },
+    props: {
+      /**
+       * The title of the button. Can also be passed via slot.
+       */
+      title: String,
+      /**
+       * Optional element to use for title
+       */
+      titleElement: {
+        type: String,
+        default: "strong"
+      },
+      /**
+       * The body text of the button. Can also be passed via slot.
+       */
+      body: String,
+      /**
+       * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
+       */
+      icon: [String, Array],
+      /**
+       * If set will use router-link for button component and pass to prop
+       */
+      to: [String, Object],
+      /**
+       * Sets the button to a link with this href
+       */
+      href: String,
+      /**
+       * Set a value for target attribute when button is a link
+       */
+      target: String,
+      /**
+       * Sets the download attribute on the link (passing string [filename] will populate the download attribute, true will just include it as boolean attribute)
+       */
+      download: [Boolean, String],
+      /**
+       * Preset to set inline style
+       */
+      inline: Boolean,
+      /**
+       * Preset to set full-width style
+       */
+      fullWidth: Boolean,
+      /**
+       * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+       */
+      modifiers: [String, Array]
+    },
+    setup(props) {
+      const { resolvedModifiers } = useModifiers({ props, baseClass: "button-verbose" });
+      return { resolvedModifiers };
+    },
+    computed: {
+      element() {
+        return this.to ? RouterLink : this.href ? "a" : "button";
+      },
+      attrs() {
+        const { to, href, download, target } = this;
+        const attrs = to ? { to } : href ? { href } : {};
+        if (href) {
+          if (target) {
+            attrs.target = target;
+          }
+          if (download) {
+            attrs.download = typeof download === "string" ? download : true;
+          }
+        }
+        return attrs;
+      }
+    }
+  };
+</script>

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/elements/UluDefinitionList.vue

@@ -19,22 +19,19 @@
   </dl>
 </template>
 
-<script>
-  export default {
-    name: "UluDefinitionList",
-    props: {
-      /**
-       * Array of term, and description (props in object)
-       * - Can use slots also
-       */
-      items: Array,
-      /**
-       * Classes object for different elements { list, item, term, description }
-       */
-      classes: {
-        type: Object,
-        default: () => ({})
-      }
+<script setup>
+  defineProps({
+    /**
+     * Array of term, and description (props in object)
+     * - Can use slots also
+     */
+    items: Array,
+    /**
+     * Classes object for different elements { list, item, term, description }
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
     }
-  };
+  });
 </script>

package/lib/components/elements/UluExternalLink.vue

@@ -5,43 +5,36 @@
     </span>
     <UluIcon 
       class="external-link__icon margin-left-small-x display-inline"
-      type="externalLink"
-      :definition="icon"
+      :icon="icon || 'type:externalLink'"
     />
   </a>
 </template>
 
-<script>
+<script setup>
   import UluIcon from "./UluIcon.vue";
 
   /**
    * Component for external links (adds icon after link text)
    */
-  export default {
-    name: "UluExternalLink",
-    components: {
-      UluIcon
+  defineProps({
+    /**
+     * Text for link or use slot
+     */
+    text: String,
+    /**
+     * Link href
+     */
+    href: String,
+    /**
+     * Link target
+     */
+    target: {
+      type: String,
+      default: "_blank"
     },
-    props: {
-      /**
-       * Text for link or use slot
-       */
-      text: String,
-      /**
-       * Link href
-       */
-      href: String,
-      /**
-       * Link target
-       */
-      target: {
-        type: String,
-        default: "_blank"
-      },
-      /**
-       * Override default icon
-       */
-      icon: String
-    }
-  };
+    /**
+     * Override default icon
+     */
+    icon: String
+  });
 </script>

package/lib/components/elements/UluIcon.vue

@@ -3,67 +3,68 @@
     v-if="customIconComponent"
     :is="customIconComponent"
     v-bind="customIconProps"
+    :class="commonClasses"
   />
   <component
     v-else-if="!useStaticFa && faIconComponent && resolvedDefinition"
     :is="faIconComponent"
     v-bind="iconProps"
+    :class="commonClasses"
   />
   <span
     v-else-if="useStaticFa && resolvedDefinition"
-    :class="staticIconClasses"
+    :class="[staticIconClasses, commonClasses]"
     aria-hidden="true"
   ></span>
 </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],
+    /**
+     * Whether the icon should use flow inline
+     */
+    spaced: 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(() => {
@@ -81,6 +82,10 @@
     return getClassesFromDefinition(resolvedDefinition.value);
   });
 
+  const commonClasses = computed(() => ({
+    'flow-inline': props.spaced
+  }));
+
   // Watch for changes to prop
   // - Use watchEffect because we are watching reactive object property access (props)
   // - Load FA if needed (so it's not included if it's unneeded)

package/lib/components/elements/UluList.vue

@@ -28,60 +28,58 @@
   </component>
 </template>
 
-<script>
-  export default {
-    name: "UluList",
-    props: {
-      /**
-       * Array of list items, output as is or use slot to template the item
-       */
-      items: Array,
-      /**
-       * Classes object (keys are list and listItem to be applied to <ul> and <li>)
-       * - Any valid class binding for each
-       */
-      classes: {
-        type: Object,
-        default: () => ({})
-      },
-      /**
-       * Use list-ordered class, and sets element to <ol>
-       */
-      ordered: Boolean,
-      /**
-       * Use list-unordered class
-       */
-      unordered: Boolean,
-      /**
-       * Use list-lines class
-       */
-      lines: Boolean,
-      /**
-       * Use list-compact class
-       */
-      compact: Boolean,
-      /**
-       * If setting up custom ordered list this will ensure the correct element type
-       * - Note: 'ordered' prop sets the ordered list class, this does not
-       */
-      forceOrdered: Boolean,
-      /**
-       * Define the start value for <ol>
-       */
-      start: String,
-      /**
-       * Reverse ordered list
-       */
-      reversed: Boolean,
-      /**
-       * Define list style type (ie. disc, decimal, etc)
-       */
-      listStyleType: String,
+<script setup>
+  import { computed } from "vue";
+
+  const props = defineProps({
+    /**
+     * Array of list items, output as is or use slot to template the item
+     */
+    items: Array,
+    /**
+     * Classes object (keys are list and listItem to be applied to <ul> and <li>)
+     * - Any valid class binding for each
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
     },
-    computed: {
-      listElement() {
-        return this.ordered || this.forceOrdered ? "ol" : "ul";
-      }
-    }
-  };
+    /**
+     * Use list-ordered class, and sets element to <ol>
+     */
+    ordered: Boolean,
+    /**
+     * Use list-unordered class
+     */
+    unordered: Boolean,
+    /**
+     * Use list-lines class
+     */
+    lines: Boolean,
+    /**
+     * Use list-compact class
+     */
+    compact: Boolean,
+    /**
+     * If setting up custom ordered list this will ensure the correct element type
+     * - Note: 'ordered' prop sets the ordered list class, this does not
+     */
+    forceOrdered: Boolean,
+    /**
+     * Define the start value for <ol>
+     */
+    start: String,
+    /**
+     * Reverse ordered list
+     */
+    reversed: Boolean,
+    /**
+     * Define list style type (ie. disc, decimal, etc)
+     */
+    listStyleType: String,
+  });
+
+  const listElement = computed(() => {
+    return props.ordered || props.forceOrdered ? "ol" : "ul";
+  });
 </script>

package/lib/components/elements/UluSpokeSpinner.vue

@@ -1,25 +1,19 @@
 <template>
-  <div class="spoke-spinner" :class="modifierClass">
+  <div 
+    class="spoke-spinner" 
+    :class="{ [`spoke-spinner--${ type }`] : type }"
+  >
     <div class="spoke-spinner__spinner">
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+      <div v-for="n in 12" :key="n"></div>
     </div>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "UluSpokeSpinner",
-    props: {
-      /**
-       * Type modifier for spinner (ie match scss style name)
-       */
-      type: String
-    },
-    computed: {
-      modifierClass() {
-        const { type } = this;
-        return type ? `spoke-spinner--${ type }` : null;
-      }
-    }
-  };
+<script setup>
+  const props = defineProps({
+    /**
+     * Type modifier for spinner (ie match scss style name)
+     */
+    type: String
+  });
 </script>