@dative-gpi/foundation-shared-components 0.0.42 → 0.0.43

package/components/lists/FSDataIteratorItem.vue

@@ -2,7 +2,7 @@
   <FSCard
     class="fs-data-iterator-item"
     padding="12px"
-    width="100%"
+    width="50%"
   >
     <FSCol>
       <slot name="item.top" v-bind="{ item: $props.item }" />

package/components/lists/FSDataTableUI.vue

@@ -17,7 +17,7 @@
       />
       <slot name="toolbar" />
       <v-spacer />
-      <FSOptionGroup
+      <FSToggleSet
         v-if="!$props.disableTable && !$props.disableIterator"
         :values="modeOptions"
         :required="true"
@@ -36,10 +36,7 @@
           @update:filter="(value) => toggleFilter(header.value, value)"
         >
           <template #default="{ filter }">
-            <slot
-              :name="filterSlot(header)"
-              v-bind="{ filter }"
-            />
+            <slot :name="filterSlot(header)" v-bind="{ filter }" />
           </template>
         </FSFilterButton>
         <FSChip
@@ -71,7 +68,7 @@
         :items="innerItems"
         :fixedHeader="true"
         :multiSort="false"
-        :hover="!$props.sortDraggable"
+        :hover="true"
         :style="style"
         :class="classes"
         :page="innerPage"
@@ -80,10 +77,6 @@
         @auxclick:row="onClickRow"
         @click:row="onClickRow"
         @update:sortBy="innerSortBy = $event ? $event[0] : null"
-        @dragover.prevent
-        @drop:row="(event, row) => onDrop(event, row, 'tr.v-data-table__tr')"
-        @dragover="onDragOver($event, 'tr.v-data-table__tr', 'tbody')"
-        @dragleave="onDragLeave"
       >
         <template #no-data>
           <FSText
@@ -118,37 +111,11 @@
             />
           </FSRow>
         </template>
-        <template #[`item.data-table-draggable`]="props">
-          <FSDraggable
-            elementSelector="tr.v-data-table__tr"
-            :disabled="draggableDisabled"
-            :item="props"
-            @update:dragend="(event, dragged) => onDragEnd(event, dragged, 'tbody')"
-          >
-            <FSRow
-              class="fs-data-table-draggable"
-              align="bottom-center"
-              width="hug"
-            >
-              <FSIcon
-                size="l"
-              >
-                mdi-drag-vertical
-              </FSIcon>
-            </FSRow>
-          </FSDraggable>
-        </template>
         <template #[`header.data-table-group`]="props">
-          <slot
-            name="header.data-table-group"
-            v-bind="props"
-          />
+          <slot name="header.data-table-group" v-bind="props" />
         </template>
         <template #[`item.data-table-group`]="props">
-          <slot
-            name="item.data-table-group"
-            v-bind="props"
-          />
+          <slot name="item.data-table-group" v-bind="props" />
         </template>
         <template #group-header="props">
           <template :ref="() => { if (!props.isGroupOpen(props.item)) { props.toggleGroup(props.item) } }" />
@@ -158,39 +125,27 @@
               class="fs-data-table-group-header"
               :colspan="extraHeaders.concat(innerHeaders).length + 1"
             >
-              <slot
-                name="group-header"
-                v-bind="props"
+              <slot name="group-header" v-bind="props">
+              <FSCard
+                padding="12px 16px"
               >
-                <FSCard
-                  padding="12px 16px"
+                <FSRow
+                  align="center-left"
+                  width="hug"
                 >
-                  <FSRow
-                    align="center-left"
-                    width="hug"
-                  >
-                    <FSText>
-                      <slot
-                        name="group-header-title"
-                        v-bind="props"
-                      >
-                        {{ props.item.value }}
-                      </slot>
-                    </FSText>
-                  </FSRow>
-                </FSCard>
+                  <FSText>
+                    <slot name="group-header-title" v-bind="props">
+                      {{ props.item.value }}
+                    </slot>
+                  </FSText>
+                </FSRow>
+              </FSCard>
               </slot>
             </td>
           </tr>
         </template>
-        <template
-          v-for="(header, index) in headersSlots"
-          #[header.slotName]="props"
-        >
-          <slot
-            :name="header.slotName"
-            v-bind="props"
-          >
+        <template v-for="(header, index) in headersSlots" #[header.slotName]="props">
+          <slot :name="header.slotName" v-bind="props">
             <FSRow
               align="center-left"
               :wrap="false"
