@dative-gpi/foundation-shared-components 0.0.54 → 0.0.56

package/components/FSClickable.vue

@@ -217,8 +217,8 @@ export default defineComponent({
         case ColorEnum.Primary:
         case ColorEnum.Success:
         case ColorEnum.Warning:
-        case ColorEnum.Error  : return ["standard"].includes(props.variant) ? colors.value.dark : colors.value.light;
-        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.light;
+        case ColorEnum.Error  : return ["full"].includes(props.variant) ? colors.value.light : colors.value.dark;
+        default               : return ["full"].includes(props.variant) ? darks.light : darks.dark;
       }
     });
 

package/components/lists/FSDataTableUI.vue

@@ -1085,7 +1085,7 @@ export default defineComponent({
       if (dragged != null) {
         const target = (event.target as HTMLElement)?.closest(elementSelector);
 
-        if (target != null) {
+        if (target != null && (target !== dragged || (props.sortDraggable && props.includeDraggable))) {
           if (props.includeDraggable) {
             if (!props.sortDraggable) {
               target.classList.add("fs-dropzone-include");
@@ -1110,14 +1110,24 @@ export default defineComponent({
             }
           }
           else if (props.sortDraggable) {
-            const rowHeight = target.clientHeight;
-            const y = event.clientY - target.getBoundingClientRect().top;
-            if (y > rowHeight / 2) {
+            const draggedY = dragged.getBoundingClientRect().top;
+            const targetY = target.getBoundingClientRect().top;
+            if (draggedY < targetY) {
               target.insertAdjacentElement("afterend", dragged);
             }
-            else {
+            else if (draggedY > targetY) {
               target.insertAdjacentElement("beforebegin", dragged);
             }
+            else {
+              const draggedX = dragged.getBoundingClientRect().left;
+              const targetX = target.getBoundingClientRect().left;
+              if (draggedX < targetX) {
+                target.insertAdjacentElement("afterend", dragged);
+              }
+              else {
+                target.insertAdjacentElement("beforebegin", dragged);
+              }
+            }
           }
         }
 
@@ -1157,7 +1167,7 @@ export default defineComponent({
         const itemsData = draggedData.item ?? draggedData.raw;
         const rowData = row.item ?? row.raw;
 
-        if (target != null) {
+        if (target != null && target !== draggedElement) {
           if (props.includeDraggable && itemsData[props.itemValue] != rowData[props.itemValue]) {
             emit("update:include", { draggedItem: itemsData, targetItem: rowData })
           }

package/components/lists/FSDraggable.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <FSRow
+    width="hug"
     :draggable="!$props.disabled"
     :class="classes"
     @touchstart="onTouchStart"
@@ -10,27 +11,32 @@
     @dragover.prevent
   >
     <slot />
-  </div>
+  </FSRow>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref } from "vue";
 
+import FSRow from "../FSRow.vue";
+
 export default defineComponent({
   name: "FSDraggable",
   props: {
     elementSelector: {
       type: String,
-      default: null,
+      default: null
     },
     item: {
       type: Object,
-      default: null,
+      default: null
     },
     disabled: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
+  },
+  components: {
+    FSRow
   },
   emits: ["update:dragstart", "update:dragend"],
   setup(props, { emit }) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.54",
+  "version": "0.0.56",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.54",
-    "@dative-gpi/foundation-shared-services": "0.0.54",
+    "@dative-gpi/foundation-shared-domain": "0.0.56",
+    "@dative-gpi/foundation-shared-services": "0.0.56",
     "@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": "391503e595cd9d731fca14b5bb2d3a10b6efee95"
+  "gitHead": "abad32205d89f93f2cfd5c83aae50f2d9248ecc0"
 }

package/styles/components/fs_draggable.scss

@@ -1,3 +1,12 @@
+.fs-draggable-item {
+  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+ 
+  &:has(.fs-data-iterator-item) {
+    flex: 1 1 0 !important;
+    width: 100% !important;
+  }
+}
+
 .fs-draggable-dragging {
   opacity: 0.4;
   filter: blur(1px);
@@ -8,10 +17,6 @@
   filter: brightness(0.85) contrast(1.1);
 }
 
-.fs-draggable-item {
-  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 div.fs-dropzone-include {
   transform: scale(1.04);
 }