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

package/src/composable/private/useKanbanAutoScroll.ts

@@ -0,0 +1,95 @@
+const AUTOSCROLL_ZONE = 40;
+const AUTOSCROLL_MAX_SPEED = 12;
+
+export type UseKanbanAutoScrollOptions = {
+    getBoardElement(): Element | null;
+    getVerticalTarget(): Element | null;
+};
+
+export type UseKanbanAutoScrollReturn = {
+    onPointerMove(clientX: number, clientY: number): void;
+    stop(): void;
+};
+
+/**
+ * Drives horizontal (board) and vertical (column body) auto-scroll while a drag
+ * is in progress. Reads the active scroll containers via the option callbacks.
+ */
+export function useKanbanAutoScroll(options: UseKanbanAutoScrollOptions): UseKanbanAutoScrollReturn {
+    let frame: number | null = null;
+    let deltaX = 0;
+    let deltaY = 0;
+    let verticalTarget: Element | null = null;
+
+    function onPointerMove(clientX: number, clientY: number): void {
+        const board = options.getBoardElement();
+        const target = options.getVerticalTarget();
+
+        deltaX = board ? computeScrollDelta(board.getBoundingClientRect(), clientX, 'horizontal') : 0;
+        deltaY = target ? computeScrollDelta(target.getBoundingClientRect(), clientY, 'vertical') : 0;
+        verticalTarget = target;
+
+        if (deltaX !== 0 || deltaY !== 0) {
+            start();
+        } else {
+            stop();
+        }
+    }
+
+    function start(): void {
+        if (frame !== null) {
+            return;
+        }
+
+        const tick = (): void => {
+            const board = options.getBoardElement();
+
+            if (deltaX !== 0 && board) {
+                board.scrollLeft += deltaX;
+            }
+
+            if (deltaY !== 0 && verticalTarget) {
+                verticalTarget.scrollTop += deltaY;
+            }
+
+            if (deltaX === 0 && deltaY === 0) {
+                frame = null;
+                return;
+            }
+
+            frame = requestAnimationFrame(tick);
+        };
+
+        frame = requestAnimationFrame(tick);
+    }
+
+    function stop(): void {
+        if (frame !== null) {
+            cancelAnimationFrame(frame);
+            frame = null;
+        }
+
+        deltaX = 0;
+        deltaY = 0;
+        verticalTarget = null;
+    }
+
+    return {onPointerMove, stop};
+}
+
+function computeScrollDelta(rect: DOMRect, position: number, axis: 'horizontal' | 'vertical'): number {
+    const start = axis === 'horizontal' ? rect.left : rect.top;
+    const end = axis === 'horizontal' ? rect.right : rect.bottom;
+
+    if (position < start + AUTOSCROLL_ZONE) {
+        const distance = Math.max(0, position - start);
+        return -Math.round(((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE) * AUTOSCROLL_MAX_SPEED);
+    }
+
+    if (position > end - AUTOSCROLL_ZONE) {
+        const distance = Math.max(0, end - position);
+        return Math.round(((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE) * AUTOSCROLL_MAX_SPEED);
+    }
+
+    return 0;
+}

package/src/composable/private/useTranslate.ts

@@ -1,6 +1,5 @@
 import { getCurrentInstance } from 'vue';
-import type { FluxTranslate, FluxTranslation } from '$flux/data';
-import { english } from '$flux/data';
+import { english, type FluxTranslate, type FluxTranslation } from '~flux/components/data';
 
 const fallback: FluxTranslate = (key, params) => {
     if (!(key in english)) {

package/src/composable/private/useTreeView.ts

@@ -1,5 +1,5 @@
 import type { FluxColor, FluxIconName } from '@flux-ui/types';
-import { type ComputedRef, nextTick, ref, type Ref, unref, watch } from 'vue';
+import { nextTick, ref, unref, watch, type ComputedRef, type Ref } from 'vue';
 
 export type TreeBaseOption = {
     readonly id: string | number;

package/src/composable/useAdaptiveGroupInjection.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { FluxAdaptiveGroupInjectionKey } from '$flux/data';
+import { FluxAdaptiveGroupInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxAdaptiveGroupInjectionKey, null);

package/src/composable/useBreakpoints.ts

@@ -1,5 +1,4 @@
-import type { Ref } from 'vue';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, type Ref } from 'vue';
 
 const BREAKPOINTS = {
     xs: 0,

package/src/composable/useCalendarInjection.ts

@@ -0,0 +1,6 @@
+import { inject } from 'vue';
+import { FluxCalendarInjectionKey, type FluxCalendarInjection } from '~flux/components/data';
+
+export default function (): FluxCalendarInjection | null {
+    return inject(FluxCalendarInjectionKey, null);
+}

package/src/composable/useDisabled.ts

@@ -1,5 +1,4 @@
-import type { Ref } from 'vue';
-import { computed, unref } from 'vue';
+import { computed, unref, type Ref } from 'vue';
 import useDisabledInjection from './useDisabledInjection';
 
 export default function (componentDisabled: Ref<boolean>) {

package/src/composable/useDisabledInjection.ts

@@ -1,5 +1,5 @@
 import { inject, ref } from 'vue';
-import { FluxDisabledInjectionKey } from '$flux/data';
+import { FluxDisabledInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxDisabledInjectionKey, ref(false));

package/src/composable/useExpandableGroupInjection.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { FluxExpandableGroupInjectionKey } from '$flux/data';
+import { FluxExpandableGroupInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxExpandableGroupInjectionKey, {

package/src/composable/useFilterInjection.ts

@@ -1,5 +1,5 @@
 import { inject, ref } from 'vue';
-import { FluxFilterInjectionKey } from '$flux/data';
+import { FluxFilterInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxFilterInjectionKey, {

package/src/composable/useFlyoutInjection.ts

@@ -1,5 +1,5 @@
 import { inject, ref } from 'vue';
-import { FluxFlyoutInjectionKey } from '$flux/data';
+import { FluxFlyoutInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxFlyoutInjectionKey, {

package/src/composable/useFormFieldInjection.ts

@@ -1,5 +1,5 @@
 import { inject, useId } from 'vue';
-import { FluxFormFieldInjectionKey } from '$flux/data';
+import { FluxFormFieldInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxFormFieldInjectionKey, {

package/src/composable/useKanbanInjection.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+import { FluxKanbanInjectionKey, type FluxKanbanInjection } from '~flux/components/data';
+
+export default function (): FluxKanbanInjection {
+    const injection = inject(FluxKanbanInjectionKey);
+
+    if (!injection) {
+        throw new Error('useFluxKanbanInjection must be used inside a FluxKanban.');
+    }
+
+    return injection;
+}

package/src/composable/useTabBarInjection.ts

@@ -0,0 +1,10 @@
+import { inject, ref } from 'vue';
+import { FluxTabBarInjectionKey } from '~flux/components/data';
+
+export default function () {
+    return inject(FluxTabBarInjectionKey, {
+        isPills: ref(false),
+        registerItem: () => undefined,
+        unregisterItem: () => undefined
+    });
+}

package/src/composable/useTableInjection.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { FluxTableInjectionKey } from '$flux/data';
+import { FluxTableInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxTableInjectionKey, {

package/src/composable/useTooltipInjection.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { FluxTooltipInjectionKey } from '$flux/data';
+import { FluxTooltipInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxTooltipInjectionKey, {

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .action {
     composes: button from './base/Button.module.scss';

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

@@ -1,25 +1,23 @@
 .adaptiveGroup {
     display: flex;
-    overflow: hidden;
+    min-width: 0;
     flex-flow: row nowrap;
     gap: var(--gap, 9px);
-    min-width: 0;
 }
 
 .adaptiveSlot {
     display: flex;
-    overflow: hidden;
-    flex-flow: row nowrap;
     min-width: 0;
+    flex-flow: row nowrap;
 }
 
 .adaptiveSlotMeasurer {
     position: absolute;
+    display: flex;
     top: 0;
     left: 0;
-    display: flex;
-    visibility: hidden;
-    flex-flow: row nowrap;
     width: max-content;
+    flex-flow: row nowrap;
     pointer-events: none;
+    visibility: hidden;
 }

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .avatar {
     position: relative;

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .badge {
     display: inline-flex;

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .primaryButton {
     composes: button from './base/Button.module.scss';

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

@@ -1,14 +1,19 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .calendar {
     composes: basePaneStructure from './base/Pane.module.scss';
 
     display: flex;
     flex-flow: column;
+    flex-grow: 1;
     box-shadow: var(--shadow-sm);
     contain: paint;
 }
 
+.calendarItemRegistry {
+    display: none;
+}
+
 .calendarActions {
     align-items: center;
 }
@@ -50,17 +55,55 @@
     color: var(--foreground);
 }
 
+.calendarRangeLabel {
+    composes: calendarCurrentValue;
+
+    color: var(--foreground-prominent);
+    font-weight: 700;
+}
+
+.calendarItem {
+    display: block;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    cursor: default;
+    text-align: left;
+
+    @include mixin.focus-ring;
+
+    &.isClickable {
+        cursor: pointer;
+    }
+
+    &.isDraggable {
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
+    }
+
+    &.isGrabbed {
+        outline: 2px solid var(--primary-500);
+        outline-offset: 2px;
+    }
+}
+
+/* region Month view */
+
 .calendarCells {
     display: grid;
     flex-grow: 1;
     gap: 1px;
-    grid-template-columns: repeat(7, 1fr);
-    grid-template-rows: min-content repeat(6, auto);
+    grid-template-columns: repeat(7, minmax(180px, 1fr));
+    grid-auto-rows: auto;
+    overflow-x: auto;
     background: var(--gray-100);
 }
 
 .calendarCell {
-    padding: 12px 18px;
+    padding: 9px;
     background: var(--gray-25);
 }
 
@@ -81,13 +124,17 @@
     composes: calendarCell;
 
     position: relative;
-    min-height: 105px;
-    padding-bottom: 39px;
+    min-height: 90px;
+    padding-top: 33px;
+    outline: 2px dashed transparent;
+    outline-offset: 2px;
+    transition: 210ms var(--swift-out);
+    transition-property: background, outline-color, z-index;
+    z-index: 0;
 
     &.isDisabled {
         background: var(--gray-50);
         color: var(--foreground-secondary);
-        pointer-events: none;
 
         .calendarEntryDate {
             opacity: .25;
@@ -98,70 +145,253 @@
             pointer-events: none;
         }
     }
+
+    &.isFocused,
+    &.isDropTarget {
+        z-index: 1;
+    }
+
+    &.isFocused {
+        box-shadow: inset 0 0 0 2px var(--primary-200);
+    }
+
+    &.isDropTarget {
+        background: var(--primary-50);
+        outline-color: var(--primary-600);
+    }
+
+    &.isToday .calendarEntryDate {
+        color: var(--primary-600);
+    }
 }
 
 .calendarEntryDate {
     position: absolute;
-    right: 18px;
-    bottom: 15px;
+    top: 12px;
+    left: 12px;
     color: var(--foreground);
-    font-size: 15px;
+    font-size: 12px;
     font-weight: 700;
     line-height: 1em;
 }
 
 .calendarEvents {
     display: grid;
-    grid-auto-rows: 1fr;
+    grid-auto-rows: auto;
     gap: 3px;
 }
 
-.calendarEvent {
-    margin-left: -9px;
-    margin-right: -9px;
-    padding: 6px 9px;
-    background: var(--primary-100);
-    border: 0;
-    color: var(--primary-800);
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1.3em;
-    text-align: left;
+/* endregion */
+
+/* region Time-grid view */
+
+.timeGrid {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    overflow: hidden;
+    background: var(--gray-25);
+}
 
-    /** note: This works in all browsers. */
-    display: -webkit-box;
+.timeGridInner {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
     overflow: hidden;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+}
+
+.timeGridHeader {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    background: var(--gray-25);
+    border-bottom: 1px solid var(--gray-100);
+}
 
-    &.isSingle {
-        border-radius: var(--radius-half);
+.timeGridHeaderGutter {
+    background: var(--gray-25);
+}
+
+.timeGridHeaderDays {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 1px;
+    background: var(--gray-100);
+}
+
+.timeGridHeaderDay {
+    padding: 9px 12px;
+    background: var(--gray-25);
+    color: var(--foreground-secondary);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1em;
+    text-align: center;
+    text-transform: capitalize;
+
+    &.isToday {
+        color: var(--primary-600);
     }
+}
 
-    &.isMiddle {
-        margin-left: -22px;
-        margin-right: -22px;
+.timeGridAllDay {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    background: var(--gray-25);
+    border-bottom: 1px solid var(--gray-100);
+}
+
+.timeGridAllDayLabel {
+    align-self: stretch;
+    padding: 6px 9px;
+    color: var(--foreground-secondary);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1em;
+    text-align: right;
+}
+
+.timeGridAllDayDays {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 1px;
+    min-height: 36px;
+    background: var(--gray-100);
+}
+
+.timeGridAllDayCell {
+    display: flex;
+    flex-flow: column;
+    gap: 3px;
+    padding: 6px;
+    background: var(--gray-25);
+
+    &.isDropTarget {
+        box-shadow: inset 0 0 0 2px var(--primary-300);
+    }
+}
+
+.timeGridBody {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+}
+
+.timeGridHours {
+    display: flex;
+    flex-flow: column;
+    background: var(--gray-25);
+}
+
+.timeGridHourLabel {
+    position: relative;
+    box-sizing: border-box;
+    padding-right: 9px;
+    color: var(--foreground-secondary);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1em;
+    text-align: right;
+}
+
+.timeGridHourLabelText {
+    position: absolute;
+    top: 0;
+    right: 9px;
+    transform: translateY(-50%);
+    background: var(--gray-25);
+    padding: 0 2px;
+}
+
+.timeGridDays {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 1px;
+    background: var(--gray-100);
+}
+
+.timeGridDay {
+    position: relative;
+    background: var(--gray-25);
+    background-image: repeating-linear-gradient(
+        to bottom,
+        transparent,
+        transparent calc(var(--hour-height, 48px) - 1px),
+        var(--gray-100) calc(var(--hour-height, 48px) - 1px),
+        var(--gray-100) var(--hour-height, 48px)
+    );
+
+    &.isDropTarget {
+        box-shadow: inset 0 0 0 2px var(--primary-300);
     }
+}
+
+.timeGridDayItem {
+    position: absolute;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 2px;
 
-    &.isStart {
-        margin-right: -18px;
-        border-top-left-radius: var(--radius-half);
-        border-bottom-left-radius: var(--radius-half);
+    &.isClippedTop {
+        border-top: 2px dashed var(--warning-300);
     }
 
-    &.isEnd {
-        margin-left: -18px;
-        border-top-right-radius: var(--radius-half);
-        border-bottom-right-radius: var(--radius-half);
+    &.isClippedBottom {
+        border-bottom: 2px dashed var(--warning-300);
     }
 
-    &:not(.isSingle):not(.isStart) {
-        span {
-            opacity: 0;
-        }
+    &.isResizing {
+        opacity: .8;
     }
+}
+
+.timeGridDayItemBody {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    > button {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.timeGridDayItemHandle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 6px;
+    cursor: ns-resize;
+    z-index: 2;
+    background: transparent;
 
     @include mixin.hover {
-        background: var(--primary-200);
+        background: var(--primary-300);
+    }
+
+    &.isTop {
+        top: 0;
+    }
+
+    &.isBottom {
+        bottom: 0;
     }
 }
+
+.timeGridDropIndicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--primary-500);
+    z-index: 5;
+    pointer-events: none;
+}
+
+/* endregion */

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .chip {
     display: flex;

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .colorPicker {
     --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);