aaa-ui-test 1.0.0

package/src/components/dialog/index.js

@@ -0,0 +1,146 @@
+import Vue from 'vue';
+import Dialog from './src/dialog.vue';
+import { Type } from '@/utils/utils';
+
+import "./index.scss";
+
+/* 注册 */
+//Dialog.install = function(Vue) {
+ // Vue.component(Dialog.name, Dialog)
+  // 创建组件构造器
+  Dialog.install = function(Vue) {
+    
+  }
+  const dialogObj = Vue.extend(Dialog)
+
+  Dialog.$confirm = Dialog.$alert =  Vue.prototype.$confirm = Vue.prototype.$alert = function install (options) {
+    let alertComponent;
+    //debugger
+    let existDom = document.getElementById('jdd-dialog-box');
+    if(existDom) {
+      document.body.removeChild(existDom)
+    }
+    alertComponent =  new dialogObj({el: document.createElement('div')})
+    let { dialogType, title, content, unClickBg, okShowStage, okBtnTxt, okBtnClass, okCbFun, cancelShowStage, cancelBtnTxt, cancelBtnClass, cancelCbFun, btns } = options
+    /* dialog类型 alert (默认)、confirm、vertical*/
+    if(dialogType) {
+      alertComponent.dialogType = dialogType
+      /* 如果是confirm、vertical非自定义按钮回填初始化值 */
+      if(dialogType !== 'alert' && !btns) {
+        if(dialogType==='confirm'){
+        alertComponent.btns.unshift({
+          btnClass: 'jdd-cancel-btn',
+          showStage: false,
+          type: 'cancel',
+          text: '取消'
+        })
+      }else{
+        alertComponent.btns.push({
+          btnClass: 'jdd-cancel-btn',
+          showStage: false,
+          type: 'cancel',
+          text: '取消'
+        })
+      }
+      }
+    }
+    /* 标题 */
+    if(title) {
+      alertComponent.title = title
+    }
+    /* 内容 */
+    if(content) {
+      alertComponent.content = content
+    }
+    /* 是否开启背景点击 */
+    if(Type.isBoolean(unClickBg)  && !unClickBg) {
+      alertComponent.unClickBg = unClickBg
+    }
+    /* 按钮单独配置 */
+    if(!btns) {
+      //for (const item of alertComponent.btns) {
+        alertComponent.btns.forEach(item => {
+          let { type } = item
+          if(type && type === 'ok') {
+            if(okCbFun && Type.isFunction(okCbFun)) {
+              item.cbFun = okCbFun
+            }
+            if(okBtnTxt){
+              item.text = String(okBtnTxt)
+            }
+            if(okShowStage) {
+              item.showStage = okShowStage
+            }
+            if(okBtnClass) {
+              item.btnClass = okBtnClass
+            }
+          } else if (type && type === 'cancel') {
+            if(cancelCbFun && Type.isFunction(cancelCbFun)) {
+              item.cbFun = cancelCbFun
+            }
+            if(cancelBtnTxt){
+              item.text = String(cancelBtnTxt)
+            }
+            if(cancelShowStage) {
+              item.showStage = cancelShowStage
+            }
+            if(cancelBtnClass) {
+              item.btnClass = cancelBtnClass
+            }
+          }
+        });
+        // console.warn('item', item)
+        
+      //}
+    }
+    /* 自定义按钮配置 */
+    if(dialogType === 'vertical' && btns && btns.length > 2 && btns.length <= 4 ) {
+      alertComponent.btns = btns;
+    }
+    Dialog.$close = Vue.prototype.$close = function (){
+      alertComponent._clearWin();
+    }
+    // 回调函数
+    alertComponent.callback = function(action={}) {
+      if (action.cbFun) {
+        action.cbFun();
+      }
+    };
+    // 把alertHonor.vue加入body中
+    // console.warn('alertComponent', alertComponent.$el)
+    document.body.appendChild(alertComponent.$el)
+    return alertComponent
+  }
+  Dialog.$activity =Vue.prototype.$activity = function(options) {
+    let alertComponentAc = {};
+    let {imgSrc,backgroundColor,okCbFun} = options;
+    let existDom = document.getElementById('jdd-dialog-box');
+    if(existDom) {
+      document.body.removeChild(existDom)
+    }
+
+    alertComponentAc =  new dialogObj({el: document.createElement('div'),data: function () {
+      return {
+        activity: true,
+        imgSrc:imgSrc,
+        backgroundColor:backgroundColor,
+        okCbFun:okCbFun
+      }
+    }})
+   
+    Dialog.$close = Vue.prototype.$close = function (){
+      alertComponentAc._clearWin();
+    }
+    // 回调函数
+    alertComponentAc.callback = function(action={}) {
+      okCbFun()
+    };
+    // 把alertHonor.vue加入body中
+    // console.warn('alertComponent', alertComponent.$el)
+    document.body.appendChild(alertComponentAc.$el)
+    return alertComponentAc;
+  }
+//}
+
+
+export default Dialog;

