aaa-ui-test 1.0.0

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

@@ -0,0 +1,63 @@
+// Import the mount() method from the test utils
+// and the component you want to test
+import { mount } from "@vue/test-utils";
+import Input from "..";
+import asyncExpect from "@/../test/utils.js";
+describe("Input", () => {
+  //let spy;
+  const mockFn = jest.fn();
+  // 设置 Wrapper vm 的方法并强制更新。
+
+  // Now mount the component and you have the wrapper
+  const wrapper = mount(Input, {
+    propsData: {
+      type: "text",
+      value: "",
+      title: "emaileamil",
+      placeholder: "email",
+      validateOption: {
+        type: Object,
+        default: () => {
+          return {
+            type: "email",
+            errorText: "请填写正确的邮箱号码",
+            pattern: ""
+          };
+        }
+      }
+    }
+  });
+  it("renders the correct markup", () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+  const getTask = async function() {
+    wrapper.trigger("click");
+
+    expect(wrapper.classes("jdd-field-focus")).toBe(true);
+    const textInput = wrapper.find("input");
+    //console.log(textInput.classes())
+    textInput.setValue("barbarbarbarbar");
+    expect(wrapper.vm.currentVal).toBe("barbarbarbarbar");
+    wrapper.setMethods({
+      cleanVal: mockFn
+    });
+    let clearIcon = wrapper.find(".jdd-field-clean-icon");
+    expect(clearIcon.isVisible()).toBe(true);
+    clearIcon.trigger("click");
+    await asyncExpect(() => {
+      expect(wrapper.vm.value).toBe("");
+      expect(wrapper.classes("jdd-field-error")).toBe(true);
+    }, 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.classes("jdd-field")).toBe(true);
+    getTask();
+  });
+});

package/src/components/input/index.js

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

package/src/components/input/index.scss

@@ -0,0 +1,91 @@
+.jdd-field-input {
+    display: flex;
+    align-items: center;
+
+    input {
+        border: none;
+        outline: none;
+        appearance: none;
+    }
+}
+
+.jdd-field .jdd-field-input-with-icon {
+    padding-right: 32px;
+}
+
+.jdd-field {
+    .jdd-field-input input {
+        text-align: left;
+        font-size: 18px;
+        font-family: PingFangSC-Medium;
+        font-weight:500;
+        color: #333333;
+        line-height: 22px;
+    }
+
+    .jdd-field-icon-wrap {
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        margin: auto 0px;
+        right: 16px;
+        display: flex;
+        align-items: center;
+        z-index: 1;
+    }
+    .jdd-field-control .jdd-field-disable {
+        color: #ccc;
+    }
+}
+
+.jdd-field {
+    input {
+        padding-right: 20px;
+    }
+}
+
+.jdd-field-inline {
+    .jdd-field-icon-wrap {
+        display: flex;
+    }
+    .jdd-field-control .jdd-field-disable {
+        color: #ccc;
+    }
+}
+
+.jdd-field-control {
+    input {
+        font-family: PingFangSC-Regular;
+        font-size: 16px;
+        color: #333333;
+        letter-spacing: 0;
+        flex: 1;
+        text-align: right;
+        background-color: inherit;
+        width: 100%;
+    min-width: 0;
+
+        &::placeholder {
+            font-family:PingFangSC-Regular,PingFang SC;
+            font-weight:400;
+            font-size: 16px;
+            color: #cccccc;
+        }
+    }
+
+    .jdd-field-clean-icon {
+        width: 16px;
+        height: 16px;
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAqFJREFUWEfFmclOAzEMQFsWsS/iyFr2HQr8/1fBhQMIv1FThSEZO560RLJamCwvju143OHA34YydEtkU2RNZHUiYcZP+fIlwifyIfIu8u1fsmzkunQ/ERmLvBXKi/Q/nWywbNWC3mjtshCsayM3k9MoQOjuyhEfirxWhIw3MJJ5F/rSLskEVzMCjGHvZI0VLyxH/TgHyAD87LFdID3OUupc7f6Y165Vsxz3wxw12YYlMmxosDjO9T9CBmhMDoVlG96tHd+ToY82B/ao9SHeJhuBXAtBZ9KHUMKntlDu+cVkDkC0ObZTpEzQNRA4TIPGpweWNeI5NNjbNija7ILEucICYWwpbAwZ5uB0NFPaiWG5u7VjwH7bzQqbgmTsuWFd+jSNXVmMm414YPtAsiZ+00QA0jRNm/HzEti+kGHdPUD3C0GtmiXTStm15bjbijsG1DNQg60JyVqkhIN7h0bDjnNmUEuTccJidqScHadg4+hg9W7NT9TbSJsgZwbA1oJkjSqgKZsMoJ4bLKWc3kefgwzHb70UtJPr5Uw5745ttIZmuZDc4QnI9ktZsMmSS0HT5DQ8eQJ+F6QWujw22wT80ivUAlkbtrlCS5KSEshasNOkBFhLmueBrAE7TfMA1RJnktuc41icIXcpFCfOwGp1pVGUDXlvnDgaWOIrFZQ/zfJyByxa8GZcQbMWSPr+eg2JiY/kD+0otXccbTzPLQUOwli2sVNyP8tis+yjFiDYAe8nNbTm3YippBNUjb0ywLuYd1xRkSzAUqiad9kxWRnpstXwbHlONotzuQu5AZZwRDTQ6lLe46ass2jRmrUPO/ZkPrkNcMHgCzNr2C65gScyjGXczH++Se2cH8QORNAOlbe4NETU4H/8WMHViaO0X6PN2vwBXtDwHrylQ1oAAAAASUVORK5CYII=");
+        background-position: left center;
+        background-repeat: no-repeat;
+        background-size: 16px;
+        transition-property: opacity, transform;
+        transition-timing-function: ease-out;
+        transition-duration: 0.3s;
+        margin-left: 8px;
+        display: block;
+    }
+
+    
+}

