aaa-ui-test 1.0.1

package/lib/input/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _input = _interopRequireDefault(require("./src/input"));
+
+require("./index.css");
+
+_input.default.install = function (Vue) {
+  Vue.component(_input.default.name, _input.default);
+};
+
+var _default = _input.default;
+exports.default = _default;

package/lib/input/src/input.js

@@ -0,0 +1,365 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _field = _interopRequireDefault(require("../../field"));
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// fix problem when page in pc mode clearicon click event trigger after input blur event
+//import Clickoutside from '../../utils/clickoutside';
+var __script__ = {
+  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: function _default() {
+        return {
+          type: "",
+          errorText: "",
+          pattern: ""
+        };
+      }
+    }
+  },
+  // directives: {
+  //   Clickoutside
+  // },
+  components: {
+    jddField: _field.default
+  },
+  data: function data() {
+    return {
+      label: this.title,
+      currentVal: this.value,
+      isFocus: false,
+      pattern: "",
+      validateStatus: true,
+      // placeholderText: this.placeholder,
+      disabled: this.$attrs.readonly || this.$attrs.disabled
+    };
+  },
+  created: function 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: function onLabelclick() {
+      if (!this.disabled) {
+        this.isFocus = true;
+        this.$refs.input.focus();
+      }
+    },
+    validate: function 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: function cleanVal() {
+      this.currentVal = ""; //this.formDom.focus();
+
+      this.$refs.input.focus();
+      this.$emit("input");
+      this.$emit("on-clean-value");
+    },
+    onFocus: function onFocus() {
+      this.isFocus = true; //this.active = true;
+    },
+    onBlur: function onBlur() {
+      if (this.isFocus) this.validate(); // if (
+      //   (!this.currentVal && this.direction === "column") ||
+      //   this.direction === "row"
+      // )
+
+      this.isFocus = false; //this.active = false;
+    },
+    onChange: function onChange() {
+      this.validate();
+    },
+    onInput: function onInput() {
+      if (!this.validateStatus) this.validate();
+      this.$emit("input", this.currentVal); // if (this.validateOption.type) this.inputResetValidate();
+    }
+  },
+  computed: {
+    isInputFocus: function isInputFocus() {
+      return this.isFocus || this.currentVal;
+    },
+    getPlaceholder: function getPlaceholder() {
+      return this.direction !== "column" && this.placeholder;
+    },
+    showClear: function showClear() {
+      return this.currentVal && !this.disabled && this.isFocus;
+    },
+    getFocus: function getFocus() {
+      return this.isFocus || this.currentVal !== '';
+    }
+  },
+  watch: {
+    value: function value(newVal) {
+      if (newVal) {
+        this.isFocus = true;
+      }
+
+      this.currentVal = newVal;
+    },
+    currentVal: function currentVal(newVal) {
+      this.$emit("input", newVal);
+    }
+  },
+  mounted: function mounted() {
+    this.formDom = this.$el.querySelector("input");
+  }
+};
+
+var render = function render() {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('jdd-field', {
+    attrs: {
+      "label": _vm.label,
+      "state": _vm.validateStatus,
+      "isFocus": _vm.getFocus,
+      "direction": _vm.direction,
+      "border": _vm.border
+    },
+    on: {
+      "label-click": _vm.onLabelclick
+    }
+  }, [_c('div', {
+    staticClass: "jdd-field-control jdd-field-input",
+    class: {
+      'jdd-field-input-with-icon': _vm.$slots.icon
+    }
+  }, [_vm.$attrs.type === 'checkbox' ? _c('input', _vm._b({
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.currentVal,
+      expression: "currentVal"
+    }],
+    ref: "input",
+    class: {
+      'jdd-field-disable': _vm.$attrs.readonly
+    },
+    attrs: {
+      "placeholder": _vm.getPlaceholder,
+      "type": "checkbox"
+    },
+    domProps: {
+      "checked": Array.isArray(_vm.currentVal) ? _vm._i(_vm.currentVal, null) > -1 : _vm.currentVal
+    },
+    on: {
+      "input": _vm.onInput,
+      "focus": _vm.onFocus,
+      "blur": _vm.onBlur,
+      "change": [function ($event) {
+        var $$a = _vm.currentVal,
+            $$el = $event.target,
+            $$c = $$el.checked ? true : false;
+
+        if (Array.isArray($$a)) {
+          var $$v = null,
+              $$i = _vm._i($$a, $$v);
+
+          if ($$el.checked) {
+            $$i < 0 && (_vm.currentVal = $$a.concat([$$v]));
+          } else {
+            $$i > -1 && (_vm.currentVal = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
+          }
+        } else {
+          _vm.currentVal = $$c;
+        }
+      }, _vm.onChange]
+    }
+  }, 'input', _vm.$attrs, false)) : _vm.$attrs.type === 'radio' ? _c('input', _vm._b({
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.currentVal,
+      expression: "currentVal"
+    }],
+    ref: "input",
+    class: {
+      'jdd-field-disable': _vm.$attrs.readonly
+    },
+    attrs: {
+      "placeholder": _vm.getPlaceholder,
+      "type": "radio"
+    },
+    domProps: {
+      "checked": _vm._q(_vm.currentVal, null)
+    },
+    on: {
+      "input": _vm.onInput,
+      "focus": _vm.onFocus,
+      "blur": _vm.onBlur,
+      "change": [function ($event) {
+        _vm.currentVal = null;
+      }, _vm.onChange]
+    }
+  }, 'input', _vm.$attrs, false)) : _c('input', _vm._b({
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.currentVal,
+      expression: "currentVal"
+    }],
+    ref: "input",
+    class: {
+      'jdd-field-disable': _vm.$attrs.readonly
+    },
+    attrs: {
+      "placeholder": _vm.getPlaceholder,
+      "type": _vm.$attrs.type
+    },
+    domProps: {
+      "value": _vm.currentVal
+    },
+    on: {
+      "input": [function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+
+        _vm.currentVal = $event.target.value;
+      }, _vm.onInput],
+      "focus": _vm.onFocus,
+      "blur": _vm.onBlur,
+      "change": _vm.onChange
+    }
+  }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('div', {
+    staticClass: "jdd-field-icon-wrap"
+  }, [_c('i', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showClear,
+      expression: "showClear"
+    }],
+    staticClass: "jdd-field-clean-icon",
+    on: {
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.cleanVal($event);
+      }
+    }
+  }), _vm._v(" "), _vm._t("icon")], 2)])]);
+};
+
+var staticRenderFns = [];
+var __template__ = {
+  render: render,
+  staticRenderFns: staticRenderFns
+};
+
+var _default2 = (0, _extends2.default)({}, __script__, __template__);
+
+exports.default = _default2;

