@mpxjs/webpack-plugin 2.6.113 → 2.6.114-alpha.0

package/lib/runtime/components/tenon/tenon-button.vue

@@ -0,0 +1,305 @@
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+// 获取当前小程序样式版本配置
+const styleVersion = global.__style || "";
+const sizeClassMap = {
+  default: "",
+  mini: "mpx-button-size-mini",
+};
+const typeClassMap = {
+  primary: "mpx-button-type-primary",
+  warn: "mpx-button-type-warn",
+};
+const plainClassMap = {
+  false: "",
+  true: "mpx-button-plain",
+};
+const disabledClassMap = {
+  false: "",
+  true: "mpx-button-disabled",
+};
+const clickDisabledClassMap = {
+  false: "",
+  true: "mpx-button-click-disabled",
+};
+export default (function(){
+  return {
+    name: "mpx-button",
+    data() {
+      return {
+        hover: false,
+      };
+    },
+    props: {
+      name: String,
+      size: {
+        type: String,
+        default: "default",
+      },
+      type: {
+        type: String,
+        default: "default",
+      },
+      plain: Boolean,
+      disabled: Boolean,
+      loading: Boolean,
+      formType: String,
+      hoverClass: {
+        type: String,
+        default: "button-hover",
+      },
+      hoverStopPropagation: {
+        type: Boolean,
+        default: false,
+      },
+      hoverStartTime: {
+        type: Number,
+        default: 20,
+      },
+      hoverStayTime: {
+        type: Number,
+        default: 70,
+      },
+    },
+    computed: {
+      className() {
+        if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
+          return this.hoverClass;
+        }
+        return "";
+      },
+      classNameList() {
+        let classArr = [];
+        if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
+          classArr.push(this.hoverClass);
+        }
+        if (styleVersion === "v2") {
+          classArr.push(`${sizeClassMap[this.size]}${styleVersion}`);
+          classArr.push(`${typeClassMap[this.type]}${styleVersion}`);
+          classArr.push(`mpx-button-version${styleVersion}`);
+        } else {
+          classArr.push(sizeClassMap[this.size]);
+          classArr.push(typeClassMap[this.type]);
+          classArr.push(`mpx-button-version`);
+        }
+        classArr.push(plainClassMap[this.plain]);
+        classArr.push(disabledClassMap["" + !!this.disabled]);
+        // 禁用click
+        classArr.push(clickDisabledClassMap["" + !!this.disabled]);
+        return classArr;
+      },
+    },
+    render() {
+      let mergeAfter;
+      if (this.hoverClass && this.hoverClass !== "none") {
+        mergeAfter = {
+          listeners: {
+            onTouchstart: this.handleTouchstart,
+            onTouchend: this.handleTouchend,
+          },
+          force: true,
+        };
+      }
+      const domProps = {
+        disabled: this.disabled,
+        plain: this.plain,
+        type: this.type,
+      };
+      const data = {
+        class: ["mpx-button", ...this.classNameList],
+        ...domProps,
+        ...getInnerListeners(this, {
+          mergeAfter,
+          // 由于当前机制下tap事件只有存在tap监听才会触发，为了确保该组件能够触发tap，传递一个包含tap的defaultListeners用于模拟存在tap监听
+          defaultListeners: ["onTap"],
+        }),
+      };
+
+      let text = "";
+      const nodes = this.$slots.default();
+      nodes.forEach((item) => {
+        if (item.shapeFlag === 8 && item.children) {
+          text += item.children;
+        }
+      });
+      return h("button", data, text);
+    },
+    methods: {
+      handleTouchstart(e) {
+        if (e.__hoverStopPropagation) {
+          return;
+        }
+        e.__hoverStopPropagation = this.hoverStopPropagation;
+        clearTimeout(this.startTimer);
+        this.startTimer = setTimeout(() => {
+          this.hover = true;
+        }, this.hoverStartTime);
+      },
+      handleTouchend() {
+        clearTimeout(this.endTimer);
+        this.endTimer = setTimeout(() => {
+          this.hover = false;
+        }, this.hoverStayTime);
+      },
+    },
+  }
+})()
+</script>
+
+
+
+<style lang="stylus">
+.mpx-button-versionv2
+    width: 184px
+    line-height 1.41176471
+    font-weight: 700;
+    padding-top 8px
+    padding-bottom 8px
+  .mpx-button-version
+    width: 100%
+    line-height 2.55555556
+    cursor: pointer
+    &:after
+      border 1px solid rgba(0,0,0,.2)
+
+  .mpx-button
+    padding-left: 14px
+    padding-right: 14px
+    border none
+    outline: none
+    position relative
+    display block
+    margin-left auto
+    margin-right auto
+    margin-bottom 10px
+    box-sizing border-box
+    font-size 18px
+    text-align center
+    text-decoration none
+    border-radius 5px
+    -webkit-tap-highlight-color transparent
+    overflow hidden
+    color #000
+    background-color #f8f8f8
+    &:after
+      content " "
+      width 200%
+      height 200%
+      position absolute
+      top 0
+      left 0
+      -webkit-transform scale(.5)
+      transform scale(.5)
+      -webkit-transform-origin 0 0
+      transform-origin 0 0
+      box-sizing border-box
+      border-radius 10px
+
+    &.button-hover
+      background-color #dedede
+
+    /* 默认版本 size=mini style */
+    &.mpx-button-size-mini
+      display inline-block
+      line-height 2.3
+      font-size 13px
+      padding 0 1.34em
+      width auto
+    /* v2 size=mini style */
+    &.mpx-button-size-miniv2
+      width auto
+      padding 0 0.75em
+      line-height 2
+      font-size 16px
+      display inline-block
+    &.mpx-button-plain
+      color #353535
+      border 1px solid #353535
+      background-color transparent
+      &.mpx-button-plain.button-hover
+        background-color rgba(0, 0, 0, 0)
+        color #828282
+        border 1px solid #828282
+
+    /* 默认版本 type=primary style */
+    &.mpx-button-type-primary
+      background-color #1aad19
+      color #fff
+      &.mpx-button-type-primary.mpx-button-plain
+        color #1aad19
+        border-color #1aad19
+        background-color #fff
+    /* v2 type=primary style */
+    &.mpx-button-type-primaryv2
+      background-color #07c160
+      color #fff
+      &.mpx-button-type-primaryv2.button-hover
+        color #fff
+        background-color #06ad56
+      &.mpx-button-type-primaryv2.mpx-button-plain
+        color #06ae56
+        border-color #179c16
+        background-color #fff
+      &.mpx-button-type-primaryv2.button-hover.mpx-button-plain
+        color #06ae56
+        background-color rgba(0, 0, 0, .1)
+
+    /* 默认版本 type=warn style */
+    &.mpx-button-type-warn
+      color #fff
+      background-color #e64340
+      &.mpx-button-type-warn.mpx-button-plain
+        color #e64340
+        background-color transparent
+        border 1px solid #e64340
+    /* v2 type=warn style */
+    &.mpx-button-type-warnv2
+      color #fa5151
+      background-color #f2f2f2
+      &.mpx-button-type-warnv2.button-hover
+        background-color #d9d9d9
+      &.mpx-button-type-warnv2.mpx-button-plain
+        color #fa5151
+        background-color #fff
+        border 1px solid #e64340
+      &.mpx-button-type-warnv2.button-hover.mpx-button-plain
+        color: #f58c8d
+        border 1px solid #f58a8b
+        background-color #fff
+
+    &.mpx-button-disabled
+      color rgba(0, 0, 0, 0.18) !important
+      background-color #fafafa !important
+      border 1px solid rgba(0, 0, 0, .2) !important
+    &.mpx-button-click-disabled
+      pointer-events none
+    &.mpx-button-loading
+      &.mpx-button-type-warn
+        color rgba(255,255,255,.6)
+        background-color #ce3c39
+      &.mpx-button-type-warnv2
+        background-color #d9d9d9
+        color #fa5151
+      &.mpx-button-type-primary
+        color: rgba(255,255,255,.6);
+        background-color: #179b16;
+      &:before
+        content: " "
+        display: inline-block
+        width: 18px
+        height: 18px
+        vertical-align: middle
+        -webkit-animation: mpxButton 1s steps(12,end) infinite
+        animation: mpxButton 1s steps(12,end) infinite
+        background transparent url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=') no-repeat
+        background-size: 100%
+        margin -0.2em 0.34em 0 0
+
+  @keyframes mpxButton
+    0%
+      transform: rotate3d(0, 0, 1, 0deg)
+    100%
+      transform: rotate3d(0, 0, 1, 360deg)
+</style>

