@flux-ui/components 3.0.0-next.74 → 3.0.0-next.75

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.74",
+    "version": "3.0.0-next.75",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -57,8 +57,8 @@
     "dependencies": {
         "@basmilius/common": "^3.40.0",
         "@basmilius/utils": "^3.40.0",
-        "@flux-ui/internals": "3.0.0-next.74",
-        "@flux-ui/types": "3.0.0-next.74",
+        "@flux-ui/internals": "3.0.0-next.75",
+        "@flux-ui/types": "3.0.0-next.75",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

package/src/component/index.ts

@@ -92,7 +92,6 @@ export { default as FluxItemMedia } from './FluxItemMedia.vue';
 export { default as FluxItemStack } from './FluxItemStack.vue';
 export { default as FluxLayerPane } from './FluxLayerPane.vue';
 export { default as FluxLayerPaneSecondary } from './FluxLayerPaneSecondary.vue';
-export { default as FluxLegend } from './FluxLegend.vue';
 export { default as FluxLink } from './FluxLink.vue';
 export { default as FluxMenu } from './FluxMenu.vue';
 export { default as FluxMenuCollapsible } from './FluxMenuCollapsible.vue';
@@ -115,7 +114,6 @@ export { default as FluxPaneGroup } from './FluxPaneGroup.vue';
 export { default as FluxPaneHeader } from './FluxPaneHeader.vue';
 export { default as FluxPaneIllustration } from './FluxPaneIllustration.vue';
 export { default as FluxPaneMedia } from './FluxPaneMedia.vue';
-export { default as FluxPercentageBar } from './FluxPercentageBar.vue';
 export { default as FluxPersona } from './FluxPersona.vue';
 export { default as FluxPlaceholder } from './FluxPlaceholder.vue';
 export { default as FluxPressable } from './FluxPressable.vue';
@@ -141,7 +139,6 @@ export { default as FluxSpinner } from './FluxSpinner.vue';
 export { default as FluxSplitButton } from './FluxSplitButton.vue';
 export { default as FluxSplitView } from './FluxSplitView.vue';
 export { default as FluxSplitViewPane } from './FluxSplitViewPane.vue';
-export { default as FluxStatistic } from './FluxStatistic.vue';
 export { default as FluxStepper } from './FluxStepper.vue';
 export { default as FluxStepperStep } from './FluxStepperStep.vue';
 export { default as FluxStepperSteps } from './FluxStepperSteps.vue';

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

@@ -7,7 +7,7 @@
     padding: 3px;
     background: var(--gray-50);
     border: 1px solid var(--surface-stroke);
-    border-radius: var(--radius-full);
+    border-radius: var(--radius);
 }
 
 .segmentedControlFill {
@@ -28,7 +28,7 @@
     top: 3px;
     bottom: 3px;
     background: var(--surface);
-    border-radius: var(--radius-full);
+    border-radius: calc(var(--radius) - 3px);
     box-shadow: var(--shadow-md);
     outline: 1px solid var(--surface-stroke);
     pointer-events: none;
@@ -68,21 +68,20 @@
         pointer-events: none;
     }
 
-    // Houd de inhoud boven de zwevende highlight.
     > * {
         position: relative;
         z-index: 1;
     }
 
-    // Verticale divider tussen twee aangrenzende inactieve items.
     & + &::before {
         content: '';
         position: absolute;
         top: 50%;
         left: -2px;
         height: 15px;
-        width: 1px;
-        background: var(--surface-stroke);
+        width: 2px;
+        background: var(--gray-100);
+        border-radius: 1px;
         transition: opacity 300ms var(--swift-out);
         translate: 0 -50%;
     }

package/dist/component/FluxLegend.vue.d.ts

@@ -1,8 +0,0 @@
-import { FluxDirection, FluxLegendObject } from '@flux-ui/types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly direction?: FluxDirection;
-    readonly items: FluxLegendObject[];
-};
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/component/FluxPercentageBar.vue.d.ts

