@idooel/components 0.0.1-beta.1 → 0.0.1-beta.2

package/packages/input-number/src/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <a-input-number v-bind="$attrs" :value="value" :precision="precision" @change="onChange" style="width: 100%;"></a-input-number>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-input-number',
+  props: {
+    precision: {
+      type: Number
+    },
+    value: {
+      type: [Number, String]
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+    }
+  } 
+}
+</script>

package/packages/modal/index.js

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

package/packages/modal/src/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <a-modal
+    :title="title"
+    :cancelText="cancelText"
+    :okText="okText"
+    :closable="closable"
+    v-model:visible="showModal"
+    :width="width"
+    :keyboard="false"
+    :maskClosable="maskClosable"
+    :dialogStyle="{ top: `${upDownDistance[size]}px` }"
+    :bodyStyle="{ maxHeight: maxheight, overflowY: 'auto' }"
+    :footer="showFooter ? undefined : null"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <slot></slot>
+    <template slot="footer">
+      <slot name="footer"></slot>
+    </template>
+  </a-modal>
+</template>
+<script>
+export default {
+  name: 'ele-modal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '标题'
+    },
+    cancelText: {
+      type: String,
+      default: '关闭'
+    },
+    okText: {
+      type: String,
+      default: '确定'
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    map: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: false
+    },
+    showFooter: {
+      type: Boolean,
+      default: true
+    },
+    footer: {
+      type: Function,
+      default: null
+    },
+    onlyClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    value (newVal) {
+      this.$nextTick(() => {
+        this.showModal = newVal
+      })
+    }
+  },
+  computed: {
+    width () {
+      return this.map[this.size]
+    },
+    maxheight () {
+      return `calc(100vh - ${this.upDownDistance[this.size] * 2 + (this.title ? 55 : 0) + (this.showFooter ? 53 : 0) }px`
+    }
+  },
+  data () {
+    return {
+      showModal: false
+    }
+  },
+  created () {
+    let defaultMap = {
+      small: 480,
+      middle: 768,
+      big: 1200
+    }
+    this.upDownDistance = {
+      small: 80,
+      middle: 80,
+      big: 40
+    }
+    this.map = Object.assign(this.map, defaultMap)
+  },
+  methods: {
+    openModal () {
+      this.showModal = true
+      this.removeHidden()
+    },
+    handleCancel () {
+      this.showModal = false
+      this.removeHidden()
+      console.log('on-cancel')
+      this.$emit('cancel')
+      this.$emit('input', this.showModal)
+    },
+    handleOk () {
+      console.log('on-ok')
+      this.$emit('ok')
+    },
+    removeHidden () {
+      let ishidden = document.body.style.overflow === 'hidden'
+      ishidden && (document.body.style.overflow = 'initial')
+    }
+  }
+}
+</script>

package/packages/radio/index.js

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

