├── public
    ├── favicon.ico
    ├── vue-dat-gui.png
    └── index.html
├── src
    ├── utils
    │   └── Number.ts
    ├── env.d.ts
    ├── index.ts
    └── components
    │   ├── index.ts
    │   ├── DatString.vue
    │   ├── DatButton.vue
    │   ├── DatBoolean.vue
    │   ├── DatSelect.vue
    │   ├── DatFolder.vue
    │   ├── private
    │       └── NumberSlider.vue
    │   ├── DatColor.vue
    │   ├── DatNumber.vue
    │   └── DatGui.vue
├── .gitignore
├── deploy.sh
├── tsconfig.json
├── LICENSE.md
├── .github
    └── workflows
    │   ├── build-deploy-gh-pages.yml
    │   └── npm-publish.yml
├── vite.config.ts
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vue-dat-gui/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/vue-dat-gui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vue-dat-gui/HEAD/public/vue-dat-gui.png


--------------------------------------------------------------------------------
/src/utils/Number.ts:
--------------------------------------------------------------------------------
1 | const clamp = (value: number, min: number, max: number) =>
2 |   Math.min(Math.max(value, min), max);
3 | 
4 | export { clamp };
5 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module "*.vue" {
4 |   import type { DefineComponent } from "vue";
5 |   const component: DefineComponent<{}, {}, any>;
6 |   export default component;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { App } from "vue";
 2 | import * as components from "./components";
 3 | 
 4 | const install = (app: App) => {
 5 |   for (const key in components) {
 6 |     // @ts-expect-error
 7 |     app.component(key, components[key]);
 8 |   }
 9 | };
10 | 
11 | export default { install };
12 | 
13 | export * from "./components";
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .DS_Store
 3 | dist
 4 | dist-ssr
 5 | *.local
 6 | docs/.vuepress/.cache
 7 | docs/.vuepress/.temp
 8 | types
 9 | 
10 | # local env files
11 | .env.local
12 | .env.*.local
13 | 
14 | # Log files
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 
19 | # Editor directories and files
20 | .idea
21 | .vscode
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
 1 | import DatBoolean from "./DatBoolean.vue";
 2 | import DatButton from "./DatButton.vue";
 3 | import DatColor from "./DatColor.vue";
 4 | import DatFolder from "./DatFolder.vue";
 5 | import DatGui from "./DatGui.vue";
 6 | import DatNumber from "./DatNumber.vue";
 7 | import DatSelect from "./DatSelect.vue";
 8 | import DatString from "./DatString.vue";
 9 | 
10 | export {
11 |   DatBoolean,
12 |   DatButton,
13 |   DatColor,
14 |   DatFolder,
15 |   DatGui,
16 |   DatNumber,
17 |   DatSelect,
18 |   DatString,
19 | };
20 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | ### LEGACY DEPLOY SCRIPT
 4 | # Now using a Github Action
 5 | 
 6 | # abort on errors
 7 | set -e
 8 | 
 9 | # build
10 | npm run build
11 | 
12 | # navigate into the build output directory
13 | cd dist
14 | 
15 | # if you are deploying to a custom domain
16 | # echo 'www.example.com' > CNAME
17 | 
18 | git init
19 | git add -A
20 | git commit -m 'deploy'
21 | 
22 | # if you are deploying to https://<USERNAME>.github.io
23 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
24 | 
25 | # if you are deploying to https://<USERNAME>.github.io/<REPO>
26 | git push -f git@github.com:cyrilf/vue-dat-gui.git main:gh-pages
27 | 
28 | cd -
29 | 


--------------------------------------------------------------------------------
/src/components/DatString.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from "vue";
 3 | 
 4 | interface Props {
 5 |   label?: string;
 6 |   disabled?: boolean;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   label: "",
11 |   disabled: false,
12 | });
13 | const isDisabled = computed(() => props.disabled);
14 | const string = defineModel({ type: String, default: "" });
15 | </script>
16 | 
17 | <template>
18 |   <li class="control-item string" :class="{ disabled: isDisabled }">
19 |     <label ref="label">
20 |       <span class="label-text">{{ label }}</span>
21 |       <div class="control">
22 |         <input type="text" v-model="string" :disabled="isDisabled" />
23 |       </div>
24 |     </label>
25 |   </li>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/src/components/DatButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from "vue";
 3 | 
 4 | interface Props {
 5 |   label?: string;
 6 |   disabled?: boolean;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   label: "",
11 |   disabled: false,
12 | });
13 | const isDisabled = computed(() => props.disabled);
14 | 
15 | const emit = defineEmits<{
16 |   click: [value: MouseEvent];
17 | }>();
18 | const handleClick = (event: MouseEvent) => {
19 |   if (isDisabled.value) return;
20 |   emit("click", event);
21 | };
22 | </script>
23 | 
24 | <template>
25 |   <li class="control-item button" :class="{ disabled: isDisabled }">
26 |     <label class="w-100" ref="label" @click="handleClick">
27 |       {{ label }}
28 |     </label>
29 |   </li>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["esnext", "dom"],
13 |     "declaration": true,
14 |     "emitDeclarationOnly": true,
15 |     "outDir": "dist",
16 |     "declarationDir": "./dist/types",
17 |     "isolatedModules": true,
18 |     "skipLibCheck": true,
19 |     "types": [
20 |       "vite/client"
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./src/*"]
24 |     }
25 |   },
26 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "src/index.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/DatBoolean.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from "vue";
 3 | 
 4 | interface Props {
 5 |   label?: string;
 6 |   disabled?: boolean;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   label: "",
11 |   disabled: false,
12 | });
13 | const isDisabled = computed(() => props.disabled);
14 | const checked = defineModel({ type: Boolean });
15 | const handleChange = () => {
16 |   checked.value = !checked.value;
17 | };
18 | </script>
19 | 
20 | <template>
21 |   <li class="control-item boolean" :class="{ disabled: isDisabled }">
22 |     <label ref="label">
23 |       <span class="label-text">{{ label }}</span>
24 |       <div class="control">
25 |         <input
26 |           type="checkbox"
27 |           :checked="checked"
28 |           @change="handleChange"
29 |           :disabled="isDisabled"
30 |         />
31 |       </div>
32 |     </label>
33 |   </li>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 cyrilf
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/.github/workflows/build-deploy-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy to Github Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 | 
 9 | jobs:
10 |   build-and-deploy:
11 |     runs-on: ubuntu-latest
12 |     permissions:
13 |       contents: write
14 |     concurrency:
15 |       group: ${{ github.workflow }}-${{ github.ref }}
16 | 
17 |     steps:
18 |       - name: Checkout repository
19 |         uses: actions/checkout@v4
20 | 
21 |       - name: Setup Node.js
22 |         uses: actions/setup-node@v4
23 |         with:
24 |           node-version: 20
25 |           cache: "npm"
26 | 
27 |       - name: Install dependencies
28 |         run: npm ci
29 | 
30 |       - name: Build project
31 |         run: npm run build
32 | 
33 |       - name: Deploy to GitHub Pages
34 |         uses: peaceiris/actions-gh-pages@v3
35 |         if: github.ref == 'refs/heads/main'
36 |         with:
37 |           github_token: ${{ secrets.GITHUB_TOKEN }}
38 |           publish_dir: ./dist
39 |           commit_message: ${{ github.event.head_commit.message }}
40 |           exclude_assets: ".github,vue-dat-gui.png,types/**/*.d.ts"
41 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import { fileURLToPath, URL } from "node:url";
 3 | import { defineConfig } from "vite";
 4 | import vue from "@vitejs/plugin-vue";
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     vue(),
 9 |     {
10 |       name: "watch-public",
11 |       buildStart() {
12 |         this.addWatchFile(path.resolve(__dirname, "public/index.html"));
13 |       },
14 |     },
15 |   ],
16 |   resolve: {
17 |     alias: {
18 |       "@": fileURLToPath(new URL("./src", import.meta.url)),
19 |     },
20 |   },
21 |   define: { "process.env.NODE_ENV": '"production"' },
22 |   build: {
23 |     lib: {
24 |       entry: path.resolve(__dirname, "src/index.ts"),
25 |       name: "vue-dat-gui",
26 |       formats: ["es"],
27 |       fileName: "vue-dat-gui",
28 |     },
29 |     rollupOptions: {
30 |       // external modules won't be bundled into your library
31 |       external: ["vue"],
32 |       output: {
33 |         // disable warning on src/index.ts using both default and named export
34 |         exports: "named",
35 |         globals: {
36 |           vue: "Vue",
37 |         },
38 |       },
39 |     },
40 |   },
41 | });
42 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish to npm
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - "*"
 7 | 
 8 | permissions:
 9 |   id-token: write
