@flux-ui/components 3.0.0-next.0

package/src/component/FluxPersona.vue

@@ -0,0 +1,48 @@
+<template>
+    <button
+        :class="$style.persona"
+        type="button"
+        @click="$emit('click', $event)">
+        <FluxAvatar
+            :alt="avatarAlt"
+            :fallback="avatarFallback"
+            :fallback-icon="avatarFallbackIcon"
+            :fallback-initials="avatarFallbackInitials"
+            :size="avatarSize"
+            :src="avatarSrc"/>
+
+        <template v-if="!isCompact">
+            <div :class="$style.personaDetails">
+                <strong>{{ name }}</strong>
+                <span v-if="title">{{ title }}</span>
+            </div>
+        </template>
+    </button>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxAvatar from './FluxAvatar.vue';
+    import $style from '$flux/css/component/Avatar.module.scss';
+
+    defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        avatarFallback = 'colorized',
+        avatarFallbackIcon = 'user'
+    } = defineProps<{
+        readonly avatarAlt?: string;
+        readonly avatarFallback?: 'colorized' | 'neutral';
+        readonly avatarFallbackIcon?: FluxIconName;
+        readonly avatarFallbackInitials?: string;
+        readonly avatarSize?: number;
+        readonly avatarSrc?: string;
+        readonly isCompact?: boolean;
+        readonly name: string;
+        readonly title?: string;
+    }>();
+</script>

package/src/component/FluxPlaceholder.vue

@@ -0,0 +1,56 @@
+<template>
+    <div
+        :class="clsx(
+            $style.placeholder,
+            isButton && $style.isButton,
+            variant === 'extended' && $style.isExtended,
+            variant === 'simple' && $style.isSimple,
+            variant === 'small' && $style.isSmall
+        )"
+        role="presentation"
+        @click="onClick">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.placeholderIcon"
+            :name="icon"/>
+
+        <div :class="$style.placeholderCaption">
+            <strong v-if="title">
+                {{ title }}
+            </strong>
+
+            <p v-if="message">
+                {{ message }}
+            </p>
+        </div>
+
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Placeholder.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        variant = 'extended'
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isButton?: boolean;
+        readonly message?: string;
+        readonly title?: string;
+        readonly variant?: 'extended' | 'simple' | 'small';
+    }>();
+
+    function onClick(evt: MouseEvent): void {
+        emit('click', evt);
+    }
+</script>

package/src/component/FluxPressable.vue

@@ -0,0 +1,77 @@
+<template>
+    <router-link
+        v-if="componentType === 'route'"
+        v-bind="$attrs"
+        :rel="rel"
+        :target="target"
+        :to="to"
+        @click="onClick($event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <slot/>
+    </router-link>
+
+    <a
+        v-else-if="componentType === 'link'"
+        v-bind="$attrs"
+        :href="href"
+        :rel="rel"
+        :target="target"
+        @click="onClick($event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <slot/>
+    </a>
+
+    <button
+        v-else-if="componentType === 'button'"
+        v-bind="$attrs"
+        @click="onClick($event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <slot/>
+    </button>
+
+    <div
+        v-else
+        v-bind="$attrs"
+        @click="onClick"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+        mouseenter: [MouseEvent];
+        mouseleave: [MouseEvent];
+    }>();
+
+    defineProps<{
+        readonly componentType?: FluxPressableType;
+        readonly href?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    function onClick(evt: MouseEvent, navigate?: (evt: MouseEvent) => void): void {
+        emit('click', evt);
+
+        if (evt.defaultPrevented) {
+            return;
+        }
+
+        navigate?.(evt);
+    }
+</script>

package/src/component/FluxPrimaryButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :css-class="$style.primaryButton"
+        :css-class-icon="$style.primaryButtonIcon"
+        :css-class-label="$style.primaryButtonLabel"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <template
+            v-for="slot of SLOTS"
+            #[slot]>
+            <slot :name="slot"/>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
+    import FluxButton, { SLOTS } from './FluxButton.vue';
+    import $style from '$flux/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxProgressBar.vue

@@ -0,0 +1,75 @@
+<template>
+    <FluxStack
+        :class="$style.progressBar"
+        :gap="6"
+        role="progressbar"
+        :aria-valuenow="value"
+        :aria-valuemax="max"
+        :aria-valuemin="min">
+        <div :class="isIndeterminate ? $style.progressBarTrackIndeterminate : $style.progressBarTrack">
+            <div
+                :class="$style.progressBarValue"
+                :style="{
+                    width: `${isIndeterminate ? 100 : position * 100}%`
+                }"/>
+        </div>
+
+        <div
+            v-if="status"
+            :class="$style.progressBarInfo">
+            <FluxFadeTransition>
+                <span
+                    :key="status"
+                    :class="$style.progressBarStatus">
+                    {{ status }}
+                </span>
+            </FluxFadeTransition>
+
+            <FluxFadeTransition>
+                <span
+                    v-if="!isIndeterminate"
+                    :class="$style.progressBarProgress">
+                    {{ progress }}
+                </span>
+            </FluxFadeTransition>
+        </div>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { computed, unref } from 'vue';
+    import { FluxFadeTransition } from '$flux/transition';
+    import FluxStack from './FluxStack.vue';
+    import $style from '$flux/css/component/Progress.module.scss';
+
+    const {
+        isIndeterminate,
+        max = 1,
+        min = 0,
+        value
+    } = defineProps<{
+        readonly isIndeterminate?: boolean;
+        readonly max?: number;
+        readonly min?: number;
+        readonly status?: string;
+        readonly value?: number;
+    }>();
+
+    const position = computed(() => {
+        if (isIndeterminate) {
+            return 0;
+        }
+
+        return ((value ?? min) - min) / (max - min);
+    });
+
+    const progress = computed(() => new Intl
+        .NumberFormat(navigator.language, {
+            style: 'percent',
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0
+        })
+        .format(unref(position) ?? 0));
+</script>

