fix: minor housekeeping

Signed-off-by: Vinayak Kulkarni <[email protected]>
vinayakkulkarni · Nov 3, 2022 · 34fc857 · 34fc857
1 parent 74e8048
commit 34fc857
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@
 ### Installation
 
 ```sh
-npm i tweakpane v-tweakpane
+npm i tweakpane v-tweakpane @tweakpane/plugin-essentials
 ```
 
 ### Build Setup

diff --git a/example/index.html b/example/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>V-Tweakpane Demo</title>
   </head>

diff --git a/example/public/vite.svg b/example/public/vite.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,10 +41,12 @@
     "release:auto": "shipjs prepare --yes"
   },
   "dependencies": {
+    "@tweakpane/plugin-essentials": "^0.1.5",
     "tweakpane": "^3.1.0"
   },
   "peerDependencies": {
     "tweakpane": "^3.1.0",
+    "@tweakpane/plugin-essentials": "^0.1.5",
     "vue": "^3.2.41"
   },
   "devDependencies": {

diff --git a/src/components/VTweakpane.vue b/src/components/VTweakpane.vue
@@ -7,29 +7,23 @@
 <script lang="ts">
   import { defineComponent, ref, onMounted, nextTick } from 'vue';
   import { Pane } from 'tweakpane';
+  import * as EssentialsPlugin from '@tweakpane/plugin-essentials';
   import type { Ref, PropType } from 'vue';
   import type { ButtonProps, TabParams } from '@tweakpane/core';
   import type { FolderParams } from 'tweakpane';
   import type { PaneConfig } from 'tweakpane/dist/types/pane/pane-config';
 
-  type PaneProps = {
-    title: string;
-    folders?: FolderParams[];
-    buttons?: ButtonProps[];
-    tabs?: TabParams[];
-    inputs?: { factor?: number; title?: string; color?: string }[];
-  } & PaneConfig;
-
   export default defineComponent({
     name: 'VTweakpane',
     props: {
       pane: {
-        type: Object as PropType<PaneProps>,
+        type: Object as PropType<PaneConfig>,
         default: () => {},
         required: true,
       },
     },
-    setup(props) {
+    emits: ['on-pane-created'],
+    setup(props, { emit }) {
       // Number of elements to bind the panes
       const el: Ref<HTMLElement | null> = ref(null);
 
@@ -44,27 +38,8 @@
               title: props.pane.title,
               expanded: props.pane.expanded,
             });
-            if (props.pane?.inputs && props.pane.inputs.length > 0) {
-              props.pane.inputs.forEach((input) => {
-                for (const [key] of Object.entries(input)) {
-                  // @ts-ignore
-                  pane.value?.addInput(input, key);
-                }
-              });
-            }
-            if (
-              props.pane?.folders &&
-              Object.keys(props.pane.folders).length > 0
-            ) {
-              props.pane.folders.forEach((folder) => {
-                pane.value?.addFolder(folder);
-              });
-            }
-            if (props.pane?.tabs && Object.keys(props.pane.tabs).length > 0) {
-              props.pane.tabs.forEach((tab) => {
-                pane.value?.addTab(tab);
-              });
-            }
+            pane.value.registerPlugin(EssentialsPlugin);
+            emit('on-pane-created', pane.value);
           }
         });
       });

diff --git a/vite.config.ts b/vite.config.ts
@@ -27,14 +27,16 @@ export default defineConfig({
       include: 'node_modules/**',
     },
     rollupOptions: {
-      external: ['vue'],
+      external: ['vue', 'tweakpane', '@tweakpane/plugin-essentials'],
       output: {
         exports: 'named',
         banner,
         strict: true,
         sourcemap: true,
         globals: {
           vue: 'vue',
+          tweakpane: 'Tweakpane',
+          '@tweakpane/plugin-essentials': 'TweakpanePluginEssentials',
         },
         assetFileNames: (assetInfo) => {
           if (assetInfo.name === 'style.css') return 'v-tweakpane.css';