fix: demo app

bennyschudel · Jan 29, 2019 · d89a480 · d89a480
1 parent 31feeb7
commit d89a480
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 26 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/src/demo/Demo.vue b/src/demo/Demo.vue
@@ -1,20 +1,30 @@
 <template>
   <div id="demo">
-    <VueColormind
-      :value.sync="colors"
-      :active-index.sync="activeIndex"
-      @color-select="onColorSelect"
-    />
-    <pre>
+    <UiWidgetManager>
+      <UiWidget
+        title="colormind.io"
+      >
+        <VueColormind
+          :value.sync="colors"
+          :active-index.sync="activeIndex"
+          @color-select="onColorSelect"
+        />
+      </UiWidget>
+      <UiWidget
+        title="debug"
+      >
+        <pre>
 {{activeIndex}}
 {{color}}
 {{colors}}
-    </pre>
+        </pre>
+      </UiWidget>
+    </UiWidgetManager>
   </div>
 </template>
 
 <script>
-import VueColormind from './entry';
+import VueColormind from '@/entry';
 
 export default {
   name: 'demo',
@@ -35,4 +45,11 @@ export default {
 </script>
 
 <style lang="scss">
+#demo {
+  .ui-widget__content {
+    padding: 16px;
+    border: 1px solid black;
+    background-color: white;
+  }
+}
 </style>
diff --git a/src/demo/main.js b/src/demo/main.js
@@ -1,9 +1,12 @@
 import Vue from 'vue';
+import MonoUi from '@hotpink/vue-mono-ui';
 
 import Demo from './Demo.vue';
 
 Vue.config.productionTip = false;
 
+Vue.use(MonoUi);
+
 new Vue({
   render: h => h(Demo),
-}).$mount('#demo');
+}).$mount('#app');