@flux-ui/components 3.0.0-next.0

package/src/component/FluxDropZone.vue

@@ -0,0 +1,202 @@
+<template>
+    <div
+        :class="[
+            $style.dropZone,
+            isDragging && $style.isDragging,
+            isDraggingOver && $style.isDraggingOver
+        ]"
+        :aria-disabled="disabled ? true : undefined">
+        <div
+            :class="$style.dropZoneContent"
+            @dragleave.capture="onDragLeave"
+            @dragover.capture="onDragEnter"
+            @drop="onDrop">
+            <svg
+                ref="content"
+                :class="$style.dropZoneBorder"
+                role="presentation">
+                <rect
+                    height="100%"
+                    width="100%"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    :pathLength="pathLength"/>
+            </svg>
+
+            <slot v-bind="{isDragging, isDraggingOver, showPicker}"/>
+
+            <FluxFadeTransition>
+                <div
+                    v-if="isLoading"
+                    :class="$style.dropZoneLoader">
+                    <FluxSpinner/>
+                </div>
+            </FluxFadeTransition>
+        </div>
+
+        <div
+            v-if="slots.actions"
+            :class="$style.dropZoneActions">
+            <slot
+                name="actions"
+                v-bind="{isDragging, isDraggingOver, showPicker}"/>
+        </div>
+
+        <slot
+            name="extra"
+            v-bind="{isDragging, isDraggingOver, showPicker}"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { roundStep } from '@basmilius/utils';
+    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import { FluxFadeTransition } from '$flux/transition';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/DropZone.module.scss';
+
+    const emit = defineEmits<{
+        select: [File];
+        selectMultiple: [FileList];
+    }>();
+
+    const {
+        accept,
+        disabled: componentDisabled,
+        isMultiple
+    } = defineProps<{
+        readonly accept?: string;
+        readonly disabled?: boolean;
+        readonly isLoading?: boolean;
+        readonly isMultiple?: boolean;
+    }>();
+
+    const slots = defineSlots<{
+        default?(props: {
+            readonly isDragging: boolean;
+            readonly isDraggingOver: boolean;
+
+            showPicker(): void;
+        }): any;
+
+        actions?(props: {
+            readonly isDragging: boolean;
+            readonly isDraggingOver: boolean;
+
+            showPicker(): void;
+        }): any;
+
+        extra?(props: {
+            readonly isDragging: boolean;
+            readonly isDraggingOver: boolean;
+
+            showPicker(): void;
+        }): any;
+    }>();
+
+    const contentRef = useTemplateRef('content');
+    const disabled = useDisabled(toRef(() => componentDisabled));
+
+    const isDragging = ref(false);
+    const isDraggingOver = ref(false);
+    const pathLength = ref(0);
+
+    onMounted(() => {
+        window.addEventListener('dragleave', onWindowDragEnd, {capture: true});
+        window.addEventListener('dragover', onWindowDragStart, {capture: true});
+        window.addEventListener('drop', onWindowDrop, {capture: true});
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('dragleave', onWindowDragEnd);
+        window.removeEventListener('dragover', onWindowDragStart);
+        window.removeEventListener('drop', onWindowDrop);
+    });
+
+    function onDragEnter(evt: DragEvent): void {
+        isDraggingOver.value = true;
+        evt.preventDefault();
+    }
+
+    function onDragLeave(): void {
+        isDraggingOver.value = false;
+    }
+
+    function onDrop(evt: DragEvent): void {
+        isDragging.value = false;
+        isDraggingOver.value = false;
+
+        if (!evt.dataTransfer) {
+            return;
+        }
+
+        const files = evt.dataTransfer.files;
+
+        if (files.length === 0) {
+            return;
+        }
+
+        if (isMultiple) {
+            emit('selectMultiple', files);
+        } else {
+            emit('select', files[0]);
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+
+    function onWindowDragEnd(): void {
+        isDragging.value = false;
+    }
+
+    function onWindowDragStart(): void {
+        isDragging.value = true;
+    }
+
+    function onWindowDrop(): void {
+        isDragging.value = false;
+        isDraggingOver.value = false;
+    }
+
+    function onFileSelected(evt: Event): void {
+        const files = (evt.target as HTMLInputElement).files;
+
+        if (!files || files.length === 0) {
+            return;
+        }
+
+        if (isMultiple) {
+            emit('selectMultiple', files);
+        } else {
+            emit('select', files[0]);
+        }
+    }
+
+    function showPicker(): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        let input: HTMLInputElement | undefined = document.createElement('input');
+        input.accept = accept ?? '*';
+        input.multiple = isMultiple ?? false;
+        input.type = 'file';
+
+        input.addEventListener('change', onFileSelected, {once: true});
+        input.showPicker();
+    }
+
+    watch(contentRef, content => {
+        if (!content) {
+            return;
+        }
+
+        const {width, height} = content.getBoundingClientRect();
+        pathLength.value = roundStep(width * 2 + height * 2, 6);
+    }, {immediate: true});
+</script>
+

package/src/component/FluxDynamicView.vue

@@ -0,0 +1,16 @@
+<template>
+    <VNodeRenderer
+        v-if="vnode"
+        :vnode="vnode"/>
+</template>
+
+<script
+    setup
+    lang="ts">
+    import { VNode } from 'vue';
+    import { VNodeRenderer } from './primitive';
+
+    defineProps<{
+        readonly vnode?: VNode;
+    }>();
+</script>

package/src/component/FluxExpandable.vue

@@ -0,0 +1,119 @@
+<template>
+    <div
+        :class="isOpen ? $style.expandableOpened : $style.expandable"
+        :id="headerId"
+        :aria-controls="contentId"
+        :aria-expanded="isOpen">
+        <slot
+            v-bind="{label, isOpen, close, open, toggle}"
+            name="header">
+            <button
+                :class="$style.expandableHeader"
+                type="button"
+                @click="toggle">
+                <FluxFadeTransition>
+                    <FluxIcon
+                        v-if="icon"
+                        :key="icon"
+                        :name="icon"/>
+                </FluxFadeTransition>
+
+                <span>{{ label }}</span>
+
+                <FluxFadeTransition>
+                    <FluxIcon
+                        :key="expandIcon"
+                        :name="expandIcon"
+                        :size="16"/>
+                </FluxFadeTransition>
+            </button>
+        </slot>
+
+        <FluxAutoHeightTransition>
+            <div
+                v-if="isOpen"
+                :class="$style.expandableBody"
+                :id="contentId"
+                :aria-labelledby="headerId">
+                <slot
+                    v-bind="{label, close}"
+                    name="body">
+                    <div :class="$style.expandableContent">
+                        <slot v-bind="{label, close}"/>
+                    </div>
+                </slot>
+            </div>
+        </FluxAutoHeightTransition>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useComponentId } from '@flux-ui/internals';
+    import type { FluxIconName } from '@flux-ui/types';
+    import { computed, getCurrentInstance, onBeforeMount, onUnmounted, ref, unref, useId, watch } from 'vue';
+    import { useExpandableGroupInjection } from '$flux/composable';
+    import { FluxAutoHeightTransition, FluxFadeTransition } from '$flux/transition';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Expandable.module.scss';
+
+    const emit = defineEmits<{
+        toggle: [boolean];
+    }>();
+
+    const {
+        isOpened
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isOpened?: boolean;
+        readonly label?: string;
+    }>();
+
+    const componentId = useComponentId();
+    const contentId = useId();
+    const headerId = useId();
+    const instance = getCurrentInstance()!;
+    const isOpen = ref(false);
+
+    const {closeAll, register, unregister} = useExpandableGroupInjection();
+
+    const expandIcon = computed<FluxIconName>(() => unref(isOpen) ? 'minus' : 'plus');
+
+    onBeforeMount(() => register?.(unref(componentId), instance));
+    onUnmounted(() => unregister?.(unref(componentId)));
+
+    function close(): void {
+        isOpen.value = false;
+        emit('toggle', isOpen.value);
+    }
+
+    function open(): void {
+        closeAll?.();
+        isOpen.value = true;
+        emit('toggle', isOpen.value);
+    }
+
+    function toggle(): void {
+        if (isOpen.value) {
+            close();
+        } else {
+            open();
+        }
+    }
+
+    watch(() => isOpened, () => {
+        if (isOpened) {
+            open();
+        } else {
+            close();
+        }
+    }, {immediate: true});
+
+    defineExpose({
+        isOpen,
+        close,
+        open,
+        toggle
+    });
+</script>

