@idooel/components 0.0.0 → 0.0.1-beta.1

package/packages/table/src/index.vue

@@ -1,89 +1,158 @@
-<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 {
+  ::v-deep .ant-table-wrapper {
+    .ant-table {
+      border-width: calc(var(--idooel-border-width) * 1px);
+      border-style: solid;
+      border-color: var(--idooel-border-color);
+    }
+    .ant-table-header {
+      .ant-table-fixed {
+        /* border-bottom: 2px solid #53a8ff !important; */
+      }
+    }
+    .ant-table-tbody {
+      tr {
+        td {
+          border-color: var(--idooel-column-border-color);
+          border-width: calc(var(--idooel-column-border-width) * 1px);;
+          border-style: solid;
+          border-top: unset;
+          border-left: unset;
+        }
+      }
+    }
+    .ant-table-body {
+      border-top-width: calc(var(--idooel-border-width) * 1px);
+      border-top-style: solid;
+      border-top-color: var(--idooel-border-color);
+    }
+    .ant-table-fixed-left {
+      border-bottom-width: calc(var(--idooel-border-width) * 1px);
+      border-bottom-style: solid;
+      border-bottom-color: var(--idooel-border-color);
+      .ant-table-header {
+        border-bottom-width: calc(var(--idooel-border-width) * 1px);
+        border-bottom-style: solid;
+        border-bottom-color: var(--idooel-border-color);
+      }
+      .ant-table-body-inner {
+        border-right-width: calc(var(--idooel-border-width) * 1px);
+        border-right-style: solid;
+        border-right-color: var(--idooel-border-color);
+      }
+      .ant-table-fixed {
+        border-right-width: calc(var(--idooel-border-width) * 1px);
+        border-right-color: var(--idooel-border-color);
+        border-right-style: solid;
+      }
+    }
+    .ant-table-fixed-right {
+      .ant-table-header {
+        border-bottom-width: calc(var(--idooel-border-width) * 1px);
+        border-bottom-color: var(--idooel-border-color);
+        border-bottom-style: solid;
+      }
+      border-bottom-width: calc(var(--idooel-border-width) * 1px);
+      border-bottom-style: solid;
+      border-bottom-color: var(--idooel-border-color);
+      .ant-table-fixed {
+        border-left-width: calc(var(--idooel-border-width) * 1px);
+        border-left-style: solid;
+        border-left-color: var(--idooel-border-color);
+      }
+    }
+  }
+  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;
+    border-width: calc(var(--idooel-border-width) * 1px);
+    border-color: var(--idooel-border-color);
+    border-style: solid;
+    border-top: unset;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
 </style>

package/packages/theme/index.scss

@@ -0,0 +1,12 @@
+@import 'variables.scss';
+
+$primary: $primary-06;
+
+:root {
+  --idooel-primary-color: #{$primary};
+  //Table
+  --idooel-border-width: 2;
+  --idooel-border-color: #53a8ff;
+  --idooel-column-border-width: 1;
+  --idooel-column-border-color: #d9ecff;
+}

package/packages/theme/variables.scss

@@ -0,0 +1,34 @@
+$primary-01: #E6F7FF !default;
+$primary-02: #BAE7FF !default;
+$primary-03: #91D5FF !default;
+$primary-04: #69C0FF !default;
+$primary-05: #40A9FF !default;
+$primary-06: #1890FF !default;
+$primary-07: #096DD9 !default;
+$primary-08: #0050B3 !default;
+$primary-09: #003A8C !default;
+$primary-10: #002766 !default;
+
+$link-01: #E6F7FF;
+$link-03: #91D5FF;
+$link-05: #40A9FF;
+$link-06: #1890FF;
+$link-07: #096DD9;
+
+$error-01: #FFF1F0;
+$error-03: #FFA39E;
+$error-05: #FF4D4F;
+$error-06: #F5222D;
+$error-07: #CF1322;
+
+$warning-01: #FFFBE6;
+$warning-03: #FFE58F;
+$warning-05: #FFC53D;
+$warning-06: #FAAD14;
+$warning-07: #D48806;
+
+$success-01: #F6FFED;
+$success-03: #B7EB8F;
+$success-05: #73D13D;
+$success-06: #52C41A;
+$success-07: #389E0D;

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,50 @@
-<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>
+<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>
+<style lang="scss">
+@import '../../theme/index.scss';
+</style>

package/packages/tree/index.js

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

package/packages/tree/src/TreeNode.vue

@@ -1,30 +1,30 @@
-<template>
-  <a-tree-node :key="node.key" :title="node.title">
-    <a-icon slot="icon" type="carry-out" />
-    <template v-if="node.children">
-      <TreeNode
-        v-for="(children, idx) in node.children" 
-        :key="idx" 
-        :node="children">
-      </TreeNode>
-    </template>
-    <!-- <span slot="title" style="color: #1890ff">parent 1</span> -->
-  </a-tree-node>
-</template>
-
-<script>
-export default {
-  name: 'TreeNode',
-  isTreeNode: true,
-  props: {
-    node: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-
+<template>
+  <a-tree-node :key="node.key" :title="node.title">
+    <a-icon slot="icon" type="carry-out" />
+    <template v-if="node.children">
+      <TreeNode
+        v-for="(children, idx) in node.children" 
+        :key="idx" 
+        :node="children">
+      </TreeNode>
+    </template>
+    <!-- <span slot="title" style="color: #1890ff">parent 1</span> -->
+  </a-tree-node>
+</template>
+
+<script>
+export default {
+  name: 'TreeNode',
+  isTreeNode: true,
+  props: {
+    node: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
 </style>

package/packages/tree/src/index.vue

@@ -1,97 +1,102 @@
-<template>
-  <div class="g-tree__wrapper">
-    <a-tree
-      v-if="innerTreeData.length"
-      :tree-data="innerTreeData"
-      @select="selectTreeNode"
-      :replaceFields="replaceFields"
-      :default-expanded-keys="defaultExpandedKeys"
-      :default-selected-keys="defaultSelectedKeys"
-      blockNode 
-      :show-icon="showIcon">
-      <template #title="{ title }">
-        <span :title="title" class="tree-node__title">
-          {{ title }}
-        </span>
-      </template>
-      <template slot="custom" slot-scope="{ scopedSlots }">
-        <a-icon :type="scopedSlots.iconName"></a-icon>
-      </template>
-    </a-tree>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-tree',
-  props: {
-    treeData: {
-      type: Array,
-      default: () => []
-    },
-    replaceFields: {
-      type: Object,
-      default: () => ({
-        title: 'title',
-        key: 'id',
-        children: 'children'
-      })
-    },
-    defaultExpandedKeys: {
-      type: Array
-    },
-    defaultSelectedKeys: {
-      type: Array
-    },
-    showIcon: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {}
-  },
-  computed: {
-    innerTreeData () {
-      return this.treeData
-      // return [
-      //   {
-      //     title: 'parent 1',
-      //     key: 1,
-      //     scopedSlots: {
-      //       icon: 'custom',
-      //       iconName: 'smile-o'
-      //     },
-      //     children: [
-      //       {
-      //         title: '2',
-      //         key: 2,
-      //         scopedSlots: {
-      //           icon: 'custom',
-      //           iconName: 'frown-o'
-      //         }
-      //       }
-      //     ]
-      //   }
-      // ]
-    }
-  },
-  methods: {
-    refreshTreeStatus (props = {}) {},
-    selectTreeNode (selectedKeys, e) {
-      this.$emit('select', selectedKeys, e)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-tree__wrapper {
-  overflow: hidden;
-  ::v-deep .ant-tree-node-content-wrapper {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-}
+<template>
+  <div class="g-tree__wrapper">
+    <a-tree
+      v-if="innerTreeData.length"
+      :tree-data="innerTreeData"
+      @select="selectTreeNode"
+      :replaceFields="replaceFields"
+      :default-expanded-keys="defaultExpandedKeys"
+      :default-selected-keys="defaultSelectedKeys"
+      blockNode 
+      :show-icon="showIcon">
+      <template #title="{ title }">
+        <span :title="title" class="tree-node__title">
+          {{ title }}
+        </span>
+      </template>
+      <template slot="custom" slot-scope="{ scopedSlots }">
+        <a-icon :type="scopedSlots.iconName"></a-icon>
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-tree',
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    replaceFields: {
+      type: Object,
+      default: () => ({
+        title: 'title',
+        key: 'id',
+        children: 'children'
+      })
+    },
+    defaultExpandedKeys: {
+      type: Array
+    },
+    defaultSelectedKeys: {
+      type: Array
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    innerTreeData () {
+      return this.treeData
+      // return [
+      //   {
+      //     title: 'parent 1',
+      //     key: 1,
+      //     scopedSlots: {
+      //       icon: 'custom',
+      //       iconName: 'smile-o'
+      //     },
+      //     children: [
+      //       {
+      //         title: '2',
+      //         key: 2,
+      //         scopedSlots: {
+      //           icon: 'custom',
+      //           iconName: 'frown-o'
+      //         }
+      //       }
+      //     ]
+      //   }
+      // ]
+    }
+  },
+  methods: {
+    refreshTreeStatus (props = {}) {},
+    selectTreeNode (selectedKeys, e) {
+      this.$emit('select', selectedKeys, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-tree__wrapper {
+  overflow: hidden;
+  ::v-deep .ant-tree {
+    .ant-tree-node-content-wrapper {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .ant-tree-node-selected {
+      color: #fff;
+    }
+  }
+}
 </style>

package/packages/tree-table-model/index.js

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