@flux-ui/components 3.0.0-next.0

package/src/component/FluxNotice.vue

@@ -0,0 +1,79 @@
+<template>
+    <div
+        :class="clsx(
+            color === 'gray' && $style.noticeGray,
+            color === 'primary' && $style.noticePrimary,
+            color === 'danger' && $style.noticeDanger,
+            color === 'info' && $style.noticeInfo,
+            color === 'success' && $style.noticeSuccess,
+            color === 'warning' && $style.noticeWarning,
+            isCenter && $style.isCenter,
+            isFluid && $style.isFluid
+        )"
+        role="alert">
+        <FluxSpinner
+            v-if="isLoading"
+            :class="$style.noticePrefix"/>
+
+        <FluxIcon
+            v-if="icon && !isLoading"
+            :class="$style.noticePrefix"
+            :name="icon"/>
+
+        <div :class="$style.noticeBody">
+            <p
+                v-if="title"
+                :class="$style.noticeTitle">
+                {{ title }}
+            </p>
+            <p
+                v-if="message"
+                :class="$style.noticeMessage">
+                {{ message }}
+            </p>
+            <slot/>
+        </div>
+
+        <slot name="end"/>
+
+        <button
+            v-if="isCloseable"
+            :class="$style.noticeClose"
+            type="button"
+            @click="emit('close')">
+            <FluxIcon name="xmark"/>
+        </button>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Notice.module.scss';
+
+    const emit = defineEmits<{
+        close: [];
+    }>();
+
+    const {
+        color = 'gray'
+    } = defineProps<{
+        readonly color?: FluxColor;
+        readonly icon?: FluxIconName;
+        readonly isCenter?: boolean;
+        readonly isCloseable?: boolean;
+        readonly isFluid?: boolean;
+        readonly isLoading?: boolean;
+        readonly message?: string;
+        readonly title?: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+        end(): any;
+    }>();
+</script>

package/src/component/FluxNoticeStack.vue

@@ -0,0 +1,17 @@
+<template>
+    <FluxStack
+        direction="vertical"
+        :gap="6">
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxStack from './FluxStack.vue';
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxOverlay.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { FluxSize } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { defineComponent, PropType } from 'vue';
+    import { FluxOverlayTransition } 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},
+            size: {default: 'small', type: String as PropType<FluxSize>}
+        },
+        setup(props, {attrs, emit, slots}) {
+            return createDialogRenderer(
+                attrs,
+                props,
+                emit,
+                slots,
+                clsx(
+                    props.size === 'small' && $style.overlaySmall,
+                    props.size === 'medium' && $style.overlayMedium,
+                    props.size === 'large' && $style.overlayLarge
+                ),
+                FluxOverlayTransition
+            );
+        }
+    });
+</script>

package/src/component/FluxPagination.vue

@@ -0,0 +1,148 @@
+<template>
+    <FluxButtonGroup
+        :class="$style.pagination"
+        role="navigation"
+        :aria-label="translate('flux.pagination')">
+        <FluxSecondaryButton
+            v-if="arrows || isCompact"
+            :disabled="isPreviousDisabled"
+            icon-leading="angle-left"
+            :aria-label="translate('flux.previous')"
+            @click="previous"/>
+
+        <template
+            v-if="!isCompact"
+            v-for="p of visiblePages">
+            <FluxSecondaryButton
+                v-if="p === 'dots'"
+                disabled
+                icon-leading="ellipsis-h"/>
+
+            <FluxPrimaryButton
+                v-else-if="p === page"
+                :label="`${p}`"
+                aria-current="page"/>
+
+            <FluxSecondaryButton
+                v-else
+                :label="`${p}`"
+                @click="navigate(p)"/>
+        </template>
+
+        <template v-else>
+            <FluxSecondaryButton
+                :class="$style.paginationCurrentZZ"
+                @click="prompt"
+                #before>
+                <strong>{{ page }}</strong>
+                <span>/</span>
+                <span>{{ pages }}</span>
+            </FluxSecondaryButton>
+        </template>
+
+        <FluxSecondaryButton
+            v-if="arrows || isCompact"
+            :disabled="isNextDisabled"
+            icon-leading="angle-right"
+            :aria-label="translate('flux.next')"
+            @click="next"/>
+    </FluxButtonGroup>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { computed, unref } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import { showPrompt } from '$flux/data';
+    import FluxButtonGroup from './FluxButtonGroup.vue';
+    import FluxPrimaryButton from './FluxPrimaryButton.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '$flux/css/component/Pagination.module.scss';
+
+    const emit = defineEmits<{
+        navigate: [number];
+    }>();
+
+    const {
+        page,
+        perPage,
+        total
+    } = defineProps<{
+        readonly arrows?: boolean;
+        readonly isCompact?: boolean;
+        readonly page: number;
+        readonly perPage: number;
+        readonly total: number;
+    }>();
+
+    const translate = useTranslate();
+
+    const pages = computed(() => Math.ceil(total / perPage));
+    const isNextDisabled = computed(() => page >= unref(pages));
+    const isPreviousDisabled = computed(() => page <= 1);
+
+    const visiblePages = computed(() => {
+        if (unref(pages) === 0) {
+            return [];
+        }
+
+        const sizes = {
+            end: 1,
+            middle: 1
+        } as const;
+
+        let dots = false;
+        let visible: (number | 'dots')[] = [];
+
+        if (unref(pages) === (sizes.end + sizes.middle + 2)) {
+            for (let n = 1; n <= unref(pages); ++n) {
+                visible.push(n);
+            }
+        } else {
+            for (let n = 1; n <= unref(pages); ++n) {
+                if (page === n) {
+                    dots = true;
+                    visible.push(n);
+                } else if (n <= sizes.end || (n >= page - sizes.middle && n <= page + sizes.middle) || n > unref(pages) - sizes.end) {
+                    dots = true;
+                    visible.push(n);
+                } else if (dots) {
+                    dots = false;
+                    visible.push('dots');
+                }
+            }
+        }
+
+        return visible;
+    });
+
+    function navigate(page: number): void {
+        emit('navigate', page);
+    }
+
+    function next(): void {
+        navigate(page + 1);
+    }
+
+    function previous(): void {
+        navigate(page - 1);
+    }
+
+    async function prompt(): Promise<void> {
+        const pageStr = await showPrompt({
+            icon: 'ellipsis',
+            title: translate('flux.paginationNavigateTitle'),
+            message: translate('flux.paginationNavigateMessage'),
+            fieldLabel: translate('flux.paginationNavigatePage')
+        });
+
+        const page = Number(pageStr);
+
+        if (isNaN(page) || page > unref(pages) || page <= 0) {
+            return;
+        }
+
+        navigate(page);
+    }
+</script>

package/src/component/FluxPaginationBar.vue

@@ -0,0 +1,81 @@
+<template>
+    <FluxStack :class="$style.paginationBar">
+        <FluxFormInputGroup>
+            <FluxFormInputAddition>
+                <span>{{ translate('flux.rowsPerPage') }}</span>
+            </FluxFormInputAddition>
+
+            <FluxFormSelect
+                v-model="limit"
+                :options="limitOptions"/>
+        </FluxFormInputGroup>
+
+        <FluxSpacer :class="$style.paginationBarSpacer"/>
+
+        <FluxFormInputGroup>
+            <FluxFormInputAddition>
+                <span>
+                    {{
+                        translate('flux.displayingOf', {
+                            from: (page - 1) * perPage + 1,
+                            to: Math.min(total, page * perPage),
+                            total: total
+                        })
+                    }}
+                </span>
+            </FluxFormInputAddition>
+
+            <FluxPagination
+                v-if="total > perPage"
+                arrows
+                is-compact
+                :page="page"
+                :per-page="perPage"
+                :total="total"
+                @navigate="$emit('navigate', $event)"/>
+        </FluxFormInputGroup>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormSelectOption } from '@flux-ui/types';
+    import { computed, ref, watch } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import FluxFormInputAddition from './FluxFormInputAddition.vue';
+    import FluxFormInputGroup from './FluxFormInputGroup.vue';
+    import FluxFormSelect from './FluxFormSelect.vue';
+    import FluxPagination from './FluxPagination.vue';
+    import FluxSpacer from './FluxSpacer.vue';
+    import FluxStack from './FluxStack.vue';
+    import $style from '$flux/css/component/Pagination.module.scss';
+
+    const emit = defineEmits<{
+        limit: [number];
+        navigate: [number];
+    }>();
+
+    const {
+        limits = [5, 10, 25, 50, 100],
+        perPage
+    } = defineProps<{
+        readonly limits?: number[];
+        readonly page: number;
+        readonly perPage: number;
+        readonly total: number;
+    }>();
+
+    const translate = useTranslate();
+
+    const limit = ref(perPage);
+
+    const limitOptions = computed(() => limits.map<FluxFormSelectOption>(limit => ({
+        label: limit.toString(),
+        value: limit
+    })));
+
+    watch(limit, limit => emit('limit', limit));
+
+    watch(() => perPage, perPage => limit.value = perPage, {immediate: true});
+</script>

package/src/component/FluxPane.vue

@@ -0,0 +1,45 @@
+<template>
+    <div :class="CLASS_MAP[variant]">
+        <slot/>
+
+        <slot
+            v-if="isLoading"
+            name="loader">
+            <div :class="$style.paneLoader">
+                <FluxSpinner/>
+            </div>
+        </slot>
+
+        <div
+            v-if="tag"
+            :class="$style.paneTag">
+            {{ tag }}
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Pane.module.scss';
+
+    const CLASS_MAP = {
+        default: $style.paneDefault,
+        flat: $style.paneFlat,
+        well: $style.paneWell
+    } as const;
+
+    const {
+        variant = 'default'
+    } = defineProps<{
+        readonly isLoading?: boolean;
+        readonly tag?: string;
+        readonly variant?: 'default' | 'flat' | 'well';
+    }>();
+
+    defineSlots<{
+        default(): any;
+        loader(): any;
+    }>();
+</script>

package/src/component/FluxPaneBody.vue

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

package/src/component/FluxPaneDeck.vue

@@ -0,0 +1,24 @@
+<template>
+    <div :class="$style.paneDeck">
+        <FluxAutoGrid
+            :gap="0"
+            :min-column-width="minColumnWidth">
+            <slot/>
+        </FluxAutoGrid>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxAutoGrid from './FluxAutoGrid.vue';
+    import $style from '$flux/css/component/Pane.module.scss';
+
+    defineProps<{
+        readonly minColumnWidth: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxPaneFooter.vue

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

package/src/component/FluxPaneGroup.vue

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

package/src/component/FluxPaneHeader.vue

@@ -0,0 +1,44 @@
+<template>
+    <div :class="$style.paneHeader">
+        <slot name="before"/>
+
+        <FluxIcon
+            v-if="icon"
+            :class="$style.paneHeaderIcon"
+            :size="20"
+            :name="icon"/>
+
+        <div
+            v-if="title || subTitle"
+            :class="$style.paneHeaderCaption">
+            <strong v-if="title">
+                {{ title }}
+            </strong>
+
+            <span v-if="subTitle">
+                {{ subTitle }}
+            </span>
+        </div>
+
+        <slot name="after"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Pane.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly subTitle?: string;
+        readonly title?: string;
+    }>();
+
+    defineSlots<{
+        after(): any;
+        before(): any;
+    }>();
+</script>

package/src/component/FluxPaneIllustration.vue

@@ -0,0 +1,68 @@
+<template>
+    <div
+        :class="isMasked ? $style.paneIllustrationMasked : $style.paneIllustration"
+        :style="{
+            aspectRatio
+        }">
+        <div
+            :class="$style.paneIllustrationMagic"
+            :style="{
+                border: `1px solid ${borderColor}`
+            }">
+            <FluxGridPattern :stroke-dasharray="3"/>
+
+            <FluxAnimatedColors
+                :colors="animatedColors"
+                :opacity="animatedOpacity"
+                :seed="animatedSeed"/>
+        </div>
+
+        <div
+            v-if="slots.controlled"
+            :class="$style.paneIllustrationContentControlled">
+            <slot name="controlled"/>
+        </div>
+
+        <div
+            v-if="slots.default"
+            :class="$style.paneIllustrationContent">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { hexToRGB } from '@basmilius/utils';
+    import { computed } from 'vue';
+    import FluxAnimatedColors from './FluxAnimatedColors.vue';
+    import FluxGridPattern from './FluxGridPattern.vue';
+    import $style from '$flux/css/component/Pane.module.scss';
+
+    const {
+        animatedColors,
+        aspectRatio = 16 / 9
+    } = defineProps<{
+        readonly animatedColors: string[];
+        readonly animatedOpacity?: number;
+        readonly animatedSeed?: number;
+        readonly aspectRatio?: number;
+        readonly isMasked?: boolean;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): any;
+        controlled?(): any;
+    }>();
+
+    const borderColor = computed(() => {
+        if (!animatedColors || animatedColors.length === 0) {
+            return 'transparent';
+        }
+
+        const [r, g, b] = hexToRGB(animatedColors[0]);
+
+        return `rgb(${r} ${g} ${b} / .15)`;
+    });
+</script>

package/src/component/FluxPaneMedia.vue

@@ -0,0 +1,31 @@
+<template>
+    <div :class="isInset ? $style.paneMediaInset : $style.paneMedia">
+        <img
+            v-if="imageUrl"
+            :class="$style.paneMediaImage"
+            :style="{
+                objectPosition: `${focalPointX}% ${focalPointY}%`
+            }"
+            :src="imageUrl"
+            :alt="imageAlt">
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { computed } from 'vue';
+    import $style from '$flux/css/component/Pane.module.scss';
+
+    const {
+        imageFocalPoint
+    } = defineProps<{
+        readonly imageAlt?: string;
+        readonly imageFocalPoint?: [number, number];
+        readonly imageUrl?: string;
+        readonly isInset?: boolean;
+    }>();
+
+    const focalPointX = computed(() => imageFocalPoint?.[0] ?? 50);
+    const focalPointY = computed(() => imageFocalPoint?.[1] ?? 50);
+</script>

package/src/component/FluxPercentageBar.vue

@@ -0,0 +1,45 @@
+<template>
+    <div :class="$style.percentageBar">
+        <div :class="$style.percentageBarTrack">
+            <FluxTooltip v-for="item of items">
+                <template #content>
+                    <div :class="$style.percentageBarTooltip">
+                        <FluxIcon
+                            v-if="item.icon"
+                            :name="item.icon"
+                            :size="16"/>
+
+                        <span>{{ formatPercentage(item.value) }} {{ item.label }}</span>
+                    </div>
+                </template>
+
+                <div
+                    :class="$style.percentageBarSegment"
+                    :style="{
+                        backgroundColor: item.color,
+                        flexGrow: item.value
+                    }"/>
+            </FluxTooltip>
+        </div>
+
+        <FluxLegend
+            v-if="isLegendVisible"
+            :items="items"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { formatPercentage } from '@basmilius/utils';
+    import type { FluxPercentageBarItemObject } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxLegend from './FluxLegend.vue';
+    import FluxTooltip from './FluxTooltip.vue';
+    import $style from '$flux/css/component/PercentageBar.module.scss';
+
+    defineProps<{
+        readonly isLegendVisible?: boolean;
+        readonly items: FluxPercentageBarItemObject[];
+    }>();
+</script>