@idooel/components 0.0.0 → 0.0.1-beta.1

package/package.json

@@ -1,41 +1,44 @@
-{
-  "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"
-  }
-}
+{
+  "name": "@idooel/components",
+  "version": "0.0.1-beta.1",
+  "description": "",
+  "private": false,
+  "main": "dist/@idooel/components.umd.js",
+  "module": "dist/@idooel/components.esm.js",
+  "engines": {
+    "node": ">=14"
+  },
+  "author": "Ruster <protagonisths@gmail.com> (https://github.com/Protagonistss)",
+  "scripts": {
+    "build:umd": "rollup --config scripts/rollup.umd.config.js",
+    "build:esm": "rollup --config scripts/rollup.esm.config.js"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "peerDependencies": {
+    "@idooel/shared": "workspace:^0.0.1",
+    "ant-design-vue": "1.7.8",
+    "moment": "^2.30.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.17.9",
+    "@idooel/expression": "workspace:^0.0.0",
+    "@idooel/shared": "workspace:^0.0.1",
+    "@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

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

package/packages/button/src/index.vue

@@ -1,25 +1,55 @@
-<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')
-    }
-  }
-}
+<template>
+  <a-dropdown v-if="mode == 'dropdown'">
+    <a-menu slot="overlay" @click="handleMenuClick">
+      <a-menu-item :key="opt.value" v-for="opt in dataSource">
+        {{ opt.label }}
+      </a-menu-item>
+    </a-menu>
+    <a-button :type="type">
+      <slot></slot>
+      <a-icon :type="icon" />
+    </a-button>
+  </a-dropdown>
+  <a-button :type="type" :icon="icon" @click="handleClick" v-else>
+    <slot></slot>
+  </a-button>
+</template>
+
+<script>
+export default {
+  name: 'ele-button',
+  props: {
+    record: {
+      type: Object
+    },
+    eventName: {
+      type: String
+    },
+    mode: {
+      type: String
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    icon: {
+      type: String
+    }
+  },
+  methods: {
+    handleMenuClick (props) {
+      const { key } = props
+      const currentClickTarget = this.dataSource.find(item => item.value === key)
+      const { eventName } = currentClickTarget
+      eventName && this.$emit(eventName, { ...currentClickTarget })
+    },
+    handleClick () {
+      this.$emit(this.eventName || 'click', { ...this.record })
+    }
+  }
+}
 </script>

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

@@ -1,5 +1,5 @@
-import EleButtonGroup from './src/index.vue'
-
-EleButtonGroup.install = Vue => Vue.component(EleButtonGroup.name, EleButtonGroup)
-
+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

@@ -1,47 +1,51 @@
-<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;
-    }
-  }
-}
+<template>
+  <div class="button-group__wrapper">
+    <ele-button 
+      v-for="(item, idx) in dataSource" 
+      :type="item.type"
+      :icon="item.icon"
+      :mode="item.mode"
+      :data-source="item.optionList"
+      :event-name="item.eventName"
+      :record="item"
+      v-on="$listeners"
+      :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

@@ -1,5 +1,5 @@
-import EleSearchArea from './src/index.vue'
-
-EleSearchArea.install = Vue => Vue.component(EleSearchArea.name, EleSearchArea)
-
+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

@@ -1,129 +1,172 @@
-<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;
-  }
-}
+<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 class="expand-collapse" @click="handleClickExpandCollapse">
+            <span class="expand-collapse__text">{{ isExpand ? '收起' : '展开' }}</span>
+            <span class="expand-collapse__icon">
+              <a-icon v-if="isExpand" type="up" />
+              <a-icon v-else type="down" />
+            </span>
+          </div>
+        </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
+    }
+  },
+  data() {
+    return {
+      isExpand: false,
+      collapseDataSource: []
+    }
+  },
+  computed: {
+    actionColOffset () {
+      return ((24 / this.span) - 1) * this.span
+    },
+    innerDataSource () {
+      return this.isExpand ? [ ...this.dataSource, { type: '_action' }] :  [ ...this.collapseDataSource, { type: '_action' }]
+    }
+  },
+  created() {
+    this.collapseDataSource = this.dataSource.slice(0, (24 / this.span - 1))
+  },
+  methods: {
+    handleClickExpandCollapse () {
+      if (!this.isExpand) {
+        this.collapseDataSource = this.dataSource.slice(0, (24 / this.span - 1))
+      }
+      this.isExpand = !this.isExpand
+    },
+    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] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)
+            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', undefined)
+            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;
+    &.search-area--action {
+      justify-content: end;
+    }
+    .expand-collapse {
+      margin-left: 8px;
+      height: 32px;
+      padding: 4px 16px;
+      color: var(--idooel-primary-color);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      .expand-collapse__text {
+        font-size: 14px;
+      }
+      .expand-collapse__icon {
+        font-size: 16px;
+        margin-left: 8px;
+      }
+    }
+  }
+}
 </style>