aaa-ui-test 1.0.0

package/src/components/select/src/select.vue

@@ -0,0 +1,86 @@
+<template>
+  <jdd-field
+    :label="label"
+    :isFocus="hasValue"
+    :direction="direction"
+    :border="border"
+    @label-click="onClick"
+  >
+    <div class="jdd-field-control jdd-field-select">
+      <span
+        class="jdd-select-show"
+        :style="{color:getColor}"
+        :class="{'jdd-field-hasvalue':value}"
+      >{{textTrans}}</span>
+      <i class="jdd-select-icon"></i>
+    </div>
+  </jdd-field>
+</template>
+<script>
+import jddField from "../../field";
+export default {
+  name: "JddSelect",
+  props: {
+    direction: {
+      type: String,
+      default: "row"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    border: {
+      type: String,
+      default: ""
+    },
+    prompt:{
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    jddField
+  },
+  data() {
+    return {
+      isFocus: false,
+      placeholderText: this.placeholder,
+      label: this.title,
+    };
+  },
+  methods: {
+    onClick(){
+      this.$emit("get-select")
+    }
+  },
+  computed: {
+    textTrans() {
+      if(this.direction==="row"){
+      return this.value || this.placeholder;
+      }else{
+        return this.value
+      }
+    },
+    getColor() {
+      return  this.value ? "#333":this.prompt ? "#4D7BFE" : "#CCC";
+    },
+    hasValue() {
+      return this.value !== "";
+    }
+  }
+};
+</script>
+
+

package/src/components/swiper/index.js

@@ -0,0 +1,6 @@
+import Swiper from './src/swiper.vue';
+import "./index.scss";
+Swiper.install = function(Vue){
+    Vue.component(Swiper.name, Swiper);
+}
+export default Swiper;

package/src/components/swiper/index.scss

@@ -0,0 +1,49 @@
+.jdd-swiper {
+    min-height: 1px;
+    height: 100%;
+    .jdd-swiper-group {
+      position: relative;
+      height: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      .jdd-swiper-item {
+        float: left;
+        box-sizing: border-box;
+        overflow: hidden;
+        text-align: center;
+        a {
+          display: block;
+          width: 100%;
+          overflow: hidden;
+          text-decoration: none;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+  }
+  .jdd-dots {
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 6px;
+    transform: translateZ(1px);
+    text-align: center;
+    font-size: 0;
+    .jdd-dot {
+      display: inline-block;
+      margin: 0 4px;
+      width: 6px;
+      height: 6px;
+      border-radius: 100%;
+      background:rgba(255,255,255,1);
+      opacity:0.3;
+      &.active {
+        border-radius: 100%;
+        opacity: 1;
+        background: #fff;
+      }
+    }
+  }

package/src/components/swiper/src/swiper.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="jdd-swiper" ref="swiper">
+    <div class="jdd-swiper-group" ref="swiperGroup">
+      <slot></slot>
+    </div>
+    <div v-if="showDot" class="jdd-dots">
+      <span
+        class="jdd-dot"
+        :class="{active: currentPageIndex === index }"
+        v-for="(item, index) in dots"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass } from "@/utils/utils";
+import BScroll from "better-scroll";
+
+const COMPONENT_NAME = "JddSwiper";
+
+export default {
+  name: COMPONENT_NAME,
+  props: {
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    autoPlay: {
+      type: Boolean,
+      default: true
+    },
+    interval: {
+      type: Number,
+      default: 4000
+    },
+    showDot: {
+      type: Boolean,
+      default: true
+    },
+    click: {
+      type: Boolean,
+      default: true
+    },
+    threshold: {
+      type: Number,
+      default: 0.3
+    },
+    speed: {
+      type: Number,
+      default: 400
+    }
+  },
+  data() {
+    return {
+      dots: [],
+      currentPageIndex: 0
+    };
+  },
+  mounted() {
+    this.update();
+
+    window.addEventListener("resize", () => {
+      if (!this.slide || !this.slide.enabled) {
+        return;
+      }
+      clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        if (this.slide.isInTransition) {
+          this._onScrollEnd();
+        } else {
+          if (this.autoPlay) {
+            this._play();
+          }
+        }
+        this.refresh();
+      }, 60);
+    });
+  },
+  activated() {
+    if (!this.slide) {
+      return;
+    }
+    this.slide.enable();
+    let pageIndex = this.slide.getCurrentPage().pageX;
+    this.slide.goToPage(pageIndex, 0, 0);
+    this.currentPageIndex = pageIndex;
+    if (this.autoPlay) {
+      this._play();
+    }
+  },
+  deactivated() {
+    this.slide.disable();
+    clearTimeout(this.timer);
+  },
+  beforeDestroy() {
+    this.slide.disable();
+    clearTimeout(this.timer);
+  },
+  methods: {
+    update() {
+      if (this.slide) {
+        this.slide.destroy();
+      }
+      this.$nextTick(() => {
+        this.init();
+      });
+    },
+    refresh() {
+      this._setSlideWidth(true);
+      this.slide.refresh();
+    },
+    prev() {
+      this.slide.prev();
+    },
+    next() {
+      this.slide.next();
+    },
+    init() {
+      clearTimeout(this.timer);
+      this.currentPageIndex = 0;
+      this._setSlideWidth();
+      if (this.showDot) {
+        this._initDots();
+      }
+      this._initSlide();
+
+      if (this.autoPlay) {
+        this._play();
+      }
+    },
+    _setSlideWidth(isResize) {
+      this.children = this.$refs.swiperGroup.children;
+
+      let width = 0;
+      let slideWidth = this.$refs.swiper.clientWidth;
+      for (let i = 0; i < this.children.length; i++) {
+        let child = this.children[i];
+        addClass(child, "jdd-swiper-item");
+
+        child.style.width = slideWidth + "px";
+        width += slideWidth;
+      }
+      if (this.loop && !isResize) {
+        width += 2 * slideWidth;
+      }
+      this.$refs.swiperGroup.style.width = width + "px";
+    },
+    _initSlide() {
+      console.log(this.threshold);
+      this.slide = new BScroll(this.$refs.swiper, {
+        scrollX: true,
+        scrollY: false,
+        momentum: false,
+        snap: {
+          loop: this.loop,
+          threshold: this.threshold,
+          speed: this.speed
+        },
+        bounce: false,
+        stopPropagation: true,
+        click: this.click
+      });
+
+      this.slide.on("scrollEnd", this._onScrollEnd);
+
+      this.slide.on("touchEnd", () => {
+        if (this.autoPlay) {
+          this._play();
+        }
+      });
+
+      this.slide.on("beforeScrollStart", () => {
+        if (this.autoPlay) {
+          clearTimeout(this.timer);
+        }
+      });
+    },
+    _onScrollEnd() {
+      let pageIndex = this.slide.getCurrentPage().pageX;
+      this.currentPageIndex = pageIndex;
+      if (this.autoPlay) {
+        this._play();
+      }
+    },
+    _initDots() {
+      this.dots = new Array(this.children.length);
+    },
+    _play() {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.slide.next();
+      }, this.interval);
+    }
+  },
+  watch: {
+    loop() {
+      this.update();
+    },
+    autoPlay() {
+      this.update();
+    },
+    speed() {
+      this.update();
+    },
+    threshold() {
+      this.update();
+    }
+  }
+};
+</script>