package/lib/list/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _list = _interopRequireDefault(require("./src/list"));
+
+require("./index.css");
+
+_list.default.install = function (Vue) {
+  Vue.component(_list.default.name, _list.default);
+};
+
+var _default = _list.default;
+exports.default = _default;

package/lib/list/src/list.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+//
+//
+//
+//
+//
+//
+//
+//
+var __script__ = {
+  name: 'JddList',
+  props: {
+    title: String
+  }
+};
+
+var render = function render() {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('div', {
+    staticClass: "jdd-list"
+  }, [_vm.title ? _c('div', {
+    staticClass: "jdd-list-title",
+    domProps: {
+      "textContent": _vm._s(_vm.title)
+    }
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "jdd-list-body"
+  }, [_vm._t("default")], 2)]);
+};
+
+var staticRenderFns = [];
+var __template__ = {
+  render: render,
+  staticRenderFns: staticRenderFns
+};
+
+var _default = (0, _extends2.default)({}, __script__, __template__);
+
+exports.default = _default;

package/lib/list-item/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _listItem = _interopRequireDefault(require("./src/list-item"));
+
+require("./index.css");
+
+_listItem.default.install = function (Vue) {
+  Vue.component(_listItem.default.name, _listItem.default);
+};
+
+var _default = _listItem.default;
+exports.default = _default;

