@flux-ui/components 3.0.0-next.0

package/src/component/FluxSegmentedControl.vue

@@ -0,0 +1,77 @@
+<template>
+    <nav
+        ref="control"
+        :class="isFill ? $style.segmentedControlFill : $style.segmentedControlInline">
+        <div
+            v-if="activeItemWidth > 0"
+            :class="$style.segmentedControlHighlight"
+            :style="{
+                left: `${activeItemX}px`,
+                width: `${activeItemWidth}px`
+            }"/>
+
+        <template v-for="(item, index) of items">
+            <div
+                v-if="index > 0"
+                :class="clsx(
+                    $style.segmentedControlSeparator,
+                    (index === modelValue || index === modelValue + 1) && $style.isActive
+                )"
+                role="separator"/>
+
+            <button
+                ref="items"
+                :class="clsx(
+                    $style.segmentedControlItem,
+                    index === modelValue && $style.isActive
+                )"
+                type="button"
+                @click="activate(index)">
+                <FluxIcon
+                    v-if="item.icon"
+                    :name="item.icon"
+                    :size="15"/>
+
+                <span>{{ item.label }}</span>
+            </button>
+        </template>
+    </nav>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxSegmentedControlItemObject } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { onMounted, onUpdated, ref, unref, useTemplateRef } from 'vue';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/SegmentedControl.module.scss';
+
+    const modelValue = defineModel<number>({
+        default: 0
+    });
+
+    defineProps<{
+        readonly isFill?: boolean;
+        readonly items: FluxSegmentedControlItemObject[];
+    }>();
+
+    const controlRef = useTemplateRef<HTMLElement>('control');
+    const itemRefs = useTemplateRef<HTMLButtonElement[]>('items');
+
+    const activeItemX = ref(0);
+    const activeItemWidth = ref(0);
+
+    onMounted(() => activate(unref(modelValue)));
+    onUpdated(() => activate(unref(modelValue)));
+
+    function activate(index: number): void {
+        const itemRef = itemRefs.value![index];
+        const {left: controlX} = controlRef.value!.getBoundingClientRect();
+        const {width, left: x} = itemRef.getBoundingClientRect();
+
+        activeItemX.value = x - controlX - 1;
+        activeItemWidth.value = width;
+        modelValue.value = index;
+    }
+</script>

package/src/component/FluxSegmentedView.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { defineComponent } from 'vue';
+
+    export default defineComponent({
+        props: {
+            index: Number
+        },
+        setup(props, {slots}) {
+            return () => {
+                const items = slots.default!();
+                return items[props.index!];
+            };
+        }
+    });
+</script>

package/src/component/FluxSeparator.vue

@@ -0,0 +1,19 @@
+<template>
+    <div
+        :class="direction === 'horizontal' ? $style.separatorHorizontal : $style.separatorVertical"
+        role="separator"
+        :aria-orientation="direction"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxDirection } from '@flux-ui/types';
+    import $style from '$flux/css/component/Divider.module.scss';
+
+    const {
+        direction = 'horizontal'
+    } = defineProps<{
+        readonly direction?: FluxDirection;
+    }>();
+</script>

package/src/component/FluxSlideOver.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import { FluxSlideOverTransition } from '$flux/transition';
+    import { createDialogRenderer } from '$flux/util';
+    import $style from '$flux/css/component/Overlay.module.scss';
+
+    export default defineComponent({
+        emits: ['close'],
+        inheritAttrs: false,
+        props: {
+            isCloseable: {default: false, type: Boolean},
+            viewKey: {default: null, type: String}
+        },
+        setup(props, {attrs, emit, slots}) {
+            return createDialogRenderer(
+                attrs,
+                props,
+                emit,
+                slots,
+                $style.slideOver,
+                FluxSlideOverTransition
+            );
+        }
+    });
+</script>

package/src/component/FluxSnackbar.vue

@@ -0,0 +1,154 @@
+<template>
+    <div
+        v-if="isRendered"
+        :class="clsx(
+            color === 'gray' && $style.snackbarGray,
+            color === 'primary' && $style.snackbarPrimary,
+            color === 'danger' && $style.snackbarDanger,
+            color === 'info' && $style.snackbarInfo,
+            color === 'success' && $style.snackbarSuccess,
+            color === 'warning' && $style.snackbarWarning
+        )">
+        <div :class="$style.snackbarContent">
+            <FluxSpinner
+                v-if="isLoading"
+                :size="18"/>
+
+            <FluxIcon
+                v-else-if="icon"
+                :size="18"
+                :name="icon"/>
+
+            <div :class="$style.snackbarBody">
+                <div
+                    v-if="title"
+                    :class="$style.snackbarTitle">
+                    {{ title }}
+                </div>
+
+                <div
+                    v-if="message"
+                    :class="$style.snackbarMessage">
+                    {{ message }}
+                </div>
+
+                <FluxProgressBar
+                    v-if="progressIndeterminate || progressValue"
+                    :is-indeterminate="progressIndeterminate"
+                    :max="progressMax"
+                    :min="progressMin"
+                    :status="progressStatus"
+                    :value="progressValue"/>
+
+                <div
+                    v-if="subMessage"
+                    :class="$style.snackbarSubMessage">
+                    {{ subMessage }}
+                </div>
+            </div>
+        </div>
+
+        <div
+            v-if="hasActions"
+            :class="$style.snackbarActions">
+            <button
+                v-for="(actionLabel, actionKey) of actions"
+                :key="actionKey"
+                :class="$style.snackbarAction"
+                tabindex="-1"
+                type="button"
+                @click="onAction(actionKey)">
+                <span>{{ actionLabel }}</span>
+            </button>
+        </div>
+
+        <FluxAction
+            v-if="isCloseable"
+            icon="xmark"
+            @click="onClose()"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxIconName, FluxSnackbarObject } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, getCurrentInstance, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+    import { addSnackbar, removeSnackbar, updateSnackbar } from '$flux/data';
+    import FluxAction from './FluxAction.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxProgressBar from './FluxProgressBar.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Snackbar.module.scss';
+
+    const emit = defineEmits<{
+        action: [string];
+        close: [];
+    }>();
+
+    const {
+        actions,
+        color = 'gray',
+        isRendered
+    } = defineProps<{
+        readonly actions?: Record<string, string>;
+        readonly color?: FluxColor;
+        readonly icon?: FluxIconName;
+        readonly isCloseable?: boolean;
+        readonly isLoading?: boolean;
+        readonly isRendered?: boolean;
+        readonly message?: string;
+        readonly progressIndeterminate?: boolean;
+        readonly progressMax?: number;
+        readonly progressMin?: number;
+        readonly progressStatus?: string;
+        readonly progressValue?: number;
+        readonly subMessage?: string;
+        readonly title?: string;
+    }>();
+
+    const instance = getCurrentInstance()!;
+
+    const id = ref<number | null>(null);
+
+    const hasActions = computed(() => actions && Object.entries(actions).length > 0);
+
+    onBeforeUnmount(() => {
+        if (id.value) {
+            removeSnackbar(id.value);
+        }
+    });
+
+    function onAction(actionKey: string): void {
+        emit('action', actionKey);
+    }
+
+    function onClose(): void {
+        emit('close');
+    }
+
+    watchEffect(() => {
+        if (!id.value) {
+            return;
+        }
+
+        updateSnackbar(id.value, instance.props);
+    });
+
+    watch(() => isRendered, () => {
+        if (isRendered) {
+            if (id.value) {
+                removeSnackbar(id.value);
+            }
+
+            return;
+        }
+
+        let spec: Omit<FluxSnackbarObject, 'id'> = instance.props;
+        spec.onAction = onAction;
+        spec.onClose = onClose;
+
+        id.value = addSnackbar(spec);
+    }, {immediate: true});
+</script>

package/src/component/FluxSnackbarProvider.vue

@@ -0,0 +1,34 @@
+<template>
+    <TransitionGroup
+        name="flux-snackbars"
+        tag="div"
+        :class="$style.snackbars"
+        :enter-active-class="$style.snackbarsEnterActive"
+        :enter-from-class="$style.snackbarsEnterFrom"
+        :leave-active-class="$style.snackbarsLeaveActive"
+        :leave-to-class="$style.snackbarsLeaveTo"
+        :move-class="$style.snackbarsMove">
+        <FluxSnackbar
+            v-for="snackbar of snackbars.toReversed()"
+            :key="snackbar.id"
+            :="snackbar"
+            is-rendered
+            @action="onAction(snackbar)"
+            @close="() => snackbar.onClose?.()"/>
+    </TransitionGroup>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxSnackbarObject } from '@flux-ui/types';
+    import { useFluxStore } from '$flux/data';
+    import FluxSnackbar from './FluxSnackbar.vue';
+    import $style from '$flux/css/component/Snackbar.module.scss';
+
+    const {snackbars} = useFluxStore();
+
+    function onAction(snackbar: FluxSnackbarObject): (actionKey: string) => void {
+        return actionKey => snackbar.onAction?.(actionKey);
+    }
+</script>

package/src/component/FluxSpacer.vue

@@ -0,0 +1,9 @@
+<template>
+    <div :class="$style.spacer"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Layout.module.scss';
+</script>

package/src/component/FluxSpacing.vue

@@ -0,0 +1,32 @@
+<template>
+    <div :style="{flex: `0 0 ${spacings[size]}px`}"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    const spacings = [
+        0,
+        3,
+        6,
+        9,
+        12,
+        15,
+        18,
+        24,
+        30,
+        36,
+        42,
+        48,
+        54,
+        60,
+        72,
+        84,
+        90,
+        120
+    ] as const;
+
+    defineProps<{
+        readonly size: keyof typeof spacings;
+    }>();
+</script>

package/src/component/FluxSpinner.vue

@@ -0,0 +1,48 @@
+<template>
+    <svg
+        :class="$style.spinner"
+        viewBox="0 0 24 24"
+        :style="{
+            fontSize: size && `${size}px`
+        }">
+        <circle
+            :class="$style.spinnerTrack"
+            cx="12"
+            cy="12"
+            r="10"
+            fill="transparent"
+            stroke-width="4"/>
+
+        <circle
+            :class="$style.spinnerEffect"
+            cx="12"
+            cy="12"
+            r="10"
+            fill="transparent"
+            stroke-width="4"
+            stroke-dasharray="21 45"
+            stroke-dashoffset="30"
+            stroke-linecap="round"/>
+
+        <circle
+            :class="$style.spinnerValue"
+            cx="12"
+            cy="12"
+            r="10"
+            fill="transparent"
+            stroke-width="4"
+            stroke-dasharray="21 45"
+            stroke-dashoffset="30"
+            stroke-linecap="round"/>
+    </svg>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Spinner.module.scss';
+
+    defineProps<{
+        readonly size?: number;
+    }>();
+</script>

package/src/component/FluxSplitButton.vue

@@ -0,0 +1,61 @@
+<template>
+    <FluxFlyout
+        :direction="flyoutDirection"
+        :is-auto-width="flyoutIsAutoWidth"
+        :margin="flyoutMargin"
+        :width="flyoutWidth">
+        <template #opener="{close, open, toggle}">
+            <div :class="$style.buttonGroup">
+                <slot
+                    v-bind="{close, open, toggle}"
+                    name="button"/>
+
+                <FluxSecondaryButton
+                    :icon-leading="buttonIcon"
+                    @click="open"/>
+            </div>
+        </template>
+
+        <template #default="bindings">
+            <slot
+                v-bind="bindings"
+                name="flyout"/>
+        </template>
+    </FluxFlyout>
+</template>
+
+<script
+    setup
+    lang="ts">
+    import type { FluxDirection, FluxIconName } from '@flux-ui/types';
+    import FluxFlyout from './FluxFlyout.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '$flux/css/component/Button.module.scss';
+
+    const {
+        buttonIcon = 'ellipsis-h'
+    } = defineProps<{
+        readonly buttonIcon?: FluxIconName;
+        readonly flyoutDirection?: FluxDirection;
+        readonly flyoutIsAutoWidth?: boolean;
+        readonly flyoutMargin?: number;
+        readonly flyoutWidth?: number | string;
+    }>();
+
+    defineSlots<{
+        button(props: {
+            close(): void;
+            open(): void;
+            toggle(): void;
+        }): any;
+
+        flyout(props: {
+            close(): void;
+
+            readonly paneX: number;
+            readonly paneY: number;
+            readonly openerWidth: number;
+            readonly openerHeight: number;
+        }): any;
+    }>();
+</script>

package/src/component/FluxStack.vue

@@ -0,0 +1,40 @@
+<template>
+    <Component
+        :is="tag ?? 'div'"
+        :class="clsx(
+            direction === 'horizontal' && $style.stackHorizontal,
+            direction === 'vertical' && $style.stackVertical,
+            isCentered && $style.isCentered,
+            isFill && $style.isFill,
+            isWrapping && $style.isWrapping
+        )"
+        :style="{
+            '--gap': gap && `${gap}px`
+        }">
+        <slot/>
+    </Component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxDirection } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import $style from '$flux/css/component/Layout.module.scss';
+
+    const {
+        direction = 'vertical',
+        gap = 30
+    } = defineProps<{
+        readonly direction?: FluxDirection;
+        readonly gap?: number;
+        readonly isCentered?: boolean;
+        readonly isFill?: boolean;
+        readonly isWrapping?: boolean;
+        readonly tag?: keyof HTMLElementTagNameMap;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxStatistic.vue

@@ -0,0 +1,68 @@
+<template>
+    <FluxPane
+        :class="clsx(
+            direction === 'horizontal' && $style.statisticHorizontal,
+            direction === 'vertical' && $style.statisticVertical,
+            color === 'gray' && $style.isGray,
+            color === 'primary' && $style.isPrimary,
+            color === 'danger' && $style.isDanger,
+            color === 'info' && $style.isInfo,
+            color === 'success' && $style.isSuccess,
+            color === 'warning' && $style.isWarning
+        )">
+        <div :class="$style.statisticIcon">
+            <FluxIcon
+                :name="icon"
+                :size="24"/>
+        </div>
+
+        <div :class="$style.statisticData">
+            <span>{{ label }}</span>
+            <strong>{{ value }}</strong>
+        </div>
+
+        <div
+            v-if="changeIcon || changeValue"
+            :class="clsx(
+                $style.statisticChange,
+                changeColor === 'gray' && $style.isGray,
+                changeColor === 'primary' && $style.isPrimary,
+                changeColor === 'danger' && $style.isDanger,
+                changeColor === 'info' && $style.isInfo,
+                changeColor === 'success' && $style.isSuccess,
+                changeColor === 'warning' && $style.isWarning
+            )">
+            <span v-if="changeValue">{{ changeValue }}</span>
+
+            <FluxIcon
+                v-if="changeIcon"
+                :name="changeIcon"
+                :size="14"/>
+        </div>
+    </FluxPane>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPane from './FluxPane.vue';
+    import $style from '$flux/css/component/Statistic.module.scss';
+
+    const {
+        changeColor = 'gray',
+        color = 'gray',
+        direction = 'horizontal'
+    } = defineProps<{
+        readonly changeColor?: FluxColor;
+        readonly changeIcon?: FluxIconName;
+        readonly changeValue?: string;
+        readonly color?: FluxColor;
+        readonly direction?: FluxDirection;
+        readonly icon: FluxIconName;
+        readonly label: string;
+        readonly value: string;
+    }>();
+</script>

package/src/component/FluxStepper.vue

@@ -0,0 +1,69 @@
+<template>
+    <slot
+        v-bind="{activate, modelValue, steps}"
+        name="steps">
+        <FluxStepperSteps
+            :amount="steps"
+            :current="modelValue + 1"
+            @activate="activate"/>
+    </slot>
+
+    <slot
+        v-bind="{activate, modelValue, children, isTransitioningBack, steps, view}"
+        name="content">
+        <FluxWindowTransition :is-back="isTransitioningBack">
+            <FluxDynamicView
+                :key="modelValue"
+                :vnode="view"/>
+        </FluxWindowTransition>
+    </slot>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { FluxWindowTransition } from '$flux/transition';
+    import FluxDynamicView from './FluxDynamicView.vue';
+    import FluxStepperSteps from './FluxStepperSteps.vue';
+
+    const modelValue = defineModel<number>({
+        default: 0
+    });
+
+    const slots = defineSlots<{
+        default(): any;
+
+        content(props: {
+            activate(index: number): void;
+
+            readonly children: VNode[];
+            readonly isTransitioningBack: boolean;
+            readonly modelValue: number;
+            readonly steps: number;
+            readonly view: VNode;
+        }): any;
+
+        steps(props: {
+            activate(index: number): void;
+
+            readonly modelValue: number;
+            readonly steps: number;
+        }): any;
+    }>();
+
+    const isTransitioningBack = ref(false);
+
+    const children = computed(() => flattenVNodeTree(slots.default?.() ?? []));
+    const steps = computed(() => unref(children).length);
+    const view = computed(() => unref(children)[unref(modelValue)] ?? null);
+
+    function activate(index: number): void {
+        modelValue.value = index;
+    }
+
+    watch(modelValue, (newIndex, oldIndex) => {
+        isTransitioningBack.value = newIndex < oldIndex;
+    });
+</script>

package/src/component/FluxStepperStep.vue

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