aaa-ui-test 1.0.0

package/src/components/amount/src/amount.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="jdd-amount-wrap">
+    <span class="jdd-amount-icon">¥</span>
+    <p :class="[{'jdd-amount-hasvalue':hasValue},'jdd-amount-edit']" @click="onClick">
+      <span class="jdd-amount-value">{{getValue}}</span>
+      <span class="jdd-amount-shine" v-show="focus"></span>
+      <div class="jdd-amount-unit-wrap"  v-show="getUnit" :style="{'left':left+'px'}"><span class="jdd-amount-line"></span><span class="jdd-amount-unit">{{getUnit}}</span></div>
+    <span class="jdd-amount-slot">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: "JddAmount",
+  props: {
+    value: {},
+    showUnit: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: "请输入金额"
+    },
+    focus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: {
+    handleCheck: {
+      default: "itemSelect"
+    },
+    parent: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      checkValue: this.value,
+      validateStatus: true,
+      label: this.title,
+      left:0
+    };
+  },
+  created() {
+    if (this.isGroup()) {
+      this.checkValue = this.parent.value;
+    } else {
+      this.checkValue = this.value;
+    }
+  },
+  computed: {
+    getUnit() {
+      let unit = "";
+      if (this.showUnit) {
+        if (this.value >= 100000&& this.value < 1000000) {
+          unit = "十万";
+        } else if (this.value >= 10000 && this.value < 100000) {
+          unit = "万";
+        } else if (this.value >= 1000 && this.value < 10000) {
+          unit = "千";
+        } else if (this.value >= 100 && this.value < 1000) {
+          unit = "百";
+        } else if (this.value >= 1000000 && this.value < 10000000){
+          unit = "百万";
+        } else if (this.value >= 10000000 && this.value < 100000000){
+          unit = "千万";
+        } else if (this.value >= 10000000 ){
+          unit = "亿";
+        }
+      }
+      return unit;
+    },
+    getFillColor() {
+      let finalStyle = "";
+      if (!this.disabled && !this.isChecked) {
+        return this.fillColor;
+      }
+    },
+    isChecked() {
+      if (this.isGroup()) {
+        return this.name === this.parent.value;
+      } else {
+        return this.checkValue;
+      }
+    },
+    getValue() {
+      return this.focus
+        ? this.value
+        : this.value || this.value === 0
+        ? this.value
+        : this.placeholder;
+      // return this.value|| this.value===0?this.value:this.placeholder;
+    },
+    hasValue() {
+      return this.value || this.value === 0 || this.focus;
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit("update:focus", true);
+      this.$emit("click");
+    },
+    isGroup() {
+      return this.parent ? true : false;
+    },
+    handleChange() {
+      // if(this.isGroup()){
+      // }else{
+      //   this.checkValue =
+      // }
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.checkValue = newVal;
+      this.$nextTick(() => {
+        if(newVal.length ===1) {
+         this.left =  document.querySelector(".jdd-amount-value").offsetLeft+document.querySelector(".jdd-amount-value").offsetWidth;
+        }
+      })
+      
+    }
+    // "parent.value": function(newVal) {
+    //   //if(this.name === newVal)
+    //   this.checkValue = this.name === newVal ? true : false;
+    // },
+    // checkValue(newVal) {
+    //   if (typeof this.handleCheck === "function") {
+    //     if (newVal) this.handleCheck(this.name);
+    //     else this.handleCheck("");
+    //   } else {
+    //     this.$emit("change", newVal);
+    //     this.$emit("input", newVal);
+    //   }
+    // }
+  }
+};
+</script>
+
+

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button has been called 1`] = `<span class="jdd-button jdd-button-sick is-disabled jdd-button-large"><!----></span>`;
+
+exports[`Button rander sick correct 1`] = `<span class="jdd-button jdd-button-sick jdd-button-large"><!----></span>`;
+
+exports[`Button renders the correct markup 1`] = `<span class="jdd-button jdd-button-default jdd-button-large"><!----></span>`;

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

@@ -0,0 +1,39 @@
+// Import the mount() method from the test utils
+// and the component you want to test
+import { mount } from '@vue/test-utils'
+import Button from '../index'
+
+describe('Button', () => {
+  // Now mount the component and you have the wrapper
+  const wrapper = mount(Button)
+  const mockFn = jest.fn();
+  wrapper.vm.$on('click', mockFn);
+
+  it('renders the correct markup', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  
+  })
+  it('has a span class', () => {
+    expect(wrapper.contains('span')).toBe(true)
+    expect(wrapper.classes("jdd-button")).toBe(true)
+   
+  })
+  // it's also easy to check for the existence of elements
+  it('rander sick correct', () => {
+    wrapper.setProps({ type: 'sick' })
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.classes('jdd-button-sick')).toBe(true)
+    wrapper.find('span').trigger('click');
+    expect(mockFn).toBeCalled();
+    expect(mockFn).toHaveBeenCalledTimes(1)
+  })
+
+  it('has been called', () => {
+    wrapper.setProps({ "disabled": true })
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.classes('is-disabled')).toBe(true)
+    wrapper.find('span').trigger('click');
+    expect(mockFn).toBeCalled();
+    expect(mockFn).toHaveBeenCalledTimes(1);
+  })
+})

package/src/components/button/index.js

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

package/src/components/button/index.scss

@@ -0,0 +1,83 @@
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+
+
+.jdd-button{
+  display: inline-block;  
+  font-family: PingFangSC-Medium; 
+  text-align: center;
+  font-size: 18px;
+  color:#fff;
+  margin:0;
+  border-radius: 2px;
+  &-large{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+  }
+  &-medium{
+    height: 50px;
+    line-height: 50px;
+    padding: 0 84px;
+    width: auto;
+  }
+  &-small{
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    width: 80px;
+    border-radius: 30px;
+    background: #fff;
+    
+  }
+  &-default{
+    background: #4D7BFE; 
+  }
+  &-default:active{
+    background:#4B84E1;
+  }
+  &-disabled{
+    background: #ccc;
+  }
+  &-sick{
+    background: #B9D1F8;
+  }
+  &-short{
+   
+    background: #4D7BFE;
+    &:active{
+      background:#4B84E1;
+    }
+  }
+  &-white.jdd-button-large{
+    background: #fff;  
+     @include jdd-border-1px(#DDDDDD,2px);
+    color: #4D7BFE;
+  }
+  &-white.jdd-button-small{
+    background: #fff;  
+    @include jdd-border-1px(#CCC,15px);
+  }
+  &-white:active{
+    background:#f2f2f2;
+  }
+
+  &-white-normal.jdd-button-large{
+    background: #fff;  
+    @include jdd-border-1px(#DDDDDD,2px);
+    color: #666; 
+  }
+  &-white-normal.jdd-button-small{
+    background: #fff;  
+    @include jdd-border-1px(#CCC,15px);
+    color: #666; 
+  }
+
+  &-white-normal:active{
+    background:#f2f2f2;
+  }
+  
+
+
+
+}

package/src/components/button/src/button.vue

@@ -0,0 +1,39 @@
+<template>
+  <span
+    class="jdd-button"
+    @click="handleClick"
+    :class="[
+      type ? 'jdd-button-' + type : '',
+      {
+        'is-disabled': disabled
+      },
+      'jdd-button-' + size,
+    ]"
+  >    <span v-if="$slots.default"><slot></slot></span>
+  </span>
+</template>
+<script>
+export default {
+	name: 'JddButton',
+	props: {
+		type: {
+      type: String,
+      default: 'default'
+    },
+    disabled: {
+      type:Boolean,
+      default:false
+    },
+    size: {
+      type: String,
+      default: 'large'
+    }
+	},
+  methods: {
+    handleClick(evt) {
+      if(!this.disabled)
+      this.$emit('click', evt);
+    }
+  }
+}
+</script>

package/src/components/button-group/index.js

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

package/src/components/button-group/index.scss

@@ -0,0 +1,37 @@
+@charset "utf-8";
+@import "~@/assets/css/common/var";
+
+// 多按钮吸底
+.jdd-button-group{
+  display: flex;
+  
+  width: 100%;
+  font-family: PingFangSC-Medium;
+  // height: 50px;
+  // line-height: 50px;
+  font-size: 18px;
+   background: #fff;
+  color:#fff;
+  span{
+    flex:1;
+  }
+  &-bottom{
+    position: fixed;
+    bottom: 0;
+    z-index: $z-index-description;
+    padding-bottom: constant(safe-area-inset-bottom) !important;
+    padding-bottom: env(safe-area-inset-bottom) !important;
+    .jdd-button{
+      border-radius: unset;
+    }
+    .jdd-button:not(:first-child){
+      box-shadow:0 -2px 4px 0 rgba(0,0,0,0.04);
+    }
+  }
+  &-top{
+    position: fixed;
+    top: 0;
+    z-index: $z-index-description
+  }
+}
+

package/src/components/button-group/src/button-group.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="jdd-button-group"
+    :class="[
+      type ? 'jdd-button-group-' + type : ''
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'JddButtonGroup',
+    props: {
+      type: {
+        type: String,
+        default: 'default'
+      }
+    }
+  };
+</script>

package/src/components/checkbox/index.js

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

package/src/components/checkbox/index.scss

@@ -0,0 +1,47 @@
+.jdd-checkbox{
+    display: flex;
+    position: relative;   
+}
+.jdd-checkbox-disabled {
+    .jdd-checkbox-icon{
+    background:rgba(221,221,221,1);
+    border:none;
+    }
+    .jdd-checkbox-label {
+        color:rgba(204,204,204,1); 
+    }
+ }
+.jdd-list-item-icon .jdd-checkbox-icon {
+    margin-right: 0;
+}
+.jdd-checkbox-icon {
+    display: flex;
+    position: relative;
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+    border-radius: 100%; 
+    margin-right: 6px; 
+}
+.jdd-checkbox-input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    opacity: 0;
+}
+.jdd-checkbox-checked {
+    svg{
+        width: 100%;
+        height: 100%;
+    }
+}
+.jdd-checkbox-unchecked {
+    border-width: 1px;
+    border-style: solid;
+    svg{
+        display: none;
+    }
+}

package/src/components/checkbox/src/checkbox-group.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="jdd-checkbox-list">
+      <slot></slot>   
+    </div>
+</template>
+
+<script>
+export default {
+  name: "JddCheckboxGroup",
+  props: {
+    value: {
+      default: 0
+    }
+  },
+  provide() {
+    return {
+     handleCheck: this.boxChecked,
+     parent:this
+    };
+  },
+  data() {
+    return {
+      checkValue:this.value
+    };
+  },
+  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: {
+    itemSelect(value,content) {
+      this.$emit("input",value);
+    },
+    boxChecked(check){
+      
+      this.checkValue = check;
+      this.$emit("input",check);
+    }
+  },
+  watch: {
+    value(newVal){
+      this.checkValue = newVal;
+    }
+  }
+};
+</script>

package/src/components/checkbox/src/checkbox.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="jdd-checkbox-wrap">
+    <label for :class="['jdd-checkbox',disabled?'jdd-checkbox-disabled':'']" @click = "check">
+      <span
+        class="jdd-checkbox-icon"
+        :style="{'borderColor':getFillColor}"
+        :class="[isChecked?'jdd-checkbox-checked':'jdd-checkbox-unchecked']"
+      >
+        <svg
+          t="1575962492834"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          p-id="2415"
+          data-spm-anchor-id="a313x.7781069.0.i17"
+        >
+          <path
+            d="M512 0C228.430769 0 0 228.430769 0 512s228.430769 512 512 512 512-228.430769 512-512S795.569231 0 512 0z m256 413.538462l-271.753846 271.753846c-7.876923 7.876923-19.692308 11.815385-31.507692 11.815384-11.815385 0-23.630769-3.938462-31.507693-11.815384l-169.353846-169.353846c-15.753846-15.753846-15.753846-47.261538 0-63.015385 15.753846-15.753846 47.261538-15.753846 63.015385 0l137.846154 137.846154 240.246153-240.246154c15.753846-15.753846 47.261538-15.753846 63.015385 0 19.692308 15.753846 19.692308 47.261538 0 63.015385z"
+            p-id="2416"
+            :fill="fillColor"
+          />
+        </svg>
+        <input type="checkbox" class="jdd-checkbox-input" v-model="getValue" :disabled="disabled" @change="handleChange"/>
+      </span>
+      
+      <span class="jdd-checkbox-label">
+        <slot></slot>
+      </span>
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: "JddCheckbox",
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    fillColor: {
+      type: String,
+      default: "#4D7BFE"
+    },
+    name: {
+      default: undefined
+    }
+  },
+  inject: {
+    handleCheck: {
+      default: "itemSelect"
+    },
+    parent: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      checkValue: this.value,
+      validateStatus: true,
+      label: this.title
+    };
+  },
+  created() {
+    if (this.isGroup()) {
+      this.checkValue = this.parent.value;
+    } else {
+      this.checkValue = this.value;
+    }
+  },
+  computed: {
+    getFillColor() {
+      let finalStyle = "";
+      if (!this.disabled && !this.isChecked) {
+        return this.fillColor;
+      }
+    },
+    isChecked() {
+       if (this.isGroup()) {
+         return this.name === this.parent.value;
+       } else {
+        return this.checkValue;
+      }
+    },
+    getValue:{
+      get(){
+        if(this.isGroup()){
+          return this.parent.value;
+        }else{
+          return this.checkValue
+        }
+      },
+      set(newVal){
+        
+        if(this.isGroup()){
+          
+            this.handleCheck(this.name);
+            // else this.handleCheck("");
+        }else{
+          this.$emit("change", newVal);
+          this.$emit("input", newVal);
+        }
+      }
+    }
+  },
+  methods: {
+    check(target) {
+      if(target.target.tagName !== 'A' && !this.disabled){
+      if(this.isGroup()){
+          
+            this.handleCheck(this.name);
+            // else this.handleCheck("");
+        }else{
+          this.$emit("change", !this.checkValue);
+          this.$emit("input", !this.checkValue);
+        }
+      }
+    },
+    isGroup() {
+      return this.parent ? true : false;
+    },
+    handleChange(){
+      // if(this.isGroup()){
+
+      // }else{
+      //   this.checkValue = 
+      // }
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.checkValue = newVal;
+    },
+    // "parent.value": function(newVal) {
+    //   //if(this.name === newVal)
+    //   this.checkValue = this.name === newVal ? true : false;
+    // },
+    // checkValue(newVal) {
+    //   if (typeof this.handleCheck === "function") {
+    //     if (newVal) this.handleCheck(this.name);
+    //     else this.handleCheck("");
+    //   } else {
+    //     this.$emit("change", newVal);
+    //     this.$emit("input", newVal);
+    //   }
+    // }
+  }
+};
+</script>
+
+

package/src/components/date-selecter/index.js

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