@flux-ui/components 3.0.0-next.0

package/src/component/FluxStepperSteps.vue

@@ -0,0 +1,62 @@
+<template>
+    <div
+        :class="$style.stepperSteps"
+        :style="{
+            '--progress': progress
+        }">
+        <template
+            v-for="step of amount"
+            :key="step">
+            <button
+                :class="clsx(
+                    $style.stepperStepsItem,
+                    current > step && $style.stepperStepsItemComplete,
+                    current === step && $style.stepperStepsItemCurrent,
+                    current < step && $style.stepperStepsItemIdle
+                )"
+                tabindex="-1"
+                type="button"
+                @click="activate(step - 1)">
+                <span :class="$style.stepperStepsItemParticles"/>
+
+                <FluxFadeTransition>
+                    <FluxIcon
+                        v-if="current > step"
+                        name="check"/>
+
+                    <span v-else>
+                        {{ step }}
+                    </span>
+                </FluxFadeTransition>
+            </button>
+        </template>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { computed } from 'vue';
+    import { FluxFadeTransition } from '$flux/transition';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Stepper.module.scss';
+
+    const emit = defineEmits<{
+        activate: [number];
+    }>();
+
+    const {
+        amount,
+        current
+    } = defineProps<{
+        readonly amount: number;
+        readonly current: number;
+    }>();
+
+    const progress = computed(() => (current - 1) / (amount - 1));
+
+    function activate(index: number): void {
+        emit('activate', index);
+    }
+</script>

package/src/component/FluxTab.vue

@@ -0,0 +1,23 @@
+<template>
+    <div
+        :class="$style.tab"
+        role="tabpanel">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import $style from '$flux/css/component/Tab.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly label?: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxTabBar.vue

@@ -0,0 +1,87 @@
+<template>
+    <nav
+        :class="$style.tabBar"
+        role="tablist"
+        aria-orientation="horizontal">
+        <button
+            v-if="isStartArrowVisible"
+            :class="$style.tabBarArrowStart"
+            tabindex="-1"
+            type="button"
+            @click="scrollToStart">
+            <FluxIcon name="angle-left"/>
+        </button>
+
+        <div
+            ref="tabBar"
+            :class="clsx(
+                $style.tabBarTabs,
+                isEndArrowVisible && $style.isEndMasked,
+                isStartArrowVisible && $style.isStartMasked
+            )">
+            <slot/>
+        </div>
+
+        <button
+            v-if="isEndArrowVisible"
+            :class="$style.tabBarArrowEnd"
+            tabindex="-1"
+            type="button"
+            @click="scrollToEnd">
+            <FluxIcon name="angle-right"/>
+        </button>
+    </nav>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement, useEventListener, useMutationObserver } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { onMounted, ref, useTemplateRef } from 'vue';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Tab.module.scss';
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const tabBarRef = useTemplateRef('tabBar');
+
+    useEventListener(tabBarRef, 'scroll', () => checkScroll());
+    useMutationObserver(tabBarRef, () => checkScroll(), {childList: true});
+
+    const isEndArrowVisible = ref(false);
+    const isStartArrowVisible = ref(false);
+
+    onMounted(() => checkScroll());
+
+    function checkScroll(): void {
+        const tabBar = unrefTemplateElement(tabBarRef)!;
+
+        if (tabBar.scrollWidth <= tabBar.offsetWidth) {
+            isEndArrowVisible.value = false;
+            isStartArrowVisible.value = false;
+            return;
+        }
+
+        isEndArrowVisible.value = tabBar.scrollLeft < tabBar.scrollWidth - tabBar.offsetWidth;
+        isStartArrowVisible.value = tabBar.scrollLeft > 0;
+    }
+
+    function scrollToEnd(): void {
+        const tabBar = unrefTemplateElement(tabBarRef)!;
+        tabBar.scrollBy({
+            behavior: 'smooth',
+            left: tabBar.offsetWidth / 1.5
+        });
+    }
+
+    function scrollToStart(): void {
+        const tabBar = unrefTemplateElement(tabBarRef)!;
+        tabBar.scrollBy({
+            behavior: 'smooth',
+            left: tabBar.offsetWidth / -1.5
+        });
+    }
+</script>

package/src/component/FluxTabBarItem.vue

@@ -0,0 +1,104 @@
+<template>
+    <FluxPressable
+        ref="tab"
+        :component-type="type"
+        :class="isActive ? $style.tabBarItemActive : $style.tabBarItem"
+        type="button"
+        role="tab"
+        :aria-disabled="disabled ? true : undefined"
+        :aria-selected="isActive"
+        :disabled="disabled ? true : undefined"
+        :tabindex="disabled ? -1 : tabindex"
+        :href="href"
+        :rel="rel"
+        :target="target"
+        :to="to"
+        @click="onClick"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave">
+        <FluxIcon
+            v-if="icon"
+            :name="icon"
+            :size="16"/>
+
+        <span v-if="label">{{ label }}</span>
+    </FluxPressable>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
+    import { ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPressable from './FluxPressable.vue';
+    import $style from '$flux/css/component/Tab.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+        mouseenter: [MouseEvent];
+        mouseleave: [MouseEvent];
+    }>();
+
+    const {
+        disabled: componentDisabled,
+        isActive
+    } = defineProps<{
+        readonly type?: FluxPressableType;
+        readonly disabled?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isActive?: boolean;
+        readonly label?: string;
+        readonly tabindex?: string | number;
+        readonly href?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const tabRef = useTemplateRef<ComponentPublicInstance>('tab');
+
+    function onClick(evt: MouseEvent): void {
+        if (unref(disabled)) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+
+        emit('click', evt);
+    }
+
+    function onMouseEnter(evt: MouseEvent): void {
+        emit('mouseenter', evt);
+    }
+
+    function onMouseLeave(evt: MouseEvent): void {
+        emit('mouseleave', evt);
+    }
+
+    watch(() => isActive, () => {
+        if (!isActive) {
+            return;
+        }
+
+        const tab = unref(tabRef);
+
+        if (!tab) {
+            return;
+        }
+
+        const el = tab.$el;
+
+        if (el.parentElement?.offsetWidth === el.parentElement?.scrollWidth) {
+            return;
+        }
+
+        el.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center'
+        });
+    }, {immediate: true});
+</script>

package/src/component/FluxTable.vue

@@ -0,0 +1,68 @@
+<template>
+    <div :class="$style.table">
+        <table :class="$style.tableBase">
+            <thead v-if="slots.header">
+            <slot name="header"/>
+            </thead>
+
+            <tbody v-if="slots.default">
+            <slot/>
+            </tbody>
+
+            <tfoot v-if="slots.footer">
+            <slot name="footer"/>
+            </tfoot>
+
+            <caption
+                v-if="slots.caption"
+                :style="{captionSide}">
+                <slot name="caption"/>
+            </caption>
+        </table>
+
+        <div
+            v-if="isLoading"
+            :class="$style.tableLoader">
+            <FluxSpinner/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { provide } from 'vue';
+    import { FluxTableInjectionKey } from '$flux/data';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Table.module.scss';
+
+    const {
+        captionSide = 'bottom',
+        isBordered = true,
+        isHoverable = false,
+        isLoading = false,
+        isSeparated = true,
+        isStriped = false
+    } = defineProps<{
+        readonly captionSide?: 'top' | 'bottom';
+        readonly isBordered?: boolean;
+        readonly isHoverable?: boolean;
+        readonly isLoading?: boolean;
+        readonly isSeparated?: boolean;
+        readonly isStriped?: boolean;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): any;
+        caption?(): any;
+        footer?(): any;
+        header?(): any;
+    }>();
+
+    provide(FluxTableInjectionKey, {
+        isBordered,
+        isHoverable,
+        isSeparated,
+        isStriped
+    });
+</script>

package/src/component/FluxTableActions.vue

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

package/src/component/FluxTableCell.vue

@@ -0,0 +1,47 @@
+<template>
+    <td
+        :class="clsx(
+            $style.tableCell,
+            isBordered && $style.isBordered,
+            isHoverable && $style.isHoverable,
+            isSeparated && $style.isSeparated,
+            isStriped && $style.isStriped
+        )"
+        role="cell">
+        <slot name="content">
+            <div
+                :class="$style.tableCellContent"
+                :style="{
+                    flexFlow: contentDirection
+                }">
+                <slot/>
+            </div>
+        </slot>
+    </td>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { useTableInjection } from '$flux/composable';
+    import $style from '$flux/css/component/Table.module.scss';
+
+    const {
+        contentDirection = 'row'
+    } = defineProps<{
+        readonly contentDirection?: 'column' | 'row';
+    }>();
+
+    defineSlots<{
+        default(): any;
+        content(): any;
+    }>();
+
+    const {
+        isBordered,
+        isHoverable,
+        isSeparated,
+        isStriped
+    } = useTableInjection();
+</script>

package/src/component/FluxTableHeader.vue

@@ -0,0 +1,111 @@
+<template>
+    <th
+        :class="clsx(
+            $style.tableHeader,
+            isBordered && $style.isBordered,
+            isShrinking && $style.isShrinking,
+            isSticky && $style.isSticky
+        )"
+        :style="{
+            minWidth: `${minWidth}px`
+        }">
+        <div :class="$style.tableHeaderContent">
+            <slot/>
+
+            <FluxFlyout v-if="isSortable">
+                <template #opener="{open}">
+                    <button
+                        :class="$style.tableSort"
+                        :aria-label="translate('flux.sort')"
+                        tabindex="-1"
+                        type="button"
+                        @click="open">
+                        <FluxIcon
+                            :size="16"
+                            :name="sortingIcon"/>
+                    </button>
+                </template>
+
+                <FluxMenu>
+                    <FluxMenuGroup>
+                        <FluxMenuItem
+                            :is-highlighted="sort === 'ascending'"
+                            icon-leading="arrow-down-a-z"
+                            :label="translate('flux.sortAscending')"
+                            @click="$emit('sort', 'ascending')"/>
+
+                        <FluxMenuItem
+                            :is-highlighted="sort === 'descending'"
+                            icon-leading="arrow-up-a-z"
+                            :label="translate('flux.sortDescending')"
+                            @click="$emit('sort', 'descending')"/>
+                    </FluxMenuGroup>
+
+                    <template v-if="sort">
+                        <FluxSeparator/>
+
+                        <FluxMenuGroup>
+                            <FluxMenuItem
+                                icon-leading="circle-xmark"
+                                is-destructive
+                                :label="translate('flux.sortRemove')"
+                                @click="$emit('sort', null)"/>
+                        </FluxMenuGroup>
+                    </template>
+                </FluxMenu>
+            </FluxFlyout>
+        </div>
+    </th>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed } from 'vue';
+    import { useTableInjection } from '$flux/composable';
+    import { useTranslate } from '$flux/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';
+
+    defineEmits<{
+        sort: ['ascending' | 'descending' | null];
+    }>();
+
+    const {
+        minWidth = 0,
+        sort
+    } = defineProps<{
+        readonly isShrinking?: boolean;
+        readonly isSortable?: boolean;
+        readonly isSticky?: boolean;
+        readonly minWidth?: number;
+        readonly sort?: 'ascending' | 'descending';
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const {isBordered} = useTableInjection();
+    const translate = useTranslate();
+
+    const sortingIcon = computed((): FluxIconName => {
+        switch (sort) {
+            case 'ascending':
+                return 'arrow-down-a-z';
+
+            case 'descending':
+                return 'arrow-up-a-z';
+
+            default:
+                return 'arrow-up-arrow-down';
+        }
+    });
+</script>

package/src/component/FluxTableRow.vue

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

package/src/component/FluxTabs.vue

@@ -0,0 +1,91 @@
+<template>
+    <div :class="$style.tabs">
+        <slot
+            v-bind="{children, modelValue, tabs, activate}"
+            name="tabs">
+            <FluxTabBar :class="$style.tabsBar">
+                <template
+                    v-for="(tab, index) of tabs"
+                    :key="index">
+                    <FluxTabBarItem
+                        :icon="tab.icon"
+                        :is-active="modelValue === index"
+                        :label="tab.label"
+                        @click="activate(index)"/>
+                </template>
+            </FluxTabBar>
+        </slot>
+
+        <slot
+            v-bind="{children, modelValue, tabs, activate}"
+            name="content">
+            <FluxWindowTransition :is-back="isTransitioningBack">
+                <VNodeRenderer
+                    :key="modelValue"
+                    :vnode="children[modelValue]"/>
+            </FluxWindowTransition>
+        </slot>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree, getComponentProps } from '@flux-ui/internals';
+    import type { FluxIconName } from '@flux-ui/types';
+    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { FluxWindowTransition } from '$flux/transition';
+    import { VNodeRenderer } from './primitive';
+    import FluxTabBar from './FluxTabBar.vue';
+    import FluxTabBarItem from './FluxTabBarItem.vue';
+    import $style from '$flux/css/component/Tab.module.scss';
+
+    const modelValue = defineModel<number>({
+        default: 0
+    });
+
+    const slots = defineSlots<{
+        default(): any;
+
+        content(props: {
+            activate(index: number): void;
+
+            readonly children: VNode[];
+            readonly modelValue: number;
+            readonly tabs: {
+                readonly icon?: FluxIconName;
+                readonly label?: string;
+            }[];
+        }): any;
+
+        tabs(props: {
+            activate(index: number): void;
+
+            readonly children: VNode[];
+            readonly modelValue: number;
+            readonly tabs: {
+                readonly icon?: FluxIconName;
+                readonly label?: string;
+            }[];
+        }): any;
+    }>();
+
+    const isTransitioningBack = ref(false);
+
+    const children = computed(() => flattenVNodeTree(slots.default?.() ?? []));
+    const tabs = computed<{ icon?: FluxIconName; label?: string; }[]>(() => unref(children)
+        .filter((child: VNode) => getComponentProps<any>(child).icon || getComponentProps<any>(child).label)
+        .map((child: VNode) => ({
+            icon: getComponentProps<any>(child).icon,
+            label: getComponentProps<any>(child).label
+        }))
+    );
+
+    function activate(index: number): void {
+        modelValue.value = index;
+    }
+
+    watch(modelValue, (newIndex, oldIndex) => {
+        isTransitioningBack.value = newIndex < oldIndex;
+    });
+</script>