@kyfe/ks-query-table 0.0.22 → 0.0.23

package/kuasheng-ui/components/ks-quarter/index.vue

@@ -1,256 +0,0 @@
-<template>
-  <van-popup
-    :value="value"
-    position="bottom"
-    get-container="body"
-    close-icon-position="top-left"
-    close-icon="arrow-left"
-    class="ks-quarter-popup"
-    duration="0.2"
-    :closeable="true"
-    @input="handleClosePopup"
-    @open="handleOpenPopup"
-  >
-    <div :class="['ks-quarter', { 'ks-quarter-horizontal': horizontal }]">
-      <div class="van-calendar__body ks-quarter-body" ref="body">
-        <div class="van-calendar__month" v-for="y of years" :key="y">
-          <div class="van-calendar__month-title">{{ y }}年</div>
-          <div class="van-calendar__days">
-            <div class="van-calendar__day ks-quarter__day" v-for="q of quarters" :key="q" @click="handleSelectQuarter(y, q)">
-              <div :class="{ 'select-quarter': y === numYear && q === numQuarter }">{{ cnQuarters[q] }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ks-quarter-header">
-        <span class="ks-quarter-header__title">季度选择</span>
-        <span class="ks-quarter-header__daterange">{{ quarterStr }}</span>
-      </div>
-      <div v-if="showConfirm" class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom">
-        <ks-button type="primary" :disabled="!currentQuarter" round block class="van-calendar__confirm" @click="handleSelect">
-          确定
-        </ks-button>
-      </div>
-    </div>
-  </van-popup>
-</template>
-
-<script>
-// const getNowQuarter = () => {
-//   let _date = new Date()
-//   let y = _date.getFullYear()
-//   let m = _date.getMonth()
-//   if (m < 3) {
-//     return `${y}-1`
-//   } else if (m < 6) {
-//     return `${y}-2`
-//   } else if (m < 9) {
-//     return `${y}-3`
-//   } else if (m < 12) {
-//     return `${y}-4`
-//   }
-// }
-
-const getYears = arr => {
-  let num = arr[1]
-  let years = []
-  while (num >= arr[0]) {
-    years.unshift(num)
-    num = num - 1
-  }
-  return years
-}
-
-export default {
-  name: 'ks-quarter',
-  props: {
-    value: {
-      type: Boolean,
-      default: false
-    },
-    defaultQuarter: {
-      type: String,
-      default: ''
-    },
-    yearRange: {
-      type: Array,
-      default: () => [new Date().getFullYear() - 2, new Date().getFullYear()]
-    },
-    horizontal: {
-      type: Boolean,
-      default: false
-    },
-    showConfirm: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      quarters: [1, 2, 3, 4],
-      years: getYears(this.yearRange),
-      cnQuarters: {
-        '1': '一季度',
-        '2': '二季度',
-        '3': '三季度',
-        '4': '四季度'
-      },
-      currentQuarter: this.defaultQuarter
-    }
-  },
-  computed: {
-    numYear() {
-      return Number(this.currentQuarter.split('-')[0])
-    },
-    numQuarter() {
-      return Number(this.currentQuarter.split('-')[1])
-    },
-    quarterStr() {
-      return `${this.numYear}年 ${this.cnQuarters[this.numQuarter]}`
-    }
-  },
-  methods: {
-    handleSelectQuarter(y, q) {
-      this.currentQuarter = `${y}-${q}`
-      this.$emit('select', this.currentQuarter, this.quarterStr)
-    },
-    handleSelect() {
-      this.$emit('confirm', this.currentQuarter, this.quarterStr)
-    },
-    handleClosePopup(e) {
-      this.$emit('input', e)
-      this.scrollClear()
-    },
-    handleOpenPopup() {
-      this.currentQuarter = this.defaultQuarter
-      this.$nextTick(() => {
-        this.scrollInto()
-      })
-    },
-    scrollInto() {
-      setTimeout(() => {
-        if (this.currentQuarter) {
-          let top = this.$el.querySelector('.select-quarter')
-          this.$refs.body.scrollTop = top && top.getBoundingClientRect().top - 120
-        }
-      }, 240)
-    },
-    scrollClear() {
-      this.$refs.body.scrollTop = 0
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.ks-quarter .van-calendar__day {
-  margin-bottom: 6px;
-}
-
-.ios .ks-quarter-header {
-  padding-top: 20px;
-}
-
-.ipx .ks-quarter-header {
-  padding-top: 44px;
-}
-
-.afc .ks-quarter-header {
-  padding-top: var(--status-bar-height, 0px);
-}
-
-.ks-quarter-popup {
-  height: 100%;
-  .van-popup__close-icon--top-left {
-    top: 12px;
-  }
-}
-
-.ios .ks-quarter-popup .van-popup__close-icon--top-left {
-  top: 32px;
-}
-
-.ipx .ks-quarter-popup .van-popup__close-icon--top-left {
-  top: 56px;
-}
-
-.afc .ks-quarter-popup .van-popup__close-icon--top-left {
-  top: calc(12px + var(--status-bar-height, 0px))
-}
-
-.ios .ks-quarter-body {
-  padding-top: 64px;
-}
-
-.ipx .ks-quarter-body {
-  padding-top: 84px;
-}
-
-.afc .ks-quarter-body {
-  padding-top: calc(44px + var(--status-bar-height, 0px));
-}
-
-.ks-quarter {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  &-header {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    text-align: left;
-    height: 44px;
-    line-height: 28px;
-    font-weight: 500;
-    box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
-    background-color: #fff;
-    &__title {
-      padding-left: 44px;
-      font-size: 16px;
-    }
-    &__daterange {
-      margin-left: 20px;
-      color: #165DFF;
-      font-size: 14px;
-    }
-  }
-  &-body {
-    padding-top: 44px;
-  }
-  &__day {
-    width: 25%;
-  }
-  .van-calendar {
-    &__confirm {
-      height: 40px;
-      background-color: #165DFF;
-      border: 1px solid #165DFF;
-      border-radius: 8px;
-    }
-    &__day {
-      height: 38px;
-      font-size: 14px;
-    }
-    &__bottom-info {
-      line-height: 10px;
-    }
-    &__month-title {
-      margin-top: 12px;
-    }
-  }
-  .select-quarter {
-    font-size: 14px;
-    color: #fff;
-    background-color: #165DFF;
-    font-weight: 500;
-    border-radius: 22px;
-    padding: 6px 16px;
-  }
-}
-.ks-quarter-horizontal {
-  .ks-quarter-header {
-    line-height: 8px;
-  }
-}
-</style>

package/kuasheng-ui/components/ks-table/README.md

@@ -1,103 +0,0 @@
-#### 参数
-参数名 | 说明 | 默认值
------------|--------|--------
-headerHeight | 表头高度 | 40
-lineHeight | 表格行高 | 40
-offsetTop | 设置表头吸顶的距顶高度 | ios：76，android：56
-columns | 表格列配置 | []
-data | 表格数据（每行必须有id字段） | []
-pagination | 是否显示分页 | true
-page | 分页当前页码 | 1
-total | 总条数 | 0
-pageSize | 每页条数 | 10
-index | 是否显示序号
-indexWidth | 序号列宽度 | 40
-stripe | 是否启用斑马纹背景 | true
-border | 是否显示边框 | true
-storageKey | 用于列显示个性设置本地数据保存的key
-headerFormatter | 表头jsx渲染函数，字段作为key
-formatter | 单元格jsx渲染函数，字段作为key
-highlightRow | 高亮显示行函数，需返回一个颜色值
-
-#### 事件
-事件名 | 说明
------------|--------
-sort | 排序事件，点击表头触发，返回排序类型（升序、降序）和排序字段，数据格式：```{key: 'name', sortType: 'asc'}```
-change-page | 翻页事件，改变页码触发，返回页码
-cell-click | 单元格点击事件，参数（行数据、列配置、索引）
-sticky-scroll | sticky组件scroll事件，参数（滚动距离、是否吸顶）
-
-#### 方法
-方法名 | 说明
------------|--------
-setTableHeight | 设置表格高度，该方法根据表格组件的父元素高度自动计算表格的高度，组件会在mounted时调用该方法，如果父元素在第一次渲染后改变高度，可在组件外部自行调用该方法重新计算高度。调用是可传入高度作为参数，不传参数则获取父元素的高度用于计算
-clearScroll | 清除滚动
-setSort | 设置默认排序字段
-openHorizontal | 开启横屏模式
-openSettings | 打开个性设置
-
-#### slot
---------|------
-| nodata | 暂无数据的插槽 |
-
-#### 用法
-```javascript
-<template>
-  <div class="demo-tabbar">
-    <ks-table
-      :columns="columns"
-      :data="data"
-      :page="page"
-      :pageSize="100"
-      :total="1000"
-      @sort="onSort"
-      @change-page="onChangePage"
-    ></ks-table>
-  </div>
-</template>
-
-<script>
-import KsTable from '../components/ks-table/index'
-export default {
-  name: "table",
-  components: {KsTable},
-  data() {
-    return {
-      page: 1,
-      columns: [
-        {title: '姓名', key: 'name', width: 100, sort: true},
-        {title: '年龄', key: 'age', width: 100, sort: true},
-        {title: '手机', key: 'phone', width: 100, sort: true},
-        {title: '姓名', key: 'name1', width: 100, sort: true},
-        {title: '年龄', key: 'age1', width: 100, sort: true},
-        {title: '手机', key: 'phone1', width: 100, sort: true}
-      ],
-      data: [
-        {id: '1', name: 'tom', age: 18, phone: 13211111111},
-        {id: '2', name: 'jack', age: 20, phone: 13211111112},
-        {id: '3', name: 'jojo', age: 22, phone: 13211111113},
-        {id: '4', name: 'tom', age: 18, phone: 13211111111},
-        {id: '5', name: 'jack', age: 20, phone: 13211111112},
-        {id: '6', name: 'jojo', age: 22, phone: 13211111113}
-      ]
-    }
-  },
-  methods: {
-    onSort (e) {
-      console.log(e)
-    },
-    onChangePage (e) {
-      console.log(e)
-      this.page = e
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.demo-tabbar {
-  height: 300px;
-}
-</style>
-
-```

package/kuasheng-ui/components/ks-table/cell.vue

@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'cell',
-  props: {
-    popover: {
-      type: Object
-    },
-    column: {
-      type: Object
-    }
-  },
-  render () {
-    return this.popover ? <ks-popover
-            v-model="column.popover.show"
-            trigger="click"
-            theme="dark"
-          >
-          <div style="font-size: 14px;">气泡内容</div>
-            <template #reference>
-              <van-button type="primary">浅色风格</van-button>
-            </template>
-          </ks-popover> : <span :style="{ width: `${(column.width || 50) - 8}px` }">{{ item[column.key] }}</span>
-  },
-  methods: {
-  }
-}
-</script>
-<style lang="less">
-
-</style>
-

package/kuasheng-ui/components/ks-table/index.js

@@ -1,8 +0,0 @@
- import ksTable from './index.vue'
-
- export default {
-  install: (Vue) => {
-    Vue.component('ksTable', ksTable)
-  },
-  ...ksTable
- }