aaa-ui-test 1.0.0

package/src/components/picker/index.scss

@@ -0,0 +1,49 @@
+@charset "utf-8";
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+
+.jdd-select-date-scroller dl {
+	margin-top: 45px;
+	width: 100%
+}
+
+.jdd-select-date-scroller dl dd.focus {
+	font-size: 18px;
+	color: #4D7BFE;
+}
+
+.jdd-select-date-scroller dd {
+	font-family: PingFangSC-Medium;
+	width: 100%;
+	height: 45px;
+	line-height: 45px
+}
+
+.jdd-select-date-btns li {
+	height: 50px;
+	line-height: 50px
+}
+
+.jdd-select-date-scroller-n dl {
+	margin-top: 100px;
+	width: 100%;
+}
+
+.jdd-select-date-scroller-n dl dd.focus {
+	font-size: 18px;
+	color: #4D7BFE;
+}
+
+.jdd-select-date-scroller-n dd {
+	font-family: PingFangSC-Medium;
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	color: #999;
+	transition: all .2s ease;
+}
+
+.jdd-select-date-btns-n li {
+	height: 60px;
+	line-height: 60px
+}

package/src/components/picker/src/picker.vue

@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <dl
+      ref="dl"
+      @touchstart.stop.prevent="touchstart"
+      @touchmove.stop.prevent="touchmove"
+      @touchend.stop.prevent="touchend"
+    >
+      <dd v-for="(item,ind) in data" :key="ind" :class="{focus:index == ind}">{{item}}</dd>
+    </dl>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "JddPicker",
+  props: {
+    type: {
+      type: String
+    },
+    // change:{
+    //   type:Function
+    // },
+    outindex: {
+      type: Number,
+      default: 2
+    },
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      currentTop: 0,
+      moveTop: 0,
+      moveDis: 0,
+      index: this.outindex,
+      height: 50,
+      childrenLength: 0
+    };
+  },
+  mounted() {
+    // debugger;
+    // this.renderPosition(this.index);
+
+    var top = -(this.index * this.height);
+    var style =
+      "-webkit-transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transition-duration: 300ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 300ms; transform: translate3d(0px, " +
+      top +
+      "px,0px);-webkit-transform: translate3d(0px, " +
+      top +
+      "px,0px)";
+   // this.$refs.dl.style = style;
+    // this.$refs.dl.style.transform = "translate3d(0px, " +
+    //     top +
+    //     "px,0px)";
+        this.setPos(this.$refs.dl,top);
+
+    //var childrenes = this.$refs.dl.parentNode.parentNode.children;
+
+    // for(var i=0; i<childrenes.length; i++){
+
+    //     childrenes[i].style.width = 100/childrenes.length + '%';
+    // }
+
+    // this.$nextTick(()=>{
+    //   this.setIndex(this.$refs.dl);
+    // })
+  },
+  updated() {
+    this.renderPosition(this.outindex);
+  },
+  watch: {
+    data(newVal) {
+      this.index = Math.min(this.index, newVal.length - 1);
+      this.$emit("update:outindex", this.index);
+    }
+  },
+  methods: {
+    setPos(dom,top) {
+      dom.style["-webkit-transition-timing-function"] = "cubic-bezier(0.1, 0.57, 0.1, 1)";
+      dom.style["-webkit-transition-duration"] = "300ms";
+      dom.style["transition-timing-function"] = "cubic-bezier(0.1, 0.57, 0.1, 1)";
+      dom.style["transition-duration"] = "300ms";
+      dom.style["-webkit-transform"] = "translate3d(0px, " +top +"px,0px)";
+      dom.style["transform"] = "translate3d(0px, " +top +"px,0px)";
+      //dom.style
+    },
+    renderPosition: function() {
+      this.index =
+        this.index >= this.data.length ? this.data.length - 1 : this.index;
+      var top = -(this.index * this.height);
+      var style =
+        "-webkit-transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transition-duration: 300ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 300ms; transform: translate3d(0px, " +
+        top +
+        "px,0px);-webkit-transform: translate3d(0px, " +
+        top +
+        "px,0px)";
+      //this.$refs.dl.style = style;
+        //  this.$refs.dl.style.transform = "translate3d(0px, " +
+        // top +
+        // "px,0px)";
+        this.setPos(this.$refs.dl,top)
+
+      // var childrenes = this.$refs.dl.parentNode.parentNode.children;
+
+      // for(var i=0; i<childrenes.length; i++){
+
+      //     childrenes[i].style.width = 100/childrenes.length + '%';
+      // }
+
+      // this.$nextTick(()=>{
+      //   this.setIndex(this.$refs.dl);
+      // })
+    },
+    touchstart: function(ev) {
+      this.childrenLength = ev.target.parentNode.children.length;
+      this.currentTop = ev.targetTouches[0].clientY;
+      // console.log( 'currentTop:' + this.currentTop );
+    },
+    touchmove: function(ev) {
+      this.moveTop = ev.targetTouches[0].clientY;
+      this.moveDis = Number(this.moveTop) - Number(this.currentTop);
+
+      var top = -(this.index * this.height) + this.moveDis;
+
+      var style =
+        "-webkit-transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transition-duration: 300ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 300ms; transform: translate3d(0px, " +
+        top +
+        "px,0px);-webkit-transform: translate3d(0px, " +
+        top +
+        "px,0px)";
+     // ev.target.parentNode.style = style;
+      // ev.target.parentNode.style.transform = "translate3d(0px, " +
+      //   top +
+      //   "px,0px)";
+        this.setPos(ev.target.parentNode,top)
+
+      // console.log('moveTop:' + this.moveTop);
+      // console.log('moveDis:' + this.moveDis);
+    },
+    touchend: function(ev) {
+      if (this.moveDis >= this.height / 2) {
+        let num = Math.floor(this.moveDis / this.height) || 1;
+        this.index = this.index - num;
+
+        if (this.index < 1) {
+          this.index = 0;
+        }
+      }
+
+      if (this.moveDis <= -this.height / 2) {
+        let num = -Math.floor(this.moveDis / this.height) || 1;
+
+        this.index = this.index + num;
+        if (this.index > this.childrenLength - 1) {
+          this.index = this.childrenLength - 1;
+        }
+      }
+
+      var top = -(this.index * this.height);
+
+      var style =
+        "-webkit-transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transition-duration: 300ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 300ms; transform: translate3d(0px, " +
+        top +
+        "px,0px);-webkit-transform: translate3d(0px, " +
+        top +
+        "px,0px)";
+
+      //ev.target.parentNode.style = style;
+        //  ev.target.parentNode.style.transform = "translate3d(0px, " +
+        // top +
+        // "px,0px)";
+         this.setPos(ev.target.parentNode,top)
+      //this.setIndex(ev.target.parentNode);
+
+      // debugger;
+      this.$emit("update:outindex", this.index);
+      var changeObj = {};
+      changeObj["type"] = this.type;
+      changeObj["index"] = this.index;
+      this.$emit("change", changeObj);
+      // this.$props.change && this.$props.change(changeObj);
+    }
+    // setIndex: function(scrollBox){
+    //   var childrens = scrollBox.children;
+    //  // let exist = false;
+    //   for(var i=0;i<childrens.length;i++)
+    //   {
+    //     if(i == this.index){
+    //       exist = true;
+    //       childrens[i].className = 'focus';
+    //     }
+    //     else{
+    //       childrens[i].className = '';
+    //     }
+
+    //   }
+    // }
+  }
+};
+</script>

