@flux-ui/components 3.0.0-next.0

package/src/component/primitive/SliderBase.vue

@@ -0,0 +1,89 @@
+<template>
+    <div
+        ref="root"
+        :class="clsx(
+            $style.slider,
+            disabled && $style.isDisabled,
+            isDragging && $style.isDragging
+        )"
+        role="slider"
+        :aria-disabled="disabled ? true : undefined"
+        @pointerdown="onPointerDown">
+        <FluxTicks
+            v-if="isTicksVisible"
+            :lower="min"
+            :upper="max"/>
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { onMounted, onUnmounted, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import FluxTicks from '$flux/component/FluxTicks.vue';
+    import $style from '$flux/css/component/primitive/Slider.module.scss';
+
+    const emit = defineEmits<{
+        dragging: [boolean];
+        update: [number];
+    }>();
+
+    const {
+        disabled: componentDisabled,
+        isDragging
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly isDragging?: boolean;
+        readonly isTicksVisible?: boolean;
+        readonly max: number;
+        readonly min: number;
+        readonly step: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const rootRef = useTemplateRef('root');
+
+    onMounted(() => {
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp, {passive: true});
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    });
+
+    function onPointerDown(evt: PointerEvent): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        emit('dragging', true);
+        requestAnimationFrame(() => onPointerMove(evt));
+    }
+
+    function onPointerMove(evt: PointerEvent): void {
+        const root = unrefTemplateElement(rootRef);
+
+        if (!isDragging || !root) {
+            return;
+        }
+
+        let {left, width} = root.getBoundingClientRect();
+        left += 6; // margin.
+        width -= 12; // margin times two.
+
+        emit('update', Math.max(0, Math.min(1, (evt.pageX - left) / width)));
+        evt.preventDefault();
+    }
+
+    function onPointerUp(): void {
+        emit('dragging', false);
+    }
+
+    watch(() => isDragging, () => emit('dragging', isDragging));
+</script>

package/src/component/primitive/SliderThumb.vue

@@ -0,0 +1,64 @@
+<template>
+    <button
+        :class="clsx(
+            $style.sliderThumb,
+            disabled && $style.isDisabled,
+            isDragging && $style.isDragging
+        )"
+        :style="{
+            left: `${position * 100}%`
+        }"
+        :aria-disabled="disabled ? true : undefined"
+        :tabindex="disabled ? -1 : 0"
+        type="button"
+        @keydown="onKeyDown"
+        @pointerdown="$emit('grab', $event)"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { toRef, unref } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import $style from '$flux/css/component/primitive/Slider.module.scss';
+
+    const emit = defineEmits<{
+        decrement: [];
+        grab: [PointerEvent];
+        increment: [];
+    }>();
+
+    const {
+        disabled: componentDisabled
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly isDragging?: boolean;
+        readonly position: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        switch (evt.key) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                emit('decrement');
+                break;
+
+            case 'ArrowUp':
+            case 'ArrowRight':
+                emit('increment');
+                break;
+
+            default:
+                return;
+        }
+
+        evt.preventDefault();
+    }
+</script>

package/src/component/primitive/SliderTrack.vue

@@ -0,0 +1,22 @@
+<template>
+    <div :class="$style.sliderTrack">
+        <div
+            :class="$style.sliderTrackValue"
+            :style="{
+                left: `${percentageLower * 100}%`,
+                width: `${(percentageUpper - percentageLower) * 100}%`
+            }"/>
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/primitive/Slider.module.scss';
+
+    defineProps<{
+        readonly percentageLower: number;
+        readonly percentageUpper: number;
+    }>();
+</script>

package/src/component/primitive/VNodeRenderer.ts

@@ -0,0 +1,11 @@
+import type { PropType, VNode } from 'vue';
+import { defineComponent } from 'vue';
+
+export const VNodeRenderer = defineComponent({
+    props: {
+        vnode: Object as PropType<VNode>
+    },
+    setup(props) {
+        return () => props.vnode;
+    }
+});