10 | 
11 | jobs:
12 |   build:
13 |     runs-on: ubuntu-latest
14 |     permissions:
15 |       contents: write
16 |     concurrency:
17 |       group: ${{ github.workflow }}-${{ github.ref }}
18 | 
19 |     steps:
20 |       - name: Checkout repository
21 |         uses: actions/checkout@v4
22 | 
23 |       - name: Setup Node.js
24 |         uses: actions/setup-node@v4
25 |         with:
26 |           node-version: 20
27 |           cache: "npm"
28 | 
29 |       - name: Install dependencies
30 |         run: npm ci
31 | 
32 |       - name: Build project
33 |         run: npm run build
34 | 
35 |   publish-npm:
36 |     needs: build
37 |     runs-on: ubuntu-latest
38 |     steps:
39 |       - name: Checkout repository
40 |         uses: actions/checkout@v4
41 | 
42 |       - name: Setup Node.js
43 |         uses: actions/setup-node@v4
44 |         with:
45 |           node-version: 20
46 |           cache: "npm"
47 |           registry-url: https://registry.npmjs.org/
48 |           scope: "@cyrilf"
49 | 
50 |       - name: Install dependencies
51 |         run: npm ci
52 | 
53 |       - run: npm publish --provenance
54 |         env:
55 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
56 | 


--------------------------------------------------------------------------------
/src/components/DatSelect.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from "vue";
 3 | 
 4 | interface Item {
 5 |   name: string;
 6 |   value: string;
 7 | }
 8 | 
 9 | interface Props {
10 |   label?: string;
11 |   items?: Item[] | string[] | number[];
12 |   disabled?: boolean;
13 | }
14 | 
15 | const props = withDefaults(defineProps<Props>(), {
16 |   label: "",
17 |   items: () => [],
18 |   disabled: false,
19 | });
20 | const isDisabled = computed(() => props.disabled);
21 | const selected = defineModel({ type: String, default: "" });
22 | const localItems = computed(() =>
23 |   props.items.map((item) =>
24 |     typeof item === "object"
25 |       ? item
26 |       : { name: (item || "").toString(), value: item }
27 |   )
28 | );
29 | </script>
30 | 
31 | <template>
32 |   <li class="control-item select" :class="{ disabled: isDisabled }">
33 |     <label ref="label">
34 |       <span class="label-text">{{ label }}</span>
35 |       <div class="control">
36 |         <select v-model="selected" class="w-100" :disabled="isDisabled">
37 |           <option
38 |             v-for="item in localItems"
39 |             :key="item.value"
40 |             :value="item.value"
41 |           >
42 |             {{ item.name }}
43 |           </option>
44 |         </select>
45 |       </div>
46 |     </label>
47 |   </li>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/src/components/DatFolder.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | interface Props {
 3 |   label?: string;
 4 | }
 5 | 
 6 | withDefaults(defineProps<Props>(), {
 7 |   label: "",
 8 | });
 9 | const isOpen = defineModel<boolean>("open", { default: true });
