aaa-ui-test 1.0.1

package/lib/tabs/src/tabs.js

@@ -0,0 +1,171 @@
+"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 _tabItem = _interopRequireDefault(require("./tab-item"));
+
+var _utils = require("../../utils/utils");
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var __script__ = {
+  name: "JddTabs",
+  props: {
+    value: {
+      default: 0
+    },
+    type: {
+      type: String,
+      default: "line"
+    }
+  },
+  components: {
+    JddTabItem: _tabItem.default
+  },
+  provide: function provide() {
+    return {
+      handleClick: this.itemSelect,
+      parent: this
+    };
+  },
+  data: function data() {
+    return {
+      needScroll: false,
+      left: 0,
+      midPos: 0,
+      rafHand: null,
+      period: 5
+    };
+  },
+  created: function created() {
+    var 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: function computedLeft(offsetLeft) {
+      var activeTab = this.$refs.tab.querySelector(".jdd-tabs-active");
+      var 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)
+
+      var 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: function itemSelect(value, content, offsetLeft) {
+      var _this2 = this;
+
+      if (value !== this.value) {
+        this.$emit("input", value);
+        this.$nextTick(function () {
+          _this2.computedLeft(offsetLeft); // this
+
+        });
+      }
+
+      this.$emit("click", value);
+    },
+    rafScroll: function rafScroll(begin, end) {
+      if (begin === end) {
+        return;
+      } // if(this.rafHand){
+      //   cancelAnimationFrame(this.rafHand);
+      // }
+      //this.rafHand&&;
+
+
+      var arr = [];
+      var period = (end - begin) / this.period;
+
+      for (var index = 0; index < this.period; index++) {
+        arr.push(parseInt(begin += period));
+      }
+
+      arr.push(end);
+
+      var _this = this; // console.log(arr)
+      // let stop = null;
+
+
+      var 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;
+          (0, _utils.rAF)(step);
+        } else {
+          //  console.log(new Date().getTime())
+          (0, _utils.cancelRaf)(_this.rafHand);
+        }
+      }
+
+      _this.rafHand = (0, _utils.rAF)(step);
+    }
+  },
+  mounted: function mounted() {
+    this.computedLeft();
+  }
+};
+
+var render = function render() {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('div', {
+    ref: "tab",
+    class: [_vm.type === 'line' ? 'jdd-tabs-line' : 'jdd-tabs-card', _vm.needScroll ? 'jdd-tabs-hasscroll' : '', 'jdd-tabs-wrap']
+  }, [_c('div', {
+    ref: "scroll",
+    staticClass: "jdd-tabs-list"
+  }, [_vm._t("default"), _vm._v(" "), _c('span', {
+    staticClass: "jdd-tabs-active-line",
+    style: {
+      'left': _vm.left + 'px'
+    }
+  })], 2)]);
+};
+
+var staticRenderFns = [];
+var __template__ = {
+  render: render,
+  staticRenderFns: staticRenderFns
+};
+
+var _default = (0, _extends2.default)({}, __script__, __template__);
+
+exports.default = _default;

package/lib/textarea/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 _textarea = _interopRequireDefault(require("./src/textarea"));
+
+require("./index.css");
+
+_textarea.default.install = function (Vue) {
+  Vue.component(_textarea.default.name, _textarea.default);
+};
+
+var _default = _textarea.default;
+exports.default = _default;

package/lib/textarea/src/textarea.js