package/src/components/dialog/index.scss

@@ -0,0 +1,250 @@
+@charset "utf-8";
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+
+.hide {
+    display: none
+}
+
+.jdd-dialog-box {
+    position: fixed;
+    z-index: 1002;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.jdd-dialog-box .jdd-dialog-activity{
+    background: transparent;
+    overflow: unset;
+    width: 290px;
+}
+.jdd-dialog-activity-close {
+    position: absolute;
+    top: -35px;
+    right: 0px;
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    border-radius: 25px;
+    background-color: #000;
+    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-dialog-activity-inner {
+    min-height: 250px;
+    max-height: 400px;
+    border-radius: 8px;
+    overflow: hidden;
+    width: 290px;
+    background: transparent;
+}
+.jdd-dialog {
+    position: relative;
+    z-index: 1001;
+    width: 280px;
+    background-color: #fff;
+    border-radius: 8px;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+    overflow: hidden
+}
+
+.jdd-dialog-inner {
+    padding: 24px 0 22px;
+}
+
+// .jdd-dialog-title {
+//   position: relative;
+//   padding: .78125rem 0;
+//   font-family: 'PingFangSC-Medium';
+//   font-size: 1.0625rem;
+//   line-height: 1.875rem;
+//   color: #333;
+//   text-align: center;
+//   .jdd-text-left {
+//     text-align: left;
+//   }
+// }
+.jdd-dialog-inner,
+.jdd-dialog-content {
+    h2 {
+        font-family: 'PingFangSC-Medium';
+        font-size: 18px;
+        color: #333;
+        line-height: 29px;
+        text-align: center;
+        padding: 0 24px;
+        font-weight: normal
+    }
+
+    &>img+h2 {
+        padding-top: 12px;
+    }
+}
+
+.jdd-dialog-content {
+    line-height: 24px;
+    font-size: 17px;
+    color: #666;
+    max-height: 60vh;
+  overflow: auto;
+    &.dialogContent {
+        font-family: inherit;
+        // font-size: .0875rem;
+        text-align: justify;
+    }
+
+    h3 {
+        font-size: 14px;
+        color: #444;
+        line-height: 22px;
+        padding: 12px 24px 0;
+        font-weight: 700;
+    }
+
+    p {
+        font-size: 14px;
+        color: #666;
+        line-height: 22px;
+        padding: 12px 24px 0;
+        text-align: justify;
+    }
+
+    .contentScroll {
+        // padding: 1.5rem 0;
+        max-height: 280px;
+        overflow: hidden;
+        overflow-y: auto;
+    }
+
+    img {
+        width: 100%;
+        display: block;
+    }
+}
+
+.jdd-dialog-btns {
+    position: relative;
+    table-layout: fixed;
+    display: table;
+    border-collapse: collapse;
+    width: 100%;
+    overflow: hidden;
+}
+
+.jdd-border-top {
+    @include jdd-border-top($borderColor)  
+}
+
+.jdd-btn {
+    position: relative;
+
+    &:active {
+        background: #f2f2f2;
+    }
+}
+
+.jdd-default-btns {
+    .jdd-btn {
+        &+.jdd-btn {          
+            @include jdd-border-left($borderColor)           
+        }
+    }
+}
+
+.jdd-vertical-btns {
+    display: block;
+
+    .jdd-btn {
+        display: block;
+
+        &+.jdd-btn {
+            @include jdd-border-top($borderColor)  
+        }
+    }
+}
+
+.jdd-btn {
+    display: table-cell;
+    width: 100%;
+    font-family: 'PingFangSC-Medium';
+    font-size: 18px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+}
+
+.jdd-primary-btn {
+    color: #4D7BFE;
+}
+
+.jdd-cancel-btn {
+    color: #666;
+}
+
+.jdd-alert-btn {
+    color: #FC3438;
+}
+
+.jdd-btn {
+    &.jdd-disable {
+        color: #aaa;
+        background: inherit;
+    }
+}
+
+@media only screen and (min-device-width:414px) and (-webkit-min-device-pixel-ratio:3) {
+    .jdd-dialog {
+        width: 308px;
+    }
+}
+
+
+@keyframes jdd-dialogIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.9)
+    }
+
+    50% {
+        opacity: 1;
+        transform: scale(1.1)
+    }
+
+    100% {
+        transform: scale(1)
+    }
+}
+
+@keyframes jdd-dialogOut {
+    0% {
+        transform: scale(1) translate3d(0, 0, 0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0) scale(0.815);
+    }
+
+}
+
+.fade-dialog-enter-active {
+    animation-delay: .3s;
+
+    .jdd-dialog {
+        animation: jdd-dialogIn .3s cubic-bezier(0.4, 0, 0.2, 1);
+        
+    }
+}
+
+.fade-dialog-leave-active {
+    animation-delay: .3s;
+    .jdd-dialog {
+        animation: jdd-dialogOut .3s ease-in both;
+    }
+}

