@flux-ui/components 3.0.0-next.0

package/src/component/FluxChip.vue

@@ -0,0 +1,57 @@
+<template>
+    <Component
+        :is="isSelectable ? 'button' : 'div'"
+        :class="clsx(
+            $style.chip,
+            isSelectable && $style.isSelectable,
+            isSelected && $style.isSelected
+        )"
+        @click="$emit('click', $event)">
+        <FluxFadeTransition v-if="isSelectable">
+            <FluxIcon
+                :key="selectableIcon"
+                :name="selectableIcon"
+                :size="16"/>
+        </FluxFadeTransition>
+
+        <FluxIcon
+            v-else-if="iconLeading"
+            :name="iconLeading"
+            :size="16"/>
+
+        <span>{{ label }}</span>
+
+        <FluxIcon
+            v-if="iconTrailing"
+            :name="iconTrailing"
+            :size="16"/>
+    </component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed } from 'vue';
+    import { FluxFadeTransition } from '$flux/transition';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Chip.module.scss';
+
+    defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        iconLeading,
+        isSelected
+    } = defineProps<{
+        readonly iconLeading?: FluxIconName;
+        readonly iconTrailing?: FluxIconName;
+        readonly isSelectable?: boolean;
+        readonly isSelected?: boolean;
+        readonly label: string;
+    }>();
+
+    const selectableIcon = computed<FluxIconName>(() => isSelected ? 'check' : (iconLeading ?? 'plus'));
+</script>

package/src/component/FluxClickablePane.vue

@@ -0,0 +1,61 @@
+<template>
+    <FluxPressable
+        :component-type="type"
+        :class="CLASS_MAP[variant]"
+        type="button"
+        :tabindex="tabindex"
+        :href="href"
+        :rel="rel"
+        :target="target"
+        :to="to">
+        <slot/>
+
+        <slot
+            v-if="isLoading"
+            name="loader">
+            <div :class="$style.paneLoader">
+                <FluxSpinner/>
+            </div>
+        </slot>
+
+        <div
+            v-if="tag"
+            :class="$style.paneTag">
+            {{ tag }}
+        </div>
+    </FluxPressable>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import FluxPressable from './FluxPressable.vue';
+    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';
+        readonly type?: FluxPressableType;
+        readonly tabindex?: string | number;
+        readonly href?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    defineSlots<{
+        default(): any;
+        loader(): any;
+    }>();
+</script>

package/src/component/FluxColorPicker.vue