package/src/component/primitive/index.ts

@@ -0,0 +1,10 @@
+export { default as Anchor } from './Anchor.vue';
+export { default as AnchorPopup } from './AnchorPopup.vue';
+export { default as FilterOptionBase } from './FilterOptionBase.vue';
+export { default as SelectBase } from './SelectBase.vue';
+export { default as SliderBase } from './SliderBase.vue';
+export { default as SliderThumb } from './SliderThumb.vue';
+export { default as SliderTrack } from './SliderTrack.vue';
+
+export { FilterMenuRenderer } from './FilterMenuRenderer';
+export { VNodeRenderer } from './VNodeRenderer';

package/src/composable/index.ts

@@ -0,0 +1,9 @@
+export { default as useBreakpoints } from './useBreakpoints';
+export { default as useDisabled } from './useDisabled';
+
+export { default as useDisabledInjection } from './useDisabledInjection';
+export { default as useExpandableGroupInjection } from './useExpandableGroupInjection';
+export { default as useFilterInjection } from './useFilterInjection';
+export { default as useFlyoutInjection } from './useFlyoutInjection';
+export { default as useFormFieldInjection } from './useFormFieldInjection';
+export { default as useTableInjection } from './useTableInjection';

package/src/composable/private/index.ts

@@ -0,0 +1,3 @@
+export { default as useFormSelect } from './useFormSelect';
+export { default as useLoaded } from './useLoaded';
+export { default as useTranslate } from './useTranslate';

package/src/composable/private/useFormSelect.ts

@@ -0,0 +1,66 @@
+import type { FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectOptions, FluxFormSelectValue } from '@flux-ui/types';
+import type { MaybeRef, Ref } from 'vue';
+import { computed, unref } from 'vue';
+import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';
+
+export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: MaybeRef<FluxFormSelectEntry[]>, searchQuery?: Ref<string>) {
+    const values = computed(() => {
+        const model = unref(modelValue);
+        return Array.isArray(model) ? model : [model];
+    });
+
+    const groups = computed(() => {
+        const groups: FluxFormSelectOptions[] = [];
+        const search = unref(searchQuery)?.trim().toLowerCase();
+
+        const available = unref(options)
+            .filter(o => !('value' in o) || (!search || o.label.toLowerCase().includes(search)))
+            .filter(o => !('value' in o) || !isMultiple || !unref(selected).find(s => s.value === o.value));
+
+        if (available.length === 0) {
+            return [];
+        }
+
+        if (!available.find(isFluxFormSelectGroup)) {
+            return [[null, available]] as FluxFormSelectOptions[];
+        }
+
+        for (let i = 0; i < available.length;) {
+            const item = available[i];
+
+            if (isFluxFormSelectOption(item)) {
+                ++i;
+                groups.push([null, [item]]);
+                continue;
+            }
+
+            const subItems: FluxFormSelectOption[] = [];
+
+            for (++i; i <= available.length; ++i) {
+                const subItem = available[i];
+
+                if (isFluxFormSelectGroup(subItem) || i === available.length) {
+                    if (subItems.length > 0) {
+                        groups.push([item, subItems]);
+                    }
+
+                    break;
+                }
+
+                subItems.push(subItem);
+            }
+        }
+
+        return groups;
+    });
+
+    const selected = computed(() => unref(values)
+        .map(v => unref(options).find(o => isFluxFormSelectOption(o) && o.value === v))
+        .filter(isFluxFormSelectOption));
+
+    return {
+        groups,
+        selected,
+        values
+    };
+}

package/src/composable/private/useLoaded.ts

@@ -0,0 +1,21 @@
+import { computed, shallowRef, unref } from 'vue';
+
+export default function () {
+    const tasks = shallowRef(0);
+
+    const isLoading = computed(() => unref(tasks) > 0);
+
+    function loaded<T extends Function>(fn: T): T {
+        return (async (...args: any[]) => {
+            tasks.value++;
+
+            return await fn(...args)
+                .finally(() => tasks.value--);
+        }) as unknown as T;
+    }
+
+    return {
+        isLoading,
+        loaded
+    };
+}

