@dative-gpi/foundation-shared-components 1.0.180-utils-composable → 1.0.181-fix-sandbox-connectivity

package/components/FSWidgetStandardOptions.vue

@@ -0,0 +1,60 @@
+<template>
+  <FSRow
+    align="bottom-left"
+    :wrap="false"
+    gap="16px"
+  >
+    <FSRow
+      align="bottom-center"
+    >
+      <FSNumberField
+        :label="$tr('entity.widget.width', 'Width')"
+        :modelValue="widgetWidth"
+        @update:modelValue="$emit('update:widgetWidth', $event)"
+      />
+      <FSNumberField
+        :label="$tr('entity.widget.height', 'Height')"
+        :modelValue="widgetHeight"
+        @update:modelValue="$emit('update:widgetHeight', $event)"
+      />
+      <FSSwitch
+        class="dialog-configure-widget-hide-borders"
+        :label="$tr('entity.widget.hide-borders', 'Hide borders')"
+        :modelValue="hideBorders"
+        @update:modelValue="$emit('update:hideBorders', $event)"
+      />
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSRow from "./FSRow.vue";
+import FSNumberField from "./fields/FSNumberField.vue";
+import FSSwitch from "./FSSwitch.vue";
+
+export default defineComponent({
+  name: "WidgetStandardOptions",
+  components: {
+    FSRow,
+    FSNumberField,
+    FSSwitch
+  },
+  props: {
+    widgetWidth: {
+      type: Number,
+      required: true
+    },
+    widgetHeight: {
+      type: Number,
+      required: true
+    },
+    hideBorders: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ["update:widgetWidth", "update:widgetHeight", "update:hideBorders"]
+});
+</script>

package/components/FSWidgetTemplateCardUI.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSCard
+    height="100px"
+    width="100%"
+  >
+    <FSCol
+      align="center-center"
+    >
+      <FSIcon
+        v-if="icon"
+        size="32px"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+      <FSText
+        font="text-overline"
+      >
+        {{ $props.label }}
+      </FSText>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSCard from "./FSCard.vue";
+import FSCol from "./FSCol.vue";
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+
+export default defineComponent({
+  name: "FSWidgetTemplateCardUI",
+  components: {
+    FSCard,
+    FSCol,
+    FSIcon,
+    FSText
+  },
+  props: {
+    icon: { 
+      type: String, 
+      required: false,
+      default: "mdi-chart-bar" 
+    },
+    label: { 
+      type: String, 
+      required: true 
+    }
+  }
+});
+</script>

package/composables/index.ts

@@ -5,7 +5,7 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useCountUp";
 export * from "./useDebounce";
-export * from "./useElementVisibility"
+export * from "./useElementVisibility";
 export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";

package/composables/useAccessibilityPreferences.ts

@@ -1,7 +1,32 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const PREFERS_REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
 export function useAccessibilityPreferences() {
-  const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches || false;
+  const prefersReducedMotion = ref(false);
+  let mediaQuery: MediaQueryList | null = null;
+
+  const handleChange = (e: MediaQueryListEvent) => {
+    prefersReducedMotion.value = e.matches;
+  };
   
+  onMounted(() => {
+    
+    mediaQuery = window.matchMedia?.(PREFERS_REDUCED_MOTION_QUERY) || null;
+    prefersReducedMotion.value = mediaQuery?.matches || false;
+    
+    if (mediaQuery?.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (mediaQuery?.removeEventListener) {
+      mediaQuery.removeEventListener('change', handleChange);
+    }
+  });
+
   return {
     prefersReducedMotion
   };
-}
+}

package/composables/useAnimationFrame.ts

@@ -0,0 +1,41 @@
+import { onBeforeUnmount, computed } from 'vue';
+
+export const useAnimationFrame = (callback: () => void) => {
+    let animationId: number | null = null;
+    let isActive = false;
+
+    const start = () => {
+      if (isActive) {
+        return;
+      }
+      isActive = true;
+    
+      const animate = () => {
+        if (!isActive) {
+            return;
+        }
+
+        callback();
+        animationId = requestAnimationFrame(animate);
+      };
+      animationId = requestAnimationFrame(animate);
+    };
+
+    const stop = () => {
+      isActive = false;
+      if (animationId !== null) {
+        cancelAnimationFrame(animationId);
+        animationId = null;
+      }
+      };
+
+      onBeforeUnmount(() => {
+        stop();
+      });
+
+      return {
+        start,
+        stop,
+        isActive: computed(() => isActive)
+      };
+  };

package/composables/useCountUp.ts

@@ -1,101 +1,74 @@
-import { ref, computed, onBeforeUnmount, watch } from 'vue';
+import { ref, computed, watch, type Ref, type ComponentPublicInstance } from 'vue';
 import { useAccessibilityPreferences } from './useAccessibilityPreferences';
+import { useAnimationFrame } from './useAnimationFrame';
+import { useElementVisibility } from './useElementVisibility';
 
-export function useCountUp(options: {
-  value: number | string,
-  duration?: number,
-  countUp?: boolean,
-  pad?: number,
-  startOnVisible?: boolean,
-  easing?: (t: number) => number
-}) {
-  const {
-    value,
-    duration = 800,
-    countUp = true,
-    pad = 2,
-    startOnVisible = true,
-    easing = easeOutCubic
-  } = options;
-  
+export function useCountUp(
+    targetValue: Ref<number>,
+    duration = ref<number>(800),
+    pad = ref<number>(2),
+    startOnVisible = ref<boolean>(false),
+    elementRef: Ref<ComponentPublicInstance | null> = ref(null),
+    easing = (t: number) =>  1 - Math.pow(1 - t, 3)
+) {
   const { prefersReducedMotion } = useAccessibilityPreferences();
-  const current = ref(0);
-  const rafId = ref(0);
-  const hasAnimated = ref(false);
-  
-  // Easing function
-  function easeOutCubic(t: number) {
-    return 1 - Math.pow(1 - t, 3);
-  }
   
-  // Target value computation
-  const target = computed(() => {
-    const n = Number(value);
-    return Number.isFinite(n) ? Math.trunc(n) : 0;
-  });
+  const { onVisible } = useElementVisibility(
+    elementRef
+  );
   
-  // Formatted display value
+  const current = ref<number>(0);
+  const animating = ref<boolean>(false);
+  const startTime = ref<number>(0);
+  const from = ref<number>(0);
+  const to = ref<number>(0);
+
   const displayText = computed(() => {
-    const s = String(countUp ? current.value : target.value);
-    return pad > 0 ? s.padStart(pad, "0") : s;
+    const text = String(current.value);
+    return pad.value > 0 ? text.padStart(pad.value, "0") : text;
   });
   
-  // Animation function
-  function animate(from: number, to: number, animDuration: number) {
-    cancelAnimationFrame(rafId.value);
-    const start = performance.now();
-    
-    const step = (now: number) => {
-      const t = Math.min(1, (now - start) / animDuration);
-      const v = from + (to - from) * easing(t);
-      current.value = Math.round(v);
-      if (t < 1) {
-        rafId.value = requestAnimationFrame(step);
-      }
-    };
+  const { start: afStart, stop: afStop } = useAnimationFrame(() => {
+    const elapsed = performance.now() - startTime.value;
+    const progress = Math.min(1, elapsed / duration.value);
     
-    rafId.value = requestAnimationFrame(step);
-  }
-  
-  // Start animation
-  function start() {
-    if (!countUp) {
-      current.value = target.value;
+    if (progress >= 1) {
+      current.value = to.value;
+      animating.value = false;
+      afStop();
       return;
     }
     
-    if (prefersReducedMotion) {
-      current.value = target.value;
+    const easedProgress = easing(progress);
+    current.value = Math.round(from.value + (to.value - from.value) * easedProgress);
+  });
+  
+  const start = () => {
+    if (prefersReducedMotion.value) {
+      current.value = targetValue.value;
+      animating.value = false;
       return;
     }
     
-    animate(current.value, target.value, duration);
-    hasAnimated.value = true;
+    from.value = current.value;
+    to.value = targetValue.value;
+    startTime.value = performance.now();
+    animating.value = true;
+    afStart();
   }
   
-  // Clean up
-  onBeforeUnmount(() => {
-    cancelAnimationFrame(rafId.value);
-  });
-  
-  // The restart method can be useful when the value changes.
-  function restart() {
-    if (hasAnimated.value || !startOnVisible) {
+  watch(targetValue, () => {
+    start();
+  }, { immediate: true });
+
+  onVisible.value = () => {
+    if (startOnVisible.value && !animating.value) {
+      current.value = from.value;
       start();
     }
-  }
-  
-  // Monitor changes in value
-  watch(() => value, () => {
-    restart();
-  });
+  };  
   
   return {
-    current,
-    target,
     displayText,
-    start,
-    restart,
-    hasAnimated
   };
 }

package/composables/useElementVisibility.ts

@@ -1,39 +1,41 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-
-export function useElementVisibility(element: HTMLElement | null, options: {
-  threshold?: number,
-  onVisible?: () => void
-}) {
-  const { 
-    threshold = 0.3,
-    onVisible
-  } = options;
-  
-  const isVisible = ref(false);
-  const observer = ref<IntersectionObserver | null>(null);
+import { type Ref, ref, onBeforeUnmount, watch, type ComponentPublicInstance } from 'vue';
+
+
+export function useElementVisibility(
+  target: Ref<ComponentPublicInstance | null>,
+  threshold = 0.3
+) {
+  const onVisible: Ref<(() => void) | null> = ref(null);
+  let observer: IntersectionObserver | null = null;
   
-  onMounted(() => {
-    if (!element) {
-      return;
-    }
-    
-    observer.value = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        isVisible.value = entry.isIntersecting;
-        if (entry.isIntersecting && onVisible) {
-          onVisible();
-        }
-      });
+  const startObserver = (el: Element) => {
+    stopObserver();
+
+    observer = new IntersectionObserver(([entry]) => {
+      const visible = Boolean(entry?.isIntersecting);
+      if (visible && onVisible.value) {
+        onVisible.value();
+      }
     }, { threshold });
-    
-    observer.value.observe(element);
-  });
-  
-  onBeforeUnmount(() => {
-    observer.value?.disconnect();
-  });
-  
-  return {
-    isVisible
+
+    observer.observe(el);
+  };
+
+  const stopObserver = () => {
+    observer?.disconnect();
+    observer = null;
   };
-}
+
+  watch(target , (newVal) => {
+    console.log('Target changed:', newVal);
+    if(newVal && newVal.$el){
+      startObserver(newVal.$el);
+    }
+  }, { immediate: true });
+
+  onBeforeUnmount(stopObserver);
+
+  return { 
+    onVisible
+   };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.180-utils-composable",
+  "version": "1.0.181-fix-sandbox-connectivity",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.180-utils-composable",
-    "@dative-gpi/foundation-shared-services": "1.0.180-utils-composable"
+    "@dative-gpi/foundation-shared-domain": "1.0.181-fix-sandbox-connectivity",
+    "@dative-gpi/foundation-shared-services": "1.0.181-fix-sandbox-connectivity"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ec9f6b8dc92d0e7057f13f031d85436781302097"
+  "gitHead": "953ddcfdd3728cda9d1da39d665c3a2944ec56d5"
 }