@ulu/frontend-vue 0.1.0-beta.1

package/lib/components/layout/UluWhenBreakpoint.vue

@@ -0,0 +1,86 @@
+<template>
+  <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 });
+          }
+        };
+
+        setupCondition('max');
+        setupCondition('min');
+        setupCondition('only');
+
+        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;
+      }
+    },
+    beforeUnmount() {
+      this.tearDownHandlers();
+    },
+  };
+</script>

package/lib/components/navigation/UluBreadcrumb.vue

@@ -0,0 +1,72 @@
+<template>
+  <nav 
+    :class="classes.nav" 
+    aria-label="Breadcrumb"
+    v-if="items.length"
+  >
+    <ul :class="classes.list">
+      <li v-for="(item, index) in items" :key="index" :class="classes.item">
+        <router-link
+          :to="item.to"
+          :class="classes.link"
+          :aria-current="item.current ? 'page' : null"
+        >
+          <slot :item="item">
+            {{ item.title }}
+          </slot>
+        </router-link>
+        <template v-if="index < items.length - 1">
+          <slot name="separator">
+            <UluIcon
+              :class="classes.separator"
+              type="pathSeparator"
+              :definition="separatorIcon"
+            />
+          </slot>
+        </template>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+  import UluIcon from '../elements/UluIcon.vue';
+  /**
+   * Breadcrumb trail component
+   * - Is now agnostic of router, pass precomputed breadcrumb trail via items prop
+   */
+  export default {
+    name: 'UluBreadcrumb',
+    components: {
+      UluIcon
+    },
+    props: {
+      /**
+       * Array of breadcrumb items.
+       * Each item is an object: { title: String, to: [String, Object], current: Boolean }
+       */
+      items: {
+        type: Array,
+        default: () => []
+      },
+      /**
+       * Icon to use as a separator.
+       */
+      separatorIcon: String,
+      /**
+       * Classes object to be applied to elements.
+       * Keys: nav, list, item, link, icon
+       */
+      classes: {
+        type: Object,
+        default: () => ({
+          nav: "breadcrumb",
+          list: "breadcrumb__list",
+          item: "breadcrumb__item",
+          link: "breadcrumb__link",
+          separator: "breadcrumb__separator"
+        })
+      }
+    }
+  }
+</script>

package/lib/components/navigation/UluMenu.vue

@@ -0,0 +1,105 @@
+<template>
+  <ul v-if="items?.length" :class="classes.list">
+    <li 
+      v-for="(item, index) in items" 
+      :key="index" 
+      :class="[classes.item, item?.classes?.item]"
+    >
+      <!-- 
+        Note: The ternary spread method below is conditionally adding certain 
+        props/handlers for each of the different element types.  
+      -->
+      <component
+        :is="item.to || item.path ? 'router-link' : item.click ? 'button' : 'a'"
+        v-bind="{
+          ...(item.to || item.path ? { to: item.to || item.path } : {}),
+          ...(item.href ? { 'href' : item.href || '#' } : {}),
+        }"
+        @click="(event) => { handleItemClick(event, item) }"
+        :class="[classes.link, item?.classes?.link]"
+        :activeClass="classes.linkActive"
+        :exactActiveClass="classes.linkExactActive"
+        :aria-label="iconOnly ? item.title : null"
+        :id="item.id"
+        v-ulu-tooltip="iconOnly ? item.title : item.tooltip || null" 
+      >
+        <slot :item="item" :index="index">
+          <UluIcon 
+            v-if="item.icon" 
+            :definition="item.icon" 
+            :class="[classes.linkIcon, item?.classes?.linkIcon]"
+          />
+          <span :class="[classes.linkText, item?.classes?.linkText]">{{ item.title }}</span>
+          <UluTag v-if="item.tag" v-bind="item.tag"/>
+        </slot>
+      </component>
+      <!-- Component calls itself recursively for children if allowed (noChildren) -->
+      <UluMenu v-if="!noChildren && item?.children?.length"
+        :iconOnly="iconOnly"
+        :classes="classes"
+        :items="item.children"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+  import UluIcon from "../elements/UluIcon.vue";
+  import UluTag from "../elements/UluTag.vue";
+  /**
+   * Reusable menu component (ul > li > [a/button/router-link])
+   * - Requires ulu tooltip plugin (as items themselves can have tooltips)
+   */
+  export default {
+    name: "UluMenu",
+    components: {
+      UluIcon,
+      UluTag
+    },
+    emits: [
+      /**
+       * Fired anytime a item is clicked
+       */
+      "itemClick"
+    ],
+    props: {
+      /**
+       * Items Array of Objects for each link
+       * [{
+       *   title: String (title of link)
+       *   icon: Icon definition passed to UluIcon
+       *   tag: Tag appearing after link text (count/etc), pass props you want bound to tag
+       *   tooltip: Add tooltip to menu item (pass options for tooltip), unless iconOnly than the title is presented in the tooltip
+       *   href: Will result in <a>
+       *   click: Will be called on click and result in <button>
+       *   to: Will result in <a> and use vue-router router-link component
+       * }]
+       */
+      items: Array,
+      /**
+       * Classes object to add class bindings to the different elements
+       * - { list, item, link, linkActive, linkExactActive, linkIcon, linkText }
+       */
+      classes: {
+        type: Object,
+        default: () => ({})
+      },
+      /**
+       * Use icon only version of menu
+       */
+      iconOnly: Boolean,
+      /**
+       * Do not print menu items children recursively
+       */
+      noChildren: Boolean
+    },
+    methods: {
+      handleItemClick(event, item) {
+        if (item.click) {
+          item.click(event);
+        }
+        this.$emit("itemClick", { item, event });
+      }
+    }
+  };
+</script>

