aaa-ui-test 1.0.0

package/src/components/tabs/src/tabs.vue

@@ -0,0 +1,121 @@
+<template>
+  <div :class="[type==='line'?'jdd-tabs-line':'jdd-tabs-card',needScroll?'jdd-tabs-hasscroll':'','jdd-tabs-wrap']" ref="tab">
+    <div class="jdd-tabs-list" ref="scroll">
+      <slot></slot>
+      <span class="jdd-tabs-active-line" :style="{'left':left+'px'}"></span>   
+    </div>
+  </div>
+</template>
+
+<script>
+import JddTabItem from "./tab-item";
+import { rAF, cancelRaf } from "@/utils/utils";
+export default {
+  name: "JddTabs",
+  props: {
+    value: {
+      default: 0
+    },
+    type: {
+      type: String,
+      default: "line"
+    }
+  },
+  components: {
+    JddTabItem
+  },
+  provide() {
+    return {
+     handleClick: this.itemSelect,
+     parent:this
+    };
+  },
+  data() {
+    return {
+      needScroll: false,
+      left:0,
+      midPos:0,
+      rafHand:null,
+      period:5
+    };
+  },
+  created() {
+    let slotsLength = 0;
+    if(this.$slots.default&&this.$slots.default.length){
+      slotsLength = this.$slots.default.length;
+    }
+    if(slotsLength >= 5){
+      this.needScroll = true;
+    }
+    //let slotsLength = this.$slots.default.length;
+   // console.log()
+  },
+  methods: {
+    computedLeft(offsetLeft) {
+        let activeTab = this.$refs.tab.querySelector(".jdd-tabs-active");
+        let activeLineWidth = this.$refs.tab.querySelector(".jdd-tabs-active-line").offsetWidth;
+        this.left = activeTab.offsetLeft+activeTab.offsetWidth/2-activeLineWidth/2;
+        this.midPos = this.$refs.scroll.offsetWidth/2;
+        //console.log(this.midPos,offsetLeft)
+        let scrollLeft = this.$refs.scroll.scrollLeft;
+        if(this.midPos <= offsetLeft){
+         // this.$refs.scroll.scrollLeft = offsetLeft-this.midPos;
+          this.rafScroll(scrollLeft,offsetLeft-this.midPos)
+        }else {
+          //  this.$refs.scroll.scrollLeft = 0;
+           this.rafScroll(scrollLeft,0)
+        }
+        //if()
+    },
+    itemSelect(value,content,offsetLeft) {
+      if(value !== this.value){
+      this.$emit("input",value);
+      this.$nextTick(() => {
+          this.computedLeft(offsetLeft);
+       // this
+      })
+      }
+      this.$emit("click",value)
+    },
+    rafScroll(begin,end) {
+      
+      if(begin === end){
+        return;
+      }
+      // if(this.rafHand){
+      //   cancelAnimationFrame(this.rafHand);
+      // }
+      //this.rafHand&&;
+      let arr = [];
+      let period = (end-begin)/this.period;
+      for (let index = 0; index < this.period; index++) {
+        arr.push(parseInt(begin+=period))      
+      }
+      arr.push(end)
+      let _this = this;
+     // console.log(arr)
+     // let stop = null;
+      let i  = 0;
+      //console.log(new Date().getTime())
+      function step(timestamp) {
+            
+            if (i < arr.length) {
+            // console.log(arr[i])
+              _this.$refs.scroll.scrollLeft = arr[i];
+              i+=1;
+             rAF(step);
+            }else{
+             //  console.log(new Date().getTime())
+              cancelRaf(_this.rafHand);
+            }
+          
+        }
+
+       _this.rafHand =  rAF(step);
+    }
+  },
+  mounted(){
+    this.computedLeft();    
+  }
+}
+</script>

package/src/components/textarea/index.js

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

package/src/components/textarea/index.scss

@@ -0,0 +1,41 @@
+.jdd-field-control {
+    textarea {
+      appearance: none;
+      width: 100%;
+      padding: 0;
+      border: 0;
+      background-color: transparent;
+      overflow: visible;
+      display: block;
+      resize: none;
+      word-break: break-word;
+      word-wrap: break-word;
+      box-sizing: content-box;
+      color: #333333;
+      letter-spacing: 0;
+      text-align: right;
+      line-height: 22px;
+      max-height: 66px;
+      &::placeholder {
+        font-size: 16px;
+        color: #cccccc;
+      }
+    }
+  }
+  .jdd-field-inline {
+    textarea {
+      line-height: 22px;
+      font-size: 16px;
+      font-family: PingFangSC-Regular;
+    }
+    .jdd-field-textarea {
+      padding: 16px 0px;
+    }
+  }
+  .jdd-field {
+    textarea {
+      font-family: PingFangSC-Medium;
+      font-size: 18px;
+      text-align: left;
+    }
+  }

