@flux-ui/components 3.0.0-next.4 → 3.0.0-next.41

package/src/component/FluxPaginationButton.vue

@@ -0,0 +1,39 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :class="[
+            isArrow && $style.paginationButtonArrow,
+            isCurrent && $style.paginationButtonCurrent,
+            isSpacer && $style.paginationButtonSpacer
+        ]"
+        :css-class="$style.paginationButton"
+        :css-class-icon="$style.paginationButtonIcon"
+        :css-class-label="$style.paginationButtonLabel"
+        @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/Pagination.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+
+    defineProps<FluxButtonProps & {
+        readonly isArrow?: boolean;
+        readonly isCurrent?: boolean;
+        readonly isSpacer?: boolean;
+    }>();
+
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxPane.vue

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

package/src/component/FluxPaneBody.vue

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

package/src/component/FluxPaneFooter.vue

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

package/src/component/FluxPaneGroup.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/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>
 
@@ -27,18 +27,19 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     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 subtitle?: string;
         readonly title?: string;
     }>();
 
     defineSlots<{
-        after(): any;
-        before(): any;
+        after(): VNode[];
+        before(): VNode[];
     }>();
 </script>

package/src/component/FluxPaneIllustration.vue

@@ -35,7 +35,7 @@
     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';
@@ -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"
@@ -20,6 +21,7 @@
     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

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>
@@ -45,6 +41,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
 
     const emit = defineEmits<{
@@ -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/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/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxProgressBar.vue

@@ -5,10 +5,11 @@
         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}%`
                 }"/>

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
@@ -41,13 +34,9 @@
     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';
+    import { DialogLayout } from './primitive';
 
     const {
         prompt

package/src/component/FluxQuantitySelector.vue

@@ -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,6 +19,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Remove.module.scss';
 
@@ -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,12 +14,9 @@
 <script
     lang="ts"
     setup>
-    import { watch } from 'vue';
+    import { type VNode, 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 FluxOverlayProvider from './FluxOverlayProvider.vue';
     import FluxSnackbarProvider from './FluxSnackbarProvider.vue';
     import FluxTooltipProvider from './FluxTooltipProvider.vue';
     import $style from '$flux/css/component/Root.module.scss';
@@ -49,10 +26,10 @@
     });
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
-    const {alerts, confirms, inertMain, prompts} = useFluxStore();
+    const {inertMain} = useFluxStore();
 
     watch(inertMain, (inert, _, onCleanup): void => {
         if (!inert) {

package/src/component/FluxRow.vue

@@ -0,0 +1,24 @@
+<template>
+    <div
+        :class="$style.row"
+        :style="{'--gap': `${gap}px`}">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '$flux/css/component/Layout.module.scss';
+
+    const {
+        gap = 18
+    } = defineProps<{
+        readonly gap?: number;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

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/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxSegmentedControl.vue

@@ -1,7 +1,10 @@
 <template>
-    <nav
+    <div
         ref="control"
-        :class="isFill ? $style.segmentedControlFill : $style.segmentedControlInline">
+        :class="isFill ? $style.segmentedControlFill : $style.segmentedControlInline"
+        role="radiogroup"
+        :aria-label="ariaLabel"
+        @keydown="onKeyDown">
         <div
             v-if="activeItemWidth > 0"
             :class="$style.segmentedControlHighlight"
@@ -25,6 +28,10 @@
                     $style.segmentedControlItem,
                     index === modelValue && $style.isActive
                 )"
+                role="radio"
+                :aria-checked="index === modelValue"
+                :aria-label="item.label"
+                :tabindex="index === modelValue ? 0 : -1"
                 type="button"
                 @click="activate(index)">
                 <FluxIcon
@@ -32,18 +39,19 @@
                     :name="item.icon"
                     :size="15"/>
 
-                <span>{{ item.label }}</span>
+                <span v-if="item.label">{{ item.label }}</span>
             </button>
         </template>
-    </nav>
+    </div>
 </template>
 
 <script
     lang="ts"
     setup>
+    import { useResizeObserver } from '@basmilius/common';
     import type { FluxSegmentedControlItemObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { onMounted, onUpdated, ref, unref, useTemplateRef } from 'vue';
+    import { onBeforeUnmount, ref, unref, useTemplateRef, watchEffect } from 'vue';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/SegmentedControl.module.scss';
 
@@ -52,6 +60,7 @@
     });
 
     defineProps<{
+        readonly ariaLabel?: string;
         readonly isFill?: boolean;
         readonly items: FluxSegmentedControlItemObject[];
     }>();
@@ -61,17 +70,82 @@
 
     const activeItemX = ref(0);
     const activeItemWidth = ref(0);
+    const isAlive = ref(true);
 
-    onMounted(() => activate(unref(modelValue)));
-    onUpdated(() => activate(unref(modelValue)));
+    onBeforeUnmount(() => {
+        isAlive.value = false;
+    });
+
+    watchEffect(() => updateHighlight(unref(modelValue)), {flush: 'post'});
+
+    useResizeObserver(controlRef, () => updateHighlight(unref(modelValue)));
 
     function activate(index: number): void {
-        const itemRef = itemRefs.value![index];
-        const {left: controlX} = controlRef.value!.getBoundingClientRect();
-        const {width, left: x} = itemRef.getBoundingClientRect();
+        modelValue.value = index;
+
+        const itemRef = itemRefs.value?.[index];
+        itemRef?.focus();
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        const items = itemRefs.value;
+
+        if (!items) {
+            return;
+        }
+
+        let newIndex: number | null = null;
+
+        switch (evt.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                newIndex = Math.max(0, unref(modelValue) - 1);
+                break;
+
+            case 'ArrowRight':
+            case 'ArrowDown':
+                newIndex = Math.min(items.length - 1, unref(modelValue) + 1);
+                break;
+
+            case 'Home':
+                newIndex = 0;
+                break;
 
-        activeItemX.value = x - controlX - 1;
+            case 'End':
+                newIndex = items.length - 1;
+                break;
+
+            default:
+                return;
+        }
+
+        activate(newIndex);
+        evt.preventDefault();
+    }
+
+    function updateHighlight(index: number): void {
+        if (!isAlive.value) {
+            return;
+        }
+
+        const itemRef = itemRefs.value?.[index];
+        const control = controlRef.value;
+
+        if (!itemRef || !control) {
+            return;
+        }
+
+        const width = itemRef.offsetWidth;
+
+        if (width === 0) {
+            return;
+        }
+
+        const controlRect = control.getBoundingClientRect();
+        const itemRect = itemRef.getBoundingClientRect();
+        const scaleX = control.offsetWidth > 0 ? controlRect.width / control.offsetWidth : 1;
+
+        activeItemX.value = (itemRect.left - controlRect.left) / scaleX;
         activeItemWidth.value = width;
-        modelValue.value = index;
     }
 </script>