vxe-design 0.0.1 → 3.0.1

package/package.json

@@ -1,47 +1,80 @@
 {
   "name": "vxe-design",
-  "version": "0.0.1",
-  "description": "design",
+  "version": "3.0.1",
+  "description": "A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms",
+  "scripts": {
+    "update": "npm install --legacy-peer-deps",
+    "serve": "vue-cli-service serve",
+    "lib:pack": "vue-cli-service build --target lib --name index --dest lib_temp index.ts",
+    "lib:modules": "gulp build",
+    "lib": "npm run lib:pack && npm run lib:modules"
+  },
   "files": [
     "lib",
-    "types"
+    "es",
+    "src",
+    "helper",
+    "types",
+    "styles",
+    "packages"
   ],
   "main": "lib/index.common.js",
   "module": "es/index.esm.js",
-  "unpkg": "lib/index.umd.js",
+  "unpkg": "lib/index.umd.js", 
   "jsdelivr": "lib/index.umd.js",
+  "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "devDependencies": {
-    "@babel/core": "^7.4.4",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "@babel/runtime": "^7.4.4",
-    "eslint": "^5.16.0",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-standard": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "core-js": "^3.8.3",
+    "del": "^6.1.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^8.0.3",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^7.0.1",
+    "gulp-autoprefixer": "^8.0.0",
     "gulp-babel": "^8.0.0",
-    "gulp-clean-css": "^4.2.0",
+    "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
     "gulp-rename": "^2.0.0",
-    "gulp-replace": "^1.0.0",
-    "gulp-sass": "^4.1.0",
+    "gulp-replace": "^1.1.4",
+    "gulp-sass": "^5.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
-    "markdown-doctest": "^1.0.0"
+    "sass": "^1.80.4",
+    "sass-loader": "^14.2.1",
+    "typescript": "~5.9.3",
+    "vue-template-compiler": "2.6.14",
+    "vue": "~2.6.14",
+    "vue-i18n": "^8.15.1",
+    "vue-router": "^3.5.1",
+    "vxe-pc-ui": "3.16.0",
+    "vxe-table": "3.22.0"
+  },
+  "vetur": {
+    "tags": "helper/vetur/tags.json",
+    "attributes": "helper/vetur/attributes.json"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/x-extends/vxe-design.git"
   },
   "keywords": [
-    "form",
-    "table",
-    "design"
+    "vxe",
+    "vxe-ui",
+    "vxe-design"
   ],
   "author": {
     "name": "Xu Liangzhan",
@@ -50,6 +83,5 @@
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/x-extends/vxe-design/issues"
-  },
-  "homepage": "https://github.com/x-extends/vxe-design/"
+  }
 }

package/packages/components.ts

@@ -0,0 +1,38 @@
+import { VueConstructor } from 'vue'
+import VxeUI from './ui'
+
+import VxeFlowDesign from './flow-design'
+import VxeFlowView from './flow-view'
+import VxeFormDesign from './form-design'
+import VxeFormView from './form-view'
+import VxeListDesign from './list-design'
+import VxeListView from './list-view'
+
+import type { VxeGlobalConfig } from 'vxe-pc-ui'
+
+const { setConfig } = VxeUI
+
+const components = [
+  VxeFlowDesign,
+  VxeFlowView,
+  VxeFormDesign,
+  VxeFormView,
+  VxeListDesign,
+  VxeListView
+]
+
+export function install (app: VueConstructor, options?: VxeGlobalConfig) {
+  setConfig(options)
+
+  components.forEach(component => app.use(component))
+}
+
+export { VxeUI }
+
+// Components
+export * from './flow-design'
+export * from './flow-view'
+export * from './form-design'
+export * from './form-view'
+export * from './list-design'
+export * from './list-view'

package/packages/flow-design/index.ts

@@ -0,0 +1,19 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
+import VxeFlowDesignComponent from './src/flow-design'
+
+export const VxeFlowDesign = Object.assign({}, VxeFlowDesignComponent, {
+  install (app: VueConstructor) {
+    checkDependVersion()
+    app.component(VxeFlowDesignComponent.name as string, VxeFlowDesignComponent)
+  }
+})
+
+if (VxeUI.dynamicApp) {
+  VxeUI.dynamicApp.use(VxeFlowDesign)
+}
+VxeUI.component(VxeFlowDesignComponent)
+
+export const FlowDesign = VxeFlowDesign
+export default VxeFlowDesign

package/packages/flow-design/src/flow-design.ts

