@ulu/frontend-vue 0.1.1-beta.18 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.18",
+  "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.117",
+    "@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.117",
+    "@ulu/frontend": "^0.1.0-beta.118",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

package/types/components/elements/UluCard.vue.d.ts

@@ -1,238 +1,66 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * 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: StringConstructor;
-        default: string;
-    };
-    /**
-     * Text for title if not using slot
-     */
-    title: StringConstructor;
-    /**
-     * Element to use for title
-     */
-    titleElement: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Title will be router link
-     */
-    titleTo: {
-        type: (ObjectConstructor | StringConstructor)[];
-        validator: (_: any, props: any) => boolean;
-    };
-    /**
-     * Will make title a link to href
-     */
-    titleHref: {
-        type: StringConstructor;
-        validator: (_: any, props: any) => boolean;
-    };
-    /**
-     * When using href this will set title link's target attribute
-     */
-    titleTarget: StringConstructor;
-    /**
-     * If set the entire card will be router link
-     * - Do not us in combination with titleTo or titleHref
-     */
-    to: (ObjectConstructor | StringConstructor)[];
-    /**
-     * If set the entire card will be a link to href
-     * - Do not us in combination with titleTo or titleHref
-     */
-    href: {
-        type: StringConstructor;
-    };
-    /**
-     * When using href this will set link's target attribute
-     */
-    target: StringConstructor;
-    /**
-     * Classes with class bindings for different elements including ({ title, image })
-     */
-    classes: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    /**
-     * Whether to proxy clicks of non-interactive elements (making whole card clickable)
-     */
-    proxyClick: BooleanConstructor;
-    /**
-     * Options to be merged for proxy click settings ({ preventSelector, preventSelectionDuration })
-     */
-    proxyClickOptions: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    /**
-     * Source of image
-     */
-    imageSrc: StringConstructor;
-    /**
-     * Alt text for image
-     */
-    imageAlt: StringConstructor;
-    /**
-     * If true image will use icon modifier (displays for image adjusts for icon vs full image)
-     */
-    imageIcon: BooleanConstructor;
-    /**
-     * Horizontal card layout
-     */
-    horizontal: BooleanConstructor;
-    /**
-     * Horizontal centered card layout
-     */
-    horizontalCenter: BooleanConstructor;
-    /**
-     * Overlay card layout
-     */
-    overlay: BooleanConstructor;
-    /**
-     * Class modifiers (ie. 'transparent', 'secondary', etc)
-     * - Can be String or Array of Strings
-     */
-    modifiers: (StringConstructor | ArrayConstructor)[];
-}>, {
-    resolvedModifiers: any;
-}, {
-    proxyClickEnabled: string | Record<string, any> | null;
-    resolvedProxyOptions: {
-        selectorPrevent: string;
-        mousedownDurationPrevent: number;
-    };
-    cursorStyle: null;
-    proxyStart: null;
-    shouldProxy: boolean;
-}, {
-    resolvedElement(): string | import("vue-router")._RouterLinkI;
-}, {
-    onMousedown({ target, timeStamp }: {
-        target: any;
-        timeStamp: any;
-    }): void;
-    onMouseup({ timeStamp }: {
-        timeStamp: any;
-    }): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * 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: StringConstructor;
-        default: string;
-    };
-    /**
-     * Text for title if not using slot
-     */
-    title: StringConstructor;
-    /**
-     * Element to use for title
-     */
-    titleElement: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Title will be router link
-     */
-    titleTo: {
-        type: (ObjectConstructor | StringConstructor)[];
-        validator: (_: any, props: any) => boolean;
-    };
-    /**
-     * Will make title a link to href
-     */
-    titleHref: {
-        type: StringConstructor;
-        validator: (_: any, props: any) => boolean;
-    };
-    /**
-     * When using href this will set title link's target attribute
-     */
-    titleTarget: StringConstructor;
-    /**
-     * If set the entire card will be router link
-     * - Do not us in combination with titleTo or titleHref
-     */
-    to: (ObjectConstructor | StringConstructor)[];
-    /**
-     * If set the entire card will be a link to href
-     * - Do not us in combination with titleTo or titleHref
-     */
-    href: {
-        type: StringConstructor;
-    };
-    /**
-     * When using href this will set link's target attribute
-     */
-    target: StringConstructor;
-    /**
-     * Classes with class bindings for different elements including ({ title, image })
-     */
-    classes: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    /**
-     * Whether to proxy clicks of non-interactive elements (making whole card clickable)
-     */
-    proxyClick: BooleanConstructor;
-    /**
-     * Options to be merged for proxy click settings ({ preventSelector, preventSelectionDuration })
-     */
-    proxyClickOptions: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    /**
-     * Source of image
-     */
-    imageSrc: StringConstructor;
-    /**
-     * Alt text for image
-     */
-    imageAlt: StringConstructor;
-    /**
-     * If true image will use icon modifier (displays for image adjusts for icon vs full image)
-     */
-    imageIcon: BooleanConstructor;
-    /**
-     * Horizontal card layout
-     */
-    horizontal: BooleanConstructor;
-    /**
-     * Horizontal centered card layout
-     */
-    horizontalCenter: BooleanConstructor;
-    /**
-     * Overlay card layout
-     */
-    overlay: BooleanConstructor;
-    /**
-     * Class modifiers (ie. 'transparent', 'secondary', etc)
-     * - Can be String or Array of Strings
-     */
-    modifiers: (StringConstructor | ArrayConstructor)[];
-}>> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
     classes: Record<string, any>;
     overlay: boolean;
     horizontal: boolean;
     titleElement: string;
