@idooel/components 0.0.1-beta.39 → 0.0.1-beta.40

package/packages/table/src/index.vue

@@ -1,258 +1,258 @@
-<template>
-  <div class="g-table__wrapper" :style="{ height: `${height}px` }">
-    <a-table
-      :class="[isNoData && 'g-table__no-data']"
-      :style="{ height: noDataAntTableHeight }"
-      :pagination="false"
-      :loading="loading"
-      :columns="columns"
-      :row-selection="rowSelection"
-      :row-class-name="setRowClassName"
-      :data-source="dataSource"
-      :scroll="getScroll">
-      <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="all => `共 ${all} 条数据`"
-        show-size-changer 
-        show-quick-jumper
-        :pageSize="innerPageSize"
-        :current="innerCurrentPage"
-        :pageSizeOptions="pageSizeOptions"
-        @change="onChangePagination"
-        @showSizeChange="onShowSizeChange"
-        :total="total">
-      </a-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import Actions from './action.vue'
-export default {
-  name: 'ele-table',
-  components: {
-    Actions
-  },
-  props: {
-    height: {
-      type: Number
-    },
-    x: {
-      type: Number,
-      default: 1500
-    },
-    y: {
-      type: Number,
-      default: 200
-    },
-    scroll: {
-      type: Object
-    },
-    rowSelection: {
-      type: Object
-    },
-    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']
-    }
-  },
-  data() {
-    return {
-      tableHeaderHeight: 0,
-      paginationHeight: 0,
-      innerPageSize: 10,
-      innerCurrentPage: 1
-    }
-  },
-  computed: {
-    isNoData () {
-      return !this.dataSource.length
-    },
-    noDataAntTableHeight () {
-      //TODO
-      if (this.dataSource.length) {
-        // return 'auto'
-        return `${this.height - this.paginationHeight - 16}px` 
-      }
-      return `${this.height - this.paginationHeight - 16}px` 
-    },
-    getScrollHeightByHeight () {
-      return this.height - this.tableHeaderHeight - this.paginationHeight
-    },
-    getScroll () {
-      if (this.scroll) {
-        return this.scroll
-      } else {
-        if (this.height) {
-          return { x: this.x, y: this.getScrollHeightByHeight }
-        }
-        return { x: this.x, y: this.y }
-      }
-    }
-  },
-  watch: {
-    pageSize: {
-      handler (pageSize) {
-        this.innerPageSize = pageSize
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    onShowSizeChange (current, pageSize) {
-      this.innerCurrentPage = current
-      this.innerPageSize = pageSize
-      this.$emit('change-page', current, pageSize)
-    },
-    setPaginationHeight () {
-      this.$nextTick(() => {
-        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()
-        this.paginationHeight = height
-      })
-    },
-    setTableHeaderHeight () {
-      this.$nextTick(() => {
-        const { height } = document.querySelector('.ant-table-header').getBoundingClientRect()
-        this.tableHeaderHeight = height
-      })
-    },
-    setRowClassName (record, idx) {
-      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
-    },
-    onChangePagination (page, pageSize) {
-      this.innerCurrentPage = page
-      this.innerPageSize = pageSize
-      this.$emit('change-page', page, pageSize)
-    }
-  },
-  mounted() {
-    this.setTableHeaderHeight()
-    this.setPaginationHeight()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-table__wrapper {
-  ::v-deep .ant-spin-nested-loading {
-    height: inherit;
-    .ant-spin-container {
-      height: inherit;
-      .ant-table {
-        height: inherit;
-      }
-    }
-  }
-  ::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;
-  ::v-deep .g-table__row--even {
-    background: var(--idooel-row-even-color);
-  }
-  .g-table__row--odd {
-    background: var(--idooel-row-odd-color);
-  }
-  .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;
-  }
-}
+<template>
+  <div class="g-table__wrapper" :style="{ height: `${height}px` }">
+    <a-table
+      :class="[isNoData && 'g-table__no-data']"
+      :style="{ height: noDataAntTableHeight }"
+      :pagination="false"
+      :loading="loading"
+      :columns="columns"
+      :row-selection="rowSelection"
+      :row-class-name="setRowClassName"
+      :data-source="dataSource"
+      :scroll="getScroll">
+      <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="all => `共 ${all} 条数据`"
+        show-size-changer 
+        show-quick-jumper
+        :pageSize="innerPageSize"
+        :current="innerCurrentPage"
+        :pageSizeOptions="pageSizeOptions"
+        @change="onChangePagination"
+        @showSizeChange="onShowSizeChange"
+        :total="total">
+      </a-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Actions from './action.vue'
+export default {
+  name: 'ele-table',
+  components: {
+    Actions
+  },
+  props: {
+    height: {
+      type: Number
+    },
+    x: {
+      type: Number,
+      default: 1500
+    },
+    y: {
+      type: Number,
+      default: 200
+    },
+    scroll: {
+      type: Object
+    },
+    rowSelection: {
+      type: Object
+    },
+    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']
+    }
+  },
+  data() {
+    return {
+      tableHeaderHeight: 0,
+      paginationHeight: 0,
+      innerPageSize: 10,
+      innerCurrentPage: 1
+    }
+  },
+  computed: {
+    isNoData () {
+      return !this.dataSource.length
+    },
+    noDataAntTableHeight () {
+      //TODO
+      if (this.dataSource.length) {
+        // return 'auto'
+        return `${this.height - this.paginationHeight - 16}px` 
+      }
+      return `${this.height - this.paginationHeight - 16}px` 
+    },
+    getScrollHeightByHeight () {
+      return this.height - this.tableHeaderHeight - this.paginationHeight
+    },
+    getScroll () {
+      if (this.scroll) {
+        return this.scroll
+      } else {
+        if (this.height) {
+          return { x: this.x, y: this.getScrollHeightByHeight }
+        }
+        return { x: this.x, y: this.y }
+      }
+    }
+  },
+  watch: {
+    pageSize: {
+      handler (pageSize) {
+        this.innerPageSize = pageSize
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    onShowSizeChange (current, pageSize) {
+      this.innerCurrentPage = current
+      this.innerPageSize = pageSize
+      this.$emit('change-page', current, pageSize)
+    },
+    setPaginationHeight () {
+      this.$nextTick(() => {
+        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()
+        this.paginationHeight = height
+      })
+    },
+    setTableHeaderHeight () {
+      this.$nextTick(() => {
+        const { height } = document.querySelector('.ant-table-header').getBoundingClientRect()
+        this.tableHeaderHeight = height
+      })
+    },
+    setRowClassName (record, idx) {
+      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
+    },
+    onChangePagination (page, pageSize) {
+      this.innerCurrentPage = page
+      this.innerPageSize = pageSize
+      this.$emit('change-page', page, pageSize)
+    }
+  },
+  mounted() {
+    this.setTableHeaderHeight()
+    this.setPaginationHeight()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-table__wrapper {
+  ::v-deep .ant-spin-nested-loading {
+    height: inherit;
+    .ant-spin-container {
+      height: inherit;
+      .ant-table {
+        height: inherit;
+      }
+    }
+  }
+  ::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;
+  ::v-deep .g-table__row--even {
+    background: var(--idooel-row-even-color);
+  }
+  .g-table__row--odd {
+    background: var(--idooel-row-odd-color);
+  }
+  .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/tabs/index.js

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

package/packages/tabs/src/index.vue

@@ -1,56 +1,56 @@
-<template>
-  <div>
-    <a-tabs :default-active-key="activeKey" :tabBarGutter="tabBarGutter" :tabBarStyle="tabBarStyle" @change="changeHandle">
-      <a-tab-pane v-for="(item, index) in tabsList" :key="index" :tab="item.tabName" :disabled="item.disabled">
-        <template #tab>
-          <component  v-if="item.renderHeader" :is="item.renderHeader" ></component>
-          <span v-else>{{ item.tabName }}</span>
-        </template>
-        <component :is="item.content"></component>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-tabs',
-  components: {},
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    activeKey: {
-      type: Number,
-      default: 0
-    },
-    tabsList: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    tabBarStyle: {
-      type: Object,
-      default () {
-        return {}
-      }
-    },
-    tabBarGutter: {
-      type: Number
-    }
-  },
-  methods: {
-    changeHandle (key) {
-      this.$emit('changeActiveKey', key)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .ant-tabs-nav-scroll {
-  float: left !important;
-}
+<template>
+  <div>
+    <a-tabs :default-active-key="activeKey" :tabBarGutter="tabBarGutter" :tabBarStyle="tabBarStyle" @change="changeHandle">
+      <a-tab-pane v-for="(item, index) in tabsList" :key="index" :tab="item.tabName" :disabled="item.disabled">
+        <template #tab>
+          <component  v-if="item.renderHeader" :is="item.renderHeader" ></component>
+          <span v-else>{{ item.tabName }}</span>
+        </template>
+        <component :is="item.content"></component>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-tabs',
+  components: {},
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    activeKey: {
+      type: Number,
+      default: 0
+    },
+    tabsList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    tabBarStyle: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    tabBarGutter: {
+      type: Number
+    }
+  },
+  methods: {
+    changeHandle (key) {
+      this.$emit('changeActiveKey', key)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ant-tabs-nav-scroll {
+  float: left !important;
+}
 </style>

package/packages/text/index.js

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