@flux-ui/components 3.0.0-next.58 → 3.0.0-next.59

package/src/component/FluxFormDateInput.vue

@@ -36,14 +36,14 @@
     import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import type { DateTime } from 'luxon';
     import { toRef, useTemplateRef } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { useDateFlyout } from '$flux/composable/private';
+    import { useDisabled } from '~flux/components/composable';
+    import { useDateFlyout } from '~flux/components/composable/private';
     import FluxDatePicker from './FluxDatePicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const emit = defineEmits<{
         blur: [];

package/src/component/FluxFormDateRangeInput.vue

@@ -46,14 +46,14 @@
     import { clsx } from 'clsx';
     import type { DateTime } from 'luxon';
     import { computed, toRef, unref, useTemplateRef } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { useDateFlyout } from '$flux/composable/private';
-    import { createLabelForDateRange } from '$flux/util';
+    import { useDisabled } from '~flux/components/composable';
+    import { useDateFlyout } from '~flux/components/composable/private';
+    import { createLabelForDateRange } from '~flux/components/util';
     import FluxDatePicker from './FluxDatePicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<[DateTime, DateTime] | null>({
         required: true

package/src/component/FluxFormDateTimeInput.vue

@@ -49,15 +49,15 @@
     import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import { DateTime } from 'luxon';
     import { toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { useDateFlyout } from '$flux/composable/private';
+    import { useDisabled } from '~flux/components/composable';
+    import { useDateFlyout } from '~flux/components/composable/private';
     import FluxDatePicker from './FluxDatePicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<DateTime | null>({
         required: true

package/src/component/FluxFormField.vue

@@ -51,10 +51,10 @@
     lang="ts"
     setup>
     import { provide, useId, type VNode } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFormFieldInjectionKey } from '$flux/data';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFormFieldInjectionKey } from '~flux/components/data';
     import FluxFormFieldAddition from './FluxFormFieldAddition.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineProps<{
         readonly currentLength?: number;

package/src/component/FluxFormFieldAddition.vue

