@flux-ui/components 3.0.0-next.2 → 3.0.0-next.21

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

@@ -10,12 +10,21 @@
             color === 'success' && $style.isSuccess,
             color === 'warning' && $style.isWarning
         )">
-        <div :class="$style.statisticIcon">
+        <div
+            v-if="icon"
+            :class="$style.statisticIcon">
             <FluxIcon
                 :name="icon"
                 :size="24"/>
         </div>
 
+        <div v-else-if="imageSrc">
+            <img
+                :class="$style.statisticImage"
+                :src="imageSrc"
+                :alt="imageAlt"/>
+        </div>
+
         <div :class="$style.statisticData">
             <span>{{ label }}</span>
             <strong>{{ value }}</strong>
@@ -61,7 +70,9 @@
         readonly changeValue?: string;
         readonly color?: FluxColor;
         readonly direction?: FluxDirection;
-        readonly icon: FluxIconName;
+        readonly icon?: FluxIconName;
+        readonly imageSrc?: string;
+        readonly imageAlt?: string;
         readonly label: string;
         readonly value: string;
     }>();

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,14 +24,16 @@
             <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>
 
@@ -39,6 +43,7 @@
     import { unrefTemplateElement, useEventListener, useMutationObserver } 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/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/FluxTooltip.vue

@@ -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

@@ -84,6 +84,7 @@ export { default as FluxMenuTitle } from './FluxMenuTitle.vue';
 export { default as FluxNotice } from './FluxNotice.vue';
 export { default as FluxNoticeStack } from './FluxNoticeStack.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';

package/src/component/primitive/AnchorPopup.vue

@@ -150,7 +150,7 @@
                     px = x + width / 2 - popupWidth / 2;
                     py = y + height + margin;
 
-                    if (py + popupHeight > innerHeight) {
+                    if (py + popupHeight + margin > innerHeight) {
                         py = y - popupHeight - margin;
                     }
                 }
@@ -188,7 +188,9 @@
 
         anchorRef.value = isHtmlElement(anchor) ? anchor : anchor.$el;
 
-        requestAnimationFrame(resize);
-        requestAnimationFrame(reposition);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resize);
+            requestAnimationFrame(reposition);
+        });
     });
 </script>

package/src/composable/index.ts

@@ -7,3 +7,4 @@ export { default as useFilterInjection } from './useFilterInjection';
 export { default as useFlyoutInjection } from './useFlyoutInjection';
 export { default as useFormFieldInjection } from './useFormFieldInjection';
 export { default as useTableInjection } from './useTableInjection';
+export { default as useTooltipInjection } from './useTooltipInjection';

package/src/composable/private/useFormSelect.ts

@@ -1,9 +1,9 @@
 import type { FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectOptions, FluxFormSelectValue } from '@flux-ui/types';
-import type { MaybeRef, Ref } from 'vue';
+import type { Ref } from 'vue';
 import { computed, unref } from 'vue';
 import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';
 
-export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: MaybeRef<FluxFormSelectEntry[]>, searchQuery?: Ref<string>) {
+export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: Ref<FluxFormSelectEntry[]>, searchQuery?: Ref<string>) {
     const values = computed(() => {
         const model = unref(modelValue);
         return Array.isArray(model) ? model : [model];

package/src/composable/useTooltipInjection.ts

@@ -0,0 +1,8 @@
+import { inject } from 'vue';
+import { FluxTooltipInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxTooltipInjectionKey, {
+        calculate: () => void 0
+    });
+}

package/src/css/base.scss

@@ -1,16 +1,19 @@
 @use 'variables';
 
 @layer flux-base {
-    :root, [light] {
+    :root {
         @include variables.animation;
+        @include variables.defaults;
+    }
+
+    :root, [light] {
         @include variables.color-light;
-        @include variables.default-light;
         @include variables.shadow-light;
     }
 
     [dark] {
+        @include variables.defaults-dark;
         @include variables.color-dark;
-        @include variables.default-dark;
         @include variables.shadow-dark;
     }
 

package/src/css/component/Action.module.scss

@@ -1,25 +1,22 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel from './base/Button.module.scss';
-@value basePaneStructure from './base/Pane.module.scss';
-
 .action {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     height: 30px;
     width: 30px;
     padding-left: 6px;
     padding-right: 6px;
     border: 0;
-    border-radius: calc(var(--radius) / 2);
+    border-radius: var(--radius);
     box-shadow: none;
 
     @include mixin.hover {
-        background: rgb(var(--gray-3));
+        background: var(--gray-2);
     }
 
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--gray-3);
     }
 
     .spinner {
@@ -28,18 +25,18 @@
 }
 
 .actionIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground);
     font-size: 18px;
 }
 
 .action.isDestructive .actionIcon {
-    color: rgb(var(--danger-7));
+    color: var(--danger-7);
 }
 
 .actionLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     color: var(--foreground);
 }
