@ulu/frontend-vue 0.1.3-beta.14 → 0.1.3-beta.16

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

@@ -5,7 +5,10 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     $props: Partial<typeof props>;
+    animate: boolean | Record<string, any>;
+    triggerTextElement: string;
     items: unknown[];
+    modifiers?: string | unknown[] | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     trigger?: ((props: {
@@ -28,6 +31,9 @@ type __VLS_Slots = {
     }) => any) | undefined;
 };
 declare const props: {
+    readonly animate: boolean | Record<string, any>;
+    readonly triggerTextElement: string;
     readonly items: unknown[];
+    readonly modifiers?: string | unknown[] | undefined;
 };
 //# sourceMappingURL=UluAccordionGroup.vue.d.ts.map

package/dist/types/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":"wBAoNqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;2OAErC;;;;;;;;;;;;;;;;;;;;;AA9IH;;EASG"}
+{"version":3,"file":"UluAccordionGroup.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/collapsible/UluAccordionGroup.vue"],"names":[],"mappings":"wBAsQqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;2OAErC;;;;;;;;;;;;;;;;;;;;;AAzKH;;;;;EA8BG"}

package/dist/types/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue.d.ts

@@ -14,6 +14,9 @@ type __VLS_Slots = {
         isActive: any;
         titleId: any;
         section: any;
+        inactiveFrom: any;
+        activeFrom: any;
+        sectionState: string | null;
     }) => any) | undefined;
 };
 declare const props: {

package/dist/types/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsHeadlessSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue"],"names":[],"mappings":"wBAgIqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;2OAErC;;;;;;;;AAvFD;;;;EAmBG"}
+{"version":3,"file":"UluScrollAnchorsHeadlessSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue"],"names":[],"mappings":"wBAsKqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;2OAErC;;;;;;;;;;;AA9GD;;;;EAmBG"}

package/dist/types/components/systems/scroll-anchors/UluScrollAnchorsSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue"],"names":[],"mappings":"wBAuMqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;2OAErC;;;;;;;;AAhID;;;;;;;;EA4CG"}
+{"version":3,"file":"UluScrollAnchorsSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue"],"names":[],"mappings":"wBA+NqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;2OAErC;;;;;;;;AA5ID;;;;;;;;EA4CG"}

package/dist/types/components/systems/scroll-anchors/useScrollAnchorSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollAnchorSection.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchorSection.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,8CAHW,MAAM,GACJ,MAAM,CA+ClB"}
+{"version":3,"file":"useScrollAnchorSection.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchorSection.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,8CAHW,MAAM,GACJ,MAAM,CAmDlB"}

package/dist/types/components/systems/scroll-anchors/useScrollAnchors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollAnchors.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchors.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,4EAFW;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,WAAW;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,QA+InF"}
+{"version":3,"file":"useScrollAnchors.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchors.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,4EAFW;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,WAAW;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,QAqJnF"}

package/lib/components/collapsible/UluAccordionGroup.vue

@@ -7,6 +7,9 @@
       @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>
@@ -37,7 +40,28 @@ const props = defineProps({
   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([]);
@@ -61,4 +85,4 @@ function handleToggle(selectedIndex, newValue) {
     internalItems.value[selectedIndex].isOpen = false;
   }
 }
-</script>
+</script>

package/lib/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue

@@ -1,14 +1,19 @@
 <template>
-  <component 
-    :is="element" 
-    :class="['scroll-anchors__section', { 'is-active': isActive }]"
-    ref="sectionRef" 
+  <component
+    :is="element"
+    :class="[
+      'scroll-anchors__section',
+      { 'is-active': isActive }
+    ]"
+    :data-scrollpoint-state="sectionState"
+    ref="sectionRef"
   >
-    <slot :isActive="isActive" :titleId="titleId" :section="section" />
+    <slot :isActive="isActive" :titleId="titleId" :section="section" :inactiveFrom="inactiveFrom" :activeFrom="activeFrom" :sectionState="sectionState" />
   </component>
 </template>
 
 <script setup>
+  import { computed } from "vue";
   import { useScrollAnchorSection } from "./useScrollAnchorSection";
 
   const props = defineProps({
@@ -24,7 +29,7 @@
      */
     customTitleId: String,
     /**
-     * Element to use 
+     * Element to use
      */
     element: {
       type: String,
@@ -32,5 +37,14 @@
     }
   });
 