@@ -0,0 +1,265 @@
+<template>
+    <div
+        :class="$style.colorPicker"
+        :style="{
+            '--pickerBackground': saturationPickerColor
+        }">
+        <CoordinatePicker
+            v-model="saturationValue"
+            :class="$style.colorPickerSaturation"
+            :max="1"
+            :min="0"
+            :step="0.0005"
+            @dragging="onDragging"/>
+
+        <FluxFormSlider
+            v-model="hue"
+            :class="$style.colorPickerHueSlider"
+            is-tooltip-disabled
+            :max="360"
+            :min="0"
+            :step="0.1"/>
+
+        <FluxFormSlider
+            v-if="isAlphaEnabled"
+            v-model="alpha"
+            :class="$style.colorPickerAlphaSlider"
+            is-tooltip-disabled
+            :max="1"
+            :min="0"
+            :step="0.001"/>
+
+        <div :class="$style.colorPickerValue">
+            <div
+                :class="$style.colorPickerPreview"
+                :style="{
+                '--color': rgb
+            }"/>
+
+            <FluxFormField
+                v-if="type === 'hex'"
+                label="Hex">
+                <FluxFormInput v-model.lazy="modelValue"/>
+            </FluxFormField>
+
+            <template v-else-if="type === 'rgb'">
+                <FluxFormField label="R">
+                    <FluxFormInput
+                        v-model.lazy="rgbInputR"
+                        :max="255"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+
+                <FluxFormField label="G">
+                    <FluxFormInput
+                        v-model.lazy="rgbInputG"
+                        :max="255"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+
+                <FluxFormField label="B">
+                    <FluxFormInput
+                        v-model.lazy="rgbInputB"
+                        :max="255"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+            </template>
+
+            <template v-else-if="type === 'hsv'">
+                <FluxFormField label="H">
+                    <FluxFormInput
+                        v-model.lazy="hsvInputH"
+                        :max="1"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+
+                <FluxFormField label="S">
+                    <FluxFormInput
+                        v-model.lazy="hsvInputS"
+                        :max="1"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+
+                <FluxFormField label="V">
+                    <FluxFormInput
+                        v-model.lazy="hsvInputV"
+                        :max="1"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+            </template>
+
+            <template v-else-if="type === 'hsl'">
+                <FluxFormField label="H">
+                    <FluxFormInput
+                        v-model.lazy="hslInputH"
+                        :max="360"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+
+                <FluxFormField label="S">
+                    <FluxFormInput
+                        v-model.lazy="hslInputS"
+                        :max="100"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+
+                <FluxFormField label="L">
+                    <FluxFormInput
+                        v-model.lazy="hslInputL"
+                        :max="100"
+                        :min="0"
+                        type="number"/>
+                </FluxFormField>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { hexToRGB, hslToHSV, hslToRGB, hsvToHSL, hsvToRGB, rgbToHEX, rgbToHSL, rgbToHSV } from '@basmilius/utils';
+    import { blue500 } from '@flux-ui/internals';
+    import { computed, ComputedRef, ref, unref, watch } from 'vue';
+    import CoordinatePicker from './primitive/CoordinatePicker.vue';
+    import FluxFormField from './FluxFormField.vue';
+    import FluxFormInput from './FluxFormInput.vue';
+    import FluxFormSlider from './FluxFormSlider.vue';
+    import $style from '$flux/css/component/Color.module.scss';
+
+    const modelValue = defineModel<string | [number, number, number]>({
+        default: blue500
+    });
+
+    const {
+        type = 'hex'
+    } = defineProps<{
+        readonly isAlphaEnabled?: boolean;
+        readonly type?: 'hex' | 'rgb' | 'hsl' | 'hsv';
+    }>();
+
+    const alpha = ref(1);
+    const hsv = ref<[number, number, number]>([0, 0, 0]);
+    const isDragging = ref(false);
+
+    const rgb = computed(() => {
+        const [r, g, b] = hsvToRGB(...unref(hsv));
+
+        return `rgb(${r} ${g} ${b} / ${unref(alpha)})`;
+    });
+
+    const hue = computed({
+        get: () => unref(hsv)[0] * 360,
+        set: value => hsv.value = [value / 360, hsv.value[1], hsv.value[2]]
+    });
+
+    const saturation = computed({
+        get: () => unref(hsv)[1],
+        set: value => hsv.value = [hsv.value[0], value, hsv.value[2]]
+    });
+
+    const value = computed({
+        get: () => 1 - unref(hsv)[2],
+        set: value => hsv.value = [hsv.value[0], hsv.value[1], 1 - value]
+    });
+
+    const saturationValue = computed({
+        get: (): [number, number] => [unref(saturation), unref(value)],
+        set: ([s, v]: [number, number]) => {
+            saturation.value = s;
+            value.value = v;
+        }
+    });
+
+    const saturationPickerColor = computed(() => {
+        const [r, g, b] = hsvToRGB(unref(hsv)[0], 1, 1);
+
+        return `rgb(${r} ${g} ${b})`;
+    });
+
+    const hslInputH = generateComputedInput(0, hsvToHSL, hslToHSV);
+    const hslInputS = generateComputedInput(1, hsvToHSL, hslToHSV);
+    const hslInputL = generateComputedInput(2, hsvToHSL, hslToHSV);
+
+    const hsvInputH = generateComputedInput(0);
+    const hsvInputS = generateComputedInput(1);
+    const hsvInputV = generateComputedInput(2);
+
+    const rgbInputR = generateComputedInput(0, hsvToRGB, rgbToHSV);
+    const rgbInputG = generateComputedInput(1, hsvToRGB, rgbToHSV);
+    const rgbInputB = generateComputedInput(2, hsvToRGB, rgbToHSV);
+
+    function onDragging(is: boolean): void {
+        isDragging.value = is;
+    }
+
+    function generateComputedInput(index: number, fromHSV?: (a: number, b: number, c: number) => [number, number, number], toHSV?: (a: number, b: number, c: number) => [number, number, number]): ComputedRef<number> {
+        return computed({
+            get: () => fromHSV?.(...unref(hsv))[index] ?? unref(hsv)[index],
+            set: value => {
+                const values = fromHSV?.(...unref(hsv)) ?? unref(hsv);
+                values[index] = value;
+                hsv.value = toHSV?.(...values) ?? values;
+            }
+        });
+    }
+
+    watch(modelValue, (modelValue, oldModelValue) => {
+        if (unref(isDragging)) {
+            return;
+        }
+
+        if (JSON.stringify(modelValue) === JSON.stringify(oldModelValue)) {
+            return;
+        }
+
+        const hex = type === 'hex' ? modelValue.toString() : '';
+        const values: [number, number, number] = type !== 'hex' ? modelValue as [number, number, number] : [0, 0, 0];
+
+        switch (type) {
+            case 'hex':
+                hsv.value = rgbToHSV(...hexToRGB(hex));
+                break;
+
+            case 'rgb':
+                hsv.value = rgbToHSV(...values);
+                break;
+
+            case 'hsl':
+                hsv.value = rgbToHSV(...hslToRGB(...values));
+                break;
+
+            case 'hsv':
+                hsv.value = [...values];
+                break;
+        }
+    }, {immediate: true});
+
+    watch(hsv, hsv => {
+        switch (type) {
+            case 'hex':
+                modelValue.value = rgbToHEX(...hsvToRGB(...hsv));
+                break;
+
+            case 'rgb':
+                modelValue.value = hsvToRGB(...hsv);
+                break;
+
+            case 'hsl':
+                modelValue.value = rgbToHSL(...hsvToRGB(...hsv));
+                break;
+
+            case 'hsv':
+                modelValue.value = [...hsv];
+                break;
+        }
+    });
+</script>

