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

package/src/component/FluxTableActions.vue

@@ -9,7 +9,7 @@
     setup>
     import type { VNode } from 'vue';
     import FluxActionStack from './FluxActionStack.vue';
-    import $style from '$flux/css/component/Table.module.scss';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxTableBar.vue

@@ -20,10 +20,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
-    import { useTableInjection } from '$flux/composable';
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Table.module.scss';
+    import type { VNode } from 'vue';
+    import { useTableInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxTableCell.vue

@@ -24,10 +24,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import { clsx } from 'clsx';
-    import { useTableInjection } from '$flux/composable';
-    import $style from '$flux/css/component/Table.module.scss';
+    import type { VNode } from 'vue';
+    import { useTableInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     const {
         contentDirection = 'row'

package/src/component/FluxTableHeader.vue

@@ -66,15 +66,15 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, type VNode } from 'vue';
-    import { useTableInjection } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTableInjection } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxMenu from './FluxMenu.vue';
     import FluxMenuGroup from './FluxMenuGroup.vue';
     import FluxMenuItem from './FluxMenuItem.vue';
     import FluxSeparator from './FluxSeparator.vue';
-    import $style from '$flux/css/component/Table.module.scss';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     defineEmits<{
         sort: ['ascending' | 'descending' | null];

package/src/component/FluxTableRow.vue

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

package/src/component/FluxTabs.vue

@@ -3,7 +3,9 @@
         <slot
             v-bind="{children, modelValue, tabs, activate}"
             name="tabs">
-            <FluxTabBar :class="$style.tabsBar">
+            <FluxTabBar
+                :class="$style.tabsBar"
+                :is-pills="isPills">
                 <template
                     v-for="(tab, index) of tabs"
                     :key="index">
@@ -36,16 +38,20 @@
     import { flattenVNodeTree, getComponentProps } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
     import { cloneVNode, computed, ref, unref, useId, type VNode, watch } from 'vue';
-    import { FluxWindowTransition } from '$flux/transition';
-    import { VNodeRenderer } from './primitive';
+    import { FluxWindowTransition } from '~flux/components/transition';
     import FluxTabBar from './FluxTabBar.vue';
     import FluxTabBarItem from './FluxTabBarItem.vue';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import { VNodeRenderer } from './primitive';
+    import $style from '~flux/components/css/component/Tab.module.scss';
 
     const modelValue = defineModel<number>({
         default: 0
     });
 
+    defineProps<{
+        readonly isPills?: boolean;
+    }>();
+
     const slots = defineSlots<{
         default(): VNode[];
 

package/src/component/FluxTag.vue

@@ -53,11 +53,11 @@
     setup>
     import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } 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 FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Badge.module.scss';
+    import $style from '~flux/components/css/component/Badge.module.scss';
 
     const emit = defineEmits<FluxButtonEmits & {
         delete: [];

package/src/component/FluxTicks.vue

@@ -29,7 +29,7 @@
     setup>
     import { generateStepTicks } from '@basmilius/utils';
     import { computed } from 'vue';
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     const {
         lower,

package/src/component/FluxTimeline.vue

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

package/src/component/FluxTimelineItem.vue

@@ -52,11 +52,11 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Timeline.module.scss';
+    import $style from '~flux/components/css/component/Timeline.module.scss';
 
     const {
         color = 'gray'

package/src/component/FluxToggle.vue

@@ -43,9 +43,9 @@
     import type { FluxFormInputBaseProps, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { toRef } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
     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 modelValue = defineModel<boolean>({
         default: false

package/src/component/FluxToolbar.vue

@@ -18,10 +18,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
     import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Toolbar.module.scss';
+    import $style from '~flux/components/css/component/Toolbar.module.scss';
 
     defineProps<{
         readonly floatingMode?: 'free' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';

package/src/component/FluxTooltip.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { defineComponent, getCurrentInstance, onMounted, onUnmounted, type PropType, ref, type SlotsType, type VNode } from 'vue';
-    import { addTooltip, removeTooltip } from '$flux/data';
+    import { addTooltip, removeTooltip } from '~flux/components/data';
 
     export default defineComponent({
         props: {

package/src/component/FluxTooltipProvider.vue

@@ -2,9 +2,9 @@
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { computed, defineComponent, h, provide, ref, unref, watch } from 'vue';
-    import { FluxTooltipInjectionKey, useFluxStore } from '$flux/data';
-    import { FluxTooltipTransition } from '$flux/transition';
-    import $style from '$flux/css/component/Tooltip.module.scss';
+    import { FluxTooltipInjectionKey, useFluxStore } from '~flux/components/data';
+    import { FluxTooltipTransition } from '~flux/components/transition';
+    import $style from '~flux/components/css/component/Tooltip.module.scss';
 
     type Transition = 'above' | 'below' | 'end' | 'start';
 

package/src/component/FluxTreeView.vue

@@ -35,10 +35,9 @@
     import type { FluxColor, FluxTreeViewOption } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, ref, unref, useTemplateRef } from 'vue';
-    import type { TreeFlatNode } from '$flux/composable/private';
-    import { flattenVisible, useTreeView } from '$flux/composable/private';
-    import TreeNodeRenderer from '$flux/component/primitive/TreeNodeRenderer.vue';
-    import $style from '$flux/css/component/TreeView.module.scss';
+    import { flattenVisible, type TreeFlatNode, useTreeView } from '~flux/components/composable/private';
+    import { TreeNodeRenderer } from './primitive';
+    import $style from '~flux/components/css/component/TreeView.module.scss';
 
     type FlatNode = TreeFlatNode<FluxTreeViewOption>;
 

package/src/component/FluxWindow.vue

@@ -13,7 +13,7 @@
     lang="ts"
     setup>
     import { ref, type VNode } from 'vue';
-    import { FluxWindowTransition } from '$flux/transition';
+    import { FluxWindowTransition } from '~flux/components/transition';
 
     const slots = defineSlots<{
         default(props: {

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>