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

package/components/FSDialogMultiFormBody.vue

@@ -3,45 +3,10 @@
     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"
@@ -113,11 +78,6 @@ 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",
@@ -127,12 +87,7 @@ export default defineComponent({
     FSButton,
     FSForm,
     FSCol,
-    FSRow,
-    FSSpan,
-    FSTabs,
-    FSTab,
-    FSIcon,
-    FSWindow
+    FSRow
   },
   props: {
     subtitle: {
@@ -223,20 +178,10 @@ 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, slots }) {
+  setup(props, { emit }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
@@ -244,16 +189,6 @@ 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
@@ -311,7 +246,6 @@ 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, useAppAuthToken } from "@dative-gpi/foundation-shared-services/composables";
+import { useImage } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSEditImageUI from "./FSEditImageUI.vue";
 
@@ -32,11 +32,10 @@ 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, authToken.value) : null;
-    });
+      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
+    })
 
     const onError = (): void => {
       if (props.imageId) {

package/components/FSTab.vue

@@ -18,9 +18,7 @@
             {{ $props.prependIcon }}
           </FSIcon>
         </slot>
-        <slot
-          name="label"
-        >
+        <slot>
           <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, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
@@ -97,7 +97,6 @@ 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",
@@ -141,7 +140,7 @@ export default defineComponent({
       default: "label"
     },
     translations: {
-      type: Array as PropType<Translation[]>,
+      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
       required: false,
       default: () => []
     },
@@ -166,7 +165,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref<Translation[]>(props.translations);
+    const innerTranslations = ref(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -190,8 +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 => {
@@ -221,10 +219,6 @@ export default defineComponent({
       }
     };
 
-    watch(() => props.translations, (newVal) => {
-      innerTranslations.value = newVal;
-    }, { immediate: true, deep: true });
-
     return {
       innerTranslations,
       ColorEnum,

package/components/fields/FSTranslateTextArea.vue

@@ -86,11 +86,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } 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";
 
@@ -143,7 +142,7 @@ export default defineComponent({
       default: "label"
     },
     translations: {
-      type: Array as PropType<Translation[]>,
+      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
       required: false,
       default: () => []
     },
@@ -165,7 +164,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref<Translation[]>(props.translations);
+    const innerTranslations = ref(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -189,7 +188,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 => {
@@ -219,10 +218,6 @@ export default defineComponent({
       }
     };
 
-    watch(() => props.translations, (newVal) => {
-      innerTranslations.value = newVal;
-    }, { immediate: true, deep: true });
-
     return {
       innerTranslations,
       ColorEnum,

package/models/index.ts

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

package/package.json

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

package/composables/useAccessibilityPreferences.ts

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

package/composables/useCountUp.ts

@@ -1,101 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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/translations.ts

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