@kyfe/ks-query-table 0.0.2 → 0.0.3

package/components/table-settings/index.less

@@ -1,294 +0,0 @@
-.pe-table-setting-popup {
-  -webkit-user-select: none;
-  user-select: none;
-  background-color: #ffffff;
-    &.fixed-head {
-      height: 100%;
-    }
-  width: 100%;
-  border-radius: 20px 0 0 20px;
-
-  .pe-table-setting__wrapper {
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-  }
-
-  .pe-table-setting__header {
-    // 吸顶
-    position: sticky;
-    top: -1px;
-    z-index: 3;
-    background-color: #fff;
-    padding-top: 8px;
-    .pe-table-setting__header__title-wrap {
-      display: flex;
-      margin: 0 0 8px 16px;
-      align-items: center;
-      height: 20px;
-      font-size: 14PX;
-      font-weight: 500;
-      line-height: 20px;
-      letter-spacing: 0px;
-      .van-icon {
-        font-size: 20px;
-        margin-right: 4px;
-      }
-      .pe-table-setting__header__title {
-        color: @C9-gray-09;
-      }
-
-      .pe-table-setting__header__title-desc {
-        font-size: 12px;
-        color: #888B92;
-        font-weight: 400;
-        margin-left: 6px;
-      }
-    }
-
-    &__table-title {
-      display: flex;
-      // justify-content: space-between;
-      margin: 0 16px;
-      // height: 28px;
-      background-color: #f7f8fa;
-      span {
-        display: inline-block;
-        position: relative;
-        color: #555961;
-        font-size: 11px;
-        height: 28px;
-        line-height: 28px;
-        border-bottom: 1px solid @C9-gray-01;
-        &::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 1px;
-          height: 100%;
-          background-color: #c7cbce;
-          transform-origin: right;
-          transform: scaleX(0.5);
-        }
-        &:last-child::after {
-          display: none;
-        }
-      }
-
-      // .pe-table-setting {
-      //   &__field-sort {
-      //     width: 52px;
-      //   }
-      //   &__field-title {
-      //     flex: 1;
-      //   }
-      //   &__switch {
-      //     width: 64px;
-      //   }
-      //   &__up {
-      //     width: 64px;
-      //   }
-      //   &__down {
-      //     width: 64px;
-      //   }
-      // }
-    }
-  }
-
-  .pe-table-setting__list-wrapper {
-    -webkit-overflow-scrolling: touch;
-    &.fixed-head {
-      flex: 1;
-      overflow-y: scroll;
-    }
-    // padding: 0 16px;
-  }
-
-  .pe-table-setting__list {
-    // width: 208px;
-    // padding-right: 40px;
-    .sortable-drag {
-         opacity: 1 !important;
-         background: #FFFFFF !important;;
-         box-shadow: 0px 1px 8px 0px rgba(58, 68, 85, 0.24) !important;
-         height: 36px !important;
-         overflow: hidden;
-    }
-    li {
-      .parent-col,
-      .expand-col,
-      .child-expand-col {
-        height: 36px;
-        position: relative;
-        display: flex;
-        // justify-content: space-between;
-        // width: 208px;
-        overflow: hidden;
-        color: @C9-gray-09;
-        font-size: 12px;
-        line-height: 36px;
-        background-color: #fff;
-        border-bottom: 0.5px solid #e6e9ea;
-        // padding-right: 16px;
-        margin: 0 16px;
-        .list_item__switch {
-          padding: 10px;
-          box-sizing: border-box;
-        }
-        &.active {
-          background-color: #f3faff;
-          .van-cell__value {
-             background-color: #f3faff;
-             .van-field__body {
-              background-color: #ffffff;
-             }
-          }
-        }
-        .van-checkbox {
-          margin-top: 4px;
-        }
-
-        .svg-icon {
-          margin-left: 32px;
-          margin-top: 6px;
-        }
-      }
-      .expand-col .list_item__field-title {
-        padding-left: 16px;
-      }
-       .child-expand-col .list_item__field-title {
-        padding-left: 24px;
-      }
-
-      &-title {
-        display: inline-block;
-        width: 140px;
-      }
-    }
-
-    .footer-btn {
-      height: 80px;
-
-      .van-button {
-        border-radius: 8PX !important;
-        height: 42px;
-        line-height: 40px;
-      }
-    }
-  }
-  .pe-table-setting__header__table-title .pe-table-setting__field-sort {
-    padding-left: 8px;
-    box-sizing: border-box;
-  }
-  .pe-table-setting,
-  .list_item {
-    &__field-sort {
-      padding: 0;
-      // width: 82px;
-      width: 52px;
-      display: flex;
-      align-items: center;
-      .van-cell {
-        background-color: transparent;
-        padding-left: 8px;
-        .van-cell__value {
-        }
-        .van-field__body {
-          width: 24px;
-          height: 20px;
-          border: 1px solid #e6e9ea;
-          border-radius: 4px;
-          input {
-            text-align: center;
-            font-size: 13px;
-          }
-        }
-      }
-    }
-
-    &__field-title {
-      flex: 1;
-      padding: 0 8px;
-      white-space: nowrap;
-      /* 不换行 */
-      overflow: hidden;
-      /* 隐藏超出的内容 */
-      text-overflow: ellipsis;
-
-      /* 用省略号表示被隐藏的部分 */
-      .arrow {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        margin-left: 4px;
-        background-image: url(./assets/arrpw-up.svg);
-        background-repeat: no-repeat;
-        background-size: cover;
-        &.down {
-          transform: rotate(180deg);
-        }
-      }
-
-      &.expand {
-        background-color: #f8fafd;
-      }
-    }
-
-    &__switch {
-      width: 68px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-       .van-switch {
-       background-color:@C9-gray-01;
-       border:1px solid @C9-gray-01;
-      }
-      .van-switch--on {
-       background-color: @C1-brand-06;
-       background-image: linear-gradient(90deg, #F2412F 0%, #FF7053 97%);
-       border:1px solid #F2412F;
-      }
-    }
-
-    &__up {
-      width: 58px;
-      text-align: center;
-    }
-
-    &__down {
-      width: 58px;
-      text-align: center;
-    }
-  }
-
-  .list_item {
-    &__up,
-    &__down {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      span {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-image: url(./assets/up.svg);
-        &.disabled {
-        background-image: url(./assets/disabled-up.svg);
-        }
-      }
-    }
-
-    &__down span {
-      background-image: url(./assets/down.svg);
-       &.disabled {
-        background-image: url(./assets/disabled-down.svg);
-      }
-    }
-  }
-}