@@ -59,10 +56,10 @@
     }
 }
 
-:local(.basePaneStructure) > .actionBar {
+.basePaneStructure > .actionBar {
     padding: 15px 21px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-2));
+    background: var(--gray-1);
+    border: 1px solid var(--gray-2);
     border-left: 0;
     border-right: 0;
 
@@ -102,6 +99,9 @@
 
 .actionPaneBody {
     position: relative;
-    padding: 0;
     text-wrap: pretty;
+
+    &:local(.paneBody) {
+        padding: 0;
+    }
 }

package/src/css/component/Avatar.module.scss

@@ -14,9 +14,9 @@
     display: block;
     height: inherit;
     width: inherit;
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    box-shadow: inset 0 0 0 1px var(--gray-2);
 }
 
 .avatarFallback {
@@ -41,18 +41,18 @@
 .avatarFallbackColorized {
     composes: avatarFallback;
 
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 80%);
+    background: color-mix(in srgb, var(--color), var(--gray-0) 80%);
     color: var(--color);
 }
 
 [dark] .avatarFallbackColorized {
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 70%);
+    background: color-mix(in srgb, var(--color), var(--gray-0) 70%);
 }
 
 .avatarFallbackNeutral {
     composes: avatarFallback;
 
-    background: rgb(var(--gray-3));
+    background: var(--gray-2);
     color: var(--foreground-secondary);
 }
 
@@ -62,8 +62,8 @@
     inset: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-1) / .84);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    background: oklch(from var(--gray-1) l c h / .84);
+    box-shadow: inset 0 0 0 1px var(--gray-2);
     border-radius: inherit;
     backdrop-filter: blur(3px) saturate(180%);
 
@@ -86,37 +86,37 @@
 .avatarStatusGray {
     composes: avatarStatus;
 
-    background: rgb(var(--gray-6));
+    background: var(--gray-6);
 }
 
 .avatarStatusPrimary {
     composes: avatarStatus;
 
-    background: rgb(var(--primary-7));
+    background: var(--primary-7);
 }
 
 .avatarStatusDanger {
     composes: avatarStatus;
 
-    background: rgb(var(--danger-7));
+    background: var(--danger-7);
 }
 
 .avatarStatusInfo {
     composes: avatarStatus;
 
-    background: rgb(var(--info-7));
+    background: var(--info-7);
 }
 
 .avatarStatusSuccess {
     composes: avatarStatus;
 
-    background: rgb(var(--success-7));
+    background: var(--success-7);
 }
 
 .avatarStatusWarning {
     composes: avatarStatus;
 
-    background: rgb(var(--warning-7));
+    background: var(--warning-7);
 }
 
 .avatarClickable {
@@ -154,7 +154,7 @@
     @include mixin.focus-ring(2px);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 }
 

package/src/css/component/Badge.module.scss

@@ -10,8 +10,8 @@
     padding-right: 9px;
     align-items: center;
     gap: 6px;
-    background: rgb(var(--gray-0));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-0);
+    border: 1px solid var(--gray-2);
     border-radius: 99px;
     color: var(--foreground-prominent);
     font-size: 13px;
@@ -24,7 +24,7 @@
         transition: background 180ms var(--swift-out);
 
         @include mixin.hover {
-            background: rgb(var(--gray-1));
+            background: var(--gray-1);
             color: var(--foreground-prominent);
         }
     }
@@ -49,12 +49,12 @@
     cursor: pointer;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
         color: var(--foreground);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-3);
         color: var(--foreground);
     }
 
@@ -91,52 +91,52 @@
 .badgeGray {
     composes: badge;
 
-    --color: rgb(var(--gray-8));
+    --color: var(--gray-8);
 
     .badgeLabel {
         color: var(--foreground-prominent);
     }
 
     .spinner {
-        --value: rgb(var(--primary-7));
+        --value: var(--primary-7);
     }
 }
 
 .badgePrimary {
     composes: badge;
 
-    --color: rgb(var(--primary-7));
+    --color: var(--primary-7);
 }
 
 .badgeDanger {
     composes: badge;
 
-    --color: rgb(var(--danger-7));
+    --color: var(--danger-7);
 }
 
 .badgeInfo {
     composes: badge;
 
-    --color: rgb(var(--info-7));
+    --color: var(--info-7);
 }
 
 .badgeSuccess {
     composes: badge;
 
-    --color: rgb(var(--success-7));
+    --color: var(--success-7);
 }
 
 .badgeWarning {
     composes: badge;
 
-    --color: rgb(var(--warning-7));
+    --color: var(--warning-7);
 }
 
 .tag {
     composes: badge;
 
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-1);
+    border-color: var(--gray-2);
     border-radius: calc(var(--radius) / 2);
     font-weight: 400;
 }