@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-date-picker/date-picker-top.vue

@@ -0,0 +1,88 @@
+<template>
+  <van-popup
+    :value="value"
+    position="top"
+    get-container="body"
+    class="ks-date-picker-top-popup"
+    duration="0.2"
+    :closeable="false"
+    :close-on-click-overlay="closeOverlay"
+    close-icon-position="top-left"
+    close-icon="arrow-left"
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <div class="ks-date-picker ks-date-picker-top">
+      <div class="ks-date-picker-top__header">
+        <div class="ks-date-picker-top__header-title">
+          <span class="ks-date-picker-top__header-title-start">{{startText}}</span>
+          <span v-show="type.includes('range') && startText" class="ks-date-picker-top__header-title-split"> - </span>
+          <span
+            v-show="type.includes('range') && startText"
+            class="ks-date-picker-top__header-title-end"
+            :class="{'ks-date-picker-top__header-title-end-not': startText && !endText}"
+          >
+            {{endText || (type === 'monthrange' ? '结束月份' : '结束时间')}}
+          </span>
+        </div>
+      </div>
+      <div class="ks-date-picker__body">
+        <component
+          ref="selector"
+          :is="currentCom"
+          v-bind="$attrs"
+          @select="handleSelect"
+        />
+      </div>
+      <div v-if="showConfirm" class="ks-date-picker-top__footer">
+        <van-button type="primary" :disabled="!currentSelectedValue" block class="van-calendar__confirm" @click="handleConfirm">确定</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import Mixins from './mixin.js'
+
+export default {
+  name: 'date-picker-top',
+  mixins: [Mixins]
+}
+</script>
+
+<style lang="less">
+@import url("./style.less");
+.ks-date-picker-top-popup {
+  height: 85%;
+  border-radius: 0 0 12px 12px;
+  .van-popup__close-icon--top-left {
+    top: 10px;
+    color: #999999;
+  }
+}
+.ks-date-picker-top {
+  height: 85vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &__header {
+    height: 40px;
+    &-title {
+      .header-title-text();
+    }
+  }
+  &__footer {
+    .footer-btn();
+  }
+}
+.ios .ks-date-picker-top-popup {
+  padding-top: 20px;
+}
+.ipx .ks-date-picker-top-popup {
+  padding-top: 44px;
+}
+
+.afc .ks-date-picker-top-popup {
+  padding-top: var(--status-bar-height, 0px);
+}
+</style>

package/kuasheng-ui/components/ks-date-picker/date-picker.js

@@ -0,0 +1,15 @@
+import { DatePickerBottom, DatePickerTop, DatePickerRight, DatePickerDropdown } from './index.js'
+export default {
+  functional: true,
+  name: 'date-picker',
+  render (h, ctx) {
+    ctx.data.scopedSlots = {
+      ...ctx.scopedSlots
+    }
+    if (ctx.props.horizontal) {
+      return h(DatePickerRight, ctx.data)
+    } else {
+      return h(ctx.props.position === 'dropdown' ? DatePickerDropdown : ctx.props.position === 'top' ? DatePickerTop : DatePickerBottom, ctx.data)
+    }
+  }
+}

package/kuasheng-ui/components/ks-date-picker/date-range-select.vue

