@dative-gpi/foundation-shared-components 0.0.115 → 0.0.117

package/components/FSFadeOut.vue

@@ -2,6 +2,7 @@
   <div
     class="fs-fade-out"
     ref="fadeOutRef"
+    :id="elementId"
     :style="style"
     @scroll="debounceMasks"
   >
@@ -15,6 +16,7 @@ import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { uuidv4 } from "@dative-gpi/bones-ui/tools";
 
 export default defineComponent({
   name: "FSFadeOut",
@@ -54,6 +56,8 @@ export default defineComponent({
 
     const resizeObserver = ref<ResizeObserver | null>(null);
 
+    const elementId = `id${uuidv4()}`;
+
     const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-fade-out-height"             : sizeToVar(props.height),
@@ -72,13 +76,13 @@ export default defineComponent({
           topMaskHeight.value = "0px";
           return;
         }
-        if ((fadeOutRef.value as any).scrollHeight - (fadeOutRef.value as any).scrollTop - (fadeOutRef.value as any).clientHeight < 1) {
+        if ((fadeOutRef.value as any).scrollHeight - (fadeOutRef.value as any).scrollTop - (fadeOutRef.value as any).clientHeight < 1.5) {
           bottomMaskHeight.value = "0px";
         }
         else {
           bottomMaskHeight.value = sizeToVar(props.maskHeight);
         }
-        if ((fadeOutRef.value as any).scrollTop === 0) {
+        if ((fadeOutRef.value as any).scrollTop < 0.5) {
           topMaskHeight.value = "0px";
         }
         else {
@@ -107,8 +111,8 @@ export default defineComponent({
           debounceMasks();
         });
       });
-      if (document.querySelector(".fs-fade-out")) {
-        resizeObserver.value.observe(document.querySelector(".fs-fade-out")!);
+      if (document.querySelector(`#${elementId}`)) {
+        resizeObserver.value.observe(document.querySelector(`#${elementId}`)!);
       }
     });
 
@@ -122,6 +126,7 @@ export default defineComponent({
 
     return {
       fadeOutRef,
+      elementId,
       style,
       debounceMasks
     };

package/components/FSSlideGroup.vue

@@ -3,21 +3,15 @@
     class="fs-slide-group"
     ref="slideGroupRef"
     :showArrows="true"
+    :id="elementId"
     :style="style"
     v-bind="$attrs"
   >
     <template
       #prev
     >
-      <FSButton
-        v-if="$props.dash"
-        icon="mdi-chevron-double-left"
-        variant="icon"
-        @click="goToStart"
-      />
       <FSButtonPreviousIcon
         :color="ColorEnum.Dark"
-        :disabled="false"
         @click="goToPrev"
       />
     </template>
@@ -38,15 +32,9 @@
     >
       <FSButtonNextIcon
         :color="ColorEnum.Dark"
-        :disabled="false"
+        :class="nextClasses"
         @click="goToNext"
       />
-      <FSButton
-        v-if="$props.dash"
-        icon="mdi-chevron-double-right"
-        variant="icon"
-        @click="goToEnd"
-      />
     </template>
   </v-slide-group>
 </template>
@@ -57,6 +45,7 @@ import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { uuidv4 } from "@dative-gpi/bones-ui/tools";
 
 import FSButtonPreviousIcon from "./buttons/FSButtonPreviousIcon.vue";
 import FSButtonNextIcon from "./buttons/FSButtonNextIcon.vue";
@@ -80,11 +69,6 @@ export default defineComponent({
       required: false,
       default: "8px"
     },
-    dash: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     speed: {
       type: Number,
       required: false,
@@ -97,23 +81,29 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
+    const forceActive = ref(false);
+
     const slideGroupRef = ref<HTMLElement | null>(null);
     const resizeObserver = ref<ResizeObserver | null>(null);
+    
+    const elementId = `id${uuidv4()}`;
 
     const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-group-arrows-width": props.dash ? "52px" : "32px",
-      "--fs-group-padding"    : sizeToVar(props.padding),
-      "--fs-group-gap"        : sizeToVar(props.gap),
-      "--fs-group-color"      : darks.light,
-      "--fs-group-hover-color": darks.dark
+      "--fs-group-padding"     : sizeToVar(props.padding),
+      "--fs-group-gap"         : sizeToVar(props.gap),
+      "--fs-group-color"       : darks.light,
+      "--fs-group-hover-color" : darks.dark
     }));
 
-    const goToStart = () => {
+    const nextClasses = computed((): string[] => {
+      const classes = ["fs-slide-group-next"];
       if (slideGroupRef.value) {
-        (slideGroupRef.value as any).scrollTo("prev");
-        (slideGroupRef.value as any).scrollTo("prev");
+        if (forceActive.value) {
+          classes.push("fs-slide-group-next-active");
+        }
       }
-    };
+      return classes;
+    });
 
     const goToPrev = () => {
       if (slideGroupRef.value) {
@@ -121,16 +111,10 @@ export default defineComponent({
       }
     };
 
-    const goToEnd = () => {
-      if (slideGroupRef.value) {
-        (slideGroupRef.value as any).scrollTo("next");
-        (slideGroupRef.value as any).scrollTo("next");
-      }
-    };
-
     const goToNext = () => {
       if (slideGroupRef.value) {
         (slideGroupRef.value as any).scrollTo("next");
+        forceActive.value = false;
       }
     };
 
@@ -138,10 +122,11 @@ export default defineComponent({
       resizeObserver.value = new ResizeObserver(entries => {
         entries.forEach(() => {
           (slideGroupRef.value as any).scrollTo("prev");
+          forceActive.value = true;
         });
       });
-      if (document.querySelector(".fs-slide-group")) {
-        resizeObserver.value.observe(document.querySelector(".fs-slide-group")!);
+      if (document.querySelector(`#${elementId}`)) {
+        resizeObserver.value.observe(document.querySelector(`#${elementId}`)!);
       }
     });
 
@@ -153,13 +138,13 @@ export default defineComponent({
 
     return {
       slideGroupRef,
+      nextClasses,
       ColorEnum,
+      elementId,
       style,
       getChildren,
-      goToStart,
       goToPrev,
-      goToNext,
-      goToEnd
+      goToNext
     };
   }
 });

package/components/FSWrapGroup.vue

@@ -2,6 +2,8 @@
   <v-slide-group
     class="fs-wrap-group"
     ref="wrapGroupRef"
+    :showArrows="false"
+    :id="elementId"
     :style="style"
     v-bind="$attrs"
   >
@@ -22,6 +24,7 @@ import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { uuidv4 } from "@dative-gpi/bones-ui/tools";
 
 export default defineComponent({
   name: "FSWrapGroup",
@@ -46,6 +49,8 @@ export default defineComponent({
     const wrapGroupRef = ref<HTMLElement | null>(null);
     const resizeObserver = ref<ResizeObserver | null>(null);
 
+    const elementId = `id${uuidv4()}`;
+
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
@@ -59,8 +64,8 @@ export default defineComponent({
           (wrapGroupRef.value as any).scrollTo("prev");
         });
       });
-      if (document.querySelector(".fs-wrap-group")) {
-        resizeObserver.value.observe(document.querySelector(".fs-wrap-group")!);
+      if (document.querySelector(`#${elementId}`)) {
+        resizeObserver.value.observe(document.querySelector(`#${elementId}`)!);
       }
     });
 
@@ -72,6 +77,7 @@ export default defineComponent({
 
     return {
       wrapGroupRef,
+      elementId,
       style,
       getChildren
     };

package/components/lists/FSDataTableUI.vue

@@ -385,7 +385,6 @@
               v-if="innerRowsPerPage !== -1"
               class="fs-data-table-pagination fs-small-input"
               variant="slide"
-              :dash="pageOptions.length > 8"
               :values="pageOptions"
               :required="true"
               v-model="innerPage"
@@ -542,7 +541,6 @@
               v-if="innerRowsPerPage !== -1"
               class="fs-data-table-pagination fs-small-input"
               variant="slide"
-              :dash="pageOptions.length > 8"
               :values="pageOptions"
               :required="true"
               v-model="innerPage"
@@ -634,6 +632,7 @@
     </template>
     <div
       class="fs-data-table-intersection"
+      :id="elementId"
     />
   </FSCol>
 </template>
@@ -645,6 +644,7 @@ import { useRouter } from "vue-router";
 import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { uuidv4 } from "@dative-gpi/bones-ui/tools"
 
 import { alphanumericSort, sizeToVar } from "../../utils";
 
@@ -841,6 +841,8 @@ export default defineComponent({
     const intersectionObserver = ref<IntersectionObserver | null>(null);
     const size = ref(props.sizeIterator);
 
+    const elementId = `id${uuidv4()}`;
+
     const modeOptions: FSToggle[] = [
       { id: "table", prependIcon: "mdi-table" },
       { id: "iterator", prependIcon: "mdi-apps" }
@@ -1227,8 +1229,8 @@ export default defineComponent({
     const observeIntersection = (): void => {
       switch (innerMode.value) {
         case "table":
-          if (intersectionObserver.value && document.querySelector(".fs-data-table-intersection")) {
-            intersectionObserver.value.unobserve(document.querySelector(".fs-data-table-intersection")!);
+          if (intersectionObserver.value && document.querySelector(`#${elementId}`)) {
+            intersectionObserver.value.unobserve(document.querySelector(`#${elementId}`)!);
           }
           return;
         case "iterator":
@@ -1243,8 +1245,8 @@ export default defineComponent({
               });
             }, { threshold: [0.9] });
           }
-          if (document.querySelector(".fs-data-table-intersection")) {
-            intersectionObserver.value.observe(document.querySelector(".fs-data-table-intersection")!);
+          if (document.querySelector(`#${elementId}`)) {
+            intersectionObserver.value.observe(document.querySelector(`#${elementId}`)!);
           }
           return;
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.115",
+  "version": "0.0.117",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.115",
-    "@dative-gpi/foundation-shared-services": "0.0.115",
+    "@dative-gpi/foundation-shared-domain": "0.0.117",
+    "@dative-gpi/foundation-shared-services": "0.0.117",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "19b102691d3d6846375b6c94e3e35f9e6e83dc42"
+  "gitHead": "434ff73f13f863998d707d010b4d9e2323e8391e"
 }

package/styles/globals/overrides.scss

@@ -138,13 +138,28 @@ $nthOverlay: 25;
 .v-slide-group__prev,
 .v-slide-group__next {
     color: var(--fs-group-color);
-    min-width: var(--fs-group-arrows-width) !important;
-    width: var(--fs-group-arrows-width) !important;
+    min-width: 32px !important;
+    width: 32px !important;
     flex: 1 1 0 !important;
 
     @include touchscreen {
         display: none !important;
     }
+    
+    & > .v-icon {
+        @include web {
+            font-size: 24px !important;
+        }
+    
+        @include mobile {
+            font-size: 20px !important;
+        }
+    }
+}
+
+.v-slide-group__next--disabled:has(.fs-slide-group-next-active) {
+    pointer-events: all !important;
+    opacity: 1 !important;
 }
 
 // Change color on arrows when hovered

package/utils/sort.ts

@@ -1,3 +1,18 @@
+const asString = (value: any): string => {
+  if (value == null) {
+    return "";
+  }
+  switch (typeof value) {
+    case "string"  : return value;
+    case "boolean" : return value ? '1' : '0';
+    case "number"  :
+    case "bigint"  :
+    case "symbol"  :
+    case "function": return value.toString();
+    default        : return JSON.stringify(value);
+  }
+};
+
 export const alphanumericSort = (a: any, b: any) => {
   if (a == null && b == null) {
     return 0;
@@ -8,11 +23,7 @@ export const alphanumericSort = (a: any, b: any) => {
   if (b == null) {
     return 1;
   }
-  if (typeof(a) !== 'string') {
-    a = JSON.stringify(a);
-  }
-  if (typeof(b) !== 'string') {
-    b = JSON.stringify(b);
-  }
+  a = asString(a);
+  b = asString(b);
   return a.localeCompare(b, undefined, { numeric: true });
-}
+};