package/src/components/input/src/input.vue

@@ -0,0 +1,214 @@
+<template>
+  <jdd-field
+    :label="label"
+    :state="validateStatus"
+    :isFocus="getFocus"
+    :direction="direction"
+    @label-click="onLabelclick"
+    :border="border"
+ 
+  >
+    <!-- <div class="jdd-input-wrap" :class="{ 'jdd-input-focus': isInputFocus }"> -->
+    <div
+      class="jdd-field-control jdd-field-input"
+      :class="{'jdd-field-input-with-icon':$slots.icon}"
+    >
+      <!-- <span class="jdd-field-placeholder" v-show="!inputValue.length&&!isFocus" @click="focus">{{placeholder}}</span> -->
+      <input
+        :class="{'jdd-field-disable':$attrs.readonly}"
+        @input="onInput"
+        @focus="onFocus"
+        @blur ="onBlur"
+        @change="onChange"
+        v-model="currentVal"
+        :placeholder="getPlaceholder"
+        ref="input"
+        v-bind="$attrs"
+      >
+      <div class="jdd-field-icon-wrap">
+        <i
+          class="jdd-field-clean-icon"
+          @click.stop="cleanVal"
+          v-show="showClear"
+        ></i>
+        <slot name="icon"></slot>
+      </div>
+      <!-- </div> -->
+    </div>
+  </jdd-field>
+</template>
+<script>
+import jddField from "../../field";
+// fix problem when page in pc mode clearicon click event trigger after input blur event
+//import Clickoutside from '@/utils/clickoutside';
+export default {
+  name: "JddInput",
+  inheritAttrs:false,
+  props: {
+    direction: {
+      type: String,
+      default: "row"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+    border: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    validateOption: {
+      type: Object,
+      default: () => {
+        return {
+          type: "",
+          errorText: "",
+          pattern: ""
+        };
+      }
+    }
+  },
+  // directives: {
+  //   Clickoutside
+  // },
+  components: {
+    jddField
+  },
+  data() {
+    return {
+      label: this.title,
+      currentVal: this.value,
+      isFocus: false,
+      pattern: "",
+      validateStatus: true,
+     // placeholderText: this.placeholder,
+      disabled:this.$attrs.readonly||this.$attrs.disabled
+    };
+  },
+  created() {
+    // if(this.value){
+    //   this.isFocus = true;
+    // }
+    if (this.validateOption.pattern) {
+      this.pattern = this.validateOption.pattern;
+    } else {
+      switch (this.validateOption.type) {
+        case "mobile":
+          this.pattern = /^1\d{10}$/;
+          break;
+        case "email":
+          this.pattern = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
+          break;
+
+        default:
+          break;
+      }
+    }
+  },
+  methods: {
+    onLabelclick() {
+      if (!this.disabled) {
+        this.isFocus = true;
+        this.$refs.input.focus();
+      }
+    },
+    validate() {
+      if (
+        this.validateOption.type === "mobile" ||
+        this.validateOption.type === "email"
+      ) {
+        if (this.pattern.test(this.currentVal)) {
+          this.label = this.title;
+          this.validateStatus = true;
+        } else {
+          this.label = this.validateOption.errorText;
+          this.validateStatus = false;
+        }
+      }
+    },
+    // inputResetValidate() {
+    //   if (this.validateOption.type === "mobile") {
+    //     if (this.pattern.test(this.currentVal)) {
+    //       this.validateStatus = false;
+    //       this.placeholderText = this.placeholder;
+    //     }
+    //   }
+    // },
+    // focus() {
+    //   //console.log(1)
+    //   this.isFocus = true;
+    //   this.active = true;
+    //   //var _this  = this;
+    //   this.$res.input.focus();
+    // },
+    cleanVal() {
+      this.currentVal = "";
+      //this.formDom.focus();
+      this.$refs.input.focus();
+      this.$emit("input");
+      this.$emit("on-clean-value");
+    },
+    onFocus() {
+      this.isFocus = true;
+      //this.active = true;
+    },
+    onBlur() {
+      if(this.isFocus)
+      this.validate();
+      // if (
+      //   (!this.currentVal && this.direction === "column") ||
+      //   this.direction === "row"
+      // )
+        this.isFocus = false;
+      //this.active = false;
+    },
+    onChange() {
+      this.validate();
+    },
+    onInput() {
+      if(!this.validateStatus)
+      this.validate();
+      this.$emit("input", this.currentVal);
+      // if (this.validateOption.type) this.inputResetValidate();
+    }
+  },
+  computed: {
+    isInputFocus() {
+      return this.isFocus || this.currentVal;
+    },
+    getPlaceholder() {
+      return this.direction !== "column" && this.placeholder;
+    },
+    showClear() {
+      return this.currentVal  && !this.disabled && this.isFocus;
+    },
+    getFocus(){
+      return this.isFocus || this.currentVal !=='';
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) {
+        this.isFocus = true;
+      }
+      this.currentVal = newVal;
+    },
+    currentVal(newVal) {
+      this.$emit("input", newVal);
+    }
+  },
+  mounted() {
+    this.formDom = this.$el.querySelector("input");
+  }
+};
+</script>
+
+

