eoss 0.1.0-alpha.44 → 0.1.0-alpha.46

package/lib/input-number.js

@@ -142,7 +142,7 @@ module.exports = require("vue");
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/input-number/src/input-number.vue?vue&type=template&id=1bf5c763&
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/input-number/src/input-number.vue?vue&type=template&id=40f587bb&
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
@@ -312,7 +312,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/input-number/src/input-number.vue?vue&type=template&id=1bf5c763&
+// CONCATENATED MODULE: ./packages/input-number/src/input-number.vue?vue&type=template&id=40f587bb&
 
 // EXTERNAL MODULE: external "eoss/lib/input"
 var input_ = __webpack_require__(14);
@@ -795,7 +795,10 @@ var repeat_click = __webpack_require__(105);
     }
   },
   mounted: function mounted() {
+    // 只读态下内部 es-input 被 v-if 移除，ref 不存在，需与 updated 同样防护
+    if (!this.$refs || !this.$refs.input) return;
     var innerInput = this.$refs.input.$refs.input;
+    if (!innerInput) return;
     innerInput.setAttribute('role', 'spinbutton');
     innerInput.setAttribute('aria-valuemax', this.max);
     innerInput.setAttribute('aria-valuemin', this.min);
@@ -805,6 +808,7 @@ var repeat_click = __webpack_require__(105);
   updated: function updated() {
     if (!this.$refs || !this.$refs.input) return;
     var innerInput = this.$refs.input.$refs.input;
+    if (!innerInput) return;
     innerInput.setAttribute('aria-valuenow', this.currentValue);
   }
 });

package/lib/input.js

@@ -3619,7 +3619,7 @@ module.exports = require("vue");
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/input/src/input.vue?vue&type=template&id=782c4367&
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/input/src/input.vue?vue&type=template&id=7d4041a6&
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
@@ -3684,62 +3684,76 @@ var render = function () {
                   2
                 )
               : _vm._e(),
-            _vm.type === "password" ||
-            (_vm.showPassword && !_vm.passwordVisible)
-              ? _c("input", {
-                  staticClass: "es-input__hidden",
-                  staticStyle: {
-                    position: "absolute",
-                    top: "-9999px",
-                    left: "-9999px",
-                    width: "0",
-                    height: "0",
-                    opacity: "0",
-                  },
-                  attrs: { type: "password", autocomplete: "off" },
-                })
-              : _vm._e(),
-            _vm.type !== "textarea"
-              ? _c(
-                  "input",
-                  _vm._b(
-                    {
-                      ref: "input",
-                      staticClass: "es-input__inner",
-                      class: { "is-round": _vm.round },
-                      style: _vm.innerStyle,
-                      attrs: {
-                        tabindex: _vm.tabindex,
-                        type: _vm.showPassword
-                          ? _vm.passwordVisible
-                            ? "text"
-                            : "password"
-                          : _vm.type,
-                        disabled: _vm.inputDisabled,
-                        readonly: _vm.inputReadonly,
-                        autocomplete:
-                          _vm.type === "password" ||
-                          (_vm.showPassword && !_vm.passwordVisible)
-                            ? "new-password"
-                            : _vm.autoComplete || _vm.autocomplete,
-                        "aria-label": _vm.label,
-                      },
-                      on: {
-                        compositionstart: _vm.handleCompositionStart,
-                        compositionupdate: _vm.handleCompositionUpdate,
-                        compositionend: _vm.handleCompositionEnd,
-                        input: _vm.handleInput,
-                        focus: _vm.handleFocus,
-                        blur: _vm.handleBlur,
-                        change: _vm.handleChange,
-                      },
-                    },
-                    "input",
-                    _vm.$attrs,
-                    false
-                  )
-                )
-              : _vm._e(),
+            _vm.inputReadonly
+              ? _c("div", { staticClass: "es-field-readonly" }, [
+                  _vm._v(
+                    "\n      " +
+                      _vm._s(
+                        _vm.passwordVisible
+                          ? _vm.nativeInputValue
+                          : _vm.maskedInputValue
+                      ) +
+                      "\n    "
+                  ),
+                ])
+              : [
+                  _vm.type === "password" ||
+                  (_vm.showPassword && !_vm.passwordVisible)
+                    ? _c("input", {
+                        staticClass: "es-input__hidden",
+                        staticStyle: {
+                          position: "absolute",
+                          top: "-9999px",
+                          left: "-9999px",
+                          width: "0",
+                          height: "0",
+                          opacity: "0",
+                        },
+                        attrs: { type: "password", autocomplete: "off" },
+                      })
+                    : _vm._e(),
+                  _vm.type !== "textarea"
+                    ? _c(
+                        "input",
+                        _vm._b(
+                          {
+                            ref: "input",
+                            staticClass: "es-input__inner",
+                            class: { "is-round": _vm.round },
+                            style: _vm.innerStyle,
+                            attrs: {
+                              tabindex: _vm.tabindex,
+                              type: _vm.showPassword
+                                ? _vm.passwordVisible
+                                  ? "text"
+                                  : "password"
+                                : _vm.type,
+                              disabled: _vm.inputDisabled,
+                              readonly: _vm.nativeReadonly,
+                              autocomplete:
+                                _vm.type === "password" ||
+                                (_vm.showPassword && !_vm.passwordVisible)
+                                  ? "new-password"
+                                  : _vm.autoComplete || _vm.autocomplete,
+                              "aria-label": _vm.label,
+                            },
+                            on: {
+                              compositionstart: _vm.handleCompositionStart,
+                              compositionupdate: _vm.handleCompositionUpdate,
+                              compositionend: _vm.handleCompositionEnd,
+                              input: _vm.handleInput,
+                              focus: _vm.handleFocus,
+                              blur: _vm.handleBlur,
+                              change: _vm.handleChange,
+                            },
+                          },
+                          "input",
+                          _vm.$attrs,
+                          false
+                        )
+                      )
+                    : _vm._e(),
+                ],
             _vm.$slots.prefix || _vm.prefix || _vm.prefixIcon
               ? _c(
                   "span",
@@ -3880,35 +3894,50 @@ var render = function () {
                 )
               : _vm._e(),
           ]
