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

package/src/data/di.ts

@@ -1,13 +1,16 @@
 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();
 
@@ -15,11 +18,11 @@ export type FluxKanbanDragMode = 'pointer' | 'keyboard';
 
 export type FluxKanbanDragState = {
     readonly mode: FluxKanbanDragMode;
-    readonly cardId: string | number;
+    readonly itemId: string | number;
     readonly fromColumnId: string | number;
     readonly dropColumnId: string | number | null;
-    readonly beforeCardId: string | number | null;
-    readonly originBeforeCardId?: string | number | null;
+    readonly beforeItemId: string | number | null;
+    readonly originBeforeItemId?: string | number | null;
 };
 
 export type FluxKanbanColumnDragState = {
@@ -34,33 +37,39 @@ export type FluxKanbanInjection = {
     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>;
 
-    registerCard(element: Element, cardId: string | number): void;
-    unregisterCard(element: Element): void;
-    getCardInfo(element: Element): { readonly cardId: string | number } | undefined;
+    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;
 
-    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;
 
-    grabCard(cardId: string | number, fromColumnId: string | number): void;
+    grabItem(itemId: string | number, fromColumnId: string | number): void;
     moveKeyboard(direction: FluxKanbanKeyboardDirection): void;
     commitKeyboardDrop(): void;
     cancelKeyboardDrop(): void;
-    isCardGrabbed(cardId: string | number): boolean;
+    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;
 };
 
@@ -76,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;
@@ -102,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, 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,199 +0,0 @@
-<template>
-    <div
-        ref="root"
-        data-kanban-card
-        role="listitem"
-        aria-roledescription="Kanban card"
-        :aria-disabled="disabledState ? true : undefined"
-        :aria-grabbed="isGrabbed ? true : undefined"
-        :class="[
-            $style.kanbanCard,
-            isDragging && $style.isDragging,
-            isGrabbed && $style.isGrabbed,
-            isDropBefore && $style.isDropBefore,
-            isDropBefore && !kanban.isDropAllowed.value && $style.isDropBeforeDisallowed,
-            disabledState && $style.isDisabled
-        ]"
-        :draggable="!disabledState"
-        :tabindex="disabledState ? -1 : 0"
-        @dragstart="onDragStart"
-        @dragend="onDragEnd"
-        @dragover.stop="onDragOver"
-        @focus="onFocus"
-        @keydown="onKeyDown">
-        <slot/>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import { computed, inject, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { FluxKanbanInjectionKey } from '$flux/data/di';
-    import useDisabled from '$flux/composable/useDisabled';
-    import $style from '$flux/css/component/FluxKanban.module.scss';
-
-    const {
-        cardId,
-        columnId,
-        disabled = false
-    } = defineProps<{
-        readonly cardId: string | number;
-        readonly columnId: string | number;
-        readonly disabled?: boolean;
-    }>();
-
-    defineSlots<{
-        default?(): any;
-    }>();
-
-    const kanban = inject(FluxKanbanInjectionKey)!;
-    const root = useTemplateRef('root');
-    const disabledState = useDisabled(toRef(() => disabled));
-
-    const isDragging = computed(() => unref(kanban.dragState)?.cardId === cardId && unref(kanban.dragState)?.mode === 'pointer');
-    const isGrabbed = computed(() => kanban.isCardGrabbed(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);
-        }
-
-        if (kanban.isCardGrabbed(cardId)) {
-            root.value?.focus();
-        }
-    });
-
-    onBeforeUnmount(() => {
-        if (root.value) {
-            kanban.unregisterCard(root.value);
-        }
-    });
-
-    watch(() => cardId, (newId, oldId) => {
-        if (root.value && oldId !== undefined) {
-            kanban.unregisterCard(root.value);
-            kanban.registerCard(root.value, newId);
-        }
-    });
-
-    function onDragStart(evt: DragEvent): void {
-        if (unref(disabledState)) {
-            evt.preventDefault();
-            return;
-        }
-
-        kanban.startDrag(cardId, columnId);
-
-        if (evt.dataTransfer) {
-            evt.dataTransfer.effectAllowed = 'move';
-            evt.dataTransfer.setData('text/plain', `card:${String(cardId)}`);
-
-            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 cardEl = evt.currentTarget as Element;
-        const rect = cardEl.getBoundingClientRect();
-
-        if (evt.clientY < rect.top + rect.height / 2) {
-            kanban.updateDropTarget(columnId, cardId);
-        } else {
-            let next = cardEl.nextElementSibling;
-
-            while (next) {
-                const info = kanban.getCardInfo(next);
-
-                if (info) {
-                    kanban.updateDropTarget(columnId, info.cardId);
-                    return;
-                }
-
-                next = next.nextElementSibling;
-            }
-
-            kanban.updateDropTarget(columnId, null);
-        }
-    }
-
-    function onKeyDown(evt: KeyboardEvent): void {
-        if (unref(disabledState)) {
-            return;
-        }
-
-        const state = unref(kanban.dragState);
-        const grabbed = state !== null && state.mode === 'keyboard' && state.cardId === cardId;
-
-        if (!grabbed) {
-            if (evt.key === ' ' || evt.key === 'Enter') {
-                evt.preventDefault();
-                kanban.grabCard(cardId, columnId);
-            }
-            return;
-        }
-
-        switch (evt.key) {
-            case 'ArrowUp':
-                evt.preventDefault();
-                kanban.moveKeyboard('up');
-                break;
-
-            case 'ArrowDown':
-                evt.preventDefault();
-                kanban.moveKeyboard('down');
-                break;
-
-            case 'ArrowLeft':
-                evt.preventDefault();
-                kanban.moveKeyboard('left');
-                break;
-
-            case 'ArrowRight':
-                evt.preventDefault();
-                kanban.moveKeyboard('right');
-                break;
-
-            case ' ':
-            case 'Enter':
-                evt.preventDefault();
-                kanban.commitKeyboardDrop();
-                break;
-
-            case 'Escape':
-                evt.preventDefault();
-                kanban.cancelKeyboardDrop();
-                break;
-        }
-    }
-</script>