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

package/src/component/FluxKanbanItem.vue

@@ -0,0 +1,162 @@
+<template>
+    <div
+        ref="root"
+        data-kanban-item
+        role="listitem"
+        aria-roledescription="Kanban item"
+        :aria-disabled="disabledState ? true : undefined"
+        :class="[
+            $style.kanbanItem,
+            isDragging && $style.isDragging,
+            isGrabbed && $style.isGrabbed,
+            disabledState && $style.isDisabled
+        ]"
+        :draggable="!disabledState"
+        :tabindex="disabledState ? -1 : 0"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+        @dragover.stop="onDragOver"
+        @focus="onFocus"
+        @keydown="handleKeyDown">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useKeyboardGrab } from '@flux-ui/internals';
+    import { computed, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled, useKanbanInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/Kanban.module.scss';
+
+    const {
+        columnId,
+        disabled = false,
+        itemId
+    } = defineProps<{
+        readonly columnId: string | number;
+        readonly disabled?: boolean;
+        readonly itemId: string | number;
+    }>();
+
+    defineSlots<{
+        default?(): any;
+    }>();
+
+    const kanban = useKanbanInjection();
+    const root = useTemplateRef('root');
+    const disabledState = useDisabled(toRef(() => disabled));
+
+    const isDragging = computed(() => {
+        const state = unref(kanban.dragState);
+        return state?.itemId === itemId && state?.mode === 'pointer';
+    });
+
+    const {isGrabbed, handleKeyDown, release} = useKeyboardGrab<true>({
+        isDraggable: computed(() => !unref(disabledState)),
+        itemId: toRef(() => itemId),
+        grabbedId: kanban.grabbedId,
+        onGrab() {
+            kanban.grabItem(itemId, columnId);
+            return true;
+        },
+        onMove(direction) {
+            kanban.moveKeyboard(direction);
+        },
+        onCommit() {
+            kanban.commitKeyboardDrop();
+        },
+        onCancel() {
+            kanban.cancelKeyboardDrop();
+        }
+    });
+
+    onMounted(() => {
+        if (root.value) {
+            kanban.registerItem(root.value, itemId);
+        }
+
+        if (kanban.isItemGrabbed(itemId)) {
+            root.value?.focus();
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (root.value) {
+            kanban.unregisterItem(root.value);
+        }
+    });
+
+    watch(() => itemId, (newId, oldId) => {
+        if (root.value && oldId !== undefined) {
+            kanban.unregisterItem(root.value);
+            kanban.registerItem(root.value, newId);
+        }
+    });
+
+    function onDragStart(evt: DragEvent): void {
+        if (unref(disabledState)) {
+            evt.preventDefault();
+            return;
+        }
+
+        if (isGrabbed.value) {
+            kanban.cancelKeyboardDrop();
+            release();
+        }
+
+        kanban.startDrag(itemId, columnId);
+
+        if (evt.dataTransfer) {
+            evt.dataTransfer.effectAllowed = 'move';
+            evt.dataTransfer.setData('text/plain', `item:${String(itemId)}`);
+
+            if (root.value) {
+                const offsetX = evt.offsetX || root.value.getBoundingClientRect().width / 2;
+                const offsetY = evt.offsetY || 12;
+                evt.dataTransfer.setDragImage(root.value, offsetX, offsetY);
+            }
+        }
+    }
+
+    function onDragEnd(): void {
+        kanban.endDrag();
+    }
+
+    function onFocus(): void {
+        root.value?.scrollIntoView({block: 'nearest', inline: 'nearest', behavior: 'smooth'});
+    }
+
+    function onDragOver(evt: DragEvent): void {
+        const state = unref(kanban.dragState);
+
+        if (!state || unref(disabledState)) {
+            return;
+        }
+
+        evt.preventDefault();
+
+        const itemEl = evt.currentTarget as Element;
+        const rect = itemEl.getBoundingClientRect();
+
+        if (evt.clientY < rect.top + rect.height / 2) {
+            kanban.updateDropTarget(columnId, itemId);
+        } else {
+            let next = itemEl.nextElementSibling;
+
+            while (next) {
+                const info = kanban.getItemInfo(next);
+
+                if (info) {
+                    kanban.updateDropTarget(columnId, info.itemId);
+                    return;
+                }
+
+                next = next.nextElementSibling;
+            }
+
+            kanban.updateDropTarget(columnId, null);
+        }
+    }
+</script>

package/src/component/FluxLayerPane.vue

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

package/src/component/FluxLayerPaneSecondary.vue

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

package/src/component/FluxLegend.vue

@@ -16,7 +16,7 @@
     lang="ts"
     setup>
     import type { FluxDirection, FluxLegendObject } from '@flux-ui/types';
-    import $style from '$flux/css/component/Legend.module.scss';
+    import $style from '~flux/components/css/component/Legend.module.scss';
 
     const {
         direction = 'horizontal'

package/src/component/FluxLink.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots, FluxIconName } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     const emit = defineEmits<FluxButtonEmits>();
 

package/src/component/FluxMenu.vue

@@ -13,7 +13,7 @@
     setup>
     import { useFocusZone } from '@flux-ui/internals';
     import { useTemplateRef, type VNode } from 'vue';
-    import $style from '$flux/css/component/Menu.module.scss';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineProps<{
         readonly isLarge?: boolean;

package/src/component/FluxMenuCollapsible.vue

@@ -36,12 +36,12 @@
 <script
     lang="ts"
     setup>
-    import type { FluxIconName, FluxTo } from '@flux-ui/types';
     import { flattenVNodeTree } from '@flux-ui/internals';
+    import type { FluxIconName, FluxTo } from '@flux-ui/types';
     import { computed, getCurrentInstance, ref, useId, type VNode, watch } from 'vue';
-    import { FluxAutoHeightTransition } from '$flux/transition';
+    import { FluxAutoHeightTransition } from '~flux/components/transition';
     import FluxMenuItem from './FluxMenuItem.vue';
-    import $style from '$flux/css/component/Menu.module.scss';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     type RouteRecordLike = {
         readonly name?: string | symbol | null | undefined;

package/src/component/FluxMenuGroup.vue

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

package/src/component/FluxMenuItem.vue

@@ -68,12 +68,12 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxButtonEmits, FluxButtonProps, FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxButton from './FluxButton.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Menu.module.scss';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineEmits<FluxButtonEmits>();
 

package/src/component/FluxMenuSubHeader.vue

@@ -23,7 +23,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Menu.module.scss';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineProps<{
         readonly iconLeading?: FluxIconName;

package/src/component/FluxMenuTitle.vue

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

package/src/component/FluxNotice.vue

@@ -50,13 +50,13 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { useTranslate } from '$flux/composable/private';
+    import type { VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Notice.module.scss';
+    import $style from '~flux/components/css/component/Notice.module.scss';
 
     const emit = defineEmits<{
         close: [];

package/src/component/FluxOverflowBar.vue

@@ -39,7 +39,7 @@
     import type { FluxAlignment, FluxDirection } from '@flux-ui/types';
     import { computed, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
     import FluxDynamicView from './FluxDynamicView.vue';
-    import $style from '$flux/css/component/OverflowBar.module.scss';
+    import $style from '~flux/components/css/component/OverflowBar.module.scss';
 
     const {
         alignment = 'center',

package/src/component/FluxOverlay.vue

@@ -2,9 +2,9 @@
     import type { FluxSize } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { defineComponent, type PropType } from 'vue';
-    import { FluxOverlayTransition } from '$flux/transition';
-    import { createDialogRenderer } from '$flux/util';
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import { FluxOverlayTransition } from '~flux/components/transition';
+    import { createDialogRenderer } from '~flux/components/util';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     export default defineComponent({
         emits: ['close'],

package/src/component/FluxOverlayProvider.vue

@@ -28,12 +28,12 @@
 <script
     lang="ts"
     setup>
-    import { useFluxStore } from '$flux/data';
+    import { useFluxStore } from '~flux/components/data';
     import FluxAlert from './FluxAlert.vue';
     import FluxConfirm from './FluxConfirm.vue';
     import FluxOverlay from './FluxOverlay.vue';
     import FluxPrompt from './FluxPrompt.vue';
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     const {alerts, confirms, prompts} = useFluxStore();
 </script>

package/src/component/FluxPagination.vue

@@ -58,10 +58,10 @@
     lang="ts"
     setup>
     import { computed, unref } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { showPrompt } from '$flux/data';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { showPrompt } from '~flux/components/data';
     import FluxPaginationButton from './FluxPaginationButton.vue';
-    import $style from '$flux/css/component/Pagination.module.scss';
+    import $style from '~flux/components/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
         navigate: [number];

package/src/component/FluxPaginationBar.vue

@@ -34,11 +34,11 @@
     setup>
     import type { FluxFormSelectOption } from '@flux-ui/types';
     import { computed, ref, watch } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxFormSelect from './FluxFormSelect.vue';
     import FluxPagination from './FluxPagination.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import $style from '$flux/css/component/Pagination.module.scss';
+    import $style from '~flux/components/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
         limit: [number];

package/src/component/FluxPaginationButton.vue

@@ -25,7 +25,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Pagination.module.scss';
+    import $style from '~flux/components/css/component/Pagination.module.scss';
 
     defineEmits<FluxButtonEmits>();
 

package/src/component/FluxPane.vue

@@ -23,7 +23,7 @@
     setup>
     import type { VNode } from 'vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const CLASS_MAP = {
         default: $style.paneDefault,

package/src/component/FluxPaneBody.vue

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

package/src/component/FluxPaneFooter.vue

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

package/src/component/FluxPaneGroup.vue

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

package/src/component/FluxPaneHeader.vue

@@ -27,10 +27,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/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/component/FluxPaneIllustration.vue

@@ -38,7 +38,7 @@
     import { computed, type VNode } from 'vue';
     import FluxAnimatedColors from './FluxAnimatedColors.vue';
     import FluxGridPattern from './FluxGridPattern.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const {
         animatedColors,

package/src/component/FluxPaneMedia.vue

@@ -16,7 +16,7 @@
     lang="ts"
     setup>
     import { computed } from 'vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const {
         imageFocalPoint

package/src/component/FluxPercentageBar.vue

@@ -38,7 +38,7 @@
     import FluxIcon from './FluxIcon.vue';
     import FluxLegend from './FluxLegend.vue';
     import FluxTooltip from './FluxTooltip.vue';
-    import $style from '$flux/css/component/PercentageBar.module.scss';
+    import $style from '~flux/components/css/component/PercentageBar.module.scss';
 
     defineProps<{
         readonly isLegendVisible?: boolean;

package/src/component/FluxPersona.vue

@@ -25,7 +25,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import FluxAvatar from './FluxAvatar.vue';
-    import $style from '$flux/css/component/Avatar.module.scss';
+    import $style from '~flux/components/css/component/Avatar.module.scss';
 
     defineEmits<{
         click: [MouseEvent];

package/src/component/FluxPlaceholder.vue

@@ -34,7 +34,7 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Placeholder.module.scss';
+    import $style from '~flux/components/css/component/Placeholder.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];

package/src/component/FluxPressable.vue

@@ -41,8 +41,8 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import type { VNode } from 'vue';
 
     const emit = defineEmits<{
         click: [MouseEvent];

package/src/component/FluxPrimaryButton.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxPrimaryLinkButton.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxProgressBar.vue

@@ -41,9 +41,9 @@
     lang="ts"
     setup>
     import { computed, unref } from 'vue';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Progress.module.scss';
+    import $style from '~flux/components/css/component/Progress.module.scss';
 
     const {
         isIndeterminate,

package/src/component/FluxPrompt.vue

@@ -31,7 +31,7 @@
     setup>
     import type { FluxPromptObject } from '@flux-ui/types';
     import { computed, onMounted, ref, unref, useTemplateRef } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';

package/src/component/FluxPublishButton.vue

@@ -49,7 +49,7 @@
     import { clsx } from 'clsx';
     import FluxButton from './FluxButton.vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
 

package/src/component/FluxQuantitySelector.vue

@@ -37,10 +37,10 @@
     setup>
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { ref, toRef, unref, useTemplateRef, watchEffect } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { useDisabled } from '~flux/components/composable';
     import FluxButtonGroup from './FluxButtonGroup.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<number>({
         default: 0

package/src/component/FluxRemove.vue

@@ -19,9 +19,9 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Remove.module.scss';
+    import $style from '~flux/components/css/component/Remove.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];

package/src/component/FluxRoot.vue

@@ -15,11 +15,11 @@
     lang="ts"
     setup>
     import { type VNode, watch } from 'vue';
-    import { useFluxStore } from '$flux/data';
+    import { useFluxStore } from '~flux/components/data';
     import FluxOverlayProvider from './FluxOverlayProvider.vue';
     import FluxSnackbarProvider from './FluxSnackbarProvider.vue';
     import FluxTooltipProvider from './FluxTooltipProvider.vue';
-    import $style from '$flux/css/component/Root.module.scss';
+    import $style from '~flux/components/css/component/Root.module.scss';
 
     defineOptions({
         inheritAttrs: false

package/src/component/FluxRow.vue

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

package/src/component/FluxSecondaryButton.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxSecondaryLinkButton.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxSegmentedControl.vue

@@ -53,7 +53,7 @@
     import { clsx } from 'clsx';
     import { onBeforeUnmount, ref, unref, useTemplateRef, watchEffect } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/SegmentedControl.module.scss';
+    import $style from '~flux/components/css/component/SegmentedControl.module.scss';
 
     const modelValue = defineModel<number>({
         default: 0

package/src/component/FluxSeparator.vue

@@ -9,7 +9,7 @@
     lang="ts"
     setup>
     import type { FluxDirection } from '@flux-ui/types';
-    import $style from '$flux/css/component/Divider.module.scss';
+    import $style from '~flux/components/css/component/Divider.module.scss';
 
     const {
         direction = 'horizontal'