@ulu/frontend-vue 0.1.0-beta.1

package/lib/components/elements/UluButton.vue

@@ -0,0 +1,161 @@
+<template>
+  <component 
+    :is="element" 
+    class="button" 
+    :class="[
+      {
+        'button--transparent' : transparent,
+        'button--primary' : primary,
+        'button--secondary' : secondary,
+        'button--outline' : outline,
+        'button--small' : small,
+        'button--large' : large,
+        'button--icon' : iconOnly,
+        'no-margin' : noMargin,
+      },
+      classes,
+      resolvedModifiers
+    ]"
+    v-bind="attrs"
+    :aria-label="resolvedAriaLabel"
+  >
+    <slot name="before"/>
+    <UluIcon 
+      v-if="icon && (iconBefore || iconOnly)"
+      :definition="icon"
+      class="button__icon"
+    />
+    <span v-if="($slots.default || text) && !iconOnly">
+      <slot>
+        {{ text }}
+      </slot>
+    </span>
+    <UluIcon 
+      v-if="icon && (!iconBefore && !iconOnly)"
+      :definition="icon"
+      class="button__icon"
+    />
+    <slot name="after"/>
+  </component>
+</template>
+
+<script>
+  import { RouterLink } from "vue-router";
+  import UluIcon from "./UluIcon.vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+  export default {
+    name: "UluButton",
+    components: {
+      UluIcon
+    },
+    props: {
+      /**
+       * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
+       * - If using custom icons don't use this prop, use before or after slots with correct classes (ie .button__icon)
+       */
+      icon: [String, Array],
+      /**
+       * If passing an icon (and not using iconOnly) this determines if the icon is before or after (default) the text
+       */
+      iconBefore: Boolean,
+      /**
+       * Button style for only icon
+       */
+      iconOnly: Boolean,
+      /**
+       * 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],
+      /**
+       * For icon only buttons or buttons that need an explicit label
+       */
+      alt: String,
+      /**
+       * If not using slot this sets the buttons text via prop
+       */
+      text: String,
+      /**
+       * Pass any sizes setup for button (ie. small, large, etc)
+       */
+      size: String,
+      /**
+       * Preset to set primary style (needs to be a button style in ulu scss)
+       */
+      primary: Boolean,
+      /**
+       * Preset to set secondary style (needs to be a button style in ulu scss)
+       */
+      secondary: Boolean,
+      /**
+       * Preset to set small size (use "size" for any sizes)
+       */
+      small: Boolean,
+      /**
+       * Preset to set large size (use "size" for any sizes)
+       */
+      large: Boolean,
+      /**
+       * Preset to set outline style button (needs to be a button style in ulu scss)
+       */
+      outline: Boolean,
+      /**
+       * Preset to set transparent style button (needs to be a button style in ulu scss)
+       */
+      transparent: Boolean,
+      /**
+       * Add no-margin utility
+       */
+      noMargin: Boolean,
+      /**
+       * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+       */
+      modifiers: [String, Array]
+    },
+    setup(props) {
+      const { resolvedModifiers } = useModifiers({ props, baseClass: "button" });
+      return { resolvedModifiers };
+    },
+    computed: {
+      resolvedAriaLabel() {
+        const label = this.alt || this.iconOnly && this.text;
+        return label ? label : null;
+      },
+      classes() {
+        const classes = [];
+        const { size } = this;
+        if (size) {
+          classes.push(`button--${ size }`);
+        }
+        return classes;
+      },
+      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/UluCallout.vue

@@ -0,0 +1,30 @@
+<template>
+  <div 
+    class="callout"
+    :class="[resolvedModifiers, { 'full-height' : fullHeight }]"
+  >
+    <slot/>
+  </div>
+</template>
+
+<script>
+  import { useModifiers } from "../../composables/useModifiers.js";
+  export default {
+    name: "UluCallout",
+    props: {
+      /**
+       * Add full height utility class
+       */
+      fullHeight: Boolean,
+      /**
+       * Class modifiers (ie. 'transparent', 'secondary', etc)
+       * - Can be String or Array of Strings
+       */
+      modifiers: [String, Array]
+    },
+    setup(props) {
+      const { resolvedModifiers } = useModifiers({ props, baseClass: "callout" });
+      return { resolvedModifiers };
+    }
+  };
+</script>

package/lib/components/elements/UluCard.vue

@@ -0,0 +1,241 @@
+<template>
+  <component
+    class="card" 
+    :is="resolvedElement" 
+    @mousedown="onMousedown"
+    @mouseup="onMouseup"
+    :class="[
+      {
+        'card--horizontal' : horizontal || horizontalCenter,
+        'card--horizontal-center' : horizontalCenter,
+        'card--overlay' : overlay,
+      },
+      resolvedModifiers
+    ]"
+    :style="{ cursor: cursorStyle }"
+    :target="target"
+    :to="to"
+    :href="href"
+    :data-ulu-proxy-click-init="proxyClickEnabled"
+  >
+    <div class="card__body">
+      <div class="card__main">
+        <component 
+          :is="titleElement" 
+          class="card__title" 
+          :class="classes.title"
+        >
+          <router-link 
+            v-if="titleTo" 
+            class="card__title-link" 
+            :to="titleTo" 
+            ref="link"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </router-link>
+          <a 
+            v-else-if="titleHref" 
+            class="card__title-link" 
+            :href="titleHref" 
+            :target="titleTarget" 
+            ref="link"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </a>
+          <template v-else>
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </template>
+        </component>
+        <slot name="body"/>
+      </div>
+      <div class="card__aside" v-if="$slots.body">
+        <slot name="aside"/>
+      </div>
+    </div>
+    <div 
+      v-if="$slots.image || imageSrc" 
+      class="card__image"
+      :class="[
+        { 'card__image--icon' : imageIcon },
+        classes.image
+      ]"
+    >
+      <slot name="image">
+        <img :src="imageSrc" :alt="imageAlt">
+      </slot>
+    </div>
+    <div class="card__footer" v-if="$slots.footer">
+      <slot name="footer"/>
+    </div>
+  </component>
+</template>
+
+<script>
+  import { RouterLink } from "vue-router";
+  import { useModifiers } from "../../composables/useModifiers.js";
+  const titleLinkValidator = (_, props) => {
+    const valid = !(props.to || props.href);
+    if (!valid) {
+      console.warn("'titleHref' and 'titleTo' can't be used with to or href (nesting links)");
+    } 
+    return valid;
+  };
+  export default {
+    name: "UluCard",
+    props: {
+      /**
+       * Specify card element, unless to or href are used which will use 'a' or 'router-link'
+       * - Other than changing to more appropriate element (ie 'li' if in list for example), this can 
+       *   be used to set the card to a button to attach your own click handlers to
+       */
+      cardElement: {
+        type: String,
+        default: "article"
+      },
+      /**
+       * Text for title if not using slot
+       */
+      title: String,
+      /**
+       * Element to use for title
+       */
+      titleElement: {
+        type: String,
+        default: "h3"
+      },
+      /**
+       * Title will be router link
+       */
+      titleTo: {
+        type: [String, Object],
+        validator: titleLinkValidator
+      },
+      /**
+       * Will make title a link to href
+       */
+      titleHref: {
+        type: String,
+        validator: titleLinkValidator
+      },
+      /**
+       * When using href this will set title link's target attribute
+       */
+      titleTarget: String,
+      /**
+       * If set the entire card will be router link
+       * - Do not us in combination with titleTo or titleHref
+       */
+      to: [String, Object],
+      /**
+       * If set the entire card will be a link to href
+       * - Do not us in combination with titleTo or titleHref
+       */
+      href: {
+        type: String,
+        
+      },
+      /**
+       * When using href this will set link's target attribute
+       */
+      target: String,
+      /**
+       * Classes with class bindings for different elements including ({ title, image })
+       */
+      classes: {
+        type: Object,
+        default: () => ({})
+      },
+      /**
+       * Whether to proxy clicks of non-interactive elements (making whole card clickable)
+       */
+      proxyClick: Boolean,
+      /**
+       * Options to be merged for proxy click settings ({ preventSelector, preventSelectionDuration })
+       */
+      proxyClickOptions: {
+        type: Object,
+        default: () => ({})
+      },
+      /**
+       * Source of image
+       */
+      imageSrc: String,
+      /**
+       * Alt text for image
+       */
+      imageAlt: String,
+      /**
+       * If true image will use icon modifier (displays for image adjusts for icon vs full image)
+       */
+      imageIcon: Boolean,
+      /**
+       * Horizontal card layout
+       */
+      horizontal: Boolean,
+      /**
+       * Horizontal centered card layout
+       */
+      horizontalCenter: Boolean,
+      /**
+       * Overlay card layout
+       */
+      overlay: Boolean,
+      /**
+       * Class modifiers (ie. 'transparent', 'secondary', etc)
+       * - Can be String or Array of Strings
+       */
+      modifiers: [Array, String]
+    },
+    data() {
+      const { proxyClickOptions, proxyClick, titleHref, titleTo } = this;
+      return {
+        proxyClickEnabled: (proxyClick && (titleHref || titleTo)) || null,
+        resolvedProxyOptions: {
+          selectorPrevent: "input, select, textarea, button, a, [tabindex='-1']",
+          mousedownDurationPrevent: 250,
+          ...proxyClickOptions
+        },
+        cursorStyle: null,
+        proxyStart: null,
+        shouldProxy: false
+      }
+    },
+    setup(props) {
+      const { resolvedModifiers } = useModifiers({ props, baseClass: "card" });
+      return { resolvedModifiers };
+    },
+    computed: {
+      resolvedElement() {
+        const { cardElement, to, href } = this;
+        return to ? RouterLink : href ? 'a' : cardElement;
+      }
+    },
+    methods: {
+      onMousedown({ target, timeStamp }) {
+        if (!this.proxyClickEnabled) return;
+        const { resolvedProxyOptions } = this;
+        const { selectorPrevent } = resolvedProxyOptions;
+        this.shouldProxy = false;
+        if (!target.matches(selectorPrevent)) {
+          this.shouldProxy = true;
+          this.proxyStart = timeStamp;
+        }
+      },
+      onMouseup({ timeStamp }) {
+        if (!this.proxyClickEnabled) return;
+        const { link } = this.$refs;
+        const { resolvedProxyOptions } = this;
+        const { mousedownDurationPrevent } = resolvedProxyOptions;
+        if (this.shouldProxy && timeStamp - this.proxyStart < mousedownDurationPrevent) {
+          link.click();
+        }
+      },
+    }
+  };
+</script>