@@ -0,0 +1,60 @@
+import { CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
+import XEUtils from 'xe-utils'
+
+import type { ValueOf } from 'vxe-pc-ui'
+import type { FlowDesignReactData, VxeFlowDesignEmits } from '../../../types'
+
+const { createEvent } = VxeUI
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeFlowDesign',
+  props: {
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: FlowDesignReactData = {
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeFlowDesignEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeFlowDesign = this
+      $xeFlowDesign.$emit(type, createEvent(evnt, { $flowDesign: $xeFlowDesign }, params))
+    },
+    emitModel  (value: any) {
+      const $xeFlowDesign = this
+
+      const { _events } = $xeFlowDesign as any
+      if (_events && _events.modelValue) {
+        $xeFlowDesign.$emit('modelValue', value)
+      } else {
+        $xeFlowDesign.$emit('model-value', value)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeFlowDesign = this
+      const slots = $xeFlowDesign.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: 'vxe-flow-design'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/flow-design/src/flow-view.ts

@@ -0,0 +1,60 @@
+import { CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
+import XEUtils from 'xe-utils'
+
+import type { ValueOf } from 'vxe-pc-ui'
+import type { FlowViewReactData, VxeFlowViewEmits } from '../../../types'
+
+const { createEvent } = VxeUI
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeFlowView',
+  props: {
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: FlowViewReactData = {
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeFlowViewEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeFlowView = this
+      $xeFlowView.$emit(type, createEvent(evnt, { $flowView: $xeFlowView }, params))
+    },
+    emitModel  (value: any) {
+      const $xeFlowView = this
+
+      const { _events } = $xeFlowView as any
+      if (_events && _events.modelValue) {
+        $xeFlowView.$emit('modelValue', value)
+      } else {
+        $xeFlowView.$emit('model-value', value)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeFlowView = this
+      const slots = $xeFlowView.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: 'vxe-flow-view'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/flow-view/index.ts

@@ -0,0 +1,19 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
+import VxeFlowViewComponent from '../flow-design/src/flow-view'
+
+export const VxeFlowView = Object.assign({}, VxeFlowViewComponent, {
+  install (app: VueConstructor) {
+    checkDependVersion()
+    app.component(VxeFlowViewComponent.name as string, VxeFlowViewComponent)
+  }
+})
+
+if (VxeUI.dynamicApp) {
+  VxeUI.dynamicApp.use(VxeFlowView)
+}
+VxeUI.component(VxeFlowViewComponent)
+
+export const FlowView = VxeFlowView
+export default VxeFlowView

package/packages/form-design/index.ts

@@ -0,0 +1,19 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
+import VxeFormDesignComponent from './src/form-design'
+
+export const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
+  install (app: VueConstructor) {
+    checkDependVersion()
+    app.component(VxeFormDesignComponent.name as string, VxeFormDesignComponent)
+  }
+})
+
+if (VxeUI.dynamicApp) {
+  VxeUI.dynamicApp.use(VxeFormDesign)
+}
+VxeUI.component(VxeFormDesignComponent)
+
+export const FormDesign = VxeFormDesign
+export default VxeFormDesign

package/packages/form-design/src/form-design.ts

@@ -0,0 +1,105 @@
+import { CreateElement, VNode, PropType } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
+import XEUtils from 'xe-utils'
+
+import type { ValueOf } from 'vxe-pc-ui'
+import type { FormDesignReactData, VxeFormDesignDefines, VxeFormDesignEmits, VxeFormDesignPropTypes } from '../../../types'
+
+const { getConfig, createEvent } = VxeUI
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeFormDesign',
+  props: {
+    size: {
+      type: String as PropType<VxeFormDesignPropTypes.Size>,
+      default: () => getConfig().formDesign.size || getConfig().size
+    },
+    config: Object as PropType<VxeFormDesignPropTypes.Config>,
+    height: {
+      type: [String, Number] as PropType<VxeFormDesignPropTypes.Height>,
+      default: () => getConfig().formDesign.height
+    },
+    widgets: {
+      type: Array as PropType<VxeFormDesignPropTypes.Widgets>,
+      default: () => XEUtils.clone(getConfig().formDesign.widgets) || []
+    },
+    showHeader: {
+      type: Boolean as PropType<VxeFormDesignPropTypes.ShowHeader>,
+      default: () => getConfig().formDesign.showHeader
+    },
+    showPc: {
+      type: Boolean as PropType<VxeFormDesignPropTypes.ShowPc>,
+      default: () => getConfig().formDesign.showPc
+    },
+    showMobile: {
+      type: Boolean as PropType<VxeFormDesignPropTypes.ShowMobile>,
+      default: () => getConfig().formDesign.showMobile
+    },
+    showStyleSetting: {
+      type: Boolean as PropType<VxeFormDesignPropTypes.ShowStyleSetting>,
+      default: () => getConfig().formDesign.showStyleSetting
+    },
+    formRender: Object as PropType<VxeFormDesignPropTypes.FormRender>,
+    menuConfig: Object as PropType<VxeFormDesignPropTypes.MenuConfig>
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: FormDesignReactData = {
+      formData: {} as VxeFormDesignDefines.DefaultSettingFormDataObjVO,
+      widgetConfigs: [],
+      widgetObjList: [],
+      dragWidget: null,
+      sortWidget: null,
+      activeWidget: null
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  computed: {
+    computeMenuOpts () {
+      const $xeFormDesign = this
+      const props = $xeFormDesign
+
+      return Object.assign({}, getConfig().calendar.menuConfig, props.menuConfig)
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeFormDesignEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeFormDesign = this
+      $xeFormDesign.$emit(type, createEvent(evnt, { $formDesign: $xeFormDesign }, params))
+    },
+    emitModel  (value: any) {
+      const $xeFormDesign = this
+
+      const { _events } = $xeFormDesign as any
+      if (_events && _events.modelValue) {
+        $xeFormDesign.$emit('modelValue', value)
+      } else {
+        $xeFormDesign.$emit('model-value', value)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeFormDesign = this
+      const slots = $xeFormDesign.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: 'vxe-form-design'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/form-design/src/form-view.ts

@@ -0,0 +1,63 @@
+import { CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+
+import type { ValueOf } from 'vxe-pc-ui'
+import type { FormViewReactData, VxeFormViewEmits } from '../../../types'
+
+const { createEvent } = VxeUI
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeFormView',
+  props: {
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: FormViewReactData = {
+      formConfig: {},
+      formRules: {},
+      widgetObjList: []
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeFormViewEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeFormView = this
+      $xeFormView.$emit(type, createEvent(evnt, { $formView: $xeFormView }, params))
+    },
+    emitModel  (value: any) {
+      const $xeFormView = this
+
+      const { _events } = $xeFormView as any
+      if (_events && _events.modelValue) {
+        $xeFormView.$emit('modelValue', value)
+      } else {
+        $xeFormView.$emit('model-value', value)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeFormView = this
+      const slots = $xeFormView.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: 'vxe-form-view'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/form-view/index.ts

@@ -0,0 +1,19 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
+import VxeFormViewComponent from '../form-design/src/form-view'
+
+export const VxeFormView = Object.assign(VxeFormViewComponent, {
+  install (app: VueConstructor) {
+    checkDependVersion()
+    app.component(VxeFormViewComponent.name as string, VxeFormViewComponent)
+  }
+})
+
+if (VxeUI.dynamicApp) {
+  VxeUI.dynamicApp.use(VxeFormView)
+}
+VxeUI.component(VxeFormViewComponent)
+
+export const FormView = VxeFormView
+export default VxeFormView

package/packages/index.ts

@@ -0,0 +1,8 @@
+import * as VxeUIDesignExport from './components'
+
+export * from './components'
+
+/**
+ * A vue based PC component library
+ */
+export default VxeUIDesignExport

package/packages/list-design/index.ts

@@ -0,0 +1,19 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
+import VxeListDesignComponent from './src/list-design'
+
+export const VxeListDesign = Object.assign({}, VxeListDesignComponent, {
+  install (app: VueConstructor) {
+    checkDependVersion()
+    app.component(VxeListDesignComponent.name as string, VxeListDesignComponent)
+  }
+})
+
+if (VxeUI.dynamicApp) {
+  VxeUI.dynamicApp.use(VxeListDesign)
+}
+VxeUI.component(VxeListDesignComponent)
+
+export const ListDesign = VxeListDesign
+export default VxeListDesign

package/packages/list-design/src/list-design.ts

@@ -0,0 +1,64 @@
+import { CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+
+import type { ValueOf } from 'vxe-pc-ui'
+import type { ListDesignReactData, VxeListDesignDefines, VxeListDesignEmits } from '../../../types'
+
+const { createEvent } = VxeUI
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeListDesign',
+  props: {
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: ListDesignReactData = {
+      formData: {} as VxeListDesignDefines.DefaultSettingFormDataObjVO,
+      searchFormData: {},
+      searchFormItems: [],
+      listTableColumns: []
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeListDesignEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeListDesign = this
+      $xeListDesign.$emit(type, createEvent(evnt, { $listDesign: $xeListDesign }, params))
+    },
+    emitModel  (value: any) {
+      const $xeListDesign = this
+
+      const { _events } = $xeListDesign as any
+      if (_events && _events.modelValue) {
+        $xeListDesign.$emit('modelValue', value)
+      } else {
+        $xeListDesign.$emit('model-value', value)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeListDesign = this
+      const slots = $xeListDesign.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: 'vxe-list-design'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/list-design/src/list-view.ts

@@ -0,0 +1,68 @@
+import { CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+
+import type { ValueOf } from 'vxe-pc-ui'
+import type { ListViewReactData, VxeListDesignDefines, VxeListViewEmits } from '../../../types'
+
+const { createEvent } = VxeUI
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeListView',
+  props: {
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: ListViewReactData = {
+      formConfig: {} as VxeListDesignDefines.DefaultSettingFormDataObjVO,
+      searchFormData: {},
+      searchFormItems: [],
+      listTableColumns: [],
+      tableColumns: [],
+      footerData: [
+        {} // 默认一行合计
+      ]
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeListViewEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeListView = this
+      $xeListView.$emit(type, createEvent(evnt, { $listView: $xeListView }, params))
+    },
+    emitModel  (value: any) {
+      const $xeListView = this
+
+      const { _events } = $xeListView as any
+      if (_events && _events.modelValue) {
+        $xeListView.$emit('modelValue', value)
+      } else {
+        $xeListView.$emit('model-value', value)
+      }
+    },
+
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      const $xeListView = this
+      const slots = $xeListView.$scopedSlots
+
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: 'refElem',
+        class: 'vxe-list-view'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */