@ulu/frontend-vue 0.2.0-beta.8 → 0.3.0

package/lib/components/elements/UluAlert.vue

@@ -21,60 +21,47 @@
   </div>
 </template>
 
-<script>
+<script setup>
   import { computed } from "vue";
-  import UluButton from "./UluButton.vue";
   import UluIcon from "./UluIcon.vue";
   import { useModifiers } from "../../composables/useModifiers.js";
-  /**
-   * Callout with alert layout
-   */
-  export default {
-    name: "UluAlert",
-    components: {
-      UluButton,
-      UluIcon
-    },
-    props: {
-      /**
-       * Alert Title
-       */
-      title: String,
-      /**
-       * Alert description
-       */
-      description: String,
-      /**
-       * Pass specific icon definition, else it will resolve based on common types
-       */
-      icon: String,
-      /**
-       * Error, warning, info, success etc (must have these callout modifiers setup and this is used for type color [ie. color-error])
-       */
-      type: {
-        type: String,
-        default: "danger"
-      },
-      /**
-       * Compact callout style
-       */
-      compact: Boolean,
-      /**
-       * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
-       */
-      modifiers: [String, Array]
+
+  const props = defineProps({
+    /**
+     * Alert Title
+     */
+    title: String,
+    /**
+     * Alert description
+     */
+    description: String,
+    /**
+     * Pass specific icon definition, else it will resolve based on common types
+     */
+    icon: String,
+    /**
+     * Error, warning, info, success etc (must have these callout modifiers setup and this is used for type color [ie. color-error])
+     */
+    type: {
+      type: String,
+      default: "danger"
     },
-    setup(props) {
-      const { resolvedModifiers } = useModifiers({ 
-        props, 
-        baseClass: "callout",
-        internal: computed(() => ({
-          [props.type] : props.type, 
-          "compact": props.compact,
-        }))
-      });
+    /**
+     * Compact callout style
+     */
+    compact: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+     */
+    modifiers: [String, Array]
+  });
 
-      return { resolvedModifiers };
-    }
-  };
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "callout",
+    internal: computed(() => ({
+      [props.type] : props.type, 
+      "compact": props.compact,
+    }))
+  });
 </script>

package/lib/components/elements/UluBadgeStack.vue

@@ -1,5 +1,8 @@
 <template>
-  <ul class="badge-stack">
+  <ul 
+    v-if="items?.length"
+    class="badge-stack" 
+  >
     <li
       class="badge-stack__item"
       v-for="(item, index) in items"

package/lib/components/elements/UluButton.vue

@@ -1,22 +1,16 @@
 <template>
-  <component 
-    :is="element" 
+  <UluAction 
+    :to="to"
+    :href="href"
+    :target="target"
+    :download="download"
     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"/>
@@ -36,126 +30,108 @@
       class="button__icon"
     />
     <slot name="after"/>
-  </component>
+  </UluAction>
 </template>
 
-<script>
-  import { RouterLink } from "vue-router";
+<script setup>
+  import { computed } from "vue";
+  import UluAction from "../utils/UluAction.vue";
   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;