package/src/composable/private/useTranslate.ts

@@ -0,0 +1,35 @@
+import { getCurrentInstance } from 'vue';
+import type { FluxTranslate, FluxTranslation } from '$flux/data';
+import { english } from '$flux/data';
+
+const fallback: FluxTranslate = (key, params) => {
+    if (!(key in english)) {
+        return key;
+    }
+
+    let translation: string = english[key as FluxTranslation];
+
+    for (let paramName in params) {
+        translation = translation.replaceAll(`{${paramName}}`, params[paramName].toString());
+    }
+
+    return translation;
+};
+
+export default () => {
+    const instance = getCurrentInstance()?.proxy;
+
+    if (!instance || !isVueI18n(instance)) {
+        return fallback;
+    }
+
+    return instance.$t;
+};
+
+type VueI18n = {
+    $t: FluxTranslate;
+}
+
+function isVueI18n(obj: object | null): obj is VueI18n {
+    return !!obj && '$t' in obj;
+}

package/src/composable/useBreakpoints.ts

@@ -0,0 +1,54 @@
+import type { Ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+} as const;
+
+type Breakpoint = keyof typeof BREAKPOINTS;
+
+export default function () {
+    const currentBreakpoint = ref<Breakpoint | null>(null);
+    const breakpointRefs = Object.fromEntries(
+        Object.keys(BREAKPOINTS).map((key) => [key, ref(false)])
+    ) as Record<Breakpoint, Ref<boolean>>;
+
+    const updateBreakpoints = () => {
+        const width = window.innerWidth;
+        let activeBreakpoint: Breakpoint | null = null;
+
+        for (const [key, value] of Object.entries(BREAKPOINTS).reverse() as [
+            Breakpoint,
+            number
+        ][]) {
+            if (width >= value) {
+                activeBreakpoint = key;
+                break;
+            }
+        }
+
+        currentBreakpoint.value = activeBreakpoint;
+
+        for (const key of Object.keys(BREAKPOINTS) as Breakpoint[]) {
+            breakpointRefs[key].value = key === activeBreakpoint;
+        }
+    };
+
+    onMounted(() => {
+        updateBreakpoints();
+        window.addEventListener('resize', updateBreakpoints, {passive: true});
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateBreakpoints);
+    });
+
+    return {
+        currentBreakpoint,
+        ...breakpointRefs
+    };
+}

package/src/composable/useDisabled.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+import { computed, unref } from 'vue';
+import useDisabledInjection from './useDisabledInjection';
+
+export default function (componentDisabled: Ref<boolean>) {
+    const treeDisabled = useDisabledInjection();
+
+    return computed(() => unref(componentDisabled) || unref(treeDisabled));
+}

package/src/composable/useDisabledInjection.ts

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

package/src/composable/useExpandableGroupInjection.ts

@@ -0,0 +1,10 @@
+import { inject } from 'vue';
+import { FluxExpandableGroupInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxExpandableGroupInjectionKey, {
+        closeAll: () => void 0,
+        register: () => void 0,
+        unregister: () => void 0
+    });
+}

package/src/composable/useFilterInjection.ts

@@ -0,0 +1,22 @@
+import { inject, ref } from 'vue';
+import { FluxFilterInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxFilterInjectionKey, {
+        // note(Bas): The default value is never used, but required by
+        //  Vue, so that explains the empty getter and function below.
+        state: ref({
+            get resettable() {
+                return [];
+            },
+
+            reset(): void {
+            }
+        }),
+        back: () => void 0,
+        reset: () => void 0,
+        getValue: () => void 0,
+        hasValue: () => false,
+        setValue: () => void 0
+    });
+}

package/src/composable/useFlyoutInjection.ts

