@dative-gpi/foundation-shared-components 1.0.67 → 1.0.68

package/components/FSTabs.vue

@@ -7,7 +7,7 @@
     :style="style"
     :grow="true"
     :modelValue="$props.tab"
-    @update:modelValue="$emit('update:tab', $event)"
+    @update:modelValue="onUpdateTab($event)"
     v-bind="$attrs"
   >
     <slot/>
@@ -15,7 +15,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, onMounted, type PropType, type StyleValue } from "vue";
+import { useRouter } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -24,7 +25,7 @@ export default defineComponent({
   name: "FSTabs",
   props: {
     tab: {
-      type: Number,
+      type: [String, Number, Object] as PropType<any>,
       required: false,
       default: 0
     },
@@ -32,10 +33,17 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
+    },
+    recordNavigation: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  setup(props) {
+  emits: ["update:tab"],
+  setup(props, { emit }) {
     const { getColors } = useColors();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -51,8 +59,22 @@ export default defineComponent({
       "--fs-tab-tag-color"              : colors.value.baseContrast!
     }));
 
+    const onUpdateTab = (tab: number): void => {
+      if (props.recordNavigation) {
+        router.replace({ query: { tab: tab.toString() } });
+      }
+      emit("update:tab", tab);
+    }
+
+    onMounted((): void => {
+      if (props.recordNavigation && router.currentRoute.value.query.tab) {
+        emit("update:tab", router.currentRoute.value.query.tab);
+      }
+    });
+
     return {
-      style
+      style,
+      onUpdateTab
     };
   }
 });

package/components/lists/FSDataTableUI.vue

@@ -446,7 +446,7 @@
               v-for="(item, index) in items"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -617,7 +617,7 @@
               v-for="(item, index) in items.filter((item) => item.type === 'item')"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -1360,10 +1360,10 @@ export default defineComponent({
     };
 
     const resetRowIndex = (initialIndex: number, currentIndex: number, draggedElement: HTMLElement, tbodyElement: HTMLElement) => {
-      if (initialIndex > currentIndex) {
+      if (initialIndex > currentIndex && tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("afterend", draggedElement);
       }
-      else {
+      else if(tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("beforebegin", draggedElement);
       }
     };

package/components/lists/FSDraggable.vue

@@ -74,7 +74,7 @@ export default defineComponent({
           const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
           dragged.classList.add("fs-draggable-dragging");
           dragged.classList.add("fs-draggable-dragging-grabbegin");
-          dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+          dragged.dataset.initialIndex = props.item.index;
           event.preventDefault();
         }
       }, mobileGrabThreshold);
@@ -171,7 +171,7 @@ export default defineComponent({
         return;
       }
       const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+      dragged.dataset.initialIndex = props.item.index;
       event.dataTransfer?.setDragImage(dragged, 25, 25);
       
       if (event.dataTransfer) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.67",
-    "@dative-gpi/foundation-shared-services": "1.0.67"
+    "@dative-gpi/foundation-shared-domain": "1.0.68",
+    "@dative-gpi/foundation-shared-services": "1.0.68"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ba62d45e0ff1f5df1090b715b4a01abc8ce9c3a4"
+  "gitHead": "341389f8890f7ebe2e0ac03ea54e5ed38e9c7e56"
 }