package/src/component/FluxExpandableGroup.vue

@@ -0,0 +1,53 @@
+<template>
+    <div :class="$style.expandableGroup">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { getExposedRef } from '@flux-ui/internals';
+    import { ComponentInternalInstance, provide } from 'vue';
+    import { FluxExpandableGroupInjectionKey } from '$flux/data';
+    import $style from '$flux/css/component/Expandable.module.scss';
+
+    const {
+        isControlled
+    } = defineProps<{
+        readonly isControlled?: boolean;
+    }>();
+
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const expandables: { [key: number]: ComponentInternalInstance; } = {};
+
+    function closeAll(): void {
+        Object.values(expandables).forEach(expandable => {
+            const isOpenRef = getExposedRef<boolean>(expandable, 'isOpen');
+            isOpenRef.value = false;
+        });
+    }
+
+    function register(uid: number, expandable: ComponentInternalInstance): void {
+        expandables[uid] = expandable;
+
+        if (!isControlled && Object.values(expandables).length === 1) {
+            const isOpenRef = getExposedRef<boolean>(expandable, 'isOpen');
+            isOpenRef.value = true;
+        }
+    }
+
+    function unregister(uid: number): void {
+        delete expandables[uid];
+    }
+
+    provide(FluxExpandableGroupInjectionKey, {
+        closeAll,
+        register,
+        unregister
+    });
+</script>