@@ -1,8 +0,0 @@
-import { FluxPercentageBarItemObject } from '@flux-ui/types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly isLegendVisible?: boolean;
-    readonly items: FluxPercentageBarItemObject[];
-};
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/component/FluxStatistic.vue.d.ts

@@ -1,17 +0,0 @@
-import { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly changeColor?: FluxColor;
-    readonly changeIcon?: FluxIconName;
-    readonly changeValue?: string | number | null;
-    readonly color?: FluxColor;
-    readonly direction?: FluxDirection;
-    readonly icon?: FluxIconName;
-    readonly imageSrc?: string;
-    readonly imageAlt?: string;
-    readonly isLoading?: boolean;
-    readonly label: string;
-    readonly value?: string | number | null;
-};
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-export default _default;

package/src/component/FluxLegend.vue

@@ -1,27 +0,0 @@
-<template>
-    <div :class="direction === 'horizontal' ? $style.legendHorizontal : $style.legendVertical">
-        <span
-            v-for="(item, index) of items"
-            :key="index"
-            :class="$style.legendItem"
-            :style="{
-                '--color': item.color
-            }">
-            {{ item.label }}
-        </span>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import type { FluxDirection, FluxLegendObject } from '@flux-ui/types';
-    import $style from '~flux/components/css/component/Legend.module.scss';
-
-    const {
-        direction = 'horizontal'
-    } = defineProps<{
-        readonly direction?: FluxDirection;
-        readonly items: FluxLegendObject[];
-    }>();
-</script>

package/src/component/FluxPercentageBar.vue

@@ -1,47 +0,0 @@
-<template>
-    <div :class="$style.percentageBar">
-        <div :class="$style.percentageBarTrack">
-            <FluxTooltip
-                v-for="(item, index) of items"
-                :key="index">
-                <template #content>
-                    <div :class="$style.percentageBarTooltip">
-                        <FluxIcon
-                            v-if="item.icon"
-                            :name="item.icon"
-                            :size="16"/>
-
-                        <span>{{ formatPercentage(item.value) }} {{ item.label }}</span>
-                    </div>
-                </template>
-
-                <div
-                    :class="$style.percentageBarSegment"
-                    :style="{
-                        backgroundColor: item.color,
-                        flexGrow: item.value
-                    }"/>
-            </FluxTooltip>
-        </div>
-
-        <FluxLegend
-            v-if="isLegendVisible"
-            :items="items"/>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import { formatPercentage } from '@basmilius/utils';
-    import type { FluxPercentageBarItemObject } from '@flux-ui/types';
-    import FluxIcon from './FluxIcon.vue';
-    import FluxLegend from './FluxLegend.vue';
-    import FluxTooltip from './FluxTooltip.vue';
-    import $style from '~flux/components/css/component/PercentageBar.module.scss';
-
-    defineProps<{
-        readonly isLegendVisible?: boolean;
-        readonly items: FluxPercentageBarItemObject[];
-    }>();
-</script>

package/src/component/FluxStatistic.vue