package/src/component/FluxColorSelect.vue

@@ -0,0 +1,81 @@
+<template>
+    <div :class="$style.colorSelect">
+        <button
+            v-for="color of colors"
+            :class="modelValue === color ? $style.colorSelectColorSelected : $style.colorSelectColorDeselected"
+            :style="{
+                '--color': color
+            }"
+            @click="select(color)">
+            <FluxIcon
+                :class="$style.colorSelectCheck"
+                name="check"
+                :size="16"/>
+        </button>
+
+        <FluxFlyout v-if="isCustomAllowed">
+            <template #opener="{open}">
+                <button
+                    :class="$style.colorSelectCustom"
+                    @click="open()">
+                    <FluxIcon
+                        name="ellipsis-h"
+                        :size="16"/>
+                </button>
+            </template>
+
+            <template #default="{close}">
+                <FluxColorPicker
+                    v-model="customColor"
+                    :class="$style.colorSelectCustomPicker"/>
+
+                <FluxPaneBody :class="$style.colorSelectButtons">
+                    <FluxSecondaryButton
+                        :label="t('flux.cancel')"
+                        @click="close()"/>
+
+                    <FluxPrimaryButton
+                        :label="t('flux.ok')"
+                        @click="select(customColor, close)"/>
+                </FluxPaneBody>
+            </template>
+        </FluxFlyout>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose500, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
+    import { ref, watch } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import FluxColorPicker from './FluxColorPicker.vue';
+    import FluxFlyout from './FluxFlyout.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPaneBody from './FluxPaneBody.vue';
+    import FluxPrimaryButton from './FluxPrimaryButton.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '$flux/css/component/Color.module.scss';
+
+    const modelValue = defineModel<string>({
+        default: '#000000'
+    });
+
+    const {
+        colors = [red500, orange500, amber500, yellow500, lime500, green500, emerald500, teal500, cyan500, sky500, blue500, indigo500, violet500, purple500, fuchsia500, pink500, rose500]
+    } = defineProps<{
+        readonly colors?: string[];
+        readonly isCustomAllowed?: boolean;
+    }>();
+
+    const t = useTranslate();
+
+    const customColor = ref('#000000');
+
+    function select(color: string, close?: () => void): void {
+        modelValue.value = color;
+        close?.();
+    }
+
+    watch(modelValue, value => customColor.value = value, {immediate: true});
+</script>

package/src/component/FluxComment.vue