package/src/components/textarea/src/textarea.vue

@@ -0,0 +1,140 @@
+<template>
+  <jdd-field
+    :label="label"
+    @label-click="onLabelclick"
+    :isFocus="isFocus"
+    :direction="direction"
+    :border="border"
+  >
+    <div
+      class="jdd-field-control jdd-field-textarea"
+      @click="onClick"
+      :style="{'paddingBottom':paddingBottom+'px'}"
+    >
+      <textarea
+        rows="1"
+        :placeholder="getPlaceholder"
+        v-model="inputValue"
+        @input="onInput"
+        @change="onChange"
+        @propertychange="onChange"
+        @blur="onBlur"
+        @focus="onFocus"
+        v-bind="$attrs"
+        ref="textarea"
+      ></textarea>
+    </div>
+  </jdd-field>
+</template>
+<script>
+import jddField from "../../field";
+export default {
+  name: "JddTextarea",
+  inheritAttrs:false,
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    title:{
+      type: String,
+      default: ""
+    },
+    direction: {
+      type: String,
+      default: "row"
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    border: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {
+    jddField
+  },
+  data() {
+    return {
+      checkValue: this.value,
+      label: this.title,
+      isFocus: false,
+      inputValue: this.value,
+      paddingBottom: 0
+    };
+  },
+  methods: {
+    onLabelclick() {
+      //if(!this.value)
+      this.isFocus = true;
+      this.$refs.textarea.focus();
+    },
+    onInput() {
+      this.resizeHeight();
+      this.$emit("input", this.inputValue);
+    },
+    onClick() {
+      this.$refs.textarea.focus();
+      this.isFocus = true;
+    },
+    onFocus() {},
+    onBlur() {
+      let textareaDom = this.$refs.textarea;
+      if(!this.inputValue){
+          this.isFocus = false;   
+          textareaDom.style.height = "0px";    
+      }
+      textareaDom.scrollTop = 0;
+    },
+    onChange() {
+      this.resizeHeight();
+      this.$emit("input", this.inputValue);
+    },
+    resizeHeight() {
+      //console.log(1)
+      //console.log(this.$refs.textarea.scrollHeight)
+      let textareaDom = this.$refs.textarea;
+      let scrollHeight = textareaDom.scrollHeight;
+      if (scrollHeight > 30 && this.direction === "column") {
+        this.paddingBottom = 12;
+      } else if(this.direction==='row'){
+        this.paddingBottom = 16;
+      }
+      var height = 0,
+        style = textareaDom.style;
+      var minHeight = 22;
+      textareaDom.style.height = minHeight + "px";
+      if (textareaDom.scrollHeight > minHeight) {
+        height = textareaDom.scrollHeight;
+        style.height = height + "px";
+      }
+    }
+  },
+  created(){
+    if(this.value){
+      this.isFocus = true;
+    }
+  },
+  computed: {
+    getPlaceholder() {
+      return this.direction !== "column" && this.placeholder;
+    }
+  },
+  mounted(){
+    this.resizeHeight()
+  },
+  watch: {
+    value(newVal) {
+      this.checkValue = newVal;
+    },
+    checkValue(newVal) {
+      this.$emit("change", newVal);
+      this.$emit("input", newVal);
+    }
+  }
+};
+</script>
+
+

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toast renders the correct markup 1`] = `<div class="jdd-toast  jdd-toast-in jdd-toast-top"><span>我是测试信息，测试信息</span></div>`;

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

@@ -0,0 +1,25 @@
+// Import the mount() method from the test utils
+// and the component you want to test
+import { mount, createWrapper} from '@vue/test-utils'
+import Toast from '..'
+import flushPromises  from "@/../test/utils.js";
+
+describe('Toast', () => {
+  // Now mount the component and you have the wrapper
+  const baseMsg = "我是测试信息，测试信息";
+  const toast = Toast(baseMsg);
+  const wrapper = createWrapper(toast)
+
+  it('renders the correct markup', async () => {
+    //await flushPromises()
+    //console.log(toast.$el.outerHTML)
+    expect(wrapper.html()).toMatchSnapshot();
+  
+  })
+  it('has a span class', () => {
+    //expect(toast.$el.outerHTML.contains('span')).toBe(true)
+    expect(wrapper.classes()).toContain('jdd-toast-top');
+    expect(wrapper.find("span").text()).toBe(baseMsg);
+    //expect(wrapper.classes("jdd-toast jdd-toast-top")).toBe(true);
+  })
+})

package/src/components/toast/index.js

@@ -0,0 +1,53 @@
+import Vue from "vue"
+import ToastComponent from './src/toast.vue'
+
+import "./index.scss"
+// const Toast = {};
+
+// // 注册Toast
+// Toast.install = function (Vue) {
+  
+    // 生成一个Vue的子类
+    // 同时这个子类也就是组件
+    const ToastConstructor = Vue.extend(ToastComponent)
+
+    let toastPool = [];
+
+    // 生成一个该子类的实例
+    let getAnInstance = () => {
+      if (toastPool.length > 0) {
+        let instance = toastPool[0];
+        toastPool.splice(0, 1);
+        return instance;
+      }
+      return new ToastConstructor({
+        el: document.createElement('div')
+      });
+    };
+
+    // 通过Vue的原型注册一个方法
+    // 让所有实例共享这个方法 
+   let Toast =  Vue.prototype.$toast = (msg,bgcolor) => {
+
+      if(document.querySelector('.jdd-toast')){
+        document.body.removeChild(document.querySelector('.jdd-toast'));  
+      }
+      
+      let instance = getAnInstance();
+      instance.message = msg;
+      if(bgcolor){
+        instance.bgcolor = bgcolor;  
+      }
+      
+      instance.show = true;
+
+      document.body.appendChild(instance.$el);
+      return instance;
+      
+    }
+    Toast.install = function (Vue) {
+    
+    }
+//}
+
+export default Toast

package/src/components/toast/index.scss

@@ -0,0 +1,102 @@
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+
+.jdd-toast {
+  position: fixed;
+	left: 0;
+	width: 100%;
+	text-align: center;
+	z-index: $z-index-toast;
+	opacity: 1;
+
+  &.jdd-toast-top{
+    //transform: translate3d(0,-100%,0);
+    top: -100%;
+
+    &.jdd-toast-in{
+      animation: jddToastTopIn 3.8s   ease-in-out;
+    }
+  }
+
+  &.jdd-toast-bottom{
+
+    //transform: translate3d(0,100%,0);
+    bottom: -100%;
+   //bottom:0;
+
+    &.jdd-toast-in{
+      animation: jddToastBottomIn 3.8s   ease-in-out;
+    }
+
+  }
+}
+
+
+.jdd-toast span {
+	margin: 10px 20px;
+	display: inline-block;
+	padding: 10px 20px;
+	line-height: 20px;
+	font-family: PingFangSC-Medium;
+	font-size: 14px;
+	color: #fff;
+	background: #4D7BFE;
+	border-radius: 100px;
+	box-shadow: 0 0 7px 0 rgba(3,6,14,.2)
+}
+
+
+
+@keyframes jddToastBottomIn {
+    0% {
+     // opacity: 0;
+      bottom:0;
+    }
+    // 5%{
+    //  // opacity: 0;
+    //   bottom:0;
+    // }
+    10% {
+     // opacity: 1;
+      bottom:96px;
+    }
+    90%{
+     // opacity: 1;
+      bottom:96px;
+    }
+    // 90%{
+    // //  opacity: 0;
+    // }
+    100%{
+      bottom:0px;
+     // opacity: 0;
+    }
+}
+
+
+
+@keyframes jddToastTopIn {
+  0% {
+    // opacity: 0;
+     bottom:0;
+   }
+   // 5%{
+   //  // opacity: 0;
+   //   bottom:0;
+   // }
+   10% {
+    // opacity: 1;
+     top:60px;
+   }
+   90%{
+    // opacity: 1;
+     top:60px;
+   }
+   // 90%{
+   // //  opacity: 0;
+   // }
+   100%{
+     top:0px;
+    // opacity: 0;
+   }
+}

package/src/components/toast/src/toast.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="jdd-toast " v-if="show" :class="{'jdd-toast-in':show,'jdd-toast-bottom': android,'jdd-toast-top': !android}">
+    <span :style="{background:bgcolor}">{{message}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JddToast',
+  data() {
+    return {
+      show: false,
+      android:navigator.userAgent.toLowerCase().match(/android/i)=="android" ? true : false,
+      message: "",
+      bgcolor:"",
+    };
+  }
+};
+</script>

package/src/index.js

@@ -0,0 +1,87 @@
+import List from './components/list'
+import ListItem from './components/list-item'
+
+import Button from './components/button'
+import ButtonGroup from './components/button-group'
+
+import Toast from './components/toast'
+import Loading from './components/loading'
+
+import Mask from './components/mask'
+import Overlay from './components/overlay'
+import Notice from './components/notice'
+
+import DateSelecter from './components/date-selecter'
+
+import Dialog from './components/dialog'
+
+import Input from './components/input'
+import Select from './components/select'
+import Switch from './components/switch'
+import Textarea from './components/textarea'
+import Checkbox from './components/checkbox'
+import Tabs from './components/tabs'
+import Amount from './components/amount'
+//import Swipe from './components/swipe'
+import Swiper from './components/swiper'
+import Default from './components/default'
+
+
+import Popup from './components/popup'
+import Radio from './components/radio'
+import PopupHeader from './components/popup-header'
+
+import Address from './components/address'
+
+const components = {
+    List,
+    ListItem,
+    Button,
+    ButtonGroup,
+    Mask,
+    Notice,
+    Overlay,
+    DateSelecter,
+    Input,
+    Select,
+    Switch,
+    Textarea,
+    Popup,
+    Radio,
+    PopupHeader,
+    Address,
+    Toast,
+    Tabs,
+    Checkbox,
+    Amount,
+   // Swipe,
+    Default,
+    Swiper
+}
+
+function install(Vue) {
+    // register components
+    // debugger;
+    for (var item in components) {
+        if (components[item].name) {
+           // Vue.component(components[item].name, components[item])
+            Vue.use(components[item])
+        }
+    }
+    //Vue.use(Toast);
+    //Vue.use(Loading);
+    //Vue.use(Dialog)
+    // return {
+    //     hello:123
+    // }
+
+}
+if (typeof window !== 'undefined' && window.Vue) {
+    window.Vue.use(install)
+}
+let modules = {
+    install:install,
+    ...components
+}
+export default modules;
+

package/src/mixins/emitter.js

@@ -0,0 +1,33 @@
+function broadcast(componentName, eventName, params) {
+    this.$children.forEach(child => {
+        const name = child.$options.name;
+
+        if (name === componentName) {
+            child.$emit.apply(child, [eventName].concat(params));
+        } else {
+            broadcast.apply(child, [componentName, eventName].concat([params]));
+        }
+    });
+}
+export default {
+    methods: {
+        dispatch(componentName, eventName, params) {
+            let parent = this.$parent || this.$root;
+            let name = parent.$options.name;
+
+            while (parent && (!name || name !== componentName)) {
+                parent = parent.$parent;
+
+                if (parent) {
+                    name = parent.$options.name;
+                }
+            }
+            if (parent) {
+                parent.$emit.apply(parent, [eventName].concat(params));
+            }
+        },
+        broadcast(componentName, eventName, params) {
+            broadcast.call(this, componentName, eventName, params);
+        }
+    }
+};

package/src/mixins/visible.js

@@ -0,0 +1,23 @@
+const EVENT_UPDATE = 'update:visible';
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isVisible: false
+    }
+  },
+  watch: {
+    isVisible(newVal) {
+      this.$emit(EVENT_UPDATE , newVal)
+    },
+    visible(newVal) {
+        this.isVisible = newVal;
+    }
+  }
+}

package/src/utils/clickoutside.js

@@ -0,0 +1,42 @@
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-clickoutside="handleClose">
+ * ```
+ */
+const clickoutsideContext = '@@clickoutsideContext';
+
+export default {
+  bind(el, binding, vnode) {
+    const documentHandler = function(e) {
+      if (vnode.context && !el.contains(e.target)) {
+        vnode.context[el[clickoutsideContext].methodName]();
+      }
+    };
+    el[clickoutsideContext] = {
+      documentHandler,
+      methodName: binding.expression,
+      arg: binding.arg || 'click'
+    };
+    document.addEventListener(el[clickoutsideContext].arg, documentHandler);
+  },
+
+  update(el, binding) {
+    el[clickoutsideContext].methodName = binding.expression;
+  },
+
+  unbind(el) {
+    document.removeEventListener(
+      el[clickoutsideContext].arg,
+      el[clickoutsideContext].documentHandler);
+  },
+
+  install(Vue) {
+    Vue.directive('clickoutside', {
+      bind: this.bind,
+      unbind: this.unbind
+    });
+  }
+};