Merge branch 'release/0.3.3'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-design",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "author": "L-Chris <563303226@qq.com>",
   "description": "Be the best website visualization builder with Vue and Electron",
   "license": "MIT",

src/main/index.js

@@ -37,11 +37,6 @@ function createWindow () {
     mainWindow.webContents.send('window:maximize')
   })
 
-  mainWindow.on('closed', () => {
-    mainWindow.webContents.send('window:closed')
-    mainWindow = null
-  })
-
   ipcMain.on('window:minimize', () => {
     mainWindow.minimize()
   })

src/renderer/mixins/component.js

@@ -13,13 +13,13 @@ export default {
         el: document.getElementById(id),
         render (h) {
           let component = that.components.find(_ => _.id === id)
-          if (!component) return
+          if (!component) return this.$destroy()
           let {setting: { tag }, props} = component
           return h(tag, {
             attrs: {id},
             props,
             domProps: props.domProps,
-            class: props.class.split(' '),
+            class: props.class && props.class.split(' '),
             style: props.style
           })
         }

src/renderer/plugins/parser.js

@@ -45,7 +45,7 @@ export default path => {
   rootNode = null
   node = null
   stack = []
-  let label = path.replace(/.+\/|\.vue/g, '')
+  let label = path.replace(/.+[/\\]|\.vue/g, '')
   let data = fs.readFileSync(path)
   parser.write(data)
   parser.end()

src/renderer/services/models/Project.js

@@ -33,16 +33,18 @@ class Project {
 
   save ({name, path}, data, cb) {
     /* eslint-disable */
+    let template, styles, code
     const scripts = `<script>export default {}<\/script>`
-    const styles = `<style>.view {}</style>`
     const fullPath = `${path}/${name}`
     if (!fs.existsSync(fullPath)) {
       fs.mkdirSync(fullPath)
     }
     for (let page of data) {
       let {id, components} = page
-      let code = `<template>${stringifyTemplate(components)}</template>${scripts}${styles}`
-      code = pretty(code)
+      styles = components.find(_ => _.setting.label === 'style')
+      styles = `<style>${styles ? styles.props.domProps.innerText : ''}</style>`
+      template = `<template>${stringifyTemplate(components)}</template>`
+      code = pretty(`${template}${scripts}${styles}`)
       fs.writeFile(`${fullPath}/${id}.vue`, code, err => {
         if (err) console.log(err)
       })

src/renderer/store/index.js

@@ -40,8 +40,7 @@ let store = new Vuex.Store({
       return state[pageId] ? state[pageId].selectedComponent : null
     },
     pageCss (state, {components}) {
-      if (!components.length) return
-      return components[0].props.slots.find(_ => _.setting.label === 'style')
+      return components.find(_ => _.setting.label === 'style')
     }
   },
   mutations: {

src/renderer/views/home/children/CodePane.vue

@@ -38,7 +38,7 @@ export default {
       return `<script>export default {}<\/script>`
     },
     styles () {
-      return `<style>${this.pageCss ? this.pageCss.props.domProps.innerText : ''}</style>`
+      return `<style lang="css" scoped>${this.pageCss ? this.pageCss.props.domProps.innerText : ''}</style>`
     }
   },
   activated () {

src/renderer/views/home/children/InspectorPane.vue

@@ -28,6 +28,14 @@
             @change="handleChange"
             single-line
           />
+          <v-text-field
+            v-else-if="_.type==='Object'"
+            v-model="props[_.key]"
+            :placeholder="JSON.stringify(_.default)"
+            :required="_.required"
+            @change="handleChange"
+            single-line
+          />
           <v-text-field
             v-else
             v-model="props[_.key]"

src/renderer/views/home/children/OutlinePane.vue

@@ -4,8 +4,6 @@
       ref="tree"
       :data="componentTree"
       @node-click="handleSelect"
-      @node-contextmenu="handleDelete"
-      :filter-node-method="filterNode"
       node-key="id"
       empty-text="No Data"
       highlight-current
@@ -16,14 +14,14 @@
 
 <script>
 import {mapGetters, mapActions} from 'vuex'
-import {spliceIf, recursiveMap, recursiveFind} from '@/utils'
+import {recursiveMap, recursiveFind} from '@/utils'
 import {SET_SELECTED_COMPONENT} from '@/store/mutation-types'
 export default {
   computed: {
     ...mapGetters(['components', 'selectedComponent']),
     componentTree () {
       return recursiveMap(
-        this.components,
+        this.components.filter(_ => _.setting.label !== 'style'),
         _ => ({
           id: _.id,
           label: _.setting.label
@@ -35,19 +33,10 @@ export default {
   watch: {
     selectedComponent (component) {
       component && this.$nextTick(() => this.setCurrentKey(component.id))
-    },
-    components: {
-      handler (val) {
-        val && this.$nextTick(() => this.$refs['tree'].filter())
-      },
-      deep: true
     }
   },
   methods: {
     ...mapActions(['deleteComponent']),
-    filterNode (val, data) {
-      return data.label !== 'style'
-    },
     handleSelect (e, {data}) {
       let component = recursiveFind(this.components, _ => _.id === data.id, 'props.slots')
       this.$store.commit(SET_SELECTED_COMPONENT, component)
@@ -56,9 +45,9 @@ export default {
     setCurrentKey (id = this.selectedComponent.id) {
       this.$refs['tree'].setCurrentKey(id)
     },
-    handleDelete (e, _, node) {
-      const children = node.parent.childNodes
-      spliceIf(children, c => c.id === node.id)
+    handleDelete (e, _) {
+      // const children = node.parent.childNodes
+      // spliceIf(children, c => c.id === node.id)
       this.deleteComponent(_)
     }
   }

src/renderer/views/home/children/StylePane.vue

@@ -8,7 +8,7 @@
 import {codemirror} from 'vue-codemirror'
 import {mapGetters} from 'vuex'
 import {guid} from '@/utils'
-import {UPDATE_COMPONENT, ADD_COMPONENT_SLOT} from '@/store/mutation-types'
+import {UPDATE_COMPONENT, ADD_COMPONENT} from '@/store/mutation-types'
 export default {
   components: {
     codemirror
@@ -34,21 +34,20 @@ export default {
   },
   methods: {
     handleChange (innerText) {
-      if (!this.components.length) return
-      let {id} = this.components[0]
       let props = {
         domProps: { innerText: innerText.replace(/[\r\n]/g, '') }
       }
       // exsits => change innerText, not exsits => create style slot
       if (this.pageCss) {
         this.$store.commit(UPDATE_COMPONENT, { id: this.pageCss.id, props })
       } else {
-        let slot = {
+        let component = {
           id: guid(),
+          parent: 'wrapper',
           setting: { tag: 'style', label: 'style' },
           props
         }
-        this.$store.commit(ADD_COMPONENT_SLOT, { id, slot })
+        this.$store.commit(ADD_COMPONENT, component)
       }
     },
     resetCss () {

src/renderer/views/home/children/WidgetPane.vue

@@ -26,6 +26,7 @@ export default {
     ...mapGetters(['componentLibrary']),
     filteredWidgets () {
       return this.widgets[this.componentLibrary.label].filter(_ => _.setting.label.toLowerCase().includes(this.name))
+        .concat(this.widgets.native)
     }
   },
   methods: {

src/renderer/views/home/children/WireframePane.vue

@@ -22,9 +22,9 @@
 
 <script>
 import SelectedMask from './SelectedMask'
-import throttle from 'lodash.throttle'
 import componentMixins from '@/mixins/component'
 import {mapState, mapGetters, mapActions} from 'vuex'
+import throttle from 'lodash.throttle'
 import {createElement, guid, recursiveFind} from '@/utils'
 import {SET_SELECTED_COMPONENT, SET_SELECTED_WIDGET, ADD_COMPONENT_SLOT} from '@/store/mutation-types'
 export default {
@@ -127,6 +127,9 @@ export default {
         }
       }
     }
+  },
+  activated () {
+    this.reRender()
   }
 }
 </script>

src/renderer/widgets/element-ui/col/type.js

@@ -0,0 +1,85 @@
+const setting = Object.freeze({
+  label: 'el-col',
+  tag: 'VdElCol',
+  originTag: 'el-col',
+  category: 'layout',
+  config: {
+    Props: [
+      {
+        key: 'span',
+        label: 'span',
+        type: 'Number',
+        inputType: 'input',
+        default: 0
+      },
+      {
+        key: 'offset',
+        label: 'offset',
+        type: 'Number',
+        inputType: 'input',
+        default: 0
+      },
+      {
+        key: 'push',
+        label: 'push',
+        type: 'Number',
+        inputType: 'input',
+        default: 0
+      },
+      {
+        key: 'pull',
+        label: 'pull',
+        type: 'Number',
+        inputType: 'input',
+        default: 0
+      },
+      {
+        key: 'xs',
+        label: 'xs',
+        type: 'Object',
+        inputType: 'input',
+        default: {}
+      },
+      {
+        key: 'sm',
+        label: 'sm',
+        type: 'Object',
+        inputType: 'input',
+        default: {}
+      },
+      {
+        key: 'md',
+        label: 'md',
+        type: 'Object',
+        inputType: 'input',
+        default: {}
+      },
+      {
+        key: 'lg',
+        label: 'lg',
+        type: 'Object',
+        inputType: 'input',
+        default: {}
+      },
+      {
+        key: 'xl',
+        label: 'xl',
+        type: 'Object',
+        inputType: 'input',
+        default: {}
+      },
+      {
+        key: 'tag',
+        label: 'tag',
+        type: 'String',
+        inputType: 'input',
+        default: 'div'
+      }
+    ],
+    Slots: [
+      { name: 'default' }
+    ]
+  }
+})
+
+export default setting

src/renderer/widgets/element-ui/colorPicker/type.js

@@ -0,0 +1,59 @@
+const setting = Object.freeze({
+  label: 'el-color-picker',
+  tag: 'VdElColorPicker',
+  originTag: 'el-color-picker',
+  category: 'form',
+  config: {
+    Props: [
+      {
+        key: 'disabled',
+        label: 'disabled',
+        type: 'Boolean',
+        inputType: 'switch',
+        default: false
+      },
+      {
+        key: 'size',
+        label: 'size',
+        type: 'String',
+        inputType: 'select',
+        default: 'medium',
+        data: [
+          { value: 'medium', label: 'medium' },
+          { value: 'small', label: 'small' },
+          { value: 'mini', label: 'mini' }
+        ]
+      },
+      {
+        key: 'show-alpha',
+        label: 'show-alpha',
+        type: 'Boolean',
+        inputType: 'switch',
+        default: false
+      },
+      {
+        key: 'color-format',
+        label: 'color-format',
+        type: 'String',
+        inputType: 'select',
+        default: 'hex',
+        data: [
+          { value: 'hsl', label: 'hsl' },
+          { value: 'hsv', label: 'hsv' },
+          { value: 'hex', label: 'hex' },
+          { value: 'rgb', label: 'rgb' }
+        ]
+      },
+      {
+        key: 'popper-class',
+        label: 'popper-class',
+        type: 'String',
+        inputType: 'input',
+        default: ''
+      }
+    ],
+    Slots: []
+  }
+})
+
+export default setting