@dative-gpi/foundation-shared-components 1.0.179 → 1.0.180-utils-composable

package/components/FSDialogMultiFormBody.vue

@@ -3,10 +3,45 @@
     gap="24px"
   >
     <FSPagination
+      v-if="$props.mode === 'pagination'"
       width="calc(100% - 16px)"
       :pages="$props.steps"
       :modelValue="currentStep - 1"
     />
+    <FSTabs
+      v-else-if="$props.mode === 'tabs'"
+      :tab="currentStep - 1"
+      :color="$props.tabsColor"
+      @update:tab="(val) => currentStep = val + 1"
+    >
+      <FSTab
+        v-for="(step, index) in $props.steps"
+        :key="index"
+      >
+        <slot
+          :name="`tab-${index + 1}`"
+        >
+          <FSRow>
+            <FSIcon
+              v-if="tabIconSlots[`tab-${index + 1}-icon`]"
+            >
+              <slot
+                :name="`tab-${index + 1}-icon`"
+              />
+            </FSIcon>
+            <FSSpan
+              :font="index + 1 === currentStep ? 'text-button' : 'text-body'"
+            >
+              <slot
+                :name="`tab-${index + 1}-label`"
+              >
+                {{ $tr('ui.tabs.step.default', 'Step {0}', step) }}
+              </slot>
+            </FSSpan>
+          </FSRow>
+        </slot>
+      </FSTab>
+    </FSTabs>
     <FSWindow
       width="100%"
       :modelValue="currentStep - 1"
@@ -78,6 +113,11 @@ import FSButton from "./FSButton.vue";
 import FSForm from "./FSForm.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