package/components/table-settings/index.vue

@@ -1,260 +0,0 @@
-<template>
-  <van-popup
-    :value="value"
-    position="right"
-    get-container="body"
-    class="pe-table-settings pe-common-popup-container"
-    duration="0.2"
-    :style="{ width: '100%', height: '100%' }"
-    :closeable="false"
-    :close-on-click-overlay="true"
-    @click-overlay="back"
-    @input="handleClosePopup"
-    @open="handleOpenPopup"
-  >
-    <div class="popup-box">
-      <div class="popup-header">
-        <div class="back-btn" @click="back">
-          <van-icon size="18" style="display: inline-block; vertical-align: middle; font-weight: bold; padding-right: 2px" name="arrow-left" />{{ title }}
-        </div>
-      </div>
-      <div class="popup-content">
-        <slot name="top"></slot>
-        <Settings ref="settingsRef" @change="change" v-bind="$attrs" :fixedHead="!($scopedSlots && $scopedSlots.top)" :tableColumns="columns">
-          <template slot="label" slot-scope="{ item }">
-            <slot :item="item" name="label"></slot>
-          </template>
-        </Settings>
-      </div>
-      <div class="footer-btn">
-        <van-button @click="reset" class="btn left-btn">重置</van-button>
-        <van-button type="primary" @click="confirm" class="btn">确定</van-button>
-      </div>
-    </div>
-  </van-popup>
-</template>
-
-<script>
-import cloneDeep from 'lodash/cloneDeep'
-// import Mixins from './mixin.js'
-import Settings from './settings.vue'
-// import { cols2 } from './test'
-export default {
-  name: 'table-settings',
-  // mixins: [Mixins],
-  components: { Settings },
-  props: {
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: '个性设置',
-    },
-    tableColumns: {
-      type: Array,
-      default: () => [],
-    },
-    // 组件内部控制tab显示
-    innerTabVisible: {
-      type: Boolean,
-      default: true,
-    },
-    disabledAutoHideClose: {
-      type: Boolean,
-      default: false,
-    },
-    isShowHorizontal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  watch: {
-    // tableColumns: {
-    //   deep: true,
-    //   handler() {
-    //   },
-    // },
-  },
-  data() {
-    return {
-      columns: [],
-    }
-  },
-  computed: {},
-  methods: {
-    change(val) {
-      this.$emit('change', val)
-    },
-    back() {
-      this.handleClosePopup(false)
-      this.$emit('back')
-    },
-    async reset() {
-      this.handleClosePopup(false)
-      this.$emit('reset')
-    },
-    cancel() {
-      this.handleClosePopup(false)
-      this.$emit('cancel')
-    },
-    confirmCheck(clos) {
-      if (!clos.filter(v => v.show && !v.isHide).length) {
-        window.vant.Toast('请至少保留一列')
-        return false
-      }
-      return true
-    },
-    confirm() {
-      let clos = [...this.$refs.settingsRef.getData()]
-      if (!this.confirmCheck(clos)) return
-      this.handleClosePopup(false)
-      this.columns = clos
-      this.$emit('confirm', clos)
-    },
-    handleClosePopup(e) {
-      this.$emit('input', e)
-      document.body.style['user-select'] = 'auto'
-      this.innerTabVisible &&
-        window.ks.callFunc({
-          method: 'setStockTabVisible',
-          params: {
-            isShow: true, // 是否显示tab
-          },
-        })
-      if (!this.disabledAutoHideClose && !this.isShowHorizontal) {
-        window.ks.callFunc({
-          method: 'setCloseButton',
-          params: { isShow: true },
-        })
-      }
-    },
-    handleOpenPopup() {
-      this.init()
-      this.$emit('open')
-      this.innerTabVisible &&
-        window.ks.callFunc({
-          method: 'setStockTabVisible',
-          params: {
-            isShow: false, // 是否显示tab
-          },
-        })
-      window.ks.callFunc({
-        method: 'setCloseButton',
-        params: {
-          isShow: false,
-        },
-      })
-    },
-    init() {
-      try {
-        this.$nextTick(() => {
-          this.$refs.settingsRef.activeIndex = -1
-          this.$refs.settingsRef && this.$refs.settingsRef.formatColumns(cloneDeep(this.tableColumns))
-        })
-        document.body.style['user-select'] = 'none'
-      } catch (error) {
-        // console.log('error', error)
-      }
-    },
-  },
-}
-</script>
-<style lang="less" scoped>
-.pe-table-settings {
-  // 防止拖拽时出现横向滚动条
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-  user-select: none;
-  // 适配ios的吸顶
-  // top: 0;
-  // left: 0;
-  // right: 0;
-  // transform: unset;
-  .popup-box {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-    .popup-header {
-      width: 100%;
-      height: 44px;
-      font-weight: 500;
-      display: flex;
-      flex-shrink: 0;
-      font-size: 18px;
-      justify-content: space-between;
-      align-items: center;
-      .back-btn {
-        display: flex;
-        align-items: center;
-        padding-left: 7px;
-        // prettier-ignore
-        font-size: 16PX;
-        // prettier-ignore
-        line-height: 16PX;
-      }
-    }
-    .popup-content {
-      // flex-grow 不能使用，ios无法滚动
-      flex: 1;
-      font-size: 14px;
-      color: #333333;
-      overflow-y: auto;
-    }
-    .footer-btn {
-      width: 100%;
-      padding: 8px 16px;
-      flex-shrink: 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-      .btn {
-        height: 40px;
-        width: 48%;
-        border-radius: 8px !important;
-        &.van-button--primary {
-          border: none;
-          background: linear-gradient(90deg, #f2412f 0%, #ff7053 97%);
-        }
-      }
-      .left-btn {
-        box-sizing: inherit;
-        // color:  @C1-brand-05;
-        position: relative;
-        border: none;
-        &::after {
-          content: ' ';
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 200%;
-          height: 200%;
-          border: 1px solid @C1-brand-03;
-          border-radius: 16px;
-          -webkit-transform-origin: 0 0;
-          transform-origin: 0 0;
-          -webkit-transform: scale(0.5);
-          transform: scale(0.5);
-        }
-      }
-    }
-  }
-}
-.ipx .pe-table-settings {
-  .popup-header {
-    padding-top: 44px !important;
-  }
-  .footer-btn {
-    padding-bottom: 24px;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-}
-.ios .pe-table-settings .popup-header {
-  padding-top: 20px;
-}
-</style>