@ulu/frontend-vue 0.1.0-beta.18 → 0.1.0-beta.19

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/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

@@ -10,37 +10,31 @@
   </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,15 +3,17 @@
     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>
@@ -32,6 +34,10 @@
      * - This will override the 'type' prop if both are provided
      */
     icon: [String, Array, Object, Boolean],
+    /**
+     * Whether the icon should use flow inline
+     */
+    spaced: Boolean
   });
 
   const useStaticFa = computed(() => {
@@ -76,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>

package/lib/components/elements/UluTag.vue

@@ -3,51 +3,51 @@
     class="tag"
     :class="[
       {
-        'tag--small' : small,
-        'type-small' : small,
+        'tag--counter' : counter,
+        [`tag--${ size }`] : size,
         [`tag--${ type }`] : type
       }, 
       resolvedModifiers
     ]"
   >
-    <UluIcon v-if="icon" :icon="icon" />
+    <UluIcon v-if="icon" :icon="icon" spaced />
     <slot>
-      {{ text }}
+      <span>{{ text }}</span>
     </slot>
   </span>
 </template>
 
-<script>
+<script setup>
   import UluIcon from "./UluIcon.vue";
   import { useModifiers } from "../../composables/useModifiers.js";
-  export default {
-    name: "UluTag",
-    components: {
-      UluIcon
-    },
-    props: {
-      type: [String],
-      /**
-       * Preset to set small modifier and small type size
-       */
-      small: Boolean,
-      /**
-       * Text for tag, or use slot
-       */
-      text: [String, Number],
-      /**
-       * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
-       * - If using custom icons use slot instead
-       */
-      icon: [String, Array],
-      /**
-       * Modifiers for tag class
-       */
-      modifiers: [String, Array]
-    },
-    setup(props) {
-      const { resolvedModifiers } = useModifiers({ props, baseClass: "tag" });
-      return { resolvedModifiers };
-    }
-  };
+
+  const props = defineProps({
+    /**
+     * Type (corresponds with styles setup for tag in scss module)
+     */
+    type: [String],
+    /**
+     * Size (corresponds with sizes setup for tag in scss module)
+     */
+    size: String,
+    /**
+     * Use counter style (for numbers, etc)
+     */
+    counter: Boolean,
+    /**
+     * Text for tag, or use slot
+     */
+    text: [String, Number],
+    /**
+     * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
+     * - If using custom icons use slot instead
+     */
+    icon: [String, Array],
+    /**
+     * Modifiers for tag class
+     */
+    modifiers: [String, Array]
+  });
+
+  const { resolvedModifiers } = useModifiers({ props, baseClass: "tag" });
 </script>

package/lib/components/forms/UluCheckboxMenu.vue

@@ -1,36 +1,37 @@
 <template>
-  <ul class="site-menu site-form">
-    <li
-    class="site-menu__item"
-      v-for="(option, index) in options"
-      :key="index"
-    >
-      <div class="site-menu__checkbox">
-        <input 
-          type="checkbox" 
-          :id="getId(index)" 
-          v-model="option.checked"
-        >
-        <label :for="getId(index)">
-          <slot>
-            {{ option?.title || option?.text }}
-          </slot>
-        </label>
-      </div>
-    </li>
-  </ul>
+  <div class="menu-stack form-theme">
+    <ul class="menu-stack__list">
+      <li
+        class="menu-stack__item"
+        v-for="(option, index) in options"
+        :key="index"
+      >
+        <div class="menu-stack__selectable">
+          <input 
+            type="checkbox" 
+            :id="getId(index)" 
+            v-model="option.checked"
+          >
+          <label :for="getId(index)">
+            <slot>
+              {{ option?.title || option?.text }}
+            </slot>
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
 
-<script>
-  export default {
-    name: "UluCheckboxMenu",
-    props: {
-      options: Array
-    },
-    methods: {
-      getId(index) {
-        return `checkbox-menu-opt-${ index }`;
-      }
-    }
+<script setup>
+  defineProps({
+    /**
+     * Checkbox items in [{ title|text, checked }, ...]
+     */
+    options: Array
+  });
+
+  const getId = (index) => {
+    return `checkbox-menu-opt-${ index }`;
   };
 </script>

package/lib/components/forms/UluFileDisplay.vue

@@ -1,39 +1,48 @@
 <template>
   <a class="layout-flex-baseline" :href="fileUrl" :download="file.name">
-    <FaIcon class="ui-icon" :icon="['far', $site.getIcon('file')]"/>
-    <span class="margin-left-small-x">
-      {{ file.name }}
-      <span class="tag tag--small tag--outline type-small-x">{{ fileSize }}</span>
-    </span>
+    <slot :fileName="file.name" :fileSize="fileSize">
+      <UluIcon class="ui-icon" :icon="icon"/>
+      <span class="margin-left-small-x">
+        {{ file.name }}
+        <UluTag v-if="!noFileSize" :text="fileSize" small outline />
+      </span>
+    </slot>
   </a>
 </template>
 
-<script>
-  export default {
-    name: "FileDisplay",
-    props: {
-      file: {
-        required: true,
-        type: Object
-      }
+<script setup>
+  import { computed } from "vue";
+  import UluIcon from "../elements/UluIcon.vue";
+  import UluTag from "../elements/UluTag.vue";
+
+  const props = defineProps({
+    file: {
+      required: true,
+      type: Object,
     },
-    computed: {
-      fileUrl() {
-        return window.URL.createObjectURL(this.file);
-      },
-      fileSize() {
-        const { size } = this.file;
-        const Mbs = size / 1000000;
-        const Kbs = size / 1000;
-        const format = n => parseFloat(n.toFixed(2));
-        // Either display Mbs or Kbs if less than 1 Mb
-        /* eslint-disable */
-        return Mbs > 1 ? 
-          `${ format(Mbs) }Mb` : Kbs > 1 ?
-          `${ format(Kbs) }Kb` : 
-          `${ format(size) }B`;
-        /* eslint-enable */
-      }
+    icon: {
+      type: String,
+      default: "type:file"
     },
-  };
+    noFileSize: Boolean
+  });
+
+  const fileUrl = computed(() => {
+    if (typeof window === 'undefined') return '';
+    return window.URL.createObjectURL(props.file);
+  });
+
+  const fileSize = computed(() => {
+    const { size } = props.file;
+    const Mbs = size / 1000000;
+    const Kbs = size / 1000;
+    const format = n => parseFloat(n.toFixed(2));
+    // Either display Mbs or Kbs if less than 1 Mb
+    /* eslint-disable */
+    return Mbs > 1 ? 
+      `${ format(Mbs) }Mb` : Kbs > 1 ?
+      `${ format(Kbs) }Kb` : 
+      `${ format(size) }B`;
+    /* eslint-enable */
+  });
 </script>

package/lib/components/forms/UluFormFile.vue

@@ -18,30 +18,28 @@
   </div>
 </template>
 
-<script>
-  let count = 0;
-  export default {
-    name: "FormFile",
-    props: {
-      label: {
-        type: String,
-        default: "Select File"
-      },
-      labelHidden: Boolean,
-      noClasses: Boolean,
-      multiple: Boolean,
-      inputAttrs: Object
-    },
-    emits: ["filesChange"],
-    data() {
-      return {
-        id: `file-input-id-${ ++count }`
-      };
+<script setup>
+  const getNextId = (() => {
+    let count = 0;
+    return () => `file-input-id-${++count}`;
+  })();
+
+  defineProps({
+    label: {
+      type: String,
+      default: "Select File"
     },
-    methods: {
-      onChangeFile(event) {
-        this.$emit("filesChange", event.target.files);
-      }
-    }
+    labelHidden: Boolean,
+    noClasses: Boolean,
+    multiple: Boolean,
+    inputAttrs: Object
+  });
+
+  const emit = defineEmits(["file-change"]);
+
+  const id = getNextId();
+
+  const onChangeFile = (event) => {
+    emit("file-change", event.target.files);
   };
 </script>