-  const { sectionRef, titleId, isActive, section } = useScrollAnchorSection(props);
+  const { sectionRef, titleId, isActive, inactiveFrom, activeFrom, section } = useScrollAnchorSection(props);
+
+  const sectionState = computed(() => {
+    if (isActive.value) {
+      if (activeFrom.value) return `enter-${activeFrom.value}`;
+    } else {
+      if (inactiveFrom.value) return `exit-${inactiveFrom.value}`;
+    }
+    return null;
+  });
 </script>

package/lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue

@@ -1,7 +1,8 @@
 <template>
-  <component 
-    :is="element" 
-    :class="[wrapperClass, { [activeClass] : activeClass && isActive }]" 
+  <component
+    :is="element"
+    :class="[wrapperClass, { [activeClass]: activeClass && isActive }]"
+    :data-scrollpoint-state="sectionState"
     ref="sectionRef"
   >
     <component :is="titleElement" :class="titleClass" :id="titleId">
@@ -14,6 +15,7 @@
 </template>
 
 <script setup>
+  import { computed } from "vue";
   import { useScrollAnchorSection } from "./useScrollAnchorSection";
 
   const props = defineProps({
@@ -62,5 +64,14 @@
     }
   });
 
-  const { sectionRef, titleId, isActive, section } = useScrollAnchorSection(props);
+  const { sectionRef, titleId, isActive, inactiveFrom, activeFrom, section } = useScrollAnchorSection(props);
+
+  const sectionState = computed(() => {
+    if (isActive.value) {
+      if (activeFrom.value) return `enter-${activeFrom.value}`;
+    } else {
+      if (inactiveFrom.value) return `exit-${inactiveFrom.value}`;
+    }
+    return null;
+  });
 </script>

package/lib/components/systems/scroll-anchors/useScrollAnchorSection.js

@@ -22,7 +22,9 @@ export function useScrollAnchorSection(props) {
     title: props.title,
     titleId: titleId.value,
     element: null, // will be set on mount
-    active: false
+    active: false,
+    inactiveFrom: null,
+    activeFrom: null
   });
   
   // Keep title and titleId in sync with props
@@ -51,6 +53,8 @@ export function useScrollAnchorSection(props) {
     sectionRef, // the ref for the user to attach
     titleId,
     isActive: computed(() => section.active),
+    inactiveFrom: computed(() => section.inactiveFrom),
+    activeFrom: computed(() => section.activeFrom),
     section
   };
 }

package/lib/components/systems/scroll-anchors/useScrollAnchors.js

@@ -15,9 +15,13 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
     return sections.value.findIndex(({ element }) => el === element);
   }
 
-  function removeActive(except = null) {
+  function removeActive(except = null, scrollDirection = 'down') {
     sections.value.forEach(s => {
       if (s !== except) {
+        if (s.active) {
+          s.inactiveFrom = scrollDirection === 'down' ? 'above' : 'below';
+          s.activeFrom = null;
+        }
         s.active = false;
       }
     });
@@ -67,8 +71,10 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
         if (sectionToActivate && !sectionToActivate.active) {
           if (props.debug) console.log("Activating section:", sectionToActivate.title);
           nextTick(() => {
-            removeActive(sectionToActivate);
+            removeActive(sectionToActivate, scrollDirection);
             sectionToActivate.active = true;
+            sectionToActivate.inactiveFrom = null;
+            sectionToActivate.activeFrom = scrollDirection === 'down' ? 'below' : 'above';
             emit("section-change", { section: sectionToActivate, sections: sections.value, active: true });
           });
         }
@@ -84,7 +90,7 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
             if ((isFirst && scrollDirection === 'up' && !props.firstItemActive) || (isLast && scrollDirection === 'down')) {
               if (props.debug) console.log("Deactivating section at edge:", activeSection.title);
               nextTick(() => {
-                removeActive();
+                removeActive(null, scrollDirection);
                 emit("section-change", { section: activeSection, sections: sections.value, active: false });
               });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.3-beta.14",
+  "version": "0.1.3-beta.16",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [