@flux-ui/components 3.0.0-next.0

package/src/component/FluxBadge.vue

@@ -0,0 +1,84 @@
+<template>
+    <FluxPressable
+        :class="clsx(
+            color === 'gray' && $style.badgeGray,
+            color === 'primary' && $style.badgePrimary,
+            color === 'danger' && $style.badgeDanger,
+            color === 'info' && $style.badgeInfo,
+            color === 'success' && $style.badgeSuccess,
+            color === 'warning' && $style.badgeWarning
+        )"
+        :component-type="type"
+        :tabindex="tabindex"
+        :href="href"
+        :rel="rel"
+        :target="target"
+        :to="to"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <FluxSpinner
+            v-if="isLoading"
+            :class="$style.badgeIcon"
+            :size="16"/>
+
+        <span
+            v-else-if="dot"
+            :class="$style.badgeDot"/>
+
+        <FluxIcon
+            v-else-if="icon"
+            :class="$style.badgeIcon"
+            :size="16"
+            :name="icon"/>
+
+        <span :class="$style.badgeLabel">
+            {{ label }}
+        </span>
+
+        <button
+            v-if="type === 'none' && isDeletable"
+            :class="$style.badgeClose"
+            type="button"
+            @click="onDeleteClick()">
+            <FluxIcon name="xmark"/>
+        </button>
+    </FluxPressable>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPressable from './FluxPressable.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/Badge.module.scss';
+
+    const emit = defineEmits<FluxButtonEmits & {
+        delete: [];
+    }>();
+
+    const {
+        color = 'gray',
+        type = 'none'
+    } = defineProps<{
+        readonly color?: FluxColor;
+        readonly dot?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isDeletable?: boolean;
+        readonly isLoading?: boolean;
+        readonly label: string;
+        readonly type?: FluxPressableType;
+        readonly tabindex?: string | number;
+        readonly href?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    function onDeleteClick(): void {
+        emit('delete');
+    }
+</script>

package/src/component/FluxBadgeStack.vue

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

package/src/component/FluxBorderShine.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { flattenVNodeTree, orange600, pink600, purple600 } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { cloneVNode, defineComponent, Fragment, h, PropType } from 'vue';
+    import $style from '$flux/css/component/Visual.module.scss';
+
+    export default defineComponent({
+        inheritAttrs: false,
+        props: {
+            colors: {default: [purple600, 'transparent', orange600, 'transparent', pink600, 'transparent', purple600], type: Array as PropType<string[]>},
+            duration: {default: 9, type: Number},
+            offset: {default: 1, type: Number},
+            radius: {default: undefined, type: [String, Number] as PropType<string | number>},
+            width: {default: 2, type: Number}
+        },
+        setup(props, {attrs, slots}) {
+            return () => h(
+                Fragment,
+                flattenVNodeTree(slots.default?.() ?? []).map(vnode => cloneVNode(vnode, {
+                    ...attrs,
+                    class: clsx(
+                        attrs.class as string,
+                        $style.borderShine
+                    ),
+                    style: {
+                        '--shine-colors': props.colors.join(', '),
+                        '--shine-duration': props.duration,
+                        '--shine-offset': props.offset,
+                        '--shine-radius': props.radius,
+                        '--shine-width': props.width
+                    }
+                }))
+            );
+        }
+    });
+</script>

package/src/component/FluxBoxedIcon.vue

@@ -0,0 +1,36 @@
+<template>
+    <div
+        :class="clsx(
+            !color && $style.iconBoxedDefault,
+            color === 'gray' && $style.iconBoxedGray,
+            color === 'primary' && $style.iconBoxedPrimary,
+            color === 'danger' && $style.iconBoxedDanger,
+            color === 'info' && $style.iconBoxedInfo,
+            color === 'success' && $style.iconBoxedSuccess,
+            color === 'warning' && $style.iconBoxedWarning,
+        )"
+        :style="{
+            fontSize: size && `${size}px`
+        }">
+        <FluxIcon :name="name"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Icon.module.scss';
+
+    defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    defineProps<{
+        readonly color?: FluxColor;
+        readonly name: FluxIconName;
+        readonly size?: number;
+    }>();
+</script>

package/src/component/FluxButton.vue

@@ -0,0 +1,110 @@
+<template>
+    <FluxPressable
+        :component-type="type"
+        :class="clsx(
+            cssClass,
+            isFilled && $style.isFilled,
+            size === 'small' && $style.isSmall,
+            size === 'medium' && $style.isMedium,
+            size === 'large' && $style.isLarge,
+            size === 'xl' && $style.isXl
+        )"
+        :type="isSubmit ? 'submit' : 'button'"
+        :aria-disabled="disabled ? true : undefined"
+        :disabled="disabled ? true : undefined"
+        :tabindex="disabled ? -1 : tabindex"
+        :href="href"
+        :rel="rel"
+        :target="target"
+        :to="to"
+        @click="onClick"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave">
+        <slot name="before"/>
+
+        <slot name="iconLeading">
+            <FluxSpinner
+                v-if="isLoading && (iconLeading || !iconTrailing)"
+                :size="20"/>
+
+            <FluxIcon
+                v-else-if="iconLeading"
+                :class="cssClassIcon"
+                :name="iconLeading"/>
+        </slot>
+
+        <slot name="label">
+            <span
+                v-if="label"
+                :class="cssClassLabel">
+                {{ label }}
+            </span>
+        </slot>
+
+        <slot name="iconTrailing">
+            <FluxSpinner
+                v-if="isLoading && (!iconLeading && iconTrailing)"
+                :size="20"/>
+
+            <FluxIcon
+                v-else-if="iconTrailing"
+                :class="cssClassIcon"
+                :name="iconTrailing"/>
+        </slot>
+
+        <slot name="after"/>
+    </FluxPressable>
+</template>
+
+<script lang="ts">
+    export const SLOTS = ['default', 'after', 'before', 'iconLeading', 'iconTrailing', 'label'] as const;
+</script>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { toRef, unref } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPressable from './FluxPressable.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import $style from '$flux/css/component/base/Button.module.scss';
+
+    const emit = defineEmits<FluxButtonEmits>();
+
+    const {
+        disabled: componentDisabled,
+        isLoading,
+        size = 'medium',
+        tabindex = 0,
+        type = 'button'
+    } = defineProps<FluxButtonProps & {
+        readonly cssClass: string;
+        readonly cssClassIcon: string;
+        readonly cssClassLabel: string;
+    }>();
+
+    defineSlots<FluxButtonSlots>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+
+    function onClick(evt: MouseEvent): void {
+        if (unref(disabled) || isLoading) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+
+        emit('click', evt);
+    }
+
+    function onMouseEnter(evt: MouseEvent): void {
+        emit('mouseenter', evt);
+    }
+
+    function onMouseLeave(evt: MouseEvent): void {
+        emit('mouseleave', evt);
+    }
+</script>

package/src/component/FluxButtonGroup.vue

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

package/src/component/FluxButtonStack.vue

@@ -0,0 +1,28 @@
+<template>
+    <FluxStack
+        :direction="direction"
+        :gap="gap"
+        :is-fill="isFill">
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxDirection } from '@flux-ui/types';
+    import FluxStack from './FluxStack.vue';
+
+    const {
+        direction = 'horizontal',
+        gap = 9
+    } = defineProps<{
+        readonly direction?: FluxDirection;
+        readonly gap?: number;
+        readonly isFill?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxCalendar.vue

@@ -0,0 +1,254 @@
+<template>
+    <div :class="$style.calendar">
+        <FluxActionBar :class="$style.calendarActions">
+            <template #primary>
+                <div
+                    :class="$style.calendarCurrent"
+                    role="presentation">
+                    <FluxFlyout :width="300">
+                        <template #opener="{open}">
+                            <button
+                                :class="$style.calendarCurrentMonth"
+                                type="button"
+                                @click="open">
+                                {{ viewMonth }}
+                            </button>
+                        </template>
+
+                        <template #default="{close}">
+                            <div :class="$styleDatePicker.datePickerMonths">
+                                <template
+                                    v-for="month of months"
+                                    :key="month">
+                                    <FluxSecondaryButton
+                                        :label="month.label"
+                                        tabindex="-1"
+                                        @click="setViewMonth(month.date, close)"/>
+                                </template>
+                            </div>
+                        </template>
+                    </FluxFlyout>
+
+                    <FluxFlyout :width="300">
+                        <template #opener="{open}">
+                            <button
+                                :class="$style.calendarCurrentYear"
+                                type="button"
+                                @click="open">
+                                {{ viewYear }}
+                            </button>
+                        </template>
+
+                        <template #default="{close}">
+                            <div :class="$styleDatePicker.datePickerYears">
+                                <FluxSecondaryButton
+                                    icon-leading="angle-left"
+                                    tabindex="-1"
+                                    @click="previousYears"/>
+
+                                <template
+                                    v-for="year of years"
+                                    :key="year">
+                                    <FluxSecondaryButton
+                                        :label="year.toString()"
+                                        tabindex="-1"
+                                        @click="setViewYear(year, close)"/>
+                                </template>
+
+                                <FluxSecondaryButton
+                                    icon-leading="angle-right"
+                                    tabindex="-1"
+                                    @click="nextYears"/>
+                            </div>
+                        </template>
+                    </FluxFlyout>
+                </div>
+            </template>
+
+            <template #actionsEnd>
+                <FluxSecondaryButton
+                    :label="translate('flux.today')"
+                    @click="setToday"/>
+
+                <FluxButtonGroup>
+                    <FluxSecondaryButton
+                        icon-leading="angle-left"
+                        @click="previousMonth"/>
+
+                    <FluxSecondaryButton
+                        icon-leading="angle-right"
+                        @click="nextMonth"/>
+                </FluxButtonGroup>
+            </template>
+        </FluxActionBar>
+
+        <FluxWindowTransition :is-back="isTransitioningToPast">
+            <div
+                :key="viewDate.month"
+                :class="$style.calendarCells"
+                role="grid">
+                <template v-for="day of days">
+                    <div :class="$style.calendarDay">
+                        {{ day }}
+                    </div>
+                </template>
+
+                <template v-for="date of dates">
+                    <div
+                        :class="clsx(
+                            $style.calendarEntry,
+                            viewDate.month !== date.month && $style.isDisabled
+                        )"
+                        role="gridcell">
+                        <div :class="$style.calendarEvents">
+                            <VNodeRenderer
+                                v-for="event of getEventsForDate(date)"
+                                :class="clsx(
+                                    event.type === 'single' && $style.isSingle,
+                                    event.type === 'start' && $style.isStart,
+                                    event.type === 'end' && $style.isEnd,
+                                    event.type === 'middle' && $style.isMiddle
+                                )"
+                                :style="{
+                                    gridRow: event.index
+                                }"
+                                :vnode="event.vnode"/>
+                        </div>
+
+                        <span :class="$style.calendarEntryDate">
+                            {{ date.toLocaleString({day: 'numeric'}) }}
+                        </span>
+                    </div>
+                </template>
+            </div>
+        </FluxWindowTransition>
+
+        <div
+            v-if="isLoading"
+            :class="$style.calendarLoader">
+            <FluxSpinner/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree, getComponentName, getComponentProps, useCalendar, useCalendarMonthSwitcher, useCalendarYearSwitcher } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { DateTime } from 'luxon';
+    import { computed, unref, VNode, watch } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import { FluxWindowTransition } from '$flux/transition';
+    import { VNodeRenderer } from './primitive';
+    import FluxActionBar from './FluxActionBar.vue';
+    import FluxButtonGroup from './FluxButtonGroup.vue';
+    import FluxFlyout from './FluxFlyout.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxSpinner from '$flux/component/FluxSpinner.vue';
+    import $style from '$flux/css/component/Calendar.module.scss';
+    import $styleDatePicker from '$flux/css/component/DatePicker.module.scss';
+
+    type Event = {
+        readonly index: number;
+        readonly type: 'start' | 'end' | 'middle' | 'single';
+        readonly vnode: VNode;
+    };
+
+    const emit = defineEmits<{
+        navigate: [DateTime, DateTime, DateTime];
+    }>();
+
+    const {
+        initialDate = DateTime.now()
+    } = defineProps<{
+        readonly initialDate?: DateTime;
+        readonly isLoading?: boolean;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): any;
+    }>();
+
+    const {
+        isTransitioningToPast,
+        viewDate,
+        viewMonth,
+        viewYear,
+        dates,
+        days,
+        nextMonth,
+        previousMonth,
+        setViewDate
+    } = useCalendar(initialDate, {
+        weekDayLength: 'long'
+    });
+
+    const {
+        months
+    } = useCalendarMonthSwitcher(viewDate, 'short');
+
+    const {
+        years,
+        next: nextYears,
+        previous: previousYears
+    } = useCalendarYearSwitcher(viewDate);
+
+    const translate = useTranslate();
+
+    const eventNodes = computed(() => flattenVNodeTree(slots.default?.() ?? []));
+    const events = computed(() => unref(eventNodes)
+        .filter(en => getComponentName(en) === 'FluxCalendarEvent'));
+
+    function getEventsForDate(forDate: DateTime): Event[] {
+        const forDateStr = forDate.toSQLDate();
+
+        return unref(events)
+            .map<Event | null>((vnode, index) => {
+                const {date} = getComponentProps<{ date: DateTime | [DateTime, DateTime]; }>(vnode);
+
+                if (Array.isArray(date)) {
+                    if (forDate < date[0] || forDate > date[1]) {
+                        return null;
+                    }
+
+                    return {
+                        type: forDateStr === date[0].toSQLDate() ? 'start' : (forDateStr === date[1].toSQLDate() ? 'end' : 'middle'),
+                        index,
+                        vnode
+                    };
+                }
+
+                if (forDateStr !== date.toSQLDate()) {
+                    return null;
+                }
+
+                return {
+                    type: 'single',
+                    index,
+                    vnode
+                };
+            })
+            .filter(e => e !== null);
+    }
+
+    function setToday(): void {
+        setViewDate(DateTime.now());
+    }
+
+    function setViewMonth(month: DateTime, close: () => void): void {
+        close();
+        setViewDate(month);
+    }
+
+    function setViewYear(year: number, close: () => void): void {
+        close();
+        setViewDate(unref(viewDate).set({year}));
+    }
+
+    watch([viewDate, dates], ([viewDate, dates]) => {
+        emit('navigate', viewDate, dates[0], dates[dates.length - 1]);
+    }, {immediate: true});
+
+    watch(() => initialDate, setViewDate);
+</script>