package/lib/list-item/src/list-item.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var __script__ = {
+  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: function 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: function onClick(target) {
+      if (target.target.tagName !== 'A') {
+        !this.disabled && this.$emit("onClick");
+      }
+    },
+    valueClick: function valueClick() {
+      this.$emit("value-click");
+    }
+  }
+};
+
+var render = function render() {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('div', {
+    staticClass: "jdd-list-item",
+    class: [_vm.arrow && 'jdd-list-item-link', _vm.hasDesc && 'jdd-list-item-mheight', _vm.disabled && 'jdd-list-item-diasbled'],
+    on: {
+      "click": _vm.onClick
+    }
+  }, [_vm.hasIcon ? _c('div', {
+    staticClass: "jdd-list-item-icon"
+  }, [_vm._t("icon")], 2) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "jdd-list-item-inner",
+    class: [_vm.border ? 'jdd-list-item-border-bottom' : '']
+  }, [_c('div', {
+    staticClass: "jdd-list-item-cont"
+  }, [_vm._t("title", [_c('p', {
+    staticClass: "title",
+    domProps: {
+      "textContent": _vm._s(_vm.title)
+    }
+  })]), _vm._v(" "), _vm._t("desc", [_vm.desc ? _c('p', {
+    staticClass: "desc",
+    domProps: {
+      "textContent": _vm._s(_vm.desc)
+    }
+  }) : _vm._e()])], 2), _vm._v(" "), _c('div', {
+    staticClass: "jdd-list-item-after",
+    on: {
+      "click": _vm.valueClick
+    }
+  }, [_vm._t("value", [_vm.value ? _c('p', {
+    domProps: {
+      "textContent": _vm._s(_vm.value)
+    }
+  }) : _vm._e()]), _vm._v(" "), _c('i', {
+    staticClass: "arrow"
+  })], 2)])]);
+};
+
+var staticRenderFns = [];
+var __template__ = {
+  render: render,
+  staticRenderFns: staticRenderFns
+};
+
+var _default = (0, _extends2.default)({}, __script__, __template__);
+
+exports.default = _default;

package/lib/loading/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _vue = _interopRequireDefault(require("vue"));
+
+var _loading = _interopRequireDefault(require("./src/loading"));
+
+require("./index.css");
+
+// const Loading = {};
+var Loading = {}; // 注册Loading
+//Loading.install = function (Vue) {
+// 生成一个Vue的子类
+// 同时这个子类也就是组件
+
+var LoadingConstructor = _vue.default.extend(_loading.default);
+
+var toastPool = []; // 生成一个该子类的实例
+
+var getAnInstance = function getAnInstance() {
+  if (toastPool.length > 0) {
+    var instance = toastPool[0];
+    toastPool.splice(0, 1);
+    return instance;
+  }
+
+  return new LoadingConstructor({
+    el: document.createElement('div')
+  });
+};
+
+var returnAnInstance = function returnAnInstance(instance) {
+  if (instance) {
+    toastPool.push(instance);
+  }
+};
+
+var removeDom = function removeDom(event) {
+  if (event.target.parentNode) {
+    event.target.parentNode.removeChild(event.target);
+  }
+};
+
+LoadingConstructor.prototype.close = function () {
+  this.show = false;
+  this.closed = true;
+  this.$el.addEventListener('transitionend', removeDom);
+  returnAnInstance(this);
+  return this;
+}; // LoadingConstructor.prototype.open = function() {
+//   this.test()
+//   this.show = true;
+//   this.closed = false;
+//   //this.$el.addEventListener('transitionend', removeDom);
+//   document.body.appendChild(this.$el);
+//   returnAnInstance(this);
+//   return this;
+// };
+// 通过Vue的原型注册一个方法
+// 让所有实例共享这个方法 
+
+
+Loading = _vue.default.prototype.$loading = function () {
+  var instance = getAnInstance();
+  instance.closed = false;
+  clearTimeout(instance.timer);
+  instance.show = true;
+  document.body.appendChild(instance.$el);
+
+  _vue.default.nextTick(function () {
+    instance.show = true;
+    instance.$el.removeEventListener('transitionend', removeDom); // ~duration && (instance.timer = setTimeout(function() {
+    //  instance.show = false;
+    //   if (instance.closed) return;
+    //   instance.close();
+    // }, duration));
+  });
+
+  return instance;
+};
+
+Loading.install = function (Vue) {}; // 生成一个Vue的子类
+// 同时这个子类也就是组件
+// const LoadingConstructor = Vue.extend(LoadingComponent)
+// 生成一个该子类的实例
+// LoadingConstructor.prototype.close = function(){
+//     this.show = false;
+//     return this;
+// }
+// LoadingConstructor.prototype.open = function(){
+//     this.show = true;
+//     return this;
+// }
+// const instance = new LoadingConstructor();
+// // 通过Vue的原型注册一个方法
+// // 让所有实例共享这个方法 
+// Vue.prototype.$loading = () => {
+//     // debugger;
+//     // 将这个实例挂载在我创建的div上
+//     // 并将此div加入全局挂载点内部
+//     instance.$mount(document.createElement('div'))
+//     document.body.appendChild(instance.$el)
+//     instance.open();
+//     return instance
+// }
+//}
+
+
+var _default = Loading;
+exports.default = _default;