@flux-ui/components 3.0.0-next.8 → 3.0.0

package/src/component/FluxPercentageBar.vue

@@ -1,45 +0,0 @@
-<template>
-    <div :class="$style.percentageBar">
-        <div :class="$style.percentageBarTrack">
-            <FluxTooltip v-for="item of items">
-                <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/css/component/PercentageBar.module.scss';
-
-    defineProps<{
-        readonly isLegendVisible?: boolean;
-        readonly items: FluxPercentageBarItemObject[];
-    }>();
-</script>

package/src/component/FluxSegmentedView.vue

@@ -1,15 +0,0 @@
-<script lang="ts">
-    import { defineComponent } from 'vue';
-
-    export default defineComponent({
-        props: {
-            index: Number
-        },
-        setup(props, {slots}) {
-            return () => {
-                const items = slots.default!();
-                return items[props.index!];
-            };
-        }
-    });
-</script>

package/src/component/FluxStack.vue

@@ -1,40 +0,0 @@
-<template>
-    <Component
-        :is="tag ?? 'div'"
-        :class="clsx(
-            direction === 'horizontal' && $style.stackHorizontal,
-            direction === 'vertical' && $style.stackVertical,
-            isCentered && $style.isCentered,
-            isFill && $style.isFill,
-            isWrapping && $style.isWrapping
-        )"
-        :style="{
-            '--gap': gap && `${gap}px`
-        }">
-        <slot/>
-    </Component>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import type { FluxDirection } from '@flux-ui/types';
-    import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Layout.module.scss';
-
-    const {
-        direction = 'vertical',
-        gap = 30
-    } = defineProps<{
-        readonly direction?: FluxDirection;
-        readonly gap?: number;
-        readonly isCentered?: boolean;
-        readonly isFill?: boolean;
-        readonly isWrapping?: boolean;
-        readonly tag?: keyof HTMLElementTagNameMap;
-    }>();
-
-    defineSlots<{
-        default(): any;
-    }>();
-</script>

package/src/component/FluxStatistic.vue

@@ -1,68 +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
-        )">
-        <div :class="$style.statisticIcon">
-            <FluxIcon
-                :name="icon"
-                :size="24"/>
-        </div>
-
-        <div :class="$style.statisticData">
-            <span>{{ label }}</span>
-            <strong>{{ value }}</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 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';
-
-    const {
-        changeColor = 'gray',
-        color = 'gray',
-        direction = 'horizontal'
-    } = defineProps<{
-        readonly changeColor?: FluxColor;
-        readonly changeIcon?: FluxIconName;
-        readonly changeValue?: string;
-        readonly color?: FluxColor;
-        readonly direction?: FluxDirection;
-        readonly icon: FluxIconName;
-        readonly label: string;
-        readonly value: string;
-    }>();
-</script>

package/src/composable/private/useLoaded.ts

@@ -1,21 +0,0 @@
-import { computed, shallowRef, unref } from 'vue';
-
-export default function () {
-    const tasks = shallowRef(0);
-
-    const isLoading = computed(() => unref(tasks) > 0);
-
-    function loaded<T extends Function>(fn: T): T {
-        return (async (...args: any[]) => {
-            tasks.value++;
-
-            return await fn(...args)
-                .finally(() => tasks.value--);
-        }) as unknown as T;
-    }
-
-    return {
-        isLoading,
-        loaded
-    };
-}

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

@@ -1,30 +0,0 @@
-.legendHorizontal {
-    composes: stackHorizontal from './Layout.module.scss';
-
-    gap: 12px 21px;
-}
-
-.legendVertical {
-    composes: stackVertical from './Layout.module.scss';
-
-    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: 99px;
-    }
-}

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: 180ms var(--swift-out);
-    transition-property: height, margin;
-
-    &: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,118 +0,0 @@
-.statistic {
-    padding: 21px;
-    gap: 21px;
-
-    &.isGray .statisticIcon {
-        background: rgb(var(--gray-2));
-        color: rgb(var(--gray-7));
-    }
-
-    &.isPrimary .statisticIcon {
-        background: rgb(var(--primary-2));
-        color: rgb(var(--primary-7));
-    }
-
-    &.isDanger .statisticIcon {
-        background: rgb(var(--danger-2));
-        color: rgb(var(--danger-7));
-    }
-
-    &.isInfo .statisticIcon {
-        background: rgb(var(--info-2));
-        color: rgb(var(--info-7));
-    }
-
-    &.isSuccess .statisticIcon {
-        background: rgb(var(--success-2));
-        color: rgb(var(--success-7));
-    }
-
-    &.isWarning .statisticIcon {
-        background: rgb(var(--warning-2));
-        color: rgb(var(--warning-7));
-    }
-}
-
-.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: rgb(var(--primary-7));
-    }
-
-    &.isDanger {
-        color: rgb(var(--danger-7));
-    }
-
-    &.isInfo {
-        color: rgb(var(--info-7));
-    }
-
-    &.isSuccess {
-        color: rgb(var(--success-7));
-    }
-
-    &.isWarning {
-        color: rgb(var(--warning-7));
-    }
-}
-
-.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 {
-    display: flex;
-    height: 48px;
-    width: 48px;
-    align-items: center;
-    justify-content: center;
-    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;
-    }
-}

package/src/css/component/base/Grid.module.scss

@@ -1,8 +0,0 @@
-@layer flux-base {
-    .baseAutoGrid {
-        --min-column-width: 0;
-
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(calc(var(--min-column-width) * 1px), 1fr));
-    }
-}

package/src/data/filter.ts

@@ -1,9 +0,0 @@
-import type { FluxFilterOptionHeader, FluxFilterOptionItem } from '@flux-ui/types';
-
-export function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader {
-    return 'title' in obj;
-}
-
-export function isFluxFilterOptionItem(obj: object): obj is FluxFilterOptionItem {
-    return 'label' in obj && 'value' in obj;
-}

package/src/image/avatar-mask.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
-    <path d="M40.4 29a21 21 0 0 0 1.6-8 21 21 0 1 0-13 19.4A8 8 0 0 1 40.5 29Z"/>
-</svg>

package/tsconfig.json

@@ -1,45 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "esnext",
-        "useDefineForClassFields": true,
-        "module": "esnext",
-        "moduleResolution": "bundler",
-        "strict": true,
-        "jsx": "preserve",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "esModuleInterop": true,
-        "lib": [
-            "esnext",
-            "dom"
-        ],
-        "skipLibCheck": true,
-        "allowSyntheticDefaultImports": true,
-        "declaration": true,
-        "declarationMap": true,
-        "emitDeclarationOnly": true,
-        "outDir": "dist",
-        "baseUrl": ".",
-        "rootDir": "./src",
-        "paths": {
-            "$flux/*": ["src/*"]
-        }
-    },
-    "include": [
-        "./src/**/*.ts",
-        "./src/**/*.vue"
-    ],
-    "exclude": [
-        "dist",
-        "node_modules"
-    ],
-    "references": [
-        {
-            "path": "./tsconfig.node.json"
-        }
-    ],
-    "vueCompilerOptions": {
-        "target": 3.5,
-        "strictTemplates": false
-    }
-}