@flux-ui/components 3.0.0-next.3 → 3.0.0-next.31

package/src/component/FluxFormSelect.vue

@@ -41,7 +41,7 @@
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
-    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, options, modelSearch);
+    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, toRef(() => options), modelSearch);
 
     function onDeselect(id: string | number | null): void {
         if (unref(isMultiple)) {

package/src/component/FluxFormSelectAsync.vue

@@ -16,12 +16,12 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
     import { computed, ref, toRef, unref, watch } from 'vue';
     import { SelectBase } from '$flux/component/primitive';
     import { useDisabled } from '$flux/composable';
-    import { useFormSelect, useLoaded } from '$flux/composable/private';
+    import { useFormSelect } from '$flux/composable/private';
     import { isFluxFormSelectOption } from '$flux/data';
 
     const modelSearch = defineModel<string>('searchQuery', {

package/src/component/FluxFormTimeZonePicker.vue

@@ -10,6 +10,7 @@
 <script
     lang="ts"
     setup>
+    import { isSSR } from '@flux-ui/internals';
     import type { FluxFormSelectEntry } from '@flux-ui/types';
     import { upperFirst } from 'lodash-es';
     import { computed, toRef } from 'vue';
@@ -651,6 +652,10 @@
     const translate = useTranslate();
 
     const options = computed<FluxFormSelectEntry[]>(() => {
+        if (isSSR) {
+            return [];
+        }
+
         const groups: Record<string, FluxFormSelectEntry[]> = {};
         const options: FluxFormSelectEntry[] = [];
 

package/src/component/FluxGallery.vue

@@ -1,8 +1,8 @@
 <template>
     <FluxDropZone
+        :class="$style.gallery"
         accept="image/*"
         :disabled="!isEditable"
-        :is-empty="items && items.length === 0"
         is-multiple
         placeholder-icon="image"
         :placeholder-button="translate('flux.galleryPlaceholderButton')"
@@ -11,7 +11,7 @@
         @select-multiple="onFilesSelected">
         <template #default="{showPicker}">
             <TransitionGroup
-                :class="$style.gallery"
+                :class="$style.galleryGrid"
                 :move-class="$style.galleryMove"
                 tag="div">
                 <template

package/src/component/FluxGrid.vue

@@ -16,7 +16,7 @@
 
     const {
         columns = 12,
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly columns?: number;
         readonly gap?: number;

package/src/component/FluxIcon.vue

@@ -17,18 +17,6 @@
             fill="currentColor"/>
     </svg>
 
-    <i
-        v-else-if="name"
-        :class="$style.materialSymbolIcon"
-        :style="{
-            fontSize: size && `${size}px`
-        }"
-        role="img"
-        aria-hidden="true"
-        @click="onClick">
-        {{ name }}
-    </i>
-
     <i
         v-else
         :class="$style.icon"/>

package/src/component/FluxItem.vue

@@ -0,0 +1,11 @@
+<template>
+    <div :class="$style.item">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Item.module.scss';
+</script>

package/src/component/FluxItemActions.vue

@@ -0,0 +1,18 @@
+<template>
+    <FluxActionBar
+        :class="[$style.itemActions, isCenter && $style.isCenter]"
+        #primary>
+        <slot/>
+    </FluxActionBar>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Item.module.scss';
+    import FluxActionBar from './FluxActionBar.vue';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
+</script>

package/src/component/FluxItemContent.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="[$style.itemContent, isCenter && $style.isCenter]">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
+</script>

package/src/component/FluxItemMedia.vue

@@ -0,0 +1,20 @@
+<template>
+    <div
+        :class="[$style.itemMedia, isCenter && $style.isCenter]"
+        :style="{
+            '--size': size && `${size}px`
+        }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+        readonly size?: number;
+    }>();
+</script>

package/src/component/FluxItemStack.vue

@@ -0,0 +1,14 @@
+<template>
+    <FluxStack
+        :class="$style.itemStack"
+        :gap="0">
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxStack from './FluxStack.vue';
+    import $style from '$flux/css/component/Item.module.scss';
+</script>

package/src/component/FluxMenuItem.vue

@@ -14,6 +14,7 @@
             [$style.menuItemSelected]: isSelectable && isSelected
         }"
         :aria-checked="isSelectable ? isSelected : undefined"
+        :tabindex="tabindex"
         @click="$emit('click', $event)">
         <template
             v-if="isSelectable && (!iconLeading || isSelected)"
@@ -29,11 +30,11 @@
             <img
                 :class="$style.menuItemImage"
                 :src="imageSrc"
-                alt=""/>
+                :alt="imageAlt ?? ''"/>
         </template>
 
         <template
-            v-if="command || commandIcon || commandLoading"
+            v-if="command || commandIcon || commandLoading || slots.after"
             #after>
             <FluxSpinner
                 v-if="commandLoading"
@@ -52,6 +53,8 @@
                     :class="$style.menuItemCommandIcon"
                     :name="commandIcon"/>
             </template>
+
+            <slot name="after"/>
         </template>
     </FluxButton>
 </template>
@@ -67,12 +70,17 @@
 
     defineEmits<FluxButtonEmits>();
 
+    const slots = defineSlots<{
+        after(): any;
+    }>();
+
     const {
         type = 'button'
     } = defineProps<Omit<FluxButtonProps, 'isFilled' | 'isSubmit' | 'size'> & {
         readonly command?: string;
         readonly commandIcon?: FluxIconName;
         readonly commandLoading?: boolean;
+        readonly imageAlt?: string;
         readonly imageSrc?: string;
         readonly isActive?: boolean;
         readonly isDestructive?: boolean;

package/src/component/FluxMenuOptions.vue

@@ -10,7 +10,7 @@
     lang="ts"
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
-    import { cloneVNode, computed, unref, VNode } from 'vue';
+    import { cloneVNode, computed, unref, type VNode } from 'vue';
     import FluxMenuGroup from './FluxMenuGroup.vue';
 
     const modelValue = defineModel<number>({

package/src/component/FluxOverflowBar.vue

@@ -0,0 +1,133 @@
+<template>
+    <div
+        ref="bar"
+        :class="[
+            direction === 'horizontal' && $style.overflowBarHorizontal,
+            direction === 'vertical' && $style.overflowBarVertical,
+            alignment === 'start' && $style.alignStart,
+            alignment === 'center' && $style.alignCenter,
+            alignment === 'end' && $style.alignEnd
+        ]"
+        :style="{
+            gap: `${gap}px`
+        }">
+        <template v-for="item of items.slice(0, visibleItems)">
+            <FluxDynamicView :vnode="item"/>
+        </template>
+
+        <div
+            v-if="slots.overflow"
+            ref="overflow"
+            :class="$style.overflowBarOverflow">
+            <slot
+                name="overflow"
+                v-bind="{items: hiddenItems}"/>
+        </div>
+    </div>
+
+    <div
+        ref="measurer"
+        :class="$style.overflowBarMeasurer">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { animationFrameDebounce, flattenVNodeTree, unrefTemplateElement } from '@flux-ui/internals';
+    import type { FluxAlignment, FluxDirection } from '@flux-ui/types';
+    import { computed, ref, unref, useTemplateRef, watch, type VNode } from 'vue';
+    import FluxDynamicView from './FluxDynamicView.vue';
+    import $style from '$flux/css/component/OverflowBar.module.scss';
+
+    const {
+        alignment = 'center',
+        direction = 'horizontal',
+        gap = 9
+    } = defineProps<{
+        readonly alignment?: FluxAlignment;
+        readonly direction?: FluxDirection;
+        readonly gap?: number;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): any;
+        overflow?(props: { items: VNode[] }): any;
+    }>();
+
+    const barRef = useTemplateRef('bar');
+    const measurerRef = useTemplateRef('measurer');
+    const overflowRef = useTemplateRef('overflow');
+
+    const availableSize = ref(0);
+    const itemSizes = ref<number[]>([]);
+    const usedSize = ref(0);
+    const visibleItems = ref(0);
+
+    const hiddenItems = computed(() => unref(items).slice(unref(visibleItems)));
+    const items = computed(() => flattenVNodeTree(slots.default?.()));
+
+    const reflow = animationFrameDebounce(() => {
+        const bar = unref(barRef)!;
+        const measurer = unref(measurerRef)!;
+        const overflow = unrefTemplateElement(overflowRef);
+
+        availableSize.value = direction === 'horizontal' ? bar.offsetWidth : bar.offsetHeight;
+        itemSizes.value = Array.from(measurer.children)
+            .filter(item => item instanceof HTMLElement)
+            .map(item => {
+                const {display} = getComputedStyle(item);
+
+                if (display === 'contents') {
+                    item = item.children[0] as HTMLElement;
+                }
+
+                return direction === 'horizontal'
+                    ? item.offsetWidth
+                    : item.offsetHeight;
+            });
+
+        let size = 0;
+        let visible = 0;
+
+        if (overflow) {
+            size += Array.from(overflow.children)
+                .map(item => getComputedStyle(item).display === 'contents' ? item.children[0] : item)
+                .filter(item => item instanceof HTMLElement)
+                .map(item => direction === 'horizontal' ? item.offsetWidth : item.offsetHeight)
+                .reduce((acc, curr, index) => acc + curr + (index === 0 ? 0 : gap), 0);
+        }
+
+        for (let i = 0; i < itemSizes.value.length; i++) {
+            const newSize = size + itemSizes.value[i] + (size === 0 ? 0 : gap);
+
+            if (newSize > availableSize.value) {
+                break;
+            }
+
+            visible++;
+            size = newSize;
+        }
+
+        usedSize.value = size;
+        visibleItems.value = visible;
+    });
+
+    watch([barRef, measurerRef], async ([bar, measurer], _, onCleanup) => {
+        if (!bar || !measurer) {
+            return;
+        }
+
+        const observer = new ResizeObserver(reflow);
+        observer.observe(bar);
+        observer.observe(measurer);
+        observer.observe(document.documentElement); // observe font-size changes.
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+
+    watch(items, reflow);
+</script>

package/src/component/FluxOverlay.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { FluxSize } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { defineComponent, PropType } from 'vue';
+    import { defineComponent, type PropType } from 'vue';
     import { FluxOverlayTransition } from '$flux/transition';
     import { createDialogRenderer } from '$flux/util';
     import $style from '$flux/css/component/Overlay.module.scss';

package/src/component/FluxOverlayProvider.vue

@@ -0,0 +1,39 @@
+<template>
+    <div :class="$style.overlayProvider">
+        <div :class="$style.overlayShade"/>
+    </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>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useFluxStore } from '$flux/data';
+    import FluxAlert from './FluxAlert.vue';
+    import FluxConfirm from './FluxConfirm.vue';
+    import FluxOverlay from './FluxOverlay.vue';
+    import FluxPrompt from './FluxPrompt.vue';
+    import $style from '$flux/css/component/Overlay.module.scss';
+
+    const {alerts, confirms, prompts} = useFluxStore();
+</script>

package/src/component/FluxPagination.vue

@@ -1,52 +1,56 @@
 <template>
-    <FluxButtonGroup
+    <nav
         :class="$style.pagination"
         role="navigation"
         :aria-label="translate('flux.pagination')">
-        <FluxSecondaryButton
+        <FluxPaginationButton
             v-if="arrows || isCompact"
             :disabled="isPreviousDisabled"
             icon-leading="angle-left"
+            is-arrow
             :aria-label="translate('flux.previous')"
             @click="previous"/>
 
         <template
             v-if="!isCompact"
             v-for="p of visiblePages">
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 v-if="p === 'dots'"
                 disabled
-                icon-leading="ellipsis-h"/>
+                icon-leading="ellipsis-h"
+                is-spacer/>
 
-            <FluxPrimaryButton
+            <FluxPaginationButton
                 v-else-if="p === page"
+                is-current
                 :label="`${p}`"
                 aria-current="page"/>
 
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 v-else
                 :label="`${p}`"
                 @click="navigate(p)"/>
         </template>
 
         <template v-else>
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 :class="$style.paginationCurrentZZ"
                 @click="prompt"
                 #before>
                 <strong>{{ page }}</strong>
                 <span>/</span>
                 <span>{{ pages }}</span>
-            </FluxSecondaryButton>
+            </FluxPaginationButton>
         </template>
 
-        <FluxSecondaryButton
+        <FluxPaginationButton
             v-if="arrows || isCompact"
             :disabled="isNextDisabled"
             icon-leading="angle-right"
+            is-arrow
             :aria-label="translate('flux.next')"
             @click="next"/>
-    </FluxButtonGroup>
+    </nav>
 </template>
 
 <script
@@ -55,9 +59,7 @@
     import { computed, unref } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { showPrompt } from '$flux/data';
-    import FluxButtonGroup from './FluxButtonGroup.vue';
-    import FluxPrimaryButton from './FluxPrimaryButton.vue';
-    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxPaginationButton from './FluxPaginationButton.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
@@ -89,7 +91,7 @@
 
         const sizes = {
             end: 1,
-            middle: 1
+            middle: 2
         } as const;
 
         let dots = false;

package/src/component/FluxPaginationBar.vue

@@ -1,40 +1,32 @@
 <template>
-    <FluxStack :class="$style.paginationBar">
-        <FluxFormInputGroup>
-            <FluxFormInputAddition>
-                <span>{{ translate('flux.rowsPerPage') }}</span>
-            </FluxFormInputAddition>
-
-            <FluxFormSelect
-                v-model="limit"
-                :options="limitOptions"/>
-        </FluxFormInputGroup>
+    <div :class="$style.paginationBar">
+        <FluxPagination
+            v-if="total > perPage"
+            arrows
+            :page="page"
+            :per-page="perPage"
+            :total="total"
+            @navigate="$emit('navigate', $event)"/>
 
         <FluxSpacer :class="$style.paginationBarSpacer"/>
 
-        <FluxFormInputGroup>
-            <FluxFormInputAddition>
-                <span>
-                    {{
-                        translate('flux.displayingOf', {
-                            from: (page - 1) * perPage + 1,
-                            to: Math.min(total, page * perPage),
-                            total: total
-                        })
-                    }}
-                </span>
-            </FluxFormInputAddition>
+        <div :class="$style.paginationBarLimit">
+            <span :class="$style.paginationBarLimitDisplayingOf">
+                {{
+                    translate('flux.displayingOf', {
+                        from: (page - 1) * perPage + 1,
+                        to: Math.min(total, page * perPage),
+                        total: total
+                    })
+                }}
+            </span>
 
-            <FluxPagination
-                v-if="total > perPage"
-                arrows
-                is-compact
-                :page="page"
-                :per-page="perPage"
-                :total="total"
-                @navigate="$emit('navigate', $event)"/>
-        </FluxFormInputGroup>
-    </FluxStack>
+            <FluxFormSelect
+                v-model="limit"
+                :class="$style.paginationBarLimitSelect"
+                :options="limitOptions"/>
+        </div>
+    </div>
 </template>
 
 <script
@@ -43,12 +35,9 @@
     import type { FluxFormSelectOption } from '@flux-ui/types';
     import { computed, ref, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
-    import FluxFormInputAddition from './FluxFormInputAddition.vue';
-    import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxFormSelect from './FluxFormSelect.vue';
     import FluxPagination from './FluxPagination.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import FluxStack from './FluxStack.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
@@ -70,9 +59,9 @@
 
     const limit = ref(perPage);
 
-    const limitOptions = computed(() => limits.map<FluxFormSelectOption>(limit => ({
-        label: limit.toString(),
-        value: limit
+    const limitOptions = computed(() => limits.map<FluxFormSelectOption>(n => ({
+        label: translate('flux.showN', {n}),
+        value: n
     })));
 
     watch(limit, limit => emit('limit', limit));

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/FluxPaneMedia.vue

@@ -4,6 +4,7 @@
             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/FluxPressable.vue

@@ -4,7 +4,7 @@
         v-bind="$attrs"
         :rel="rel"
         :target="target"
-        :to="to"
+        :to="to as any"
         @click="onClick($event)"
         @mouseenter="$emit('mouseenter', $event)"
         @mouseleave="$emit('mouseleave', $event)">