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

package/packages/pagination/index.js

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

package/packages/pagination/src/index.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="ele-page--wrapper">
+    <section class="ele-page--panel">
+      <div class="total">
+        共
+        <span v-if="!currentTotalLoading">{{ currentTotal }}</span>
+        <a-icon v-else type="loading" />
+        条
+      </div>
+      <div class="page">
+        <div class="home" @click="handleClickHome">首页</div>
+        <div :class="['page--prev', loading && 'page-disabled', disabledPrev && 'page-disabled']" @click="handleClickPrev">
+          <a-icon type="left"></a-icon>
+        </div>
+        <div class="page--current">
+          {{ currentPage }}
+        </div>
+        <div :class="['page--next', loading && 'page-disabled', disabledNext && 'page-disabled']" @click="handleClickNext">
+          <a-icon type="right"></a-icon>
+        </div>
+      </div>
+      <div class="size">
+        <a-select v-model="currentPageSize" @change="handleChangePageSize">
+          <a-select-option v-for="item in innerPageSizeOptions" :value="item" :key="item">
+            {{ item }} 条/页
+          </a-select-option>
+        </a-select>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { util } from '@idooel/shared'
+const { toNumber } = util
+export default {
+  name: 'ele-pagination',
+  props: {
+    query: {
+      type: Object,
+      default: () => ({})
+    },
+    data: {
+      type: Array,
+      default: () => ([])
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }, 
+    total: {
+      type: [String, Number],
+      default: 0
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => ([50, 100, 500, 1000])
+    },
+    current: {
+      type: [Number, String],
+      default: 1
+    },
+    pageSize: {
+      type: [Number, String],
+      default: 10
+    },
+    disabledNextButton: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      currentPage: 1,
+      currentPageSize: 0,
+      disabledPrev: false,
+      disabledNext: false,
+      currentTotal: 0,
+      currentTotalLoading: true,
+      cacheQuery: []
+    }
+  },
+  computed: {
+    innerPageSizeOptions () {
+      const normalized = this.pageSizeOptions
+        .map(item => toNumber(item))
+        .filter(n => typeof n === 'number' && Number.isFinite(n) && n > 0)
+
+      // 兜底：避免 a-select option 出现 undefined/空数组
+      return normalized.length ? normalized : [10]
+    },
+    pageQuery () {
+      const { currentPage, pageSize } = this.query
+      return { currentPage, pageSize }
+    }
+  },
+  watch: {
+    current: {
+      handler (current) {
+        this.syncCurrentFromProps(current)
+      },
+      immediate: true
+    },
+    total: {
+      handler (total) {
+        this.currentTotalLoading = true
+        if (typeof total === 'number') {
+          this.currentTotal = total
+          this.currentTotalLoading = false
+        }
+      },
+      immediate: true
+    },
+    query: {
+      handler (newQuery, oldQuery) {
+        // 1s内多次请求合并
+        // clearTimeout(this.timer)
+        // this.timer = setTimeout(() => {
+        //   this.requestHandler(this.total, { ...newQuery, ...this.pageQuery })
+        // }, 1000)
+      }
+    },
+    data: {
+      handler (data) {
+        if (!this.currentPageSize) return
+        if (data.length != this.currentPageSize) {
+          this.disabledNext = true
+        } else {
+          this.disabledNext = false
+        }
+      },
+      immediate: true
+    },
+    disabledNextButton: {
+      handler (status) {
+        this.disabledNext = status
+      },
+      immediate: true
+    },
+    pageSize: {
+      handler (size) {
+        this.syncPageSizeFromProps(size)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChangePageSize (value) {
+      const nextSize = this.normalizePageSize(value, this.currentPageSize || 10)
+      if (!nextSize) return
+
+      this.currentPageSize = nextSize
+      // pageSize 变化建议回到第一页，避免页码越界
+      this.currentPage = 1
+      this.setDisabledPrev(this.currentPage)
+
+      // 仅用户交互时触发
+      this.$emit('showSizeChange', this.currentPage, this.currentPageSize)
+    },
+    setDisabledNext (status) {
+      this.disabledNext = status
+    },
+    handleClickHome () {
+      this.currentPage = 1
+      this.setDisabledPrev(this.currentPage)
+      // 仅用户交互时触发
+      this.$emit('change', this.currentPage, this.currentPageSize)
+    },
+    setDisabledPrev (currentPage) {
+      if (currentPage > 1) {
+        this.disabledPrev = false
+      } else {
+        this.disabledPrev = true
+      }
+    },
+    handleClickPrev () {
+      if (this.currentPage > 1) {
+        this.currentPage -= 1
+        this.setDisabledPrev(this.currentPage)
+        // 仅用户交互时触发
+        this.$emit('change', this.currentPage, this.currentPageSize)
+      }
+    },
+    handleClickNext () {
+      if (this.disabledNext) return
+      this.currentPage += 1
+      this.setDisabledPrev(this.currentPage)
+      // 仅用户交互时触发
+      this.$emit('change', this.currentPage, this.currentPageSize)
+    },
+    normalizePage (value, fallback = 1) {
+      const n = toNumber(value)
+      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback
+      const page = Math.floor(n)
+      return page >= 1 ? page : fallback
+    },
+    normalizePageSize (value, fallback = 10) {
+      const n = toNumber(value)
+      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback
+      const size = Math.floor(n)
+      return size >= 1 ? size : fallback
+    },
+    // props 同步：只更新内部 state，不触发 emit
+    syncCurrentFromProps (current) {
+      this.currentPage = this.normalizePage(current, 1)
+      this.setDisabledPrev(this.currentPage)
+    },
+    // props 同步：只更新内部 state，不触发 emit
+    syncPageSizeFromProps (size) {
+      this.currentPageSize = this.normalizePageSize(size, this.currentPageSize || 10)
+    }
+  },
+  destroyed () {
+    this.cacheQuery = []
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @keyframes ani-load-loop {
+  0% {
+    transform: rotate(0);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.ele-page--wrapper {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border-top: unset;
+  padding: 0px 16px 16px 16px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: end;
+  /* margin-left: 16px;
+  margin-right: 16px; */
+  .ele-page--panel {
+    width: auto;
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .total {
+      .ivu-load-loop {
+        color: #409EFF;
+        animation: ani-load-loop 1s linear infinite;
+      }
+      color: rgba(0, 0, 0, 0.88);
+      font-family: 'AlibabaPuHuiTi_2_55_Regular';
+      font-size: 14px;
+      font-weight: 400;
+    }
+    .page {
+      margin-left: 12px;
+      display: flex;
+      flex-direction: row;
+      .home {
+        height: auto;
+        width: auto;
+        color: rgba(0, 0, 0, 0.88);
+        padding: 5px 4px 5px 4px;
+        text-align: center;
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        background: #FFF;
+        box-sizing: border-box;
+        cursor: pointer;
+      }
+      .page--prev {
+        margin-left: 12px;
+        cursor: pointer;
+        height: 32px;
+        width: 32px;
+        color: rgba(0, 0, 0, 0.88);
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        background: #FFF;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        .ivu-icon-ios-arrow-left {
+          font-size: 16px;
+        }
+      }
+      .page--current {
+        margin-left: 12px;
+        height: 32px;
+        width: 32px;
+        color: rgba(0, 0, 0, 0.88);
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        background: #409EFF;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+      }
+      .page--next {
+        margin-left: 12px;
+        cursor: pointer;
+        height: 32px;
+        width: 32px;
+        color: rgba(0, 0, 0, 0.88);
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        background: #FFF;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        .ivu-icon-ios-arrow-right {
+          font-size: 16px;
+        }
+      }
+      .page--prev, .page--next {
+        &.page-disabled {
+          margin-left: 12px;
+          height: 32px;
+          width: 32px;
+          color: rgba(0, 0, 0, 0.88);
+          font-family: 'AlibabaPuHuiTi_2_55_Regular';
+          font-size: 14px;
+          font-weight: 400;
+          border-radius: 2px;
+          border: 1px solid rgba(0, 0, 0, 0.16);
+          background: rgba(0, 0, 0, 0.04);
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          cursor: not-allowed;
+        }
+      }
+    }
+    .size {
+      width: auto;
+      display: flex;
+      flex-direction: row;
+      margin-left: 12px;
+      .ant-select {
+        min-width: 91px;
+        flex-basis: 91px;
+        /* flex-shrink: 0; */
+        flex-grow: 1;
+      }
+    }
+  }
+}
+</style>

package/packages/radio/index.js

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

package/packages/radio/src/index.vue

@@ -1,57 +1,57 @@
-<template>
-  <a-radio-group :value="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',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    value: {
-      type: [String, Array, Number]
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  watch: {
-    value (val) {
-      console.log('valvalval', val)
-    }
-  },
-  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);
-    }
-  }
-}
+<template>
+  <a-radio-group :value="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',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Array, Number]
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    value (val) {
+      console.log('valvalval', val)
+    }
+  },
+  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/index.js

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