@idooel/components 0.0.0 → 0.0.1

package/packages/index.js

@@ -1,50 +1,51 @@
-import EleButton from './button/index.js'
-import EleDate from './date/index.js'
-import EleInput from './input/index.js'
-import EleSelect from './select/index.js'
-import EleTable from './table/index.js'
-import EleTree from './tree/index.js'
-import EleTpl from './tpl/index.js'
-
-import EleButtonGroup from './composite-components/button-group/index.js'
-import EleSearchArea from './composite-components/search-area/index.js'
-
-import EleTreeTableModel from './tree-table-model/index.js'
-
-const compositeComponents = [
-  EleButtonGroup,
-  EleSearchArea
-]
-
-const models = [
-  EleTreeTableModel
-]
-
-const components = [
-  EleButton,
-  EleDate,
-  EleInput,
-  EleSelect,
-  EleTable,
-  EleTree,
-  EleTpl,
-  ...compositeComponents,
-  ...models
-]
-
-const install = (Vue) => {
-  if (install.installed) return
-  install.installed = true
-  components.forEach(component => {
-    Vue.component(component.name, component)
-  })
-}
-export default install
-export {
-  EleButton,
-  EleDate,
-  EleInput,
-  EleSelect,
-  EleTable,
-  EleTree
+import EleButton from './button/index.js'
+import EleDate from './date/index.js'
+import EleInput from './input/index.js'
+import EleSelect from './select/index.js'
+import EleTable from './table/index.js'
+import EleTree from './tree/index.js'
+import EleTpl from './tpl/index.js'
+
+import EleButtonGroup from './composite-components/button-group/index.js'
+import EleSearchArea from './composite-components/search-area/index.js'
+
+import EleTreeTableModel from './tree-table-model/index.js'
+
+const compositeComponents = [
+  EleButtonGroup,
+  EleSearchArea
+]
+
+export const models = [
+  EleTreeTableModel
+]
+
+const components = [
+  EleButton,
+  EleDate,
+  EleInput,
+  EleSelect,
+  EleTable,
+  EleTree,
+  EleTpl,
+  ...compositeComponents,
+  ...models
+]
+
+const install = (Vue) => {
+  if (install.installed) return
+  install.installed = true
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+export default install
+export {
+  EleButton,
+  EleDate,
+  EleInput,
+  EleSelect,
+  EleTable,
+  EleTree,
+  EleTpl
 }

package/packages/input/index.js

@@ -1,5 +1,5 @@
-import EleInput from './src/index.vue'
-
-EleInput.install = Vue => Vue.component(EleInput.name, EleInput)
-
+import EleInput from './src/index.vue'
+
+EleInput.install = Vue => Vue.component(EleInput.name, EleInput)
+
 export default EleInput

package/packages/input/src/index.vue

@@ -1,24 +1,24 @@
-<template>
-  <a-input :value="value" @change="onChange"></a-input>
-</template>
-
-<script>
-export default {
-  name: 'ele-input',
-  props: {
-    value: {
-      type: String
-    }
-  },
-  methods: {
-    onChange (e) {
-      this.$emit('change', e.target.value)
-      this.$emit('input', e.target.value)
-    }
-  } 
-}
-</script>
-
-<style scoped>
-
+<template>
+  <a-input :value="value" @change="onChange"></a-input>
+</template>
+
+<script>
+export default {
+  name: 'ele-input',
+  props: {
+    value: {
+      type: String
+    }
+  },
+  methods: {
+    onChange (e) {
+      this.$emit('change', e.target.value)
+      this.$emit('input', e.target.value)
+    }
+  } 
+}
+</script>
+
+<style scoped>
+
 </style>

package/packages/select/index.js

@@ -1,5 +1,5 @@
-import EleSelect from './src/index.vue'
-
-EleSelect.install = Vue => Vue.component(EleSelect.name, EleSelect)
-
+import EleSelect from './src/index.vue'
+
+EleSelect.install = Vue => Vue.component(EleSelect.name, EleSelect)
+
 export default EleSelect

package/packages/select/src/index.vue

@@ -1,35 +1,35 @@
-<template>
-  <a-select :value="value" style="width: 100%" @change="onChange">
-    <a-select-option v-for="item in dataSource" :key="item.value" :value="item.value">
-      {{ item.label }}
-    </a-select-option>
-  </a-select>
-</template>
-
-<script>
-export default {
-  name: 'ele-select',
-  props: {
-    value: {
-      type: [String, Array, Number]
-    },
-    defaultValue: {
-      type: [String, Array, Number]
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    onChange (value) {
-      this.$emit('change', value)
-      this.$emit('input', value)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
+<template>
+  <a-select :value="value" style="width: 100%" @change="onChange">
+    <a-select-option v-for="item in dataSource" :key="item.value" :value="item.value">
+      {{ item.label }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script>
+export default {
+  name: 'ele-select',
+  props: {
+    value: {
+      type: [String, Array, Number]
+    },
+    defaultValue: {
+      type: [String, Array, Number]
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
 </style>

package/packages/table/index.js

@@ -1,5 +1,5 @@
-import EleTable from './src/index.vue'
-
-EleTable.install = Vue => Vue.component(EleTable.name, EleTable)
-
+import EleTable from './src/index.vue'
+
+EleTable.install = Vue => Vue.component(EleTable.name, EleTable)
+
 export default EleTable

package/packages/table/src/action.vue

@@ -1,45 +1,104 @@
-<template>
-  <div class="g-table__action">
-    <div class="table-action__item" v-for="(item, idx) in dataSource" :key="idx">
-      <template v-if="item.type == 'text'">
-        <span @click="handleClickText(item)">{{ item.label }}</span>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    record: {
-      type: Object
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    handleClickText (props) {
-      const { eventName, key } = props
-      this.$emit(eventName, { key, record: this.record })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-table__action {
-  display: flex;
-  flex-direction: row;
-  .table-action__item {
-    font-size: 14px;
-    color: #409EFF;
-    margin-left: 16px;
-    cursor: pointer;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
+<template>
+  <div class="g-table__action">
+    <div class="table-action__item" v-for="(item, idx) in dataSource" :key="idx">
+      <template v-if="item.type == 'text'">
+        <span>{{ item.label }}</span>
+      </template>
+      <template v-else-if="item.type == 'dropdown'">
+        <a-dropdown>
+          <a-menu slot="overlay" @click="handleDropdownClick">
+            <a-menu-item :key="`${item.key || ''}${menuKeyDelimiter}${opt.value || ''}`" v-for="opt in execDropdownOptExpression(item.optionList)">
+              <template v-if="opt.type == 'confirm'">
+                <a-popconfirm :title="opt.message" @confirm="handleClickConfirm(opt)">
+                  {{ opt.label }}
+                </a-popconfirm>
+              </template>
+              <template v-else>
+                {{ opt.label }}
+              </template>
+            </a-menu-item>
+          </a-menu>
+         <span>{{ item.label }}</span>
+        </a-dropdown>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v5 as uuidv5 } from 'uuid'
+import { type, route } from '@idooel/shared'
+import { parse } from '@idooel/expression'
+const MENU_KEY_NAMESPACE = 'f7b3b8b0-1b7b-11ec-9621-0242ac130002'
+export default {
+  props: {
+    record: {
+      type: Object
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    menuKeyDelimiter () {
+      return uuidv5('_', MENU_KEY_NAMESPACE)
+    }
+  },
+  methods: {
+    execDropdownOptExpression (dataSource = []) {
+      const ret = dataSource.map(item => {
+        const { show } = item
+        if (type.isUndefined(show)) {
+          return item
+        } else if (type.isBool(show)) {
+          if (show) return item
+        } else if (type.isStr(show)) {
+          const parseRet = parse(show, { ...this.record, _route: route.searchToQueryParams(window.location.search) })
+          if (parseRet) return item
+        }
+      }).filter(item => item)
+      console.log('ret', ret)
+      return ret
+    },
+    handleClickConfirm (props) {
+      //TODO generate event by special rule
+      const { eventName, value } = props
+      this.$emit(eventName, { key: value, record: this.record })
+    },
+    handleDropdownClick (props) {
+      const { key } = props
+      const [parent, child] = key.split(this.menuKeyDelimiter)
+      if (!parent || !child) {
+        throw new Error('key is required')
+      }
+      const currentDropdown = this.dataSource.find(item => item.key === parent)
+      const currentClickTarget = currentDropdown.optionList.find(item => item.value === child)
+      const { eventName, type } = currentClickTarget
+      //TODO generate event by special rule
+      if (type === 'confirm') return
+      this.$emit(eventName, { key: child, record: this.record })
+    },
+    handleClickText (props) {
+      const { eventName, key } = props
+      this.$emit(eventName, { key, record: this.record })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-table__action {
+  display: flex;
+  flex-direction: row;
+  .table-action__item {
+    font-size: 14px;
+    color: #409EFF;
+    margin-left: 16px;
+    cursor: pointer;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
 </style>

package/packages/table/src/index.vue

@@ -1,89 +1,89 @@
-<template>
-  <div class="g-table__wrapper">
-    <a-table
-      :pagination="false"
-      :loading="loading"
-      :columns="columns"
-      :row-class-name="setRowClassName"
-      :data-source="dataSource"
-      :scroll="{ x: 1500, y: 500 }">
-      <template slot="action" slot-scope="record">
-        <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
-      </template>
-    </a-table>
-    <div class="g-table__pagination">
-      <a-pagination
-        :show-total="total => `共 ${total} 条数据`"
-        show-size-changer 
-        show-quick-jumper
-        :pageSize="pageSize"
-        :pageSizeOptions="pageSizeOptions"
-        @change="onChangePagination" 
-        :total="total">
-      </a-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import Actions from './action.vue'
-export default {
-  name: 'ele-table',
-  components: {
-    Actions
-  },
-  props: {
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    },
-    pageSize: {
-      type: Number,
-      default: 10
-    },
-    pageSizeOptions: {
-      type: Array,
-      default: () => ['10', '20', '30', '40']
-    }
-  },
-  methods: {
-    setRowClassName (record, idx) {
-      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
-    },
-    onChangePagination (page, pagrSize) {
-      this.$emit('change-page', page, pagrSize)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-table__wrapper {
-  padding: 16px;
-  padding-top: unset;
-  .g-table__row--even {}
-  .g-table__row--odd {}
-  .g-table__pagination {
-    margin-top: 8px;
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-  }
-}
+<template>
+  <div class="g-table__wrapper">
+    <a-table
+      :pagination="false"
+      :loading="loading"
+      :columns="columns"
+      :row-class-name="setRowClassName"
+      :data-source="dataSource"
+      :scroll="{ x: 1500, y: 500 }">
+      <template slot="action" slot-scope="record">
+        <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
+      </template>
+    </a-table>
+    <div class="g-table__pagination">
+      <a-pagination
+        :show-total="total => `共 ${total} 条数据`"
+        show-size-changer 
+        show-quick-jumper
+        :pageSize="pageSize"
+        :pageSizeOptions="pageSizeOptions"
+        @change="onChangePagination" 
+        :total="total">
+      </a-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Actions from './action.vue'
+export default {
+  name: 'ele-table',
+  components: {
+    Actions
+  },
+  props: {
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => ['10', '20', '30', '40']
+    }
+  },
+  methods: {
+    setRowClassName (record, idx) {
+      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
+    },
+    onChangePagination (page, pagrSize) {
+      this.$emit('change-page', page, pagrSize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-table__wrapper {
+  padding: 16px;
+  padding-top: unset;
+  .g-table__row--even {}
+  .g-table__row--odd {}
+  .g-table__pagination {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+  }
+}
 </style>

package/packages/tpl/index.js

@@ -1,5 +1,5 @@
-import EleTpl from './src/index.vue'
-
-EleTpl.install = Vue => Vue.component(EleTpl.name, EleTpl)
-
+import EleTpl from './src/index.vue'
+
+EleTpl.install = Vue => Vue.component(EleTpl.name, EleTpl)
+
 export default EleTpl

package/packages/tpl/src/index.vue

@@ -1,39 +1,47 @@
-<template>
-  <component 
-    v-if="modelName" 
-    :is="modelName" 
-    :ref="genModelRef" 
-    v-bind="$attrs" 
-    v-on="$listeners">
-    <template v-for="(idx, name) in $scopedSlots" v-slot:[name]="data">
-      <slot :name="name" v-bind="data"></slot>
-    </template>
-  </component>
-  <div v-else>未正确配置模版</div>
-</template>
-
-<script>
-import EleTreeTableModel from '../../tree-table-model/src/index.vue'
-import { v4 as uuidv4 } from 'uuid'
-export default {
-  name: 'ele-tpl',
-  props: {
-    modelName: {
-      type: String
-    }
-  },
-  components: {
-    [EleTreeTableModel.name]: EleTreeTableModel
-  },
-  computed: {
-    genModelRef () {
-      return uuidv4()
-    }
-  },
-  methods: {
-    getModel () {
-      return this.$refs[this.genModelRef]
-    }
-  }
-}
+<template>
+  <component 
+    v-if="modelNameValidator.existed"
+    :is="modelName" 
+    :ref="genModelRef" 
+    v-bind="$attrs" 
+    v-on="$listeners">
+    <template v-for="(idx, name) in $scopedSlots" v-slot:[name]="data">
+      <slot :name="name" v-bind="data"></slot>
+    </template>
+  </component>
+  <div v-else v-html="modelNameValidator.message"></div>
+</template>
+
+<script>
+import EleTreeTableModel from '../../tree-table-model/src/index.vue'
+import { v4 as uuidv4 } from 'uuid'
+import { models } from '../../index.js'
+export default {
+  name: 'ele-tpl',
+  props: {
+    modelName: {
+      type: String
+    }
+  },
+  components: {
+    [EleTreeTableModel.name]: EleTreeTableModel
+  },
+  computed: {
+    modelNameValidator () {
+      const target = models.find(model => model.name === this.modelName)
+      return {
+        existed: !!target,
+        message: !!target ? '' : `Model <span style="color:red;">${this.modelName}</span> not found`
+      }
+    },
+    genModelRef () {
+      return uuidv4()
+    }
+  },
+  methods: {
+    getModel () {
+      return this.$refs[this.genModelRef]
+    }
+  }
+}
 </script>