fit2cloud-ui-plus 0.0.1-beta.6 → 0.0.1-beta.9

package/src/components/virtual-scroller/FuVirtualHorizontalScroll.js

@@ -1,96 +0,0 @@
-import measurable from "@/mixins/measurable";
-import {convertToUnit} from "@/tools/utils"
-
-export default {
-  name: 'FuVirtualHorizontalScroll',
-  mixins: [measurable],
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-    itemWidth: {
-      type: [Number, String],
-      required: true
-    },
-    buffer: {
-      type: [Number, String],
-      default: 1
-    }
-  },
-  data() {
-    return {
-      scrollLeft: 0,
-      first: 0,
-      last: 0,
-    }
-  },
-  watch: {
-    width: 'scroll',
-    itemWidth: 'scroll',
-  },
-  computed: {
-    intItemWidth() {
-      return parseInt(this.itemWidth, 10)
-    },
-    intBuffer() {
-      return parseInt(this.buffer, 10)
-    },
-    firstToRender({first, intBuffer}) {
-      return Math.max(0, first - intBuffer)
-    },
-    lastToRender({items, last, intBuffer}) {
-      return Math.min(items.length, last + intBuffer)
-    },
-    containerWidth({items, intItemWidth}) {
-      return items.length * intItemWidth
-    }
-  },
-  methods: {
-    createChild(item, index) {
-      index += this.firstToRender
-      const left = convertToUnit(index * this.intItemWidth)
-
-      let data = {
-        staticClass: 'fu-virtual-scroll__item',
-        style: {left},
-        key: index,
-      }
-      let children = this.$scopedSlots["default"]({index, item})
-
-      return this.$createElement('div', data, children)
-    },
-    getFirst() {
-      return Math.floor(this.scrollLeft / this.intItemWidth)
-    },
-    getLast() {
-      const width = parseInt(this.width || 0, 10) || this.$el.clientWidth
-      return this.first + Math.ceil(width / this.intItemWidth)
-    },
-    scroll() {
-      this.scrollLeft = this.$el.scrollLeft
-      this.first = this.getFirst()
-      this.last = this.getLast()
-    }
-  },
-  render(h) {
-    const children = this.items.slice(this.firstToRender, this.lastToRender,).map(this.createChild)
-
-    const content = h('div', {
-      staticClass: 'fu-virtual-scroll__container',
-      style: {
-        height: this.height || "100%",
-        width: convertToUnit(this.containerWidth),
-      },
-    }, children)
-
-    return h('div', {
-      staticClass: 'fu-virtual-scroll is-horizontal',
-      style: this.styles,
-      on: {scroll: this.scroll, ...this.$listeners},
-    }, [content])
-  },
-  mounted() {
-    this.last = this.getLast()
-  },
-}

package/src/components/virtual-scroller/FuVirtualScroll.js

@@ -1,15 +0,0 @@
-import FuVirtualVerticalScroll from "./FuVirtualVerticalScroll";
-import FuVirtualHorizontalScroll from "./FuVirtualHorizontalScroll";
-
-export default {
-  name: "FuVirtualScroll",
-  functional: true,
-  render(h, {props, data, children}) {
-    const {horizontal} = props
-    if (horizontal === undefined || horizontal === false) {
-      return h(FuVirtualVerticalScroll, data, children)
-    } else {
-      return h(FuVirtualHorizontalScroll, data, children)
-    }
-  }
-}

package/src/components/virtual-scroller/FuVirtualVerticalScroll.js

