vue-dat-gui

!vue-dat-gui

> A Vue3 port of the popular dat.GUI library.

This is a lightweight graphical user interface to change variables in Javascript (or Typescript).
Useful for all your demos or experimental codes.

DEMO ✨

Check out the demo page.

$3

- cyrilf/microbios: Cellular automata simulation / Github
- ...
- _Feel free to submit a PR to add your website._

---

INSTALL 💻

$3

``
npm install --save @cyrilf/vue-dat-gui
`

Then the usage is:

`js
import { createApp } from "vue";
import VueDatGui from "@cyrilf/vue-dat-gui";
import "@cyrilf/vue-dat-gui/dist/style.css";

/ your code /
// ...

const app = createApp(App);
app.use(VueDatGui);

app.mount("#app");
`

$3

In your head tag, include the following code:

`html
rel="stylesheet"
href="https://unpkg.com/@cyrilf/vue-dat-gui@latest/dist/style.css"
/>

`

---

VERSIONS #️⃣

$3

The main branch contains code for Vue3. It's refering to the tags v1.x.

$3

The deprecated branch vue2 is for Vue2 support. It's refering to the tags v0.x.
You can find the README with all the required information for this version.

---

USAGE 🖱️

You can always refer to the public/index.html file for the most up-to-date example of how to use it. _(keep in mind that this is a demo version using the CDN version of Vue and vue-dat-gui, so it's a bit different than the usage in your app)_.

The demo page is also available.

In your view:

`html



`

In your javascript:

`js
//
`

---

Components

$3

The main menu that wraps all components. (required)

`html
v-model:open="isOpen"
open-text="Open Controls"
close-text="Close Controls"
close-position="bottom"
>


`

| Name | Type | Default | Description |
| ---------------- | --------------------- | ------------------ | ------------------------------------------ |
| v-model:open | Ref | true | 2ways binding to the open state of the GUI |
| open | boolean | true | 1way binding to the open state of the GUI |
| @update:open | Function | noop | Listener for the open change |
| open-text | boolean | 'Open controls' | Text for the open button |
| close-text | boolean | 'Close controls' | Text for the close button |
| close-position | 'bottom' \| 'top' | 'bottom' | Position of the close button |

$3

A checkbox element

`html

`

| Name | Type | Default | Description |
| ---------- | -------------- | ------- | ------------------ |
| v-model | Ref | false | 2ways binding |
| label | string | "" | Text for the label |
| disabled | boolean | false | disabled |

$3

A button element

`html

`

| Name | Type | Default | Description |
| ---------- | ---------- | ------- | ------------- |
| @click | Function | noop | Click handler |
| label | string | "" | Button text |
| disabled | boolean | false | disabled |

$3

A color-picker element

`html

`

| Name | Type | Default | Description |
| ---------- | ------------- | ------- | ------------------ |
| v-model | Ref | "" | 2ways binding |
| label | string | "" | Text for the label |
| disabled | boolean | false | disabled |

$3

A folder element

`html



`

| Name | Type | Default | Description |
| -------------- | -------------- | ------- | ------------------------------------------ |
| v-model:open | Ref | true | 2ways binding to the open state of the GUI |
| open | boolean | true | 1way binding to the open state of the GUI |
| @update:open | Function | noop | Listener for the open change |
| label | string | "" | Text for the folder |

$3

A number input element. If min and max are specified, then a slider is added.

`html
v-model="areaWidth"
:min="0"
:max="1000"
:step="5"
:showSlider="false"
label="Area width"
/>
`

| Name | Type | Default | Description |
| ---------- | ------------- | -------------------------- | ------------------ |
| v-model | Ref | "" | 2ways binding |
| min | number | Number.NEGATIVE_INFINITY | Minimum value |
| max | number | Number.POSITIVE_INFINITY | Maximum value |
| step | number | Read note below* | Incremental value |
| label | string | "" | Text for the label |
| disabled | boolean | false | disabled |

Note*: it's the "order of magnitude of the absolute difference between max and min and returns a power of 10 corresponding to that order of magnitude".

$3

A select element

`html

`

`
Type Item = { name: string; value: string; } | string | number
`

| Name | Type | Default | Description |
| ---------- | ------------------------------ | ------- | -------------------------- |
| v-model | Ref \| Ref | "" | 2ways binding |
| items | Item[] | [] | The options for the select |
| label | string | "" | Text for the label |
| disabled | boolean | false | disabled |

$3

A text input element

`html

`

| Name | Type | Default | Description |
| ---------- | ------------- | ------- | ------------------ |
| v-model | Ref | "" | 2ways binding |
| label | string | "" | Text for the label |
| disabled | boolean | false | disabled |

$3

`
./deploy
``

Feel free to open any Pull Request/Issues.

---

THANKS 👌

- dat.GUI for the initial project