overseas 2.0.7

package/README.md

@@ -0,0 +1,12 @@
+## 海外C端组件库
+
+设置内部npm源
+npm run dist // 打包
+npm run release // 提交
+
+
+#### TODO
+
+样式解耦
+国际化
+打包优化

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "overseas",
+  "version": "2.0.7",
+  "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

package/packages/base/button/src/button.vue

@@ -0,0 +1,108 @@
+<template>
+  <button class="ts-button"
+          :disabled="buttonDisabled"
+          :autofocus="autofocus"
+          :type="type"
+          :class="[
+            styleType ? 'ts-button--' + styleType : '',
+            buttonSize ? 'ts-button--' + buttonSize : '',
+            {
+              'is-disabled': buttonDisabled,
+              'is-loading': loading,
+              'is-outline': outline,
+              'is-round': round,
+            }
+          ]"
+          :style="{'width': width, 'height': height, 'color': textColor, 'background': bgColor, 'border-color': borderColor}"
+          @click="handleClick"
+  >
+    <span v-if="loading" class="iconfont icon-loading" />
+    <slot>
+      TSButton
+    </slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'TsButton',
+  props: {
+    // 尺寸(small | normal | large)
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    // 样式类型(default | primary | assist)
+    styleType: {
+      type: String,
+      default: 'default',
+    },
+    // 圆角为半圆
+    round: {
+      type: Boolean,
+      default: true,
+    },
+    // 文本颜色
+    textColor: {
+      type: String,
+      default: '',
+    },
+    // 边框颜色
+    borderColor: {
+      type: String,
+      default: '',
+    },
+    // 背景色
+    bgColor: {
+      type: String,
+      default: '',
+    },
+    // 按钮宽度
+    width: {
+      type: String,
+      default: '',
+    },
+    // 按钮高度
+    height: {
+      type: String,
+      default: '',
+    },
+    // 原生 type 属性(button | submit | reset)
+    type: {
+      type: String,
+      default: 'button',
+    },
+    // 是否是线框按钮
+    outline: {
+      default: false,
+      type: Boolean,
+    },
+    // 是否处于loading状态
+    loading: {
+      default: false,
+      type: Boolean,
+    },
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+    autofocus: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  computed: {
+    buttonSize() {
+      return this.size
+    },
+    buttonDisabled() {
+      return this.disabled || this.loading
+    },
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e);
+    },
+  },
+}
+</script>

package/packages/base/dialog/index.js

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

package/packages/base/dialog/src/dialog.vue

@@ -0,0 +1,173 @@
+<template>
+  <transition name="dialog-fade">
+    <div v-show="visible" class="ts-dialog-wrapper" @click.self="handleWrapperClick">
+      <div
+        :key="key"
+        ref="dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
+        :class="['ts-dialog', {'is-center': center}, {'is-round': isRound}]"
+        :style="{'width': width}"
+      >
+        <div class="ts-dialog__header" :style="{'background-color': headerBg}">
+          <slot name="header">
+            <div class="ts-normal-header-container">
+              <div v-if="showLeftIcon" class="ts-header-left-container">
+                <slot name="left-icon">
+                  <div class="ts-header-icon-btn-container" @click="leftIconHandler">
+                    <i class="iconfont icon-close-new-e658" />
+                  </div>
+                </slot>
+              </div>
+              <div class="ts-title-container">
+                <slot name="header-title">
+                  <div class="title font-semibold">
+                    {{ title }}
+                  </div>
+                </slot>
+              </div>
+              <div v-if="showRightIcon" class="ts-header-right-container">
+                <slot name="right-icon">
+                  <div class="ts-header-icon-btn-container success-icon-container" @click="rightIconHandler">
+                    <i class="iconfont icon-success" />
+                  </div>
+                </slot>
+              </div>
+            </div>
+            <slot name="header-bottom" />
+          </slot>
+        </div>
+        <div class="ts-dialog__body" :style="{'background-color': bodyBg}">
+          <slot name="body" />
+        </div>
+        <div class="ts-dialog__footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from '../../../../src/utils/popup/index';
+
+export default {
+  name: 'TsDialog',
+  mixins: [Popup],
+  props: {
+    // 是否插入到body节点
+    appendToBody: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示遮罩层
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      default: 'title',
+    },
+    // 是否显示左侧icon
+    showLeftIcon: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示右侧icon
+    showRightIcon: {
+      type: Boolean,
+      default: false,
+    },
+    // 头部背景色
+    headerBg: {
+      type: String,
+      default: '#fff',
+    },
+    // body背景色
+    bodyBg: {
+      type: String,
+      default: '#fff',
+    },
+    // 弹窗宽度
+    width: {
+      type: String,
+      default: '50%',
+    },
+    // 是否居中显示弹窗
+    center: {
+      type: Boolean,
+      default: true,
+    },
+    // 样式相关配置
+    isRound: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      closed: false,
+      key: 0,
+    }
+  },
+  watch: {
+    visible(val) {
+      console.log(val)
+      if (val) {
+        this.closed = false
+        this.$emit('open');
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
+      } else {
+        if (!this.closed) this.$emit('close');
+        if (this.destroyOnClose) {
+          this.$nextTick(() => {
+            this.key += 1;
+          });
+        }
+      }
+    },
+  },
+  mounted() {
+    if (this.visible) {
+      this.rendered = true;
+      this.open();
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el);
+      }
+    }
+  },
+  methods: {
+    rightIconHandler() {
+      this.$emit('right-icon-handler');
+    },
+    leftIconHandler() {
+      this.$emit('left-icon-handler');
+    },
+    handleWrapperClick() {
+      console.log('handle wrapper click')
+      if (!this.closeOnClickModal) return;
+      this.handleClose();
+    },
+    handleClose() {
+      console.log('handler close')
+
+      this.hide();
+    },
+    hide(cancel) {
+      console.log('close hide func')
+      if (cancel !== false) {
+        this.$emit('update:visible', false);
+        this.$emit('close');
+        this.closed = true;
+        console.log('123')
+        console.log(this.visible)
+      }
+    },
+  },
+}
+</script>

package/packages/base/icon/index.js

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

package/packages/base/icon/src/icon.vue

@@ -0,0 +1,15 @@
+<template>
+  <i :class="`iconfont icon-${name}`" />
+</template>
+
+<script>
+export default {
+  name: 'TsIcon',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+}
+</script>

package/packages/base/image/index.js

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

package/packages/base/image/src/image.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="image-section-wrapper">
+    <img v-if="src" class="img-section" :src="src" :alt="alt" :width="width" :height="height" :object-fit="fit">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TsImage',
+  props: {
+    src: {
+      default: '',
+      type: String,
+    },
+    // img 标签原生object-fit属性
+    fit: {
+      default: 'contain',
+      type: String,
+    },
+    // img 原生属性
+    width: {
+      default: '',
+      type: String,
+    },
+    height: {
+      default: '',
+      type: String,
+    },
+    alt: {
+      default: 'image',
+      type: String,
+    },
+  },
+  data() {
+    return {
+
+    }
+  },
+}
+</script>

package/packages/base/material-list/index.js

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