package/src/component/FluxPrompt.vue

@@ -0,0 +1,77 @@
+<template>
+    <FluxPane>
+        <FluxPaneHeader
+            :icon="prompt.icon"
+            :title="prompt.title"/>
+
+        <FluxPaneBody v-html="prompt.message"/>
+
+        <FluxPaneBody>
+            <FluxFormField :label="prompt.fieldLabel">
+                <FluxFormInput
+                    ref="input"
+                    v-model="value"
+                    :placeholder="prompt.fieldPlaceholder"
+                    :type="prompt.fieldType ?? 'text'"
+                    @keydown="onKeyDown"/>
+            </FluxFormField>
+        </FluxPaneBody>
+
+        <FluxPaneFooter>
+            <FluxSpacer/>
+
+            <FluxSecondaryButton
+                :label="translate('flux.cancel')"
+                @click="prompt.onCancel()"/>
+
+            <FluxPrimaryButton
+                :disabled="!hasValue"
+                icon-leading="circle-check"
+                :label="translate('flux.ok')"
+                @click="prompt.onConfirm(value)"/>
+        </FluxPaneFooter>
+    </FluxPane>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxPromptObject } from '@flux-ui/types';
+    import { computed, onMounted, ref, unref, useTemplateRef } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import FluxFormField from './FluxFormField.vue';
+    import FluxFormInput from './FluxFormInput.vue';
+    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';
+
+    const {
+        prompt
+    } = defineProps<{
+        readonly prompt: FluxPromptObject;
+    }>();
+
+    const inputRef = useTemplateRef('input');
+    const translate = useTranslate();
+
+    const value = ref('');
+
+    const hasValue = computed(() => unref(value).trim().length > 0);
+
+    onMounted(() => {
+        const input = unref(inputRef);
+        requestAnimationFrame(() => input?.$el.querySelector('input')?.focus());
+    });
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (!unref(hasValue) || evt.key !== 'Enter') {
+            return;
+        }
+
+        prompt.onConfirm(unref(value));
+    }
+</script>

package/src/component/FluxPublishButton.vue

@@ -0,0 +1,59 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconTrailing, isFilled, isLoading, label, size, to}"
+        :class="clsx(
+            !isDone && !isLoading && $style.isIdle,
+            isDone && $style.isDone,
+            isLoading && $style.isLoading
+        )"
+        :css-class="$style.publishButton"
+        :css-class-icon="$style.publishButtonIcon"
+        :css-class-label="$style.publishButtonLabel"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <template #iconLeading>
+            <div :class="$style.publishButtonAnimation">
+                <FluxIcon
+                    :class="$style.publishButtonCloud"
+                    name="cloud"/>
+
+                <FluxIcon
+                    :class="$style.publishButtonCloud"
+                    name="cloud"/>
+
+                <svg
+                    :class="$style.publishButtonAnimation"
+                    viewBox="0 0 512 512">
+                    <path
+                        :class="$style.publishButtonAnimationCircle"
+                        d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256 114.6 0 256 0s256 114.6 256 256ZM256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48Z"/>
+
+                    <path
+                        :class="$style.publishButtonAnimationArrow"
+                        d="M272.9 135.7c-4.6-4.9-11-7.7-17.7-7.7-7.7.3-14.1 2.9-17.7 7.8l-87.25 96a23.86 23.86 0 0 0-4.15 25.9c3.8 8.7 12.4 14.3 21 14.3h56l.9 88a24 24 0 0 0 24 24h16c13.25 0 23.1-10.75 23.1-24v-88h56c9.53 0 18.16-5.66 22-14.38a24.03 24.03 0 0 0-4.38-25.91L272.9 135.7Z"/>
+
+                    <path
+                        :class="$style.publishButtonAnimationCheck"
+                        d="M243.8 339.8a28.07 28.07 0 0 1-39.6 0l-64-64a28.07 28.07 0 0 1 0-39.6 28.07 28.07 0 0 1 39.6 0l44.2 44.2 108.2-108.2a28.07 28.07 0 0 1 39.6 0 28.07 28.07 0 0 1 0 39.6l-128 128Z"/>
+                </svg>
+            </div>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxButton from './FluxButton.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+
+    defineProps<Omit<FluxButtonProps, 'iconLeading'> & {
+        readonly isDone?: boolean;
+    }>();
+</script>

