@dative-gpi/foundation-shared-components 1.0.179-translate → 1.0.179-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

@@ -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,10 +166,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref<{
-      languageCode: string;
-      [key: string]: string | null;
-    }[]>([]);
+    const innerTranslations = ref<Translation[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);

package/components/fields/FSTranslateTextArea.vue

@@ -90,6 +90,7 @@ import { computed, defineComponent, type PropType, ref, type StyleValue, watch }
 
 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,10 +165,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref<{
-      languageCode: string;
-      [key: string]: string | null;
-    }[]>([]);
+    const innerTranslations = ref<Translation[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);

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-translate",
+  "version": "1.0.179-utils-composable",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.179-translate",
-    "@dative-gpi/foundation-shared-services": "1.0.179-translate"
+    "@dative-gpi/foundation-shared-domain": "1.0.179-utils-composable",
+    "@dative-gpi/foundation-shared-services": "1.0.179-utils-composable"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "979508ace16777ebcbe274fb2378e188f0ade4b3"
+  "gitHead": "c2d2ca5e8ea8a151a41f26e08e75f5369cd876e2"
 }