package/lib/components/navigation/UluMenuStack.vue

@@ -0,0 +1,49 @@
+<template>
+  <nav 
+    class="menu-stack"
+    :class="{
+      'menu-stack--hanging' : hanging,
+      'menu-stack--compact' : compact
+    }"
+  >
+    <UluMenu 
+      :items="items" 
+      :classes="{
+        list: 'menu-stack__list',
+        item: 'menu-stack__item',
+        link: 'menu-stack__link',
+        linkText: 'menu-stack__link-text',
+        linkIcon: 'menu-stack__link-icon'
+      }" 
+      :noChildren="noChildren"
+    />
+  </nav>
+</template>
+
+<script>
+  import UluMenu from "./UluMenu.vue";
+  export default {
+    name: "UluMenuStack",
+    components: {
+      UluMenu
+    },
+    props: {
+      /**
+       * Menu item (see UluMenu)
+       */
+      items: Array,
+      /**
+       * Hanging style menu
+       */
+      hanging: Boolean,
+      /**
+       * Compact style menu
+       */
+      compact: Boolean,
+      /**
+       * Don't include children of menu
+       */
+      noChildren: Boolean
+    }
+  };
+</script>

package/lib/components/navigation/UluNavStrip.vue

@@ -0,0 +1,48 @@
+<template>
+  <nav 
+    class="nav-strip"
+    :class="{
+      'nav-strip--rule' : rule,
+      'nav-strip--center' : center,
+      'nav-strip--right' : right
+    }"
+  >
+    <UluMenu 
+      :items="items" 
+      :classes="{
+        list: 'nav-strip__list',
+        item: 'nav-strip__item',
+        link: 'nav-strip__link',
+        linkExactActive: 'is-active'
+      }"
+    />
+  </nav>
+</template>
+
+<script>
+  import UluMenu from "./UluMenu.vue";
+  export default {
+    name: "UluNavStrip",
+    components: {
+      UluMenu
+    },
+    props: {
+      /**
+       * Array of items for list (uses UluMenu, see structure there)
+       */
+      items: Array,
+      /**
+       * Center aligned
+       */
+      center: Boolean,
+      /**
+       * Right aligned
+       */
+      right: Boolean,
+      /**
+       * Rule nav strip style
+       */
+      rule: Boolean
+    },
+  };
+</script>

package/lib/components/navigation/UluSkipLink.vue

@@ -0,0 +1,5 @@
+<template>
+  <a class="site-skip-link hidden-visually-focusable" href="#main-content">
+    Skip to main content
+  </a>
+</template>