package/lib/runtime/components/tenon/tenon-image.vue

@@ -0,0 +1,61 @@
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-image",
+  props: {
+    src: {
+      type: String,
+    },
+    mode: {
+      type: String,
+      default: "scaleToFill",
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: false,
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  render() {
+    let resize = "";
+    switch (this.mode) {
+      case "scaleToFill":
+        resize = "stretch";
+        break;
+      case "aspectFit":
+        resize = "contain";
+        break;
+      case "aspectFill":
+        resize = "cover";
+        break;
+      default:
+        resize = "stretch";
+    }
+    return h("image", {
+      class: "mpx-image",
+      src: this.src,
+      resize,
+      ...getInnerListeners(this)
+    });
+  },
+  data() {
+    return {};
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="stylus">
+.mpx-image
+  width 300px
+  height 225px
+  display inline-block
+</style>

package/lib/runtime/components/tenon/tenon-input.vue

@@ -0,0 +1,95 @@
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+export default {
+  name: "mpx-input",
+  props: {
+    name: String,
+    value: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    password: Boolean,
+    placeholder: String,
+    disabled: Boolean,
+    maxlength: {
+      type: Number,
+      default: 140,
+    },
+    autoFocus: Boolean,
+    focus: {
+      type: Boolean,
+      default: false,
+    },
+    cursor: {
+      type: Number,
+      default: -1,
+    },
+    selectionStart: {
+      type: Number,
+      default: -1,
+    },
+    selectionEnd: {
+      type: Number,
+      default: -1,
+    },
+  },
+  render() {
+    let inputType = "";
+    if (this.password) {
+      inputType = "password";
+    } else {
+      switch (this.type) {
+        case "text":
+          inputType = "default";
+          break;
+        case "number":
+          inputType = "number";
+          break;
+        default:
+          inputType = "text";
+      }
+    }
+
+    const data = {
+      class: "mpx-input",
+      value: this.value,
+      focus: this.focus,
+      placeholder: this.placeholder,
+      maxLength: this.maxLength,
+      type: inputType,
+      disabled: this.disabled,
+      ...getInnerListeners(this),
+    };
+    return h("input", data, []);
+    // return '123'
+  },
+  data() {
+    return {};
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {},
+};
+</script>
+<style lang="stylus">
+  .mpx-input
+    cursor auto
+    width 100%
+    padding 0
+    border 0
+    font inherit
+    display block
+    height 1.4rem
+    text-overflow clip
+    overflow hidden
+    white-space nowrap
+    font-family UICTFontTextStyleBody
+    min-height 1.4rem
+
+</style>

package/lib/runtime/components/tenon/tenon-rich-text.vue

@@ -0,0 +1,30 @@
+<script>
+import { parse, htmlTranStr } from './filterTag.js'
+import getInnerListeners from './getInnerListeners'
+import { h } from '@hummer/tenon-vue'
+export default {
+  name: 'mpx-rich-text',
+  props: {
+    nodes:  [Array, String],
+    space: {
+      type: String
+    }
+  },
+  render () {
+    let nodes = this.nodes
+    let html = ''
+    if (typeof this.nodes === 'string') {
+      nodes = parse(this.nodes)
+    }
+    if (Array.isArray(nodes)) {
+      html = htmlTranStr(nodes, this.space)
+    }
+    console.log('html--------', html)
+    const data = {
+      richText: html,
+      ...getInnerListeners(this)
+    }
+    return h('text', data)
+  }
+}
+</script>

package/lib/runtime/components/tenon/tenon-scroll-view.vue

@@ -0,0 +1,118 @@
+<script>
+import getInnerListeners, { getCustomEvent } from "./getInnerListeners";
+import { processSize } from "./util";
+import { h } from "@hummer/tenon-vue";
+export default {
+  name: "mpx-scroll-view",
+  props: {
+    // 允许横向滚动
+    scrollX: Boolean,
+    // 允许纵向滚动
+    scrollY: Boolean,
+    // 距顶部/左边多远时，触发 scrolltoupper 事件
+    upperThreshold: {
+      type: [Number, String],
+      default: 50,
+    },
+    // 距底部/右边多远时，触发 scrolltolower 事件
+    lowerThreshold: {
+      type: [Number, String],
+      default: 50,
+    },
+    // 设置竖向滚动条位置
+    scrollTop: {
+      type: [Number, String],
+      default: 0,
+    },
+    // 设置横向滚动条位置
+    scrollLeft: {
+      type: [Number, String],
+      default: 0,
+    },
+    scrollOptions: Object,
+    // 更新refresh
+    updateRefresh: {
+      type: Boolean,
+      default: true,
+    },
+    // 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
+    scrollIntoView: String,
+    // 在设置滚动条位置时使用动画过渡
+    scrollWithAnimation: Boolean,
+    // 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。
+    enableFlex: Boolean,
+    // 启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view
+    enhanced: Boolean,
+    // 开启自定义下拉刷新
+    refresherEnabled: Boolean,
+    // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
+    refresherTriggered: Boolean,
+    // 设置自定义下拉刷新阈值
+    refresherThreshold: {
+      type: Number,
+      default: 45,
+    },
+    // 设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式
+    refresherDefaultStyle: {
+      type: String,
+      default: "black",
+    },
+    // 设置自定义下拉刷新区域背景颜色
+    refresherBackground: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    _scrollTop() {
+      // return 1
+      return processSize(this.scrollTop);
+    },
+    _scrollLeft() {
+      // return 1
+      return processSize(this.scrollLeft);
+    },
+  },
+  mounted() {
+    if (this.scrollTop) {
+      setTimeout(() => {
+        this.$refs.scroll && this.$refs.scroll.scrollTo(0, this._scrollTop);
+      }, 100);
+    
+    }
+    if (this.scrollLeft) {
+      setTimeout(() => {
+        this.$refs.scroll && this.$refs.scroll.scrollTo(this._scrollLeft, 0);
+      }, 100);
+    }
+  },
+  watch: {
+    _scrollTop(val) {
+      console.log('触发')
+      this.$refs.scroll && this.$refs.scroll.scrollTo(0, val);
+    },
+    _scrollLeft(val) {
+      this.$refs.scroll && this.$refs.scroll.scrollTo(val, 0);
+    },
+  },
+  methods: {},
+  render() {
+    let scrollDirection = "vertical";
+    if (!this.scrollY && this.scrollX) {
+      scrollDirection = "horizontal";
+    }
+    return h(
+      "scroller",
+      {
+        ref: "scroll",
+        scrollDirection,
+        showScrollBar: true,
+      },
+      this.$slots.default()
+    );
+  },
+};
+</script>

package/lib/runtime/components/tenon/tenon-switch.vue

@@ -0,0 +1,91 @@
+<script>
+import { getCustomEvent } from "./getInnerListeners";
+import { h } from "@hummer/tenon-vue";
+export default {
+  name: "mpx-switch",
+  props: {
+    name: String,
+    type: {
+      type: String,
+      default: "switch",
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: "#04BE02",
+    },
+  },
+  watch: {
+    checked(newVal) {
+      this.switchChecked = newVal;
+    },
+  },
+  data() {
+    return {
+      switchChecked: this.checked,
+    };
+  },
+  render() {
+    let children = [];
+
+    const switchElem = h("switch", {
+      value: this.switchChecked,
+      class: [
+        "mpx-switch-label",
+        this.switchChecked ? "checked-switch-label" : "uncheck-switch-label",
+      ],
+    });
+    children.push(switchElem);
+
+    // children.push(...(this.$slots.default() || []));
+    const data = {
+      class: ["mpx-switch-wrap"],
+      ref: "switch",
+      onClick: (e) => {
+        if (this.disabled) {
+          return;
+        }
+        this.switchChecked = !this.switchChecked;
+        this.notifyChange();
+      },
+    };
+    return h("view", data, children);
+  },
+  methods: {
+    getValue() {
+      return this.switchChecked;
+    },
+    setValue(value) {
+      this.switchChecked = value;
+    },
+    notifyChange(value) {
+      if (value !== undefined) {
+        this.setValue(value);
+      } else {
+        value = this.getValue();
+      }
+      this.$emit(
+        "change",
+        getCustomEvent("change", { value }, this.$refs.switch)
+      );
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.mpx-switch-wrap
+  .mpx-switch-label
+    border-radius 16hm
+    width 52hm
+    height 32hm
+    border none
+
+</style>