bfg-common 1.5.92 → 1.5.94

package/components/atoms/list/dragDropList/DragDropList.vue

@@ -1,148 +1,148 @@
-<template>
-  <div :class="['drag-drop-list', { grab: isGrab }]">
-    <div
-      v-for="(item, key) in presentItems"
-      :key="key"
-      :class="['drag-drop-item', { grab: grabItemKey === key }]"
-      @mouseenter="hoveredItemPosition = key"
-      @mouseleave="hoveredItemPosition = -1"
-    >
-      <slot :name="`leftSide${key}`" />
-
-      <div class="icon-drag-handle" @mousedown="grab(item, $event)" />
-
-      <slot :name="`rightSide${key}`" />
-    </div>
-
-    <Teleport to="body">
-      <div v-show="isGrab" id="drag-drop-item-grab">
-        <div
-          v-if="grabItem?.iconClassName"
-          :class="['drag-drop-item-grab-icon', grabItem?.iconClassName]"
-        />
-        <span>{{ dragDropItemGrab }}</span>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
-
-const props = defineProps<{
-  items: any
-  grabItemKey: string
-}>()
-const emits = defineEmits<{
-  (event: 'drop', value: UI_I_DropEvent): void
-}>()
-
-const presentItems = computed<any>(() => props.items)
-
-const dragDropItemGrab = computed<any>(
-  () => grabItem.value?.[props.grabItemKey]
-)
-let dragDropItemGrabElem: HTMLElement
-
-const hoveredItemPosition = ref<number>(-1)
-const isGrab = ref<boolean>(false)
-const grabItem = ref<any>(null)
-const grab = (item: any, event: Event): void => {
-  isGrab.value = true
-  grabItem.value = item
-
-  setDragDropItemGrabElemPosition(event)
-}
-
-let setDragDropItemGrabElemPosition = (event: any): void => {
-  if (!dragDropItemGrabElem) return
-
-  dragDropItemGrabElem.style.top = `${event.clientY + 2}px`
-  dragDropItemGrabElem.style.left = `${event.clientX + 2}px`
-}
-setDragDropItemGrabElemPosition = useThrottle(setDragDropItemGrabElemPosition)
-
-const windowMousemove = (event: Event): void => {
-  if (!isGrab.value) {
-    return
-  }
-
-  setDragDropItemGrabElemPosition(event)
-}
-const windowMouseup = (): void => {
-  if (!isGrab.value) {
-    return
-  }
-  isGrab.value = false
-  if (hoveredItemPosition.value === -1) {
-    return
-  }
-
-  emits('drop', {
-    target: grabItem.value,
-    toPosition: hoveredItemPosition.value,
-  })
-}
-onMounted(() => {
-  dragDropItemGrabElem =
-    (document.getElementById('drag-drop-item-grab') as HTMLDivElement) || null
-  window.addEventListener('mousemove', windowMousemove)
-  window.addEventListener('mouseup', windowMouseup)
-})
-onUnmounted(() => {
-  window.removeEventListener('mousemove', windowMouseup)
-  window.removeEventListener('mouseup', windowMouseup)
-})
-</script>
-
-<style scoped lang="scss">
-.drag-drop-list {
-  user-select: none;
-
-  &.grab {
-    cursor: grabbing;
-
-    .drag-drop-item {
-      .icon-drag-handle {
-        cursor: grabbing;
-      }
-    }
-  }
-
-  .drag-drop-item {
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      background-color: #dddddd;
-    }
-
-    .icon-drag-handle {
-      cursor: grab;
-      &:active {
-        cursor: grabbing;
-      }
-    }
-  }
-}
-
-#drag-drop-item-grab {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--z-popover);
-  border-radius: 3px 0 0 3px;
-  border: 1px solid #cccccc;
-  border-left-color: #781da0;
-  background-color: #ffffff;
-  padding: 0 10px;
-  cursor: grabbing;
-  display: flex;
-  align-items: center;
-  opacity: 0.4;
-
-  .drag-drop-item-grab-icon {
-    margin-right: 6px;
-  }
-}
-</style>
+<template>
+  <div :class="['drag-drop-list', { grab: isGrab }]">
+    <div
+      v-for="(item, key) in presentItems"
+      :key="key"
+      :class="['drag-drop-item', { grab: grabItemKey === key }]"
+      @mouseenter="hoveredItemPosition = key"
+      @mouseleave="hoveredItemPosition = -1"
+    >
+      <slot :name="`leftSide${key}`" />
+
+      <div class="icon-drag-handle" @mousedown="grab(item, $event)" />
+
+      <slot :name="`rightSide${key}`" />
+    </div>
+
+    <Teleport to="body">
+      <div v-show="isGrab" id="drag-drop-item-grab">
+        <div
+          v-if="grabItem?.iconClassName"
+          :class="['drag-drop-item-grab-icon', grabItem?.iconClassName]"
+        />
+        <span>{{ dragDropItemGrab }}</span>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
+
+const props = defineProps<{
+  items: any
+  grabItemKey: string
+}>()
+const emits = defineEmits<{
+  (event: 'drop', value: UI_I_DropEvent): void
+}>()
+
+const presentItems = computed<any>(() => props.items)
+
+const dragDropItemGrab = computed<any>(
+  () => grabItem.value?.[props.grabItemKey]
+)
+let dragDropItemGrabElem: HTMLElement
+
+const hoveredItemPosition = ref<number>(-1)
+const isGrab = ref<boolean>(false)
+const grabItem = ref<any>(null)
+const grab = (item: any, event: Event): void => {
+  isGrab.value = true
+  grabItem.value = item
+
+  setDragDropItemGrabElemPosition(event)
+}
+
+let setDragDropItemGrabElemPosition = (event: any): void => {
+  if (!dragDropItemGrabElem) return
+
+  dragDropItemGrabElem.style.top = `${event.clientY + 2}px`
+  dragDropItemGrabElem.style.left = `${event.clientX + 2}px`
+}
+setDragDropItemGrabElemPosition = useThrottle(setDragDropItemGrabElemPosition)
+
+const windowMousemove = (event: Event): void => {
+  if (!isGrab.value) {
+    return
+  }
+
+  setDragDropItemGrabElemPosition(event)
+}
+const windowMouseup = (): void => {
+  if (!isGrab.value) {
+    return
+  }
+  isGrab.value = false
+  if (hoveredItemPosition.value === -1) {
+    return
+  }
+
+  emits('drop', {
+    target: grabItem.value,
+    toPosition: hoveredItemPosition.value,
+  })
+}
+onMounted(() => {
+  dragDropItemGrabElem =
+    (document.getElementById('drag-drop-item-grab') as HTMLDivElement) || null
+  window.addEventListener('mousemove', windowMousemove)
+  window.addEventListener('mouseup', windowMouseup)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousemove', windowMouseup)
+  window.removeEventListener('mouseup', windowMouseup)
+})
+</script>
+
+<style scoped lang="scss">
+.drag-drop-list {
+  user-select: none;
+
+  &.grab {
+    cursor: grabbing;
+
+    .drag-drop-item {
+      .icon-drag-handle {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  .drag-drop-item {
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: #dddddd;
+    }
+
+    .icon-drag-handle {
+      cursor: grab;
+      &:active {
+        cursor: grabbing;
+      }
+    }
+  }
+}
+
+#drag-drop-item-grab {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-popover);
+  border-radius: 3px 0 0 3px;
+  border: 1px solid #cccccc;
+  border-left-color: #781da0;
+  background-color: #ffffff;
+  padding: 0 10px;
+  cursor: grabbing;
+  display: flex;
+  align-items: center;
+  opacity: 0.4;
+
+  .drag-drop-item-grab-icon {
+    margin-right: 6px;
+  }
+}
+</style>