package/src/components/list/index.js

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

package/src/components/list/index.scss

@@ -0,0 +1,21 @@
+@charset "utf-8";
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+
+.jdd-list {
+  position: relative;
+  width: 100%;
+  margin-top: 20px;
+  &-title {
+    position: relative;
+    font-size: $sizeNormal;
+    color: $cMainWeak;
+    line-height: 1;
+    padding: 10px $baseNum;
+  }
+
+  &-body {
+    position: relative;
+    background-color: $white;
+  }
+}

package/src/components/list/src/list.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="jdd-list">
+    <div class="jdd-list-title" v-if="title" v-text="title"></div>
+    <div class="jdd-list-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+	export default {
+		name: 'JddList',
+		props: {
+			title: String
+		}
+	}
+</script>

package/src/components/list-item/index.js

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

package/src/components/list-item/index.scss

@@ -0,0 +1,126 @@
+@charset "utf-8";
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+
+.jdd-list-item {
+  width: 100%;
+  padding-left: 16px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  height: 56px;
+  box-sizing: border-box;
+  
+  &.jdd-list-item-mheight {
+    height: 70px;
+    .jdd-list-item-icon {
+      img {
+        width: 44px;
+        height: 44px;
+      }
+    }
+  }
+  &.jdd-list-item-diasbled {
+    .jdd-list-item-cont {
+      .title {
+        color: #ccc;
+      }
+      .desc {
+        color: #ccc;
+      }
+    }
+    .jdd-list-item-after {
+      color: #ccc;
+    }
+  }
+  &-inner {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-right: 16px;
+    box-sizing: border-box;
+
+    
+  }
+  &-border-top{
+     @include jdd-border-top($borderColor)  
+  }
+  &-border-bottom{
+    
+      @include jdd-border-bottom();
+    
+  }
+  &-icon {
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      display: block;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &-cont {
+    flex: 1;
+    min-width: 0;
+
+    .title {
+      font-family: PingFangSC-Medium;
+      color: $cMainStrong;
+      font-size: 16px;
+    }
+
+    .desc {
+      font-size: 12px;
+      color: #999999;
+      margin-top: 6px;
+    }
+  }
+
+  &-after {
+    position: relative;
+    color: $cMainWeak;
+    text-align: right;
+    p{
+      font-family: PingFangSC-Regular;
+font-size: 12px;
+color: #999999;
+    }
+    .arrow {
+      display: none;
+      height: 6px;
+      width: 6px;
+      border-width: 1px 1px 0 0;
+      border-color: $borderWeak;
+      border-style: solid;
+      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+      position: relative;
+      top: -2px;
+      position: absolute;
+      top: 50%;
+      margin-top: -4px;
+      right: 2px;
+      box-sizing: content-box;
+    }
+  }
+
+}
+// 带尖头可点击，点击态背景色
+.jdd-list-item-link {
+  
+  .jdd-list-item-after {
+    padding-right: $baseNum;
+    .arrow {
+      display: inline-block;
+    }
+  }
+  &:not(.jdd-list-item-diasbled) {
+    &:active {
+      background-color: #F2F2F2;
+    }
+  }
+}

package/src/components/list-item/src/list-item.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="jdd-list-item" :class="[arrow && 'jdd-list-item-link', hasDesc && 'jdd-list-item-mheight', disabled && 'jdd-list-item-diasbled']" @click="onClick">
+    <div class="jdd-list-item-icon" v-if="hasIcon">
+      <slot name="icon"></slot>
+    </div>
+		<div class="jdd-list-item-inner" :class="[border?'jdd-list-item-border-bottom':'',]">
+			<div class="jdd-list-item-cont">
+				<slot name="title">
+					<p class="title" v-text="title"></p>
+				</slot>
+				<slot name="desc">
+					<p v-if="desc" class="desc" v-text="desc"></p>
+				</slot>
+			</div>
+			<div class="jdd-list-item-after" @click="valueClick">
+				<slot name="value"><p v-if="value" v-text="value"></p></slot>
+				<i class="arrow"></i>
+			</div>
+		</div>
+  </div>
+</template>
+<script>
+	export default {
+		name: 'JddListItem',
+		props: {
+			arrow: {
+				type: Boolean,
+				default: false
+			},
+			title: String,
+			value: [String, Number, Array],
+			desc: String,
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			border:{
+				type: String,
+				default: "bottom"
+			}
+		},
+		data() {
+			return {
+				hasDesc: this.desc || (this.$slots.desc && this.$slots.desc.length > 0) ? true : false,
+				hasIcon: this.$slots.icon && this.$slots.icon.length > 0 ? true : false
+			}
+		},
+		methods: {
+			onClick(target) {
+				if(target.target.tagName !== 'A'){
+					!this.disabled&&this.$emit("onClick")
+				}
+			},
+			valueClick(){
+				this.$emit("value-click")
+			}
+		}
+	}
+</script>

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toast renders the correct markup 1`] = `
+<div class="jdd-loading jdd-loading-fade-enter jdd-loading-fade-enter-active" style="">
+  <div class="jdd-mask-box" style="">
+    <div class="jdd-mask jdd-mask-transparent"></div>
+  </div> <img src="//m.jr.jd.com/statics/pageLoading/loading.svg">
+</div>
+`;

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

@@ -0,0 +1,30 @@
+// Import the mount() method from the test utils
+// and the component you want to test
+import { createWrapper } from "@vue/test-utils";
+import Loading from "..";
+import { flushPromises } from "@/../test/utils.js";
+
+describe("Toast", () => {
+  const loading = Loading();
+  const wrapper = createWrapper(loading);
+  let dom = createWrapper(document.body);
+
+  it("renders the correct markup", async () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+  it("has a span class", async () => {
+    expect(wrapper.classes()).toContain("jdd-loading");
+    expect(wrapper.find(".jdd-mask-box").isVisible()).toBe(true);
+    await flushPromises();
+    expect(dom.find(".jdd-mask-box").exists()).toBe(true);
+  });
+  it("timeout param is correct", async () => {
+    let timeLoading = Loading(2000);
+    await flushPromises();
+    expect(dom.find(".jdd-mask-box").exists()).toBe(true);
+   //await flushPromises(3000);
+   setTimeout(() => {
+    expect(dom.find(".jdd-mask-box").isVisible()).toBe(false);
+   }, 3000);
+  });
+});