package/src/component/FluxCalendarEvent.vue

@@ -0,0 +1,41 @@
+<template>
+    <FluxTooltip>
+        <template #content>
+            <slot name="tooltip">
+                {{ label }}
+            </slot>
+        </template>
+
+        <button
+            :class="$style.calendarEvent"
+            type="button"
+            @click="onClick">
+            <span>{{ label }}</span>
+        </button>
+    </FluxTooltip>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { DateTime } from 'luxon';
+    import FluxTooltip from './FluxTooltip.vue';
+    import $style from '$flux/css/component/Calendar.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    defineProps<{
+        readonly date: DateTime | [DateTime, DateTime];
+        readonly label: string;
+    }>();
+
+    defineSlots<{
+        tooltip(): any;
+    }>();
+
+    function onClick(evt: MouseEvent): void {
+        emit('click', evt);
+    }
+</script>

package/src/component/FluxCheckbox.vue

@@ -0,0 +1,60 @@
+<template>
+    <label
+        :class="$style.checkbox"
+        :for="id">
+        <input
+            v-model="modelValue"
+            ref="input"
+            type="checkbox"
+            :class="$style.checkboxNative"
+            :id="id"/>
+
+        <button
+            :class="$style.checkboxElement"
+            role="checkbox"
+            :aria-checked="modelValue ?? false">
+            <FluxIcon
+                v-if="isIndeterminate"
+                name="minus"
+                :size="16"/>
+
+            <FluxIcon
+                v-else
+                name="check"
+                :size="16"/>
+        </button>
+
+        <span
+            v-if="label"
+            :class="$style.checkboxLabel">
+            {{ label }}
+        </span>
+    </label>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { computed, unref, useTemplateRef, watchEffect } from 'vue';
+    import { useFormFieldInjection } from '$flux/composable';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const modelValue = defineModel<boolean | null>({
+        default: false
+    });
+
+    defineProps<{
+        readonly label?: string;
+    }>();
+
+    const inputRef = useTemplateRef('input');
+    const {id} = useFormFieldInjection();
+
+    const isIndeterminate = computed(() => unref(modelValue) === null);
+
+    watchEffect(() => {
+        const input = unref(inputRef);
+        input && (input.indeterminate = unref(isIndeterminate));
+    });
+</script>