+    cardElement: string;
     proxyClick: boolean;
+    proxyClickOptions: Record<string, any>;
     imageIcon: boolean;
     horizontalCenter: boolean;
-    cardElement: string;
-    proxyClickOptions: Record<string, any>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
+    title?: string | undefined;
+    to?: string | Record<string, any> | undefined;
+    target?: string | undefined;
+    modifiers?: string | unknown[] | undefined;
+    href?: string | undefined;
+    titleTo?: string | Record<string, any> | undefined;
+    titleHref?: string | undefined;
+    titleTarget?: string | undefined;
+    imageSrc?: string | undefined;
+    imageAlt?: string | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    title?: ((props: {}) => any) | undefined;
+} & {
+    title?: ((props: {}) => any) | undefined;
+} & {
+    title?: ((props: {}) => any) | undefined;
+} & {
+    body?: ((props: {}) => any) | undefined;
+} & {
+    aside?: ((props: {}) => any) | undefined;
+} & {
+    image?: ((props: {}) => any) | undefined;
+} & {
+    footer?: ((props: {}) => any) | undefined;
+};
+declare const emit: (event: "proxy-click", ...args: any[]) => void;
+declare const props: {
+    readonly classes: Record<string, any>;
+    readonly overlay: boolean;
+    readonly horizontal: boolean;
+    readonly titleElement: string;
+    readonly cardElement: string;
+    readonly proxyClick: boolean;
+    readonly proxyClickOptions: Record<string, any>;
+    readonly imageIcon: boolean;
+    readonly horizontalCenter: boolean;
+    readonly title?: string | undefined;
+    readonly to?: string | Record<string, any> | undefined;
+    readonly target?: string | undefined;
+    readonly modifiers?: string | unknown[] | undefined;
+    readonly href?: string | undefined;
+    readonly titleTo?: string | Record<string, any> | undefined;
+    readonly titleHref?: string | undefined;
+    readonly titleTarget?: string | undefined;
+    readonly imageSrc?: string | undefined;
+    readonly imageAlt?: string | undefined;
+};
 //# sourceMappingURL=UluCard.vue.d.ts.map

package/types/components/elements/UluCard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluCard.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluCard.vue"],"names":[],"mappings":";IA8PM;;;;OAIG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;IApGH;;;;OAIG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG"}
+{"version":3,"file":"UluCard.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluCard.vue"],"names":[],"mappings":"wBA8pBqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;2OAGrC;;;;;;;;;;;;;;;;AAlTD,mEAA0C;AAtG1C;;;;;;;;;;;;;;;;;;;;EAoGG"}