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

package/src/data/di.ts

@@ -1,34 +1,76 @@
 import type { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
-import type { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
+import type { DateTime } from 'luxon';
+import type { ComponentInternalInstance, ComputedRef, InjectionKey, Ref, VNode } from 'vue';
 
 export const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection> = Symbol();
+export const FluxCalendarInjectionKey: InjectionKey<FluxCalendarInjection> = Symbol();
 export const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>> = Symbol();
 export const FluxKanbanInjectionKey: InjectionKey<FluxKanbanInjection> = Symbol();
 export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection> = Symbol();
 export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
+export const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection> = Symbol();
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
 export const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection> = Symbol();
 
+export type FluxKanbanDragMode = 'pointer' | 'keyboard';
+
 export type FluxKanbanDragState = {
-    readonly cardId: string | number;
+    readonly mode: FluxKanbanDragMode;
+    readonly itemId: string | number;
     readonly fromColumnId: string | number;
     readonly dropColumnId: string | number | null;
-    readonly beforeCardId: string | number | null;
+    readonly beforeItemId: string | number | null;
+    readonly originBeforeItemId?: string | number | null;
+};
+
+export type FluxKanbanColumnDragState = {
+    readonly columnId: string | number;
+    readonly dropBeforeColumnId: string | number | null;
 };
 
+export type FluxKanbanKeyboardDirection = 'up' | 'down' | 'left' | 'right';
+
 export type FluxKanbanInjection = {
+    readonly disabled: Ref<boolean>;
+    readonly reorderableColumns: Ref<boolean>;
     readonly dragState: Ref<FluxKanbanDragState | null>;
+    readonly columnDragState: Ref<FluxKanbanColumnDragState | null>;
+    readonly grabbedId: Ref<string | number | null>;
+    readonly isOverColumnId: Ref<string | number | null>;
+    readonly isDropAllowed: Ref<boolean>;
+
+    registerItem(element: Element, itemId: string | number): void;
+    unregisterItem(element: Element): void;
+    getItemInfo(element: Element): { readonly itemId: string | number } | undefined;
+    registerColumn(element: Element, columnId: string | number): void;
+    unregisterColumn(element: Element): void;
+    getColumnInfo(element: Element): { readonly columnId: string | number } | undefined;
+    setBoardElement(element: Element | null): void;
+    setColumnBodyElement(columnId: string | number, element: Element | null): void;
+    enterColumn(columnId: string | number): void;
+    leaveColumn(columnId: string | number): void;
 
-    registerCard(element: Element, cardId: string | number): void;
-    unregisterCard(element: Element): void;
-    getCardInfo(element: Element): { readonly cardId: string | number } | undefined;
-    startDrag(cardId: string | number, fromColumnId: string | number): void;
+    startDrag(itemId: string | number, fromColumnId: string | number): void;
     endDrag(): void;
-    updateDropTarget(columnId: string | number, beforeCardId: string | number | null): void;
+    updateDropTarget(columnId: string | number, beforeItemId: string | number | null): void;
     clearDropTarget(): void;
     commitDrop(): void;
+
+    grabItem(itemId: string | number, fromColumnId: string | number): void;
+    moveKeyboard(direction: FluxKanbanKeyboardDirection): void;
+    commitKeyboardDrop(): void;
+    cancelKeyboardDrop(): void;
+    isItemGrabbed(itemId: string | number): boolean;
+
+    startColumnDrag(columnId: string | number): void;
+    endColumnDrag(): void;
+    updateColumnDropTarget(beforeColumnId: string | number | null): void;
+    commitColumnDrop(): void;
+
+    cancelAll(): void;
+    onPointerMove(clientX: number, clientY: number): void;
 };
 
 export type FluxAdaptiveGroupChild = {
@@ -43,6 +85,43 @@ export type FluxAdaptiveGroupInjection = {
     unregister(uid: number): void;
 };
 
+export type FluxCalendarView = 'month' | 'week' | 'two-days' | 'day';
+
+export type FluxCalendarKeyboardDirection = 'up' | 'down' | 'left' | 'right';
+
+export type FluxCalendarItemData = {
+    readonly id: string | number;
+    readonly date: DateTime;
+    readonly duration?: number;
+    readonly allDay: boolean;
+    readonly isClickable: boolean;
+    renderContent(): VNode[];
+    handleClick(evt: MouseEvent): void;
+};
+
+export type FluxCalendarInjection = {
+    readonly isDraggable: ComputedRef<boolean>;
+    readonly resolvedView: ComputedRef<FluxCalendarView>;
+    readonly hourRange: ComputedRef<readonly [number, number]>;
+    readonly pixelsPerMinute: ComputedRef<number>;
+    readonly snapMinutes: ComputedRef<number>;
+    readonly grabbedId: Ref<string | number | null>;
+
+    registerItem(id: string | number, data: FluxCalendarItemData): void;
+    unregisterItem(id: string | number): void;
+
+    registerItemElement(element: Element, id: string | number): void;
+    unregisterItemElement(element: Element): void;
+
+    onItemDragStart(id: string | number, fromDate: DateTime, evt: DragEvent): void;
+    onItemDragEnd(id: string | number): void;
+
+    onItemKeyboardGrab(id: string | number, fromDate: DateTime): void;
+    onItemKeyboardMove(direction: FluxCalendarKeyboardDirection): void;
+    onItemKeyboardCommit(): void;
+    onItemKeyboardCancel(): void;
+};
+
 export type FluxExpandableGroupInjection = {
     closeAll(): void;
     register(uid: number, expandable: ComponentInternalInstance): void;
@@ -69,6 +148,13 @@ export type FluxFormFieldInjection = {
     readonly id?: string;
 };
 
+export type FluxTabBarInjection = {
+    readonly isPills: Ref<boolean>;
+
+    registerItem(element: Element, isActive: Ref<boolean>): void;
+    unregisterItem(element: Element): void;
+};
+
 export type FluxTableInjection = {
     readonly isBordered: boolean;
     readonly isHoverable: boolean;

package/src/data/filter.ts

@@ -1,9 +1,9 @@
 import { formatNumber } from '@basmilius/utils';
-import type { FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterDateRangeSpec, FluxFilterDateSpec, FluxFilterEntryMap, FluxFilterOptionAsyncSpec, FluxFilterOptionEntry, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterOptionSpec, FluxFilterOptionsAsyncSpec, FluxFilterOptionsEntry, FluxFilterOptionsSpec, FluxFilterRangeEntry, FluxFilterRangeSpec, FluxFilterSpecMap, FluxFilterValueSingle } from '@flux-ui/types';
+import type { FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterDateRangeSpec, FluxFilterDateSpec, FluxFilterEntryMap, FluxFilterOptionAsyncSpec, FluxFilterOptionEntry, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterOptionsAsyncSpec, FluxFilterOptionsEntry, FluxFilterOptionSpec, FluxFilterOptionsSpec, FluxFilterRangeEntry, FluxFilterRangeSpec, FluxFilterSpecMap, FluxFilterValueSingle } from '@flux-ui/types';
 import { DateTime } from 'luxon';
-import { useTranslate } from '$flux/composable/private';
-import type { FluxTranslate } from '$flux/data';
-import { createLabelForDateRange } from '$flux/util';
+import { useTranslate } from '~flux/components/composable/private';
+import { createLabelForDateRange } from '~flux/components/util';
+import type { FluxTranslate } from './i18n';
 
 function parseDate(base: FluxFilterDateSpec): FluxFilterDateEntry {
     return {

package/src/data/i18n.ts

@@ -36,10 +36,14 @@ export const english = {
     'flux.today': 'Today',
     'flux.selectMonth': 'Select month',
     'flux.selectYear': 'Select year',
+    'flux.selectDate': 'Select date',
     'flux.previousMonth': 'Previous month',
     'flux.nextMonth': 'Next month',
     'flux.previousYears': 'Previous years',
     'flux.nextYears': 'Next years',
+    'flux.allDay': 'All day',
+    'flux.grabbedAnnounce': 'Item grabbed. Use arrow keys to move, Enter to drop, Escape to cancel.',
+    'flux.releasedAnnounce': 'Item released.',
     'flux.goToPage': 'Go to page {page}',
     'flux.pinDigit': 'Digit {index} of {total}',
     'flux.dropFilesOrClick': 'Drop files here or click to upload',

package/src/data/store.ts

@@ -1,6 +1,5 @@
 import type { FluxAlertObject, FluxConfirmObject, FluxPromptObject, FluxSnackbarObject, FluxTooltipObject } from '@flux-ui/types';
-import type { ComputedRef } from 'vue';
-import { computed, reactive } from 'vue';
+import { computed, reactive, type ComputedRef } from 'vue';
 
 export type FluxState = {
     dialogCount: number;

package/src/transition/FluxBreakthroughTransition.vue

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

package/src/transition/FluxFadeTransition.vue

@@ -15,7 +15,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Transition.module.scss';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'

package/src/transition/FluxOverlayTransition.vue

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

package/src/transition/FluxRouteTransition.vue

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

package/src/transition/FluxSlideOverTransition.vue

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

package/src/transition/FluxTooltipTransition.vue

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

package/src/transition/FluxVerticalWindowTransition.vue

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

package/src/transition/FluxWindowTransition.vue

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

package/src/util/createDialogRenderer.ts

@@ -1,8 +1,7 @@
 import { flattenVNodeTree, useFocusTrap } from '@flux-ui/internals';
-import type { Component, RenderFunction, SetupContext, Slots, VNode } from 'vue';
-import { Comment, h, onUnmounted, ref, Teleport, watch } from 'vue';
-import { registerDialog, useFluxStore } from '$flux/data';
-import $style from '$flux/css/component/Overlay.module.scss';
+import { Comment, h, onUnmounted, ref, Teleport, watch, type Component, type RenderFunction, type SetupContext, type Slots, type VNode } from 'vue';
+import { registerDialog, useFluxStore } from '~flux/components/data';
+import $style from '~flux/components/css/component/Overlay.module.scss';
 
 type Emit = SetupContext<['close']>['emit'];
 type Props = {

package/src/util/createLabelForDateRange.ts

@@ -1,5 +1,5 @@
 import type { DateTime } from 'luxon';
-import { useTranslate } from '$flux/composable/private';
+import { useTranslate } from '~flux/components/composable/private';
 
 export default function (start: DateTime, end: DateTime, preventCustom: boolean = false): string {
     const translate = useTranslate();

package/src/component/FluxCalendarEvent.vue

@@ -1,42 +0,0 @@
-<template>
-    <FluxTooltip>
-        <template #content>
-            <slot name="tooltip">
-                {{ label }}
-            </slot>
-        </template>
-
-        <button
-            :class="$style.calendarEvent"
-            type="button"
-            @click="onClick">
-            <span>{{ label }}</span>
-        </button>
-    </FluxTooltip>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import type { VNode } from 'vue';
-    import type { DateTime } from 'luxon';
-    import FluxTooltip from './FluxTooltip.vue';
-    import $style from '$flux/css/component/Calendar.module.scss';
-
-    const emit = defineEmits<{
-        click: [MouseEvent];
-    }>();
-
-    defineProps<{
-        readonly date: DateTime | [DateTime, DateTime];
-        readonly label: string;
-    }>();
-
-    defineSlots<{
-        tooltip(): VNode[];
-    }>();
-
-    function onClick(evt: MouseEvent): void {
-        emit('click', evt);
-    }
-</script>

package/src/component/FluxKanbanCard.vue

@@ -1,105 +0,0 @@
-<template>
-    <div
-        ref="root"
-        data-kanban-card
-        :class="[
-            $style.kanbanCard,
-            isDragging && $style.isDragging,
-            isDropBefore && $style.isDropBefore
-        ]"
-        draggable="true"
-        @dragstart="onDragStart"
-        @dragend="onDragEnd"
-        @dragover.prevent.stop="onDragOver">
-        <slot/>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import { computed, inject, onMounted, onUnmounted, unref, useTemplateRef } from 'vue';
-    import { FluxKanbanInjectionKey } from '$flux/data/di';
-    import $style from '$flux/css/component/FluxKanbanCard.module.scss';
-
-    const {cardId, columnId} = defineProps<{
-        readonly cardId: string | number;
-        readonly columnId: string | number;
-    }>();
-
-    defineSlots<{
-        default?(): any;
-    }>();
-
-    const kanban = inject(FluxKanbanInjectionKey)!;
-    const root = useTemplateRef('root');
-
-    const isDragging = computed(() => unref(kanban.dragState)?.cardId === cardId);
-
-    const isDropBefore = computed(() => {
-        const state = unref(kanban.dragState);
-
-        if (!state || state.dropColumnId === null || state.beforeCardId === null) {
-            return false;
-        }
-
-        return state.beforeCardId === cardId && state.cardId !== cardId;
-    });
-
-    onMounted(() => {
-        if (root.value) {
-            kanban.registerCard(root.value, cardId);
-        }
-    });
-
-    onUnmounted(() => {
-        if (root.value) {
-            kanban.unregisterCard(root.value);
-        }
-    });
-
-    function onDragStart(evt: DragEvent): void {
-        kanban.startDrag(cardId, columnId);
-
-        if (evt.dataTransfer) {
-            evt.dataTransfer.effectAllowed = 'move';
-        }
-    }
-
-    function onDragEnd(): void {
-        kanban.endDrag();
-    }
-
-    function onDragOver(evt: DragEvent): void {
-        const state = unref(kanban.dragState);
-
-        if (!state) {
-            return;
-        }
-
-        const cardEl = evt.currentTarget as Element;
-        const rect = cardEl.getBoundingClientRect();
-
-        if (evt.clientY < rect.top + rect.height / 2) {
-            // Drop before this card
-            kanban.updateDropTarget(columnId, cardId);
-        } else {
-            // Drop after this card = before the next sibling card
-            let next = cardEl.nextElementSibling;
-
-            while (next) {
-                const info = kanban.getCardInfo(next);
-
-                if (info) {
-                    kanban.updateDropTarget(columnId, info.cardId);
-                    return;
-                }
-
-                next = next.nextElementSibling;
-            }
-
-            // No next sibling → append to end of column
-            kanban.updateDropTarget(columnId, null);
-        }
-    }
-</script>

package/src/css/component/FluxKanban.module.scss

@@ -1,7 +0,0 @@
-.kanban {
-    display: flex;
-    flex-flow: row;
-    gap: 15px;
-    overflow-x: auto;
-    padding-bottom: 6px;
-}

package/src/css/component/FluxKanbanCard.module.scss

@@ -1,35 +0,0 @@
-.kanbanCard {
-    position: relative;
-    padding: 12px;
-    background: var(--gray-25);
-    border: 1px solid var(--gray-200);
-    border-radius: var(--radius);
-    cursor: grab;
-    transition: opacity 180ms var(--swift-out), box-shadow 180ms var(--swift-out);
-    user-select: none;
-
-    &:active {
-        cursor: grabbing;
-    }
-
-    &:hover {
-        box-shadow: 0 1px 4px rgb(0 0 0 / .08);
-    }
-}
-
-.isDragging {
-    opacity: .4;
-    cursor: grabbing;
-}
-
-.isDropBefore {
-    &::before {
-        content: '';
-        position: absolute;
-        inset-inline: 0;
-        top: -6px;
-        height: 2px;
-        border-radius: 999px;
-        background: var(--primary-500);
-    }
-}

package/src/css/component/FluxKanbanColumn.module.scss

@@ -1,49 +0,0 @@
-.kanbanColumn {
-    display: flex;
-    flex-flow: column;
-    flex-shrink: 0;
-    width: 280px;
-    background: var(--gray-100);
-    border: 1px solid var(--gray-200);
-    border-radius: var(--radius);
-    overflow: hidden;
-}
-
-.kanbanColumnHeader {
-    display: flex;
-    align-items: center;
-    gap: 9px;
-    padding: 12px 15px;
-    border-bottom: 1px solid var(--gray-200);
-}
-
-.kanbanColumnLabel {
-    flex: 1;
-    font-size: .8125rem;
-    font-weight: 600;
-    color: var(--foreground);
-    letter-spacing: .01em;
-    text-transform: uppercase;
-}
-
-.kanbanColumnBody {
-    display: flex;
-    flex-flow: column;
-    gap: 9px;
-    padding: 9px;
-    min-height: 60px;
-    flex: 1;
-    overflow-y: auto;
-    transition: background 180ms var(--swift-out);
-}
-
-.isOver .kanbanColumnBody {
-    background: rgb(from var(--primary-500) r g b / .06);
-}
-
-.kanbanDropIndicator {
-    height: 2px;
-    border-radius: 999px;
-    background: var(--primary-500);
-    flex-shrink: 0;
-}