10 | const handleClick = () => {
11 |   isOpen.value = !isOpen.value;
12 | };
13 | </script>
14 | 
15 | <template>
16 |   <li class="folder">
17 |     <div ref="label" class="group">
18 |       <div class="text" @click="handleClick">
19 |         <div class="text--inner w-100">
20 |           <span class="symbol">{{ isOpen ? "▼" : "►" }}</span>
21 |           {{ label }}
22 |         </div>
23 |       </div>
24 |       <ul v-show="isOpen">
25 |         <slot></slot>
26 |       </ul>
27 |     </div>
28 |   </li>
29 | </template>
30 | 
31 | <style lang="css" scoped>
32 | .folder {
33 |   .text {
34 |     background: var(--darker-background-color);
35 |     font-weight: bold;
36 |     height: var(--row-height);
37 |     user-select: none;
38 |     cursor: pointer;
39 |     border-bottom: 1px solid var(--light-background-color);
40 |     position: relative;
41 |     display: flex;
42 |     justify-content: center;
43 |     align-items: center;
44 | 
45 |     .text--inner {
46 |       position: absolute;
47 |       left: 10px;
48 |       display: inline-flex;
49 |       align-items: center;
50 |     }
51 |     .symbol {
52 |       font-size: 0.5rem;
53 |       margin-right: 8px;
54 |     }
55 |   }
56 | 
57 |   ul {
58 |     margin-left: var(--nest-margin);
59 |     width: calc(100% - var(--nest-margin));
60 |   }
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@cyrilf/vue-dat-gui",
 3 |   "description": "A Vue3 port of the popular dat.GUI library",
 4 |   "version": "1.1.0",
 5 |   "scripts": {
 6 |     "build": "vite build && vue-tsc",
 7 |     "prepare": "npm run build",
 8 |     "postversion": "git push && git push --tags",
 9 |     "dev": "concurrently 'vite build --watch' 'npx live-server --cors dist'"
10 |   },
11 |   "dependencies": {
12 |     "vue3-colorpicker": "^2.2.3"
13 |   },
14 |   "peerDependencies": {
15 |     "vue": "^3.4.7"
16 |   },
17 |   "devDependencies": {
18 |     "@types/node": "^20.10.7",
19 |     "@vitejs/plugin-vue": "^5.0.2",
20 |     "concurrently": "^8.2.2",
21 |     "typescript": "^5.3.3",
22 |     "vite": "^7.0.0",
23 |     "vue-tsc": "^1.8.27"
24 |   },
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "git+ssh://git@github.com/cyrilf/vue-dat-gui.git"
28 |   },
29 |   "author": "cyrilf",
30 |   "homepage": "https://github.com/cyrilf/vue-dat-gui#readme",
31 |   "bugs": {
32 |     "url": "https://github.com/cyrilf/vue-dat-gui/issues"
33 |   },
34 |   "engines": {
35 |     "node": ">=20.10",
36 |     "npm": ">=10"
37 |   },
38 |   "keywords": [
39 |     "vue dat gui",
40 |     "vue",
41 |     "dat.gui"
42 |   ],
43 |   "main": "./dist/vue-dat-gui.js",
44 |   "type": "module",
45 |   "files": [
46 |     "dist"
47 |   ],
48 |   "types": "./dist/types/index.d.ts",
49 |   "exports": {
50 |     ".": {
51 |       "types": "./dist/types/index.d.ts",
52 |       "default": "./dist/vue-dat-gui.js"
53 |     },
54 |     "./dist/style.css": "./dist/style.css"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/components/private/NumberSlider.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed, ref } from "vue";
 3 | import { clamp } from "@/utils/Number";
 4 | 
 5 | interface Props {
 6 |   value: number;
 7 |   min: number;
 8 |   max: number;
 9 | }
10 | 
11 | const props = withDefaults(defineProps<Props>(), {});
12 | const emit = defineEmits<{
13 |   updateState: [value: number];
14 | }>();
15 | 
16 | const slider = ref<HTMLSpanElement | null>(null);
17 | 
18 | const bgWidth = computed(() =>
19 |   clamp(((props.value - props.min) * 100) / (props.max - props.min), 0, 100)
20 | );
21 | 
22 | const updateState = (pageX: number) => {
23 |   if (slider.value) {
24 |     const rect = slider.value.getBoundingClientRect();
25 |     const x = pageX - rect.left;
26 |     const width = rect.right - rect.left;
27 |     const value = props.min + clamp(x / width, 0, 1) * (props.max - props.min);
28 | 
29 |     emit("updateState", value);
30 |   }
31 | };
32 | 
33 | const handleMouseMove = (event: MouseEvent) => {
34 |   updateState(event.pageX);
35 | };
36 | const handleMouseUp = (event: MouseEvent) => {
37 |   updateState(event.pageX);
38 | 
39 |   window.removeEventListener("mousemove", handleMouseMove);
40 |   window.removeEventListener("mouseup", handleMouseUp);
41 | };
42 | 
43 | const handleMouseDown = (event: MouseEvent) => {
44 |   updateState(event.pageX);
45 | 
46 |   window.addEventListener("mousemove", handleMouseMove);
47 |   window.addEventListener("mouseup", handleMouseUp);
48 | };
49 | </script>
50 | 
51 | <template>
52 |   <span
53 |     ref="slider"
54 |     class="slider"
55 |     :style="{ 'background-size': `${bgWidth}% 100%` }"
56 |     @mousedown="handleMouseDown"
57 |   />
58 | </template>
59 | 
60 | <style lang="css" scoped>
61 | .slider {
62 |   height: 25px;
63 |   display: block;
64 |   position: relative;
65 |   cursor: ew-resize;
66 |   border: 1px solid var(--background-color);
67 |   background-color: var(--input-background-color);
68 |   background-image: linear-gradient(
69 |     90deg,
70 |     var(--number-color),
71 |     var(--number-color)
72 |   );
73 |   background-size: 0% 100%;
74 |   background-repeat: no-repeat;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/components/DatColor.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed, ref } from "vue";
 3 | import { ColorPicker } from "vue3-colorpicker";
 4 | import "vue3-colorpicker/style.css";
 5 | 
 6 | interface Props {
 7 |   label?: string;
 8 |   disabled?: boolean;
 9 | }
