overseas 0.0.1

package/lib/utils/popup/index.js

@@ -0,0 +1,132 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _vue = require('vue');
+
+var _vue2 = _interopRequireDefault(_vue);
+
+var _merge = require('../merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
+var _popupManager = require('./popup-manager');
+
+var _popupManager2 = _interopRequireDefault(_popupManager);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var idSeed = 1;
+
+exports.default = {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 点击蒙层时关闭
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {};
+  },
+
+  watch: {
+    visible: function visible(val) {
+      var _this = this;
+
+      if (val) {
+        if (this._opening) return;
+        if (!this.rendered) {
+          this.rendered = true;
+          _vue2.default.nextTick(function () {
+            _this.open();
+          });
+        } else {
+          this.open();
+        }
+      } else {
+        this.close();
+      }
+    }
+  },
+  beforeMount: function beforeMount() {
+    // 组件渲染前
+    this._popupId = 'popup-' + (idSeed += 1);
+    _popupManager2.default.register(this._popupId, this);
+  },
+  beforeDestory: function beforeDestory() {
+    // 组件销毁前
+    _popupManager2.default.deregister(this._popupId);
+    _popupManager2.default.closeModal();
+  },
+
+  methods: {
+    open: function open(options) {
+      console.log('open dialog');
+      var props = (0, _merge2.default)({}, this.$props || this, options);
+      this.doOpen(props);
+    },
+    doOpen: function doOpen(props) {
+      console.log('do open');
+      if (this.$isServer) return;
+      if (this.opened) return;
+
+      console.log('do opening');
+
+      this._opening = true;
+
+      var dom = this.$el;
+
+      var modal = props.modal;
+      var zIndex = props.zIndex;
+
+
+      if (zIndex) {
+        _popupManager2.default.zIndex = zIndex;
+      }
+
+      // 显示遮罩层
+      if (modal) {
+        if (this._closing) {
+          _popupManager2.default.closeModal(this._popupId);
+          this._closing = false;
+        }
+        _popupManager2.default.openModal(this._popupId, _popupManager2.default.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
+      }
+
+      dom.style.zIndex = _popupManager2.default.nextZIndex();
+      this.opened = true;
+
+      if (this.onOpen) this.onOpen();
+
+      this.doAfterOpen();
+    },
+    doAfterOpen: function doAfterOpen() {
+      this._opening = false;
+    },
+    close: function close() {
+      this.doClose();
+    },
+    doClose: function doClose() {
+      this._closing = true;
+
+      if (this.onClose) this.onClose();
+
+      // if (this.lockScroll) {
+      //   setTimeout(this.restoreBodyStyle, 200);
+      // }
+
+      this.opened = false;
+
+      this.doAfterClose();
+    },
+    doAfterClose: function doAfterClose() {
+      _popupManager2.default.closeModal(this._popupId);
+      this._closing = false;
+    }
+  }
+};

package/lib/utils/popup/popup-manager.js

@@ -0,0 +1,198 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _vue = require('vue');
+
+var _vue2 = _interopRequireDefault(_vue);
+
+var _dom = require('../dom');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+var hasInitZIndex = false;
+var initZIndex = 2000;
+var zIndex = void 0;
+var hasModal = false;
+
+// eslint-disable-next-line func-names
+var getModal = function getModal() {
+  if (_vue2.default.prototype.$isServer) return null;
+  var modalDom = PopupManager.modalDom;
+
+  if (modalDom) {
+    hasModal = true;
+  } else {
+    hasModal = false;
+    modalDom = document.createElement('div');
+    PopupManager.modalDom = modalDom;
+
+    modalDom.addEventListener('touchmove', function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    modalDom.addEventListener('click', function () {
+      if (PopupManager.doOnModalClick) PopupManager.doOnModalClick();
+    });
+  }
+
+  return modalDom;
+};
+var instances = {};
+
+var PopupManager = {
+  modalFade: true,
+
+  getInstance: function getInstance(id) {
+    return instances[id];
+  },
+
+
+  // 注册弹出层
+  register: function register(id, instance) {
+    if (id && instance) {
+      instances[id] = instance;
+    }
+  },
+
+
+  // 删除弹出层
+  deregister: function deregister(id) {
+    if (id) {
+      instances[id] = null;
+      delete instances[id];
+    }
+  },
+  nextZIndex: function nextZIndex() {
+    // eslint-disable-next-line no-plusplus
+    return PopupManager.zIndex++;
+  },
+
+
+  modalStack: [],
+
+  doOnModalClick: function doOnModalClick() {
+    var topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topItem) return;
+
+    var instance = PopupManager.getInstance(topItem.id);
+    if (instance && instance.closeOnClickModal) {
+      instance.close();
+    }
+  },
+
+
+  // 显示蒙层
+  // eslint-disable-next-line no-shadow
+  openModal: function openModal(id, zIndex, dom, modalClass, modalFade) {
+    console.log('open modal');
+    if (_vue2.default.prototype.$isServer) return;
+    if (!id || zIndex === undefined) return;
+
+    this.modalFade = modalFade;
+
+    var modalStack = this.modalStack;
+
+
+    for (var i = 0, j = modalStack.length; i < j; i += 1) {
+      var item = modalStack[i];
+      if (item.id === id) {
+        return;
+      }
+    }
+
+    var modalDom = getModal();
+
+    (0, _dom.addClass)(modalDom, 'v-modal');
+    if (this.modalFade && !hasModal) {
+      (0, _dom.addClass)(modalDom, 'v-modal-enter');
+    }
+    if (modalClass) {
+      var classArr = modalClass.trim().split(/\s+/);
+      classArr.forEach(function (item) {
+        return (0, _dom.addClass)(modalDom, item);
+      });
+    }
+    setTimeout(function () {
+      (0, _dom.removeClass)(modalDom, 'v-modal-enter');
+    }, 200);
+
+    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
+      dom.parentNode.appendChild(modalDom);
+    } else {
+      document.body.appendChild(modalDom);
+    }
+
+    if (zIndex) {
+      modalDom.style.zIndex = zIndex;
+    }
+    modalDom.tabIndex = 0;
+    modalDom.style.display = '';
+
+    this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
+  },
+
+
+  // 关闭蒙层
+  closeModal: function closeModal(id) {
+    var modalStack = this.modalStack;
+
+    var modalDom = getModal();
+
+    if (modalStack.length > 0) {
+      var topItem = modalStack[modalStack.length - 1];
+      if (topItem.id === id) {
+        if (topItem.modalClass) {
+          var classArr = topItem.modalClass.trim().split(/\s+/);
+          classArr.forEach(function (item) {
+            return (0, _dom.removeClass)(modalDom, item);
+          });
+        }
+
+        modalStack.pop();
+        if (modalStack.length > 0) {
+          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
+        }
+      } else {
+        for (var i = modalStack.length - 1; i >= 0; i -= 1) {
+          if (modalStack[i].id === id) {
+            modalStack.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
+    if (modalStack.length === 0) {
+      if (this.modalFade) {
+        (0, _dom.addClass)(modalDom, 'v-modal-leave');
+      }
+      setTimeout(function () {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
+          modalDom.style.display = 'none';
+          PopupManager.modalDom = undefined;
+        }
+        (0, _dom.removeClass)(modalDom, 'v-modal-leave');
+      }, 200);
+    }
+  }
+};
+
+Object.defineProperty(PopupManager, 'zIndex', {
+  configurable: true,
+  get: function get() {
+    if (!hasInitZIndex) {
+      zIndex = zIndex || (_vue2.default.prototype.$ELEMENT || {}).zIndex || initZIndex;
+      hasInitZIndex = true;
+    }
+    return zIndex;
+  },
+  set: function set(value) {
+    zIndex = value;
+  }
+});
+
+exports.default = PopupManager;

package/lib/utils/storage.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+var myStorage = exports.myStorage = {
+  //存储
+  set: function set(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+  },
+
+  //取出数据
+  get: function get(key) {
+    try {
+      var value = localStorage.getItem(key);
+      if (value === null || value === undefined || value === "") {
+        return null;
+      }
+      return JSON.parse(localStorage.getItem(key));
+    } catch (err) {
+      return null;
+    }
+  },
+
+  //删除数据
+  remove: function remove(key) {
+    localStorage.removeItem(key);
+  }
+};

package/lib/utils/utils.js

@@ -0,0 +1,65 @@
+'use strict';
+
+exports.__esModule = true;
+exports.removeCookies = exports.getCookies = exports.setCookies = undefined;
+
+var _jsCookie = require('js-cookie');
+
+var _jsCookie2 = _interopRequireDefault(_jsCookie);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 设置accessToken
+ */
+var setCookies = exports.setCookies = function setCookies() {
+  var tokenName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '_official_token';
+  var token = arguments[1];
+
+  var domain = window.location.hostname;
+  var reg = /\./g;
+  var domainTestResult = domain.match(reg);
+  // cookies存储在二级域名上
+  if (domainTestResult && domainTestResult.length > 1) {
+    var regDomain = /\.[a-zA-Z\d\.]+$/;
+    var result = domain.match(regDomain);
+    // eslint-disable-next-line prefer-destructuring
+    if (result && result.length > 0) domain = result[0];
+  }
+
+  // 历史原因，设置Cookies之前，先删除原完整域名下的cookies
+  _jsCookie2.default.remove(tokenName);
+  // 设置官网的Cookies
+  _jsCookie2.default.set(tokenName, token, { expires: 365, domain: domain });
+};
+
+/**
+ * 移除Cookies
+ */
+var getCookies = exports.getCookies = function getCookies() {
+  var tokenName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '_official_token';
+
+  return _jsCookie2.default.get(tokenName) || '';
+};
+
+/**
+ * 移除Cookies
+ */
+var removeCookies = exports.removeCookies = function removeCookies() {
+  var tokenName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '_official_token';
+
+  var domain = window.location.hostname;
+  var reg = /\./g;
+  var domainTestResult = domain.match(reg);
+  // cookies存储在二级域名上
+  if (domainTestResult && domainTestResult.length > 1) {
+    var regDomain = /\.[a-zA-Z\d\.]+$/;
+    var result = domain.match(regDomain);
+    // eslint-disable-next-line prefer-destructuring
+    if (result && result.length > 0) domain = result[0];
+  }
+
+  // 清除官网的Cookies
+  _jsCookie2.default.remove(tokenName, { domain: domain });
+  _jsCookie2.default.remove(tokenName);
+};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "overseas",
+  "version": "0.0.1",
+  "description": "Think Academy to C UI library",
+  "main": "lib/overseas-ui.common.js",
+  "author": "lijiahong1@tal.com",
+  "license": "ISC",
+  "files": [
+    "lib",
+    "src",
+    "packages"
+  ],
+  "scripts": {
+    "serve": "webpack-dev-server --config build/webpack.config.dev.js",
+    "dist": "yarn run build:cdn && yarn run build:import && yarn run build:components && yarn run build:utils && yarn run build:theme",
+    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
+    "build:theme": "gulp build --gulpfile packages/theme-style/gulpfile.js && cp-cli packages/theme-style/lib lib/theme-style",
+    "build:cdn": "webpack --config build/webpack.conf.js",
+    "build:import": "webpack --config build/webpack.common.js",
+    "build:components": "webpack --config build/webpack.components.js",
+    "release": "release-it --npm.skipChecks"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-add-module-exports": "^1.0.4",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-regenerator-runtime": "^6.5.0",
+    "cp-cli": "^2.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "2.1.0",
+    "eslint": "^6.0.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "file-loader": "^6.2.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-cache": "^1.1.3",
+    "gulp-cssmin": "^0.2.0",
+    "gulp-imagemin": "6.2",
+    "gulp-sass": "^5.0.0",
+    "html-minifier-terser": "^5.0.1",
+    "html-webpack-plugin": "4",
+    "mini-css-extract-plugin": "0.4.1",
+    "node-sass": "4.14.1",
+    "progress-bar-webpack-plugin": "^2.1.0",
+    "release-it": "^14.11.7",
+    "sass": "^1.37.5",
+    "sass-loader": "7.1.0",
+    "sass-resources-loader": "^2.2.3",
+    "style-loader": "0.23.1",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-webpack-plugin": "^2.2.2",
+    "terser-webpack-plugin": "4.2.3",
+    "url-loader": "^4.1.1",
+    "vue": "^2.6.14",
+    "vue-loader": "^15.9.8",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "4.14.0",
+    "webpack-cli": "3.0.8",
+    "webpack-dev-server": "3.1.11",
+    "webpack-node-externals": "1.7.2"
+  },
+  "dependencies": {
+    "axios": "^0.24.0",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "js-cookie": "^3.0.1",
+    "vant": "2.12.54"
+  },
+   "release-it": {}
+}

package/packages/base/bottom-popup/index.js

@@ -0,0 +1,10 @@
+import TsBottomPopup from './src/bottom-popup.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsBottomPopup.install = (Vue) => {
+  Vue.component(TsBottomPopup.name, TsBottomPopup)
+}
+
+export default TsBottomPopup

package/packages/base/bottom-popup/src/bottom-popup.vue

@@ -0,0 +1,151 @@
+<template>
+  <!-- 通用底部弹出层 -->
+  <van-popup
+    v-model="isShow"
+    round
+    position="bottom"
+    :close-on-click-overlay="closeOnClickOverlay"
+    :close-on-popstate="closeOnPopstate"
+  >
+    <div class="bottom-popup">
+      <!-- 完全自定义header -->
+      <slot name="custom-header">
+        <div class="header-wrapper" :class="{'scrolling-style': isScrolling}">
+          <!-- 具备滑动显示阴影的自定义header -->
+          <slot name="header">
+            <div class="normal-header-container">
+              <div v-if="showLeftIcon" class="header-left-container">
+                <slot name="left-icon">
+                  <div class="header-icon-btn-container" @click="leftIconHandler">
+                    <i class="iconfont icon-close-new-e658" />
+                  </div>
+                </slot>
+              </div>
+              <div class="title-container">
+                <slot name="header-title">
+                  <h1 class="title">
+                    {{ popupTitle }}
+                  </h1>
+                </slot>
+              </div>
+              <div v-if="showRightIcon" class="header-right-container">
+                <slot name="right-icon">
+                  <div class="header-icon-btn-container success-icon-container" @click="rightIconHandler">
+                    <i class="iconfont icon-close-new-e658" />
+                  </div>
+                </slot>
+              </div>
+            </div>
+            <slot name="header-bottom" />
+          </slot>
+        </div>
+      </slot>
+
+      <!-- 完全自定义body -->
+      <slot name="custom-body">
+        <div id="normal-bottom-popup-body-wrapper" class="body-wrapper" @scroll="watchScroll">
+          <!-- 具备滑动显示阴影的自定义body -->
+          <slot name="body" />
+        </div>
+      </slot>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+// 节流函数
+const throttle = require('lodash/throttle');
+
+export default {
+  props: {
+    // 弹出层是否显示
+    show: {
+      default: false,
+      type: Boolean,
+    },
+    // 弹出层标题
+    popupTitle: {
+      default: '',
+      type: String,
+    },
+    // 是否显示遮罩层
+    overlay: {
+      default: true,
+      type: Boolean,
+    },
+    // 是否在点击遮罩层后关闭
+    closeOnClickOverlay: {
+      default: false,
+      type: Boolean,
+    },
+    // 是否在页面回退时自动关闭
+    closeOnPopstate: {
+      default: false,
+      type: Boolean,
+    },
+    // 是否显示左按钮
+    showLeftIcon: {
+      default: false,
+      type: Boolean,
+    },
+    // 左侧按钮icon
+    leftIconClass: {
+      default: 'iconfont icon-close-new-e658',
+      type: String,
+    },
+    // 是否显示右按钮
+    showRightIcon: {
+      default: true,
+      type: Boolean,
+    },
+    // 右侧按钮icon
+    rightIconClass: {
+      default: 'iconfont icon-success',
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isScrolling: false,
+      pannelBodyScrollTop: 0,
+    }
+  },
+  computed: {
+    isShow: {
+      get() {
+        return this.show;
+      },
+      set(newValue) {
+        this.$emit('update:show', newValue)
+        return newValue;
+      },
+
+    },
+  },
+  watch: {
+    pannelBodyScrollTop(newVal) {
+      setTimeout(() => {
+        const ele = document.getElementById('normal-bottom-popup-body-wrapper')
+        if (newVal !== ele.scrollTop) {
+          this.isScrolling = true;
+        } else {
+          this.isScrolling = false;
+        }
+      }, 100)
+    },
+  },
+  methods: {
+    watchScroll: throttle(function watchScrollTop() {
+      const ele = document.getElementById('normal-bottom-popup-body-wrapper');
+      this.pannelBodyScrollTop = ele.scrollTop;
+    }),
+    rightIconHandler() {
+      this.$emit('right-icon-handler');
+    },
+    leftIconHandler() {
+      this.$emit('left-icon-handler');
+    },
+  },
+}
+</script>
+

package/packages/base/button/index.js

@@ -0,0 +1,10 @@
+import TsButton from './src/button.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsButton.install = (Vue) => {
+  Vue.component(TsButton.name, TsButton)
+}
+
+export default TsButton