@idooel/components 0.0.2-beta.3 → 0.0.2-beta.31

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

@@ -1,152 +1,152 @@
-<template>
-  <div class="button-group__wrapper">
-    <template v-for="(item, idx) in innerDatasource" >
-      <ele-button
-        v-if="isBool(item._show) ? item._show : true"
-        :type="item.type"
-        :icon="item.icon"
-        :mode="item.mode"
-        :data-source="item.optionList"
-        :event-name="item.eventName"
-        :record="item"
-        v-on="overrideButtonEvent"
-        :key="idx">
-        {{ item.label }}
-      </ele-button>
-    </template>
-    <ele-modal-confirm v-model="modalConfirmValue" :contextProp="currentContext" v-on="overrideModalConfirmEvent" v-bind="modalConfirmMeta"></ele-modal-confirm>
-  </div>
-</template>
-
-<script>
-import { type, util } from '@idooel/shared'
-import { parse } from '@idooel/expression'
-import { CONTEXT, AREA_NAMES } from '../../../utils'
-export default {
-  name: 'ele-button-group',
-  props: {
-    dataSource: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      innerDatasource: [],
-      modalConfirmValue: false,
-      modalConfirmMeta: {}
-    }
-  },
-  inject: {
-    [CONTEXT]: {
-      default: () => (() => ({}))
-    }
-  },
-  computed: {
-    callContext () {
-      return this[CONTEXT].call(this)
-    },
-    currentExposed () {
-      const exposed = Object.assign({}, this.callContext.exposed || {}, { [AREA_NAMES.BUTTON_GROUP]: { setModalConfirm: this.setModalConfirm } })
-      return exposed
-    },
-    contextData () {
-      return {
-        ...this.currentContext,
-        exposed: this.currentExposed
-      }
-    },
-    overrideButtonEvent () {
-      const events = this.dataSource.reduce((ret, item) => {
-        const { mode, optionList = [] } = item
-        if (mode == 'dropdown') {
-          optionList.forEach(props => {
-            ret[props.eventName || 'click'] = (e) => {
-              const { modalConfirm } = props
-              modalConfirm && (this.modalConfirmMeta = modalConfirm)
-              if (this.preventModalConfirm(modalConfirm)) {
-                this.$emit(props.eventName || 'click', { ...e, ...props, record: props, ...this.contextData })
-                return
-              }
-              modalConfirm && (this.modalConfirmValue = true)
-              this.$emit(props.eventName || 'click', { ...e, ...props, record: props, ...this.contextData })
-            }
-          })
-        }
-        ret[item.eventName || 'click'] = (e) => {
-          const { modalConfirm } = item
-          modalConfirm && (this.modalConfirmMeta = modalConfirm)
-          if (this.preventModalConfirm(modalConfirm)) {
-            this.$emit(item.eventName || 'click', { ...e, record: item, ...this.contextData })
-            return
-          }
-          modalConfirm && (this.modalConfirmValue = true)
-          this.$emit(item.eventName || 'click', { ...e, record: item, ...this.contextData })
-        }
-        return ret
-      }, {})
-      return {
-        ...this.$listeners,
-        ...events,
-        ...this.contextData
-      }
-    },
-    overrideModalConfirmEvent () {
-      return {
-        ...this.$listeners
-      }
-    },
-    currentContext () {
-      return {
-        _route: this.$route.query,
-        _routeMeta: this.$route.meta,
-        ...this.callContext
-      }
-    }
-  },
-  watch: {
-    dataSource: {
-      handler (dataSource) {
-        this.innerDatasource = dataSource.map(item => {
-          return {
-            ...item,
-            _show: this.executeExpression(item.show)
-          }
-        })
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    setModalConfirm (arg = false) {
-      this.modalConfirmValue = arg
-    },
-    preventModalConfirm (modalConfirm = {}) {
-      const { show } = modalConfirm
-      return !this.executeExpression(show)
-    },
-    executeExpression (expression) {
-      if (type.isBool(expression)) return expression
-      if (type.isEmpty(expression)) return true
-      return parse(expression, { ...this.currentContext, ...this.contextData })
-    },
-    isBool (arg) {
-      return type.isBool(arg)
-    }
-  }
-}
-</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">
+    <template v-for="(item, idx) in innerDatasource" >
+      <ele-button
+        v-if="isBool(item._show) ? item._show : true"
+        :type="item.type"
+        :icon="item.icon"
+        :mode="item.mode"
+        :data-source="item.optionList"
+        :event-name="item.eventName"
+        :record="item"
+        v-on="overrideButtonEvent"
+        :key="idx">
+        {{ item.label }}
+      </ele-button>
+    </template>
+    <ele-modal-confirm v-model="modalConfirmValue" :contextProp="currentContext" v-on="overrideModalConfirmEvent" v-bind="modalConfirmMeta"></ele-modal-confirm>
+  </div>
+</template>
+
+<script>
+import { type, util } from '@idooel/shared'
+import { parse } from '@idooel/expression'
+import { CONTEXT, AREA_NAMES } from '../../../utils'
+export default {
+  name: 'ele-button-group',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      innerDatasource: [],
+      modalConfirmValue: false,
+      modalConfirmMeta: {}
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    callContext () {
+      return this[CONTEXT].call(this)
+    },
+    currentExposed () {
+      const exposed = Object.assign({}, this.callContext.exposed || {}, { [AREA_NAMES.BUTTON_GROUP]: { setModalConfirm: this.setModalConfirm } })
+      return exposed
+    },
+    contextData () {
+      return {
+        ...this.currentContext,
+        exposed: this.currentExposed
+      }
+    },
+    overrideButtonEvent () {
+      const events = this.dataSource.reduce((ret, item) => {
+        const { mode, optionList = [] } = item
+        if (mode == 'dropdown') {
+          optionList.forEach(props => {
+            ret[props.eventName || 'click'] = (e) => {
+              const { modalConfirm } = props
+              modalConfirm && (this.modalConfirmMeta = modalConfirm)
+              if (this.preventModalConfirm(modalConfirm)) {
+                this.$emit(props.eventName || 'click', { ...e, ...props, record: props, ...this.contextData })
+                return
+              }
+              modalConfirm && (this.modalConfirmValue = true)
+              this.$emit(props.eventName || 'click', { ...e, ...props, record: props, ...this.contextData })
+            }
+          })
+        }
+        ret[item.eventName || 'click'] = (e) => {
+          const { modalConfirm } = item
+          modalConfirm && (this.modalConfirmMeta = modalConfirm)
+          if (this.preventModalConfirm(modalConfirm)) {
+            this.$emit(item.eventName || 'click', { ...e, record: item, ...this.contextData })
+            return
+          }
+          modalConfirm && (this.modalConfirmValue = true)
+          this.$emit(item.eventName || 'click', { ...e, record: item, ...this.contextData })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        ...this.contextData
+      }
+    },
+    overrideModalConfirmEvent () {
+      return {
+        ...this.$listeners
+      }
+    },
+    currentContext () {
+      return {
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta,
+        ...this.callContext
+      }
+    }
+  },
+  watch: {
+    dataSource: {
+      handler (dataSource) {
+        this.innerDatasource = dataSource.map(item => {
+          return {
+            ...item,
+            _show: this.executeExpression(item.show)
+          }
+        })
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    setModalConfirm (arg = false) {
+      this.modalConfirmValue = arg
+    },
+    preventModalConfirm (modalConfirm = {}) {
+      const { show } = modalConfirm
+      return !this.executeExpression(show)
+    },
+    executeExpression (expression) {
+      if (type.isBool(expression)) return expression
+      if (type.isEmpty(expression)) return true
+      return parse(expression, { ...this.currentContext, ...this.contextData })
+    },
+    isBool (arg) {
+      return type.isBool(arg)
+    }
+  }
+}
+</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/form-attachment/src/index.vue

@@ -1,15 +1,15 @@
-<template>
-  <div>
-    attachment
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-form-attachment'
-}
-</script>
-
-<style lang="scss" scoped>
-
+<template>
+  <div>
+    attachment
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-form-attachment'
+}
+</script>
+
+<style lang="scss" scoped>
+
 </style>

package/packages/composite-components/form-img-crop/index.js

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

package/packages/composite-components/form-img-crop/src/index.vue

@@ -1,132 +1,132 @@
-<template>
-  <div class="ele__img--form">
-    <div class="form__img--wrapper" 
-      @click="handleClick" 
-      :style="style">
-      <div class="form__img--preivew" v-if="value">
-        <img style="width:100%;height:100%" :src="imageUrl" alt="" srcset="">
-      </div>
-      <div class="form__icon--wrapper">
-        <ele-icon class="icon--oper" type="icon-camera"></ele-icon>
-        <span class="icon__text--oper">{{ operText }}</span>
-      </div>
-    </div>
-    <ele-modal-img-crop 
-      v-model="showModalImgCropValue"
-      :uploadFileConfig="uploadFileConfig"
-      @change="onChangeModalCropImg"
-      :cropperConfig="cropperConfig"
-      :imageId="value"
-      :title="modalTitle">
-    </ele-modal-img-crop>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-form-img-crop',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    value: {
-      type: [String, Number]
-    },
-    modalTitle: {
-      type: String
-    },
-    operText: {
-      type: String,
-      default: '更改头像'
-    },
-    width: {
-      type: [Number, String],
-      default: 200
-    },
-    height: {
-      type: [Number, String],
-      default: 200
-    },
-    cropperConfig: {
-      type: Object,
-      default: () => {
-        return {
-          aspectRatio: 16 / 9
-        }
-      }
-    },
-    uploadFileConfig: {
-      type: Object,
-      default: () => {
-        return {
-          size: 10,
-          accept: '*',
-          byteConversion: 1024 * 1024
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      showModalImgCropValue: false
-    }
-  },
-  computed: {
-    style () {
-      return {
-        width: this.width + 'px',
-        height: this.height + 'px'
-      }
-    },
-    imageUrl () {
-      return `/api-file/workbench/file/stream/${this.value}?origin=true`
-    }
-  },
-  methods: {
-    handleClick () {
-      this.showModalImgCropValue = true
-    },
-    onChangeModalCropImg (fileId) {
-      console.log('fileId', fileId)
-      this.$emit('change', fileId)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.ele__img--form {
-  .form__img--wrapper {
-    cursor: pointer;
-    border-radius: 4px;
-    background: #000;
-    opacity: 0.3;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    .form__img--preivew {
-      position: absolute;
-      color: red;
-      width: 100%;
-      height: 100%;
-      border-radius: 4px;
-    }
-    .form__icon--wrapper {
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: #fff;
-      .icon--oper {
-        font-size: 40px;
-      }
-      .icon__text--oper {
-        font-size: 16px;
-      }
-    }
-  }
-}
+<template>
+  <div class="ele__img--form">
+    <div class="form__img--wrapper" 
+      @click="handleClick" 
+      :style="style">
+      <div class="form__img--preivew" v-if="value">
+        <img style="width:100%;height:100%" :src="imageUrl" alt="" srcset="">
+      </div>
+      <div class="form__icon--wrapper">
+        <ele-icon class="icon--oper" type="icon-camera"></ele-icon>
+        <span class="icon__text--oper">{{ operText }}</span>
+      </div>
+    </div>
+    <ele-modal-img-crop 
+      v-model="showModalImgCropValue"
+      :uploadFileConfig="uploadFileConfig"
+      @change="onChangeModalCropImg"
+      :cropperConfig="cropperConfig"
+      :imageId="value"
+      :title="modalTitle">
+    </ele-modal-img-crop>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-form-img-crop',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Number]
+    },
+    modalTitle: {
+      type: String
+    },
+    operText: {
+      type: String,
+      default: '更改头像'
+    },
+    width: {
+      type: [Number, String],
+      default: 200
+    },
+    height: {
+      type: [Number, String],
+      default: 200
+    },
+    cropperConfig: {
+      type: Object,
+      default: () => {
+        return {
+          aspectRatio: 16 / 9
+        }
+      }
+    },
+    uploadFileConfig: {
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          accept: '*',
+          byteConversion: 1024 * 1024
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      showModalImgCropValue: false
+    }
+  },
+  computed: {
+    style () {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+    },
+    imageUrl () {
+      return `/api-file/workbench/file/stream/${this.value}?origin=true`
+    }
+  },
+  methods: {
+    handleClick () {
+      this.showModalImgCropValue = true
+    },
+    onChangeModalCropImg (fileId) {
+      console.log('fileId', fileId)
+      this.$emit('change', fileId)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele__img--form {
+  .form__img--wrapper {
+    cursor: pointer;
+    border-radius: 4px;
+    background: #000;
+    opacity: 0.3;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .form__img--preivew {
+      position: absolute;
+      color: red;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+    }
+    .form__icon--wrapper {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #fff;
+      .icon--oper {
+        font-size: 40px;
+      }
+      .icon__text--oper {
+        font-size: 16px;
+      }
+    }
+  }
+}
 </style>

package/packages/composite-components/modal-confirm/index.js

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