package/src/components/switch/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch has a correct class column 1`] = `
+<div class="jdd-field-row jdd-field jdd-field-common jdd-field-border-bottom">
+  <div class="jdd-field-label">是否继续</div>
+  <div class="jdd-field-control jdd-field-switch"><label for="" class="jdd-switch"><input type="checkbox" class="jdd-switch-input"> <span class="jdd-switch-show"></span></label></div>
+</div>
+`;
+
+exports[`Switch renders the correct markup 1`] = `
+<div class="jdd-field-row jdd-field-inline jdd-field-common jdd-field-border-bottom">
+  <div class="jdd-field-label">是否继续</div>
+  <div class="jdd-field-control jdd-field-switch"><label for="" class="jdd-switch"><input type="checkbox" class="jdd-switch-input"> <span class="jdd-switch-show"></span></label></div>
+</div>
+`;

package/src/components/switch/__tests__/index.test.js

@@ -0,0 +1,44 @@
+// Import the mount() method from the test utils
+// and the component you want to test
+import { createWrapper, mount } from "@vue/test-utils";
+import Switch from "..";
+import { asyncExpect, flushPromises } from "@/../test/utils.js";
+
+describe("Switch", () => {
+  let title = "是否继续";
+  const wrapper = mount(Switch, {
+    propsData: {
+      value: "",
+      title: title,
+      border:"bottom"
+    }
+  });
+
+  it("renders the correct markup", async () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+  const getTask = async function() {
+    wrapper.find(".jdd-switch").trigger("click");
+
+    await asyncExpect(() => {
+      expect(wrapper.vm.value).toBe(true);
+    }, 0);
+    wrapper.find(".jdd-switch").trigger("click");
+
+    await asyncExpect(() => {
+      expect(wrapper.vm.value).toBe(false);
+    }, 0);
+  };
+  it("has a correct class row", () => {
+    //expect(wrapper.classes()).toContain(['jdd-field-inline','jdd-field-common'])
+    expect(wrapper.classes("jdd-field-inline")).toBe(true);
+    expect(wrapper.classes("jdd-field-common")).toBe(true);
+    getTask();
+  });
+  it("has a correct class column", () => {
+    wrapper.setProps({ direction: "column" });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.classes("jdd-field")).toBe(true);
+    getTask();
+  });
+});

package/src/components/switch/index.js

@@ -0,0 +1,8 @@
+import Switch from './src/switch.vue';
+import "./index.scss";
+
+Switch.install = function(Vue){
+    Vue.component(Switch.name, Switch);
+}
+
+export default Switch;

package/src/components/switch/index.scss

@@ -0,0 +1,85 @@
+$jdd-switch-width: 49px;
+$jdd-switch-height: 29px;
+$jdd-switch-color: #4d7bfe;
+$jdd-switch-disable-color: #b9d1f8;
+.jdd-field-switch {
+  text-align: right;
+  display: flex;
+      align-items: center;
+  .jdd-switch-disable {
+    input[type="checkbox"]:checked + .jdd-switch-show {
+      border-color: $jdd-switch-disable-color;
+      background-color: $jdd-switch-disable-color;
+    }
+  }
+}
+.jdd-switch {
+  position: relative;
+  font-size: 0;
+  display: inline-block;
+  width: 100%;
+  .jdd-switch-show {
+    width: $jdd-switch-width;
+    height: $jdd-switch-height;
+    //border: 1px solid rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    position: relative;
+    border-radius: 16px;
+    box-sizing: border-box;
+    background: #e5e5e5;
+  }
+  input[type="checkbox"] {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    appearance: none;
+    border: 0px;
+  }
+
+  input[type="checkbox"]:checked + .jdd-switch-show {
+    border-color: $jdd-switch-color;
+    background-color: $jdd-switch-color;
+  }
+  input[type="checkbox"]:checked + .jdd-switch-show::after {
+    transform: translateX(23px);
+  }
+  input[type="checkbox"]:checked + .jdd-switch-show::before {
+    transform: scale(0);
+  }
+
+  .jdd-switch-show::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    z-index: 1;
+    transform: scale(1);
+    border-radius: 14px;
+    background:rgb(204,204,204);
+    transition: all 200ms ease 0s;
+  }
+  .jdd-switch-show::after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    content: " ";
+    height: 23px;
+    width: 23px;
+    z-index: 2;
+    transform: translateX(3px);
+    // box-shadow: rgba(0, 0, 0, 0.21) 2px 2px 4px;
+    //box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    border-radius: 100%;
+    background: rgb(255, 255, 255);
+    transition: all 200ms ease 0s;
+  }
+}

package/src/components/switch/src/switch.vue

@@ -0,0 +1,60 @@
+<template>
+  <jdd-field :label="label" :state="validateStatus" :direction="direction" :border="border" class="jdd-field-row">
+    <div class="jdd-field-control jdd-field-switch">
+      <label for class="jdd-switch" :class="{'jdd-switch-disable':disabled}">
+        <input type="checkbox" class="jdd-switch-input" v-model="checkValue" :disabled="disabled">
+        <span class="jdd-switch-show"></span>
+      </label>
+    </div>
+  </jdd-field>
+</template>
+<script>
+import jddField from "../../field";
+export default {
+  name: "JddSwitch",
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    direction: {
+      type: String,
+      default: "row"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {
+    jddField
+  },
+  data() {
+    return {
+      checkValue: this.value,
+      validateStatus: true,
+      label:this.title
+    };
+  },
+  methods: {},
+  watch: {
+    value(newVal) {
+      this.checkValue = newVal;
+    },
+    checkValue(newVal) {
+      this.$emit("change", newVal);
+      this.$emit("input", newVal);
+    }
+  }
+};
+</script>
+
+

package/src/components/tabs/index.js

@@ -0,0 +1,8 @@
+import Tabs from './src/tabs.vue';
+import TabItem from './src/tab-item.vue';
+import "./index.scss";
+Tabs.install = function(Vue){
+    Vue.component(Tabs.name, Tabs);
+    Vue.component(TabItem.name, TabItem);
+}
+export default Tabs;

package/src/components/tabs/index.scss

@@ -0,0 +1,73 @@
+.jdd-tabs {
+    &-line {
+        height: 50px;
+        background-color: #fff;
+        //padding: 0 16px;
+
+
+    }
+
+
+    &-list {
+        position: relative;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+    }
+
+    &-hasscroll {
+        .jdd-tabs-item {
+            // flex: 0 0 22%;
+            flex: 0 0 auto;
+        }
+    }
+
+    &-list &-active {
+
+        p {
+            color: rgba(51, 51, 51, 1);
+        }
+    }
+    &-active-line {
+        display: inline-block;
+        position: absolute;
+            height: 3px;
+            width: 20px;
+            bottom: 6px;
+            background-color: #333;
+            transition: all .2s ease;
+    }
+    &-item {
+        &:first-child {
+            padding-left: 16px;
+        }
+
+        &:last-child {
+            padding-right: 16px;
+        }
+
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        text-align: center;
+        padding: 0 12px;
+
+        p {
+            font-size: 16px;
+            font-weight: 500;
+            color: rgba(153, 153, 153, 1);
+            line-height: 22px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}

package/src/components/tabs/src/tab-item.vue

@@ -0,0 +1,40 @@
+<template>
+    <div :class="['jdd-tabs-item',parent.value===value?'jdd-tabs-active':'']" @click = "itemSelect" ref="tab">
+        <p>{{content}}</p>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "JddTabItem",
+  props: {
+    value:  {
+
+    },
+    content: [String, Number],
+    midPos:{
+      type: Number,
+      default:0
+    }
+  },
+  inject:{
+     handleClick: {
+        default: 'itemSelect' 
+     },
+     parent: {
+         default: this
+     }
+      
+  },
+  methods: {
+      itemSelect() {
+        //  console.log(typeof this.handleClick)
+          if(typeof this.handleClick === 'function') {
+              this.handleClick(this.value,this.content,this.$refs.tab.offsetLeft);
+          }else{
+              this.$emit("click",this.value,this.content)
+          }
+      }
+  }
+}
+</script>