package/src/components/popup/index.js

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

package/src/components/popup/index.scss

@@ -0,0 +1,79 @@
+.jdd-popup {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    // transition: transform .3s ease;
+    z-index: 1001;
+    background: #ffffff;
+    border-radius: 8px 8px 0px 0px;
+    max-height: 80%;
+    padding-bottom: constant(safe-area-inset-bottom) !important;
+    padding-bottom: env(safe-area-inset-bottom) !important;
+
+    .jdd-popup-content {
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+.jdd-popup-wrap {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1001;
+}
+.jdd-fade-bottom-enter-active {
+    animation-delay: .3s;
+    .jdd-popup {
+        //animation: jdd-popup-leave .3s ease-in both;
+        animation: jdd-popup-enter .3s;
+    }
+}
+@keyframes jdd-popup-enter {
+    0% {
+        opacity: 1;
+        transform: translate3d(0, 100%, 0);
+    }
+
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+
+}
+
+// .jdd-fade-bottom-enter{
+//     // transition-duration: 300ms;
+
+//     .jdd-popup {
+//         //animation: jdd-popup-leave .3s ease-in both;
+//         transform: translate3d(0, 100%, 0);
+//         opacity: 0;
+//     }
+// }
+
+.jdd-fade-bottom-leave-active {
+    // transition-duration: 300ms;
+    animation-delay: .3s;
+
+    .jdd-popup {
+        animation: jdd-popup-leave .3s ease-in both;
+    }
+}
+
+@keyframes jdd-popup-leave {
+    0% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translate3d(0, 100%, 0);
+        opacity: 0;
+    }
+
+}

package/src/components/popup/src/popup.vue

@@ -0,0 +1,88 @@
+<template>
+  <transition name="jdd-fade-bottom" appear>
+    <div class="jdd-popup-wrap" v-show="visible">
+      <jdd-mask v-model="getMask" @onClick="maskClick"></jdd-mask>
+      <div class="jdd-popup" :style="{height:popHeight}">
+        <slot name="popup-header">
+          <div class="jdd-popup-header" v-show="mainTitle">
+            <div class="jdd-popup-main-title">
+              <p>{{mainTitle}}</p>
+              <span @click.stop="handleClose"></span>
+            </div>
+            <p v-show="subTitle" class="jdd-popup-sub-title">{{subTitle}}</p>
+          </div>
+        </slot>
+        <div class="jdd-popup-content">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import JddMask from "../../mask";
+
+export default {
+  name: "JddPopup",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    popHeight: {
+      type: String,
+      default: ""
+    },
+    mainTitle: {
+      type: String,
+      default: ""
+    },
+    subTitle: {
+      type: String,
+      default: ""
+    },
+    showMask: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {};
+  },
+  components: {
+    JddMask
+  },
+  mounted() {
+    // const body = document.querySelector("body");
+    //将body放在
+    document.querySelector("body").appendChild(this.$el);
+  },
+  provide: function() {
+    return {
+      closeMask: this.handleClose
+    };
+  },
+  computed: {
+    getMask(){
+      return this.visible && this.showMask;
+    }
+  },
+  methods: {
+    maskClick() {
+      this.$emit("update:visible", false);
+      // this.showModal = false;
+    },
+    handleClose() {
+      this.$emit("update:visible", false);
+    }
+  },
+  destroyed() {
+    //remove child when components destroyed
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+  }
+};
+</script>
+
+

