@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

package/src/component/FluxPaneGroup.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Pane.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxPaneHeader.vue

@@ -9,14 +9,14 @@
             :name="icon"/>
 
         <div
-            v-if="title || subTitle"
+            v-if="title || subtitle"
             :class="$style.paneHeaderCaption">
             <strong v-if="title">
                 {{ title }}
             </strong>
 
-            <span v-if="subTitle">
-                {{ subTitle }}
+            <span v-if="subtitle">
+                {{ subtitle }}
             </span>
         </div>
 
@@ -28,17 +28,18 @@
     lang="ts"
     setup>
     import type { FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
-        readonly subTitle?: string;
+        readonly subtitle?: string;
         readonly title?: string;
     }>();
 
     defineSlots<{
-        after(): any;
-        before(): any;
+        after(): VNode[];
+        before(): VNode[];
     }>();
 </script>

package/src/component/FluxPaneIllustration.vue

@@ -35,10 +35,10 @@
     lang="ts"
     setup>
     import { hexToRGB } from '@basmilius/utils';
-    import { computed } from 'vue';
+    import { computed, type VNode } from 'vue';
     import FluxAnimatedColors from './FluxAnimatedColors.vue';
     import FluxGridPattern from './FluxGridPattern.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const {
         animatedColors,
@@ -52,8 +52,8 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        controlled?(): any;
+        default?(): VNode[];
+        controlled?(): VNode[];
     }>();
 
     const borderColor = computed(() => {

package/src/component/FluxPaneMedia.vue

@@ -1,9 +1,10 @@
 <template>
-    <div :class="isInset ? $style.paneMediaInset : $style.paneMedia">
+    <div :class="isInset ? $style.paneMediaInset : $style.paneMediaDefault">
         <img
             v-if="imageUrl"
             :class="$style.paneMediaImage"
             :style="{
+                aspectRatio,
                 objectPosition: `${focalPointX}% ${focalPointY}%`
             }"
             :src="imageUrl"
@@ -15,11 +16,12 @@
     lang="ts"
     setup>
     import { computed } from 'vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const {
         imageFocalPoint
     } = defineProps<{
+        readonly aspectRatio?: number;
         readonly imageAlt?: string;
         readonly imageFocalPoint?: [number, number];
         readonly imageUrl?: string;

package/src/component/FluxPercentageBar.vue

@@ -1,7 +1,9 @@
 <template>
     <div :class="$style.percentageBar">
         <div :class="$style.percentageBarTrack">
-            <FluxTooltip v-for="item of items">
+            <FluxTooltip
+                v-for="(item, index) of items"
+                :key="index">
                 <template #content>
                     <div :class="$style.percentageBarTooltip">
                         <FluxIcon
@@ -36,7 +38,7 @@
     import FluxIcon from './FluxIcon.vue';
     import FluxLegend from './FluxLegend.vue';
     import FluxTooltip from './FluxTooltip.vue';
-    import $style from '$flux/css/component/PercentageBar.module.scss';
+    import $style from '~flux/components/css/component/PercentageBar.module.scss';
 
     defineProps<{
         readonly isLegendVisible?: boolean;

package/src/component/FluxPersona.vue

@@ -25,7 +25,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import FluxAvatar from './FluxAvatar.vue';
-    import $style from '$flux/css/component/Avatar.module.scss';
+    import $style from '~flux/components/css/component/Avatar.module.scss';
 
     defineEmits<{
         click: [MouseEvent];

package/src/component/FluxPlaceholder.vue

@@ -34,7 +34,7 @@
     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';
+    import $style from '~flux/components/css/component/Placeholder.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];

package/src/component/FluxPressable.vue

@@ -2,42 +2,38 @@
     <router-link
         v-if="componentType === 'route'"
         v-bind="$attrs"
+        v-on="hoverListeners"
         :rel="rel"
         :target="target"
-        :to="to"
-        @click="onClick($event)"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        :to="to as any"
+        @click="onClick($event)">
         <slot/>
     </router-link>
 
     <a
         v-else-if="componentType === 'link'"
         v-bind="$attrs"
+        v-on="hoverListeners"
         :href="href"
         :rel="rel"
         :target="target"
-        @click="onClick($event)"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        @click="onClick($event)">
         <slot/>
     </a>
 
     <button
         v-else-if="componentType === 'button'"
         v-bind="$attrs"
-        @click="onClick($event)"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        v-on="hoverListeners"
+        @click="onClick($event)">
         <slot/>
     </button>
 
     <div
         v-else
         v-bind="$attrs"
-        @click="onClick"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        v-on="hoverListeners"
+        @click="onClick">
         <slot/>
     </div>
 </template>
@@ -46,6 +42,7 @@
     lang="ts"
     setup>
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import type { VNode } from 'vue';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -62,9 +59,14 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
+    const hoverListeners = {
+        onMouseenter: (evt: MouseEvent) => emit('mouseenter', evt),
+        onMouseleave: (evt: MouseEvent) => emit('mouseleave', evt)
+    };
+
     function onClick(evt: MouseEvent, navigate?: (evt: MouseEvent) => void): void {
         emit('click', evt);
 

package/src/component/FluxPrimaryButton.vue

@@ -20,7 +20,7 @@
     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';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxPrimaryLinkButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :css-class="$style.primaryLinkButton"
+        :css-class-icon="$style.primaryLinkButtonIcon"
+        :css-class-label="$style.primaryLinkButtonLabel"
+        @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/components/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxProgressBar.vue

@@ -1,14 +1,16 @@
 <template>
-    <FluxStack
+    <FluxFlex
         :class="$style.progressBar"
+        direction="vertical"
         :gap="6"
         role="progressbar"
         :aria-valuenow="value"
         :aria-valuemax="max"
-        :aria-valuemin="min">
+        :aria-valuemin="min"
+        :aria-valuetext="status ? `${status}: ${progress}` : undefined">
         <div :class="isIndeterminate ? $style.progressBarTrackIndeterminate : $style.progressBarTrack">
             <div
-                :class="$style.progressBarValue"
+                :class="position >= 1 ? $style.progressBarValueComplete : $style.progressBarValueIncomplete"
                 :style="{
                     width: `${isIndeterminate ? 100 : position * 100}%`
                 }"/>
@@ -33,16 +35,16 @@
                 </span>
             </FluxFadeTransition>
         </div>
-    </FluxStack>
+    </FluxFlex>
 </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';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import FluxFlex from './FluxFlex.vue';
+    import $style from '~flux/components/css/component/Progress.module.scss';
 
     const {
         isIndeterminate,

package/src/component/FluxPrompt.vue

@@ -1,25 +1,18 @@
 <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/>
+    <DialogLayout
+        :icon="prompt.icon"
+        :message="prompt.message"
+        :title="prompt.title">
+        <FluxFormField :label="prompt.fieldLabel">
+            <FluxFormInput
+                ref="input"
+                v-model="value"
+                :placeholder="prompt.fieldPlaceholder"
+                :type="prompt.fieldType ?? 'text'"
+                @keydown="onKeyDown"/>
+        </FluxFormField>
 
+        <template #footer>
             <FluxSecondaryButton
                 :label="translate('flux.cancel')"
                 @click="prompt.onCancel()"/>
@@ -29,8 +22,8 @@
                 icon-leading="circle-check"
                 :label="translate('flux.ok')"
                 @click="prompt.onConfirm(value)"/>
-        </FluxPaneFooter>
-    </FluxPane>
+        </template>
+    </DialogLayout>
 </template>
 
 <script
@@ -38,16 +31,12 @@
     setup>
     import type { FluxPromptObject } from '@flux-ui/types';
     import { computed, onMounted, ref, unref, useTemplateRef } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTranslate } from '~flux/components/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';
+    import { DialogLayout } from './primitive';
 
     const {
         prompt

package/src/component/FluxPublishButton.vue

@@ -49,7 +49,7 @@
     import { clsx } from 'clsx';
     import FluxButton from './FluxButton.vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
 

package/src/component/FluxQuantitySelector.vue

@@ -37,10 +37,10 @@
     setup>
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { ref, toRef, unref, useTemplateRef, watchEffect } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { useDisabled } from '~flux/components/composable';
     import FluxButtonGroup from './FluxButtonGroup.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<number>({
         default: 0
@@ -94,13 +94,10 @@
     }
 
     watchEffect(() => {
-        if (unref(modelValue) > max) {
-            increment();
-            return;
-        }
+        const value = unref(modelValue);
 
-        if (unref(modelValue) < min) {
-            decrement();
+        if (value > max || value < min) {
+            modelValue.value = Math.min(max, Math.max(min, value));
             return;
         }
 

package/src/component/FluxRemove.vue

@@ -5,6 +5,7 @@
             isHidden && $style.isHidden
         )"
         type="button"
+        :aria-label="translate('flux.delete')"
         @click="emit('click', $event)">
         <FluxIcon
             v-if="icon"
@@ -18,8 +19,9 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Remove.module.scss';
+    import $style from '~flux/components/css/component/Remove.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -31,4 +33,6 @@
         readonly icon?: FluxIconName;
         readonly isHidden?: boolean;
     }>();
+
+    const translate = useTranslate();
 </script>

package/src/component/FluxRoot.vue

@@ -6,27 +6,7 @@
         <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>
-
+    <FluxOverlayProvider/>
     <FluxSnackbarProvider/>
     <FluxTooltipProvider/>
 </template>
@@ -34,25 +14,22 @@
 <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 { type VNode, watch } from 'vue';
+    import { useFluxStore } from '~flux/components/data';
+    import FluxOverlayProvider from './FluxOverlayProvider.vue';
     import FluxSnackbarProvider from './FluxSnackbarProvider.vue';
     import FluxTooltipProvider from './FluxTooltipProvider.vue';
-    import $style from '$flux/css/component/Root.module.scss';
+    import $style from '~flux/components/css/component/Root.module.scss';
 
     defineOptions({
         inheritAttrs: false
     });
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
-    const {alerts, confirms, inertMain, prompts} = useFluxStore();
+    const {inertMain} = useFluxStore();
 
     watch(inertMain, (inert, _, onCleanup): void => {
         if (!inert) {

package/src/component/FluxScroller.vue

@@ -0,0 +1,63 @@
+<template>
+    <Component
+        :is="tag ?? 'div'"
+        ref="element"
+        :class="clsx(
+            $style.scroller,
+            direction === 'vertical' && $style.scrollerDirectionVertical,
+            direction === 'horizontal' && $style.scrollerDirectionHorizontal,
+            direction === 'both' && $style.scrollerDirectionBoth,
+            snap && direction === 'vertical' && (snap === 'mandatory' ? $style.scrollerSnapMandatoryVertical : $style.scrollerSnapProximityVertical),
+            snap && direction === 'horizontal' && (snap === 'mandatory' ? $style.scrollerSnapMandatoryHorizontal : $style.scrollerSnapProximityHorizontal),
+            snap && direction === 'both' && (snap === 'mandatory' ? $style.scrollerSnapMandatoryBoth : $style.scrollerSnapProximityBoth),
+            snapAlign === 'start' && $style.scrollerSnapAlignStart,
+            snapAlign === 'center' && $style.scrollerSnapAlignCenter,
+            snapAlign === 'end' && $style.scrollerSnapAlignEnd,
+            hasFade && direction === 'horizontal' && $style.scrollerFadeHorizontal,
+            hasFade && direction !== 'horizontal' && $style.scrollerFadeVertical
+        )"
+        :style="hasFade ? fadeStyle : undefined">
+        <slot/>
+    </Component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useScrollEdges } from '@flux-ui/internals';
+    import type { FluxAlignment, FluxDirection } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, useTemplateRef, type VNode } from 'vue';
+    import $style from '~flux/components/css/component/Scroller.module.scss';
+
+    const FADE_DISTANCE = 24;
+
+    const {
+        direction = 'vertical',
+        hasFade = false
+    } = defineProps<{
+        readonly direction?: FluxDirection | 'both';
+        readonly hasFade?: boolean;
+        readonly snap?: 'mandatory' | 'proximity';
+        readonly snapAlign?: FluxAlignment;
+        readonly tag?: keyof HTMLElementTagNameMap;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const elementRef = useTemplateRef<HTMLElement>('element');
+    const {isAtStart, isAtEnd, isAtLeft, isAtRight} = useScrollEdges(elementRef);
+
+    const fadeStyle = computed(() => {
+        const isHorizontal = direction === 'horizontal';
+        const startEdge = isHorizontal ? isAtLeft.value : isAtStart.value;
+        const endEdge = isHorizontal ? isAtRight.value : isAtEnd.value;
+
+        return {
+            '--fade-start': startEdge ? '0px' : `${FADE_DISTANCE}px`,
+            '--fade-end': endEdge ? '0px' : `${FADE_DISTANCE}px`
+        };
+    });
+</script>

package/src/component/FluxSecondaryButton.vue

@@ -20,7 +20,7 @@
     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';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxSecondaryLinkButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :css-class="$style.secondaryLinkButton"
+        :css-class-icon="$style.secondaryLinkButtonIcon"
+        :css-class-label="$style.secondaryLinkButtonLabel"
+        @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/components/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>