package/packages/radio/src/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <a-radio-group :defaultValue="value" @change="onChange" :disabled="disabled">
+    <a-radio v-for="item in dataSource" :key="item.value" :value="item.value">
+      {{ item.label }}
+    </a-radio>
+  </a-radio-group>
+</template>
+
+<script>
+export default {
+  name: 'ele-radio',
+  props: {
+    value: {
+      type: [String, Array, Number]
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onChange (e) {
+      this.$emit('change', e.target.value)
+      this.$emit('input', e.target.value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ant-radio-group {
+  text-align: left;
+  line-height: 32px;
+}
+.has-error {
+  .ant-radio-group {
+    ::v-deep .ant-radio-wrapper {
+      color: var(--idooel-form-border-err-color);
+    }
+    ::v-deep .ant-radio-inner {
+      border-color: var(--idooel-form-border-err-color);
+    }
+  }
+}
+</style>

package/packages/select-entity/index.js

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

package/packages/select-entity/src/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="g-select-entity__wrapper" :class="disabled ? 'g-select-entity__disabled' : ''">
+    <span class="select-entity__input">
+      <a-tag
+        v-for="(item, inx) in getValueList()"
+        :key="item.value"
+        :closable="!disabled && !getIsMaxCount()"
+        @close="onClose(...arguments, inx)"
+      >
+        {{ item.label }}
+      </a-tag>
+      <a-tag v-if="getIsMaxCount()">......</a-tag>
+    </span>
+    <span class="select-entity__addon" @click="onChange">{{ addonAfter }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-select-entity',
+  props: {
+    value: {
+      type: [Array, Object]
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    maxCount: {
+      type: Number,
+      default: 7
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    addonAfter: {
+      type: String,
+      default: '选择'
+    }
+  },
+  methods: {
+    getValueList () {
+      if (this.value) {
+        if (this.multiple) {
+          return this.getIsMaxCount() ? this.value.slice(0, this.maxCount) : this.value
+        }
+        return [this.value]
+      }
+      return []
+    },
+    getIsMaxCount () {
+      if (this.value && this.multiple) {
+        return this.value.length >= this.maxCount
+      }
+      return false
+    },
+    onChange () {
+      if (this.disabled) return
+      this.$emit('change', this.value)
+    },
+    onClose (e, inx) {
+      e = window.event || e
+      e.preventDefault()
+      if (!this.multiple) {
+        this.$emit('change', null)
+        return
+      }
+      this.value.splice(inx, 1)
+      this.$emit('change', this.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-select-entity__wrapper {
+  font-size: 14px;
+  line-height: 30px;
+  position: relative;
+  width: 100%;
+  display: flex;
+  color: var(--idoole-black-07);
+  border-radius: 4px;
+  border: 1px solid var(--idooel-form-title-border-color);
+  &:hover {
+    border-color: var(--idooel-primary-color);
+  }
+  .select-entity__input {
+    padding: 0 11px;
+    background-color: #fff;
+    border-radius: 4px;
+    flex-grow: 1;
+    min-height: 30px;
+    text-align: left;
+  }
+  .select-entity__addon {
+    padding: 0 11px;
+    color: var(--idoole-black-07);
+    background-color: var(--idoole-black-02);
+    border-left: 1px solid var(--idooel-form-title-border-color);
+    cursor: pointer;
+    min-height: 30px;
+    white-space: nowrap;
+  }
+}
+.has-error .g-select-entity__wrapper {
+  border-color: var(--idooel-form-border-err-color);
+}
+.g-select-entity__disabled .select-entity__input {
+  background-color: var(--idoole-black-02);
+}
+</style>

package/packages/table/src/action.vue

@@ -2,7 +2,7 @@
   <div class="g-table__action">
     <div class="table-action__item" v-for="(item, idx) in execOperationExpression(dataSource)" :key="idx">
       <template v-if="item.type == 'text'">
-        <span>{{ item.label }}</span>
+        <span @click="handleClickText(item)">{{ item.label }}</span>
       </template>
       <template v-else-if="item.type == 'dropdown'">
         <a-dropdown>

package/packages/text/index.js

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

package/packages/text/src/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    text
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'g-text'
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/textarea/index.js

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

package/packages/textarea/src/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <a-textarea 
+    :value="value"
+    :auto-size="autosize"
+    :max-length="maxLength"
+    :placeholder="placeholder"
+    :allow-clear="allowClear"
+    @change="onChange">
+  </a-textarea>
+</template>
+
+<script>
+export default {
+  name: 'ele-textarea',
+  props: {
+    maxLength: {
+      type: Number
+    },
+    placeholder: {
+      type: String
+    },
+    allowClear: {
+      type: Boolean,
+      default: false
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: () => ({
+        minRows: 4,
+        maxRows: 4
+      })
+    },
+    value: {
+      type: String
+    }
+  },
+  methods: {
+    onChange (e) {
+      const value = e.target.value
+      this.$emit('on-change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/theme/form.scss

@@ -0,0 +1,24 @@
+.has-error {
+  .ele-upload__wrapper {
+    .file-uploads {
+      label {
+        border-color: $error-06;
+      }
+      .ele-upload__area {
+        .ele-upload__area--icon {
+          .anticon-cloud-upload {
+            color: $error-06;
+          }
+        }
+        .ele-upload__area--text {
+          .ele-upload__message {
+            color: $error-06;
+          }
+          .ele-upload__ext {
+            color: $error-03;
+          }
+        }
+      }
+    }
+  }
+}

package/packages/theme/index.scss

@@ -1,12 +1,24 @@
 @import 'variables.scss';
+@import 'form.scss';
 
 $primary: $primary-06;
 
 :root {
   --idooel-primary-color: #{$primary};
+  --idoole-black-02: #{$black-02};
+  --idoole-black-06: #{$black-06};
+  --idoole-black-07: #{$black-07};
+  --idoole-black-008: #{$black-08};
   //Table
   --idooel-border-width: 2;
   --idooel-border-color: #53a8ff;
   --idooel-column-border-width: 1;
   --idooel-column-border-color: #d9ecff;
+
+  //Form
+  --idooel-form-title-border-color: #{$black-04};
+  --idooel-form-upload-bg-color: #{$black-01};
+  --idooel-form-upload-border-hover-color: #{$primary-05};
+  --idooel-form-border-radius: #{$border-radius-base}px;
+  --idooel-form-border-err-color: #{$error-06};
 }

package/packages/theme/variables.scss

@@ -31,4 +31,26 @@ $success-01: #F6FFED;
 $success-03: #B7EB8F;
 $success-05: #73D13D;
 $success-06: #52C41A;
-$success-07: #389E0D;
+$success-07: #389E0D;
+
+//White
+$black-01: rgba(0, 0, 0, 0.02);
+$black-02: rgba(0, 0, 0, 0.04);
+$black-03: rgba(0, 0, 0, 0.08);
+$black-04: rgba(0, 0, 0, 0.16);
+$black-05: rgba(0, 0, 0, 0.24);
+$black-06: rgba(0, 0, 0, 0.44);
+$black-07: rgba(0, 0, 0, 0.64);
+$black-08: rgba(0, 0, 0, 0.88);
+
+//Black
+$white-01: rgba(255, 255, 255, 0.04);
+$white-02: rgba(255, 255, 255, 0.08);
+$white-03: rgba(255, 255, 255, 0.16);
+$white-04: rgba(255, 255, 255, 0.24);
+$white-05: rgba(255, 255, 255, 0.44);
+$white-06: rgba(255, 255, 255, 0.64);
+$white-07: rgba(255, 255, 255, 0.88);
+$white-08: #fff;
+
+$border-radius-base: 2;

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

@@ -1,6 +1,6 @@
 <template>
-  <section class="model__tree-table">
-    <section class="model__tree-table--container">
+  <section class="ele model__tree-table">
+    <section class="model__tree-table--container" v-if="showTree">
       <div class="model__tree--title"></div>
       <section :ref="modelTreeWrapper" class="model__tree--wrapper">
         <ele-tree 
@@ -93,6 +93,9 @@ export default {
     }
   },
   computed: {
+    showTree () {
+      return !!Object.keys(this.treeMeta).length
+    },
     buttonGroup () {
       return uuidv4()
     },
@@ -172,13 +175,15 @@ export default {
     }
   },
   async created () {
-    this.treeData = await this.requestTreeData()
-    const [defaultTreeNode = {}] = this.treeData
-    this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
-    this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
+    if (this.showTree) {
+      this.treeData = await this.requestTreeData()
+      const [defaultTreeNode = {}] = this.treeData
+      this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
+      this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
+      this.currentTreeNodeData = defaultTreeNode
+    }
     const { fieldMap } = this.tableMeta
-    this.currentTreeNodeData = defaultTreeNode
-    this.tableData = await this.requestTableData(this.execTableFieldMap(fieldMap, defaultTreeNode))
+    this.tableData = await this.requestTableData(this.execTableFieldMap(fieldMap, this.currentTreeNodeData))
   },
   methods: {
     handleClickButtonGroup (props) {
@@ -280,27 +285,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.model__tree-table {
-  background: transparent;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  .model__tree-table--container {
-    .model__tree--wrapper {
-      width: 240px;
-      background: #fff;
-      flex-shrink: 0;
-      padding: 16px;
-      box-sizing: border-box;
-      margin-right: 16px;
-      overflow-y: auto;
+.ele {
+  &.model__tree-table {
+    background: transparent;                                                                                                                                                                                                                 
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    .model__tree-table--container {
+      .model__tree--wrapper {
+        width: 240px;
+        background: #fff;
+        flex-shrink: 0;
+        padding: 16px;
+        box-sizing: border-box;
+        margin-right: 16px;
+        overflow-y: auto;
+      }
     }
-  }
-  .model__table--container {
-    min-width: 0;
-    background: #fff;
-    .model__table--wrapper {
+    .model__table--container {
+      width: 100%;
+      min-width: 0;
       background: #fff;
+      .model__table--wrapper {
+        background: #fff;
+      }
     }
   }
 }

package/packages/upload/index.js

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