package/src/components/popup-header/index.js

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

package/src/components/popup-header/index.scss

@@ -0,0 +1,45 @@
+@charset "utf-8";
+@import "~@/assets/css/common/_mixin.scss";
+.jdd-popup-header {
+    @include jdd-border-bottom();
+    flex-shrink: 0;
+    
+    display: flex;
+    flex-direction: column;
+    padding: 20px 16px;
+    position: relative;
+    .jdd-popup-main-title {
+      display: flex;
+      line-height: 25px;
+      p {
+        font-family: PingFangSC-Medium;
+        font-size: 18px;
+        color: #333333;
+        letter-spacing: 0;
+        text-align: center;
+        flex: 1;
+      }
+      span {
+        position: absolute;
+        right: 0px;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+          display: block;
+          width: 44px;
+          height: 44px;
+          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAAAXNSR0IArs4c6QAAAu9JREFUeAHt2r+LE0EUwPHLXqWlRQohhYWFIASSf+C82s5CQWut7QX9F+xTKni9licWlvlhQBRsUxmuucoiv3wPMse47ia3k7mdF+67EHay2X0788nL290hBwcsCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAALGBMbj8f3YXZKYdyaTyY3YcavGy6oeEHv/wWDwZjabfRsOh09ixR6NRnfn8/nX6XT6MTVyI9agQuIo7mq1er0+dpFl2bNOp/MhJJY7RnGXy+UXiXtbtzUajc/NZvNhq9X64/apc50sg7UsCMIrb7CHAvNul0zO42psOcexZPIL7zy1NpMBt9vt75qxMtqFN+Jg5CLcddye/CreeueotZm0ROhINWM1c6V56I28UrnYhNvtdp9LmVh5sWttJgfW0e6CbBlXx2YCOBTZOq4p4KrI+4BrDviyyPuCaxJ4G7JcsAb+fa7uv156qS9oriP+2kwN9jul7Q0XvnMBvpXb3ySu9tEssHauBFk/8hezuNpJ08DawS3IpnG1/8me5PTkl1m05soT33l+X9m+lO2nKR8i8n0qem8a2N0tFNRcnWPI9AlQM7xoYFa2mQV2uG5WzIFp5rq2rIPnLrwYV9o0CVyGKxI9AX4q6/8miGTq8/GVSgUGNwe8CVfvc3W+uGgWTjL9vUVkU3cR23D9C1rJ3cVCM1y+iJPAhIt+mBngKrhOYR+QTZSIEFxF1nJRVJMtlYvkGRyK67JY11p7FVWa/0zaWygXSYFj4Dpoq8jJSoT+byHmrJhe2MrKhdTqR+6LqHudDFj+C/Fbfta/cgPeaW6hBPlMzvMjd57a3iYtEf1+/6aM9JO8juS1E64cf7F45eJMsvqBwP+8+PC6NRRZQF5KlkX9srUsSNx7182T8SKAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAK2Bf4CoKj4d3I8GvAAAAAASUVORK5CYII=);
+          background-size: 100% auto;
+      }
+    }
+    .jdd-popup-sub-title {
+      font-family: PingFangSC-Regular;
+      font-size: 13px;
+      color: #999999;
+      text-align: center;
+      line-height: 18px;
+      margin-bottom: 3px;
+      padding-right: 18px;
+    }
+  }
+  

