Flux

Pill ​

FluxFlowPill is a compact node: a tinted icon and a label on a raised pill. Where a Card describes a step in full, a pill names one, which makes it a natural head for a flow, the trigger that everything below hangs off.

Order Released

Props

icon: FluxIconName
The icon shown in the leading tile.

label: string
The text of the pill.

color?: FluxColor
The tint of the leading icon.

isLoading?: boolean
Replaces the leading icon with a spinner in the same tinted tile, for a node that is currently running.

Examples ​

In a flow

A pill starts the flow and connects to the rest of the canvas like any other node.

Order Released
Ships from the EU

<template>
    <FluxFlow :padding="21">
        <FluxFlowNode id="trigger" :x="69" :y="0">
            <FluxFlowPill color="info" icon="bolt" label="Order Released"/>
        </FluxFlowNode>

        <FluxFlowNode id="check" :x="0" :y="120">
            <FluxFlowConditionCard title="Ships from the EU"/>
        </FluxFlowNode>

        <FluxFlowConnection from="trigger" to="check"/>
    </FluxFlow>
</template>

<script
    setup
    lang="ts">
    import { FluxFlow, FluxFlowConditionCard, FluxFlowConnection, FluxFlowNode, FluxFlowPill } from '@flux-ui/flow';
</script>

Loading

Set isLoading to swap the leading icon for a spinner in the same tinted tile. A chain of pills walks itself: the running stage spins, finished ones flip to a check.

Fetch orders
Enrich records
Publish

<template>
    <div style="display: flex; justify-content: center; gap: 15px; padding: 12px 0">
        <FluxFlowPill
            v-for="(stage, index) of STAGES"
            :key="stage.label"
            :color="colorOf(index)"
            :icon="iconOf(index, stage.icon)"
            :label="stage.label"
            :is-loading="index === running"/>
    </div>
</template>

<script
    setup
    lang="ts">
    import type { FluxColor, FluxIconName } from '@flux-ui/types';
    import { FluxFlowPill } from '@flux-ui/flow';
    import { onBeforeUnmount, onMounted, ref } from 'vue';

    const STAGES: { readonly icon: FluxIconName; readonly label: string }[] = [
        {icon: 'database', label: 'Fetch orders'},
        {icon: 'wand-magic-sparkles', label: 'Enrich records'},
        {icon: 'paper-plane', label: 'Publish'}
    ];

    const running = ref(0);

    let interval = 0;

    onMounted(() => {
        interval = setInterval(() => (running.value = (running.value + 1) % (STAGES.length + 1)), 1600);
    });

    onBeforeUnmount(() => clearInterval(interval));

    function colorOf(index: number): FluxColor {
        if (index < running.value) {
            return 'success';
        }

        return index === running.value ? 'primary' : 'gray';
    }

    function iconOf(index: number, icon: FluxIconName): FluxIconName {
        return index < running.value ? 'circle-check' : icon;
    }
</script>

Used components ​