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

package/lib/components/collapsible/UluAccordion.vue

@@ -7,24 +7,24 @@
     :animate="animate"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <template #trigger="{ isOpen: open, toggle }">
-      <slot name="trigger" :open="open" :toggle="toggle">
+    <template #trigger="{ isOpen }">
+      <slot name="trigger" :isOpen="isOpen">
         <component :is="triggerTextElement">
           {{ triggerText }}
         </component>
       </slot>
-      <slot name="icon" :open="open">
+      <slot name="icon" :isOpen="isOpen">
         <span class="accordion__icon" :class="classes.icon">
           <UluIcon 
-            :icon="open ? 'type:collapse' : 'type:expand'"
+            :icon="isOpen ? 'type:collapse' : 'type:expand'"
             style="display: inline;"
           />
         </span>
       </slot>
     </template>
 
-    <template #default="{ isOpen: open, toggle }">
-      <slot :open="open" :toggle="toggle"/>
+    <template #default="{ isOpen, toggle }">
+      <slot :isOpen="isOpen" :toggle="toggle"/>
     </template>
   </UluCollapsible>
 </template>
@@ -55,7 +55,7 @@
      */
     animate: {
       type: [Boolean, Object],
-      default: false
+      default: true
     },
     /**
      * Text to use for accordion, alternatively use #trigger slot
@@ -69,7 +69,7 @@
       default: "strong"
     },
     /**
-     * Classes for elements. See UluCollapsible for all available class keys (toggle, content, etc).
+     * Classes for elements. See UluCollapsible for all available class keys (trigger, content, etc).
      * The 'icon' key is also available for the icon span.
      * - Any valid class binding value per element
      */
@@ -77,7 +77,7 @@
       type: Object,
       default: () => ({
         container: 'accordion',
-        toggle: 'accordion__summary',
+        trigger: 'accordion__summary',
         content: 'accordion__content',
         containerOpen: 'is-active'
       })

package/lib/components/collapsible/UluCollapsible.vue

@@ -2,16 +2,16 @@
   <div
     ref="container"
     @keydown.esc="handleEscape"
-    :class="[classes.container, containerStateClasses]"
+    :class="[classes.container, isOpen ? classes.containerOpen : classes.containerClosed]"
   >
     <button
-      :class="classes.toggle"
-      :id="toggleId"
+      :class="classes.trigger"
+      :id="triggerId"
       :aria-controls="contentId"
       :aria-expanded="isOpen"
       @click="toggle"
     >
-      <slot name="trigger" :isOpen="isOpen" :toggle="toggle">
+      <slot name="trigger" :isOpen="isOpen">
         {{ triggerText }}
       </slot>
     </button>
@@ -21,11 +21,9 @@
       tabindex="-1"
       :id="contentId"
       :aria-hidden="!isOpen"
-      :aria-labelledby="toggleId"
+      :aria-labelledby="triggerId"
     >
-      <div :class="classes.contentInner">
-        <slot :isOpen="isOpen" :toggle="toggle" />
-      </div>
+      <slot :isOpen="isOpen" :toggle="toggle" />
     </div>
   </div>
 </template>
@@ -66,16 +64,15 @@
       default: true
     },
     /**
-     * Classes for elements ({ container, toggle, content, contentInner })
+     * Classes for elements ({ container, trigger, content })
      * - Any valid class binding value per element
      */
     classes: {
       type: Object,
       default: () => ({
         container: 'ulu-collapsible',
-        toggle: 'ulu-collapsible__toggle',
+        trigger: 'ulu-collapsible__trigger',
         content: 'ulu-collapsible__content',
-        contentInner: 'ulu-collapsible__content-inner',
         containerOpen: 'ulu-collapsible--open',
         containerClosed: 'ulu-collapsible--closed'
       })
@@ -114,21 +111,9 @@
     }
   });
 
-  const toggleId = ref(newId('ulu-collapsible-toggle'));
+  const triggerId = ref(newId('ulu-collapsible-trigger'));
   const contentId = ref(newId('ulu-collapsible-content'));
 
-  const containerStateClasses = computed(() => {
-    const c = props.classes;
-    const stateClasses = {};
-    if (c.containerOpen && isOpen.value) {
-      stateClasses[c.containerOpen] = true;
-    }
-    if (c.containerClosed && !isOpen.value) {
-      stateClasses[c.containerClosed] = true;
-    }
-    return stateClasses;
-  });
-
   /**
    * Function used to toggle the collapsible
    */

package/lib/components/elements/UluCard.vue

@@ -1,7 +1,8 @@
 <template>
   <component
-    class="card" 
-    :is="resolvedElement" 
+    :is="resolvedElement"
+    ref="cardRoot"
+    class="card"
     @mousedown="onMousedown"
     @mouseup="onMouseup"
     :class="[