package/src/components/popup-header/src/popup-header.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="jdd-popup-header">
+    <div class="jdd-popup-main-title">
+      <p :style="{'text-align':textAlign}">{{mainTitle}}</p>
+      <span @click.stop="closePopup"></span>
+    </div>
+    <p v-show="subTitle" class="jdd-popup-sub-title" :style="{'text-align':textAlign}">{{subTitle}}</p>
+  </div>
+</template>
+<script>
+export default {
+  name: "JddPopupHeader",
+  inject:['closeMask'],
+  props: {
+    mainTitle: {
+      type: String,
+      default: ""
+    },
+    subTitle: {
+      type: String,
+      default: ""
+    },
+    textAlign:{
+      type: String,
+      default: "center"
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    closePopup(){
+      this.closeMask();
+      this.$emit("close-pop");
+    }
+  }
+}
+</script>
+
+

package/src/components/radio/index.js

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

package/src/components/radio/index.scss

@@ -0,0 +1,19 @@
+.jdd-radio-item {
+    position: relative;
+    .jdd-radio-check {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 16px;
+      width: 16px;
+      height: 16px;
+      margin: auto 0;
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAABPif9NfP9Qf/9NfP9NfP9NfP9Ne/9Ne/9Tf/9Qgf9ZgP9ohf9OfP9Ne/9Oe/9Ne/9NfP9NfP9Nff9Nff9NfP9Off9Off9NfP9Rff9QgP9Oe/9OfP9Pe/9OfP9Ne/8dQQxFAAAAH3RSTlMADcYf4vik9N4nGhQJ7+rVza+Yi3BjWExCOTC6jH59kbkAigAAAKZJREFUOMvV0EkOgzAMQFEgATIwz9DB979l66hWFUfJuvUGrPeFQrK/n1yn3Q5SpNz0AMrEXSh4TxV1LdFvTcyvDn2M+tmmv3/U6BOdJue+l+gzuSxYsTl/kEsAv1gBZ6G1AvCLxfn6ve/CL564lhutQTE73wmDYsLX+iBixedA7UnACzvio7sCp8Jdn9QhU4GjhA+86A0Hvxhs1LFwP5Iq7k32m/MCVqERH4/NPOsAAAAASUVORK5CYII=) 0 0 no-repeat;
+      background-size: 100% auto;
+    }
+    .jdd-list-item {
+      &:active {
+        background-color: #F2F2F2;
+      }
+    }
+  }

