@ulu/frontend-vue 0.5.1 → 0.5.3

package/lib/components/collapsible/UluAccordionGroup.vue

@@ -1,91 +1,83 @@
 <template>
-  <div  
-    v-if="items?.length"
-    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"
-      :trigger-text-element="triggerTextElement"
-      :modifiers="modifiers"
-      :animate="animate"
-    >
-      <template #trigger="{ isOpen }" v-if="$slots.trigger">
-        <slot name="trigger" :item="item" :index="index" :isOpen="isOpen"></slot>
-      </template>
+  <div class="accordion-group">
+    <template v-if="items?.length">
+      <UluAccordion
+        v-for="(item, index) in items"
+        :key="index"
+        :start-open="item.isOpen"
+        :trigger-text="item.title"
+        :classes="item.classes"
+        :trigger-text-element="triggerTextElement"
+        :modifiers="modifiers"
+        :animate="animate"
+      >
+        <template #trigger="{ isOpen }" v-if="$slots.trigger">
+          <slot name="trigger" :item="item" :index="index" :isOpen="isOpen"></slot>
+        </template>
 
-      <template #icon="{ isOpen }" v-if="$slots.icon">
-        <slot name="icon" :item="item" :index="index" :isOpen="isOpen"></slot>
-      </template>
+        <template #icon="{ isOpen }" v-if="$slots.icon">
+          <slot name="icon" :item="item" :index="index" :isOpen="isOpen"></slot>
+        </template>
 
-      <template #default="{ isOpen, toggle }">
-        <slot name="item" :item="item" :index="index" :isOpen="isOpen" :toggle="toggle">
-          {{ item.content }}
-        </slot>
-      </template>
-    </UluAccordion>
+        <template #default="{ isOpen, toggle }">
+          <slot name="item" :item="item" :index="index" :isOpen="isOpen" :toggle="toggle">
+            {{ item.content }}
+          </slot>
+        </template>
+      </UluAccordion>
+    </template>
+    <slot v-else></slot>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import UluAccordion from './UluAccordion.vue';
+  import { ref, provide } 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: () => []
-  },
-  /**
-   * If using summary text sets the inner element the text is wrapped in, usually a headline or strong
-   */
-  triggerTextElement: {
-    type: String,
-    default: "strong"
-  },
-  /**
-   * Class modifiers (ie. 'transparent', 'secondary', etc)
-   */
-  modifiers: [String, Array],
-  /**
-   * 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: true
-  },
-});
+  const props = defineProps({
+    /**
+     * Array of items to render as accordions.
+     * Each item can have: title, content, isOpen, classes
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If using summary text sets the inner element the text is wrapped in, usually a headline or strong
+     */
+    triggerTextElement: {
+      type: String,
+      default: "strong"
+    },
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array],
+    /**
+     * 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: true
+    },
+  });
 
-const internalItems = ref([]);
+  const activeAccordionId = ref(null);
 
-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;
+  function toggle(id, isOpen) {
+    if (isOpen) {
+      activeAccordionId.value = id;
+    } else if (activeAccordionId.value === id) {
+      activeAccordionId.value = null;
+    }
   }
-}
+
+  provide('uluAccordionGroup', {
+    activeAccordionId,
+    toggle
+  });
 </script>

package/lib/components/elements/UluDefinitionList.vue

@@ -1,41 +1,44 @@
 <template>
   <dl 
-    v-if="items?.length"
+    v-if="items !== undefined ? items.length : $slots.default"
     class="definition-list" 
     :class="[resolvedModifiers, classes.list]"
   >
-    <div 
-      v-for="(item, index) in items" 
-      :key="index"
-      :class="classes.item"
-    >
-      <dt :class="classes.term">
-        <slot name="term" :item="item" :index="index">
-          {{ item.term }}
-        </slot>
-      </dt>
-      
-      <dd 
-        v-for="(desc, descIndex) in getDescriptions(item)"
-        :key="descIndex"
-        :class="classes.description"
+    <template v-if="items !== undefined">
+      <div 
+        v-for="(item, index) in items" 
+        :key="index"
+        :class="classes.item"
       >
-        <slot 
-          name="description" 
-          :item="item" 
-          :description="desc" 
-          :index="index"
-          :descriptionIndex="descIndex"
+        <dt :class="classes.term">
+          <slot name="term" :item="item" :index="index">
+            {{ item.term }}
+          </slot>
+        </dt>
+        
+        <dd 
+          v-for="(desc, descIndex) in getDescriptions(item)"
+          :key="descIndex"
+          :class="classes.description"
         >
-          {{ desc }}
-        </slot>
-      </dd>
-    </div>
+          <slot 
+            name="description" 
+            :item="item" 
+            :description="desc" 
+            :index="index"
+            :descriptionIndex="descIndex"
+          >
+            {{ desc }}
+          </slot>
+        </dd>
+      </div>
+    </template>
+    <slot v-else></slot>
   </dl>
 </template>
 
 <script setup>
-  import { computed } from 'vue';
+  import { computed, provide } from 'vue';
   import { useModifiers } from "../../composables/useModifiers.js";
 
   const props = defineProps({
@@ -85,6 +88,8 @@
     compact: Boolean,
   });
 
+  provide("uluDefinitionListClasses", computed(() => props.classes));
+
   const internalModifiers = computed(() => ({
     "inline" : props.inline,
     "inline-all" : props.inlineAll,

package/lib/components/elements/UluDefinitionListItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="[listClasses.item, classes?.item]">
+    <dt :class="[listClasses.term, classes?.term]">
+      <slot name="term">{{ term }}</slot>
+    </dt>
+    <dd 
+      v-for="(desc, index) in descriptions"
+      :key="index"
+      :class="[listClasses.description, classes?.description]"
+    >
+      <slot name="description" :description="desc" :index="index">
+        {{ desc }}
+      </slot>
+    </dd>
+  </div>
+</template>
+
+<script setup>
+  import { computed, inject } from "vue";
+
+  const props = defineProps({
+    /**
+     * The term text (renders inside dt)
+     */
+    term: String,
+    /**
+     * The description text or array of strings (renders inside dd)
+     */
+    description: [String, Array],
+    /**
+     * Optional classes object to override/append to injected parent classes { item, term, description }
+     */
+    classes: Object
+  });
+
+  const injectedClasses = inject("uluDefinitionListClasses", { value: {} });
+  const listClasses = computed(() => injectedClasses.value || {});
+
+  const descriptions = computed(() => {
+    if (!props.description) return [];
+    return Array.isArray(props.description) ? props.description : [props.description];
+  });
+</script>

