@ulu/frontend-vue 0.5.1 → 0.5.2

package/dist/components/collapsible/UluAccordion.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluAccordion.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordion.vue"],"names":[],"mappings":"AA8BA;wBA0SqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;sPASG"}
+{"version":3,"file":"UluAccordion.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordion.vue"],"names":[],"mappings":"AA+BA;wBA8VqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;sPASG"}

package/dist/components/collapsible/UluAccordion.vue.js

@@ -1,8 +1,9 @@
-import { computed as u, createBlock as l, openBlock as s, withCtx as n, renderSlot as o, resolveDynamicComponent as g, createTextVNode as f, toDisplayString as p, createElementVNode as y, normalizeClass as x, createVNode as V } from "vue";
-import v from "../elements/UluIcon.vue.js";
-import O from "./UluCollapsible.vue.js";
-import { useModifiers as T } from "../../composables/useModifiers.js";
-const E = {
+import { computed as c, inject as x, onMounted as V, createBlock as s, openBlock as d, unref as O, withCtx as i, renderSlot as l, resolveDynamicComponent as T, createTextVNode as B, toDisplayString as C, createElementVNode as M, normalizeClass as S, createVNode as $ } from "vue";
+import A from "../elements/UluIcon.vue.js";
+import b from "./UluCollapsible.vue.js";
+import { useModifiers as h } from "../../composables/useModifiers.js";
+import { newId as j } from "../../utils/dom.js";
+const G = {
   __name: "UluAccordion",
   props: {
     /**
@@ -57,49 +58,57 @@ const E = {
     modifiers: [String, Array]
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: $ }) {
-    const r = e, { resolvedModifiers: c } = T({ props: r, baseClass: "accordion" }), d = u(() => {
-      const t = { ...r.classes };
-      return t.container = [t.container, c.value], t;
+  setup(t, { emit: u }) {
+    const r = t, m = u, { resolvedModifiers: g } = h({ props: r, baseClass: "accordion" }), p = c(() => {
+      const e = { ...r.classes };
+      return e.container = [e.container, g.value], e;
+    }), o = x("uluAccordionGroup", null), a = j("ulu-accordion");
+    V(() => {
+      o && r.startOpen && o.toggle(a, !0);
     });
-    return (t, i) => (s(), l(O, {
-      "model-value": e.modelValue,
-      "start-open": e.startOpen,
-      "trigger-text": e.triggerText,
-      classes: d.value,
-      animate: e.animate,
-      "onUpdate:modelValue": i[0] || (i[0] = (a) => t.$emit("update:modelValue", a))
+    const f = c(() => o ? o.activeAccordionId.value === a : r.modelValue);
+    function y(e) {
+      o && o.toggle(a, e), m("update:modelValue", e);
+    }
+    return (e, E) => (d(), s(b, {
+      id: O(a),
+      "model-value": f.value,
+      "start-open": t.startOpen,
+      "trigger-text": t.triggerText,
+      classes: p.value,
+      animate: t.animate,
+      "onUpdate:modelValue": y
     }, {
-      trigger: n(({ isOpen: a }) => [
-        o(t.$slots, "trigger", { isOpen: a }, () => [
-          (s(), l(g(e.triggerTextElement), null, {
-            default: n(() => [
-              f(p(e.triggerText), 1)
+      trigger: i(({ isOpen: n }) => [
+        l(e.$slots, "trigger", { isOpen: n }, () => [
+          (d(), s(T(t.triggerTextElement), null, {
+            default: i(() => [
+              B(C(t.triggerText), 1)
             ]),
             _: 1
           }))
         ]),
-        o(t.$slots, "icon", { isOpen: a }, () => [
-          y("span", {
-            class: x(["accordion__icon", e.classes.icon])
+        l(e.$slots, "icon", { isOpen: n }, () => [
+          M("span", {
+            class: S(["accordion__icon", t.classes.icon])
           }, [
-            V(v, {
-              icon: a ? "type:collapse" : "type:expand",
+            $(A, {
+              icon: n ? "type:collapse" : "type:expand",
               style: { display: "inline" }
             }, null, 8, ["icon"])
           ], 2)
         ])
       ]),
-      default: n(({ isOpen: a, toggle: m }) => [
-        o(t.$slots, "default", {
-          isOpen: a,
-          toggle: m
+      default: i(({ isOpen: n, toggle: v }) => [
+        l(e.$slots, "default", {
+          isOpen: n,
+          toggle: v
         })
       ]),
       _: 3
-    }, 8, ["model-value", "start-open", "trigger-text", "classes", "animate"]));
+    }, 8, ["id", "model-value", "start-open", "trigger-text", "classes", "animate"]));
   }
 };
 export {
-  E as default
+  G as default
 };

package/dist/components/collapsible/UluAccordionGroup.vue.d.ts

@@ -14,28 +14,29 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         readonly items?: unknown[] | undefined;
         readonly modifiers?: string | unknown[] | undefined;
     };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 type __VLS_TemplateResult = {
     attrs: Partial<{}>;
     slots: {
         trigger?(_: {
-            item: never;
+            item: unknown;
             index: number;
             isOpen: boolean | undefined;
         }): any;
         icon?(_: {
-            item: never;
+            item: unknown;
             index: number;
             isOpen: boolean | undefined;
         }): any;
         item?(_: {
-            item: never;
+            item: unknown;
             index: number;
             isOpen: true;
             toggle: typeof toggle;
         }): any;
+        default?(_: {}): any;
     };
     refs: {};
-    rootEl: any;
+    rootEl: HTMLDivElement;
 };
 //# sourceMappingURL=UluAccordionGroup.vue.d.ts.map

package/dist/components/collapsible/UluAccordionGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluAccordionGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordionGroup.vue"],"names":[],"mappings":"AAgCA;wBAkRqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;;;2OAOG"}
+{"version":3,"file":"UluAccordionGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordionGroup.vue"],"names":[],"mappings":"AA+BA;wBAgQqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;sPAQG"}

package/dist/components/collapsible/UluAccordionGroup.vue.js

@@ -1,9 +1,6 @@
-import { ref as f, watch as p, createElementBlock as g, createCommentVNode as y, openBlock as s, Fragment as O, renderList as h, createBlock as k, createSlots as v, withCtx as l, renderSlot as m, createTextVNode as $, toDisplayString as S } from "vue";
-import B from "./UluAccordion.vue.js";
-const E = {
-  key: 0,
-  class: "accordion-group"
-}, x = {
+import { ref as m, provide as f, createElementBlock as c, openBlock as l, renderSlot as s, Fragment as p, renderList as y, createBlock as k, createSlots as $, withCtx as a, createTextVNode as v, toDisplayString as A } from "vue";
+import O from "./UluAccordion.vue.js";
+const S = { class: "accordion-group" }, B = {
   __name: "UluAccordionGroup",
   props: {
     /**
@@ -36,48 +33,42 @@ const E = {
       default: !0
     }
   },
-  setup(a) {
-    const u = a, o = f([]);
-    p(() => u.items, (e) => {
-      o.value = e.map((i) => ({
-        ...i,
-        isOpen: i.isOpen || !1
-      }));
-    }, { immediate: !0, deep: !0 });
-    function c(e, i) {
-      i ? o.value.forEach((t, r) => {
-        t.isOpen = r === e;
-      }) : o.value[e].isOpen = !1;
+  setup(r) {
+    const i = m(null);
+    function u(e, g) {
+      g ? i.value = e : i.value === e && (i.value = null);
     }
-    return (e, i) => a.items?.length ? (s(), g("div", E, [
-      (s(!0), g(O, null, h(o.value, (t, r) => (s(), k(B, {
-        key: r,
-        "model-value": t.isOpen,
-        "onUpdate:modelValue": (n) => c(r, n),
+    return f("uluAccordionGroup", {
+      activeAccordionId: i,
+      toggle: u
+    }), (e, g) => (l(), c("div", S, [
+      r.items?.length ? (l(!0), c(p, { key: 0 }, y(r.items, (t, o) => (l(), k(O, {
+        key: o,
+        "start-open": t.isOpen,
         "trigger-text": t.title,
         classes: t.classes,
-        "trigger-text-element": a.triggerTextElement,
-        modifiers: a.modifiers,
-        animate: a.animate
-      }, v({
-        default: l(({ isOpen: n, toggle: d }) => [
-          m(e.$slots, "item", {
+        "trigger-text-element": r.triggerTextElement,
+        modifiers: r.modifiers,
+        animate: r.animate
+      }, $({
+        default: a(({ isOpen: n, toggle: d }) => [
+          s(e.$slots, "item", {
             item: t,
-            index: r,
+            index: o,
             isOpen: n,
             toggle: d
           }, () => [
-            $(S(t.content), 1)
+            v(A(t.content), 1)
           ])
         ]),
         _: 2
       }, [
         e.$slots.trigger ? {
           name: "trigger",
-          fn: l(({ isOpen: n }) => [
-            m(e.$slots, "trigger", {
+          fn: a(({ isOpen: n }) => [
+            s(e.$slots, "trigger", {
               item: t,
-              index: r,
+              index: o,
               isOpen: n
             })
           ]),
@@ -85,19 +76,19 @@ const E = {
         } : void 0,
         e.$slots.icon ? {
           name: "icon",
-          fn: l(({ isOpen: n }) => [
-            m(e.$slots, "icon", {
+          fn: a(({ isOpen: n }) => [
+            s(e.$slots, "icon", {
               item: t,
-              index: r,
+              index: o,
               isOpen: n
             })
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["model-value", "onUpdate:modelValue", "trigger-text", "classes", "trigger-text-element", "modifiers", "animate"]))), 128))
-    ])) : y("", !0);
+      ]), 1032, ["start-open", "trigger-text", "classes", "trigger-text-element", "modifiers", "animate"]))), 128)) : s(e.$slots, "default", { key: 1 })
+    ]));
   }
 };
 export {
-  x as default
+  B as default
 };

package/lib/components/collapsible/UluAccordion.vue

@@ -1,11 +1,12 @@
 <template>
   <UluCollapsible
-    :model-value="modelValue"
+    :id="id"
+    :model-value="resolvedModelValue"
     :start-open="startOpen"
     :trigger-text="triggerText"
     :classes="mergedClasses"
     :animate="animate"
-    @update:model-value="$emit('update:modelValue', $event)"
+    @update:model-value="handleUpdateModelValue"
   >
     <template #trigger="{ isOpen }">
       <slot name="trigger" :isOpen="isOpen">
@@ -30,10 +31,11 @@
 </template>
 
 <script setup>
-  import { computed } from 'vue';
+  import { computed, inject, onMounted } from 'vue';
   import UluIcon from "../elements/UluIcon.vue";
   import UluCollapsible from "./UluCollapsible.vue";
   import { useModifiers } from "../../composables/useModifiers.js";
+  import { newId } from "../../utils/dom.js";
 
   const props = defineProps({
     /**
@@ -97,4 +99,27 @@
     merged.container = [merged.container, resolvedModifiers.value];
     return merged;
   });
+
+  const accordionGroup = inject('uluAccordionGroup', null);
+  const id = newId('ulu-accordion');
+
+  onMounted(() => {
+    if (accordionGroup && props.startOpen) {
+      accordionGroup.toggle(id, true);
+    }
+  });
+
+  const resolvedModelValue = computed(() => {
+    if (accordionGroup) {
+      return accordionGroup.activeAccordionId.value === id;
+    }
+    return props.modelValue;
+  });
+
+  function handleUpdateModelValue(newValue) {
+    if (accordionGroup) {
+      accordionGroup.toggle(id, newValue);
+    }
+    emit('update:modelValue', newValue);
+  }
 </script>

package/lib/components/collapsible/UluAccordionGroup.vue

@@ -1,38 +1,37 @@
 <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 { ref, provide } from 'vue';
 import UluAccordion from './UluAccordion.vue';
 
 const props = defineProps({
@@ -67,25 +66,18 @@ const props = defineProps({
   },
 });
 
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "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",