@idooel/components 0.0.1 → 0.0.2-beta.10

package/packages/utils/index.js

@@ -0,0 +1,63 @@
+import { parse } from '@idooel/expression'
+
+export const NAMESPACE = '__idooel__ele__'
+export const CONTEXT = '__idooel__ele__context__'
+export const EXPOSED = 'exposed'
+
+export const AREA_NAMES = {
+  BUTTON_GROUP: 'BUTTON_GROUP'
+}
+
+export const BUILT_IN_EVENT_NAMES = {
+  SUBMIT: 'submit',
+  CANCEL: 'cancel',
+  INCREASE: 'increase',
+  DELETE: 'delete',
+  NEXT: 'next',
+  PREVIOUS: 'previous',
+  // create, edit, view are reserved for table cru in the current version
+  CREATE: 'create',
+  EDIT: 'edit',
+  VIEW: 'view'
+}
+export const BUILT_IN_METHODS_NAMES = {
+  CLOSE_MODAL: 'closeModal',
+  SUBMIT_FORM: 'submitForm',
+  //TODO: not use
+  REFRESH_TABLE: 'refreshTable',
+  CLEAN_EFFECT: 'cleanEffect'
+}
+
+export const BUILT_IN_TRIGGER = {
+  // default it's not a trigger
+  TEXT: 'text',
+  //状态机触发器
+  FSM: 'fsm',
+  ELE_MODAL_FORM: 'ele-modal-form',
+  ELE_MODAL_TABLE: 'ele-modal-table'
+}
+export const PAGE_STATUS = {
+  CREATE: 'create',
+  //TODO implement edit and view
+  EDIT: 'edit',
+  VIEW: 'view'
+}
+export const RESERVE_EVENT_NAMES = {
+  //global event
+  INIT: 'init',
+  WATCH: 'watch',
+  //form event
+  WATCH_FORM_STATUS: 'watch-form-status',
+  INIT_FORM: 'init-form',
+  //table event
+  SEARCH: 'search',
+  TREE_CHANGE: 'tree-change'
+}
+
+export const parseFieldMap = (fieldMap = {}, dataSource = {}) => {
+  let ret = {}
+  Object.keys(fieldMap).forEach((key) => {
+    ret[fieldMap[key]] = parse(key, dataSource)
+  })
+  return ret
+}

package/scripts/rollup.config.js

@@ -5,32 +5,39 @@ import strip from '@rollup/plugin-strip'
 import vue from 'rollup-plugin-vue'
 import postcss from 'rollup-plugin-postcss'
 import postcssImport from 'postcss-import'
-import babel from 'rollup-plugin-babel'
+import { babel } from '@rollup/plugin-babel'
+import alias from '@rollup/plugin-alias'
+import { resolve } from 'path'
 
 //TODO: bundle all packages in future
 
 /** @type { import('rollup').RollupOptions } */
 export default {
   input: 'packages/index.js',
-  external: ['vue', '@idooel/shared'],
+  external: ['vue', '@idooel/shared', '@idooel/expression', 'vue-upload-component', 'moment'],
   plugins: [
     nodeResolve(),
-    babel({
-      exclude: 'node_modules/**'
-    }),
     vue({
       css: true,
       compileTemplate: true
     }),
+    alias({
+      entries: [
+        { find: '@/utils', replacement: resolve(__dirname, '../packages/utils') }
+      ]
+    }),
+    babel({
+      babelHelpers: 'bundled',
+      presets: ['@vue/babel-preset-jsx'],
+      extensions: ['.js', '.jsx', '.es', '.es6', '.mjs', '.vue'],
+      filter: id=>{
+        return /(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id) && !/node_modules/.test(id)
+      }
+    }),
     postcss({
-      extensions: ['.css'],
+      extensions: ['.css', '.scss'],
       extract: true,
       plugins: [postcssImport()]
     })
-    // terser(),
-    // strip({
-    //   functions: ['console.log', 'assert.*', 'debug', 'alert'],
-    //   sourceMap: true
-    // })
   ]
 }

package/scripts/rollup.umd.config.js

@@ -8,7 +8,9 @@ export default {
     file: main,
     format: 'umd',
     globals: {
-      vue: 'Vue'
+      vue: 'Vue',
+      '@idooel/shared': '@idooel/shared',
+      '@idooel/expression': '@idooel/expression'
     },
     exports: 'named'
   }

