@ulu/frontend-vue 0.1.1-beta.17 → 0.1.1-beta.19

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="[
@@ -76,166 +77,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/navigation/UluMenuStack.vue

@@ -56,8 +56,8 @@
   });
 
   const internalModifiers = computed(() => ({
-    'hanging' : props.hanging,
-    'compact' : props.compact,
+    "hanging" : props.hanging,
+    "compact" : props.compact,
   }));
 
   const { resolvedModifiers } = useModifiers({ 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.17",
+  "version": "0.1.1-beta.19",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -63,7 +63,7 @@
   "peerDependencies": {
     "@formkit/auto-animate": "^0.9.0",
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.114",
+    "@ulu/frontend": "^0.1.0-beta.118",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
@@ -87,7 +87,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.114",
+    "@ulu/frontend": "^0.1.0-beta.118",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",