@@ -0,0 +1,219 @@
+"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"));
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var __script__ = {
+  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: _field.default
+  },
+  data: function data() {
+    return {
+      checkValue: this.value,
+      label: this.title,
+      isFocus: false,
+      inputValue: this.value,
+      paddingBottom: 0
+    };
+  },
+  methods: {
+    onLabelclick: function onLabelclick() {
+      //if(!this.value)
+      this.isFocus = true;
+      this.$refs.textarea.focus();
+    },
+    onInput: function onInput() {
+      this.resizeHeight();
+      this.$emit("input", this.inputValue);
+    },
+    onClick: function onClick() {
+      this.$refs.textarea.focus();
+      this.isFocus = true;
+    },
+    onFocus: function onFocus() {},
+    onBlur: function onBlur() {
+      var textareaDom = this.$refs.textarea;
+
+      if (!this.inputValue) {
+        this.isFocus = false;
+        textareaDom.style.height = "0px";
+      }
+
+      textareaDom.scrollTop = 0;
+    },
+    onChange: function onChange() {
+      this.resizeHeight();
+      this.$emit("input", this.inputValue);
+    },
+    resizeHeight: function resizeHeight() {
+      //console.log(1)
+      //console.log(this.$refs.textarea.scrollHeight)
+      var textareaDom = this.$refs.textarea;
+      var 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: function created() {
+    if (this.value) {
+      this.isFocus = true;
+    }
+  },
+  computed: {
+    getPlaceholder: function getPlaceholder() {
+      return this.direction !== "column" && this.placeholder;
+    }
+  },
+  mounted: function mounted() {
+    this.resizeHeight();
+  },
+  watch: {
+    value: function value(newVal) {
+      this.checkValue = newVal;
+    },
+    checkValue: function checkValue(newVal) {
+      this.$emit("change", newVal);
+      this.$emit("input", newVal);
+    }
+  }
+};
+
+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,
+      "isFocus": _vm.isFocus,
+      "direction": _vm.direction,
+      "border": _vm.border
+    },
+    on: {
+      "label-click": _vm.onLabelclick
+    }
+  }, [_c('div', {
+    staticClass: "jdd-field-control jdd-field-textarea",
+    style: {
+      'paddingBottom': _vm.paddingBottom + 'px'
+    },
+    on: {
+      "click": _vm.onClick
+    }
+  }, [_c('textarea', _vm._b({
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.inputValue,
+      expression: "inputValue"
+    }],
+    ref: "textarea",
+    attrs: {
+      "rows": "1",
+      "placeholder": _vm.getPlaceholder
+    },
+    domProps: {
+      "value": _vm.inputValue
+    },
+    on: {
+      "input": [function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+
+        _vm.inputValue = $event.target.value;
+      }, _vm.onInput],
+      "change": _vm.onChange,
+      "propertychange": _vm.onChange,
+      "blur": _vm.onBlur,
+      "focus": _vm.onFocus
+    }
+  }, 'textarea', _vm.$attrs, false))])]);
+};
+
+var staticRenderFns = [];
+var __template__ = {
+  render: render,
+  staticRenderFns: staticRenderFns
+};
+
+var _default = (0, _extends2.default)({}, __script__, __template__);
+
+exports.default = _default;

package/lib/toast/index.js

@@ -0,0 +1,60 @@
+"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 _toast = _interopRequireDefault(require("./src/toast"));
+
+require("./index.css");
+
+// const Toast = {};
+// // 注册Toast
+// Toast.install = function (Vue) {
+// 生成一个Vue的子类
+// 同时这个子类也就是组件
+var ToastConstructor = _vue.default.extend(_toast.default);
+
+var toastPool = []; // 生成一个该子类的实例
+
+var getAnInstance = function getAnInstance() {
+  if (toastPool.length > 0) {
+    var instance = toastPool[0];
+    toastPool.splice(0, 1);
+    return instance;
+  }
+
+  return new ToastConstructor({
+    el: document.createElement('div')
+  });
+}; // 通过Vue的原型注册一个方法
+// 让所有实例共享这个方法 
+
+
+var Toast = _vue.default.prototype.$toast = function (msg, bgcolor) {
+  if (document.querySelector('.jdd-toast')) {
+    document.body.removeChild(document.querySelector('.jdd-toast'));
+  }
+
+  var instance = getAnInstance();
+  instance.message = msg;
+
+  if (bgcolor) {
+    instance.bgcolor = bgcolor;
+  }
+
+  instance.show = true;
+  document.body.appendChild(instance.$el);
+  return instance;
+};
+
+Toast.install = function (Vue) {}; //}
+
+
+var _default = Toast;
+exports.default = _default;

package/lib/toast/src/toast.js

@@ -0,0 +1,59 @@
+"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: 'JddToast',
+  data: function data() {
+    return {
+      show: false,
+      android: navigator.userAgent.toLowerCase().match(/android/i) == "android" ? true : false,
+      message: "",
+      bgcolor: ""
+    };
+  }
+};
+
+var render = function render() {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _vm.show ? _c('div', {
+    staticClass: "jdd-toast ",
+    class: {
+      'jdd-toast-in': _vm.show,
+      'jdd-toast-bottom': _vm.android,
+      'jdd-toast-top': !_vm.android
+    }
+  }, [_c('span', {
+    style: {
+      background: _vm.bgcolor
+    }
+  }, [_vm._v(_vm._s(_vm.message))])]) : _vm._e();
+};
+
+var staticRenderFns = [];
+var __template__ = {
+  render: render,
+  staticRenderFns: staticRenderFns
+};
+
+var _default = (0, _extends2.default)({}, __script__, __template__);
+
+exports.default = _default;

package/lib/utils/clickoutside.js

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

package/lib/utils/fix-body.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("./utils");
+
+/**
+ * v-fixed
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-fixed>
+ * ```
+ */
+var scrollTop = 0;
+
+function getTop() {
+  return document.body.scrollTop || document.documentElement.scrollTop;
+}
+
+function setTop() {
+  document.body.style.top = -scrollTop + "px";
+}
+
+function backScroll() {
+  document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
+}
+
+var _default = {
+  bind: function bind(el, binding, vnode) {
+    if (binding.value) {
+      scrollTop = getTop();
+      (0, _utils.addClass)(document.body, "jdd-modal-open");
+      setTop();
+    }
+  },
+  unbind: function unbind() {
+    (0, _utils.removeClass)(document.body, "jdd-modal-open"); // scrollTop lost after set position:fixed, restore it back.
+
+    backScroll();
+  },
+  componentUpdated: function componentUpdated(el, binding) {
+    if (binding.value) {
+      scrollTop = getTop();
+      (0, _utils.addClass)(document.body, "jdd-modal-open");
+      setTop();
+    } else {
+      (0, _utils.removeClass)(document.body, "jdd-modal-open"); // scrollTop lost after set position:fixed, restore it back.
+
+      backScroll();
+    }
+  }
+};
+exports.default = _default;

package/lib/utils/utils.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addClass = addClass;
+exports.removeClass = removeClass;
+exports.cancelRaf = exports.rAF = exports.Type = void 0;
+
+/* 类型检测 */
+var Type = {}; // eslint-disable-next-line no-cond-assign
+
+exports.Type = Type;
+
+for (var i = 0, type; type = ['String', 'Number', 'Boolean', 'Array', 'Object', 'Function'][i++];) {
+  (function (type) {
+    Type['is' + type] = function (obj) {
+      return Object.prototype.toString.call(obj) === '[object ' + type + ']';
+    };
+  })(type);
+}
+
+var whitespaceRE = /\s+/;
+
+function addClass(el, cls) {
+  /* istanbul ignore if */
+  if (!cls || !(cls = cls.trim())) {
+    return;
+  }
+  /* istanbul ignore else */
+
+
+  if (cls.indexOf(' ') > -1) {
+    cls.split(whitespaceRE).forEach(function (c) {
+      return el.classList.add(c);
+    });
+  } else {
+    el.classList.add(cls);
+  }
+}
+
+function removeClass(el, cls) {
+  /* istanbul ignore if */
+  if (!cls || !(cls = cls.trim())) {
+    return;
+  }
+  /* istanbul ignore else */
+
+
+  if (cls.indexOf(' ') > -1) {
+    cls.split(whitespaceRE).forEach(function (c) {
+      return el.classList.remove(c);
+    });
+  } else {
+    el.classList.remove(cls);
+  }
+
+  if (!el.classList.length) {
+    el.removeAttribute('class');
+  }
+}
+
+var rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
+  window.setTimeout(callback, 1000 / 60);
+};
+
+exports.rAF = rAF;
+
+var cancelRaf = window.cancelAnimationFrame || Window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame || function (id) {
+  //为了使setTimteout的尽可能的接近每秒60帧的效果
+  window.clearTimeout(id);
+};
+
+exports.cancelRaf = cancelRaf;