package/src/component/FluxFader.vue

@@ -0,0 +1,64 @@
+<template>
+    <div
+        ref="fader"
+        :class="$style.fader">
+        <slot v-bind="{current, next, previous}"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement, useInterval } from '@flux-ui/internals';
+    import { computed, ref, unref, useTemplateRef, watch } from 'vue';
+    import $style from '$flux/css/component/Fader.module.scss';
+
+    const emit = defineEmits<{
+        update: [number];
+    }>();
+
+    const {
+        interval = 9000
+    } = defineProps<{
+        readonly interval?: number;
+    }>();
+
+    defineSlots<{
+        default(props: {
+            next(): void;
+            previous(): void;
+
+            readonly current: number;
+        }): any;
+    }>();
+
+    const faderRef = useTemplateRef('fader');
+    useInterval(interval, () => next());
+
+    const current = ref(-1);
+
+    const count = computed(() => {
+        const fader = unrefTemplateElement(faderRef);
+        return fader?.children.length ?? 0;
+    });
+
+    function next(): void {
+        current.value = unref(current) + 1 >= unref(count) ? 0 : unref(current) + 1;
+    }
+
+    function previous(): void {
+        current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) + 1;
+    }
+
+    watch(current, current => {
+        const fader = unrefTemplateElement(faderRef);
+
+        if (!fader || fader.children.length === 0) {
+            return;
+        }
+
+        Array.from(fader.children).forEach(item => item.classList.remove($style.isCurrent));
+        fader.children[current].classList.add($style.isCurrent);
+        emit('update', current);
+    }, {immediate: true});
+</script>

package/src/component/FluxFaderItem.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="$style.faderItem">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Fader.module.scss';
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxFilter.vue