+import FSSpan from "./FSSpan.vue";
+import FSTabs from "./FSTabs.vue";
+import FSTab from "./FSTab.vue";
+import FSIcon from "./FSIcon.vue";
+import FSWindow from "./FSWindow.vue";
 
 export default defineComponent({
   name: "FSDialogMultiFormBody",
@@ -87,7 +127,12 @@ export default defineComponent({
     FSButton,
     FSForm,
     FSCol,
-    FSRow
+    FSRow,
+    FSSpan,
+    FSTabs,
+    FSTab,
+    FSIcon,
+    FSWindow
   },
   props: {
     subtitle: {
@@ -178,10 +223,20 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    mode: {
+      type: String as PropType<"pagination" | "tabs">,
+      required: false,
+      default: "pagination"
+    },
+    tabsColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
   },
   emits: ["click:cancelButton", "click:submitButton"],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
@@ -189,6 +244,16 @@ export default defineComponent({
     const valid = ref(false);
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
+    const hasSlot = (name: string) => !!slots[name];
+
+    const tabIconSlots = computed(() => {
+      const result:  Record<string, boolean> = {};
+      for (let i = 1; i <= props.steps; i++) {
+        result[`tab-${i}-icon`] = hasSlot(`tab-${i}-icon`);
+      }
+      return result;
+    });
+
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
@@ -246,6 +311,7 @@ export default defineComponent({
       maxHeight,
       valids,
       valid,
+      tabIconSlots,
       onPrevious,
       onSubmit
     };

package/components/FSEditImage.vue

@@ -13,7 +13,7 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config";
 
-import { useImage } from "@dative-gpi/foundation-shared-services/composables";
+import { useImage, useAppAuthToken } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSEditImageUI from "./FSEditImageUI.vue";
 
@@ -32,10 +32,11 @@ export default defineComponent({
   emits: ["update:imageId"],
   setup(props) {
     const { get: getImage, entity: image } = useImage();
+    const { authToken } = useAppAuthToken();
     
     const source = computed(() => {
-      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
-    })
+      return props.imageId ? IMAGE_RAW_URL(props.imageId, authToken.value) : null;
+    });
 
     const onError = (): void => {
       if (props.imageId) {

package/components/FSTab.vue

@@ -18,7 +18,9 @@
             {{ $props.prependIcon }}
           </FSIcon>
         </slot>
-        <slot>
+        <slot
+          name="label"
+        >
           <FSSpan
             v-if="$props.label"
             font="text-button"

package/components/fields/FSTranslateField.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
@@ -97,6 +97,7 @@ import FSButton from "../FSButton.vue";
 import FSIcon from "../FSIcon.vue";
 import FSSpan from "../FSSpan.vue";
 import FSRow from "../FSRow.vue";
+import type { Translation } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSTranslateField",
@@ -140,7 +141,7 @@ export default defineComponent({
       default: "label"
     },
     translations: {
-      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      type: Array as PropType<Translation[]>,
       required: false,
       default: () => []
     },
@@ -165,7 +166,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<Translation[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -189,7 +190,8 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return "";
       }
-      return translation[props.property];
+      
+      return translation[props.property] ?? "";
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -219,6 +221,10 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.translations, (newVal) => {
+      innerTranslations.value = newVal;
+    }, { immediate: true, deep: true });
+
     return {
       innerTranslations,
       ColorEnum,

package/components/fields/FSTranslateTextArea.vue

@@ -86,10 +86,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
+import type { Translation } from "@dative-gpi/foundation-shared-components/models";
 
 import { useColors } from "../../composables";
 
@@ -142,7 +143,7 @@ export default defineComponent({
       default: "label"
     },
     translations: {
-      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      type: Array as PropType<Translation[]>,
       required: false,
       default: () => []
     },
@@ -164,7 +165,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<Translation[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -188,7 +189,7 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return "";
       }
-      return translation[props.property];
+      return translation[props.property] ?? "";
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -218,6 +219,10 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.translations, (newVal) => {
+      innerTranslations.value = newVal;
+    }, { immediate: true, deep: true });
+
     return {
       innerTranslations,
       ColorEnum,

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,7 @@
+export function useAccessibilityPreferences() {
+  const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches || false;
+  
+  return {
+    prefersReducedMotion
+  };
+}

package/composables/useCountUp.ts

@@ -0,0 +1,101 @@
+import { ref, computed, onBeforeUnmount, watch } from 'vue';
+import { useAccessibilityPreferences } from './useAccessibilityPreferences';
+
+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;
+  
+  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;
+  });
+  
+  // Formatted display value
+  const displayText = computed(() => {
+    const s = String(countUp ? current.value : target.value);
+    return pad > 0 ? s.padStart(pad, "0") : s;
+  });
+  
+  // 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);
+      }
+    };
+    
+    rafId.value = requestAnimationFrame(step);
+  }
+  
+  // Start animation
+  function start() {
+    if (!countUp) {
+      current.value = target.value;
+      return;
+    }
+    
+    if (prefersReducedMotion) {
+      current.value = target.value;
+      return;
+    }
+    
+    animate(current.value, target.value, duration);
+    hasAnimated.value = true;
+  }
+  
+  // Clean up
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(rafId.value);
+  });
+  
+  // The restart method can be useful when the value changes.
+  function restart() {
+    if (hasAnimated.value || !startOnVisible) {
+      start();
+    }
+  }
+  
+  // Monitor changes in value
+  watch(() => value, () => {
+    restart();
+  });
+  
+  return {
+    current,
+    target,
+    displayText,
+    start,
+    restart,
+    hasAnimated
+  };
+}

package/composables/useElementVisibility.ts

@@ -0,0 +1,39 @@
+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);
+  
+  onMounted(() => {
+    if (!element) {
+      return;
+    }
+    
+    observer.value = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        isVisible.value = entry.isIntersecting;
+        if (entry.isIntersecting && onVisible) {
+          onVisible();
+        }
+      });
+    }, { threshold });
+    
+    observer.value.observe(element);
+  });
+  
+  onBeforeUnmount(() => {
+    observer.value?.disconnect();
+  });
+  
+  return {
+    isVisible
+  };
+}

package/models/index.ts

@@ -11,4 +11,5 @@ export * from "./map";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";
-export * from "./toggleSets";
+export * from "./toggleSets";
+export * from "./translations";

package/models/translations.ts

@@ -0,0 +1,4 @@
+export interface Translation {
+  languageCode: string;
+  [key: string]: string;
+}

package/package.json

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