@@ -1,82 +0,0 @@
-<template>
-    <FluxPane
-        :class="clsx(
-            direction === 'horizontal' && $style.statisticHorizontal,
-            direction === 'vertical' && $style.statisticVertical,
-            color === 'gray' && $style.isGray,
-            color === 'primary' && $style.isPrimary,
-            color === 'danger' && $style.isDanger,
-            color === 'info' && $style.isInfo,
-            color === 'success' && $style.isSuccess,
-            color === 'warning' && $style.isWarning
-        )"
-        :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 ?? MDASH }}</strong>
-        </div>
-
-        <div
-            v-if="changeIcon || changeValue"
-            :class="clsx(
-                $style.statisticChange,
-                changeColor === 'gray' && $style.isGray,
-                changeColor === 'primary' && $style.isPrimary,
-                changeColor === 'danger' && $style.isDanger,
-                changeColor === 'info' && $style.isInfo,
-                changeColor === 'success' && $style.isSuccess,
-                changeColor === 'warning' && $style.isWarning
-            )">
-            <span v-if="changeValue">{{ changeValue }}</span>
-
-            <FluxIcon
-                v-if="changeIcon"
-                :name="changeIcon"
-                :size="14"/>
-        </div>
-    </FluxPane>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    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/components/css/component/Statistic.module.scss';
-
-    const {
-        changeColor = 'gray',
-        color = 'gray',
-        direction = 'horizontal'
-    } = defineProps<{
-        readonly changeColor?: FluxColor;
-        readonly changeIcon?: FluxIconName;
-        readonly changeValue?: string | number | null;
-        readonly color?: FluxColor;
-        readonly direction?: FluxDirection;
-        readonly icon?: FluxIconName;
-        readonly imageSrc?: string;
-        readonly imageAlt?: string;
-        readonly isLoading?: boolean;
-        readonly label: string;
-        readonly value?: string | number | null;
-    }>();
-</script>

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

@@ -1,29 +0,0 @@
-.legendHorizontal {
-    display: flex;
-    gap: 12px 18px;
-}
-
-.legendVertical {
-    display: flex;
-    flex-flow: column;
-    gap: 12px;
-}
-
-.legendItem {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 6px;
-    font-size: 14px;
-    line-height: 1;
-
-    &::before {
-        display: block;
-        margin-top: 1px;
-        height: 12px;
-        width: 12px;
-        content: '';
-        flex: 0 0 12px;
-        background: var(--color);
-        border-radius: var(--radius-full);
-    }
-}

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

@@ -1,31 +0,0 @@
-.percentageBar {
-    display: flex;
-    flex-flow: column;
-    gap: 12px;
-}
-
-.percentageBarSegment {
-    height: 12px;
-    border-radius: calc(var(--radius) / 3);
-    transition: var(--transition-default);
-    transition-property: height, margin, flex-grow;
-
-    &:hover {
-        height: 16px;
-        margin-top: -2px;
-        margin-bottom: -2px;
-    }
-}
-
-.percentageBarTooltip {
-    display: flex;
-    align-items: center;
-    flex-flow: row nowrap;
-    gap: 9px;
-}
-
-.percentageBarTrack {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 3px;
-}

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

@@ -1,91 +0,0 @@
-.statistic {
-    padding: 18px;
-    flex-basis: 0;
-    flex-grow: 1;
-    gap: 18px;
-}
-
-.statisticChange {
-    display: flex;
-    align-items: center;
-    align-self: flex-end;
-    gap: 6px;
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 1;
-
-    &.isGray {
-        color: var(--foreground-prominent);
-    }
-
-    &.isPrimary {
-        color: var(--primary-600);
-    }
-
-    &.isDanger {
-        color: var(--danger-600);
-    }
-
-    &.isInfo {
-        color: var(--info-600);
-    }
-
-    &.isSuccess {
-        color: var(--success-600);
-    }
-
-    &.isWarning {
-        color: var(--warning-600);
-    }
-}
-
-.statisticData {
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-    gap: 9px;
-    line-height: 1;
-
-    :is(span) {
-        color: var(--foreground-secondary);
-    }
-
-    :is(strong) {
-        color: var(--foreground-prominent);
-        font-size: 24px;
-        font-weight: 700;
-    }
-}
-
-.statisticIcon :local(.icon) {
-    font-size: .45em;
-}
-
-.statisticImage {
-    height: 48px;
-    width: 48px;
-    border-radius: var(--radius);
-}
-
-.statisticHorizontal {
-    composes: statistic;
-
-    display: flex;
-}
-
-.statisticVertical {
-    composes: statistic;
-
-    display: flex;
-    align-items: center;
-    flex-flow: column;
-    text-align: center;
-
-    .statisticChange {
-        align-self: center;
-    }
-
-    .statisticData {
-        align-items: center;
-    }
-}