package/lib/components/elements/UluList.vue

@@ -1,6 +1,6 @@
 <template>
   <component 
-    v-if="items?.length"
+    v-if="items !== undefined ? items.length : $slots.default"
     :is="listElement"
     :class="[
       {
@@ -17,23 +17,26 @@
     :reversed="isOrdered ? reversed : null"
     :start="start"
   >
-    <li 
-      v-for="(item, index) in items" 
-      :key="index"
-      :class="[
-        classes.item,
-        item?.classes?.item
-      ]"
-    >
-      <slot :item="item" :index="index">
-        {{ item }}
-      </slot>
-    </li>
+    <template v-if="items !== undefined">
+      <li 
+        v-for="(item, index) in items" 
+        :key="index"
+        :class="[
+          classes.item,
+          item?.classes?.item
+        ]"
+      >
+        <slot :item="item" :index="index">
+          {{ item }}
+        </slot>
+      </li>
+    </template>
+    <slot v-else></slot>
   </component>
 </template>
 
 <script setup>
-  import { computed } from "vue";
+  import { computed, provide } from "vue";
 
   const props = defineProps({
     /**
@@ -84,6 +87,8 @@
     listStyleType: String,
   });
 
+  provide("uluListClasses", computed(() => props.classes));
+
   const isOrdered = computed(() => props.ordered || props.forceOrdered);
   const listElement = computed(() => isOrdered.value ? "ol" : "ul");
 </script>

package/lib/components/elements/UluListItem.vue

@@ -0,0 +1,19 @@
+<template>
+  <li :class="[listClasses.item, classes]">
+    <slot></slot>
+  </li>
+</template>
+
+<script setup>
+  import { computed, inject } from "vue";
+
+  defineProps({
+    /**
+     * Optional class binding to append to the injected parent classes
+     */
+    classes: [String, Array, Object]
+  });
+
+  const injectedClasses = inject("uluListClasses", { value: {} });
+  const listClasses = computed(() => injectedClasses.value || {});
+</script>

package/lib/components/index.js

@@ -23,6 +23,7 @@ export { default as UluCallout } from './elements/UluCallout.vue';
 export { default as UluCaptionedFigure } from './elements/UluCaptionedFigure.vue';
 export { default as UluCard } from './elements/UluCard.vue';
 export { default as UluDefinitionList } from './elements/UluDefinitionList.vue';
+export { default as UluDefinitionListItem } from './elements/UluDefinitionListItem.vue';
 export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluImage } from './elements/UluImage.vue';
@@ -31,6 +32,7 @@ export { default as UluImage } from './elements/UluImage.vue';
 // export { default as UluImageSlider } from './elements/UluImageSlider.vue';
 
 export { default as UluList } from './elements/UluList.vue';
+export { default as UluListItem } from './elements/UluListItem.vue';
 export { default as UluMain } from './elements/UluMain.vue';
 export { default as UluOverflowScroller } from './elements/UluOverflowScroller.vue';
 export { default as UluRule } from './elements/UluRule.vue';

package/lib/components/navigation/UluBreadcrumb.vue

@@ -5,18 +5,18 @@
     v-if="items.length"
   >
     <ol :class="classes.list">
-      <li v-for="(item, index) in items" :key="index" :class="classes.item">
+      <li v-for="(item, index) in items" :key="index" :class="[classes.item, item?.classes?.item]">
         <router-link
           v-if="!item.current"
           :to="item.to"
-          :class="classes.link"
+          :class="[classes.link, item?.classes?.link]"
           :aria-current="item.current ? 'page' : null"
         >
           <slot :item="item">
             {{ item.title }}
           </slot>
         </router-link>
-        <span v-else :class="item.current">
+        <span v-else :class="[classes.current, item?.classes?.current]">
           <slot :item="item">
             {{ item.title }}
           </slot>
@@ -24,7 +24,7 @@
         <template v-if="index < items.length - 1">
           <slot name="separator">
             <UluIcon
-              :class="classes.separator"
+              :class="[classes.separator, item?.classes?.separator]"
               :icon="separatorIcon || 'type:pathSeparator'"
             />
           </slot>
@@ -56,7 +56,7 @@
     separatorIcon: String,
     /**
      * Classes object to be applied to elements.
-     * Keys: nav, list, item, link, icon
+     * Keys: nav, list, item, link, current, separator
      */
     classes: {
       type: Object,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [
@@ -65,7 +65,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@headlessui/vue": "^1.7.23",
     "@portabletext/vue": "^1.0.14",
-    "@ulu/frontend": "^0.4.0",
+    "@ulu/frontend": "^0.4.3",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "fuse.js": "^6.6.2",
@@ -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.4.0",
+    "@ulu/frontend": "^0.4.3",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",