@@ -1,95 +0,0 @@
-import measurable from "@/mixins/measurable";
-import {convertToUnit} from "@/tools/utils"
-
-export default {
-  name: 'FuVirtualVerticalScroll',
-  mixins: [measurable],
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-    itemHeight: {
-      type: [Number, String],
-      required: true
-    },
-    buffer: {
-      type: [Number, String],
-      default: 1
-    }
-  },
-  data() {
-    return {
-      scrollTop: 0,
-      first: 0,
-      last: 0,
-    }
-  },
-  watch: {
-    height: 'scroll',
-    itemHeight: 'scroll',
-  },
-  computed: {
-    intItemHeight() {
-      return parseInt(this.itemHeight, 10)
-    },
-    intBuffer() {
-      return parseInt(this.buffer, 10)
-    },
-    firstToRender({first, intBuffer}) {
-      return Math.max(0, first - intBuffer)
-    },
-    lastToRender({items, last, intBuffer}) {
-      return Math.min(items.length, last + intBuffer)
-    },
-    containerHeight({items, intItemHeight}) {
-      return items.length * intItemHeight
-    }
-  },
-  methods: {
-    createChild(item, index) {
-      index += this.firstToRender
-      const top = convertToUnit(index * this.intItemHeight)
-
-      let data = {
-        staticClass: 'fu-virtual-scroll__item',
-        style: {top},
-        key: index,
-      }
-      let children = this.$scopedSlots["default"]({index, item})
-
-      return this.$createElement('div', data, children)
-    },
-    getFirst() {
-      return Math.floor(this.scrollTop / this.intItemHeight)
-    },
-    getLast() {
-      const height = parseInt(this.height || 0, 10) || this.$el.clientHeight
-      return this.first + Math.ceil(height / this.intItemHeight)
-    },
-    scroll() {
-      this.scrollTop = this.$el.scrollTop
-      this.first = this.getFirst()
-      this.last = this.getLast()
-    }
-  },
-  render(h) {
-    const children = this.items.slice(this.firstToRender, this.lastToRender,).map(this.createChild)
-
-    const content = h('div', {
-      staticClass: 'fu-virtual-scroll__container',
-      style: {
-        height: convertToUnit(this.containerHeight),
-      },
-    }, children)
-
-    return h('div', {
-      staticClass: 'fu-virtual-scroll',
-      style: this.styles,
-      on: {scroll: this.scroll, ...this.$listeners},
-    }, [content])
-  },
-  mounted() {
-    this.last = this.getLast()
-  },
-}

package/src/components/virtual-scroller/index.js

@@ -1,10 +0,0 @@
-import FuVirtualScroll from "./FuVirtualScroll";
-import locale from "@/locale";
-
-FuVirtualScroll.install = function (Vue, opts = {}) {
-  locale.use(opts.locale)
-  locale.i18n(opts.i18n)
-  Vue.component(FuVirtualScroll.name, FuVirtualScroll)
-}
-
-export default FuVirtualScroll

package/src/styles/components/search-bar.scss