@@ -0,0 +1,10 @@
+import { inject, ref } from 'vue';
+import { FluxFlyoutInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxFlyoutInjectionKey, {
+        isClosing: ref(false),
+        isOpen: ref(false),
+        isOpening: ref(false)
+    });
+}

package/src/composable/useFormFieldInjection.ts

@@ -0,0 +1,8 @@
+import { inject, useId } from 'vue';
+import { FluxFormFieldInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxFormFieldInjectionKey, {
+        id: useId()
+    });
+}

package/src/composable/useTableInjection.ts

@@ -0,0 +1,11 @@
+import { inject } from 'vue';
+import { FluxTableInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxTableInjectionKey, {
+        isBordered: false,
+        isHoverable: false,
+        isSeparated: false,
+        isStriped: false
+    });
+}

package/src/css/base.scss

@@ -0,0 +1,33 @@
+@use 'variables';
+
+@layer flux-base {
+    :root, [light] {
+        @include variables.animation;
+        @include variables.color-light;
+        @include variables.default-light;
+        @include variables.shadow-light;
+    }
+
+    [dark] {
+        @include variables.color-dark;
+        @include variables.default-dark;
+        @include variables.shadow-dark;
+    }
+
+    html {
+        font-size: var(--font-size);
+    }
+
+    body {
+        background: var(--background);
+        font-family: var(--font-sans), system-ui;
+    }
+
+    body, dialog {
+        color: var(--foreground);
+    }
+
+    [inert] *::-webkit-scrollbar {
+        display: none;
+    }
+}

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

@@ -0,0 +1,107 @@
+@use '$flux/css/mixin';
+
+@value button, buttonIcon, buttonLabel from './base/Button.module.scss';
+@value basePaneStructure from './base/Pane.module.scss';
+
+.action {
+    composes: button;
+
+    height: 30px;
+    width: 30px;
+    padding-left: 6px;
+    padding-right: 6px;
+    border: 0;
+    border-radius: calc(var(--radius) / 2);
+    box-shadow: none;
+
+    @include mixin.hover {
+        background: rgb(var(--gray-3));
+    }
+
+    &:active {
+        background: rgb(var(--gray-2));
+    }
+
+    .spinner {
+        font-size: 24px;
+    }
+}
+
+.actionIcon {
+    composes: buttonIcon;
+
+    color: var(--foreground);
+    font-size: 18px;
+}
+
+.action.isDestructive .actionIcon {
+    color: rgb(var(--danger-7));
+}
+
+.actionLabel {
+    composes: buttonLabel;
+
+    color: var(--foreground);
+}
+
+.actionBar {
+    flex-wrap: wrap;
+
+    .separator {
+        margin-top: 9px;
+        margin-bottom: 9px;
+    }
+
+    @include mixin.breakpoint-up(sm) {
+        > .formInput {
+            max-width: 240px;
+        }
+    }
+}
+
+:local(.basePaneStructure) > .actionBar {
+    padding: 15px 21px;
+    background: rgb(var(--gray-1));
+    border: 1px solid rgb(var(--gray-2));
+    border-left: 0;
+    border-right: 0;
+
+    &:first-child {
+        border-top: 0;
+        border-top-left-radius: var(--radius);
+        border-top-right-radius: var(--radius);
+    }
+
+    &:last-child {
+        border-bottom: 0;
+        border-bottom-left-radius: var(--radius);
+        border-bottom-right-radius: var(--radius);
+    }
+}
+
+.paneHeader + .actionBar {
+    margin-top: 21px;
+}
+
+.actionPane {
+    container: actionPane / inline-size;
+
+    width: 100%;
+}
+
+.actionPaneGrid {
+    display: grid;
+    padding: 36px;
+    gap: 36px;
+    grid-template-columns: 1fr auto;
+
+    @container actionPane (max-width: 540px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.actionPaneBody {
+    position: relative;
+    padding: 0;
+    text-wrap: pretty;
+}