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

package/src/component/calendar/FluxCalendarItemDisplay.vue

@@ -0,0 +1,117 @@
+<script
+    lang="ts"
+    setup>
+    import { useKeyboardGrab } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { computed, defineComponent, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue';
+    import { useCalendarInjection } from '~flux/components/composable';
+    import type { FluxCalendarItemData } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Calendar.module.scss';
+
+    const {data} = defineProps<{
+        readonly data: FluxCalendarItemData;
+    }>();
+
+    const dragContext = useCalendarInjection();
+    const root = ref<HTMLButtonElement | null>(null);
+
+    const canDrag = computed(() => dragContext?.isDraggable.value === true);
+
+    const RenderItemContent = defineComponent({
+        props: {
+            render: {
+                type: Function,
+                required: true
+            }
+        },
+        setup: (props) => () => (props.render as () => unknown)()
+    });
+
+    const {
+        isGrabbed,
+        handleKeyDown,
+        release: releaseKeyboardGrab
+    } = useKeyboardGrab({
+        isDraggable: canDrag,
+        itemId: toRef(() => data.id),
+        grabbedId: dragContext?.grabbedId ?? ref<string | number | null>(null),
+        onGrab() {
+            dragContext?.onItemKeyboardGrab(data.id, data.date);
+            return data.date;
+        },
+        onMove(direction) {
+            dragContext?.onItemKeyboardMove(direction);
+        },
+        onCommit() {
+            dragContext?.onItemKeyboardCommit();
+        },
+        onCancel() {
+            dragContext?.onItemKeyboardCancel();
+        }
+    });
+
+    const itemClasses = computed(() => clsx(
+        $style.calendarItem,
+        data.isClickable && $style.isClickable,
+        canDrag.value && $style.isDraggable,
+        isGrabbed.value && $style.isGrabbed,
+        data.allDay && $style.isAllDay
+    ));
+
+    function onClick(evt: MouseEvent): void {
+        data.handleClick(evt);
+    }
+
+    function onDragStart(evt: DragEvent): void {
+        if (!canDrag.value || !dragContext) {
+            return;
+        }
+
+        if (isGrabbed.value) {
+            dragContext.onItemKeyboardCancel();
+            releaseKeyboardGrab();
+        }
+
+        dragContext.onItemDragStart(data.id, data.date, evt);
+    }
+
+    function onDragEnd(): void {
+        dragContext?.onItemDragEnd(data.id);
+    }
+
+    onMounted(() => {
+        if (root.value) {
+            dragContext?.registerItemElement(root.value, data.id);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (root.value) {
+            dragContext?.unregisterItemElement(root.value);
+        }
+    });
+
+    watch(() => data.id, (_newId, _oldId) => {
+        if (!root.value) {
+            return;
+        }
+
+        dragContext?.unregisterItemElement(root.value);
+        dragContext?.registerItemElement(root.value, data.id);
+    });
+</script>
+
+<template>
+    <button
+        ref="root"
+        :class="itemClasses"
+        :draggable="canDrag"
+        :tabindex="canDrag ? 0 : undefined"
+        type="button"
+        @click="onClick"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+        @keydown="handleKeyDown">
+        <RenderItemContent :render="data.renderContent"/>
+    </button>
+</template>

package/src/component/calendar/FluxCalendarMonthView.vue

@@ -0,0 +1,134 @@
+<template>
+    <FluxWindowTransition :is-back="isTransitioningToPast">
+        <div
+            :key="viewDate.month"
+            :class="$style.calendarCells"
+            role="grid">
+            <template v-for="day of days">
+                <div :class="$style.calendarDay">
+                    {{ day }}
+                </div>
+            </template>
+
+            <template v-for="date of dates">
+                <div
+                    :class="clsx(
+                        $style.calendarEntry,
+                        viewDate.month !== date.month && $style.isDisabled,
+                        isToday(date) && $style.isToday,
+                        focusedDate && date.toSQLDate() === focusedDate.toSQLDate() && $style.isFocused,
+                        draggable && dropTargetDate === date.toSQLDate() && $style.isDropTarget
+                    )"
+                    role="gridcell"
+                    @dragover="draggable ? onCellDragOver(date, $event) : undefined"
+                    @dragleave="draggable ? onCellDragLeave(date) : undefined"
+                    @drop="draggable ? onCellDrop(date, $event) : undefined">
+                    <div :class="$style.calendarEvents">
+                        <FluxCalendarItemDisplay
+                            v-for="item of getItemsForDate(date)"
+                            :key="item.id"
+                            :data="item"/>
+                    </div>
+
+                    <span :class="$style.calendarEntryDate">
+                        {{ date.toLocaleString({day: 'numeric'}) }}
+                    </span>
+                </div>
+            </template>
+        </div>
+    </FluxWindowTransition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { DateTime } from 'luxon';
+    import { computed, ref, unref } from 'vue';
+    import type { FluxCalendarItemData } from '~flux/components/data';
+    import { FluxWindowTransition } from '~flux/components/transition';
+    import FluxCalendarItemDisplay from './FluxCalendarItemDisplay.vue';
+    import $style from '~flux/components/css/component/Calendar.module.scss';
+
+    const emit = defineEmits<{
+        cellDrop: [DateTime];
+    }>();
+
+    const {
+        dates,
+        days,
+        viewDate,
+        draggable,
+        items,
+        hasActiveDrag,
+        focusedDate
+    } = defineProps<{
+        readonly dates: DateTime[];
+        readonly days: string[];
+        readonly viewDate: DateTime;
+        readonly isTransitioningToPast: boolean;
+        readonly draggable: boolean;
+        readonly items: FluxCalendarItemData[];
+        readonly hasActiveDrag: boolean;
+        readonly focusedDate?: DateTime | null;
+    }>();
+
+    const dropTargetDate = ref<string | null>(null);
+
+    function isToday(date: DateTime): boolean {
+        return date.hasSame(DateTime.now(), 'day');
+    }
+
+    const itemsByDate = computed(() => {
+        const map = new Map<string, FluxCalendarItemData[]>();
+
+        items.forEach(item => {
+            const dateKey = item.date.toSQLDate();
+
+            if (!dateKey) {
+                return;
+            }
+
+            const list = map.get(dateKey);
+
+            if (list) {
+                list.push(item);
+            } else {
+                map.set(dateKey, [item]);
+            }
+        });
+
+        return map;
+    });
+
+    function getItemsForDate(forDate: DateTime): FluxCalendarItemData[] {
+        const key = forDate.toSQLDate();
+        return key ? unref(itemsByDate).get(key) ?? [] : [];
+    }
+
+    function onCellDragOver(date: DateTime, evt: DragEvent): void {
+        if (!hasActiveDrag) {
+            return;
+        }
+
+        evt.preventDefault();
+
+        if (evt.dataTransfer) {
+            evt.dataTransfer.dropEffect = 'move';
+        }
+
+        dropTargetDate.value = date.toSQLDate();
+    }
+
+    function onCellDragLeave(date: DateTime): void {
+        if (unref(dropTargetDate) === date.toSQLDate()) {
+            dropTargetDate.value = null;
+        }
+    }
+
+    function onCellDrop(date: DateTime, evt: DragEvent): void {
+        evt.preventDefault();
+        emit('cellDrop', date.startOf('day'));
+        dropTargetDate.value = null;
+    }
+</script>