-        : _c(
-            "textarea",
-            _vm._b(
-              {
-                ref: "textarea",
-                staticClass: "es-textarea__inner",
-                style: _vm.textareaStyle,
-                attrs: {
-                  tabindex: _vm.tabindex,
-                  disabled: _vm.inputDisabled,
-                  readonly: _vm.inputReadonly,
-                  autocomplete: _vm.autoComplete || _vm.autocomplete,
-                  "aria-label": _vm.label,
-                },
-                on: {
-                  compositionstart: _vm.handleCompositionStart,
-                  compositionupdate: _vm.handleCompositionUpdate,
-                  compositionend: _vm.handleCompositionEnd,
-                  input: _vm.handleInput,
-                  focus: _vm.handleFocus,
-                  blur: _vm.handleBlur,
-                  change: _vm.handleChange,
-                },
-              },
-              "textarea",
-              _vm.$attrs,
-              false
-            )
-          ),
+        : [
+            _vm.inputReadonly
+              ? _c(
+                  "div",
+                  {
+                    staticClass:
+                      "es-field-readonly es-field-readonly--textarea",
+                    staticStyle: {
+                      "white-space": "pre-wrap",
+                      "word-break": "break-all",
+                    },
+                  },
+                  [_vm._v("\n      " + _vm._s(_vm.nativeInputValue) + "\n    ")]
+                )
+              : _c(
+                  "textarea",
+                  _vm._b(
+                    {
+                      ref: "textarea",
+                      staticClass: "es-textarea__inner",
+                      style: _vm.textareaStyle,
+                      attrs: {
+                        tabindex: _vm.tabindex,
+                        disabled: _vm.inputDisabled,
+                        readonly: _vm.nativeReadonly,
+                        autocomplete: _vm.autoComplete || _vm.autocomplete,
+                        "aria-label": _vm.label,
+                      },
+                      on: {
+                        compositionstart: _vm.handleCompositionStart,
+                        compositionupdate: _vm.handleCompositionUpdate,
+                        compositionend: _vm.handleCompositionEnd,
+                        input: _vm.handleInput,
+                        focus: _vm.handleFocus,
+                        blur: _vm.handleBlur,
+                        change: _vm.handleChange,
+                      },
+                    },
+                    "textarea",
+                    _vm.$attrs,
+                    false
+                  )
+                ),
+          ],
       _vm.isWordLimitVisible && _vm.type === "textarea"
         ? _c("span", { staticClass: "es-input__count" }, [
             _vm._v(_vm._s(_vm.textLength) + "/" + _vm._s(_vm.upperLimit)),
@@ -3923,7 +3952,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/input/src/input.vue?vue&type=template&id=782c4367&
+// CONCATENATED MODULE: ./packages/input/src/input.vue?vue&type=template&id=7d4041a6&
 
 // EXTERNAL MODULE: ./src/mixins/emitter.js
 var emitter = __webpack_require__(15);
@@ -4177,6 +4206,21 @@ var resize_event = __webpack_require__(39);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -4278,6 +4322,14 @@ var resize_event = __webpack_require__(39);
      * @default false
      */
     readonly: Boolean,
+    /**
+     * 仅绑定原生 input 的 readonly 属性（行为标志，供 select/cascader/picker 内部使用）
+     * @type {Boolean}
+     * @default false
+     * @description 这些复合组件给内部 es-input 传的 readonly 是"禁止打字但保留输入框结构"
+     *   的行为标志（普通态也常为 true），若走 readonly 会命中只读 div 分支导致布局破坏
+     */
+    nativeReadonly: Boolean,
     /**
      * 输入框类型
      * @type {String}
@@ -4453,6 +4505,15 @@ var resize_event = __webpack_require__(39);
     nativeInputValue: function nativeInputValue() {
       return this.value === null || this.value === undefined ? '' : String(this.value);
     },
+
+    // 只读 div 用：密码型（含 showPassword 未点眼预览）按原生表现打码，
+    // div 无法应用 type="password"，直接以掩码字符回显
+    maskedInputValue: function maskedInputValue() {
+      if (this.type !== 'password' && !(this.showPassword && !this.passwordVisible)) {
+        return this.nativeInputValue;
+      }
+      return '*'.repeat(this.nativeInputValue.length);
+    },
     showClear: function showClear() {
       return this.clearable && !this.inputDisabled && !this.inputReadonly && this.nativeInputValue && (this.focused || this.hovering);
     },

package/lib/select.js

@@ -5571,7 +5571,7 @@ var doDecrypt = function doDecrypt(_ref2) {
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/select/src/select.vue?vue&type=template&id=4baed3ce&
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/select/src/select.vue?vue&type=template&id=5f1334b0&
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
@@ -5905,7 +5905,7 @@ var render = function () {
                   autocomplete: _vm.autocomplete,
                   size: _vm.selectSize,
                   disabled: _vm.selectDisabled,
-                  readonly: _vm.inputReadonly,
+                  "native-readonly": _vm.inputReadonly,
                   "validate-event": false,
                   tabindex: _vm.tabindex,
                   prefix: _vm.prefix,
@@ -6083,6 +6083,12 @@ var render = function () {
                           "es-scrollbar",
                           {
                             directives: [
+                              {
+                                name: "loading",
+                                rawName: "v-loading",
+                                value: _vm.isLoading,
+                                expression: "isLoading",
+                              },
                               {
                                 name: "show",
                                 rawName: "v-show",
@@ -6102,6 +6108,14 @@ var render = function () {
                               "wrap-class": "es-select-dropdown__wrap",
                               "view-class": "es-select-dropdown__list",
                               listener: true,
+                              "infinite-scroll": _vm.innerInfiniteScroll,
+                              "infinite-scroll-disabled":
+                                _vm.innerInfiniteScrollDisabled,
+                              "infinite-scroll-distance":
+                                _vm.infiniteScrollDistance,
+                              "infinite-scroll-delay": _vm.infiniteScrollDelay,
+                              "infinite-scroll-immediate":
+                                _vm.infiniteScrollImmediate,
                             },
                           },
                           [
@@ -6235,6 +6249,21 @@ var render = function () {
                                   : _vm._e(),
                               ]
                             }),
+                            _vm.lazyEnabled &&
+                            _vm.lazyFinished &&
+                            _vm.lazyPageNum > 1
+                              ? _c(
+                                  "div",
+                                  {
+                                    staticClass: "es-select-dropdown__finished",
+                                  },
+                                  [
+                                    _vm._v(
+                                      "\n            没有更多数据了\n          "
+                                    ),
+                                  ]
+                                )
+                              : _vm._e(),
                           ],
                           2
                         ),
@@ -6278,7 +6307,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/select/src/select.vue?vue&type=template&id=4baed3ce&
+// CONCATENATED MODULE: ./packages/select/src/select.vue?vue&type=template&id=5f1334b0&
 
 // EXTERNAL MODULE: ./src/mixins/emitter.js
 var emitter = __webpack_require__(15);
@@ -7099,6 +7128,19 @@ var _this = undefined;
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -7541,7 +7583,80 @@ var _this = undefined;
      * 选项值的键名
      * @type {String}
      */
-    valueKey: String
+    valueKey: String,
+    /**
+     * 无限滚动回调：下拉列表滚动到底部时触发，用于分页加载更多选项
+     * @type {Function}
+     * @description 选项数据由外部接口分页提供时，在回调中请求下一页并追加到 data；
+     *   没有更多数据时由外部置 infiniteScrollDisabled 为 true 停止触发
+     */
+    infiniteScroll: Function,
+    /**
+     * 是否禁用无限滚动
+     * @type {Boolean}
+     * @default false
+     */
+    infiniteScrollDisabled: Boolean,
+    /**
+     * 距底部多少 px 时触发无限滚动
+     * @type {Number}
+     * @default 0
+     */
+    infiniteScrollDistance: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * 无限滚动回调的节流间隔（ms），透传给内部 es-scrollbar
+     * @type {Number}
+     * @default 200
+     */
+    infiniteScrollDelay: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * 是否挂载后立即触发一次回调
+     * @type {Boolean}
+     * @default false
+     * @description 与 es-scrollbar 默认值（true）不同：下拉的滚动条随 select 一起挂载，
+     *   默认 true 会导致下拉尚未打开就自动请求首页，故这里默认关闭
+     */
+    infiniteScrollImmediate: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否开启选项懒加载（分页加载）
+     * @type {Boolean}
+     * @default false
+     * @description 对 tree 为 false 的平铺 ul 列表生效，两种数据来源均支持：
+     *   1. url 取数：初始化请求第一页，下拉滚动到底部时自动续拉下一页并追加（内部复用无限滚动），
+     *      请求期间列表显示 loading；某页返回条数小于 pageSize 视为加载完毕停止触发
+     *   2. data 外部传入（未配置 url）：本地分页，先渲染前 pageSize 条，
+     *      滚动到底部时同步切片追加下一页；data 变化时重置回第一页
+     */
+    lazy: Boolean,
+    /**
+     * 懒加载每页条数（url 取数时作为请求参数 pageNum/pageSize 随 param 一起 POST 给 url；
+     * data 本地懒加载时作为每页切片条数）
+     * @type {Number}
+     * @default 50
+     */
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * ajax 配置
+     * @type {Object}
+     */
+    ajaxConfig: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
   },
 
   computed: {
@@ -7555,6 +7670,26 @@ var _this = undefined;
       return this.valueKey || (this.sysCode ? 'cciValue' : 'value');
     },
 
+    // 懒加载生效条件：开启 lazy、非树形（平铺 ul 列表）、有数据来源（url 取数或 data 传入）
+    lazyEnabled: function lazyEnabled() {
+      return this.lazy && !this.tree && (!!this.url || this.data.length > 0);
+    },
+
+    // 本地懒加载：未配置 url、由外部 data 传入时的分页切片模式
+    localLazyEnabled: function localLazyEnabled() {
+      return this.lazyEnabled && !this.url;
+    },
+
+    // 无限滚动回调：懒加载模式走内部分页续拉，否则透传外部 infiniteScroll
+    innerInfiniteScroll: function innerInfiniteScroll() {
+      return this.lazyEnabled ? this.loadMoreOptions : this.infiniteScroll;
+    },
+
+    // 无限滚动禁用：外部禁用，或懒加载中/已加载完时避免重复触发
+    innerInfiniteScrollDisabled: function innerInfiniteScrollDisabled() {
+      return this.infiniteScrollDisabled || this.lazyEnabled && (this.isLoading || this.lazyFinished);
+    },
+
     model: {
       get: function get() {
         if (this.multiple) {
@@ -7621,7 +7756,8 @@ var _this = undefined;
       return this.remote ? 300 : 0;
     },
     emptyText: function emptyText() {
-      if (this.loading) {
+      // 懒加载首页请求中列表尚为空，展示加载中而非无数据
+      if (this.loading || this.isLoading && this.options.length === 0) {
         return this.loadingText || '加载中';
       }
 
@@ -7682,7 +7818,14 @@ var _this = undefined;
   watch: {
     data: {
       handler: function handler(val) {
-        this.results = val;
+        if (this.localLazyEnabled) {
+          // 本地懒加载：数据变化时重置回第一页重新切片
+          this.lazyPageNum = 1;
+          this.lazyFinished = false;
+          this.applyLocalLazySlice();
+        } else {
+          this.results = val;
+        }
       },
 
       deep: true
@@ -7865,7 +8008,14 @@ var _this = undefined;
       isDestroy: false,
       innerStyle: {},
       results: this.data,
-      _propsCache: new Map()
+      // 懒加载分页状态：已加载到的页码 / 是否已加载完
+      lazyPageNum: 1,
+      lazyFinished: false,
+      // 懒加载重置时保存的基础参数（this.param + 搜索参数），续拉复用，保证远程搜索词不丢
+      lazyBaseParams: {},
+      _propsCache: new Map(),
+      // 是否请求中（驱动 es-scrollbar 上的 v-loading）
+      isLoading: false
     };
   },
   created: function created() {
@@ -7896,6 +8046,10 @@ var _this = undefined;
 
     this.$on('handleOptionClick', this.handleOptionSelect);
     this.$on('setSelected', this.setSelected);
+    // 本地懒加载：初始只渲染 data 的第一页切片
+    if (this.localLazyEnabled) {
+      this.applyLocalLazySlice();
+    }
     this.debouncedGetData();
   },
   mounted: function mounted() {
@@ -7996,26 +8150,94 @@ var _this = undefined;
      * @param {Object} options - 配置选项
      * @param {String} options.url - 接口地址
      * @param {Object} options.params - 接口参数
+     * @param {Boolean} options.append - 懒加载续拉下一页并追加（仅 lazyEnabled 时生效）
      */
-    getData: function getData(_ref) {
+    getData: function getData() {
       var _this10 = this;
 
-      var url = _ref.url,
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          url = _ref.url,
           _ref$params = _ref.params,
-          params = _ref$params === undefined ? {} : _ref$params;
+          params = _ref$params === undefined ? {} : _ref$params,
+          _ref$append = _ref.append,
+          append = _ref$append === undefined ? false : _ref$append;
 
       url = url || this.url;
       params = selectvue_type_script_lang_js_extends({}, this.param, params);
-      url && Object(ajax["a" /* ajax */])({
+      if (!url) return;
+      if (this.lazyEnabled) {
+        // 请求中禁用无限滚动，避免首页在途时空列表触底又发续拉请求
+        this.isLoading = true;
+        if (append) {
+          // 续拉下一页：复用重置时保存的基础参数（含远程搜索词），避免续拉丢搜索条件
+          params = selectvue_type_script_lang_js_extends({}, this.lazyBaseParams, {
+            pageNum: this.lazyPageNum + 1,
+            pageSize: this.pageSize
+          });
+        } else {
+          // 初始化/参数变化/远程搜索：重置分页请求第一页
+          this.lazyPageNum = 1;
+          this.lazyFinished = false;
+          this.lazyBaseParams = params;
+          params = selectvue_type_script_lang_js_extends({}, params, { pageNum: 1, pageSize: this.pageSize });
+        }
+      }
+      Object(ajax["a" /* ajax */])(selectvue_type_script_lang_js_extends({
         url: url,
-        method: 'POST',
-        data: params
-      }).then(function (res) {
+        method: 'POST'
+      }, this.ajaxConfig, {
+        data: params,
+        params: params
+      })).then(function (res) {
         if (res.rCode === 0) {
-          _this10.results = res.results || [];
+          // 兼容分页包装对象（{ records }）与直接返回数组两种结构
+          var payload = res.results || [];
+          var rows = Array.isArray(payload) ? payload : payload.records || [];
+          if (_this10.lazyEnabled && append) {
+            _this10.results = _this10.results.concat(rows);
+            _this10.lazyPageNum += 1;
+          } else {
+            _this10.results = rows;
+          }
+          // 返回条数不足一页视为已加载完，停止触发续拉
+          // （没有更多提示需翻过页才显示，见模板 lazyPageNum > 1）
+          if (_this10.lazyEnabled && rows.length < _this10.pageSize) {
+            _this10.lazyFinished = true;
+          }
         }
+        _this10.isLoading = false;
+      }).catch(function () {
+        _this10.isLoading = false;
       });
     },
+
+    /**
+     * 懒加载：滚动到底部时加载下一页（由内部无限滚动触发，带防重入守卫）
+     * 本地懒加载为同步切片追加，url 懒加载为异步续拉请求
+     */
+    loadMoreOptions: function loadMoreOptions() {
+      if (!this.lazyEnabled || this.isLoading || this.lazyFinished || !this.results.length) return;
+      if (this.localLazyEnabled) {
+        this.lazyPageNum += 1;
+        this.applyLocalLazySlice();
+      } else {
+        this.getData({ append: true });
+      }
+    },
+
+    /**
+     * 本地懒加载：按当前 lazyPageNum 对 data 做切片渲染（0 ~ pageNum*pageSize），
+     * 翻过页且切到末尾时置 lazyFinished 停止触发并显示没有更多提示
+     * （首页即覆盖全量属正常小数据量，不置位不提示）
+     */
+    applyLocalLazySlice: function applyLocalLazySlice() {
+      var list = this.data || [];
+      var end = this.lazyPageNum * this.pageSize;
+      this.results = list.slice(0, end);
+      if (this.lazyPageNum > 1 && end >= list.length) {
+        this.lazyFinished = true;
+      }
+    },
     handleComposition: function handleComposition(event) {
       var _this11 = this;