@@ -1,285 +0,0 @@
-@use "../common/mixins.scss" as *;
-@use "../common/variables.scss" as *;
-
-@include b(search-bar) {
-  @include flex-row(flex-start, center);
-  position: relative;
-  // width: $fu-search-bar-width;
-  // height: $fu-search-bar-height;
-
-  &:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: #D5D5D5;
-  }
-
-  @include e(content) {
-    @include flex-row(flex-start, center);
-    margin-right: 10px;
-    height: 100%;
-  }
-
-  @include e(buttons) {
-    @include flex-row(flex-end, center);
-    flex: auto;
-    height: 100%;
-  }
-
-  @include b(quick-search) {
-    &:after {
-      content: none;
-    }
-  }
-}
-
-@include b(search-bar-button) {
-  &.el-button {
-    @include active-scale(0.9);
-  }
-}
-
-@include b(search-conditions) {
-  @include flex-row(flex-start, center);
-  overflow-x: auto;
-  overflow-y: hidden;
-  height: calc(100% - 2px);
-
-  &::-webkit-scrollbar {
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-track {
-    border-radius: 5px;
-  }
-
-  // @include m(medium) {
-  //   font-size: 14px;
-
-  //   @include e(item) {
-  //     height: 28px;
-  //   }
-  // }
-
-  // @include m(small) {
-  //   font-size: 13px;
-
-  //   @include e(item) {
-  //     height: 26px;
-  //   }
-  // }
-
-  // @include m(mini) {
-  //   font-size: 12px;
-
-  //   @include e(item) {
-  //     height: 24px;
-  //   }
-  // }
-
-  @include e(item) {
-    @include flex-row(flex-start, center);
-    flex-shrink: 0;
-    position: relative;
-    box-sizing: border-box;
-    padding: 0 10px;
-    border-radius: 50px;
-    // color: $fu-search-bar-condition-color;
-    // background-color: $fu-search-bar-condition-bgColor;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
-    margin-left: 10px;
-    font-size: inherit;
-
-    &:last-child {
-      margin-right: 10px;
-    }
-
-    div + div {
-      margin-left: 4px;
-    }
-
-    .condition-value {
-      font-style: italic;
-    }
-
-    .condition-remove {
-      @include active-scale(0.9);
-      margin-left: 6px;
-      margin-right: -6px;
-      cursor: pointer;
-
-      &:hover {
-        color: getCssVar('color', 'primary');
-      }
-    }
-  }
-}
-
-@include b(quick-search) {
-  @include flex-row(flex-start, center);
-  min-width: 200px;
-  position: relative;
-
-  @include m(medium) {
-    font-size: 14px;
-  }
-
-  @include m(small) {
-    font-size: 13px;
-  }
-
-  @include m(mini) {
-    font-size: 12px;
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: #D5D5D5;
-  }
-
-  input {
-    border: none;
-    position: relative;
-    font-size: inherit;
-    padding: 10px;
-    width: 200px;
-    box-sizing: border-box;
-    // color: $--input-font-color;
-    // background-color: $--input-background-color;
-
-    &:focus {
-      outline: none;
-    }
-
-    &::placeholder {
-      // color: $--input-placeholder-color;
-    }
-  }
-
-  .clean-button {
-    @include active-scale;
-    cursor: pointer;
-
-    &:hover {
-      color: getCssVar('color', 'primary');
-    }
-  }
-}
-
-@include b(complex-search) {
-  @include e(trigger) {
-    i {
-      transition: transform 0.2s;
-    }
-
-    @include when(active) {
-      i {
-        transform: rotate(90deg);
-      }
-    }
-  }
-}
-
-@include b(complex-components) {
-  @include e(body) {
-    width: 100%;
-    margin: 5px;
-    min-width: 200px;
-  }
-
-  @include e(footer) {
-    width: 100%;
-    text-align: center;
-    margin: 5px 0;
-  }
-}
-
-@include b(operator-component) {
-  @include flex-row(flex-start, center);
-  padding: 5px;
-
-  @include e(label) {
-    text-align: left;
-    width: 120px;
-    padding: 0 5px;
-    flex-grow: 0;
-    flex-shrink: 0;
-    font-size: inherit;
-
-    @include m(small) {
-      width: 100px;
-      font-size: 13px;
-    }
-
-    @include m(mini) {
-      width: 100px;
-      font-size: 12px;
-    }
-  }
-
-  @include e(operator) {
-    padding: 0 5px;
-    width: 120px;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  @include e(value) {
-    padding: 0 5px;
-    flex-grow: 1;
-    min-width: 240px;
-  }
-}
-
-@include b(complex-select) {
-  &.el-select {
-    width: 100% !important;
-  }
-}
-
-@include b(complex-data) {
-  &.el-date-editor {
-    width: 100% !important;
-  }
-}
-
-@include b(complex-data-time) {
-  &.el-date-editor {
-    width: 100% !important;
-  }
-}
-
-@include b(complex-input-number) {
-  margin-right: -10px;
-  display: flex;
-  align-items: center;
-
-  @include e(input) {
-    .is-hide {
-      .el-input-number__decrease {
-        visibility: hidden;
-      }
-
-      .el-input-number__increase {
-        visibility: hidden;
-      }
-    }
-
-  }
-
-  .range-separator {
-    margin: 0 8px
-  }
-}