@ulu/frontend-vue 0.1.0-beta.9 → 0.1.1-beta.10

package/lib/components/collapsible/UluAccordion.vue

@@ -1,82 +1,100 @@
 <template>
-  <Disclosure :defaultOpen="defaultOpen" v-slot="{ open }">
-    <div 
-      class="accordion" 
-      :class="[
-        { [activeClass]: open }, 
-        classes.container, 
-        resolvedModifiers
-      ]"
-    >
-      <DisclosureButton 
-        class="accordion__summary" 
-        :class="[
-          { [activeClass]: open }, 
-          classes.summary
-        ]"
-      >
-        <slot name="summary" :open="open">
-          <component :is="summaryTextElement">
-            {{ summaryText }}
-          </component>
-        </slot>
-        <slot name="icon" :open="open">
-          <span class="accordion__icon" :class="classes.icon">
-            <UluIcon 
-              :icon="open ? 'type:collapse' : 'type:expand'"
-              style="display: inline;"
-            />
-          </span>
-        </slot>
-      </DisclosureButton>
-      <DisclosurePanel class="accordion__content" :class="classes.content">
-        <slot :open="open"/>
-      </DisclosurePanel>
-    </div>
-  </Disclosure>
+  <UluCollapsible
+    :model-value="modelValue"
+    :start-open="startOpen"
+    :trigger-text="triggerText"
+    :classes="mergedClasses"
+    :animate="animate"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template #trigger="{ isOpen: open, toggle }">
+      <slot name="trigger" :open="open" :toggle="toggle">
+        <component :is="triggerTextElement">
+          {{ triggerText }}
+        </component>
+      </slot>
+      <slot name="icon" :open="open">
+        <span class="accordion__icon" :class="classes.icon">
+          <UluIcon 
+            :icon="open ? 'type:collapse' : 'type:expand'"
+            style="display: inline;"
+          />
+        </span>
+      </slot>
+    </template>
+
+    <template #default="{ isOpen: open, toggle }">
+      <slot :open="open" :toggle="toggle"/>
+    </template>
+  </UluCollapsible>
 </template>
 
 <script setup>
+  import { computed } from 'vue';
   import UluIcon from "../elements/UluIcon.vue";
+  import UluCollapsible from "./UluCollapsible.vue";
   import { useModifiers } from "../../composables/useModifiers.js";
-  import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
+
   const props = defineProps({
+    /**
+     * v-model for controlling open state  (optional)
+     */
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    },
     /**
      * Whether the accordion is open by default
      */
-    defaultOpen: Boolean,
+    startOpen: Boolean,
+    /**
+     * Enable or configure animations.
+     * - `false` (default) to disable all animations.
+     * - `true` to enable animations with default settings.
+     * - An object to provide custom options to auto-animate (e.g., { duration: 100, easing: 'linear' }).
+     */
+    animate: {
+      type: [Boolean, Object],
+      default: false
+    },
     /**
-     * Test to use for accordion, alternatively use #toggle slot
+     * Text to use for accordion, alternatively use #trigger slot
      */
-    summaryText: String,
+    triggerText: String,
     /**
      * If using summary text sets the inner element the text is wrapped in, usually a headline or strong
      */
-    summaryTextElement: {
+    triggerTextElement: {
       type: String,
       default: "strong"
     },
     /**
-     * Classes for elements ({ container, summary, icon, content })
+     * Classes for elements. See UluCollapsible for all available class keys (toggle, content, etc).
+     * The 'icon' key is also available for the icon span.
      * - Any valid class binding value per element
      */
     classes: {
       type: Object,
-      default: () => ({})
+      default: () => ({
+        container: 'accordion',
+        toggle: 'accordion__summary',
+        content: 'accordion__content',
+        containerOpen: 'is-active'
+      })
     },
     /**
-     * Active class output on container and toggle elements
-     */
-    activeClass: {
-      type: String,
-      default: "is-active"
-    },
-    /**
-     * Modifiers for tag class
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
      */
     modifiers: [String, Array]
   });
 
-  const { resolvedModifiers } = useModifiers({ props, baseClass: "button" });
-  
-</script>
+  const emit = defineEmits(['update:modelValue']);
+
+  const { resolvedModifiers } = useModifiers({ props, baseClass: "accordion" });
+
+  const mergedClasses = computed(() => {
+    const merged = { ...props.classes };
+    merged.container = [merged.container, resolvedModifiers.value];
+    return merged;
+  });
+</script>

