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

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

@@ -8,7 +8,7 @@
         :aria-valuemin="min">
         <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/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>
@@ -36,10 +16,7 @@
     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 FluxOverlayProvider from './FluxOverlayProvider.vue';
     import FluxSnackbarProvider from './FluxSnackbarProvider.vue';
     import FluxTooltipProvider from './FluxTooltipProvider.vue';
     import $style from '$flux/css/component/Root.module.scss';
@@ -52,7 +29,7 @@
         default(): any;
     }>();
 
-    const {alerts, confirms, inertMain, prompts} = useFluxStore();
+    const {inertMain} = useFluxStore();
 
     watch(inertMain, (inert, _, onCleanup): void => {
         if (!inert) {

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

@@ -24,7 +24,7 @@
 
     const {
         direction = 'vertical',
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly direction?: FluxDirection;
         readonly gap?: number;

package/src/component/FluxStatistic.vue

@@ -9,16 +9,25 @@
             color === 'info' && $style.isInfo,
             color === 'success' && $style.isSuccess,
             color === 'warning' && $style.isWarning
-        )">
-        <div :class="$style.statisticIcon">
-            <FluxIcon
-                :name="icon"
-                :size="24"/>
+        )"
+        :is-loading="isLoading">
+        <FluxBoxedIcon
+            v-if="icon"
+            :class="$style.statisticIcon"
+            :color="color"
+            :name="icon"
+            :size="48"/>
+
+        <div v-else-if="imageSrc">
+            <img
+                :class="$style.statisticImage"
+                :src="imageSrc"
+                :alt="imageAlt"/>
         </div>
 
         <div :class="$style.statisticData">
             <span>{{ label }}</span>
-            <strong>{{ value }}</strong>
+            <strong>{{ value ?? MDASH }}</strong>
         </div>
 
         <div
@@ -45,11 +54,13 @@
 <script
     lang="ts"
     setup>
+    import { MDASH } from '@basmilius/utils';
     import type { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';
     import FluxPane from './FluxPane.vue';
     import $style from '$flux/css/component/Statistic.module.scss';
+    import FluxBoxedIcon from '$flux/component/FluxBoxedIcon.vue';
 
     const {
         changeColor = 'gray',
@@ -58,11 +69,14 @@
     } = defineProps<{
         readonly changeColor?: FluxColor;
         readonly changeIcon?: FluxIconName;
-        readonly changeValue?: string;
+        readonly changeValue?: string | number | null;
         readonly color?: FluxColor;
         readonly direction?: FluxDirection;
-        readonly icon: FluxIconName;
+        readonly icon?: FluxIconName;
+        readonly imageSrc?: string;
+        readonly imageAlt?: string;
+        readonly isLoading?: boolean;
         readonly label: string;
-        readonly value: string;
+        readonly value?: string | number | null;
     }>();
 </script>

package/src/component/FluxStepper.vue

@@ -23,7 +23,7 @@
     lang="ts"
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
-    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { computed, ref, unref, type VNode, watch } from 'vue';
     import { FluxWindowTransition } from '$flux/transition';
     import FluxDynamicView from './FluxDynamicView.vue';
     import FluxStepperSteps from './FluxStepperSteps.vue';

package/src/component/FluxTabBar.vue

@@ -3,14 +3,16 @@
         :class="$style.tabBar"
         role="tablist"
         aria-orientation="horizontal">
-        <button
-            v-if="isStartArrowVisible"
-            :class="$style.tabBarArrowStart"
-            tabindex="-1"
-            type="button"
-            @click="scrollToStart">
-            <FluxIcon name="angle-left"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isStartArrowVisible"
+                :class="$style.tabBarArrowStart"
+                tabindex="-1"
+                type="button"
+                @click="scrollToStart">
+                <FluxIcon name="angle-left"/>
+            </button>
+        </FluxFadeTransition>
 
         <div
             ref="tabBar"
@@ -22,23 +24,27 @@
             <slot/>
         </div>
 
-        <button
-            v-if="isEndArrowVisible"
-            :class="$style.tabBarArrowEnd"
-            tabindex="-1"
-            type="button"
-            @click="scrollToEnd">
-            <FluxIcon name="angle-right"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isEndArrowVisible"
+                :class="$style.tabBarArrowEnd"
+                tabindex="-1"
+                type="button"
+                @click="scrollToEnd">
+                <FluxIcon name="angle-right"/>
+            </button>
+        </FluxFadeTransition>
     </nav>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useEventListener, useMutationObserver } from '@flux-ui/internals';
+    import { useMutationObserver } from '@basmilius/common';
+    import { unrefTemplateElement, useEventListener } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { onMounted, ref, useTemplateRef } from 'vue';
+    import { FluxFadeTransition } from '$flux/transition';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Tab.module.scss';
 

package/src/component/FluxTabBarItem.vue

@@ -29,7 +29,7 @@
     lang="ts"
     setup>
     import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
-    import { ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { type ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';

package/src/component/FluxTable.vue

@@ -1,12 +1,20 @@
 <template>
     <div :class="$style.table">
         <table :class="$style.tableBase">
+            <slot name="colgroups"/>
+
             <thead v-if="slots.header">
             <slot name="header"/>
             </thead>
 
             <tbody v-if="slots.default">
             <slot/>
+
+            <FluxTableRow
+                v-if="fillColumns"
+                :class="$style.tableFill">
+                <FluxTableCell v-for="_ of fillColumns"/>
+            </FluxTableRow>
             </tbody>
 
             <tfoot v-if="slots.footer">
@@ -25,15 +33,25 @@
             :class="$style.tableLoader">
             <FluxSpinner/>
         </div>
+
+        <FluxPaneBody
+            v-if="slots.pagination"
+            :class="$style.tablePagination">
+            <slot name="pagination"/>
+        </FluxPaneBody>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { provide } from 'vue';
     import { FluxTableInjectionKey } from '$flux/data';
+    import FluxPaneBody from './FluxPaneBody.vue';
     import FluxSpinner from './FluxSpinner.vue';
+    import FluxTableCell from './FluxTableCell.vue';
+    import FluxTableRow from './FluxTableRow.vue';
     import $style from '$flux/css/component/Table.module.scss';
 
     const {
@@ -45,6 +63,7 @@
         isStriped = false
     } = defineProps<{
         readonly captionSide?: 'top' | 'bottom';
+        readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
         readonly isLoading?: boolean;
@@ -53,10 +72,12 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        caption?(): any;
-        footer?(): any;
-        header?(): any;
+        default?(): VNode;
+        colgroups?(): VNode;
+        caption?(): VNode;
+        footer?(): VNode;
+        header?(): VNode;
+        pagination?(): VNode;
     }>();
 
     provide(FluxTableInjectionKey, {

package/src/component/FluxTableBar.vue

@@ -0,0 +1,37 @@
+<template>
+    <tr :class="$style.tableRow">
+        <td
+            :class="clsx(
+                $style.tableBar,
+                isBordered && $style.isBordered,
+                isHoverable && $style.isHoverable,
+                isSeparated && $style.isSeparated,
+                isStriped && $style.isStriped
+            )"
+            colspan="100%"
+            role="cell">
+            <div :class="$style.tableBarContent">
+                <slot/>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useTableInjection } from '$flux/composable';
+    import { clsx } from 'clsx';
+    import $style from '$flux/css/component/Table.module.scss';
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const {
+        isBordered,
+        isHoverable,
+        isSeparated,
+        isStriped
+    } = useTableInjection();
+</script>

package/src/component/FluxTableCell.vue

@@ -12,7 +12,8 @@
             <div
                 :class="$style.tableCellContent"
                 :style="{
-                    flexFlow: contentDirection
+                    flexFlow: contentDirection,
+                    gap: contentGap && `${contentGap}px`
                 }">
                 <slot/>
             </div>
@@ -31,6 +32,7 @@
         contentDirection = 'row'
     } = defineProps<{
         readonly contentDirection?: 'column' | 'row';
+        readonly contentGap?: number;
     }>();
 
     defineSlots<{

package/src/component/FluxTabs.vue

@@ -33,7 +33,7 @@
     setup>
     import { flattenVNodeTree, getComponentProps } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { computed, ref, unref, type VNode, watch } from 'vue';
     import { FluxWindowTransition } from '$flux/transition';
     import { VNodeRenderer } from './primitive';
     import FluxTabBar from './FluxTabBar.vue';

package/src/component/FluxTooltip.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, PropType, ref, SlotsType, VNode } from 'vue';
+    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, type PropType, ref, type SlotsType, type VNode } from 'vue';
     import { addTooltip, removeTooltip } from '$flux/data';
 
     export default defineComponent({
@@ -20,12 +20,14 @@
                 const elm = instance.proxy!.$el;
                 elm.addEventListener('mouseenter', onHover, {passive: true});
                 elm.addEventListener('mouseleave', onLeave, {passive: true});
+                window.addEventListener('scroll', onLeave, {capture: true});
             });
 
             onUnmounted(() => {
                 const elm = instance.proxy!.$el;
                 elm.removeEventListener('mouseenter', onHover);
                 elm.removeEventListener('mouseleave', onLeave);
+                window.removeEventListener('scroll', onLeave);
                 onLeave();
             });
 

package/src/component/FluxTooltipProvider.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { computed, defineComponent, h, ref, unref, watch } from 'vue';
-    import { useFluxStore } from '$flux/data';
+    import { computed, defineComponent, h, provide, ref, unref, watch } from 'vue';
+    import { FluxTooltipInjectionKey, useFluxStore } from '$flux/data';
     import { FluxTooltipTransition } from '$flux/transition';
     import $style from '$flux/css/component/Tooltip.module.scss';
 
@@ -60,7 +60,11 @@
             }
         }
 