@@ -25,7 +25,7 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const {
         mode = 'hint'

package/src/component/FluxFormGrid.vue

@@ -12,7 +12,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineProps<{
         readonly columns?: number;

package/src/component/FluxFormInput.vue

@@ -68,11 +68,11 @@
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
     import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import { inputMask } from '$flux/data';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { inputMask } from '~flux/components/data';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const emit = defineEmits<{
         blur: [];

package/src/component/FluxFormInputAddition.vue

@@ -16,10 +16,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/component/FluxFormInputGroup.vue

@@ -13,9 +13,9 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Form.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineProps<{
         readonly isSecondary?: boolean;

package/src/component/FluxFormPinInput.vue

@@ -39,9 +39,9 @@
     import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { toRef, unref, useTemplateRef } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
-    import $style from '$flux/css/component/Form.module.scss';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<string>({
         default: ''

package/src/component/FluxFormRangeSlider.vue

@@ -46,9 +46,9 @@
     import { clampWithStepPrecision, countDecimals, formatNumber } from '@basmilius/utils';
     import type { FluxFormInputBaseProps } from '@flux-ui/types';
     import { computed, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
-    import { addTooltip, removeTooltip, updateTooltip } from '$flux/data';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { addTooltip, removeTooltip, updateTooltip } from '~flux/components/data';
     import { SliderBase, SliderThumb, SliderTrack } from './primitive';
 
     const modelValue = defineModel<[number, number]>({

package/src/component/FluxFormRow.vue

@@ -8,7 +8,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxFormSection.vue

@@ -12,7 +12,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineProps<{
         readonly title: string;

package/src/component/FluxFormSelect.vue

@@ -24,10 +24,10 @@
     import type { FluxFormInputBaseProps, FluxFormSelectEntry, FluxFormSelectValue } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { toRef, unref } from 'vue';
-    import { SelectBase } from '$flux/component/primitive';
-    import { useDisabled } from '$flux/composable';
-    import { useFormSelect } from '$flux/composable/private';
-    import $formStyle from '$flux/css/component/Form.module.scss';
+    import { SelectBase } from '~flux/components/component/primitive';
+    import { useDisabled } from '~flux/components/composable';
+    import { useFormSelect } from '~flux/components/composable/private';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
 
     const modelSearch = defineModel<string>('searchQuery', {
         default: ''

package/src/component/FluxFormSelectAsync.vue

@@ -25,12 +25,12 @@
     import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFormInputBaseProps, FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed, type Ref, ref, toRef, unref, watch } from 'vue';
-    import { SelectBase } from '$flux/component/primitive';
-    import { useDisabled } from '$flux/composable';
-    import { useFormSelect } from '$flux/composable/private';
-    import { isFluxFormSelectOption } from '$flux/data';
-    import $formStyle from '$flux/css/component/Form.module.scss';
+    import { computed, ref, type Ref, toRef, unref, watch } from 'vue';
+    import { SelectBase } from '~flux/components/component/primitive';
+    import { useDisabled } from '~flux/components/composable';
+    import { useFormSelect } from '~flux/components/composable/private';
+    import { isFluxFormSelectOption } from '~flux/components/data';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
 
     const modelSearch = defineModel<string>('searchQuery', {
         default: ''

package/src/component/FluxFormSlider.vue

@@ -32,8 +32,8 @@
     import { clampWithStepPrecision, countDecimals, formatNumber } from '@basmilius/utils';
     import type { FluxFormInputBaseProps } from '@flux-ui/types';
     import { computed, ref, toRef, unref, useTemplateRef, watch, watchEffect } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { addTooltip, removeTooltip, updateTooltip } from '$flux/data';
+    import { useDisabled } from '~flux/components/composable';
+    import { addTooltip, removeTooltip, updateTooltip } from '~flux/components/data';
     import { SliderBase, SliderThumb, SliderTrack } from './primitive';
 
     const modelValue = defineModel<number>({

package/src/component/FluxFormTextArea.vue

@@ -32,8 +32,8 @@
     import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { toRef } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import $style from '$flux/css/component/Form.module.scss';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const emit = defineEmits<{
         blur: [];

package/src/component/FluxFormTimeZonePicker.vue

@@ -21,10 +21,10 @@
     import type { FluxFormInputBaseProps, FluxFormSelectEntry } from '@flux-ui/types';
     import { upperFirst } from 'lodash-es';
     import { computed, toRef } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
-    import type { FluxTranslation } from '$flux/data';
-    import { TIME_ZONE_GROUP_ORDER, TIME_ZONES } from '$flux/data/timeZones';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import type { FluxTranslation } from '~flux/components/data';
+    import { TIME_ZONE_GROUP_ORDER, TIME_ZONES } from '~flux/components/data/timeZones';
     import FluxFormSelect from './FluxFormSelect.vue';
 
     const modelValue = defineModel<string | null>({

package/src/component/FluxFormTreeViewSelect.vue

@@ -116,18 +116,15 @@
     import type { FluxColor, FluxFormInputBaseProps, FluxFormTreeViewSelectOption, FluxFormTreeViewSelectValue } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { type ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import type { TreeFlatNode } from '$flux/composable/private';
-    import { flattenAll, flattenVisible, INITIAL_HIGHLIGHTED_INDEX, useDropdownPopup, useTranslate, useTreeView } from '$flux/composable/private';
-    import { FluxFadeTransition } from '$flux/transition';
-    import FluxFormInput from '$flux/component/FluxFormInput.vue';
-    import FluxIcon from '$flux/component/FluxIcon.vue';
-    import FluxTag from '$flux/component/FluxTag.vue';
-    import Anchor from '$flux/component/primitive/Anchor.vue';
-    import AnchorPopup from '$flux/component/primitive/AnchorPopup.vue';
-    import TreeNodeRenderer from '$flux/component/primitive/TreeNodeRenderer.vue';
-    import $formStyle from '$flux/css/component/Form.module.scss';
-    import $style from '$flux/css/component/TreeViewSelect.module.scss';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { flattenAll, flattenVisible, INITIAL_HIGHLIGHTED_INDEX, type TreeFlatNode, useDropdownPopup, useTranslate, useTreeView } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import FluxFormInput from './FluxFormInput.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxTag from './FluxTag.vue';
+    import { Anchor, AnchorPopup, TreeNodeRenderer } from './primitive';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/TreeViewSelect.module.scss';
 
     type FlatNode = TreeFlatNode<FluxFormTreeViewSelectOption>;
 

package/src/component/FluxGallery.vue

@@ -57,13 +57,13 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxFocalPointObject } from '@flux-ui/types';
-    import { useTranslate } from '$flux/composable/private';
+    import type { VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxDropZone from './FluxDropZone.vue';
     import FluxGalleryItem from './FluxGalleryItem.vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Gallery.module.scss';
+    import $style from '~flux/components/css/component/Gallery.module.scss';
 
     const emit = defineEmits<{
         delete: [number];

package/src/component/FluxGalleryItem.vue

@@ -30,7 +30,7 @@
     import FluxFocalPointImage from './FluxFocalPointImage.vue';
     import FluxRemove from './FluxRemove.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Gallery.module.scss';
+    import $style from '~flux/components/css/component/Gallery.module.scss';
 
     const emit = defineEmits<{
         delete: [];

package/src/component/FluxGrid.vue

@@ -13,7 +13,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Grid.module.scss';
+    import $style from '~flux/components/css/component/Grid.module.scss';
 
     const {
         columns = 12,

package/src/component/FluxGridColumn.vue

@@ -16,7 +16,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Grid.module.scss';
+    import $style from '~flux/components/css/component/Grid.module.scss';
 
     defineProps<{
         readonly xs?: number;

package/src/component/FluxGridPattern.vue

@@ -42,7 +42,7 @@
     lang="ts"
     setup>
     import { useId } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     const {
         width = 42,

package/src/component/FluxIcon.vue

@@ -29,8 +29,8 @@
     import { warn } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { iconRegistry } from '$flux/data';
-    import $style from '$flux/css/component/Icon.module.scss';
+    import { iconRegistry } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Icon.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];

package/src/component/FluxInfo.vue

@@ -14,10 +14,10 @@
 <script
     setup
     lang="ts">
-    import type { VNode } from 'vue';
     import type { FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Info.module.scss';
+    import $style from '~flux/components/css/component/Info.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/component/FluxItem.vue

@@ -7,5 +7,5 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Item.module.scss';
+    import $style from '~flux/components/css/component/Item.module.scss';
 </script>

package/src/component/FluxItemActions.vue

@@ -9,8 +9,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Item.module.scss';
     import FluxActionBar from './FluxActionBar.vue';
+    import $style from '~flux/components/css/component/Item.module.scss';
 
     defineProps<{
         readonly isCenter?: boolean;

package/src/component/FluxItemContent.vue

@@ -7,7 +7,7 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Item.module.scss';
+    import $style from '~flux/components/css/component/Item.module.scss';
 
     defineProps<{
         readonly isCenter?: boolean;

package/src/component/FluxItemMedia.vue

@@ -11,7 +11,7 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Item.module.scss';
+    import $style from '~flux/components/css/component/Item.module.scss';
 
     defineProps<{
         readonly isCenter?: boolean;

package/src/component/FluxItemStack.vue

@@ -10,5 +10,5 @@
     lang="ts"
     setup>
     import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Item.module.scss';
+    import $style from '~flux/components/css/component/Item.module.scss';
 </script>

package/src/component/FluxKanban.vue

@@ -21,9 +21,9 @@
     setup>
     import type { FluxKanbanMoveColumnEvent, FluxKanbanMoveEvent } from '@flux-ui/types';
     import { computed, onBeforeUnmount, onMounted, provide, ref, toRef, useTemplateRef, watch } from 'vue';
-    import { FluxDisabledInjectionKey, FluxKanbanInjectionKey } from '$flux/data/di';
-    import { useKanban } from '$flux/composable/private/useKanban';
-    import $style from '$flux/css/component/FluxKanban.module.scss';
+    import { useKanban } from '~flux/components/composable/private';
+    import { FluxDisabledInjectionKey, FluxKanbanInjectionKey } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Kanban.module.scss';
 
     const {
         ariaLabel,
@@ -73,28 +73,21 @@
         kanban.onPointerMove(evt.clientX, evt.clientY);
     }
 
-    function onWindowDrop(): void {
-        kanban.endDrag();
-        kanban.endColumnDrag();
-    }
-
     onMounted(() => {
         kanban.setBoardElement(root.value);
         window.addEventListener('drag', onPointerMove);
-        window.addEventListener('dragend', onWindowDrop);
+        window.addEventListener('dragend', kanban.cancelAll);
     });
 
     onBeforeUnmount(() => {
         kanban.setBoardElement(null);
         window.removeEventListener('drag', onPointerMove);
-        window.removeEventListener('dragend', onWindowDrop);
+        window.removeEventListener('dragend', kanban.cancelAll);
     });
 
     watch(() => disabled, value => {
         if (value) {
-            kanban.endDrag();
-            kanban.endColumnDrag();
-            kanban.cancelKeyboardDrop();
+            kanban.cancelAll();
         }
     });
 

package/src/component/FluxKanbanColumn.vue

@@ -14,7 +14,7 @@
             isColumnDropBefore && $style.isColumnDropBefore,
             disabledState && $style.isDisabled
         ]">
-        <div
+        <header
             :class="$style.kanbanColumnHeader"
             :draggable="isReorderable && !disabledState"
             :tabindex="isReorderable && !disabledState ? 0 : undefined"
@@ -27,9 +27,9 @@
             </slot>
 
             <slot name="actions"/>
-        </div>
+        </header>
 
-        <div
+        <main
             ref="body"
             :class="$style.kanbanColumnBody"
             @dragenter="onDragEnter"
@@ -45,29 +45,33 @@
             </div>
 
             <div
+                aria-hidden="true"
                 :class="[
                     $style.kanbanDropIndicator,
-                    isDropEnd && $style.isDropEndActive,
-                    isDropEnd && !kanban.isDropAllowed.value && $style.isDropEndDisallowed
-                ]"/>
-        </div>
+                    dropIndicator !== null && $style.isVisible,
+                    dropIndicator !== null && !kanban.isDropAllowed.value && $style.isDisallowed
+                ]"
+                :style="dropIndicator !== null ? { transform: `translateY(${dropIndicator}px)` } : undefined"/>
+        </main>
 
-        <div
+        <footer
             v-if="hasFooter"
             :class="$style.kanbanColumnFooter">
-            <slot name="footer"/>
-        </div>
+            <slot
+                v-if="hasFooter"
+                name="footer"/>
+        </footer>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { Comment, Text, computed, inject, onBeforeUnmount, onMounted, provide, ref, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';
     import { flattenVNodeTree } from '@flux-ui/internals';
-    import { FluxDisabledInjectionKey, FluxKanbanInjectionKey } from '$flux/data/di';
-    import useDisabled from '$flux/composable/useDisabled';
-    import $style from '$flux/css/component/FluxKanban.module.scss';
+    import { Comment, computed, onBeforeUnmount, onMounted, provide, Text, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';
+    import { useDisabled, useKanbanInjection } from '~flux/components/composable';
+    import { FluxDisabledInjectionKey } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Kanban.module.scss';
 
     const {
         columnId,
@@ -87,7 +91,7 @@
         footer?(): any;
     }>();
 
-    const kanban = inject(FluxKanbanInjectionKey)!;
+    const kanban = useKanbanInjection();
     const root = useTemplateRef('root');
     const body = useTemplateRef('body');
     const slots = useSlots();
@@ -95,14 +99,28 @@
     const disabledState = useDisabled(toRef(() => disabled));
     provide(FluxDisabledInjectionKey, disabledState);
 
-    let dragEnterCount = 0;
-    const isOver = ref(false);
-
+    const isOver = computed(() => kanban.isOverColumnId.value === columnId);
     const isReorderable = computed(() => unref(kanban.reorderableColumns) && !unref(disabledState));
 
-    const isDropEnd = computed(() => {
+    const dropIndicator = computed<number | null>(() => {
         const state = unref(kanban.dragState);
-        return state !== null && state.dropColumnId === columnId && state.beforeCardId === null;
+        const bodyEl = body.value;
+
+        if (!state || state.dropColumnId !== columnId || !(bodyEl instanceof HTMLElement)) {
+            return null;
+        }
+
+        const items = Array.from(bodyEl.children).filter(
+            (child): child is HTMLElement => child instanceof HTMLElement && kanban.getItemInfo(child) !== undefined
+        );
+
+        if (state.beforeItemId === null) {
+            const last = items[items.length - 1];
+            return last ? last.offsetTop + last.offsetHeight + 4 : 4;
+        }
+
+        const target = items.find(el => kanban.getItemInfo(el)?.itemId === state.beforeItemId);
+        return target ? target.offsetTop - 5 : null;
     });
 
     const isColumnDragging = computed(() => unref(kanban.columnDragState)?.columnId === columnId);
@@ -135,20 +153,11 @@
     const hasFooter = computed(() => !!slots.footer);
 
     function onDragEnter(): void {
-        if (unref(disabledState)) {
-            return;
-        }
-
-        dragEnterCount++;
-        isOver.value = true;
+        kanban.enterColumn(columnId);
     }
 
     function onDragLeave(): void {
-        if (--dragEnterCount <= 0) {
-            dragEnterCount = 0;
-            isOver.value = false;
-            kanban.clearDropTarget();
-        }
+        kanban.leaveColumn(columnId);
     }
 
     function onDragOver(evt: DragEvent): void {
@@ -159,17 +168,14 @@
         evt.preventDefault();
 
         const target = evt.target as Element;
-        const isOverCard = !!target.closest('[data-kanban-card]');
+        const isOverItem = !!target.closest('[data-kanban-item]');
 
-        if (!isOverCard) {
+        if (!isOverItem) {
             kanban.updateDropTarget(columnId, null);
         }
     }
 
     function onDrop(evt: DragEvent): void {
-        dragEnterCount = 0;
-        isOver.value = false;
-
         if (unref(disabledState) || !unref(kanban.dragState)) {
             return;
         }