dashboard-components

This is a vue3 component library, aimed at offering components for dashboards.

Quick start

1. Install the library in your project

npm install @gigapiu/dashboard-components

2. Import the styles in your project entrypoint, like src/index.ts, or anywhere else as long as it's before you import use the components of the library. Not doing so might cause flashes in the page that uses the components, since the styles are being recalculated

import "@gigapiu/dashboard-components/style.css";

3. Now you can start using the components. Here is an example page to help you get started

<script setup lang="ts">
import "@gigapiu/dashboard-components/style.css";
import {
  DashboardCard,
  DoubleGauge,
  FancyGrid,
  ProgressBar,
} from "@gigapiu/dashboard-components";
</script>

<template>
  <h1>Example Dashboard</h1>
  <FancyGrid :number="4" cell-width="1fr" gap="16px">
    <DashboardCard title="Temperature">
      <DoubleGauge
        :main-value="75"
        :secondary-value="40"
        main-gauge-color="orange"
        secondary-gauge-color="red"
        unit="C°"
        before-secondary-value="Setpoint"
      />
    </DashboardCard>

    <DashboardCard title="Progress">
      <ProgressBar
        :value="70"
        label="Progress"
        progress-label="70"
        progress-label-color="white"
        progress-color="darkgreen"
      />
    </DashboardCard>
  </FancyGrid>
</template>

Components

DynamicForm

A dynamic form is a component that generates a form from a schema prop, and saves the values in the modelValue.

A schema is an array of fields, which might be of type: label, checkbox, text, number, select, radio, slot, group.

All the fields share the same fields, like:

• label: Some text that will appear before the field
• disabledBind: The name of a field in the model. Will disable the field (if it can be disabled) if the value in the pointed field is truthy
• disableWhen: A boolean, a function that returns a boolean, a boolean ref, or a computed boolean. Will disable the field (if it can be disabled) if the value is true.
• styles: Css styles that will be applied to the field