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

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" :definition="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>

package/lib/components/forms/UluFormMessage.vue

@@ -3,18 +3,15 @@
     '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({
+    warning: Boolean,
+    error: Boolean,
+  });
 </script>

package/lib/components/forms/UluFormSelect.vue

@@ -18,20 +18,20 @@
   </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({
+    label: String,
+    modelValue: String,
+    options: Array,
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>

package/lib/components/forms/UluFormText.vue

@@ -14,19 +14,19 @@
   </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({
+    label: String,
+    modelValue: String,
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>

package/lib/components/forms/UluSearchForm.vue

@@ -13,19 +13,17 @@
       class="search-form__submit button button--primary"
       aria-label="Submit Search"
     >
-      <FaIcon :icon="$site.getIcon('search')"/>
+      <UluIcon icon="type:search" />
     </button>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SearchForm",
-    props: {
-      placeholder: {
-        type: String,
-        default: "Titles, keyword…"
-      }
+<script setup>
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    placeholder: {
+      type: String,
+      default: "Titles, keyword…"
     }
-  };
+  });
 </script>

package/lib/components/index.js

@@ -17,6 +17,7 @@ export { default as UluAlert } from './elements/UluAlert.vue';
 export { default as UluBadge } from './elements/UluBadge.vue';
 export { default as UluBadgeStack } from './elements/UluBadgeStack.vue';
 export { default as UluButton } from './elements/UluButton.vue';
+export { default as UluButtonVerbose } from './elements/UluButtonVerbose.vue';
 export { default as UluCallout } from './elements/UluCallout.vue';
 export { default as UluCard } from './elements/UluCard.vue';
 export { default as UluDefinitionList } from './elements/UluDefinitionList.vue';
@@ -28,7 +29,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/UluAdaptiveLayout.vue

@@ -3,9 +3,7 @@
   <slot v-else name="mobile" />
 </template>
 
-<script>
-  export default {
-    name: "AdaptiveLayout",
-    inject: ["uluIsMobile"],
-  };
+<script setup>
+  import { useRequiredInject } from '../../composables/useRequiredInject.js';
+  const uluIsMobile = useRequiredInject('uluIsMobile');
 </script>

package/lib/components/layout/UluTitleRail.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="rail rail--title-rail">
+  <div 
+    class="rail rail--title-rail"
+    :class="{
+      'rail--rule' : rule
+    }"
+  >
     <div class="rail__item rail__item--title" :class="classes.itemTitle">
       <component 
         class="layout-flex type-max-width-small no-margin" 
@@ -8,10 +13,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 +42,6 @@
         type: String,
         default: "baseline"
       },
-      iconType: String,
       classes: {
         type: Object,
         default: () => ({
@@ -51,6 +54,7 @@
         type: String,
         default: "h2"
       },
+      rule: Boolean
     }
   }
 </script>

package/lib/components/layout/UluWhenBreakpoint.vue

@@ -2,85 +2,79 @@
   <slot v-if="shouldShow" />
 </template>
 
-<script>
-  export default {
-    name: "UluWhenBreakpoint",
-    inject: ["uluBreakpointManager"],
-    props: {
-      max: String,
-      min: String,
-      only: String,
-    },
-    data() {
-      return {
-        conditions: {},
-        handlers: [],
-        handlersSetup: false,
-      };
-    },
-    computed: {
-      shouldShow() {
-        if (!this.handlersSetup) return false;
-        const props = ['max', 'min', 'only'].filter(p => this[p]);
-        if (props.length === 0) {
-          return false;
-        }
-        return Object.values(this.conditions).every(c => c);
-      },
-      propsIdentifier() {
-        return `${this.max || ''}-${this.min || ''}-${this.only || ''}`;
-      }
-    },
-    watch: {
-      uluBreakpointManager: {
-        handler(manager) {
-          if (manager && !this.handlersSetup) {
-            this.setupHandlers(manager);
-          }
-        },
-        immediate: true
-      },
-      propsIdentifier() {
-        if (this.uluBreakpointManager && this.handlersSetup) {
-            this.tearDownHandlers();
-            this.setupHandlers(this.uluBreakpointManager);
-        }
-      }
-    },
-    methods: {
-      setupHandlers(manager) {
-        const setupCondition = (direction) => {
-          const breakpointName = this[direction];
-          if (breakpointName) {
-            this.conditions[direction] = false;
-            const handler = {
-              on: () => { this.conditions[direction] = true; },
-              off: () => { this.conditions[direction] = false; },
-            };
-            manager.at(breakpointName)[direction](handler);
-            this.handlers.push({ name: breakpointName, direction, handler });
-          }
-        };
+<script setup>
+  import { ref, computed, watch, onBeforeUnmount } from 'vue';
+  import { useRequiredInject } from '../../composables/useRequiredInject.js';
+
+  const props = defineProps({
+    max: String,
+    min: String,
+    only: String,
+  });
 
-        setupCondition('max');
-        setupCondition('min');
-        setupCondition('only');
+  const uluBreakpointManager = useRequiredInject('uluBreakpointManager');
 
-        this.handlersSetup = true;
-      },
-      tearDownHandlers() {
-        if (this.uluBreakpointManager) {
-          this.handlers.forEach(({ name, direction, handler }) => {
-            this.uluBreakpointManager.at(name).remove(handler, direction);
-          });
-        }
-        this.handlers = [];
-        this.conditions = {};
-        this.handlersSetup = false;
+  const conditions = ref({});
+  const handlers = ref([]);
+  const handlersSetup = ref(false);
+
+  const shouldShow = computed(() => {
+    if (!handlersSetup.value) return false;
+    const activeProps = ['max', 'min', 'only'].filter(p => props[p]);
+    if (activeProps.length === 0) {
+      return false;
+    }
+    return Object.values(conditions.value).every(c => c);
+  });
+
+  const setupHandlers = (manager) => {
+    const setupCondition = (direction) => {
+      const breakpointName = props[direction];
+      if (breakpointName) {
+        conditions.value[direction] = false;
+        const handler = {
+          on: () => { conditions.value[direction] = true; },
+          off: () => { conditions.value[direction] = false; },
+        };
+        manager.at(breakpointName)[direction](handler);
+        handlers.value.push({ name: breakpointName, direction, handler });
       }
-    },
-    beforeUnmount() {
-      this.tearDownHandlers();
-    },
+    };
+
+    setupCondition('max');
+    setupCondition('min');
+    setupCondition('only');
+
+    handlersSetup.value = true;
+  };
+
+  const tearDownHandlers = () => {
+    if (uluBreakpointManager) {
+      handlers.value.forEach(({ name, direction, handler }) => {
+        uluBreakpointManager.at(name).remove(handler, direction);
+      });
+    }
+    handlers.value = [];
+    conditions.value = {};
+    handlersSetup.value = false;
   };
+
+  watch(uluBreakpointManager, (manager) => {
+    if (manager && !handlersSetup.value) {
+      setupHandlers(manager);
+    }
+  }, { immediate: true });
+
+  // Watch all the props and update if they change
+  // - Using array syntax to avoid "deep" flag
+  watch([() => props.max, () => props.min, () => props.only], () => {
+    if (uluBreakpointManager && handlersSetup.value) {
+      tearDownHandlers();
+      setupHandlers(uluBreakpointManager);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    tearDownHandlers();
+  });
 </script>

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>