package/lib/components/elements/UluDefinitionList.vue

@@ -0,0 +1,40 @@
+<template>
+  <dl :class="classes.list">
+    <div 
+      v-for="(item, index) in items" 
+      :key="index"
+      :class="classes.item"
+    >
+      <dt :class="classes.term">
+        <slot name="term" :item="item" :index="index">
+          {{ item.term }}
+        </slot>
+      </dt>
+      <dd :class="classes.description">
+        <slot name="description" :item="item" :index="index">
+          {{ item.description }}
+        </slot>
+      </dd>
+    </div>
+  </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>

package/lib/components/elements/UluExternalLink.vue

@@ -0,0 +1,47 @@
+<template>
+  <a class="external-link" :href="href" :target="target">
+    <span class="external-link__text">
+      <slot>{{ text }}</slot>
+    </span>
+    <UluIcon 
+      class="external-link__icon margin-left-small-x display-inline"
+      type="externalLink"
+      :definition="icon"
+    />
+  </a>
+</template>
+
+<script>
+  import UluIcon from "./UluIcon.vue";
+
+  /**
+   * Component for external links (adds icon after link text)
+   */
+  export default {
+    name: "UluExternalLink",
+    components: {
+      UluIcon
+    },
+    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
+    }
+  };
+</script>

