@flux-ui/components 3.0.0-next.0

package/src/component/FluxFilterDateRange.vue

@@ -0,0 +1,59 @@
+<template>
+    <FluxDatePicker
+        :class="$style.filterDatePicker"
+        :max="max"
+        :min="min"
+        :model-value="currentValue"
+        :range-mode="rangeMode"
+        @update:model-value="onDatePicked"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { DateTime } from 'luxon';
+    import { computed, unref } from 'vue';
+    import { useFilterInjection } from '$flux/composable';
+    import FluxDatePicker from './FluxDatePicker.vue';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const {
+        name,
+        rangeMode = 'range'
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly label: string;
+        readonly max?: DateTime;
+        readonly min?: DateTime;
+        readonly name: string;
+        readonly rangeMode?: 'range' | 'week' | 'month';
+    }>();
+
+    const {back, state, setValue} = useFilterInjection();
+
+    const currentValue = computed(() => {
+        const value = unref(state)[name];
+
+        if (!value || !Array.isArray(value)) {
+            return null;
+        }
+
+        const [start, end] = value;
+
+        if (!DateTime.isDateTime(start) || !DateTime.isDateTime(end)) {
+            return null;
+        }
+
+        return [start, end];
+    });
+
+    function onDatePicked(date: DateTime | DateTime[] | null): void {
+        if (date === null || !Array.isArray(date)) {
+            return;
+        }
+
+        setValue(name, date);
+        back();
+    }
+</script>

package/src/component/FluxFilterOption.vue

@@ -0,0 +1,49 @@
+<template>
+    <FilterOptionBase
+        v-model:search-query="modelSearch"
+        :is-searchable="isSearchable"
+        :options="filteredOptions"
+        :selected="[currentValue]"
+        :search-placeholder="searchPlaceholder"
+        @select="onSelect"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import { computed, unref } from 'vue';
+    import { useFilterInjection } from '$flux/composable';
+    import { isFluxFilterOptionHeader } from '$flux/data';
+    import { FilterOptionBase } from './primitive';
+
+    const modelSearch = defineModel<string>('searchQuery', {default: ''});
+
+    const {
+        name,
+        options
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isSearchable?: boolean;
+        readonly label: string;
+        readonly name: string;
+        readonly options: FluxFilterOptionRow[];
+        readonly searchPlaceholder?: string;
+    }>();
+
+    const {back, state, setValue} = useFilterInjection();
+
+    const currentValue = computed(() => unref(state)[name] as FluxFilterValueSingle);
+    const filteredOptions = computed(() => options
+        .filter(o => isFluxFilterOptionHeader(o) || unref(modelSearch).length === 0 || o.label.toLowerCase().includes(unref(modelSearch).toLowerCase())));
+
+    function onSelect(value: FluxFilterValue): void {
+        if (unref(currentValue) === value) {
+            setValue(name, null);
+        } else {
+            setValue(name, value);
+        }
+
+        back();
+    }
+</script>

package/src/component/FluxFilterOptionAsync.vue