@@ -0,0 +1,92 @@
+<template>
+  <van-calendar
+    class="ks-daterange-select"
+    :default-date="currentDate"
+    :poppable="false"
+    :show-confirm="false"
+    :show-title="false"
+    :show-subtitle="false"
+    :min-date="currentMin"
+    :max-date="currentMax"
+    :lazy-render="false"
+    :allow-same-day="true"
+    row-height="44"
+    type="range"
+    @select="handleSelect"
+  />
+</template>
+
+<script>
+import { formatToDate, formatToString } from './utils'
+
+export default {
+  name: 'date-range-select',
+  props: {
+    defaultValue: {
+      type: Array,
+      default: () => ([])
+    },
+    min: [String, Number, Date],
+    max: [String, Number, Date]
+  },
+  data () {
+    return {
+      currentDate: [],
+      currentMin: new Date(),
+      currentMax: new Date()
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    init () {
+      if (this.defaultValue.length) {
+        this.currentDate = [formatToDate(this.defaultValue[0]), formatToDate(this.defaultValue[1])]
+      }
+      if (!this.min) {
+        let _date = new Date()
+        let y = _date.getFullYear()
+        let m = _date.getMonth() + 1
+        this.currentMin = (m - 6) < 1 ? new Date(y - 1, 12 + m - 5, 1) : new Date(y, m - 5, 1)
+      } else {
+        this.currentMin = formatToDate(this.min)
+      }
+      if (!this.max) {
+        let _date = new Date()
+        let y = _date.getFullYear()
+        let m = _date.getMonth() + 1
+        this.currentMax = (m + 6) > 12 ? new Date(y + 1, m + 6 - 12, 0) : new Date(y, m + 6, 0)
+      } else {
+        this.currentMax = formatToDate(this.max)
+      }
+    },
+    handleSelect (e) {
+      this.$emit('select', {date: e, str: [formatToString(e[0]), formatToString(e[1])]})
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-daterange-select {
+  .van-calendar__day {
+    margin: 3px 0;
+  }
+  .van-calendar__day--middle {
+    color: #165DFF !important;
+    &::after {
+      top: 0 !important;
+      bottom: 0 !important;
+    }
+  }
+  .van-calendar__day--start, .van-calendar__day--end {
+    margin-left: calc((14.285% - 44px) / 2);
+    margin-right: calc((14.285% - 44px) / 2);
+  }
+  .van-calendar__day--start-end {
+    margin-left: calc((14.285% - 54px) / 2);
+    margin-right: calc((14.285% - 54px) / 2);
+  }
+}
+</style>

package/kuasheng-ui/components/ks-date-picker/date-select.vue

@@ -0,0 +1,65 @@
+<template>
+  <van-calendar
+    :default-date="currentDate"
+    :poppable="false"
+    :show-confirm="false"
+    :show-title="false"
+    :show-subtitle="false"
+    :min-date="currentMin"
+    :max-date="currentMax"
+    :lazy-render="false"
+    row-height="50"
+    type="single"
+    @select="handleSelect"
+  />
+</template>
+
+<script>
+import { formatToDate, formatToString } from './utils'
+
+export default {
+  name: 'date-select',
+  props: {
+    defaultValue: {
+      type: [Date, String, Number],
+      default: new Date()
+    },
+    min: [String, Number, Date],
+    max: [String, Number, Date]
+  },
+  data () {
+    return {
+      currentDate: null,
+      currentMin: new Date(),
+      currentMax: new Date()
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    init () {
+      this.currentDate = formatToDate(this.defaultValue)
+      if (!this.min) {
+        let _date = new Date()
+        let y = _date.getFullYear()
+        let m = _date.getMonth() + 1
+        this.currentMin = (m - 6) < 1 ? new Date(y - 1, 12 + m - 5, 1) : new Date(y, m - 5, 1)
+      } else {
+        this.currentMin = formatToDate(this.min)
+      }
+      if (!this.max) {
+        let _date = new Date()
+        let y = _date.getFullYear()
+        let m = _date.getMonth() + 1
+        this.currentMax = (m + 6) > 12 ? new Date(y + 1, m + 6 - 12, 0) : new Date(y, m + 6, 0)
+      } else {
+        this.currentMax = formatToDate(this.max)
+      }
+    },
+    handleSelect (e) {
+      this.$emit('select', {date: e, str: formatToString(e)})
+    }
+  }
+}
+</script>

package/kuasheng-ui/components/ks-date-picker/date-week-month.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="ks-date-week-month-picker">
+    <div class="ks-date-week-month-picker__header">
+      <div class="ks-date-week-month-picker__header-btn">
+        <van-button
+          :class="{'ks-date-week-month-picker__header-btn__action': currentType === 'date'}"
+          round
+          @click="handleChangeType('date')"
+        >
+          日期选择
+        </van-button>
+      </div>
+      <div class="ks-date-week-month-picker__header-btn">
+        <van-button
+          :class="{'ks-date-week-month-picker__header-btn__action': currentType === 'week'}"
+          round
+          @click="handleChangeType('week')"
+        >
+          周选择
+        </van-button>
+      </div>
+      <div class="ks-date-week-month-picker__header-btn">
+        <van-button
+          :class="{'ks-date-week-month-picker__header-btn__action': currentType === 'month'}"
+          round
+          @click="handleChangeType('month')"
+        >
+          月份选择
+        </van-button>
+      </div>
+    </div>
+    <div class="ks-date-week-month-picker__body">
+      <component
+        ref="com"
+        :is="currentCom"
+        v-bind="$attrs"
+        @select="handleSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  DateSelect,
+  MonthSelect,
+  WeekSelect
+} from './index'
+import { typeToSelectotMap } from './utils'
+
+export default {
+  name: 'date-week-month',
+  components: {
+    DateSelect,
+    MonthSelect,
+    WeekSelect
+  },
+  data () {
+    return {
+      currentType: 'date'
+    }
+  },
+  computed: {
+    currentCom () {
+      return typeToSelectotMap[this.currentType]
+    }
+  },
+  methods: {
+    init () {
+      this.$refs.com.init()
+    },
+    handleChangeType (e) {
+      this.currentType = e
+      this.$emit('change-type', e)
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    handleSelect (e) {
+      this.$emit('select', e, this.currentType)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-date-week-month-picker {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &__header {
+    height: 62px;
+    display: flex;
+    box-shadow: 0 3px 10px 0 rgba(235,235,235,0.30);
+    &-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .van-button--normal {
+        font-size: 14px;
+        color: #2F2F2F;
+      }
+      .van-button--default {
+        background-color: #F3F4F6;
+        border-color: #F3F4F6;
+      }
+      &__action {
+        background-color: #F1F0FE !important;
+        border-color: rgba(22,93,255,0.30) !important;
+      }
+    }
+  }
+  &__body {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    > .van-calendar, > .van-calendar__body {
+      position: absolute;
+      bottom: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}
+</style>

package/kuasheng-ui/components/ks-date-picker/index.js

@@ -0,0 +1,12 @@
+export { default as DateSelect } from './date-select.vue'
+export { default as DateRangeSelect } from './date-range-select.vue'
+export { default as MonthSelect } from './month-select.vue'
+export { default as MonthRangeSelect } from './month-range-select.vue'
+export { default as WeekSelect } from './week-select.vue'
+export { default as QuarterSelect } from './quarter-select.vue'
+export { default as DateWeekMonth } from './date-week-month.vue'
+export { default as DatePickerBottom } from './date-picker-bottom.vue'
+export { default as DatePickerTop } from './date-picker-top.vue'
+export { default as DatePickerRight } from './date-picker-right.vue'
+export { default as DatePickerDropdown } from './date-picker-dropdown.vue'
+export { default } from './date-picker.js'

package/kuasheng-ui/components/ks-date-picker/mixin.js

@@ -0,0 +1,92 @@
+import { typeToSelectotMap } from './utils'
+import {
+  DateSelect,
+  DateRangeSelect,
+  MonthSelect,
+  MonthRangeSelect,
+  WeekSelect,
+  QuarterSelect,
+  DateWeekMonth
+} from './index'
+
+export default {
+  components: {
+    DateSelect,
+    DateRangeSelect,
+    MonthSelect,
+    MonthRangeSelect,
+    WeekSelect,
+    QuarterSelect,
+    DateWeekMonth
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'date'
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    },
+    closeOverlay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    value(val) {
+      window.ks && window.ks.setCloseButton && window.ks.setCloseButton({ isShow: !val })
+    }
+  },
+  data () {
+    return {
+      currentCom: null,
+      currentSelectedValue: null,
+      startText: '',
+      endText: ''
+    }
+  },
+  methods: {
+    init () {
+      this.currentCom = typeToSelectotMap[this.type]
+      this.$nextTick(() => {
+        this.$refs.selector.init()
+      })
+    },
+    handleOpenPopup () {
+      this.init()
+    },
+    handleClosePopup (e) {
+      this.$emit('input', e)
+      this.currentCom = null
+      this.currentSelectedValue = null
+      this.startText = ''
+      this.endText = ''
+    },
+    handleSelect (e, type = this.type) {
+      this.$emit('select', e)
+      this.currentSelectedValue = e
+      if (this.type === 'dateweekmonth') {
+        this.dateweekmonthType = type
+      }
+      if (type === 'week') {
+        this.startText = `${e.year}年 ${e.num < 10 ? '0' + e.num : e.num}周(${e.week.startDayStr}~${e.week.endDayStr})`
+      } else if (type === 'quarter') {
+        this.startText = `${e.year}年 ${e.cn}`
+      } else if (type === 'month' || type === 'date') {
+        this.startText = e.str
+      } else if (type === 'monthrange' || type === 'daterange') {
+        this.startText = e.str[0]
+        this.endText = e.str[1]
+      }
+    },
+    handleConfirm () {
+      this.$emit('confirm', this.currentSelectedValue)
+      this.handleClosePopup(false)
+    }
+  }
+}

package/kuasheng-ui/components/ks-date-picker/month-range-select.vue

@@ -0,0 +1,129 @@
+<template>
+ <div class="van-calendar__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-month__day"
+          v-for="m of months"
+          :key="m"
+          :class="{
+            'van-calendar__day--disabled': (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax)
+          }"
+          @click="handleSelect(y, m, (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax))"
+        >
+          <div
+            :class="{
+              'van-calendar__day--start': +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd !== +new Date(`${y}/${m}/1`),
+              'van-calendar__day--end': +currentEnd === +new Date(`${y}/${m}/1`) && +currentStart !== +new Date(`${y}/${m}/1`),
+              'van-calendar__day--middle': +currentStart < +new Date(`${y}/${m}/1`) && +currentEnd > +new Date(`${y}/${m}/1`),
+              'van-calendar__day--start-end': +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd === +new Date(`${y}/${m}/1`)
+            }">
+            {{m}}月
+            <div
+              v-if="+currentStart === +new Date(`${y}/${m}/1`) || +currentEnd === +new Date(`${y}/${m}/1`)"
+              class="van-calendar__bottom-info"
+            >
+              {{
+                +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd === +new Date(`${y}/${m}/1`)
+                  ? '开始/结束'
+                  : +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd !== +new Date(`${y}/${m}/1`)
+                  ? '开始'
+                  : '结束'
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRangeYears, foramtToMonth, formatToString } from './utils'
+
+export default {
+  name: 'month-range-select',
+  props: {
+    defaultValue: {
+      type: Array,
+      default: () => ([])
+    },
+    yearRange: {
+      type: Array,
+      default: () => [new Date().getFullYear() - 5, new Date().getFullYear()],
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    min: [String, Number, Date],
+    max: [String, Number, Date]
+  },
+  data () {
+    return {
+      years: getRangeYears(this.yearRange),
+      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      currentStart: null,
+      currentEnd: null,
+      currentMin: null,
+      currentMax: null
+    }
+  },
+  methods: {
+    init () {
+      this.currentMin = this.min ? +foramtToMonth(this.min) : null
+      this.currentMax = this.max ? +foramtToMonth(this.max) : null
+      if (this.defaultValue.length === 2) {
+        let _start = foramtToMonth(this.defaultValue[0])
+        let _end = foramtToMonth(this.defaultValue[1])
+        if (_start && _end) {
+          this.currentStart = _start
+          let monthStr = formatToString(_end, 'month')
+          let arr = monthStr.split('/')
+          this.handleSelect(arr[0], arr[1], false)
+        } else if (_start && !_end) {
+          let monthStr = formatToString(_start, 'month')
+          let arr = monthStr.split('/')
+          this.handleSelect(arr[0], arr[1], false)
+        }
+        this.scrollInto()
+      }
+    },
+    scrollInto() {
+      setTimeout(() => {
+        if (this.currentMonth) {
+          let top = this.$el.querySelector('.van-calendar__day--start')
+          this.$refs.body.scrollTop = top ? top.getBoundingClientRect().top - 100 : 0
+        }
+      }, 240)
+    },
+    handleSelect(y, m, disabled) {
+      if (!disabled) {
+        let _month = foramtToMonth(`${y}/${m}`)
+        if (this.currentStart && !this.currentEnd && +this.currentStart <= +_month) {
+          this.currentEnd = _month
+          this.$emit('select', {
+            date: [this.currentStart, this.currentEnd],
+            str: [formatToString(this.currentStart, 'month'), formatToString(this.currentEnd, 'month')]
+          })
+        } else {
+          this.currentEnd = null
+          this.currentStart = _month
+          this.$emit('select', {
+            date: [this.currentStart, null],
+            str: [formatToString(this.currentStart, 'month'), '']
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-month__day {
+  width: 16.666%;
+  height: 50px;
+}
+</style>