package/src/components/dialog/src/dialog.vue

@@ -0,0 +1,153 @@
+<template>
+  <transition name="fade-dialog" appear>
+    <div id="jdd-dialog-box" class="jdd-dialog-box" v-if="showAlert">
+      <jdd-mask v-model="showAlert" @onClick="shadowBoxClick" :background-color="backgroundColor"></jdd-mask>
+      <!-- <transition name="fade-dialog" appear> -->
+      <div class="jdd-dialog" v-if="!activity">
+        <div class="iconClose" :class="iconCloseClass" @click="iconClose" v-if="iconClosePro"></div>
+        <div class="jdd-dialog-inner">
+          <h2 v-if="title" v-text="title"></h2>
+          <div class="jdd-dialog-content" :class="contentClass" v-html="content" v-if="content"></div>
+        </div>
+        <div
+          class="jdd-dialog-btns jdd-border-top"
+          :class="(dialogType === 'vertical') ? 'jdd-vertical-btns':'jdd-default-btns'"
+        >
+          <div
+            class="jdd-btn"
+            v-for="btn in btns"
+            :class="btn.btnClass ? btn.btnClass : 'jdd-cancel-btn'"
+            :key="btn.id"
+            @click="btnsArg(btn)"
+          >{{btn.text}}</div>
+        </div>
+      </div>
+      <div v-else class="jdd-dialog jdd-dialog-activity">
+        <span class="jdd-dialog-activity-close" @click="_clearWin"></span>
+        <div class="jdd-dialog-activity-inner" @click="activeJump">
+          <img :src="imgSrc" alt />
+        </div>
+      </div>
+      <!-- </transition> -->
+      <!-- <transition name="fade-bg" appear> -->
+
+      <!-- </transition> -->
+    </div>
+  </transition>
+</template>
+<script>
+import JddMask from "../../mask";
+
+let setTO = "";
+export default {
+  name: "JddDialog",
+  props: {
+    unClickBg: {
+      type: Boolean,
+      default: true
+    },
+    /* dialog */
+    dialogType: {
+      type: String,
+      default: "alert"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: String,
+      default: ""
+    },
+    iconCloseClass: {
+      type: String,
+      default: "hide"
+    },
+    iconClosePro: {
+      type: Boolean,
+      default: false
+    },
+    callback: {
+      type: Function
+    }
+  },
+  data() {
+    /* dialog 模版参数说明
+      *  showAlert: Boolean | 是否展示dialog模版弹窗判断
+      *  dialogType: String | alert、confirm、vertical
+      *  title: String | dialog时，标题
+      *  content:  String | 内容文字 
+      *  callback: Function | 公共回调方法
+      *  btns: Array  |  可自定义
+      *    btnClass: String | jdd-ok-btn
+            showStage: Boolean | default false, true时不关闭弹窗
+            type: String |  confirm、cancel
+            text: String  | 按钮文案
+      */
+    return {
+      showAlert: true,
+      activity: false,
+      btns: [
+        {
+          btnClass: "jdd-primary-btn",
+          showStage: false,
+          type: "ok",
+          text: "确定"
+        }
+      ]
+    };
+  },
+  computed: {
+    contentClass() {
+      /* 计算回填类名 */
+      return [this.dialogType !== "alert" ? "dialogContent" : ""];
+    }
+  },
+  methods: {
+    // _timeout: function(ms){
+    //   return new Promise((resolve, reject) => {
+    //     if(setTO) clearTimeout(setTO)
+    //     if(typeof ms === 'number') {
+    //       setTO = setTimeout(resolve, ms, 'done')
+    //     } else {
+    //       reject('no Number');
+    //     }
+    //   })
+    // },
+    _removeSelfDom: function(showStage) {
+      !showStage && this._clearWin();
+    },
+    //关闭整个窗口
+    _clearWin() {
+      //if(setTO) clearTimeout(setTO)
+      this.showAlert = false;
+    },
+    activeJump() {
+      this.callback(this.btns);
+    },
+    btnsArg: function(keys) {
+      if (keys.showStage) {
+        this._removeSelfDom(true);
+      } else {
+        this._removeSelfDom();
+      }
+      this.handleActions(keys);
+    },
+    shadowBoxClick() {
+      //点击其他区域
+      if (this.unClickBg) return;
+      this._removeSelfDom();
+    },
+    iconClose() {
+      //点击关闭图标
+      this._removeSelfDom();
+    },
+    handleActions(action) {
+      this.callback(action);
+    }
+  },
+  components: {
+    JddMask
+  }
+}
+</script>

