@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

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

@@ -0,0 +1,99 @@
+<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,
+    },
+  },
+  computed: {
+    originRef() {
+      return this.$refs["mpx-input"]
+    }
+  },
+  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,
+      ref: "mpx-input",
+      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" scoped>
+  .mpx-input
+    cursor auto
+    width 100%
+    padding 0
+    border 0
+    font inherit
+    display block
+    text-overflow clip
+    overflow hidden
+    white-space nowrap
+    font-family UICTFontTextStyleBody
+
+</style>

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

@@ -0,0 +1,21 @@
+<script>
+import getInnerListeners from './getInnerListeners'
+import { h } from '@hummer/tenon-vue'
+export default {
+  name: 'mpx-rich-text',
+  props: {
+    richText: {
+      type: Object,
+      value: {}
+    }
+  },
+  render () {
+
+    const data = {
+      richText: this.richText,
+      ...getInnerListeners(this)
+    }
+    return h('text', data)
+  }
+}
+</script>

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

@@ -0,0 +1,124 @@
+<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,
+    // 滚动方向
+    scrollDirection: {
+      type: String,
+      default: "horizontal",
+    },
+    // 距顶部/左边多远时，触发 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 = this.scrollDirection;
+    if (!this.scrollY && this.scrollX) {
+      scrollDirection = "horizontal";
+    }
+    return h(
+      "scroller",
+      {
+        ref: "scroll",
+        scrollDirection,
+        showScrollBar: false,
+        ...getInnerListeners(this, {})
+      },
+      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" scoped>
+.mpx-switch-wrap
+  .mpx-switch-label
+    border-radius 16hm
+    width 52hm
+    height 32hm
+    border none
+
+</style>

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

@@ -0,0 +1,64 @@
+
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-textarea",
+  props: {
+    name: String,
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: String,
+    disabled: Boolean,
+    maxlength: {
+      type: Number,
+      default: 140,
+    },
+    autoFocus: Boolean,
+    focus: Boolean,
+    cursor: {
+      type: Number,
+      default: -1,
+    },
+    selectionStart: {
+      type: Number,
+      default: -1,
+    },
+    selectionEnd: {
+      type: Number,
+      default: -1,
+    },
+  },
+
+  render() {
+    const data = {
+      class: "mpx-textarea",
+      value: this.value,
+      focus: this.focus,
+      placeholder: this.placeholder,
+      maxLength: this.maxLength,
+      disabled: this.disabled,
+      ...getInnerListeners(this),
+    };
+    return h("textarea", data);
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {},
+};
+</script>
+<style lang="stylus" scoped>
+.mpx-textarea
+  font inherit
+  cursor auto
+  width 300hm
+  height 150hm
+  display block
+  position relative
+  resize none
+
+</style>

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

@@ -0,0 +1,64 @@
+
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-text",
+  props: {
+    selectable: {
+      type: Boolean,
+      default: false,
+    },
+    space: {
+      type: String,
+    },
+    decode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  render() {
+    let text = "";
+    let classNames = ["mpx-text"];
+    const nodes = this.$slots.default && this.$slots.default() || []
+    nodes.forEach((item) => {
+      if (item.shapeFlag === 8 && item.children) {
+        text += item.children;
+      }
+    });
+    // hummer不支持 暂时注释
+    // switch (this.space) {
+    //   case "ensp":
+    //   case "emsp":
+    //   case "nbsp":
+    //     text = text.replace(/ /g, `&${this.space};`);
+    //     break;
+    // }
+    return h(
+      "text",
+      {
+        class: classNames,
+        ...getInnerListeners(this),
+      },
+      text
+    );
+  },
+  data() {
+    return {};
+  },
+  beforeCreate() {},
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="stylus" scoped>
+.mpx-text
+  user-select none
+  &.selectable
+    user-select text
+
+</style>

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

@@ -0,0 +1,93 @@
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-view",
+  props: {
+    hoverClass: {
+      type: String,
+      default: "none",
+    },
+    hoverStopPropagation: {
+      type: Boolean,
+      default: false,
+    },
+    hoverStartTime: {
+      type: Number,
+      default: 50,
+    },
+    hoverStayTime: {
+      type: Number,
+      default: 400,
+    },
+  },
+  render() {
+    let mergeAfter;
+    if (this.hoverClass && this.hoverClass !== "none") {
+      mergeAfter = {
+        listeners: {
+          onTouchstart: this.handleTouchstart,
+          onTouchend: this.handleTouchend,
+        },
+        force: true,
+      };
+    }
+    return h(
+      "view",
+      {
+        class: this.className,
+        ...getInnerListeners(this, { mergeAfter }),
+        ref: "mpx-view"
+      },
+      this.$slots.default && this.$slots.default() || ''
+    );
+  },
+  data() {
+    return {
+      hover: false,
+    };
+  },
+  computed: {
+    className() {
+      let result = {};
+      if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
+        result = {
+          "mpx-view": true,
+          [this.hoverClass]: true,
+        };
+      } else {
+        result = {
+          "mpx-view": true,
+          [this.hoverClass]: false,
+        };
+      }
+      return result;
+    },
+    originRef() {
+      return this.$refs["mpx-view"]
+    }
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  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>

package/lib/runtime/components/tenon/util.js

@@ -0,0 +1,44 @@
+/**
+ @file web运行时组件抹平中需要用到的一些工具方法
+ */
+
+/**
+ * 处理字符串类型的宽高数值，兼容rpx
+ * @param {object | number} size 宽高
+ * @param {object} option 配置项，目前仅支持配置默认值
+ * @param {number} option.default 默认值,当传入的size有问题时返回
+ * @returns {number} 处理后的数字宽高，单位px
+ */
+export function processSize (size, option = {}) {
+  const defaultValue = option.default || 0
+  if (typeof size === 'number') {
+    return size
+  } else if (typeof size === 'string') {
+    const rs = parseInt(size, 10)
+    if (size.indexOf('rpx') !== -1) {
+      // 计算rpx折算回px
+      const width = window.screen.width
+      const finalRs = Math.floor(rs / 750 * width)
+      return finalRs
+    } else {
+      return isNaN(rs) ? defaultValue : rs
+    }
+  } else {
+    return defaultValue
+  }
+}
+
+// 判断对象类型
+export function type (n) {
+  return Object.prototype.toString.call(n).slice(8, -1)
+}
+
+export function isEmptyObject (obj) {
+  if (!obj) {
+    return true
+  }
+  for (let key in obj) {
+    return false
+  }
+  return true
+}

package/lib/runtime/components/web/getInnerListeners.js

@@ -1,7 +1,5 @@
 import { isEmptyObject } from './util'
-import { inBrowser } from '../../../utils/env'
-
-const isTouchDevice = inBrowser && ('ontouchstart' in document.documentElement)
+const isTouchDevice = 'ontouchstart' in document.documentElement
 
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值

package/lib/runtime/components/web/mpx-image.vue

@@ -1,5 +1,5 @@
 <script>
-  import getInnerListeners from './getInnerListeners'
+  import getInnerListeners, { extendEvent } from './getInnerListeners'
 
   export default {
     name: 'mpx-image',
@@ -23,6 +23,13 @@
     beforeCreate () {
       this.image = new Image()
       this.image.onload = (e) => {
+        extendEvent(e, {
+          detail: {
+            width: this.image.width,
+            height: this.image.height
+          }
+        })
+
         this.$emit('load', e)
       }
       this.image.onerror = (e) => {
@@ -38,14 +45,22 @@
       }
     },
     render (createElement) {
-      if (this.mode === 'widthFix') {
+      if (this.mode === 'widthFix' || this.mode === 'heightFix') {
+        let style
+        if (this.mode === 'widthFix') {
+           style = {
+             height: 'auto'
+           }
+        } else {
+          style = {
+            width: 'auto'
+          }
+        }
         const domProps = {}
         if (this.src) domProps.src = this.src
         return createElement('img', {
           domProps,
-          style: {
-            height: 'auto'
-          },
+          style,
           class: ['mpx-image'],
           on: getInnerListeners(this, { ignoredListeners: ['load', 'error'] })
         })

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -85,6 +85,10 @@
       animation: {
         type: Boolean,
         default: true
+      },
+      speed: {
+        type: Number,
+        default: 1000
       }
     },
     watch: {
@@ -96,7 +100,7 @@
         if (newVal < this.bs.maxScrollX) {
           newVal = this.bs.maxScrollX
         }
-        this.bs.scrollTo(newVal, this.bs.y)
+        this.bs.scrollTo(newVal, this.bs.y, this.speed)
       },
       y (newVal) {
         this.source = ''
@@ -106,7 +110,7 @@
         if (newVal < this.bs.maxScrollY) {
           newVal = this.bs.maxScrollY
         }
-        this.bs.scrollTo(this.bs.x, newVal)
+        this.bs.scrollTo(this.bs.x, newVal, this.speed)
       },
       scaleValue (newVal) {
         this.isZooming = true