package/lib/components/elements/UluIcon.vue

@@ -0,0 +1,108 @@
+<template>
+  <component
+    v-if="customIconComponent"
+    :is="customIconComponent"
+    v-bind="customIconProps"
+  />
+  <component
+    v-else-if="!useStaticFa && faIconComponent && resolvedDefinition"
+    :is="faIconComponent"
+    v-bind="iconProps"
+  />
+  <span
+    v-else-if="useStaticFa && resolvedDefinition"
+    :class="staticIconClasses"
+    aria-hidden="true"
+  ></span>
+</template>
+
+<script setup>
+  import { ref, defineAsyncComponent, markRaw, watchEffect, computed } from "vue";
+  import { useIcon } from "../../composables/useIcon.js";
+  import { getSetting, getIconByType } from "../../settings.js"; 
+
+  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],
+  });
+
+  const useStaticFa = computed(() => {
+    return getSetting("fontAwesomeStatic");
+  });
+
+  const customIconComponent = computed(() => {
+    return getSetting("iconComponent");
+  });
+
+  const iconPropResolver = computed(() => {
+    return 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) {
+      try {
+        return getIconByType(props.type);
+      } catch (e) {
+        console.warn(e);
+        return null;
+      }
+    }
+    return null;
+  });
+
+  const customIconProps = computed(() => {
+    if (!customIconComponent.value || !resolvedDefinition.value) return null;
+    return iconPropResolver.value(resolvedDefinition.value);
+  });
+
+  // This is now a computed property for component props
+  const iconProps = computed(() => {
+    return getIconProps(resolvedDefinition.value);
+  });
+
+  // Computed property for static icon classes, using the utility method
+  const staticIconClasses = computed(() => {
+    return getClassesFromDefinition(resolvedDefinition.value);
+  });
+
+  // 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)
+  // - Replace the empty component after load or if value changes
+  watchEffect(async () => {
+    // Only attempt to load the component if we are NOT using the static version
+    if (!useStaticFa.value && resolvedDefinition.value) {
+      if (faIconComponent.value === null) {
+        if (FaModule) {
+          faIconComponent.value = markRaw(FaModule.FontAwesomeIcon);
+        } else {
+          const componentPromise = defineAsyncComponent(async () => {
+            const module = await import("@fortawesome/vue-fontawesome");
+            FaModule = module;
+            return module.FontAwesomeIcon;
+          });
+          faIconComponent.value = markRaw(componentPromise);
+        }
+      }
+    } else {
+      // If using static FA or no definition, ensure component is null
+      faIconComponent.value = null;
+    }
+  });
+</script>