open-index/open-npm huggingface dataset:
npm package: @gigapiu/dashboard-components
Description: This is a vue3 component library, aimed at offering components for dashboards.
Latest version: 1.0.0

# dashboard-components

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

## Quick start

1. Install the library in your project

```bash
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

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

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

```vue
<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