@dative-gpi/foundation-shared-components 1.0.181 → 1.0.182

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

@@ -1,8 +1,11 @@
+export * from "./useAccessibilityPreferences";
 export * from "./useAddress";
 export * from "./useAutocomplete";
 export * from "./useBreakpoints";
 export * from "./useColors";
+export * from "./useCountUp";
 export * from "./useDebounce";
+export * from "./useElementVisibility";
 export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";

package/composables/useAccessibilityPreferences.ts

@@ -0,0 +1,32 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const PREFERS_REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+export function useAccessibilityPreferences() {
+  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, ref, readonly } from 'vue';
+
+export const useAnimationFrame = (callback: () => void) => {
+  let animationId: number | null = null;
+  const isActive = ref(false);
+
+  const start = () => {
+    if (isActive.value) {
+      return;
+    }
+    isActive.value = true;
+  
+    const animate = () => {
+      if (!isActive.value) {
+          return;
+      }
+
+      callback();
+      animationId = requestAnimationFrame(animate);
+    };
+    animationId = requestAnimationFrame(animate);
+  };
+
+  const stop = () => {
+    isActive.value = false;
+    if (animationId !== null) {
+      cancelAnimationFrame(animationId);
+      animationId = null;
+    }
+    };
+
+    onBeforeUnmount(() => {
+      stop();
+    });
+
+    return {
+      start,
+      stop,
+      isActive: readonly(isActive)
+    };
+};

package/composables/useCountUp.ts

@@ -0,0 +1,74 @@
+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(
+    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 { onVisible } = useElementVisibility(
+    elementRef
+  );
+  
+  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 text = String(current.value);
+    return pad.value > 0 ? text.padStart(pad.value, "0") : text;
+  });
+  
+  const { start: afStart, stop: afStop } = useAnimationFrame(() => {
+    const elapsed = performance.now() - startTime.value;
+    const progress = Math.min(1, elapsed / duration.value);
+    
+    if (progress >= 1) {
+      current.value = to.value;
+      animating.value = false;
+      afStop();
+      return;
+    }
+    
+    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;
+    }
+    
+    from.value = current.value;
+    to.value = targetValue.value;
+    startTime.value = performance.now();
+    animating.value = true;
+    afStart();
+  }
+  
+  watch(targetValue, () => {
+    start();
+  }, { immediate: true });
+
+  onVisible.value = () => {
+    if (startOnVisible.value && !animating.value) {
+      current.value = from.value;
+      start();
+    }
+  };  
+  
+  return {
+    displayText,
+  };
+}

package/composables/useElementVisibility.ts

@@ -0,0 +1,41 @@
+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;
+  
+  const startObserver = (el: Element) => {
+    stopObserver();
+
+    observer = new IntersectionObserver(([entry]) => {
+      const visible = Boolean(entry?.isIntersecting);
+      if (visible && onVisible.value) {
+        onVisible.value();
+      }
+    }, { threshold });
+
+    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.181",
+  "version": "1.0.182",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.181",
-    "@dative-gpi/foundation-shared-services": "1.0.181"
+    "@dative-gpi/foundation-shared-domain": "1.0.182",
+    "@dative-gpi/foundation-shared-services": "1.0.182"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "a6836b28ce33081e2a05e2088a41df6d8083629e"
+  "gitHead": "1e64f82da4dcedf3908383bb0d7c6a33f85ac0f2"
 }