feat: move widgetStyle to widget

Author: fireyy

README.md

@@ -51,7 +51,6 @@ You can add custom components, save callback.
 | save | `(data) => void` | When you click the Save button, feed back to you to save the data |
 | value | `Object` | Editor initial value, you can pass the value of the save callback and resume the draft |
 | widgets | `Object` | Vue Components. Custom components for editor. see [Example](https://github.com/fireyy/vue-page-designer-widgets/blob/master/src/index.js) |
-| widgetStyle | `Object` | Vue Components. Custom components style config for editor. see [Example](https://github.com/fireyy/vue-page-designer-widgets/blob/master/src/index.js) |
 
 ## Parameter: `save`
 
@@ -75,7 +74,7 @@ The `value` came from `save`.
 </template>
 ```
 
-## Parameter: `widgets` and `widgetStyle`
+## Parameter: `widgets`
 
 You can install default widget in `vue-page-designer-widgets`
 
@@ -88,18 +87,17 @@ Import and use it
 ```html
 <template>
   <div id="app">
-    <vue-page-designer :widgets="widgets" :widgetStyle="widgetStyle" />
+    <vue-page-designer :widgets="widgets" />
   </div>
 </template>
 <script>
 import vuePageDesigner from 'vue-page-designer'
-import { widgets, widgetStyle } from 'vue-page-designer-widgets'
+import widgets from 'vue-page-designer-widgets'
 
 export default {
   data () {
     return {
-      widgets,
-      widgetStyle
+      widgets
     }
   },
 

example/App.vue

@@ -1,19 +1,18 @@
 <template>
   <div id="app">
-    <vue-page-designer :value="value" :widgets="widgets" :widgetStyle="widgetStyle" @save="handleSave" />
+    <vue-page-designer :value="value" :widgets="widgets" @save="handleSave" />
   </div>
 </template>
 
 <script>
-import { widgets, widgetStyle } from 'vue-page-designer-widgets'
+import widgets from 'vue-page-designer-widgets'
 import vuePageDesigner from '../src'
 
 export default {
   data () {
     return {
       value: null,
-      widgets,
-      widgetStyle
+      widgets
     }
   },
 

src/index.js

@@ -29,16 +29,13 @@ const vuePageDesigner = {
   store,
   props: {
     value: Object,
-    widgets: Object,
-    widgetStyle: Object
+    widgets: Object
   },
   components: { App },
   created () {
     // 注册 widgets
-    // TODO: 合并 widgets 和 widgetStyle
     Vue.use(widget, {
-      widgets: this.widgets,
-      widgetStyle: this.widgetStyle
+      widgets: this.widgets
     })
     // 初始化已有数据
     if (this.value) {

src/plugins/widget.js

@@ -1,19 +1,22 @@
 // 注册 内置 widgets
-import * as inner from '../widgets'
+import inner from '../widgets'
 
-var widgets, widgetStyle
+var widgets
+var widgetStyle = {}
 
 const install = (Vue, config = {}) => {
   if (install.installed) return
 
-  widgets = Object.assign({}, inner.widgets, config.widgets)
-  widgetStyle = Object.assign({}, inner.widgetStyle, config.widgetStyle)
+  widgets = Object.assign({}, inner, config.widgets)
 
   Object.keys(widgets).forEach(key => {
     Vue.component(key, widgets[key])
-  })
-  Object.keys(widgetStyle).forEach(key => {
-    Vue.component(key, widgetStyle[key])
+    // style panel
+    let panel = Object.assign({}, widgets[key]['panel'])
+    Vue.component(panel.name, panel)
+    widgetStyle[panel.name] = panel
+    // remove panel from object
+    delete widgets[key]['panel']
   })
 }
 

src/widgets/container/index.vue

@@ -39,10 +39,13 @@
 </template>
 
 <script>
+import stylec from './style.vue'
+
 export default {
   name: 'braid-container',
   icon: 'layout',
   title: '容器',
+  panel: stylec,
   setting: {
     type: 'braid-container',
     hasGuide: true,

src/widgets/index.js

@@ -1,10 +1,5 @@
 import braidContainer from './container/index.vue'
-import braidContainerStyle from './container/style.vue'
 
-export const widgets = {
+export default {
   braidContainer
 }
-
-export const widgetStyle = {
-  braidContainerStyle
-}