@@ -0,0 +1,103 @@
+<template>
+    <FilterOptionBase
+        v-model:search-query="modelSearch"
+        :is-loading="isLoading"
+        is-searchable
+        :options="options"
+        :selected="[currentValue]"
+        :search-placeholder="searchPlaceholder"
+        @select="onSelect"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useDebouncedRef } from '@flux-ui/internals';
+    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import { computed, ref, unref, watch } from 'vue';
+    import { useFilterInjection } from '$flux/composable';
+    import { useLoaded } from '$flux/composable/private';
+    import { isFluxFilterOptionItem } from '$flux/data';
+    import { FilterOptionBase } from './primitive';
+
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const {
+        fetchOptions: fetchOptionsProp,
+        fetchRelevant: fetchRelevantProp,
+        fetchSearch: fetchSearchProp,
+        name
+    } = defineProps<{
+        fetchOptions(ids: FluxFilterValue[]): Promise<FluxFilterOptionRow[]>;
+        fetchRelevant(): Promise<FluxFilterOptionRow[]>;
+        fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
+
+        readonly icon?: FluxIconName;
+        readonly label: string;
+        readonly name: string;
+        readonly searchPlaceholder?: string;
+    }>();
+
+    const {back, state, setValue} = useFilterInjection();
+    const {isLoading, loaded} = useLoaded();
+    const debouncedModelSearch = useDebouncedRef(modelSearch, 150);
+    const fetchOptions = computed(() => loaded(fetchOptionsProp));
+    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
+    const fetchSearch = computed(() => loaded(fetchSearchProp));
+
+    const selectedOptions = ref<FluxFilterOptionRow[]>([]);
+    const visibleOptions = ref<FluxFilterOptionRow[]>([]);
+
+    const currentValue = computed(() => unref(state)[name] as FluxFilterValueSingle);
+
+    const options = computed(() => {
+        const options: FluxFilterOptionRow[] = [];
+        const search = unref(modelSearch);
+        const selected = unref(selectedOptions);
+        const visible = unref(visibleOptions);
+
+        visible.forEach(vo => options.push(vo));
+
+        selected.forEach(so => {
+            if (isFluxFilterOptionItem(so) && visible.find(vo => isFluxFilterOptionItem(vo) && vo.value === so.value)) {
+                return;
+            }
+
+            if (isFluxFilterOptionItem(so) && !so.label.toLowerCase().includes(search.toLowerCase())) {
+                return;
+            }
+
+            options.push(so);
+        });
+
+        return options;
+    });
+
+    function onSelect(value: FluxFilterValue): void {
+        if (unref(currentValue) === value) {
+            setValue(name, null);
+        } else {
+            setValue(name, value);
+        }
+
+        back();
+    }
+
+    watch(currentValue, async value => {
+        if (!value && value !== 0) {
+            return;
+        }
+
+        selectedOptions.value = await unref(fetchOptions)([value]);
+    }, {immediate: true});
+
+    watch(debouncedModelSearch, async searchQuery => {
+        if (searchQuery.length > 0) {
+            visibleOptions.value = await unref(fetchSearch)(searchQuery);
+        } else {
+            visibleOptions.value = await unref(fetchRelevant)();
+        }
+    }, {immediate: true});
+</script>

package/src/component/FluxFilterOptions.vue

@@ -0,0 +1,62 @@
+<template>
+    <FilterOptionBase
+        v-model:search-query="modelSearch"
+        :is-searchable="isSearchable"
+        :options="filteredOptions"
+        :selected="currentValue"
+        :search-placeholder="searchPlaceholder"
+        @select="onSelect"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFilterOptionRow, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import { computed, unref } from 'vue';
+    import { useFilterInjection } from '$flux/composable';
+    import { isFluxFilterOptionHeader } from '$flux/data';
+    import { FilterOptionBase } from './primitive';
+
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const {
+        name,
+        options
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isSearchable?: boolean;
+        readonly label: string;
+        readonly name: string;
+        readonly options: FluxFilterOptionRow[];
+        readonly searchPlaceholder?: string;
+    }>();
+
+    const {state, setValue} = useFilterInjection();
+
+    const currentValue = computed(() => {
+        const value = unref(state)[name];
+
+        if (Array.isArray(value)) {
+            return value;
+        }
+
+        return [];
+    });
+
+    const filteredOptions = computed(() => options
+        .filter(o => isFluxFilterOptionHeader(o) || unref(modelSearch).length === 0 || o.label.toLowerCase().includes(unref(modelSearch).toLowerCase())));
+
+    function onSelect(value: FluxFilterValueSingle): void {
+        let values = Array.from(unref(currentValue));
+
+        if (values.includes(value)) {
+            values = values.filter(v => v !== value);
+        } else {
+            values.push(value);
+        }
+
+        setValue(name, values);
+    }
+</script>

package/src/component/FluxFilterOptionsAsync.vue