package/lib/components/collapsible/UluAccordionGroup.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="accordion-group">
+    <UluAccordion
+      v-for="(item, index) in internalItems"
+      :key="index"
+      :model-value="item.isOpen"
+      @update:modelValue="(newValue) => handleToggle(index, newValue)"
+      :trigger-text="item.title"
+      :classes="item.classes"
+    >
+      <slot name="item" :item="item" :index="index">
+        {{ item.content }}
+      </slot>
+    </UluAccordion>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import UluAccordion from './UluAccordion.vue';
+
+const props = defineProps({
+  /**
+   * Array of items to render as accordions.
+   * Each item can have: title, content, isOpen, classes
+   */
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const internalItems = ref([]);
+
+watch(() => props.items, (newItems) => {
+  internalItems.value = newItems.map(item => ({
+    ...item,
+    isOpen: item.isOpen || false
+  }));
+}, { immediate: true, deep: true });
+
+
+function handleToggle(selectedIndex, newValue) {
+  if (newValue) {
+    // if opening, close all others
+    internalItems.value.forEach((item, index) => {
+      item.isOpen = index === selectedIndex;
+    });
+  } else {
+    // if closing, just close that one
+    internalItems.value[selectedIndex].isOpen = false;
+  }
+}
+</script>

package/lib/components/collapsible/UluCollapsible.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    ref="container"
+    @keydown.esc="handleEscape"
+    :class="[classes.container, containerStateClasses]"
+  >
+    <button
+      :class="classes.toggle"
+      :id="toggleId"
+      :aria-controls="contentId"
+      :aria-expanded="isOpen"
+      @click="toggle"
+    >
+      <slot name="trigger" :isOpen="isOpen" :toggle="toggle">
+        {{ triggerText }}
+      </slot>
+    </button>
+    <div
+      v-if="isOpen"
+      :class="classes.content"
+      tabindex="-1"
+      :id="contentId"
+      :aria-hidden="!isOpen"
+      :aria-labelledby="toggleId"
+    >
+      <div :class="classes.contentInner">
+        <slot :isOpen="isOpen" :toggle="toggle" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed, watch, onMounted } from 'vue';
+  import { useAutoAnimate } from '@formkit/auto-animate/vue';
+  import { newId } from '../../utils/dom.js';
+
+  const props = defineProps({
+    /**
+     * v-model for controlling open state
+     */
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    },
+    /**
+     * Set text for trigger (instead of using slot)
+     */
+    triggerText: String,
+    /**
+     * Closes with escape key
+     */
+    closeOnEscape: Boolean,
+    /**
+     * When the component is shown it should start visible or hidden
+     */
+    startOpen: Boolean,
+    /**
+     * Enable or configure animations.
+     * - `true` to enable animations with default settings (default)
+     * - `false` (disable)
+     * - An object to provide custom options to auto-animate (e.g., { duration: 100, easing: 'linear' }).
+     */
+    animate: {
+      type: [Boolean, Object],
+      default: true
+    },
+    /**
+     * Classes for elements ({ container, toggle, content, contentInner })
+     * - Any valid class binding value per element
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        container: 'ulu-collapsible',
+        toggle: 'ulu-collapsible__toggle',
+        content: 'ulu-collapsible__content',
+        contentInner: 'ulu-collapsible__content-inner',
+        containerOpen: 'ulu-collapsible--open',
+        containerClosed: 'ulu-collapsible--closed'
+      })
+    },
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const autoAnimateOptions = computed(() => {
+    if (typeof props.animate === 'object') {
+      return props.animate;
+    }
+    return {};
+  });
+
+  const [container, enableAnimations] = useAutoAnimate(autoAnimateOptions);
+
+  // Animation needs to be disabled after the component is mounted
+  onMounted(() => { enableAnimations(!!props.animate) });
+  // Then we can watch for changes
+  watch(() => props.animate, v => { enableAnimations(!!v) });
+
+  const userControlled = computed(() => props.modelValue !== undefined);
+  const internalIsOpen = ref(props.startOpen);
+
+  const isOpen = computed({
+    get() {
+      return userControlled.value ? props.modelValue : internalIsOpen.value;
+    },
+    set(newValue) {
+      if (userControlled.value) {
+        emit('update:modelValue', newValue);
+      } else {
+        internalIsOpen.value = newValue;
+      }
+    }
+  });
+
+  const toggleId = ref(newId('ulu-collapsible-toggle'));
+  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
+   */
+  function toggle() {
+    isOpen.value = !isOpen.value;
+  }
+
+  function handleEscape() {
+    if (props.closeOnEscape && isOpen.value) {
+      isOpen.value = false;
+    }
+  }
+</script>

package/lib/components/collapsible/UluDropdown.vue

@@ -1,42 +1,42 @@
 <template>
   <UluPopover :classes="popoverClasses">
     <template #trigger="{ isOpen }">
-      <slot :isOpen="isOpen"/>
+      <slot name="trigger" :isOpen="isOpen">
+        <span>{{ triggerText }}</span>
+        <UluIcon 
+          class="button__icon" 
+          icon="type:dropdownExpand" 
+          :style="{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }"
+        />
+      </slot>
     </template>
-    <template #content>
+    <template #default>
       <UluMenuStack :items="items"/>
     </template>
   </UluPopover>
 </template>
 
-<script>
+<script setup>
   import UluPopover from "../../plugins/popovers/UluPopover.vue";
   import UluMenuStack from "../navigation/UluMenuStack.vue";
-  export default {
-    name: "UluDropdown",
-    components: {
-      UluPopover,
-      UluMenuStack
-    },
-    props: {
-      /**
-       * Dropdown menu items (to be passed to UluMenu)
-       */
-      items: Array,
-      /**
-       * Class to use on trigger
-       */
-      triggerClass: {
-        type: [String, Object, Array],
-        default: "button"
-      },
-      /**
-       * Pass classes object to UluPopover classes prop
-       */
-      popoverClasses: {
-        type: Object,
-        default: () => ({})
-      }
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    /**
+     * Dropdown menu items (to be passed to UluMenu)
+     */
+    items: Array,
+    /**
+     * Optional text if not using slot
+     */
+    triggerText: String,
+    /**
+     * Pass classes object to UluPopover classes prop
+     */
+    popoverClasses: {
+      type: Object,
+      default: () => ({
+        trigger: "button"
+      })
     }
-  };
+  });
 </script>

package/lib/components/collapsible/UluOverflowPopover.vue

@@ -11,7 +11,7 @@
       <template #trigger>
         <UluIcon :icon="triggerIcon || 'type:ellipsis'"/>
       </template>
-      <template #content>
+      <template #default>
         <div class="type-word-break">
           <slot/>
         </div>

package/lib/components/elements/UluBadge.vue

@@ -26,33 +26,56 @@
   </component>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import { RouterLink } from "vue-router";
-  export default {
-    name: "UluBadge",
-    props: {
-      skeleton: Boolean,
-      size: String,
-      text: String,
-      alt: String,
-      type: String,
-      click: Function,
-      to: [Object, String],
-      href: String,
-    },
-    computed: {
-      isInteractive() {
-        return Boolean(this.to || this.click);
-      },
-      element() {
-        const { click, to, href } = this;
-        /* eslint-disable */
-        return  click ? 'button' : 
-                to ? RouterLink : 
-                href ? 'a' : 
-                'span';
-        /* eslint-enable */
-      }
-    }
-  };
+
+  const props = defineProps({
+    /**
+     * Whether to display a skeleton loading state.
+     */
+    skeleton: Boolean,
+    /**
+     * The size of the badge (e.g., 'small', 'large').
+     */
+    size: String,
+    /**
+     * The text content of the badge.
+     */
+    text: String,
+    /**
+     * Alt text for the badge, for accessibility.
+     */
+    alt: String,
+    /**
+     * The type or style of the badge (e.g., 'primary', 'secondary').
+     */
+    type: String,
+    /**
+     * A function to call when the badge is clicked. Renders as a <button>.
+     */
+    click: Function,
+    /**
+     * A Vue Router link location. Renders as a <router-link>.
+     */
+    to: [Object, String],
+    /**
+     * A URL. Renders as a standard <a> tag.
+     */
+    href: String,
+  });
+
+  const isInteractive = computed(() => {
+    return Boolean(props.to || props.click);
+  });
+
+  const element = computed(() => {
+    const { click, to, href } = props;
+    /* eslint-disable */
+    return  click ? "button" : 
+            to ? RouterLink : 
+            href ? "a" : 
+            "span";
+    /* eslint-enable */
+  });
 </script>

package/lib/components/elements/UluBadgeStack.vue

@@ -10,18 +10,13 @@
   </ul>
 </template>
 
-<script>
+<script setup>
   import UluBadge from "./UluBadge.vue";
-  export default {
-    name: 'UluBadgeStack',
-    components: {
-      UluBadge
-    },
-    props: {
-      /**
-       * Array of props for each badge
-       */
-      items: Array
-    }
-  }
+
+  defineProps({
+    /**
+     * Array of props for each badge
+     */
+    items: Array
+  });
 </script>

package/lib/components/elements/UluButtonVerbose.vue

@@ -0,0 +1,119 @@
+<template>
+  <component
+    :is="element"
+    class="button-verbose"
+    :class="[
+      {
+        'button-verbose--inline': inline,
+        'button-verbose--full-width': fullWidth,
+      },
+      resolvedModifiers
+    ]"
+    v-bind="attrs"
+  >
+    <component 
+      v-if="$slots.title || title" 
+      :is="titleElement"
+      class="button-verbose__title"
+    >
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </component>
+    <span v-if="$slots.default || body" class="button-verbose__body">
+      <slot>
+        {{ body }}
+      </slot>
+    </span>
+    <UluIcon
+      v-if="icon"
+      :icon="icon"
+      class="button-verbose__icon"
+      aria-hidden="true"
+    />
+  </component>
+</template>
+
+<script>
+  import { RouterLink } from "vue-router";
+  import UluIcon from "./UluIcon.vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  export default {
+    name: "UluButtonVerbose",
+    components: {
+      UluIcon
+    },
+    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;
+      }
+    }
+  };
+</script>

package/lib/components/elements/UluCard.vue

@@ -54,7 +54,7 @@
         </component>
         <slot name="body"/>
       </div>
-      <div class="card__aside" v-if="$slots.body">
+      <div class="card__aside" v-if="$slots.aside">
         <slot name="aside"/>
       </div>
     </div>