10 | 
11 | const props = withDefaults(defineProps<Props>(), {
12 |   label: "",
13 |   disabled: false,
14 | });
15 | const isDisabled = computed(() => props.disabled);
16 | const color = defineModel({ type: String, required: true });
17 | let showColorPicker = ref(false);
18 | 
19 | const inputColor = computed(() => {
20 |   if (color.value.length !== 7 || color.value[0] !== "#") {
21 |     return "black";
22 |   }
23 |   const r = parseInt(color.value.substring(1, 3), 16);
24 |   const g = parseInt(color.value.substring(3, 5), 16);
25 |   const b = parseInt(color.value.substring(5, 7), 16);
26 |   const yiq = (r * 299 + g * 587 + b * 114) / 1000;
27 |   return yiq >= 128 ? "black" : "white";
28 | });
29 | 
30 | const onKeyDown = (event: KeyboardEvent) => {
31 |   if (event.key === "Enter") {
32 |     showColorPicker.value = false;
33 |   }
34 | };
35 | const onMouseOver = () => {
36 |   showColorPicker.value = true;
37 |   window.addEventListener("keydown", onKeyDown);
38 | };
39 | 
40 | const onMouseLeave = () => {
41 |   showColorPicker.value = false;
42 |   window.removeEventListener("keydown", onKeyDown);
43 | };
44 | </script>
45 | 
46 | <template>
47 |   <li
48 |     class="control-item color"
49 |     :class="{ disabled: isDisabled }"
50 |     :style="{ 'border-left-color': color }"
51 |     @mouseleave="onMouseLeave"
52 |   >
53 |     <label>
54 |       <span class="label-text">{{ label }}</span>
55 |       <div class="control" @mouseover="onMouseOver">
56 |         <input
57 |           type="text"
58 |           :value="color"
59 |           :style="{ 'background-color': color, color: inputColor }"
60 |           :disabled="isDisabled"
61 |           readonly
62 |         />
63 |         <div class="color-picker-container">
64 |           <ColorPicker
65 |             v-model:pureColor="color"
66 |             pickerType="chrome"
67 |             is-widget
68 |             disable-history
69 |           />
70 |         </div>
71 |       </div>
72 |     </label>
73 |   </li>
74 | </template>
75 | 
76 | <style lang="css" scoped>
77 | .control-item.color {
78 |   input[type="text"] {
79 |     text-align: center;
80 |   }
81 | 
82 |   .color-picker-container {
83 |     display: none;
84 |     position: absolute;
85 |     right: 0;
86 |     z-index: 1;
87 |   }
88 | }
89 | 
90 | .control-item.color:hover .color-picker-container {
91 |   display: block;
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/components/DatNumber.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed } from "vue";
  3 | import NumberSlider from "@/components/private/NumberSlider.vue";
  4 | 
  5 | import { clamp } from "@/utils/Number";
  6 | 
  7 | interface Props {
  8 |   label?: string;
  9 |   showSlider?: boolean;
 10 |   min?: number;
 11 |   max?: number;
 12 |   step?: number;
 13 |   disabled?: boolean;
 14 | }
 15 | 
 16 | const props = withDefaults(defineProps<Props>(), {
 17 |   label: "",
 18 |   showSlider: true,
 19 |   disabled: false,
 20 | });
 21 | const isDisabled = computed(() => props.disabled);
 22 | const number = defineModel<number>({ required: true });
 23 | let minValue =
 24 |   typeof props.min === "number" ? props.min : Number.NEGATIVE_INFINITY;
 25 | let maxValue =
 26 |   typeof props.max === "number" ? props.max : Number.POSITIVE_INFINITY;
 27 | if (minValue > maxValue) {
 28 |   [minValue, maxValue] = [maxValue, minValue];
 29 | }
 30 | 
 31 | const hasSlider = computed(
 32 |   () =>
 33 |     props.showSlider && Number.isFinite(minValue) && Number.isFinite(maxValue)
 34 | );
 35 | 
 36 | const stepValue = computed(() => {
 37 |   if (props.step) {
 38 |     return props.step;
 39 |   }
 40 | 
 41 |   const val = maxValue - minValue;
 42 |   return 10 ** Math.floor(Math.log(Math.abs(val)) / Math.LN10) / 10;
 43 | });
 44 | 
 45 | const sanitizeNumber = (rawNumber: number) => {
 46 |   let safeNumber = clamp(rawNumber, minValue, maxValue);
 47 |   if (stepValue.value !== 0 && Number.isFinite(stepValue.value)) {
 48 |     safeNumber = Math.round(safeNumber / stepValue.value) * stepValue.value;
 49 |   }
 50 |   number.value = safeNumber;
 51 | };
 52 | 
 53 | const handleChange = (event: Event) => {
 54 |   sanitizeNumber(Number((event.target as HTMLInputElement).value));
 55 | };
 56 | </script>
 57 | 
 58 | <template>
 59 |   <li class="control-item number" :class="{ disabled: isDisabled }">
 60 |     <label ref="label">
 61 |       <span class="label-text">{{ label }}</span>
 62 |       <div class="control">
 63 |         <NumberSlider
 64 |           v-show="hasSlider"
 65 |           :min="minValue"
 66 |           :max="maxValue"
 67 |           :value="number"
 68 |           @updateState="sanitizeNumber"
 69 |         >
 70 |         </NumberSlider>
 71 |         <input
 72 |           type="number"
 73 |           ref="input"
 74 |           class="input"
 75 |           :min="minValue"
 76 |           :max="maxValue"
 77 |           :step="stepValue"
 78 |           :value="number"
 79 |           @input="handleChange"
 80 |           :disabled="isDisabled"
 81 |         />
 82 |       </div>
 83 |     </label>
 84 |   </li>
 85 | </template>
 86 | 
 87 | <style lang="css" scoped>
 88 | .control-item.number {
 89 |   .control {
 90 |     display: inline-flex;
 91 | 
 92 |     .slider {
 93 |       flex: 3;
 94 |     }
 95 |     .input {
 96 |       flex: 1;
 97 |     }
 98 |   }
 99 | 
100 |   input[type="number"] {
101 |     appearance: textfield;
102 |   }
103 |   input[type="number"]::-webkit-inner-spin-button,
104 |   input[type="number"]::-webkit-outer-spin-button {
105 |     -webkit-appearance: none;
106 |     margin: 0;
107 |   }
108 | }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/src/components/DatGui.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed } from "vue";
  3 | 
  4 | interface Props {
  5 |   openText?: string;
  6 |   closeText?: string;
  7 |   closePosition?: "top" | "bottom";
  8 | }
  9 | 
 10 | const props = withDefaults(defineProps<Props>(), {
 11 |   openText: "Open Controls",
 12 |   closeText: "Close Controls",
 13 |   closePosition: "bottom",
 14 | });
 15 | 
 16 | const isOpen = defineModel<boolean>("open", { default: true });
 17 | 
 18 | const title = computed<string>(() =>
 19 |   isOpen.value ? props.closeText : props.openText
 20 | );
 21 | const handleClick = () => {
 22 |   isOpen.value = isOpen.value === true ? false : true;
 23 | };
 24 | </script>
 25 | 
 26 | <template>
 27 |   <div class="vue-dat-gui">
 28 |     <div class="group group--main">
 29 |       <div
 30 |         v-if="closePosition === 'top'"
 31 |         class="toggle-button"
 32 |         role="button"
 33 |         tabindex="0"
 34 |         @click="handleClick"
 35 |         @keydown.space.enter.prevent="handleClick"
 36 |       >
 37 |         {{ title }}
 38 |       </div>
 39 |       <ul v-show="isOpen">
 40 |         <slot></slot>
 41 |       </ul>
 42 |       <div
 43 |         v-if="closePosition === 'bottom'"
 44 |         class="toggle-button"
 45 |         role="button"
 46 |         tabindex="0"
 47 |         @click="handleClick"
 48 |         @keydown.space.enter.prevent="handleClick"
 49 |       >
 50 |         {{ title }}
 51 |       </div>
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <style lang="css">
 57 | .vue-dat-gui {
 58 |   --color: #eee;
 59 |   --darker-background-color: black;
 60 |   --background-color: #1a1a1a;
 61 |   --light-background-color: #272727;
 62 |   --ligther-background-color: #3c3c3c;
 63 | 
 64 |   --number-color: #2fa1d6;
 65 |   --boolean-color: #806787;
 66 |   --string-color: #1ed36f;
 67 |   --button-color: #e61d5f;
 68 |   --select-color: #f4d450;
 69 | 
 70 |   --border-left-size: 5px;
 71 | 
 72 |   --nest-margin: 4px;
 73 |   --row-height: 27px;
 74 |   --z-index: 9000;
 75 | }
 76 | </style>
 77 | 
 78 | <style lang="css">
 79 | .w-100 {
 80 |   width: 100%;
 81 | }
 82 | 
 83 | .vue-dat-gui {
 84 |   position: fixed;
 85 |   top: 0;
 86 |   right: 20px;
 87 |   min-width: 245px;
 88 |   font-size: 0.8rem;
 89 |   font-family: sans-serif;
 90 |   color: var(--color);
 91 |   z-index: var(--z-index);
 92 | 
 93 |   .toggle-button {
 94 |     display: flex;
 95 |     justify-content: center;
 96 |     align-items: center;
 97 |     height: 25px;
 98 |     cursor: pointer;
 99 |     background-color: var(--background-color);
100 |     box-sizing: border-box;
101 | 
102 |     &:hover,
103 |     &:focus {
104 |       background-color: var(--light-background-color);
105 |     }
106 |     &:focus,
107 |     &:focus-visible {
108 |       border: 2px solid var(--number-color);
109 |       outline: none;
110 |     }
111 |   }
112 | 
113 |   .group {
114 |     overflow: hidden;
115 |     ul {
116 |       margin: 0;
117 |       padding: 0;
118 |     }
119 |     background-color: var(--background-color);
120 |     li:not(.folder) {
121 |       height: var(--row-height);
122 |       line-height: var(--row-height);
123 |       overflow: hidden;
124 |       padding: 0px 5px 0 10px;
125 |       border-bottom: 1px solid var(--light-background-color);
126 |     }
127 | 
128 |     &.group--main {
129 |       > ul {
130 |         max-height: 50vh;
131 |         overflow-y: auto;
132 |       }
133 |     }
134 |   }
135 |   .control-item {
136 |     border-left: var(--border-left-size) solid;
137 | 
138 |     &.disabled {
139 |       background-color: gray;
140 |       opacity: 0.5;
141 |       pointer-events: none;
142 |     }
143 | 
144 |     &.boolean {
145 |       border-left-color: var(--boolean-color);
146 |       .control {
147 |         text-align: center;
148 |       }
149 |     }
150 |     &.button {
151 |       border-left-color: var(--button-color);
152 |     }
153 |     &.number {
154 |       border-left-color: var(--number-color);
155 |     }
156 |     &.select {
157 |       border-left-color: var(--select-color);
158 |     }
159 |     &.string {
160 |       border-left-color: var(--string-color);
161 |     }
162 |     &.color {
163 |       border-left-color: var(--background-color);
164 |     }
165 | 
166 |     &.boolean,
167 |     &.button {
168 |       &:hover {
169 |         background: var(--light-background-color);
170 |         cursor: pointer;
171 |       }
172 |     }
173 | 
174 |     label {
175 |       display: flex;
176 |     }
177 |     .label-text {
178 |       flex: 4;
179 |       white-space: nowrap;
180 |       overflow: hidden;
181 |       text-overflow: ellipsis;
182 |     }
183 | 
184 |     .control {
185 |       flex: 6;
186 | 
187 |       > input[type="text"],
188 |       > input[type="number"] {
189 |         background: var(--light-background-color);
190 |         border: 1px solid var(--background-color);
191 |         border-radius: 0;
192 |         width: 100%;
193 |         padding: 4px;
194 |         margin: 0;
195 |         outline: none;
196 |         font-size: inherit;
197 |         &::-ms-clear {
198 |           display: none;
199 |         }
200 | 
201 |         &:hover {
202 |           background: var(--ligther-background-color);
203 |         }
204 |         &:focus {
205 |           background: var(--ligther-background-color);
206 |           color: var(--color);
207 |         }
208 |       }
209 |       > input[type="text"] {
210 |         color: var(--string-color);
211 |       }
212 |       > input[type="number"] {
213 |         color: var(--number-color);
214 |       }
215 |     }
216 |   }
217 | }
218 | </style>
219 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  7 |     <link rel="icon" href="favicon.ico" />
  8 |     <title>vue-dat-gui</title>
  9 |     <meta
 10 |       name="description"
 11 |       content="A Typescript / Vue 3 port of the popular dat.GUI library, a lightweight graphical user interface for changing variables." />
 12 |     <link
 13 |       rel="preload"
 14 |       fetchpriority="high"
 15 |       as="image"
 16 |       href="https://images.unsplash.com/photo-1516214104703-d870798883c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
 17 |       type="image/webp" />
 18 |     <link rel="stylesheet" href="./style.css" />
 19 |     <style>
 20 |       body {
 21 |         margin: 0;
 22 |         padding: 0;
 23 |         font-family: "sans-serif";
 24 |       }
 25 | 
 26 |       .full {
 27 |         width: 100vw;
 28 |         height: 100vh;
 29 |         display: flex;
 30 |         flex-direction: column;
 31 |         justify-content: space-around;
 32 |         align-items: center;
 33 |       }
 34 | 
 35 |       h1 {
 36 |         margin-top: 0;
 37 |       }
 38 | 
 39 |       .input-title {
 40 |         font-size: 40px;
 41 |         text-align: center;
 42 |       }
 43 | 
 44 |       .input-title:focus {
 45 |         outline-color: #077d43;
 46 |       }
 47 | 
 48 |       .input-note {
 49 |         font-size: 1rem;
 50 |         color: #333;
 51 |         text-align: center;
 52 |         margin-bottom: 6px;
 53 |       }
 54 | 
 55 |       .github {
 56 |         position: fixed;
 57 |         bottom: 15px;
 58 |         right: 15px;
 59 |         color: white;
 60 |         background-color: #077d43;
 61 |         padding: 7px;
 62 |         text-decoration: none;
 63 |       }
 64 |     </style>
 65 |   </head>
 66 | 
 67 |   <body>
 68 |     <noscript>
 69 |       <strong
 70 |         >We're sorry but vue-dat-gui doesn't work properly without JavaScript enabled. Please enable
 71 |         it to continue.</strong
 72 |       >
 73 |     </noscript>
 74 |     <div id="app"></div>
 75 |     <script type="x-template" id="vue-dat-gui-demo">
 76 |       <div class="full" :style="{ 'background-color': background }">
 77 |         <h1 :style="{ color: titleColor, 'font-size': `${titleFontSize}px` }">
 78 |           {{ title }}
 79 |         </h1>
 80 |         <img :src="pictureUrl" :alt="`A picture of a ${pictureText}`" :style="pictureStyle" v-show="showPicture" width="750" height="500" />
 81 |         <label>
 82 |           <div class="input-note">Showcase of the 2-way data-binding</div>
 83 |           <input v-model="title" class="input-title" />
 84 |         </label>
 85 |         <DatGui openText="Open controls" closeText="Close controls" closePosition="bottom">
 86 |           <DatColor v-model="background" label="Background"/>
 87 |           <DatColor v-model="titleColor" label="Title Color"/>
 88 |           <DatNumber v-model="titleFontSize" label="Title font-size"/>
 89 |           <DatString v-model="title" label="Title"/>
 90 |           <DatButton @click="triggerAlert" label="Trigger alert"/>
 91 |           <DatFolder label="Picture">
 92 |             <DatSelect v-model="pictureUrl" :items="pictures" label="Picture"/>
 93 |             <DatBoolean v-model="showPicture" label="Show Picture"/>
 94 |             <DatButton @click="nextPicture" label="Next picture"/>
 95 |             <DatFolder label="Box shadow">
 96 |               <DatBoolean v-model="boxShadow.disabled" :label="boxShadow.disabled ? 'Enable options' : 'Disable options' "/>
 97 |               <DatNumber v-model="boxShadow.offsetX" :min="-100" :max="100" :step="1" label="Offset X" :disabled="boxShadow.disabled"/>
 98 |               <DatNumber v-model="boxShadow.offsetY" :min="-100" :max="100" :step="1" label="Offset Y" :disabled="boxShadow.disabled"/>
 99 |               <DatNumber v-model="boxShadow.blurRadius" :min="0" :max="100" :step="1" label="Blur radius" :disabled="boxShadow.disabled"/>