-        watch(content, () => requestAnimationFrame(() => calculate()));
+        provide(FluxTooltipInjectionKey, {
+            calculate
+        });
+
+        watch(content, () => requestAnimationFrame(calculate));
 
         return () => h(FluxTooltipTransition, {}, {
             default: () => {

package/src/component/index.ts

@@ -35,6 +35,7 @@ export { default as FluxExpandableGroup } from './FluxExpandableGroup.vue';
 export { default as FluxFader } from './FluxFader.vue';
 export { default as FluxFaderItem } from './FluxFaderItem.vue';
 export { default as FluxFilter } from './FluxFilter.vue';
+export { default as FluxFilterBar } from './FluxFilterBar.vue';
 export { default as FluxFilterDate } from './FluxFilterDate.vue';
 export { default as FluxFilterDateRange } from './FluxFilterDateRange.vue';
 export { default as FluxFilterOption } from './FluxFilterOption.vue';
@@ -53,6 +54,7 @@ export { default as FluxFormDateRangeInput } from './FluxFormDateRangeInput.vue'
 export { default as FluxFormDateTimeInput } from './FluxFormDateTimeInput.vue';
 export { default as FluxFormField } from './FluxFormField.vue';
 export { default as FluxFormFieldAddition } from './FluxFormFieldAddition.vue';
+export { default as FluxFormGrid } from './FluxFormGrid.vue';
 export { default as FluxFormInput } from './FluxFormInput.vue';
 export { default as FluxFormInputAddition } from './FluxFormInputAddition.vue';
 export { default as FluxFormInputGroup } from './FluxFormInputGroup.vue';
@@ -73,6 +75,11 @@ export { default as FluxGridPattern } from './FluxGridPattern.vue';
 export { default as FluxIcon } from './FluxIcon.vue';
 export { default as FluxInfo } from './FluxInfo.vue';
 export { default as FluxInfoStack } from './FluxInfoStack.vue';
+export { default as FluxItem } from './FluxItem.vue';
+export { default as FluxItemActions } from './FluxItemActions.vue';
+export { default as FluxItemContent } from './FluxItemContent.vue';
+export { default as FluxItemMedia } from './FluxItemMedia.vue';
+export { default as FluxItemStack } from './FluxItemStack.vue';
 export { default as FluxLegend } from './FluxLegend.vue';
 export { default as FluxLink } from './FluxLink.vue';
 export { default as FluxMenu } from './FluxMenu.vue';
@@ -83,7 +90,9 @@ export { default as FluxMenuSubHeader } from './FluxMenuSubHeader.vue';
 export { default as FluxMenuTitle } from './FluxMenuTitle.vue';
 export { default as FluxNotice } from './FluxNotice.vue';
 export { default as FluxNoticeStack } from './FluxNoticeStack.vue';
+export { default as FluxOverflowBar } from './FluxOverflowBar.vue';
 export { default as FluxOverlay } from './FluxOverlay.vue';
+export { default as FluxOverlayProvider } from './FluxOverlayProvider.vue';
 export { default as FluxPagination } from './FluxPagination.vue';
 export { default as FluxPaginationBar } from './FluxPaginationBar.vue';
 export { default as FluxPane } from './FluxPane.vue';
@@ -99,12 +108,14 @@ export { default as FluxPersona } from './FluxPersona.vue';
 export { default as FluxPlaceholder } from './FluxPlaceholder.vue';
 export { default as FluxPressable } from './FluxPressable.vue';
 export { default as FluxPrimaryButton } from './FluxPrimaryButton.vue';
+export { default as FluxPrimaryLinkButton } from './FluxPrimaryLinkButton.vue';
 export { default as FluxProgressBar } from './FluxProgressBar.vue';
 export { default as FluxPublishButton } from './FluxPublishButton.vue';
 export { default as FluxQuantitySelector } from './FluxQuantitySelector.vue';
 export { default as FluxRemove } from './FluxRemove.vue';
 export { default as FluxRoot } from './FluxRoot.vue';
 export { default as FluxSecondaryButton } from './FluxSecondaryButton.vue';
+export { default as FluxSecondaryLinkButton } from './FluxSecondaryLinkButton.vue';
 export { default as FluxSegmentedControl } from './FluxSegmentedControl.vue';
 export { default as FluxSegmentedView } from './FluxSegmentedView.vue';
 export { default as FluxSeparator } from './FluxSeparator.vue';
@@ -126,6 +137,7 @@ export { default as FluxTabBarItem } from './FluxTabBarItem.vue';
 export { default as FluxTabs } from './FluxTabs.vue';
 export { default as FluxTable } from './FluxTable.vue';
 export { default as FluxTableActions } from './FluxTableActions.vue';
+export { default as FluxTableBar } from './FluxTableBar.vue';
 export { default as FluxTableCell } from './FluxTableCell.vue';
 export { default as FluxTableHeader } from './FluxTableHeader.vue';
 export { default as FluxTableRow } from './FluxTableRow.vue';

package/src/component/primitive/AnchorPopup.vue

@@ -13,10 +13,10 @@
 <script
     lang="ts"
     setup>
+    import { useMutationObserver } from '@basmilius/common';
     import { isHtmlElement } from '@basmilius/utils';
-    import { useMutationObserver } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
-    import { ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
+    import { type ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
 
     const {
         anchor,
@@ -150,10 +150,14 @@
                     px = x + width / 2 - popupWidth / 2;
                     py = y + height + margin;
 
-                    if (py + popupHeight > innerHeight) {
+                    if (py + popupHeight + margin > innerHeight) {
                         py = y - popupHeight - margin;
                     }
                 }
+
+                if (py < 0 || py + popupHeight > innerHeight) {
+                    py = innerHeight / 2 - popupHeight / 2;
+                }
                 break;
         }
 
@@ -188,7 +192,9 @@
 
         anchorRef.value = isHtmlElement(anchor) ? anchor : anchor.$el;
 
-        requestAnimationFrame(resize);
-        requestAnimationFrame(reposition);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resize);
+            requestAnimationFrame(reposition);
+        });
     });
 </script>

package/src/component/primitive/FilterBadge.vue

@@ -0,0 +1,43 @@
+<template>
+    <FluxBadge
+        v-if="valueLabel"
+        :class="$style.filterBadge"
+        :is-loading="isLoading"
+        :label="valueLabel"
+        @click="onClick"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useLoaded } from '@basmilius/common';
+    import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+    import { computed, ref, unref, watch } from 'vue';
+    import { FluxBadge } from '$flux/component';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        item,
+        value
+    } = defineProps<{
+        readonly item: FluxFilterItem;
+        readonly value: FluxFilterValue;
+    }>();
+
+    const {isLoading, loaded} = useLoaded();
+    const getValueLabel = computed(() => loaded(item.getValueLabel));
+
+    const valueLabel = ref<string>();
+
+    function onClick(evt: MouseEvent): void {
+        emit('click', evt);
+    }
+
+    watch([() => item, () => value], async () => {
+        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    }, {deep: true, immediate: true});
+</script>

package/src/component/primitive/FilterItem.vue

@@ -12,9 +12,9 @@
 <script
     lang="ts"
     setup>
+    import { useLoaded } from '@basmilius/common';
     import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
-    import { useLoaded } from '$flux/composable/private';
     import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
 
     const emit = defineEmits<{