@@ -0,0 +1,113 @@
+<template>
+    <FilterOptionBase
+        v-model:search-query="modelSearch"
+        :is-loading="isLoading"
+        is-searchable
+        :options="options"
+        :selected="currentValue"
+        :search-placeholder="searchPlaceholder"
+        @select="onSelect"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useDebouncedRef } from '@flux-ui/internals';
+    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import { computed, ref, unref, watch } from 'vue';
+    import { useFilterInjection } from '$flux/composable';
+    import { useLoaded } from '$flux/composable/private';
+    import { isFluxFilterOptionItem } from '$flux/data';
+    import { FilterOptionBase } from './primitive';
+
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const {
+        fetchOptions: fetchOptionsProp,
+        fetchRelevant: fetchRelevantProp,
+        fetchSearch: fetchSearchProp,
+        name
+    } = defineProps<{
+        fetchOptions(ids: FluxFilterValue[]): Promise<FluxFilterOptionRow[]>;
+        fetchRelevant(): Promise<FluxFilterOptionRow[]>;
+        fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
+
+        readonly icon?: FluxIconName;
+        readonly label: string;
+        readonly name: string;
+        readonly searchPlaceholder?: string;
+    }>();
+
+    const {state, setValue} = useFilterInjection();
+    const {isLoading, loaded} = useLoaded();
+    const debouncedModelSearch = useDebouncedRef(modelSearch, 150);
+    const fetchOptions = computed(() => loaded(fetchOptionsProp));
+    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
+    const fetchSearch = computed(() => loaded(fetchSearchProp));
+
+    const selectedOptions = ref<FluxFilterOptionRow[]>([]);
+    const visibleOptions = ref<FluxFilterOptionRow[]>([]);
+
+    const currentValue = computed(() => {
+        const value = unref(state)[name];
+
+        if (Array.isArray(value)) {
+            return value;
+        }
+
+        return [];
+    });
+
+    const options = computed(() => {
+        const options: FluxFilterOptionRow[] = [];
+        const search = unref(modelSearch);
+        const selected = unref(selectedOptions);
+        const visible = unref(visibleOptions);
+
+        visible.forEach(vo => options.push(vo));
+
+        selected.forEach(so => {
+            if (isFluxFilterOptionItem(so) && visible.find(vo => isFluxFilterOptionItem(vo) && vo.value === so.value)) {
+                return;
+            }
+
+            if (isFluxFilterOptionItem(so) && !so.label.toLowerCase().includes(search.toLowerCase())) {
+                return;
+            }
+
+            options.push(so);
+        });
+
+        return options;
+    });
+
+    function onSelect(value: FluxFilterValueSingle): void {
+        let values = Array.from(unref(currentValue));
+
+        if (values.includes(value)) {
+            values = values.filter(v => v !== value);
+        } else {
+            values.push(value);
+        }
+
+        setValue(name, values);
+    }
+
+    watch(currentValue, async value => {
+        if (value.length === 0) {
+            return;
+        }
+
+        selectedOptions.value = await unref(fetchOptions)(value);
+    }, {immediate: true});
+
+    watch(debouncedModelSearch, async searchQuery => {
+        if (searchQuery.length > 0) {
+            visibleOptions.value = await unref(fetchSearch)(searchQuery);
+        } else {
+            visibleOptions.value = await unref(fetchRelevant)();
+        }
+    }, {immediate: true});
+</script>

package/src/component/FluxFilterRange.vue

@@ -0,0 +1,91 @@
+<template>
+    <FluxPaneBody>
+        <FluxFormColumn>
+            <FluxFormField :label="translate('flux.min')">
+                <FluxFormSlider
+                    :formatter="formatter"
+                    :is-ticks-visible="isTicksVisible"
+                    :model-value="currentValue[0]"
+                    :max="max"
+                    :min="min"
+                    :step="step"
+                    @update:model-value="update({lower: $event})"/>
+
+                <template #value>
+                    {{ formatter ? formatter(currentValue[0]) : currentValue[0] }}
+                </template>
+            </FluxFormField>
+
+            <FluxFormField :label="translate('flux.max')">
+                <FluxFormSlider
+                    :formatter="formatter"
+                    :is-ticks-visible="isTicksVisible"
+                    :model-value="currentValue[1]"
+                    :max="max"
+                    :min="min"
+                    :step="step"
+                    @update:model-value="update({upper: $event})"/>
+
+                <template #value>
+                    {{ formatter ? formatter(currentValue[1]) : currentValue[1] }}
+                </template>
+            </FluxFormField>
+        </FluxFormColumn>
+    </FluxPaneBody>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { formatNumber } from '@basmilius/utils';
+    import type { FluxIconName } from '@flux-ui/types';
+    import { computed, unref } from 'vue';
+    import { useFilterInjection } from '$flux/composable';
+    import { useTranslate } from '$flux/composable/private';
+    import FluxFormColumn from './FluxFormColumn.vue';
+    import FluxFormField from './FluxFormField.vue';
+    import FluxFormSlider from './FluxFormSlider.vue';
+    import FluxPaneBody from './FluxPaneBody.vue';
+
+    const {
+        formatter = formatNumber,
+        max,
+        min,
+        name,
+        step = 1
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isTicksVisible?: boolean;
+        readonly label: string;
+        readonly name: string;
+        readonly max: number;
+        readonly min: number;
+        readonly step?: number;
+        readonly formatter?: (value: number) => string;
+    }>();
+
+    const {state, setValue} = useFilterInjection();
+    const translate = useTranslate();
+
+    const currentValue = computed(() => (unref(state)[name] ?? [min, max]) as number[]);
+
+    function update({lower, upper}: { lower?: number, upper?: number }): void {
+        if (lower || lower === 0) {
+            upper ??= unref(currentValue)[1];
+
+            if (lower > upper) {
+                upper = lower;
+            }
+        }
+
+        if (upper || upper === 0) {
+            lower ??= unref(currentValue)[0];
+
+            if (lower > upper) {
+                lower = upper;
+            }
+        }
+
+        setValue(name, [lower!, upper!]);
+    }
+</script>