@@ -222,14 +177,8 @@
             </FSRow>
           </slot>
         </template>
-        <template
-          v-for="(item, index) in itemsSlots"
-          #[item.slotName]="props"
-        >
-          <slot
-            :name="item.slotName"
-            v-bind="props"
-          >
+        <template v-for="(item, index) in itemsSlots" #[item.slotName]="props">
+          <slot :name="item.slotName" v-bind="props">
             <FSRow
               align="center-left"
               :key="index"
@@ -300,14 +249,8 @@
             />
           </FSRow>
         </template>
-        <template
-          v-for="(_, name) in innerSlots"
-          #[name]="props"
-        >
-          <slot
-            :name="name"
-            v-bind="props"
-          />
+        <template v-for="(_, name) in innerSlots" #[name]="props">
+          <slot :name="name" v-bind="props" />
         </template>
       </v-data-table>
       <v-data-iterator
@@ -320,49 +263,25 @@
         <template #default="{ items }">
           <FSCol
             width="fill"
-            class="fs-data-iterator-container"
           >
-            <FSDraggable
-              v-for="(item, index) in items"
-              elementSelector=".fs-draggable-item"
-              :disabled="draggableDisabled"
-              :item="item"
-              :key="index"
-              @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
-              @dragover="onDragOver($event, '.fs-draggable-item', '.fs-data-iterator-container')"
-              @drop="(event) => onDrop(event, item, '.fs-draggable-item')"
-              @dragleave="onDragLeave"
-              @dragover.prevent
-            >
-              <slot
-                name="item.iterator"
-                v-bind="{ item, index }"
-              >
+            <template v-for="(item, index) in items">
+              <slot name="item.iterator" v-bind="{ item, index }">
                 <FSDataIteratorItem
                   v-if="item.type === 'item'"
+                  :key="index"
+                  :item="item.raw"
+                  :color="$props.color"
+                  :itemTo="$props.itemTo"
+                  :showSelect="$props.showSelect"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
                   :modelValue="innerValue.includes(item.raw[$props.itemValue])"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
-                  :item="item.raw"
-                  :key="index"
                   @update:modelValue="toggleSelect"
                 >
                   <template #[`item.top`]="props">
-                    <slot
-                      name="item.top"
-                      v-bind="props"
-                    />
+                    <slot name="item.top" v-bind="props" />
                   </template>
-                  <template
-                    v-for="(item, index) in itemsSlots"
-                    #[item.slotName]="props"
-                  >
-                    <slot
-                      :name="item.slotName"
-                      v-bind="props"
-                    >
+                  <template v-for="(item, index) in itemsSlots" #[item.slotName]="props">
+                    <slot :name="item.slotName" v-bind="props">
                       <FSText
                         :key="index"
                       >
@@ -371,14 +290,11 @@
                     </slot>
                   </template>
                   <template #[`item.bottom`]="props">
-                    <slot
-                      name="item.bottom"
-                      v-bind="props"
-                    />
+                    <slot name="item.bottom" v-bind="props" />
                   </template>
                 </FSDataIteratorItem>
               </slot>
-            </FSDraggable>
+            </template>
           </FSCol>
         </template>
         <template #footer>
@@ -452,48 +368,24 @@
         <template #default="{ items }">
           <FSRow
             width="hug"
-            class="fs-data-iterator-container"
           >
-            <FSDraggable
-              v-for="(item, index) in items.filter((item) => item.type === 'item')"
-              elementSelector=".fs-draggable-item"
-              :disabled="draggableDisabled"
-              :item="item"
-              :key="index"
-              @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
-              @dragover="onDragOver($event, '.fs-draggable-item', '.fs-data-iterator-container')"
-              @drop="(event) => onDrop(event, item, '.fs-draggable-item')"
-              @dragleave="onDragLeave"
-              @dragover.prevent
-            >
-              <slot
-                name="item.tile"
-                v-bind="{ index, item: item.raw, toggleSelect }"
-              >
+            <template v-for="(item, index) in items.filter((item) => item.type === 'item')">
+              <slot name="item.tile" v-bind="{ index, item: item.raw, toggleSelect }">
                 <FSDataIteratorItem
+                  :key="index"
+                  :item="item.raw"
+                  :color="$props.color"
+                  :itemTo="$props.itemTo"
+                  :showSelect="$props.showSelect"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
                   :modelValue="innerValue.includes(item.raw[$props.itemValue])"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
-                  :item="item.raw"
-                  :key="index"
                   @update:modelValue="toggleSelect"
                 >
                   <template #[`item.top`]="props">
-                    <slot
-                      name="item.top"
-                      v-bind="props"
-                    />
+                    <slot name="item.top" v-bind="props" />
                   </template>
-                  <template
-                    v-for="(item, index) in itemsSlots"
-                    #[item.slotName]="props"
-                  >
-                    <slot
-                      :name="item.slotName"
-                      v-bind="props"
-                    >
+                  <template v-for="(item, index) in itemsSlots" #[item.slotName]="props">
+                    <slot :name="item.slotName" v-bind="props">
                       <FSText
                         :key="index"
                       >
@@ -502,14 +394,11 @@
                     </slot>
                   </template>
                   <template #[`item.bottom`]="props">
-                    <slot
-                      name="item.bottom"
-                      v-bind="props"
-                    />
+                    <slot name="item.bottom" v-bind="props" />
                   </template>
                 </FSDataIteratorItem>
               </slot>
-            </FSDraggable>
+            </template>
           </FSRow>
         </template>
       </v-data-iterator>
@@ -532,13 +421,11 @@ import FSSelectField from "../fields/FSSelectField.vue";
 import FSFilterButton from "./FSFilterButton.vue";
 import FSHiddenButton from "./FSHiddenButton.vue";
 import FSHeaderButton from "./FSHeaderButton.vue";
-import FSOptionGroup from "../FSOptionGroup.vue";
+import FSContainer from "../FSContainer.vue";
 import FSToggleSet from "../FSToggleSet.vue";
-import FSDraggable from "./FSDraggable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
-import FSIcon from "../FSIcon.vue";
 import FSText from "../FSText.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
@@ -552,13 +439,11 @@ export default defineComponent({
     FSHeaderButton,
     FSSearchField,
     FSSelectField,
-    FSOptionGroup,
-    FSDraggable,
+    FSContainer,
     FSToggleSet,
     FSCheckbox,
     FSCard,
     FSChip,
-    FSIcon,
     FSText,
     FSRow,
     FSCol
@@ -656,19 +541,9 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 20
-    },
-    sortDraggable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    includeDraggable: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
-  emits: ["update:modelValue", "update:headers", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
+  emits: ["update:modelValue", "update:headers", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "click:row"],
   setup(props, { emit }) {
     const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
@@ -708,8 +583,6 @@ export default defineComponent({
       delete slots["no-data"];
       delete slots["header.data-table-select"];
       delete slots["item.data-table-select"];
-      delete slots["header.data-table-draggable"];
-      delete slots["item.data-table-draggable"];
       delete slots["header.data-table-group"];
       delete slots["item.data-table-group"];
       delete slots["group-header"];
@@ -733,8 +606,8 @@ export default defineComponent({
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-data-table-background-color": backgrounds.base,
-        "--fs-data-table-border-color": lights.base
+        "--fs-data-table-background-color"   : backgrounds.base,
+        "--fs-data-table-border-color"       : lights.base
       };
     });
 
@@ -747,19 +620,13 @@ export default defineComponent({
     });
 
     const extraHeaders = computed((): any[] => {
-      const extra: { key: string, width: string }[] = [];
+      const extra = [];
       if (props.groupBy) {
         extra.push({
           key: "data-table-group",
           width: "0%"
         });
       }
-      if (props.sortDraggable || props.includeDraggable) {
-        extra.push({
-          key: "data-table-draggable",
-          width: "0%"
-        });
-      }
       if (props.showSelect) {
         extra.push({
           key: "data-table-select",
@@ -849,31 +716,6 @@ export default defineComponent({
       }
     });
 
-    const onClickRow = computed(() => {
-      if (!!getCurrentInstance()?.vnode.props?.["onClick:row"] || props.itemTo) {
-        return (event: PointerEvent, row: any) => {
-          if (props.itemTo && router) {
-            if (event.metaKey || event.ctrlKey || event.button === 1) {
-              window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
-            }
-            else {
-              router.push(props.itemTo(row.item));
-            }
-          }
-          else {
-            emit("click:row", row.item);
-          }
-        };
-      }
-      else {
-        return null;
-      }
-    });
-
-    const draggableDisabled = computed(() => {
-      return (!props.sortDraggable && !props.includeDraggable) || !(innerSortBy.value === null || innerSortBy.value === undefined);
-    });
-
     const toggleSelectAll = (allSelected: boolean): void => {
       if (allSelected) {
         innerValue.value = [];
@@ -1033,11 +875,11 @@ export default defineComponent({
           if (!intersectionObserver.value) {
             intersectionObserver.value = new IntersectionObserver(entries => {
               entries.forEach((entry) => {
-                if (entry.boundingClientRect.bottom < window.innerHeight * 1.25) {
-                  if (innerItems.value.length > size.value) {
-                    size.value = Math.min(size.value + props.sizeIterator, innerItems.value.length);
+                  if (entry.boundingClientRect.bottom < window.innerHeight * 1.25) {
+                    if (innerItems.value.length > size.value) {
+                      size.value = Math.min(size.value + props.sizeIterator, innerItems.value.length);
+                    }
                   }
-                }
               });
             }, { threshold: [0.9] });
           }
@@ -1048,111 +890,26 @@ export default defineComponent({
       }
     }
 
-    const changeIndex = (oldIndex: number, newIndex: number) => {
-      if (oldIndex === newIndex) {
-        return;
-      }
-      const items = innerItems.value.slice();
-      const itemToMove = items.splice(oldIndex, 1)[0];
-      items.splice(newIndex, 0, itemToMove);
-      return items;
-    };
-
-    const resetRowIndex = (initialIndex: number, currentIndex: number, draggedElement: HTMLElement, tbodyElement: HTMLElement) => {
-      if (initialIndex > currentIndex) {
-        tbodyElement.children[initialIndex].insertAdjacentElement("afterend", draggedElement);
-      }
-      else {
-        tbodyElement.children[initialIndex].insertAdjacentElement("beforebegin", draggedElement);
-      }
-    };
-
-    const onDragOver = (event: DragEvent, elementSelector: string, elementContainerSelector: string) => {
-      const dragged = document.querySelector(".fs-draggable-dragging") as HTMLElement;
-
-      if (dragged != null) {
-        const target = (event.target as HTMLElement)?.closest(elementSelector);
-
-        if (target != null) {
-          if (props.includeDraggable) {
-            if (!props.sortDraggable) {
-              target.classList.add("fs-dropzone-include");
-            }
-            else {
-              const rowHeight = target.clientHeight;
-              const y = event.clientY - target.getBoundingClientRect().top;
-
-              if (y > rowHeight * (3 / 4)) {
-                target.insertAdjacentElement("afterend", dragged);
-                target.classList.remove("fs-dropzone-include");
-              }
-              else if (y < rowHeight * (1 / 4)) {
-                target.insertAdjacentElement("beforebegin", dragged);
-                target.classList.remove("fs-dropzone-include");
-              }
-              else if (dragged?.getAttribute("data-initial-index") !== null) {
-                target.classList.add("fs-dropzone-include");
-                const tbodyElement = (event.target as HTMLElement)?.closest(elementContainerSelector) as HTMLElement;
-                resetRowIndex(+dragged?.getAttribute('data-initial-index'), Array.from(tbodyElement.children).indexOf(dragged), dragged, tbodyElement);
-              }
-            }
-          }
-          else if (props.sortDraggable) {
-            const rowHeight = target.clientHeight;
-            const y = event.clientY - target.getBoundingClientRect().top;
-            if (y > rowHeight / 2) {
-              target.insertAdjacentElement("afterend", dragged);
+    const onClickRow = computed(() => {
+      if (!!getCurrentInstance()?.vnode.props?.['onClick:row'] || props.itemTo) {
+        return (event: PointerEvent, row: any) => {
+          if (props.itemTo && router) {
+            if (event.metaKey || event.ctrlKey || event.button === 1) {
+              window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
             }
             else {
-              target.insertAdjacentElement("beforebegin", dragged);
+              router.push(props.itemTo(row.item));
             }
           }
-        }
-
-      }
-    };
-
-    const onDragLeave = (event: DragEvent) => {
-      const dropzone = (event.target as HTMLElement)?.closest(".fs-dropzone-include");
-      if (dropzone && !(event.relatedTarget as HTMLElement)?.closest(".fs-dropzone-include")) {
-        dropzone.classList.remove("fs-dropzone-include");
-      }
-    };
-
-    const onDragEnd = (event: DragEvent, draggedElement: HTMLElement, elementContainerSelector: string) => {
-      const initialIndex = +(draggedElement.getAttribute("data-initial-index") ?? -1);
-
-      if (draggedElement != null && initialIndex !== -1) {
-        if (props.sortDraggable) {
-          const tbodyElement = (event.target as HTMLElement)?.closest(elementContainerSelector) as HTMLElement;
-          const currentIndex = Array.from(tbodyElement.children).indexOf(draggedElement);
-          const newItems = changeIndex(initialIndex, currentIndex);
-
-          if (newItems !== null && newItems !== undefined) {
-            emit("update:items", newItems);
+          else {
+            emit("click:row", row.item);
           }
-          resetRowIndex(initialIndex, currentIndex, draggedElement, tbodyElement);
-        }
+        };
       }
-    };
-
-    const onDrop = (event: DragEvent, row: any, elementSelector: string) => {
-      const draggedElement = document.querySelector(".fs-draggable-dragging");
-
-      if (draggedElement != null) {
-        const target = (event.target as HTMLElement)?.closest(elementSelector);
-        const draggedData = JSON.parse(event.dataTransfer?.getData("text/plain") ?? "");
-        const itemsData = draggedData.item ?? draggedData.raw;
-        const rowData = row.item ?? row.raw;
-
-        if (target != null) {
-          if (props.includeDraggable && itemsData[props.itemValue] != rowData[props.itemValue]) {
-            emit("update:include", { draggedItem: itemsData, targetItem: rowData })
-          }
-          target.closest(".fs-dropzone-include")?.classList.remove("fs-dropzone-include");
-        }
+      else {
+        return null;
       }
-    };
+    });
 
     onMounted(() => {
       computeFilters();
@@ -1218,7 +975,6 @@ export default defineComponent({
       size,
       onClickRow,
       isExtraSmall,
-      draggableDisabled,
       toggleSelectAll,
       toggleSelect,
       updateHeader,
@@ -1227,10 +983,6 @@ export default defineComponent({
       filterSlot,
       sortColor,
       sortIcon,
-      onDrop,
-      onDragOver,
-      onDragLeave,
-      onDragEnd
     };
   }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.42",
-    "@dative-gpi/foundation-shared-services": "0.0.42",
+    "@dative-gpi/foundation-shared-domain": "0.0.43",
+    "@dative-gpi/foundation-shared-services": "0.0.43",
     "@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": "b04bea74796441bbb7176bcdd7d1a23317faa2b8"
+  "gitHead": "69165444c1ca673a3f96fc7e7fb00a13e6bc1dfc"
 }

package/styles/components/fs_data_table.scss

@@ -99,4 +99,4 @@
     margin-top: -8px;
     height: 10px;
     width: 100%;
-}
+}

package/styles/components/index.scss

@@ -19,7 +19,6 @@
 @import "fs_date_field.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
-@import "fs_draggable.scss";
 @import "fs_error_toast.scss";
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";

package/components/lists/FSDraggable.vue

@@ -1,177 +0,0 @@
-<template>
-  <div
-    :draggable="!$props.disabled"
-    :class="classes"
-    @touchstart="onTouchStart"
-    @touchmove="onTouchMove"
-    @touchend="onTouchEnd"
-    @dragstart="onDragStart"
-    @dragend="onDragEnd"
-    @dragover.prevent
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue";
-
-export default defineComponent({
-  name: "FSDraggable",
-  props: {
-    elementSelector: {
-      type: String,
-      default: null,
-    },
-    item: {
-      type: Object,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["update:dragstart", "update:dragend"],
-  setup(props, { emit }) {
-    let prevDragOverTarget: EventTarget | null = null;
-
-    const draggedElementCopy = ref<HTMLElement|null>(null);
-    const touchStartX = ref(0);
-    const touchStartY = ref(0);
-    const touchEndX = ref(0);
-    const touchEndY = ref(0);
-
-    const classes = computed((): string[] => {
-      const classNames = ["fs-draggable-item"];
-      if (!props.disabled) {
-        classNames.push("fs-draggable-enabled");
-      }
-      return classNames;
-    });
-
-    const onTouchStart = (event: TouchEvent) => {
-      if (props.disabled) {
-        return;
-      }
-      event.preventDefault();
-      const touch = event.touches[0];
-      touchStartX.value = touch.clientX;
-      touchStartY.value = touch.clientY;
-
-      const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.classList.add("fs-draggable-dragging");
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
-
-      draggedElementCopy.value = dragged.cloneNode(true) as HTMLElement;
-      draggedElementCopy.value.style.position = "fixed";
-      draggedElementCopy.value.style.left = `${touchStartX.value - 25}px`;
-      draggedElementCopy.value.style.top = `${touchStartY.value - 25}px`;
-      draggedElementCopy.value.style.zIndex = "1000";
-      draggedElementCopy.value.style.pointerEvents = "none";
-    };
-
-    const onTouchMove = (event: TouchEvent) => {
-      if (props.disabled) {
-        return;
-      }
-      event.preventDefault();
-      const touch = event.touches[0];
-      touchEndX.value = touch.clientX;
-      touchEndY.value = touch.clientY;
-
-      draggedElementCopy.value.style.left = `${touchEndX.value - 25}px`;
-      draggedElementCopy.value.style.top = `${touchEndY.value - 25}px`;
-      document.body.appendChild(draggedElementCopy.value);
-      const dragOverTarget = document.elementFromPoint(touchEndX.value, touchEndY.value)?.closest(props.elementSelector);
-
-      if (dragOverTarget) {
-        const dragOverEvent = new Event("dragover", {
-          bubbles: true,
-          cancelable: true
-        });
-        dragOverTarget?.dispatchEvent(dragOverEvent);
-        if (dragOverTarget !== prevDragOverTarget) {
-          const dragLeaveEvent = new Event("dragleave", {
-            bubbles: true,
-            cancelable: true
-          });
-          prevDragOverTarget?.dispatchEvent(dragLeaveEvent);
-        }
-        prevDragOverTarget = dragOverTarget;
-      }
-      else if (prevDragOverTarget) {
-        const dragLeaveEvent = new Event("dragleave", {
-          bubbles: true,
-          cancelable: true
-        });
-        prevDragOverTarget?.dispatchEvent(dragLeaveEvent);
-        prevDragOverTarget = null;
-      }
-    };
-
-    const onTouchEnd = (event: TouchEvent) => {
-      if (props.disabled) {
-        return;
-      }
-      event.preventDefault();
-      const dragged = (event.target as HTMLElement)?.closest(props.elementSelector);
-      draggedElementCopy.value.remove();
-      draggedElementCopy.value = null;
-
-      const dropTarget = document.elementFromPoint(touchEndX.value, touchEndY.value);
-      const dragEndEvent = new Event("dragend");
-      Object.defineProperty(dragEndEvent, "srcElement", {
-        get: function () { return event.target; }
-      });
-      emit("update:dragend", dragEndEvent, dragged);
-
-      const dropEvent = new DragEvent("drop", {
-        bubbles: true,
-        cancelable: true,
-      });
-      dropEvent.dataTransfer?.setData("text/plain", JSON.stringify(props.item));
-      dropTarget?.dispatchEvent(dropEvent);
-
-      touchStartX.value = 0;
-      touchStartY.value = 0;
-      touchEndX.value = 0;
-      touchEndY.value = 0;
-      dragged.classList.remove("fs-draggable-dragging");
-    };
-
-    const onDragStart = (event: DragEvent) => {
-      if (props.disabled) {
-        event.preventDefault();
-        return;
-      }
-      const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
-      event.dataTransfer?.setDragImage(dragged, 25, 25);
-      
-      if (event.dataTransfer) {
-        event.dataTransfer.dropEffect = "move";
-        event.dataTransfer.effectAllowed = "move";
-      }
-      dragged?.classList.add("fs-draggable-dragging");
-      event.dataTransfer?.setData("text/plain", JSON.stringify(props.item));
-      emit("update:dragstart", event);
-    };
-
-    const onDragEnd = (event: DragEvent) => {
-      const dragged = (event.target as HTMLElement)?.closest(props.elementSelector);
-      dragged?.classList.remove("fs-draggable-dragging");
-      emit("update:dragend", event, dragged);
-    };
-
-    return {
-      classes,
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-      onDragStart,
-      onDragEnd
-    };
-  },
-});
-</script>

package/styles/components/fs_draggable.scss

@@ -1,25 +0,0 @@
-.fs-draggable-dragging {
-  opacity: 0.4;
-  filter: blur(1px);
-}
-
-.fs-dropzone-include {
-  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  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);
-}
-
-.fs-draggable-enabled {
-  cursor: move ;
-  cursor: grab ;
-  cursor: -moz-grab ;
-  cursor: -webkit-grab ;
-  user-select: none;
-}