@idooel/components 0.0.0

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@idooel/components",
+  "version": "0.0.0",
+  "description": "",
+  "private": false,
+  "main": "dist/@idooel/components.umd.js",
+  "engines": {
+    "node": ">=14"
+  },
+  "author": "Ruster <protagonisths@gmail.com> (https://github.com/Protagonistss)",
+  "scripts": {
+    "build": "rollup --config scripts/rollup.umd.config.js"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "peerDependencies": {
+    "ant-design-vue": "1.7.8",
+    "moment": "^2.30.1",
+    "@idooel/shared": "workspace:^0.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.17.9",
+    "@idooel/shared": "workspace:^0.0.0",
+    "@rollup/plugin-node-resolve": "13.2.0",
+    "@rollup/plugin-strip": "2.1.0",
+    "@vue/compiler-sfc": "3.2.33",
+    "babel-plugin-component": "1.1.1",
+    "babel-plugin-external-helpers": "6.22.0",
+    "postcss": "8.4.12",
+    "postcss-import": "14.1.0",
+    "rollup": "2.70.1",
+    "rollup-plugin-babel": "4.4.0",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "5.1.9",
+    "vue-template-compiler": "2.7.16"
+  },
+  "dependencies": {
+    "uuid": "^9.0.1"
+  }
+}

package/packages/button/index.js

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

package/packages/button/src/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <a-button :type="type" :icon="icon" @click="handleClick">
+    <slot></slot>
+  </a-button>
+</template>
+
+<script>
+export default {
+  name: 'ele-button',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    icon: {
+      type: String
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>

package/packages/composite-components/button-group/index.js

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

package/packages/composite-components/button-group/src/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="button-group__wrapper">
+    <ele-button 
+      v-for="(item, idx) in dataSource" 
+      :type="item.type"
+      :icon="item.icon"
+      @click="handleClick(item)" 
+      :key="idx">
+      {{ item.label }}
+    </ele-button>
+  </div>
+</template>
+
+<script>
+import EleButton from '../../../button/src/index.vue'
+export default {
+  name: 'ele-button-group',
+  components: {
+    EleButton
+  },
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleClick (props) {
+      this.$emit('click', props)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.button-group__wrapper {
+  display: flex;
+  padding-left: 16px;
+  padding-right: 16px;
+  .ant-btn {
+    margin-left: 8px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+</style>

package/packages/composite-components/search-area/index.js

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

package/packages/composite-components/search-area/src/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="search-area__wrapper">
+    <a-row :gutter="gutter">
+      <a-col :span="item.span || span" v-for="(item, idx) in innerDataSource" :key="idx">
+        <div v-if="item.type == '_action'" class="search-area__item search-area--action">
+          <ele-button icon="search" type="primary" @click="handleClickSearch">查询</ele-button>
+          <ele-button style="margin-left:8px;" icon="reload" @click="handleClickReset">重置</ele-button>
+        </div>
+        <div v-else class="search-area__item">
+          <template v-if="item.type == 'Input'">
+            <Label :label="item.label"></Label>
+            <ele-input v-model="item._value"></ele-input>
+          </template>
+          <template v-else-if="item.type == 'Select'">
+            <Label :label="item.label"></Label>
+            <ele-select v-model="item._value" :data-source="item.optionList"></ele-select>
+          </template>
+          <template v-else-if="item.type == 'DatePicker'">
+            <Label :label="item.label"></Label>
+            <ele-date v-model="item._value" :format="item.format"></ele-date>
+          </template>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import EleInput from '../../../input/src/index.vue'
+import EleSelect from '../../../select/src/index.vue'
+import ELeButton from '../../../button/src/index.vue'
+import EleDate from '../../../date/src/index.vue'
+import Label from './label.vue'
+import moment from 'moment'
+export default {
+  name: 'ele-search-area',
+  components: {
+    EleInput,
+    EleSelect,
+    ELeButton,
+    Label,
+    EleDate
+  },
+  props: {
+    gutter: {
+      type: [Number, Array, Object],
+      default: () => ([
+        16, 8
+      ])
+    },
+    span: {
+      type: Number,
+      default: 8
+    },
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    actionColOffset () {
+      return ((24 / this.span) - 1) * this.span
+    },
+    innerDataSource () {
+      return [...this.dataSource, { type: '_action' }]
+    }
+  },
+  methods: {
+    handleClickSearch () {
+      const querys = this.extractValues()
+      this.$emit('search', querys)
+    },
+    extractValues () {
+      let ret = {}
+      this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {
+        switch (item.type) {
+          case 'DatePicker':
+            ret[item.name] = moment(item._value).isValid() ? moment(item._value).format(item.format) : null
+            break
+          default:
+            ret[item.name] = item._value
+            break
+        }
+      })
+      return ret
+    },
+    handleClickReset () {
+      this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {
+        switch (item.type) {
+          case 'Select':
+            this.$set(item, '_value', null)
+            break
+          case 'DatePicker':
+            this.$set(item, '_value', null)
+            break
+          default:
+            this.$set(item, '_value', null)
+            break
+        }
+      })
+      //TODO defaultValue
+      const querys = this.extractValues()
+      this.$emit('search', querys)
+    },
+    onChangeSelect (value, props) {
+      this.$set(props, '_value', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-area__wrapper {
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  ::v-deep .ant-col {
+    &:last-child {
+      float: right;
+    }
+  }
+  .search-area__item {
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

package/packages/composite-components/search-area/src/label.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="g-search__label">
+    <span class="label__title">{{ label }}</span>
+    <span class="label__suffix">：</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-search__label {
+  /* width: 69px; */
+  flex-basis: 69px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .label__title, .label__suffix {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.88);
+    white-space: nowrap;
+  }
+  .label__suffix {
+    margin-left: 4px;
+  }
+}
+</style>

package/packages/date/index.js

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

package/packages/date/src/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <a-date-picker 
+    style="width: 100%;" 
+    mode="year"
+    :open="open"
+    :value="value"
+    @focus="onFocus"
+    @panelChange="onPanelChange"
+    :format="format">
+  </a-date-picker>
+</template>
+
+<script>
+export default {
+  name: 'ele-date',
+  props: {
+    value: {
+      type: Object
+    },
+    format: {
+      type: String,
+      default: 'YYYY/MM/DD'
+    }
+  },
+  data () {
+    return {
+      open: false
+    }
+  },
+  methods: {
+    onFocus () {
+      this.open = true
+    },
+    onPanelChange (value, mode) {
+      this.$emit('input', value)
+      this.open = false
+    }
+  }
+}
+</script>

package/packages/index.js

@@ -0,0 +1,50 @@
+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
+}

package/packages/input/index.js

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

package/packages/input/src/index.vue

@@ -0,0 +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>
+
+</style>

package/packages/select/index.js

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

package/packages/select/src/index.vue

@@ -0,0 +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>
+
+</style>

package/packages/table/index.js

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

package/packages/table/src/action.vue

@@ -0,0 +1,45 @@
+<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;
+    }
+  }
+}
+</style>

package/packages/table/src/index.vue

@@ -0,0 +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;
+  }
+}
+</style>

package/packages/tpl/index.js

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

package/packages/tpl/src/index.vue

@@ -0,0 +1,39 @@
+<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]
+    }
+  }
+}
+</script>

package/packages/tree/index.js

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