package/vitest.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue2'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'packages')
+    }
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['__tests__/setup.js']
+  }
+})

package/packages/tree-table-model/src/index.vue

@@ -1,290 +0,0 @@
-<template>
-  <section class="model__tree-table">
-    <section :ref="modelTreeWrapper" class="model__tree--wrapper">
-      <ele-tree 
-        :tree-data="treeData"
-        :defaultExpandedKeys="defaultExpandedKeys"
-        :defaultSelectedKeys="defaultSelectedKeys"
-        @select="selectTreeNode"
-        :replace-fields="treeMeta.replaceFields || replaceFields">
-      </ele-tree>
-    </section>
-    <section :ref="modelTableWrapper" class="model__table--wrapper">
-      <ele-search-area :ref="searchArea" @search="onSearch" :data-source="searchMeta.elements"></ele-search-area>
-      <ele-button-group :ref="buttonGroup" @click="handleClickButtonGroup" style="margin-top: 16px" :data-source="getButtonGroupElements"></ele-button-group>
-      <ele-table
-        v-on="$listeners"
-        :loading="loading" 
-        :columns="columns"
-        :total="total"
-        :actions="actions"
-        :pageSize="pageSize"
-        :pageSizeOptions="pageSizeOptions"
-        :data-source="tableData"
-        @change-page="onChangePage" 
-        style="margin-top: 8px;"
-      ></ele-table>
-    </section>
-  </section>
-</template>
-
-<script>
-import EleTree from '../../tree/src/index.vue'
-import EleTable from '../../table/src/index.vue'
-import EleSearchArea from '../../composite-components/search-area/src/index.vue'
-import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
-import { type, net } from '@idooel/shared'
-import { v4 as uuidv4 } from 'uuid'
-export default {
-  name: 'ele-tree-table-model',
-  components: {
-    EleTree,
-    EleTable,
-    EleSearchArea,
-    EleButtonGroup
-  },
-  props: {
-    treeMeta: {
-      type: Object,
-      default: () => ({})
-    },
-    searchMeta: {
-      type: Object,
-      default: () => ({})
-    },
-    buttonGroupMeta: {
-      typeof: Object,
-      default: () => ({})
-    },
-    tableMeta: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      treeData: [],
-      tableData: [],
-      defaultExpandedKeys: [],
-      defaultSelectedKeys: [],
-      replaceFields: {
-        title: 'title',
-        children: 'children',
-        key: 'id'
-      },
-      loading: false,
-      total: 0,
-      tableQuerys: {},
-      resizeObserverModelTableWrapper: null,
-      modelTableWrapperHeight: 0,
-      currentTreeNodeData: {}
-    }
-  },
-  computed: {
-    buttonGroup () {
-      return uuidv4()
-    },
-    searchArea () {
-      return uuidv4()
-    },
-    modelTreeWrapper () {
-      return uuidv4()
-    },
-    modelTableWrapper () {
-      return uuidv4()
-    },
-    actions () {
-      const { operations } = this.tableMeta
-      return operations.elements
-    },
-    pageSize () {
-      const { page = {} } = this.tableMeta
-      return page.pageSize || 10
-    },
-    pageSizeOptions () {
-      const { page = {} } = this.tableMeta
-      return page.pageSizeOptions || ['10', '20', '30', '40']
-    },
-    columns () {
-      const { columns, operations } = this.tableMeta
-      if (type.get(columns) === 'array') {
-        const columnsOptions = columns.map(item => {
-          if (item.render) {
-            return {
-              title: item.title,
-              dataIndex: item.dataIndex,
-              width: item.width,
-              align: item.align,
-              fixed: item.fixed,
-              customRender: (text, record, index) => {
-                const { $createElement } = this
-                return item.render.call(this, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], record, index)
-              }
-            }
-          }
-          return {
-            title: item.title,
-            dataIndex: item.dataIndex,
-            width: item.width,
-            align: item.align,
-            fixed: item.fixed
-          }
-        })
-        if (operations) {
-          return [
-            ...columnsOptions,
-            {
-              title: '操作',
-              width: operations.width,
-              key: 'action',
-              fixed: 'right',
-              scopedSlots: { customRender: 'action' }
-            }
-          ]
-        }
-        return columnsOptions
-      } else {
-        console.error('Error: columns is invalid, please check it')
-        return []
-      }
-    },
-    getButtonGroupElements () {
-      const { elements } = this.buttonGroupMeta
-      if (type.get(elements) === 'function') {
-        return elements.call(this)
-      } else if (type.get(elements) === 'array') {
-        return elements
-      } else {
-        return []
-      }
-    }
-  },
-  async created () {
-    this.treeData = await this.requestTreeData()
-    const [defaultTreeNode = {}] = this.treeData
-    this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
-    this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
-    const { fieldMap } = this.tableMeta
-    this.currentTreeNodeData = defaultTreeNode
-    this.tableData = await this.requestTableData(this.execTableFieldMap(fieldMap, defaultTreeNode))
-  },
-  methods: {
-    handleClickButtonGroup (props) {
-      const { eventName } = props
-      this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })
-    },
-    watchViewPort () {
-      const modelTableWrapper = this.$refs[this.modelTableWrapper]
-      console.log(modelTableWrapper.getBoundingClientRect())
-      const { top } = modelTableWrapper.getBoundingClientRect()
-      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`
-    },
-    async onSearch (props) {
-      this.tableQuerys = Object.assign(this.tableQuerys, props)
-      this.tableData = await this.requestTableData()
-    },
-    execTableFieldMap (fieldMap = {}, props) {
-      let ret = {}
-      const keys = Object.keys(fieldMap)
-      keys.forEach(key => {
-        const field = fieldMap[key]
-        ret[field] = props[key]
-      })
-      return ret
-    },
-    async selectTreeNode (selectedKeys, e) {
-      const { fieldMap } = this.tableMeta
-      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef
-      const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)
-      this.tableData = await this.requestTableData(execFieldMapRet)
-    },
-    async requestTreeData () {
-      const { url, requestType } = this.treeMeta
-      const ret = await net.get(
-        url
-      ).then(resp => {
-        const { data } = resp || {}
-        return data
-      })
-      return ret
-    },
-    async onChangePage (page, pageSize) {
-      this.tableData = await this.requestTableData({ currentPage: page, pageSize })
-    },
-    async requestTableData (props = {}) {
-      const { url, requestType, page = {} } = this.tableMeta
-      const { pageSize = 10 } = page
-      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)
-      const ret = await net.get(
-        url,
-        this.tableQuerys
-      ).then(resp => {
-        const { data = [], count } = resp || {}
-        this.total = count
-        return data.map(item => {
-          return {
-            key: uuidv4(),
-            ...item
-          }
-        })
-      })
-      return ret
-    },
-    refreshTreeStatus (props = {}) {},
-    refreshTableStatus (props = {}) {},
-    getModelTableWrapperHeight () {},
-    setModelTreeWrapperHeight (height) {
-      this.$refs[this.modelTreeWrapper].style.height = height
-    },
-    setModelTableWrapperHeight () {
-      const { top } = this.$refs[this.modelTableWrapper].getBoundingClientRect()
-      const height = `calc(100vh - ${top}px)`
-      this.$refs[this.modelTableWrapper].style.height = height
-      this.setModelTreeWrapperHeight(height)
-    },
-    getSearchAreaHeight () {
-      return this.$refs[this.searchArea].$el.clientHeight
-    },
-    getButtonGroupHeight () {
-      return this.$refs[this.buttonGroup].$el.clientHeight
-    }
-  },
-  mounted () {
-    //TODO
-    // this.setModelTableWrapperHeight()
-    // this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {
-    //   for (let entry of entries) {
-    //     this.modelTableWrapperHeight = entry.contentRect.height
-    //     console.log('this.modelTableWrapperHeight:', this.modelTableWrapperHeight)
-    //     console.log('getSearchAreaHeight', this.getSearchAreaHeight())
-    //     console.log('getButtonGroupHeight', this.getButtonGroupHeight())
-    //     const tableHeight = this.modelTableWrapperHeight - this.getSearchAreaHeight() - this.getButtonGroupHeight()
-    //     console.log('tableHeight', tableHeight)
-    //   }
-    // })
-    // this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.model__tree-table {
-  background: transparent;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  .model__tree--wrapper {
-    width: 240px;
-    background: #fff;
-    flex-shrink: 0;
-    padding: 16px;
-    box-sizing: border-box;
-    margin-right: 16px;
-    overflow-y: auto;
-  }
-  .model__table--wrapper {
-    min-width: 0;
-    background: #fff;
-  }
-}
-</style>