@ulu/frontend-vue 0.1.0-beta.9 → 0.1.1-beta.2

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

@@ -1,39 +1,57 @@
 <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({
+    /**
+     * The File object to be displayed.
+     */
+    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 */
-      }
+    /**
+     * The icon to display next to the file name.
+     */
+    icon: {
+      type: String,
+      default: "type:file"
     },
-  };
+    /**
+     * If true, the file size will not be displayed.
+     */
+    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,43 @@
   </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({
+    /**
+     * The label for the file input.
+     */
+    label: {
+      type: String,
+      default: "Select File"
     },
-    methods: {
-      onChangeFile(event) {
-        this.$emit("filesChange", event.target.files);
-      }
-    }
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean,
+    /**
+     * If true, default classes will not be applied.
+     */
+    noClasses: Boolean,
+    /**
+     * If true, allows multiple file selection.
+     */
+    multiple: Boolean,
+    /**
+     * Additional attributes to bind to the input element.
+     */
+    inputAttrs: Object
+  });
+
+  const emit = defineEmits(["file-change"]);
+
+  const id = getNextId();
+
+  const onChangeFile = (event) => {
+    emit("file-change", event.target.files);
   };
 </script>

package/lib/components/forms/UluFormMessage.vue

@@ -3,18 +3,21 @@
     'site-form__error' : error,
     'site-form__warning' : warning
   }">
-    <FaIcon v-if="error" :icon="$site.getIcon('error')"/>
-    <FaIcon v-if="warning" :icon="$site.getIcon('warning')"/>
+    <UluIcon v-if="error || warning" :icon="`type:${ error ? 'error' : 'warning' }`" />
     <slot/>
   </p>
 </template>
 
-<script>
-  export default {
-    name: "FormMessage",
-    props: {
-      warning: Boolean,
-      error: Boolean,
-    }
-  };
+<script setup>
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    /**
+     * If true, the message will be styled as a warning.
+     */
+    warning: Boolean,
+    /**
+     * If true, the message will be styled as an error.
+     */
+    error: Boolean,
+  });
 </script>

package/lib/components/forms/UluFormSelect.vue

@@ -18,20 +18,32 @@
   </div>
 </template>
 
-<script>
-  let count = 0;
-  export default {
-    name: "FormSelect",
-    props: {
-      label: String,
-      modelValue: String,
-      options: Array,
-      labelHidden: Boolean
-    },
-    data() {
-      return {
-        id: `select-id-${ ++count }`
-      };
-    }
-  };
+<script setup>
+  const getNextId = (() => {
+    let count = 0;
+    return () => `select-id-${++count}`;
+  })();
+
+  defineProps({
+    /**
+     * The label for the select input.
+     */
+    label: String,
+    /**
+     * The value of the select input (for v-model).
+     */
+    modelValue: String,
+    /**
+     * An array of options for the select input. Each option should be an object with `value` and `text` properties.
+     */
+    options: Array,
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>

package/lib/components/forms/UluFormText.vue

@@ -14,19 +14,28 @@
   </div>
 </template>
 
-<script>
-  let count = 0;
-  export default {
-    name: "FormText",
-    props: {
-      label: String,
-      modelValue: String,
-      labelHidden: Boolean
-    },
-    data() {
-      return {
-        id: `text-input-id-${ ++count }`
-      };
-    }
-  };
+<script setup>
+  const getNextId = (() => {
+    let count = 0;
+    return () => `text-input-id-${++count}`;
+  })();
+
+  defineProps({
+    /**
+     * The label for the text input.
+     */
+    label: String,
+    /**
+     * The value of the text input (for v-model).
+     */
+    modelValue: String,
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>