package/src/component/FluxQuantitySelector.vue

@@ -0,0 +1,109 @@
+<template>
+    <FluxButtonGroup
+        :class="$style.quantitySelector"
+        :aria-disabled="disabled ? true : undefined">
+        <FluxSecondaryButton
+            :class="$style.quantitySelectorButton"
+            :disabled="disabled || modelValue <= min"
+            icon-leading="minus"
+            tabindex="-1"
+            @click="decrement"/>
+
+        <input
+            ref="input"
+            v-model="modelValue"
+            :class="$style.quantitySelectorInput"
+            :style="{
+                width: `${width}px`
+            }"
+            :disabled="disabled"
+            tabindex="0"
+            type="number"
+            :max="max"
+            :min="min"
+            :step="step"/>
+
+        <FluxSecondaryButton
+            :class="$style.quantitySelectorButton"
+            :disabled="disabled || modelValue >= max"
+            icon-leading="plus"
+            tabindex="-1"
+            @click="increment"/>
+    </FluxButtonGroup>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import { ref, toRef, unref, useTemplateRef, watchEffect } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import FluxButtonGroup from './FluxButtonGroup.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import $style from '$flux/css/component/Form.module.scss';
+
+    const modelValue = defineModel<number>({
+        default: 0
+    });
+
+    const {
+        disabled: componentDisabled,
+        max = 100,
+        min = 0,
+        step = 1
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly max?: number;
+        readonly min?: number;
+        readonly step?: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const inputRef = useTemplateRef('input');
+
+    const width = ref(0);
+
+    function decrement(): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        modelValue.value = Math.max(min, unref(modelValue) - step);
+    }
+
+    function increment(): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        modelValue.value = Math.min(max, unref(modelValue) + step);
+    }
+
+    function sizeToContent(): void {
+        const input = unrefTemplateElement<HTMLInputElement>(inputRef);
+
+        if (!input || isNaN(input.valueAsNumber)) {
+            return;
+        }
+
+        width.value = 0;
+
+        requestAnimationFrame(() => {
+            width.value = Math.max(51, input.scrollWidth + 30);
+        });
+    }
+
+    watchEffect(() => {
+        if (unref(modelValue) > max) {
+            increment();
+            return;
+        }
+
+        if (unref(modelValue) < min) {
+            decrement();
+            return;
+        }
+
+        sizeToContent();
+    });
+</script>

package/src/component/FluxRemove.vue

@@ -0,0 +1,34 @@
+<template>
+    <button
+        :class="clsx(
+            $style.remove,
+            isHidden && $style.isHidden
+        )"
+        type="button"
+        @click="emit('click', $event)">
+        <FluxIcon
+            v-if="icon"
+            :name="icon"
+            :size="16"/>
+    </button>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/Remove.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        icon = 'xmark'
+    } = defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isHidden?: boolean;
+    }>();
+</script>

package/src/component/FluxRoot.vue

@@ -0,0 +1,60 @@
+<template>
+    <div
+        :class="$style.root"
+        :inert="inertMain">
+        <slot/>
+    </div>
+
+    <FluxOverlay size="medium">
+        <FluxAlert
+            v-for="alert of alerts"
+            :key="alert.id"
+            :alert="alert"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxConfirm
+            v-for="confirm of confirms"
+            :key="confirm.id"
+            :confirm="confirm"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxPrompt
+            v-for="prompt of prompts"
+            :key="prompt.id"
+            :prompt="prompt"/>
+    </FluxOverlay>
+
+    <FluxSnackbarProvider/>
+    <FluxTooltipProvider/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { watch } from 'vue';
+    import { useFluxStore } from '$flux/data';
+    import FluxAlert from './FluxAlert.vue';
+    import FluxConfirm from './FluxConfirm.vue';
+    import FluxPrompt from './FluxPrompt.vue';
+    import FluxOverlay from './FluxOverlay.vue';
+    import FluxSnackbarProvider from './FluxSnackbarProvider.vue';
+    import FluxTooltipProvider from './FluxTooltipProvider.vue';
+    import $style from '$flux/css/component/Root.module.scss';
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const {alerts, confirms, inertMain, prompts} = useFluxStore();
+
+    watch(inertMain, (inert, _, onCleanup): void => {
+        if (!inert) {
+            return;
+        }
+
+        document.body.classList.add($style.isLocked);
+        onCleanup(() => document.body.classList.remove($style.isLocked));
+    }, {immediate: true});
+</script>

package/src/component/FluxSecondaryButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :css-class="$style.secondaryButton"
+        :css-class-icon="$style.secondaryButtonIcon"
+        :css-class-label="$style.secondaryButtonLabel"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <template
+            v-for="slot of SLOTS"
+            #[slot]>
+            <slot :name="slot"/>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
+    import FluxButton, { SLOTS } from './FluxButton.vue';
+    import $style from '$flux/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>