@@ -0,0 +1,133 @@
+<template>
+    <div
+        v-height-transition
+        :class="$style.filter">
+        <FluxWindow ref="window">
+            <template #default="{navigate}">
+                <FilterMenuRenderer
+                    :navigate="navigate"
+                    :state="modelValue">
+                    <slot/>
+                </FilterMenuRenderer>
+            </template>
+
+            <template
+                v-for="(filter, name) of filters"
+                #[name]>
+                <FluxMenu>
+                    <FluxMenuGroup
+                        :class="$style.filterHeader"
+                        is-horizontal>
+                        <FluxMenuItem
+                            :class="$style.filterBack"
+                            :label="translate('flux.back')"
+                            icon-leading="angle-left"
+                            @click="back()"/>
+
+                        <FluxMenuItem
+                            v-if="resettable?.includes(name)"
+                            :class="$style.filterReset"
+                            icon-leading="trash"
+                            is-destructive
+                            @click="reset(name)"/>
+                    </FluxMenuGroup>
+
+                    <VNodeRenderer :vnode="filter"/>
+                </FluxMenu>
+            </template>
+        </FluxWindow>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree, getComponentName, getComponentProps, vHeightTransition } from '@flux-ui/internals';
+    import type { FluxFilterOptionItem, FluxFilterState } from '@flux-ui/types';
+    import { computed, provide, unref, useTemplateRef, VNode } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import { FluxFilterInjectionKey } from '$flux/data';
+    import { FilterMenuRenderer, VNodeRenderer } from './primitive';
+    import FluxMenu from './FluxMenu.vue';
+    import FluxMenuGroup from './FluxMenuGroup.vue';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import FluxWindow from './FluxWindow.vue';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        reset: [string]
+    }>();
+
+    const modelValue = defineModel<FluxFilterState>({
+        required: true
+    });
+
+    defineProps<{
+        readonly resettable?: string[];
+    }>();
+
+    const slots = defineSlots<{
+        default(): any;
+    }>();
+
+    const translate = useTranslate();
+
+    const windowRef = useTemplateRef<{ back(to: string): void; }>('window');
+
+    const filters = computed<Record<string, VNode>>(() => {
+        const filters: { [key: string]: VNode; } = {};
+        const items = flattenVNodeTree(slots.default?.() ?? []);
+
+        for (const item of items) {
+            const name = getComponentName(item);
+
+            if (!name.startsWith('FluxFilter')) {
+                continue;
+            }
+
+            const props = getComponentProps<{ name: string; }>(item);
+
+            if (!props.name) {
+                continue;
+            }
+
+            filters[props.name] = item;
+        }
+
+        return filters;
+    });
+
+    function back(): void {
+        unref(windowRef)?.back('default');
+    }
+
+    function reset(name: string): void {
+        back();
+        emit('reset', name);
+    }
+
+    function getValue(name: string): FluxFilterOptionItem['value'] | undefined {
+        if (!hasValue(name)) {
+            return undefined;
+        }
+
+        return unref(modelValue)[name] as FluxFilterOptionItem['value'];
+    }
+
+    function hasValue(name: string): boolean {
+        return name in unref(modelValue);
+    }
+
+    function setValue(name: string, value: FluxFilterOptionItem['value']): void {
+        modelValue.value[name] = value;
+    }
+
+    provide(FluxFilterInjectionKey, {
+        state: modelValue,
+        back,
+        reset,
+        getValue,
+        hasValue,
+        setValue
+    });
+</script>

package/src/component/FluxFilterDate.vue

@@ -0,0 +1,58 @@
+<template>
+    <FluxDatePicker
+        :class="$style.filterDatePicker"
+        :max="max"
+        :min="min"
+        :model-value="currentValue"
+        @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
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly label: string;
+        readonly max?: DateTime;
+        readonly min?: DateTime;
+        readonly name: string;
+    }>();
+
+    const {back, state, setValue} = useFilterInjection();
+
+    const currentValue = computed(() => {
+        const value = unref(state)[name];
+
+        if (!value) {
+            return null;
+        }
+
+        if (!DateTime.isDateTime(value)) {
+            if (typeof value === 'string') {
+                return DateTime.fromISO(value);
+            }
+
+            return null;
+        }
+
+        return value;
+    });
+
+    function onDatePicked(date: DateTime | DateTime[] | null): void {
+        if (!DateTime.isDateTime(date)) {
+            return;
+        }
+
+        setValue(name, date);
+        back();
+    }
+</script>