package/src/components/radio/src/radio.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="jdd-radio">
+    <div v-for="item in options" class="jdd-radio-item" :class="{'jdd-radio-item-active':item[selectField]===value}" @click="updateValue(item)" :key="item[selectField]">
+      <slot :slot-props="item"></slot>
+      <span class="jdd-radio-check" v-show="item[selectField]===value"></span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "JddRadio",
+  props: {
+    mainTitle: {
+      type: String,
+      default: ""
+    },
+    subTitle: {
+      type: String,
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: function(){
+        return []
+      }
+    },
+    value:{
+      default: "" 
+    },
+    selectField:{
+      type: String,
+      default: "value"  
+    }
+  },
+  data() {
+    return {
+      validateStatus: true,
+      label: this.title
+    };
+  },
+  methods: {
+      updateValue(item){
+          this.$emit("input",item[this.selectField]);
+          this.$emit("select-item",item);
+          
+      }
+  }
+};
+</script>
+
+

package/src/components/select/index.js

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

package/src/components/select/index.scss

@@ -0,0 +1,51 @@
+.jdd-select-icon {
+    &:after {
+      content: "";
+      display: block;
+      height: 12px;
+      width: 12px;
+      right: 16px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto 0;
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAANZJREFUSA3N1LEVwiAQgOFAJnAiW0vr9NDoCnaOEAugs2QKt3AMNwDvChqfXA64IjR5L/D+j+SFTNMeh/f+yN2X5i4s65xza875FUK4lHvUtRnQWr8xmFJaOYii9NochhHAeQCvxphHbW0XgDEu0g1wkSGAgwwDW4gIQCFiQA0RBf4hzQcNI9SA8/GB+YRr4MQfRAH4jSxKqSe0NVxv1tq72Csqcdj1XOL4FCJALS4CUPFhYCs+BHDi3QA33gW0xBFoPgfwCZ5+P0UMiY0Y4wxPcRYLjoa+872d9nrgfKMAAAAASUVORK5CYII=)
+        no-repeat;
+      background-size: cover;
+    }
+  }
+  .jdd-field {
+    .jdd-select-show {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto 0;
+      right: 30px;
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      font-family: PingFangSC-Medium;
+      line-height: 22px;
+      padding-bottom: 14px;
+      letter-spacing: 0;
+      padding-right: 12px;
+    }
+    .jdd-field-hasvalue {
+      position: relative;
+      right: 0;
+    }
+  }
+  
+  .jdd-field-inline {
+    .jdd-field-select {
+      display: flex;
+      align-items: center;
+    }
+    .jdd-select-show {
+      flex: 1;
+      padding: 16px 16px 16px 0;
+      font-size: 16px;
+      text-align: right;
+      font-family: PingFangSC-Regular;
+    }
+  }