100 |               <DatNumber v-model="boxShadow.spreadRadius" :min="0" :max="30" :step="1"
101 |                 label="Spread radius" :disabled="boxShadow.disabled"/>
102 |               <DatColor v-model="boxShadow.color" label="Color" :disabled="boxShadow.disabled"/>
103 |             </DatFolder>
104 |           </DatFolder>
105 |         </DatGui>
106 |         <a class="github" href="https://github.com/cyrilf/vue-dat-gui/blob/main/public/index.html">View on Github</a>
107 |       </div>
108 |     </script>
109 |     <script type="importmap">
110 |       {
111 |         "imports": {
112 |           "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
113 |           "@cyrilf/vue-dat-gui": "./vue-dat-gui.js"
114 |         }
115 |       }
116 |     </script>
117 |     <script type="module" lang="ts">
118 |       import { createApp, computed, ref } from "vue";
119 |       import VueDatGui from "@cyrilf/vue-dat-gui";
120 | 
121 |       createApp({
122 |         template: "#vue-dat-gui-demo",
123 |         setup() {
124 |           const pictures = [
125 |             {
126 |               name: "forest",
127 |               value:
128 |                 "https://images.unsplash.com/photo-1516214104703-d870798883c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
129 |             },
130 |             {
131 |               name: "mountain",
132 |               value:
133 |                 "https://images.unsplash.com/photo-1526080676457-4544bf0ebba9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
134 |             },
135 |             {
136 |               name: "beach",
137 |               value:
138 |                 "https://images.unsplash.com/photo-1520942702018-0862200e6873?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
139 |             },
140 |           ];
141 | 
142 |           const background = ref("#cdeecc");
143 |           const titleColor = ref("#077d43");
144 |           const titleFontSize = ref(75);
145 |           const title = ref("vue-dat-gui");
146 |           const showPicture = ref(true);
147 |           const boxShadow = ref({
148 |             disabled: false,
149 |             offsetX: 27,
150 |             offsetY: 27,
151 |             blurRadius: 75,
152 |             spreadRadius: 2,
153 |             color: "#031706",
154 |           });
155 | 
156 |           const pictureStyle = computed(() => {
157 |             const { offsetX, offsetY, blurRadius, spreadRadius, color } = boxShadow.value;
158 |             return {
159 |               "box-shadow": `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`,
160 |             };
161 |           });
162 | 
163 |           const triggerAlert = () => alert("Yeah, you pressed it!");
164 | 
165 |           const pictureUrl = ref(pictures[0].value);
166 |           const nextPicture = () => {
167 |             const currentIndex = pictures.findIndex(
168 |               (picture) => picture.value === pictureUrl.value
169 |             );
170 |             const nextIndex = (currentIndex + 1) % pictures.length;
171 |             pictureUrl.value = pictures[nextIndex].value;
172 |           };
173 | 
174 |           const pictureText = computed(
175 |             () => pictures.find((p) => p.value === pictureUrl.value)?.name
176 |           );
177 | 
178 |           return {
179 |             pictures,
180 |             background,
181 |             titleColor,
182 |             titleFontSize,
183 |             title,
184 |             showPicture,
185 |             pictureUrl,
186 |             pictureText,
187 |             pictureStyle,
188 |             boxShadow,
189 |             triggerAlert,
190 |             nextPicture,
191 |           };
192 |         },
193 |       })
194 |         .use(VueDatGui)
195 |         .mount("#app");
196 |     </script>
197 |   </body>
198 | </html>
199 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-dat-gui
  2 | 
  3 | ![vue-dat-gui](./public/vue-dat-gui.png)
  4 | 
  5 | > A Vue3 port of the popular [dat.GUI](https://github.com/dataarts/dat.gui) library.
  6 | 
  7 | This is a lightweight graphical user interface to change variables in Javascript (or Typescript).
  8 | Useful for all your demos or experimental codes.
  9 | 
 10 | ## DEMO ✨
 11 | 
 12 | Check out the [demo page](https://cyrilf.github.io/vue-dat-gui/).
 13 | 
 14 | ### Used by:
 15 | 
 16 | - [cyrilf/microbios](https://microbios.cyrilf.com/): Cellular automata simulation / [Github](https://github.com/cyrilf/microbios)
 17 | - ...
 18 | - _Feel free to submit a PR to add your website._
 19 | 
 20 | ---
 21 | 
 22 | ## INSTALL 💻
 23 | 
 24 | ### Option 1 - Install from NPM
 25 | 
 26 | ```
 27 | npm install --save @cyrilf/vue-dat-gui
 28 | ```
 29 | 
 30 | Then the usage is:
 31 | 
 32 | ```js
 33 | import { createApp } from "vue";
 34 | import VueDatGui from "@cyrilf/vue-dat-gui";
 35 | import "@cyrilf/vue-dat-gui/dist/style.css";
 36 | 
 37 | /* your code */
 38 | // ...
 39 | 
 40 | const app = createApp(App);
 41 | app.use(VueDatGui);
 42 | 
 43 | app.mount("#app");
 44 | ```
 45 | 
 46 | ### Option 2 - Instal via CDN file
 47 | 
 48 | In your head tag, include the following code:
 49 | 
 50 | ```html
 51 | <link
 52 |   rel="stylesheet"
 53 |   href="https://unpkg.com/@cyrilf/vue-dat-gui@latest/dist/style.css"
 54 | />
 55 | <script type="module" lang="ts">
 56 |   import {
 57 |     createApp,
 58 |     computed,
 59 |     ref,
 60 |   } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
 61 |   import VueDatGui from "https://unpkg.com/@cyrilf/vue-dat-gui@latest/dist/vue-dat-gui.js";
 62 | 
 63 |   createApp({
 64 |     /*your code*/
 65 |   })
 66 |     .use(VueDatGui)
 67 |     .mount("#app");
 68 | </script>
 69 | ```
 70 | 
 71 | ---
 72 | 
 73 | ## VERSIONS #️⃣
 74 | 
 75 | ### Vue3
 76 | 
 77 | The [main branch](https://github.com/cyrilf/vue-dat-gui/tree/main) contains code for Vue3. It's refering to the tags `v1.x`.
 78 | 
 79 | ### Vue2
 80 | 
 81 | The **deprecated** branch [vue2](https://github.com/cyrilf/vue-dat-gui/tree/vue2) is for Vue2 support. It's refering to the tags `v0.x`.
 82 | You can find the [README](https://github.com/cyrilf/vue-dat-gui/blob/4b7da19f9a6aef1e7c8b3fcfefabe9acb7b7f737/README.md) with all the required information for this version.
 83 | 
 84 | ---
 85 | 
 86 | ## USAGE 🖱️
 87 | 
 88 | You can always refer to the [public/index.html](https://github.com/cyrilf/vue-dat-gui/tree/main/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)_.
 89 | 
 90 | The [demo page](https://cyrilf.github.io/vue-dat-gui/) is also available.
 91 | 
 92 | In your view:
 93 | 
 94 | ```html
 95 | <div class="app">
 96 |   <DatGui
 97 |     closeText="Close controls"
 98 |     openText="Open controls"
 99 |     closePosition="bottom"
100 |   >
101 |     <DatColor v-model="background" label="Background" />
102 |     <DatNumber v-model="titleFontSize" label="Title font-size" />
103 |     <DatString v-model="title" label="Title" />
104 |     <DatButton @click="triggerAlert" label="Trigger alert" />
105 |     <DatFolder label="Picture">
106 |       <DatSelect v-model="pictureUrl" :items="pictures" label="Picture" />
107 |       <DatBoolean v-model="showPicture" label="Show Picture" />
108 |       <DatFolder label="Box shadow">
109 |         <DatBoolean
110 |           v-model="boxShadow.disabled"
111 |           :label="boxShadow.disabled ? 'Enable options' : 'Disable options' "/>
112 |         <DatNumber
113 |           v-model="boxShadow.offsetX"
114 |           :min="-100"
115 |           :max="100"
116 |           :step="1"
117 |           label="Offset X"
118 |           :disabled="boxShadow.disabled"
119 |         />
120 |         <DatNumber
121 |           v-model="boxShadow.offsetY"
122 |           :min="-100"
123 |           :max="100"
124 |           :step="1"
125 |           label="Offset Y"
126 |           :disabled="boxShadow.disabled"
127 |         />
128 |         <DatNumber
129 |           v-model="boxShadow.blurRadius"
130 |           :min="0"
131 |           :max="100"
132 |           :step="1"
133 |           label="Blur radius"
134 |           :disabled="boxShadow.disabled"
135 |         />
136 |         <DatNumber v-model="boxShadow.spreadRadius" label="Spread radius" :disabled="boxShadow.disabled" />
137 |         <DatColor v-model="boxShadow.color" label="Color" :disabled="boxShadow.disabled" />
138 |       </DatFolder>
139 |     </DatFolder>
140 |   </DatGui>
141 | </div>
142 | ```
143 | 
144 | In your javascript:
145 | 
146 | ```js
147 | // <script setup lang="ts">
148 | import { computed, ref } from "vue";
149 | 
150 | const pictures = [
151 |   {
152 |     name: "forest",
153 |     value:
154 |       "https://images.unsplash.com/photo-1516214104703-d870798883c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
155 |   },
156 |   {
157 |     name: "mountain",
158 |     value:
159 |       "https://images.unsplash.com/photo-1526080676457-4544bf0ebba9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
160 |   },
161 |   {
162 |     name: "beach",
163 |     value:
164 |       "https://images.unsplash.com/photo-1520942702018-0862200e6873?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
165 |   },
166 | ];
167 | 
168 | const background = ref("#cdeecc");
169 | const titleColor = ref("#077d43");
170 | const titleFontSize = ref(75);
171 | const title = ref("vue-dat-gui");
172 | const showPicture = ref(true);
173 | const boxShadow = ref({
174 |   disabled: false,
175 |   offsetX: 27,
176 |   offsetY: 27,
177 |   blurRadius: 75,
178 |   spreadRadius: 2,
179 |   color: "rgba(3, 23, 6, 1)",
180 | });
181 | 
182 | const pictureStyle = computed(() => {
183 |   const { offsetX, offsetY, blurRadius, spreadRadius, color } = boxShadow.value;
184 |   return {
185 |     "box-shadow": `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`,
186 |   };
187 | });
188 | 
189 | const triggerAlert = () => alert("Yeah, you pressed it!");
190 | 
191 | let pictureUrl = ref(pictures[0].value);
192 | const nextPicture = () => {
193 |   const currentIndex = pictures.findIndex(
194 |     (picture) => picture.value === pictureUrl.value
195 |   );
196 |   const nextIndex = (currentIndex + 1) % pictures.length;
197 |   pictureUrl.value = pictures[nextIndex].value;
198 | };
199 | // </script>
200 | ```
201 | 
202 | ---
203 | 
204 | ## Components
205 | 
206 | ### DatGui
207 | 
208 | The main menu that wraps all components. (required)
209 | 
210 | ```html
211 | <DatGui
212 |   v-model:open="isOpen"
213 |   open-text="Open Controls"
214 |   close-text="Close Controls"
215 |   close-position="bottom"
216 | >
217 |   <!-- other components -->
218 | </DatGui>
219 | ```
220 | 
221 | | Name             | Type                  | Default            | Description                                |
222 | | ---------------- | --------------------- | ------------------ | ------------------------------------------ |
223 | | `v-model:open`   | `Ref<boolean>`        | `true`             | 2ways binding to the open state of the GUI |
224 | | `open`           | `boolean`             | `true`             | 1way binding to the open state of the GUI  |
225 | | `@update:open`   | `Function`            | `noop`             | Listener for the open change               |
226 | | `open-text`      | `boolean`             | `'Open controls'`  | Text for the open button                   |
227 | | `close-text`     | `boolean`             | `'Close controls'` | Text for the close button                  |
228 | | `close-position` | `'bottom'` \| `'top'` | `'bottom'`         | Position of the close button               |
229 | 
230 | ### DatBoolean
231 | 
232 | A checkbox element
233 | 
234 | ```html
235 | <DatBoolean v-model="isActive" label="Is active?" />
236 | ```
237 | 
238 | | Name       | Type           | Default | Description        |
239 | | ---------- | -------------- | ------- | ------------------ |
240 | | `v-model`  | `Ref<boolean>` | `false` | 2ways binding      |
241 | | `label`    | `string`       | `""`    | Text for the label |
242 | | `disabled` | `boolean`      | `false` | disabled           |
243 | 
244 | ### DatButton
245 | 
246 | A button element
247 | 
248 | ```html
249 | <DatButton @click="onSurpriseClick" label="Surprise me!" />
250 | ```
251 | 
252 | | Name       | Type       | Default | Description   |
253 | | ---------- | ---------- | ------- | ------------- |
254 | | `@click`   | `Function` | `noop`  | Click handler |
255 | | `label`    | `string`   | `""`    | Button text   |
256 | | `disabled` | `boolean`  | `false` | disabled      |
257 | 
258 | ### DatColor
259 | 
260 | A color-picker element
261 | 
262 | ```html
263 | <DatColor v-model="mainColor" label="Main color" />
264 | ```
265 | 
266 | | Name       | Type          | Default | Description        |
267 | | ---------- | ------------- | ------- | ------------------ |
268 | | `v-model`  | `Ref<string>` | `""`    | 2ways binding      |
269 | | `label`    | `string`      | `""`    | Text for the label |
270 | | `disabled` | `boolean`     | `false` | disabled           |
271 | 
272 | ### DatFolder
273 | 
274 | A folder element
275 | 
276 | ```html
277 | <DatFolder v-model:open="isOpen" label="Optional settings">
278 |   <!-- other components -->
279 | </DatFolder>
280 | ```
281 | 
282 | | Name           | Type           | Default | Description                                |
283 | | -------------- | -------------- | ------- | ------------------------------------------ |
284 | | `v-model:open` | `Ref<boolean>` | `true`  | 2ways binding to the open state of the GUI |
285 | | `open`         | `boolean`      | `true`  | 1way binding to the open state of the GUI  |
286 | | `@update:open` | `Function`     | `noop`  | Listener for the open change               |
287 | | `label`        | `string`       | `""`    | Text for the folder                        |
288 | 
289 | ### DatNumber
290 | 
291 | A number input element. If `min` and `max` are specified, then a slider is added.
292 | 
293 | ```html
294 | <DatNumber
295 |   v-model="areaWidth"
296 |   :min="0"
297 |   :max="1000"
298 |   :step="5"
299 |   :showSlider="false"
300 |   label="Area width"
301 | />
302 | ```
303 | 
304 | | Name       | Type          | Default                    | Description        |
305 | | ---------- | ------------- | -------------------------- | ------------------ |
306 | | `v-model`  | `Ref<number>` | `""`                       | 2ways binding      |
307 | | `min`      | `number`      | `Number.NEGATIVE_INFINITY` | Minimum value      |
308 | | `max`      | `number`      | `Number.POSITIVE_INFINITY` | Maximum value      |
309 | | `step`     | `number`      | `Read note below*`         | Incremental value  |
310 | | `label`    | `string`      | `""`                       | Text for the label |
311 | | `disabled` | `boolean`     | `false`                    | disabled           |
312 | 
313 | **`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".
314 | 
315 | ### DatSelect
316 | 
317 | A select element
318 | 
319 | ```html
320 | <DatSelect v-model="mainPicture" :items="pictures" label="Main picture" />
321 | ```
322 | 
323 | ```
324 | Type Item = { name: string; value: string; } | string | number
325 | ```
326 | 
327 | | Name       | Type                           | Default | Description                |
328 | | ---------- | ------------------------------ | ------- | -------------------------- |
329 | | `v-model`  | `Ref<string>` \| `Ref<number>` | `""`    | 2ways binding              |
330 | | `items`    | `Item[]`                       | `[]`    | The options for the select |
331 | | `label`    | `string`                       | `""`    | Text for the label         |
332 | | `disabled` | `boolean`                      | `false` | disabled                   |
333 | 
334 | ### DatString
335 | 
336 | A text input element
337 | 
338 | ```html
339 | <DatString v-model="username" label="Username" />
340 | ```
341 | 
342 | | Name       | Type          | Default | Description        |
343 | | ---------- | ------------- | ------- | ------------------ |
344 | | `v-model`  | `Ref<string>` | `""`    | 2ways binding      |
345 | | `label`    | `string`      | `""`    | Text for the label |
346 | | `disabled` | `boolean`     | `false` | disabled           |
347 | 
348 | ### Deploy
349 | 
350 | ```
351 | ./deploy
352 | ```
353 | 
354 | Feel free to open any Pull Request/Issues.
355 | 
356 | ---
357 | 
358 | ## THANKS 👌
359 | 
360 | - [dat.GUI](https://github.com/dataarts/dat.gui) for the initial project
361 | 


--------------------------------------------------------------------------------