package/src/components/field/index.js

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

package/src/components/field/index.scss

@@ -0,0 +1,93 @@
+@charset "utf-8";
+@import "~@/assets/css/common/_mixin";
+
+.jdd-field {
+    display: flex;
+    background-color: #fff;
+    padding: 0 16px;
+    min-height: 72px;
+    position: relative;
+    flex-direction: column;
+
+    .jdd-field-label {
+        transition: all 0.1s ease-in-out;
+        font-family: PingFangSC-Regular;
+        font-size: 18px;
+        color: #999999;
+        letter-spacing: 0;
+        padding-top: 24px;
+        line-height: 25px;
+        width: 100%;
+        height: auto;
+    }
+}
+
+.jdd-field.jdd-field-focus {
+    .jdd-field-label {
+        padding-top: 12px;
+        font-size: 14px;
+        margin-bottom: 4px;
+        line-height: 20px;
+    }
+}
+
+.jdd-field-row {
+    flex-direction: row;
+}
+
+.jdd-field-label {
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    color: #333333;
+    letter-spacing: 0;
+    height: 56px;
+    line-height: 56px;
+    align-self: flex-start;
+    overflow: hidden;
+    text-align: left;
+}
+
+.jdd-field-border-top {
+    @include jdd-border-top(#e5e5e5, 16px);
+}
+
+.jdd-field-border-bottom {
+    @include jdd-border-bottom(#e5e5e5, 16px);
+}
+
+.jdd-field-inline {
+    display: flex;
+    background-color: #fff;
+    padding: 0 16px;
+    min-height: 56px;
+    position: relative;
+
+    .jdd-field-control {
+        flex: 1;
+        margin-left: 10px;
+    }
+    .jdd-field-label {
+        width: 160px;
+        flex-shrink: 0; 
+        span{
+            display: inline-block;
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis; 
+        }
+       
+    }
+}
+
+.jdd-field-inline.jdd-field-error .jdd-field-label {
+    line-height: unset;
+}
+
+.jdd-field-error {
+    .jdd-field-label {
+        color: #fc3438;
+        display: flex;
+        align-items: center;
+    }
+}

package/src/components/field/src/field.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    :class="[ direction==='column'?'jdd-field':'jdd-field-inline',!state?'jdd-field-error':'',isFocus?'jdd-field-focus':'jdd-field-common',borderClass]"
+    
+  >
+    <div class="jdd-field-label" @click="onClick"><span>{{label}}</span></div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "JddField",
+  props: {
+    state: {
+      type: Boolean,
+      default: true
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    border: {
+      type: String,
+      default: ""
+    },
+    direction: {
+      type: String,
+      default: "column"
+    },
+    isFocus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    onClick() {
+      this.$emit("label-click");
+    }
+  },
+  computed: {
+    borderClass() {
+      if (this.border === "bottom") {
+        return "jdd-field-border-bottom";
+      } else if (this.border === "top") {
+        return "jdd-field-border-top";
+      }
+      return "";
+    }
+  }
+};
+</script>
+
+

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

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input renders the correct markup 1`] = `
+<div class="jdd-field-inline jdd-field-common">
+  <div class="jdd-field-label">emaileamil</div>
+  <div class="jdd-field-control jdd-field-input"><input autocomplete="off" placeholder="email" type="text" class="">
+    <div class="jdd-field-icon-wrap"><i class="jdd-field-clean-icon" style="display: none;"></i> </div>
+  </div>
+</div>
+`;