@ulu/frontend-vue 0.1.0-beta.1 → 0.1.0-beta.11

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

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

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/components/systems/facets/UluFacetsFilters.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="UluFacetsFilters">
+    <UluCollapsibleRegion
+      class="UluFacets__group"
+      :class="classes.group"
+      :classToggle="['UluFacets__group-toggle', classes.groupToggle]"
+      :classContent="['UluFacets__group-content', classes.groupContent]"
+      v-for="group in facets"
+      :key="group.uid"
+      :group="group"
+      :startOpen="group.open"
+      :clickOutsideCloses="false"
+      :closeOnEscape="false"
+      :transitionHeight="true"
+    >
+      <template #toggle="{ isOpen }">
+        <slot name="groupToggle" :group="group" :isOpen="isOpen">
+          {{ group.name }}
+        </slot>
+      </template>
+      <template #default>
+        <UluFacetsList
+          :children="group.children.slice(0, maxVisible)"
+          :groupUid="group.uid"
+          :classFacet="classes.facet"
+          @facet-change="emit('facet-change', $event)"
+        />
+        <UluCollapsibleRegion
+          v-if="group.children.length > maxVisible"
+          class="UluFacets__more-facets"
+          :class="classes.moreFacets"
+          :clickOutsideCloses="false"
+          :closeOnEscape="false"
+          :transitionHeight="true"
+        >
+          <template #toggle="{ isOpen }">
+            {{ isOpen ? "- Less" : "+ More" }}
+          </template>
+          <template #default>
+            <UluFacetsList
+              :children="group.children.slice(maxVisible)"
+              :groupUid="group.uid"
+              :classFacet="classes.facet"
+              @facet-change="emit('facet-change', $event)"
+            />
+          </template>
+        </UluCollapsibleRegion>
+      </template>
+    </UluCollapsibleRegion>
+  </div>
+</template>
+
+<script setup>
+  import UluFacetsList from "./UluFacetsList.vue";
+  import UluCollapsibleRegion from "../../collapsible/UluCollapsibleRegion.vue";
+
+  defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    maxVisible: {
+      type: Number,
+      default: 5
+    },
+    facets: {
+      type: Array,
+      default: () => []
+    }
+  });
+
+  const emit = defineEmits(['facet-change']);
+</script>

package/lib/components/systems/facets/UluFacetsList.vue

@@ -10,7 +10,8 @@
         class="UluFacets__facet-checkbox"
         :id="facetCheckboxId(facet)"
         type="checkbox" 
-        v-model="facet.selected"
+        :checked="facet.selected"
+        @change="emit('facet-change', { groupUid, facetUid: facet.uid, selected: $event.target.checked })"
       >
       <label 
         class="UluFacets__facet-label" 
@@ -22,18 +23,16 @@
   </ul>
 </template>
 
-<script>
-  export default {
-    name: 'UluFacetsList',
-    props: {
-      groupUid: String,
-      children: Array,
-      classFacet: String
-    },
-    methods: {
-      facetCheckboxId(facet) {
-        return `facet-${ this.groupUid }-${ facet.uid }`;
-      }
-    }
+<script setup>
+  const props = defineProps({
+    groupUid: String,
+    children: Array,
+    classFacet: String
+  });
+
+  const emit = defineEmits(['facet-change']);
+
+  function facetCheckboxId(facet) {
+    return `facet-${props.groupUid}-${facet.uid}`;
   }
 </script>