@flux-ui/components 3.0.0-next.57 → 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

@@ -1,25 +1,96 @@
 <template>
-    <div :class="$style.kanban">
+    <div
+        ref="root"
+        role="application"
+        aria-roledescription="Kanban board"
+        :aria-label="ariaLabel"
+        :class="[$style.kanban, isDragging && $style.isBoardDragging]">
         <slot/>
+
+        <div
+            aria-live="polite"
+            aria-atomic="true"
+            :class="$style.kanbanLiveRegion">
+            {{ liveMessage }}
+        </div>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
-    import type { FluxKanbanMoveEvent } from '@flux-ui/types';
-    import { provide } from 'vue';
-    import { FluxKanbanInjectionKey } from '$flux/data/di';
-    import { useKanban } from '$flux/composable/private/useKanban';
-    import $style from '$flux/css/component/FluxKanban.module.scss';
+    import type { FluxKanbanMoveColumnEvent, FluxKanbanMoveEvent } from '@flux-ui/types';
+    import { computed, onBeforeUnmount, onMounted, provide, ref, toRef, useTemplateRef, watch } from 'vue';
+    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,
+        canMove,
+        disabled = false,
+        reorderableColumns = false
+    } = defineProps<{
+        readonly ariaLabel?: string;
+        readonly canMove?: (event: FluxKanbanMoveEvent) => boolean;
+        readonly disabled?: boolean;
+        readonly reorderableColumns?: boolean;
+    }>();
 
     const emit = defineEmits<{
         move: [FluxKanbanMoveEvent];
+        moveColumn: [FluxKanbanMoveColumnEvent];
     }>();
 
     defineSlots<{
         default?(): any;
     }>();
 
-    provide(FluxKanbanInjectionKey, useKanban(event => emit('move', event)));
+    const root = useTemplateRef('root');
+    const liveMessage = ref('');
+
+    const disabledRef = toRef(() => disabled);
+    const reorderableColumnsRef = toRef(() => reorderableColumns);
+    const canMoveRef = toRef(() => canMove);
+
+    const kanban = useKanban({
+        disabled: disabledRef,
+        reorderableColumns: reorderableColumnsRef,
+        canMove: canMoveRef,
+        onMove: event => emit('move', event),
+        onMoveColumn: event => emit('moveColumn', event),
+        onAnnounce: message => {
+            liveMessage.value = '';
+            requestAnimationFrame(() => {
+                liveMessage.value = message;
+            });
+        }
+    });
+
+    const isDragging = computed(() => kanban.dragState.value !== null || kanban.columnDragState.value !== null);
+
+    function onPointerMove(evt: DragEvent | PointerEvent): void {
+        kanban.onPointerMove(evt.clientX, evt.clientY);
+    }
+
+    onMounted(() => {
+        kanban.setBoardElement(root.value);
+        window.addEventListener('drag', onPointerMove);
+        window.addEventListener('dragend', kanban.cancelAll);
+    });
+
+    onBeforeUnmount(() => {
+        kanban.setBoardElement(null);
+        window.removeEventListener('drag', onPointerMove);
+        window.removeEventListener('dragend', kanban.cancelAll);
+    });
+
+    watch(() => disabled, value => {
+        if (value) {
+            kanban.cancelAll();
+        }
+    });
+
+    provide(FluxKanbanInjectionKey, kanban);
+    provide(FluxDisabledInjectionKey, disabledRef);
 </script>