@mpxjs/webpack-plugin 2.9.67 → 2.9.70-alpha.0

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

@@ -0,0 +1,309 @@
+<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: {
+      originRef() {
+        return this.$refs["mpx-button"]
+      },
+      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],
+        ref: "mpx-button",
+        ...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" scoped>
+.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,66 @@
+<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",
+      ref: "mpx-image",
+      src: this.src,
+      resize,
+      ...getInnerListeners(this)
+    });
+  },
+  computed: {
+    originRef() {
+      return this.$refs["mpx-image"]
+    }
+  },
+  data() {
+    return {};
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="stylus" scoped>
+.mpx-image
+  width 300px
+  height 225px
+</style>

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

@@ -0,0 +1,171 @@
+<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,
+    },
+    style: {
+      type: String,
+      default: '',
+    },
+    placeholderStyle: {
+      type: String,
+      default: '',
+    },
+    confirmType: {
+      type: String,
+      default: 'done',
+    }
+  },
+  computed: {
+    originRef() {
+      return this.$refs["mpx-input"]
+    },
+    computedStyle() {
+      let _inputWrapStyleObj = {
+        "font-size": "33hm",
+        height: "80hm",
+        "line-height": "80hm",
+        color: "#000000",
+        border: "1hm solid #999999",
+        "border-radius": "8hm",
+        "text-align": "left",
+        "background-color": "#ffffff"
+      };
+
+      if (typeof this.style !== 'string') {
+        console.warn('Runtime warning: PROPS style must be string')
+      }
+
+      let _styleObj = {};
+
+      if (typeof this.style === 'string') {
+        let _style = this.style;
+
+        if (_style[_style.length - 1] !== ";") {
+          _style += ";";
+        }
+
+        _style.split(";").map(item => {
+          if (item) {
+            let itemArray = item.split(":");
+            _styleObj[itemArray[0]] = itemArray[1];
+          }
+        });
+      }
+      
+      //HACK: tenon会存在读到this.style为封装标签的样式 @曹恩泽
+      if (typeof this.style === 'object') {
+        _styleObj = Object.assign({}, _styleObj, this.style)
+      }
+
+      let styleObj = Object.assign({}, _inputWrapStyleObj, _styleObj);
+      let style = Object.keys(styleObj)
+        .map(k => `${k}:${styleObj[k]}`)
+        .join(";");
+
+      //Tenon变更placeholderColor
+      const regex = /color/i
+      style += this.placeholderStyle.replace(regex, 'placeholderColor');
+      return style;
+    },
+  },
+  watch: {
+    value: function (newVal, oldVal) {
+      console.log(newVal)
+      if (this.originRef && newVal !== this.originRef.value) {
+        this.originRef.value = newVal;
+      }
+    }
+  },
+  render() {
+    let inputType = "";
+    if (this.password) {
+      inputType = "password";
+    } else {
+      switch (this.type) {
+        case "text":
+          inputType = "default";
+          break;
+        case "number":
+          inputType = "number";
+          break;
+        case "tel":
+          inputType = "tel";
+          break;
+        default:
+          inputType = "text";
+      }
+    }
+
+    const data = {
+      class: "mpx-input",
+      focused: this.focus,
+      ref: "mpx-input",
+      placeholder: this.placeholder,
+      maxLength: this.maxlength,
+      type: inputType,
+      disabled: this.disabled,
+      style: this.computedStyle,
+      returnKeyType: this.confirmType,
+      value: this.value,
+      ...getInnerListeners(this, { _input: true }),
+    };
+    return h("input", data, []);
+  },
+  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,26 @@
+<script>
+import getInnerListeners from './getInnerListeners'
+import { h } from '@hummer/tenon-vue'
+export default {
+  name: 'mpx-rich-text',
+  props: {
+    richText: {
+      type: Object,
+      value: {}
+    }
+  },
+  computed: {
+    originRef() {
+      return this.$refs["mpx-richtext"]
+    }
+  },
+  render () {
+    const data = {
+      richText: this.richText,
+      ref: "mpx-richtext",
+      ...getInnerListeners(this)
+    }
+    return h('text', data)
+  }
+}
+</script>

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

@@ -0,0 +1,127 @@
+<script>
+import getInnerListeners from "./getInnerListeners";
+import { processSize } from '../../utils';
+import { h } from "@hummer/tenon-vue";
+export default {
+  name: "mpx-scroll-view",
+  props: {
+    // 允许横向滚动
+    scrollX: Boolean,
+    // 允许纵向滚动
+    scrollY: Boolean,
+    // 滚动方向-默认竖向滚动
+    scrollDirection: {
+      type: String,
+      default: "vertical",
+    },
+    // 距顶部/左边多远时，触发 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: {
+    originRef() {
+      return this.$refs["scroll"]
+    },
+    _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>