@@ -21,6 +22,7 @@
     <div class="card__body">
       <div class="card__main">
         <component 
+          v-if="title || $slots.title"
           :is="titleElement" 
           class="card__title" 
           :class="classes.title"
@@ -76,166 +78,179 @@
   </component>
 </template>
 
-<script>
+<script setup>
+  import { ref, computed, useSlots } from 'vue';
   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]
+
+  const props = defineProps({
+    /**
+     * 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"
     },
-    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
-      }
+    /**
+     * Text for title if not using slot
+     */
+    title: String,
+    /**
+     * Element to use for title
+     */
+    titleElement: {
+      type: String,
+      default: "h3"
     },
-    setup(props) {
-      const { resolvedModifiers } = useModifiers({ props, baseClass: "card" });
-      return { resolvedModifiers };
+    /**
+     * Title will be router link
+     */
+    titleTo: [String, Object],
+    /**
+     * Will make title a link to href
+     */
+    titleHref: String,
+    /**
+     * 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: 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: () => ({})
     },
-    computed: {
-      resolvedElement() {
-        const { cardElement, to, href } = this;
-        return to ? RouterLink : href ? 'a' : cardElement;
-      }
+    /**
+     * Whether to proxy clicks of non-interactive elements (making whole card clickable).
+     * This is for accessibility, allowing a non-link card to have a primary action.
+     * The proxy action is determined in the following order:
+     * 1. If the title has a link (`titleTo` or `titleHref`), it will proxy the click to the title's link.
+     * 2. If not, it will look for an element with the `data-ulu-card-proxy-target` attribute within the card's slots and click it.
+     * 3. If no proxy target is found, it will emit a `proxy-click` event.
+     * Note: This should not be used with the `to` or `href` props.
+     */
+    proxyClick: Boolean,
+    /**
+     * Options to be merged for proxy click settings ({ preventSelector, preventSelectionDuration })
+     */
+    proxyClickOptions: {
+      type: Object,
+      default: () => ({})
     },
-    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();
+    /**
+     * 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]
+  });
+
+  const emit = defineEmits(['proxy-click']);
+  const $slots = useSlots();
+
+  // --- Validation warnings
+  if (props.proxyClick && (props.to || props.href)) {
+    console.warn("UluCard: 'proxyClick' is ignored when 'to' or 'href' are present.");
+  }
+  if ((props.titleTo || props.titleHref) && (props.to || props.href)) {
+    console.warn("UluCard: 'titleTo'/'titleHref' should not be used with 'to'/'href'.");
+  }
+
+  // --- Template refs
+  const cardRoot = ref(null);
+  const link = ref(null);
+
+  // --- Composables
+  const { resolvedModifiers } = useModifiers({ props, baseClass: "card" });
+
+  // --- State
+  const proxyStart = ref(null);
+  const shouldProxy = ref(false);
+
+  // --- Computed properties
+  const isClickable = computed(() => props.proxyClick && !props.to && !props.href);
+  const isTitleProxy = computed(() => isClickable.value && (props.titleTo || props.titleHref));
+  const isEventProxy = computed(() => isClickable.value && !isTitleProxy.value);
+  const proxyClickEnabled = computed(() => isClickable.value || null);
+
+  const resolvedProxyOptions = computed(() => ({
+    selectorPrevent: "input, select, textarea, button, a, [tabindex='-1']",
+    mousedownDurationPrevent: 250,
+    ...props.proxyClickOptions
+  }));
+
+  const cursorStyle = computed(() => isClickable.value ? 'pointer' : null);
+
+  const resolvedElement = computed(() => {
+    return props.to ? RouterLink : props.href ? 'a' : props.cardElement;
+  });
+
+  // --- Methods
+  function onMousedown({ target, timeStamp }) {
+    if (!proxyClickEnabled.value) return;
+    const { selectorPrevent } = resolvedProxyOptions.value;
+    shouldProxy.value = false;
+    if (!target.closest(selectorPrevent)) {
+      shouldProxy.value = true;
+      proxyStart.value = timeStamp;
+    }
+  }
+
+  function onMouseup({ timeStamp }) {
+    if (!proxyClickEnabled.value || !shouldProxy.value) return;
+    const { mousedownDurationPrevent } = resolvedProxyOptions.value;
+    if (timeStamp - proxyStart.value < mousedownDurationPrevent) {
+      if (isTitleProxy.value) {
+        link.value?.click();
+      } else if (isEventProxy.value) {
+        const proxyTarget = cardRoot.value?.querySelector('[data-ulu-card-proxy-target]');
+        if (proxyTarget) {
+          proxyTarget.click();
+        } else {
+          emit('proxy-click');
         }
-      },
+      }
     }
-  };
-</script>
+    shouldProxy.value = false;
+  }
+</script>

package/lib/components/elements/UluDefinitionList.vue

@@ -1,5 +1,5 @@
 <template>
-  <dl :class="classes.list">
+  <dl class="definition-list" :class="[resolvedModifiers, classes.list]">
     <div 
       v-for="(item, index) in items" 
       :key="index"
@@ -10,6 +10,7 @@
           {{ item.term }}
         </slot>
       </dt>
+      
       <dd :class="classes.description">
         <slot name="description" :item="item" :index="index">
           {{ item.description }}
@@ -20,7 +21,10 @@
 </template>
 
 <script setup>
-  defineProps({
+  import { computed } from 'vue';
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
     /**
      * Array of term, and description (props in object)
      * - Can use slots also
@@ -32,6 +36,54 @@
     classes: {
       type: Object,
       default: () => ({})
-    }
+    },
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array],
+    /**
+     * Displays only the definition descriptions on the same line.
+     */
+    inline: Boolean,
+    /**
+     * Displays both the definition term and its descriptions on the same line.
+     */
+    inlineAll: Boolean,
+    /**
+     * Displays the list in a two-column grid on larger screens.
+     */
+    table: Boolean,
+    /**
+     * Adds a rule between each item.
+     */
+    separated: Boolean,
+    /**
+     * Adds a rule to the top of the first item.
+     */
+    separatedFirst: Boolean,
+    /**
+     * Adds a rule to the bottom of the last item.
+     */
+    separatedLast: Boolean,
+    /**
+     * Reduces the margin between items.
+     */
+    compact: Boolean,
+  });
+
+  const internalModifiers = computed(() => ({
+    "inline" : props.inline,
+    "inline-all" : props.inlineAll,
+    "table" : props.table,
+    "separated" : props.separated,
+    "separated-first" : props.separatedFirst,
+    "separated-last" : props.separatedLast,
+    "compact" : props.compact,
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    internal: internalModifiers,
+    baseClass: "definition-list"
   });
 </script>

package/lib/components/forms/UluSelectableMenu.vue

@@ -1,7 +1,10 @@
 <template>
   <div 
     class="menu-stack form-theme" 
-    :class="{ 'menu-stack--hide-inputs' : hideInputs }"
+    :class="{ 
+      'menu-stack--hide-inputs' : hideInputs,
+      'menu-stack--compact' : compact
+    }"
     :role="groupRole" 
     :aria-labelledby="legendId"
   >
@@ -40,6 +43,10 @@ const props = defineProps({
    * An array of options for the menu.
    */
   options: Array,
+  /**
+   * Use compact modifier on menu stack
+   */
+  compact: Boolean,
   /**
    * The type of input to use ('checkbox' or 'radio').
    */

package/lib/components/index.js

@@ -42,12 +42,14 @@ export { default as UluMenu } from './navigation/UluMenu.vue';
 export { default as UluMenuStack } from './navigation/UluMenuStack.vue';
 export { default as UluNavStrip } from './navigation/UluNavStrip.vue';
 export { default as UluSkipLink } from './navigation/UluSkipLink.vue';
-export { default as UluCondText } from './utils/UluCondText.vue';
+export { default as UluConditionalText } from './utils/UluConditionalText.vue';
+export { default as UluConditionalWrapper } from './utils/UluConditionalWrapper.vue';
 export { default as UluEmpty } from './utils/UluEmpty.vue';
 export { default as UluEmptyView } from './utils/UluEmptyView.vue';
 export { default as UluPlaceholderImage } from './utils/UluPlaceholderImage.vue';
 export { default as UluPlaceholderText } from './utils/UluPlaceholderText.vue';
 export { default as UluRouteAnnouncer } from './utils/UluRouteAnnouncer.vue';
+export { default as UluSanityRichText } from './utils/UluSanityRichText.vue';
 export { default as UluAnimateNumber } from './visualizations/UluAnimateNumber.vue';
 export { default as UluProgressBar } from './visualizations/UluProgressBar.vue';
 export { default as UluProgressCircle } from './visualizations/UluProgressCircle.vue';

package/lib/components/navigation/UluMenu.vue

@@ -17,13 +17,15 @@
       <component
         :is="item.to || item.path ? 'router-link' : item.click ? 'button' : 'a'"
         v-bind="{
-          ...(item.to || item.path ? { to: item.to || item.path } : {}),
+          ...(item.to || item.path ? {
+            to: item.to || item.path,
+            activeClass: classes.linkActive || null,
+            exactActiveClass: classes.linkExactActive || null
+          } : {}),
           ...(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"