@@ -0,0 +1,71 @@
+<template>
+    <div
+        :class="clsx(
+            $style.comment,
+            isTyping && $style.isTyping,
+            isReceived && $style.isReceived
+        )"
+        role="article">
+        <FluxAvatar
+            :alt="avatarAlt"
+            :fallback="avatarFallback"
+            :fallback-icon="avatarFallbackIcon"
+            :fallback-initials="avatarFallbackInitials"
+            :size="42"
+            :src="avatarSrc"/>
+
+        <div :class="$style.commentContent">
+            <div
+                v-if="isTyping"
+                :class="$style.commentTyping"/>
+            <slot v-else/>
+        </div>
+
+        <div :class="$style.commentFooter">
+            <span v-if="isReceived && postedBy">{{ postedBy }}</span>
+            <time
+                v-if="iso && relative && !isTyping"
+                :datetime="iso">
+                {{ isJustNowVisible ? translate('flux.justNow') : relative }}
+            </time>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import type { DateTime } from 'luxon';
+    import { computed } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import FluxAvatar from './FluxAvatar.vue';
+    import $style from '$flux/css/component/Comment.module.scss';
+
+    const {
+        avatarFallback = 'colorized',
+        avatarFallbackIcon = 'user',
+        postedOn
+    } = defineProps<{
+        readonly avatarAlt?: string;
+        readonly avatarFallback?: 'colorized' | 'neutral';
+        readonly avatarFallbackIcon?: FluxIconName;
+        readonly avatarFallbackInitials?: string;
+        readonly avatarSrc?: string;
+        readonly isReceived?: boolean;
+        readonly isTyping?: boolean;
+        readonly postedBy?: string;
+        readonly postedOn?: DateTime;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const translate = useTranslate();
+
+    const isJustNowVisible = computed(() => postedOn && Math.abs(postedOn.diffNow().as('seconds')) < 15);
+    const iso = computed(() => postedOn?.toISO() ?? null);
+    const relative = computed(() => postedOn?.toRelative() ?? null);
+</script>

package/src/component/FluxConfirm.vue

@@ -0,0 +1,42 @@
+<template>
+    <FluxPane>
+        <FluxPaneHeader
+            :icon="confirm.icon"
+            :title="confirm.title"/>
+
+        <FluxPaneBody v-html="confirm.message"/>
+
+        <FluxPaneFooter>
+            <FluxSpacer/>
+
+            <FluxSecondaryButton
+                :label="translate('flux.cancel')"
+                @click="confirm.onCancel()"/>
+
+            <FluxPrimaryButton
+                icon-leading="circle-check"
+                :label="translate('flux.ok')"
+                @click="confirm.onConfirm()"/>
+        </FluxPaneFooter>
+    </FluxPane>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxConfirmObject } from '@flux-ui/types';
+    import { useTranslate } from '$flux/composable/private';
+    import FluxPane from './FluxPane.vue';
+    import FluxPaneBody from './FluxPaneBody.vue';
+    import FluxPaneFooter from './FluxPaneFooter.vue';
+    import FluxPaneHeader from './FluxPaneHeader.vue';
+    import FluxPrimaryButton from './FluxPrimaryButton.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxSpacer from './FluxSpacer.vue';
+
+    defineProps<{
+        readonly confirm: FluxConfirmObject;
+    }>();
+
+    const translate = useTranslate();
+</script>

package/src/component/FluxContainer.vue

@@ -0,0 +1,23 @@
+<template>
+    <div
+        :class="$style.container"
+        :style="{'--gutter': `${gutter}px`}">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Layout.module.scss';
+
+    const {
+        gutter = 30
+    } = defineProps<{
+        readonly gutter?: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxDataTable.vue

@@ -0,0 +1,96 @@
+<template>
+    <FluxTable
+        :is-bordered="isBordered"
+        :is-hoverable="isHoverable"
+        :is-loading="isLoading"
+        :is-separated="isSeparated"
+        :is-striped="isStriped">
+        <template
+            v-if="'header' in slots"
+            #header>
+            <FluxTableRow>
+                <slot
+                    name="header"
+                    v-bind="{page, perPage, rows, total}"/>
+            </FluxTableRow>
+        </template>
+
+        <template
+            v-if="'footer' in slots"
+            #footer>
+            <FluxTableRow>
+                <slot
+                    name="footer"
+                    v-bind="{page, perPage, rows, total}"/>
+            </FluxTableRow>
+        </template>
+
+        <FluxTableRow
+            v-for="(row, index) of rows"
+            :key="uniqueKey ? row[uniqueKey] : index">
+            <template v-for="(_, name) of slots">
+                <slot
+                    v-if="name !== 'footer' && name !== 'header'"
+                    v-bind="{index, page, perPage, row, rows, total}"
+                    :name="name"/>
+            </template>
+        </FluxTableRow>
+    </FluxTable>
+</template>
+
+<script
+    lang="ts"
+    setup
+    generic="T extends Record<string, any>">
+    import { computed } from 'vue';
+    import FluxTable from './FluxTable.vue';
+    import FluxTableRow from './FluxTableRow.vue';
+
+    const {
+        isBordered = true,
+        isHoverable = false,
+        isLoading = false,
+        isSeparated = true,
+        isStriped = false,
+        dataSet,
+        perPage
+    } = defineProps<{
+        readonly dataSet: T[];
+        readonly isBordered?: boolean;
+        readonly isHoverable?: boolean;
+        readonly isLoading?: boolean;
+        readonly isSeparated?: boolean;
+        readonly isStriped?: boolean;
+        readonly page: number;
+        readonly perPage: number;
+        readonly total: number;
+        readonly uniqueKey?: string;
+    }>();
+
+    const slots = defineSlots<{
+        [key: string]: (props: {
+            readonly index: number;
+            readonly page: number;
+            readonly perPage: number;
+            readonly row: T;
+            readonly rows: T[];
+            readonly total: number;
+        }) => any;
+
+        footer(props: {
+            readonly page: number;
+            readonly perPage: number;
+            readonly rows: T[];
+            readonly total: number;
+        }): any;
+
+        header(props: {
+            readonly page: number;
+            readonly perPage: number;
+            readonly rows: T[];
+            readonly total: number;
+        }): any;
+    }>();
+
+    const rows = computed(() => dataSet.slice(0, perPage));
+</script>