-      }
-    }
-  };
+
+  const props = defineProps({
+    /**
+     * 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]
+  });
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "button",
+    internal: computed(() => ({
+      "transparent" : props.transparent,
+      "primary" : props.primary,
+      "secondary" : props.secondary,
+      "outline" : props.outline,
+      "small" : props.small,
+      "large" : props.large,
+      "icon" : props.iconOnly,
+      [props.size] : props.size
+    }))
+  });
+
+  const resolvedAriaLabel = computed(() => {
+    const label = props.alt || (props.iconOnly && props.text);
+    return label ? label : null;
+  });
 </script>

package/lib/components/elements/UluButtonVerbose.vue

@@ -1,15 +1,11 @@
 <template>
-  <component
-    :is="element"
+  <UluAction
+    :to="to"
+    :href="href"
+    :target="target"
+    :download="download"
     class="button-verbose"
-    :class="[
-      {
-        'button-verbose--inline': inline,
-        'button-verbose--full-width': fullWidth,
-      },
-      resolvedModifiers
-    ]"
-    v-bind="attrs"
+    :class="resolvedModifiers"
   >
     <component 
       v-if="$slots.title || title" 
@@ -31,89 +27,71 @@
       class="button-verbose__icon"
       aria-hidden="true"
     />
-  </component>
+  </UluAction>
 </template>
 
-<script>
-  import { RouterLink } from "vue-router";
+<script setup>
+  import { computed } from "vue";
+  import UluAction from "../utils/UluAction.vue";
   import UluIcon from "./UluIcon.vue";
   import { useModifiers } from "../../composables/useModifiers.js";
 
-  export default {
-    name: "UluButtonVerbose",
-    components: {
-      UluIcon
+  const props = defineProps({
+    /**
+     * The title of the button. Can also be passed via slot.
+     */
+    title: String,
+    /**
+     * Optional element to use for title
+     */
+    titleElement: {
+      type: String,
+      default: "strong"
     },
-    props: {
-      /**
-       * The title of the button. Can also be passed via slot.
-       */
-      title: String,
-      /**
-       * Optional element to use for title
-       */
-      titleElement: {
-        type: String,
-        default: "strong"
-      },
-      /**
-       * The body text of the button. Can also be passed via slot.
-       */
-      body: String,
-      /**
-       * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
-       */
-      icon: [String, Array],
-      /**
-       * 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],
-      /**
-       * Preset to set inline style
-       */
-      inline: Boolean,
-      /**
-       * Preset to set full-width style
-       */
-      fullWidth: Boolean,
-      /**
-       * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
-       */
-      modifiers: [String, Array]
-    },
-    setup(props) {
-      const { resolvedModifiers } = useModifiers({ props, baseClass: "button-verbose" });
-      return { resolvedModifiers };
-    },
-    computed: {
-      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;
-      }
-    }
-  };
+    /**
+     * The body text of the button. Can also be passed via slot.
+     */
+    body: String,
+    /**
+     * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
+     */
+    icon: [String, Array],
+    /**
+     * 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],
+    /**
+     * Preset to set inline style
+     */
+    inline: Boolean,
+    /**
+     * Preset to set full-width style
+     */
+    fullWidth: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+     */
+    modifiers: [String, Array]
+  });
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "button-verbose",
+    internal: computed(() => ({
+      "inline": props.inline,
+      "full-width": props.fullWidth,
+    }))
+  });
 </script>

package/lib/components/elements/UluCallout.vue

@@ -7,24 +7,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
   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 };
-    }
-  };
+
+  const props = defineProps({
+    /**
+     * Add full height utility class
+     */
+    fullHeight: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     * - Can be String or Array of Strings
+     */
+    modifiers: [String, Array]
+  });
+
+  const { resolvedModifiers } = useModifiers({ props, baseClass: "callout" });
 </script>

package/lib/components/elements/UluCaptionedFigure.vue

@@ -0,0 +1,40 @@
+<template>
+  <figure class="captioned-figure" :class="resolvedModifiers">
+    <slot></slot>
+    <figcaption v-if="caption || $slots.caption" class="captioned-figure__caption">
+      <slot name="caption">{{ caption }}</slot>
+    </figcaption>
+  </figure>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { useModifiers } from '../../composables/useModifiers.js';
+
+  const props = defineProps({
+    /**
+     * The text content for the caption.
+     */
+    caption: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Positioning (e.g., 'bottom', 'center', 'right') else defaults to traditional
+     */
+    position: String,
+    /**
+     * Modifiers for styling and positioning (e.g., 'bottom', 'center', 'right', 'traditional').
+     */
+    modifiers: [String, Array]
+  });
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "captioned-figure",
+    internal: computed(() => ({
+      "traditional" : !props.position,
+      [props.position] : props.position
+    }))
+  });
+</script>