package/src/component/FluxFlickeringGrid.vue

@@ -0,0 +1,141 @@
+<template>
+    <canvas
+        ref="canvas"
+        :class="$style.flickeringGrid"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { mulberry32 } from '@basmilius/utils';
+    import { useInView } from '@flux-ui/internals';
+    import { computed, unref, useTemplateRef, watch } from 'vue';
+    import $style from '$flux/css/component/Visual.module.scss';
+
+    const {
+        color = '#1d4ed8',
+        flickerChance = 0.15,
+        gap = 6,
+        maxOpacity = 0.3,
+        size = 3
+    } = defineProps<{
+        readonly color?: string;
+        readonly flickerChance?: number;
+        readonly gap?: number;
+        readonly maxOpacity?: number;
+        readonly size?: number;
+    }>();
+
+    const canvasRef = useTemplateRef('canvas');
+
+    const inView = useInView(canvasRef);
+
+    const mulberry = mulberry32(13);
+
+    const rgb = computed(() => {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+
+        const context = canvas.getContext('2d');
+
+        if (!context) {
+            return [0, 0, 0];
+        }
+
+        context.fillStyle = color;
+        context.fillRect(0, 0, 1, 1);
+
+        return context.getImageData(0, 0, 1, 1).data;
+    });
+
+    function draw(context: CanvasRenderingContext2D, width: number, height: number, columns: number, rows: number, squares: Float32Array, dpr: number): void {
+        context.clearRect(0, 0, width * dpr, height * dpr);
+
+        const [r, g, b] = unref(rgb);
+
+        for (let i = 0; i < columns; ++i) {
+            for (let j = 0; j < rows; ++j) {
+                const opacity = squares[i * rows + j];
+                context.fillStyle = `rgb(${r} ${g} ${b} / ${opacity})`;
+                context.fillRect(
+                    (i * (size + gap) + width / 2 - (columns / 2 * (size + gap) - gap / 2)) * dpr,
+                    (j * (size + gap) + height / 2 - (rows / 2 * (size + gap) - gap / 2)) * dpr,
+                    size * dpr,
+                    size * dpr
+                );
+            }
+        }
+    }
+
+    function setup(canvas: HTMLCanvasElement) {
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+
+        const columns = Math.ceil(width / (size + gap));
+        const rows = Math.ceil(height / (size + gap));
+        const squares = new Float32Array(columns * rows);
+
+        for (let i = 0; i < squares.length; ++i) {
+            squares[i] = mulberry.next() * maxOpacity;
+        }
+
+        return {
+            width,
+            height,
+            columns,
+            rows,
+            squares,
+            dpr
+        };
+    }
+
+    function tick(squares: Float32Array, delta: number): void {
+        for (let i = 0; i < squares.length; ++i) {
+            if (mulberry.next() < flickerChance * delta) {
+                squares[i] = mulberry.next() * maxOpacity;
+            }
+        }
+    }
+
+    watch([canvasRef, inView], ([canvas, inView], _, onCleanup) => {
+        if (!canvas || !inView) {
+            return;
+        }
+
+        const context = canvas.getContext('2d');
+
+        if (!context) {
+            return;
+        }
+
+        let frame = 0;
+        let lastTime = 0;
+        let {width, height, columns, rows, squares, dpr} = setup(canvas);
+
+        const animate = (time: number): void => {
+            const delta = (time - lastTime) / 1000;
+            lastTime = time;
+
+            tick(squares, delta);
+            draw(context, width, height, columns, rows, squares, dpr);
+            frame = requestAnimationFrame(animate);
+        };
+
+        const onResize = () => {
+            ({width, height, columns, rows, squares, dpr} = setup(canvas));
+        };
+
+        window.addEventListener('resize', onResize, {passive: true});
+        requestAnimationFrame(animate);
+
+        onCleanup(() => {
+            window.removeEventListener('resize', onResize);
+            cancelAnimationFrame(frame);
+        });
+    }, {immediate: true});
+</script>