@ulu/frontend-vue 0.1.3-beta.11 → 0.1.3-beta.13

package/dist/frontend-vue.js

@@ -4161,23 +4161,24 @@ const yh = /* @__PURE__ */ L(ta, [["render", sa]]), ph = {
     // New prop from SSR version
   },
   setup(e) {
-    const n = e, t = O(null);
-    let s = null, l = null;
+    const n = e, t = O(null), s = O(null);
+    let l = null, o = null;
     return Be(async () => {
-      s = () => al(t.value), s(), l = Kt(s, 200, !1), window.addEventListener("resize", l);
+      l = () => al(t.value), l(), s.value = !0, o = Kt(l, 200, !1), window.addEventListener("resize", o);
     }), bt(() => {
-      l && (window.removeEventListener("resize", l), l = null, s = null);
-    }), te(() => n.hidden, (o, a) => {
-      a && !o && s && s();
-    }), (o, a) => (u(), _(j(e.element), {
+      o && (window.removeEventListener("resize", o), o = null, l = null);
+    }), te(() => n.hidden, (a, r) => {
+      r && !a && l && l();
+    }), (a, r) => (u(), _(j(e.element), {
+      "data-grid-init": s.value,
       ref_key: "rootElement",
       ref: t
     }, {
       default: $(() => [
-        g(o.$slots, "default")
+        g(a.$slots, "default")
       ]),
       _: 3
-    }, 512));
+    }, 8, ["data-grid-init"]));
   }
 }, ja = {
   name: "UluTitleRail",
@@ -6370,7 +6371,7 @@ const cm = {
     return (c, i) => k(t) && k(t).length ? (u(), _(j(e.element), {
       key: 0,
       class: "scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated",
-      style: G({ "--rail-width": `${e.railWidth}px` })
+      style: G({ "--ulu-sa-nav-rail-width": `${e.railWidth}px` })
     }, {
       default: $(() => [
         h("ul", ni, [

package/dist/types/components/layout/UluDataGrid.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/layout/UluDataGrid.vue"],"names":[],"mappings":"wBA0KqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;2OAErC;;;;AA9FD;;;EAaG"}
+{"version":3,"file":"UluDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/layout/UluDataGrid.vue"],"names":[],"mappings":"wBAqLqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;2OAErC;;;;AAnGD;;;EAaG"}

package/lib/components/layout/UluDataGrid.vue

@@ -16,7 +16,11 @@
 -->
 
 <template>
-  <component :is="element" ref="rootElement">
+  <component 
+    :is="element" 
+    :data-grid-init="initialized"
+    ref="rootElement" 
+  >
     <slot />
   </component>
 </template>
@@ -42,12 +46,14 @@
   });
 
   const rootElement = ref(null); // Ref for the template root element
+  const initialized = ref(null);
   let setThisPositionClasses = null; // To store the setPositionClasses function
   let resizeHandler = null; // To store the debounced resize handler
 
   onMounted(async () => {
     setThisPositionClasses = () => setPositionClasses(rootElement.value);
     setThisPositionClasses(); // Initial call
+    initialized.value = true;
     resizeHandler = debounce(setThisPositionClasses, 200, false); // `this` context is not needed in setup
     window.addEventListener("resize", resizeHandler);
   });

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

@@ -3,7 +3,7 @@
     v-if="sections && sections.length" 
     :is="element"
     class="scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated"
-    :style="{ '--rail-width': `${railWidth}px` }"
+    :style="{ '--ulu-sa-nav-rail-width': `${ railWidth }px` }"
   >
     <ul class="scroll-anchors-nav-animated__rail">
       <li 

package/lib/components/systems/scroll-anchors/_scroll-anchors-nav-animated.scss

@@ -8,6 +8,7 @@
 
 @use "@ulu/frontend/scss/selector";
 @use "@ulu/frontend/scss/utils";
+@use "@ulu/frontend/scss/color";
 
 // Used for function fallback
 $-fallbacks: () !default;
@@ -48,14 +49,14 @@ $config: (
     position: relative;
   }
   #{ $prefix }__rail {
-    border-left: var(--rail-width, 3px) solid get("rail-border-color");
+    border-left: var(--ulu-sa-nav-rail-width, 3px) solid color.get(get("rail-border-color"));
     padding-left: get("rail-padding");
   }
   #{ $prefix }__indicator {
     position: absolute;
     top: 0;
     left: 0;
-    background-color: get("indicator-color");
+    background-color: color.get(get("indicator-color"));
     clip-path: get("indicator-clip-path");
   }
   #{ $prefix }__indicator--can-transition {

package/package.json

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