@flux-ui/components 3.0.0-next.57 → 3.0.0-next.59

package/src/component/FluxPaginationButton.vue

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

package/src/component/FluxPane.vue

@@ -23,7 +23,7 @@
     setup>
     import type { VNode } from 'vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const CLASS_MAP = {
         default: $style.paneDefault,

package/src/component/FluxPaneBody.vue

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

package/src/component/FluxPaneFooter.vue

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

package/src/component/FluxPaneGroup.vue

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

package/src/component/FluxPaneHeader.vue

@@ -27,10 +27,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     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;

package/src/component/FluxPaneIllustration.vue

@@ -38,7 +38,7 @@
     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,

package/src/component/FluxPaneMedia.vue

@@ -16,7 +16,7 @@
     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

package/src/component/FluxPercentageBar.vue

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

@@ -41,8 +41,8 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import type { VNode } from 'vue';
 
     const emit = defineEmits<{
         click: [MouseEvent];

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

@@ -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/FluxProgressBar.vue

@@ -41,9 +41,9 @@
     lang="ts"
     setup>
     import { computed, unref } from 'vue';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Progress.module.scss';
+    import $style from '~flux/components/css/component/Progress.module.scss';
 
     const {
         isIndeterminate,

package/src/component/FluxPrompt.vue

@@ -31,7 +31,7 @@
     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 FluxPrimaryButton from './FluxPrimaryButton.vue';

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

package/src/component/FluxRemove.vue

@@ -19,9 +19,9 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { useTranslate } from '$flux/composable/private';
+    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];

package/src/component/FluxRoot.vue

@@ -15,11 +15,11 @@
     lang="ts"
     setup>
     import { type VNode, watch } from 'vue';
-    import { useFluxStore } from '$flux/data';
+    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

package/src/component/FluxRow.vue

@@ -10,7 +10,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Layout.module.scss';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 
     const {
         gap = 18

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

@@ -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/FluxSegmentedControl.vue

@@ -53,7 +53,7 @@
     import { clsx } from 'clsx';
     import { onBeforeUnmount, ref, unref, useTemplateRef, watchEffect } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/SegmentedControl.module.scss';
+    import $style from '~flux/components/css/component/SegmentedControl.module.scss';
 
     const modelValue = defineModel<number>({
         default: 0

package/src/component/FluxSeparator.vue

@@ -9,7 +9,7 @@
     lang="ts"
     setup>
     import type { FluxDirection } from '@flux-ui/types';
-    import $style from '$flux/css/component/Divider.module.scss';
+    import $style from '~flux/components/css/component/Divider.module.scss';
 
     const {
         direction = 'horizontal'

package/src/component/FluxSlideOver.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { FluxSlideOverTransition } from '$flux/transition';
-    import { createDialogRenderer } from '$flux/util';
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import { FluxSlideOverTransition } from '~flux/components/transition';
+    import { createDialogRenderer } from '~flux/components/util';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     export default defineComponent({
         emits: ['close'],

package/src/component/FluxSnackbar.vue

@@ -75,12 +75,12 @@
     import type { FluxColor, FluxIconName, FluxSnackbarObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
-    import { addSnackbar, removeSnackbar, updateSnackbar } from '$flux/data';
+    import { addSnackbar, removeSnackbar, updateSnackbar } from '~flux/components/data';
     import FluxAction from './FluxAction.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxProgressBar from './FluxProgressBar.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Snackbar.module.scss';
+    import $style from '~flux/components/css/component/Snackbar.module.scss';
 
     const emit = defineEmits<{
         action: [string];

package/src/component/FluxSnackbarProvider.vue

@@ -22,9 +22,9 @@
     lang="ts"
     setup>
     import type { FluxSnackbarObject } from '@flux-ui/types';
-    import { useFluxStore } from '$flux/data';
+    import { useFluxStore } from '~flux/components/data';
     import FluxSnackbar from './FluxSnackbar.vue';
-    import $style from '$flux/css/component/Snackbar.module.scss';
+    import $style from '~flux/components/css/component/Snackbar.module.scss';
 
     const {snackbars} = useFluxStore();
 

package/src/component/FluxSpacer.vue

@@ -5,5 +5,5 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Layout.module.scss';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 </script>

package/src/component/FluxSpinner.vue

@@ -40,7 +40,7 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Spinner.module.scss';
+    import $style from '~flux/components/css/component/Spinner.module.scss';
 
     defineProps<{
         readonly size?: number;

package/src/component/FluxSplitButton.vue

@@ -27,11 +27,11 @@
 <script
     setup
     lang="ts">
-    import type { VNode } from 'vue';
     import type { FluxDirection, FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     const {
         buttonIcon = 'ellipsis-h'

package/src/component/FluxStack.vue

@@ -18,10 +18,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Layout.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 
     const {
         direction = 'vertical',

package/src/component/FluxStatistic.vue

@@ -57,10 +57,10 @@
     import { MDASH } from '@basmilius/utils';
     import type { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import FluxBoxedIcon from './FluxBoxedIcon.vue';
     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';
+    import $style from '~flux/components/css/component/Statistic.module.scss';
 
     const {
         changeColor = 'gray',

package/src/component/FluxStepper.vue

@@ -24,7 +24,7 @@
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
     import { computed, ref, unref, type VNode, watch } from 'vue';
-    import { FluxWindowTransition } from '$flux/transition';
+    import { FluxWindowTransition } from '~flux/components/transition';
     import FluxDynamicView from './FluxDynamicView.vue';
     import FluxStepperSteps from './FluxStepperSteps.vue';
 

package/src/component/FluxStepperStep.vue

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

package/src/component/FluxStepperSteps.vue

@@ -38,9 +38,9 @@
     setup>
     import { clsx } from 'clsx';
     import { computed } from 'vue';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Stepper.module.scss';
+    import $style from '~flux/components/css/component/Stepper.module.scss';
 
     const emit = defineEmits<{
         activate: [number];

package/src/component/FluxTab.vue

@@ -9,9 +9,9 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxIconName } from '@flux-ui/types';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Tab.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/component/FluxTabBar.vue

@@ -1,6 +1,6 @@
 <template>
     <nav
-        :class="$style.tabBar"
+        :class="isPills ? $style.tabBarPills : $style.tabBarDefault"
         role="tablist"
         aria-orientation="horizontal">
         <FluxFadeTransition>
@@ -17,10 +17,17 @@
         <div
             ref="tabBar"
             :class="clsx(
-                $style.tabBarTabs,
+                isPills ? $style.tabBarTabsPills : $style.tabBarTabsDefault,
                 isEndArrowVisible && $style.isEndMasked,
                 isStartArrowVisible && $style.isStartMasked
             )">
+            <div
+                v-if="activeItemWidth > 0"
+                :class="isPills ? $style.tabBarHighlightPills : $style.tabBarHighlightDefault"
+                :style="{
+                    left: `${activeItemX}px`,
+                    width: `${activeItemWidth}px`
+                }"/>
             <slot/>
         </div>
 
@@ -40,13 +47,18 @@
 <script
     lang="ts"
     setup>
-    import { useMutationObserver } from '@basmilius/common';
+    import { useMutationObserver, useResizeObserver } from '@basmilius/common';
     import { unrefTemplateElement, useEventListener } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { onMounted, ref, useTemplateRef, type VNode } from 'vue';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { onMounted, provide, ref, toRef, useTemplateRef, watch, type Ref, type VNode } from 'vue';
+    import { FluxTabBarInjectionKey } from '~flux/components/data';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import $style from '~flux/components/css/component/Tab.module.scss';
+
+    const { isPills } = defineProps<{
+        readonly isPills?: boolean;
+    }>();
 
     defineSlots<{
         default(): VNode[];
@@ -55,13 +67,38 @@
     const tabBarRef = useTemplateRef<HTMLElement>('tabBar');
 
     useEventListener(tabBarRef, 'scroll', () => checkScroll());
-    useMutationObserver(tabBarRef, () => checkScroll(), {childList: true});
+    useMutationObserver(tabBarRef, () => {
+        checkScroll();
+        updateHighlight();
+    }, {childList: true});
+    useResizeObserver(tabBarRef, () => updateHighlight());
 
     const isEndArrowVisible = ref(false);
     const isStartArrowVisible = ref(false);
+    const activeItemX = ref(0);
+    const activeItemWidth = ref(0);
+
+    const items = new Map<Element, Ref<boolean>>();
+    const itemUnwatchers = new Map<Element, () => void>();
 
     onMounted(() => checkScroll());
 
+    provide(FluxTabBarInjectionKey, {
+        isPills: toRef(() => isPills ?? false),
+        registerItem(element, isActive) {
+            items.set(element, isActive);
+            const unwatch = watch(isActive, () => updateHighlight(), {flush: 'post', immediate: true});
+            itemUnwatchers.set(element, unwatch);
+        },
+        unregisterItem(element) {
+            const unwatch = itemUnwatchers.get(element);
+            unwatch?.();
+            itemUnwatchers.delete(element);
+            items.delete(element);
+            updateHighlight();
+        }
+    });
+
     function checkScroll(): void {
         const tabBar = unrefTemplateElement(tabBarRef)!;
 
@@ -75,6 +112,37 @@
         isStartArrowVisible.value = tabBar.scrollLeft > 0;
     }
 
+    function updateHighlight(): void {
+        const tabBar = unrefTemplateElement(tabBarRef);
+
+        if (!tabBar) {
+            return;
+        }
+
+        let activeElement: HTMLElement | null = null;
+
+        for (const [element, isActive] of items) {
+            if (isActive.value) {
+                activeElement = element as HTMLElement;
+                break;
+            }
+        }
+
+        if (!activeElement) {
+            activeItemWidth.value = 0;
+            return;
+        }
+
+        const width = activeElement.offsetWidth;
+
+        if (width === 0) {
+            return;
+        }
+
+        activeItemX.value = activeElement.offsetLeft;
+        activeItemWidth.value = width;
+    }
+
     function scrollToEnd(): void {
         const tabBar = unrefTemplateElement(tabBarRef)!;
         tabBar.scrollBy({

package/src/component/FluxTabBarItem.vue

@@ -2,7 +2,7 @@
     <FluxPressable
         ref="tab"
         :component-type="type"
-        :class="isActive ? $style.tabBarItemActive : $style.tabBarItem"
+        :class="itemClass"
         type="button"
         role="tab"
         :aria-disabled="disabled ? true : undefined"
@@ -29,11 +29,11 @@
     lang="ts"
     setup>
     import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
-    import { type ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled, useTabBarInjection } from '~flux/components/composable';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import $style from '~flux/components/css/component/Tab.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -58,8 +58,39 @@
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
+    const tabBar = useTabBarInjection();
     const tabRef = useTemplateRef<ComponentPublicInstance>('tab');
 
+    const itemClass = computed(() => {
+        if (tabBar.isPills.value) {
+            return isActive ? $style.tabBarItemPillsActive : $style.tabBarItemPills;
+        }
+
+        return isActive ? $style.tabBarItemDefaultActive : $style.tabBarItemDefault;
+    });
+
+    let registeredElement: Element | null = null;
+
+    onMounted(() => {
+        const tab = unref(tabRef);
+
+        if (!tab) {
+            return;
+        }
+
+        registeredElement = tab.$el;
+        tabBar.registerItem(registeredElement!, toRef(() => !!isActive));
+    });
+
+    onBeforeUnmount(() => {
+        if (!registeredElement) {
+            return;
+        }
+
+        tabBar.unregisterItem(registeredElement);
+        registeredElement = null;
+    });
+
     function onClick(evt: MouseEvent): void {
         if (unref(disabled)) {
             evt.preventDefault();

package/src/component/FluxTable.vue

@@ -45,14 +45,13 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
-    import { provide } from 'vue';
-    import { FluxTableInjectionKey } from '$flux/data';
+    import { provide, type VNode } from 'vue';
+    import { FluxTableInjectionKey } from '~flux/components/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';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     const {
         captionSide = 'bottom',