@egjs/vue3-flicking 4.3.0 → 4.4.2

package/dist/flicking.esm.js

@@ -4,12 +4,12 @@ name: @egjs/vue3-flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/vue3-flicking
-version: 4.3.0
+version: 4.4.2
 */
-import { Vue, Options, prop } from 'vue-class-component';
+import { defineComponent, getCurrentInstance, resolveComponent, h, Fragment } from 'vue';
 import ListDiffer from '@egjs/list-differ';
-import { h, Fragment, resolveComponent } from 'vue';
-import VanillaFlicking, { ExternalPanel, ExternalRenderer, EVENTS, sync, getDefaultCameraTransform, getRenderingPanels, withFlickingMethods } from '@egjs/flicking';
+import Component from '@egjs/component';
+import VanillaFlicking__default, { getFlickingAttached, ExternalRenderer, getRenderingPanels, range, withFlickingMethods, VirtualRenderingStrategy, NormalRenderingStrategy, EVENTS, sync, getDefaultCameraTransform } from '@egjs/flicking';
 export * from '@egjs/flicking';
 
 /*! *****************************************************************************
@@ -63,13 +63,6 @@ var __assign = function () {
 
   return __assign.apply(this, arguments);
 };
-function __decorate(decorators, target, key, desc) {
-  var c = arguments.length,
-      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-      d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
 function __awaiter(thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -209,51 +202,55 @@ function __generator(thisArg, body) {
     };
   }
 }
-/** @deprecated */
-
-function __spreadArrays() {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
-
-  return r;
-}
-
-var VuePanel =
-/*#__PURE__*/
-function (_super) {
-  __extends(VuePanel, _super);
-
-  function VuePanel() {
-    return _super !== null && _super.apply(this, arguments) || this;
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
   }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
 
-  var __proto = VuePanel.prototype;
-  Object.defineProperty(__proto, "element", {
-    get: function () {
-      return this._externalComponent.$.subTree.children[0].el;
+var FlickingProps = {
+  viewportTag: {
+    type: String,
+    default: "div",
+    required: false
+  },
+  cameraTag: {
+    type: String,
+    default: "div",
+    required: false
+  },
+  hideBeforeInit: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  firstPanelSize: {
+    type: String,
+    required: false
+  },
+  options: {
+    type: Object,
+    default: function () {
+      return {};
     },
-    enumerable: false,
-    configurable: true
-  });
-  Object.defineProperty(__proto, "rendered", {
-    get: function () {
-      return !this._externalComponent.hide;
+    required: false
+  },
+  plugins: {
+    type: Array,
+    default: function () {
+      return [];
     },
-    enumerable: false,
-    configurable: true
-  });
-
-  __proto.markForShow = function () {
-    this._externalComponent.hide = false;
-  };
-
-  __proto.markForHide = function () {
-    this._externalComponent.hide = true;
-  };
-
-  return VuePanel;
-}(ExternalPanel);
+    required: false
+  },
+  status: {
+    type: Object,
+    required: false
+  }
+};
 
 var VueRenderer =
 /*#__PURE__*/
@@ -265,159 +262,206 @@ function (_super) {
 
     _this._vueFlicking = options.vueFlicking;
     return _this;
-  } // eslint-disable-next-line @typescript-eslint/require-await
-
+  }
 
   var __proto = VueRenderer.prototype;
 
   __proto.render = function () {
     return __awaiter(this, void 0, void 0, function () {
-      var flicking;
+      var flicking, vueFlicking, strategy;
       return __generator(this, function (_a) {
-        flicking = this._flicking;
-        if (!flicking) return [2
-        /*return*/
-        ];
-
-        this._updateRenderingPanels();
-
-        this._vueFlicking.$forceUpdate();
-
+        flicking = getFlickingAttached(this._flicking);
+        vueFlicking = this._vueFlicking;
+        strategy = this._strategy;
+        strategy.updateRenderingPanels(flicking);
+        strategy.renderPanels(flicking);
         return [2
         /*return*/
-        ];
+        , new Promise(function (resolve) {
+          vueFlicking.renderEmitter.once("render", resolve);
+          vueFlicking.$forceUpdate();
+        })];
       });
     });
-  }; // eslint-disable-next-line @typescript-eslint/require-await
-
+  };
 
   __proto.forceRenderAllPanels = function () {
     return __awaiter(this, void 0, void 0, function () {
+      var vueFlicking;
       return __generator(this, function (_a) {
-        this._panels.forEach(function (panel) {
-          return panel.markForShow();
-        });
-
-        this._vueFlicking.$forceUpdate();
-
-        return [2
-        /*return*/
-        ];
+        switch (_a.label) {
+          case 0:
+            vueFlicking = this._vueFlicking;
+            return [4
+            /*yield*/
+            , _super.prototype.forceRenderAllPanels.call(this)];
+
+          case 1:
+            _a.sent();
+
+            return [2
+            /*return*/
+            , new Promise(function (resolve) {
+              vueFlicking.renderEmitter.once("render", resolve);
+              vueFlicking.$forceUpdate();
+            })];
+        }
       });
     });
   };
 
   __proto._collectPanels = function () {
-    var _this = this;
-
-    var align = this._getPanelAlign();
-
-    var childRefs = this._vueFlicking.$refs;
-    var children = Object.keys(childRefs).map(function (refKey) {
+    var flicking = getFlickingAttached(this._flicking);
+    var vueFlicking = this._vueFlicking;
+    var childRefs = vueFlicking.$refs;
+    var vuePanels = Object.keys(childRefs).map(function (refKey) {
       return childRefs[refKey];
     });
-    this._panels = children.map(function (panelComponent, index) {
-      return new VuePanel({
-        flicking: _this._flicking,
-        index: index,
-        align: align,
-        externalComponent: panelComponent
-      });
-    });
+    this._panels = this._strategy.collectPanels(flicking, vuePanels);
   };
 
   __proto._createPanel = function (externalComponent, options) {
-    return new VuePanel(__assign({
-      externalComponent: externalComponent
-    }, options));
+    return this._strategy.createPanel(externalComponent, options);
   };
 
   return VueRenderer;
 }(ExternalRenderer);
 
-var VuePanelComponent =
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+var VuePanel = defineComponent({
+  data: function () {
+    return {
+      hide: false
+    };
+  },
+  render: function () {
+    if (this.hide || !this.$slots.default) return;
+    return this.$slots.default();
+  }
+});
+
+var VueElementProvider =
 /*#__PURE__*/
-function (_super) {
-  __extends(VuePanelComponent, _super);
+function () {
+  function VueElementProvider(el) {
+    this._el = el;
+  }
 
-  function VuePanelComponent() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+  var __proto = VueElementProvider.prototype;
+  Object.defineProperty(__proto, "rendered", {
+    get: function () {
+      return !this._el.hide;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "element", {
+    get: function () {
+      var el = this._el.$el.nextSibling;
 
-    _this.hide = false;
-    return _this;
-  }
+      if (el && el.nodeType === Node.ELEMENT_NODE) {
+        this._cachedElement = el;
+      }
 
-  var __proto = VuePanelComponent.prototype;
+      return this._cachedElement;
+    },
+    enumerable: false,
+    configurable: true
+  });
 
-  __proto.render = function () {
-    if (this.hide || !this.$slots.default) return;
-    return this.$slots.default();
+  __proto.show = function () {
+    this._el.hide = false;
   };
 
-  return VuePanelComponent;
-}(Vue);
-
-var FlickingProps =
-/*#__PURE__*/
-function () {
-  function FlickingProps() {
-    this.viewportTag = prop({
-      required: false,
-      default: "div"
-    });
-    this.cameraTag = prop({
-      required: false,
-      default: "div"
-    });
-    this.hideBeforeInit = prop({
-      required: false,
-      default: false
-    });
-    this.firstPanelSize = prop({
-      required: false
-    });
-    this.options = prop({
-      required: false,
-      default: {}
-    });
-    this.plugins = prop({
-      required: false,
-      default: []
-    });
-    this.status = prop({
-      required: false
-    });
-  }
+  __proto.hide = function () {
+    this._el.hide = true;
+  };
 
-  return FlickingProps;
+  return VueElementProvider;
 }();
 
-var Flicking =
-/*#__PURE__*/
-function (_super) {
-  __extends(Flicking, _super);
+var Flicking = defineComponent({
+  props: FlickingProps,
+  components: {
+    Panel: VuePanel
+  },
+  data: function () {
+    return {};
+  },
+  created: function () {
+    var _this = this;
 
-  function Flicking() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+    this.vanillaFlicking = null;
+    this.renderEmitter = new Component();
+    this.diffResult = null;
 
-    _this.vanillaFlicking = null;
-    _this.diffResult = undefined;
-    return _this;
-  }
+    this.getPanels = function () {
+      var componentInstance = getCurrentInstance();
+      var vueFlicking = componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.ctx;
+      var flicking = _this.vanillaFlicking;
 
-  var __proto = Flicking.prototype;
+      var defaultSlots = _this.getSlots();
 
-  __proto.mounted = function () {
+      var diffResult = vueFlicking === null || vueFlicking === void 0 ? void 0 : vueFlicking.diffResult;
+      var slots = diffResult ? getRenderingPanels(flicking, diffResult) : defaultSlots;
+      var panelComponent = resolveComponent("Panel");
+      var panels = slots.map(function (slot, idx) {
+        return h(panelComponent, {
+          key: slot.key,
+          ref: idx.toString()
+        }, function () {
+          return slot;
+        });
+      });
+      return panels;
+    };
+
+    this.getVirtualPanels = function () {
+      var options = _this.options;
+      var _a = options.virtual.panelClass,
+          panelClass = _a === void 0 ? "flicking-panel" : _a;
+      var panelsPerView = options.panelsPerView;
+      var flicking = _this.vanillaFlicking;
+      var initialized = flicking && flicking.initialized;
+      var renderingIndexes = initialized ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking) : range(panelsPerView + 1);
+      var firstPanel = initialized && flicking.panels[0];
+      var size = firstPanel ? flicking.horizontal ? {
+        width: firstPanel.size
+      } : {
+        height: firstPanel.size
+      } : {};
+      return renderingIndexes.map(function (idx) {
+        return h("div", {
+          key: idx,
+          ref: idx.toString(),
+          class: panelClass,
+          style: size,
+          "data-element-index": idx
+        });
+      });
+    };
+
+    withFlickingMethods(this, "vanillaFlicking");
+  },
+  mounted: function () {
     var _this = this;
 
+    var _a;
+
+    var options = this.options;
     var viewportEl = this.$el;
-    var flicking = new VanillaFlicking(viewportEl, __assign(__assign({}, this.options), {
-      renderExternal: {
-        renderer: VueRenderer,
-        rendererOptions: {
-          vueFlicking: this
-        }
-      }
+    var rendererOptions = {
+      vueFlicking: this,
+      align: options.align,
+      strategy: options.virtual && ((_a = options.panelsPerView) !== null && _a !== void 0 ? _a : -1) > 0 ? new VirtualRenderingStrategy() : new NormalRenderingStrategy({
+        providerCtor: VueElementProvider
+      })
+    };
+    var flicking = new VanillaFlicking__default(viewportEl, __assign(__assign({}, options), {
+      externalRenderer: new VueRenderer(rendererOptions)
     }));
     this.vanillaFlicking = flicking;
     flicking.once(EVENTS.READY, function () {
@@ -428,52 +472,45 @@ function (_super) {
       return vnode.key;
     });
     this.pluginsDiffer = new ListDiffer();
-
-    this._bindEvents();
-
-    this._checkPlugins();
+    this.bindEvents();
+    this.checkPlugins();
 
     if (this.status) {
       flicking.setStatus(this.status);
     }
-  };
-
-  __proto.beforeDestroy = function () {
+  },
+  beforeUnmount: function () {
     var _a;
 
     (_a = this.vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
-  };
-
-  __proto.beforeMount = function () {
-    this._fillKeys();
-  };
-
-  __proto.beforeUpdate = function () {
-    this._fillKeys();
-  };
-
-  __proto.updated = function () {
+  },
+  beforeMount: function () {
+    this.fillKeys();
+  },
+  beforeUpdate: function () {
+    this.fillKeys();
+    this.diffResult = this.slotDiffer.update(this.getSlots());
+  },
+  updated: function () {
     var flicking = this.vanillaFlicking;
     var diffResult = this.diffResult;
-    if (!diffResult) return;
-    var children = this.$.subTree.children[0].children.map(function (c) {
-      return c.component.ctx;
-    });
+    this.checkPlugins();
+    this.renderEmitter.trigger("render");
+    if (!diffResult || !(flicking === null || flicking === void 0 ? void 0 : flicking.initialized)) return;
+    var children = this.getChildren();
     sync(flicking, diffResult, children);
 
-    this._checkPlugins();
-
     if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
       this.$forceUpdate();
     }
-  };
-
-  __proto.render = function () {
-    var _this = this;
 
+    this.diffResult = undefined;
+  },
+  render: function () {
     var _a;
 
     var flicking = this.vanillaFlicking;
+    var options = this.options;
     var initialized = flicking && flicking.initialized;
     var isHorizontal = flicking ? flicking.horizontal : (_a = this.options.horizontal) !== null && _a !== void 0 ? _a : true;
     var viewportData = {
@@ -491,111 +528,88 @@ function (_super) {
         transform: getDefaultCameraTransform(this.options.align, this.options.horizontal, this.firstPanelSize)
       } : {}
     };
-
-    var getPanels = function () {
-      var defaultSlots = _this.getSlots();
-
-      _this.diffResult = initialized ? _this.slotDiffer.update(defaultSlots) : undefined;
-      var slots = _this.diffResult ? getRenderingPanels(flicking, _this.diffResult) : defaultSlots;
-      var panelComponent = resolveComponent("Panel");
-      var panels = slots.map(function (slot, idx) {
-        return h(panelComponent, {
-          key: slot.key,
-          ref: idx.toString()
-        }, function () {
-          return slot;
-        });
-      });
-      return panels;
-    };
-
+    var panels = options.virtual && options.panelsPerView && options.panelsPerView > 0 ? this.getVirtualPanels : this.getPanels;
     var viewportSlots = this.$slots.viewport ? this.$slots.viewport() : [];
-    return h(this.viewportTag, viewportData, __spreadArrays([h(this.cameraTag, cameraData, {
-      default: getPanels
-    })], viewportSlots));
-  };
-
-  __proto.getSlots = function () {
-    var _this = this;
+    return h(this.viewportTag, viewportData, __spreadArray([h(this.cameraTag, cameraData, {
+      default: panels
+    })], viewportSlots, true));
+  },
+  methods: {
+    getSlots: function () {
+      var _this = this;
+
+      var slots = this.$slots.default ? this.$slots.default() : [];
+      return slots.reduce(function (elementSlots, slot) {
+        return __spreadArray(__spreadArray([], elementSlots, true), _this.getElementVNodes(slot), true);
+      }, []);
+    },
+    getElementVNodes: function (slot, childSlots) {
+      var _this = this;
 
-    var slots = this.$slots.default ? this.$slots.default() : [];
-    return slots.reduce(function (elementSlots, slot) {
-      return __spreadArrays(elementSlots, _this.getElementVNodes(slot));
-    }, []);
-  };
+      if (childSlots === void 0) {
+        childSlots = [];
+      }
 
-  __proto.getElementVNodes = function (slot, childSlots) {
-    var _this = this;
+      if (slot.type === Fragment && Array.isArray(slot.children)) {
+        slot.children.filter(function (child) {
+          return child && typeof child === "object";
+        }).forEach(function (child) {
+          return _this.getElementVNodes(child, childSlots);
+        });
+      } else {
+        childSlots.push(slot);
+      }
 
-    if (childSlots === void 0) {
-      childSlots = [];
-    }
+      return childSlots;
+    },
+    bindEvents: function () {
+      var _this = this;
 
-    if (slot.type === Fragment && Array.isArray(slot.children)) {
-      slot.children.filter(function (child) {
-        return child && typeof child === "object";
-      }).forEach(function (child) {
-        return _this.getElementVNodes(child, childSlots);
+      var flicking = this.vanillaFlicking;
+      var events = Object.keys(EVENTS).map(function (key) {
+        return EVENTS[key];
       });
-    } else {
-      childSlots.push(slot);
-    }
-
-    return childSlots;
-  };
-
-  __proto._bindEvents = function () {
-    var _this = this;
-
-    var flicking = this.vanillaFlicking;
-    var events = Object.keys(EVENTS).map(function (key) {
-      return EVENTS[key];
-    });
-    events.forEach(function (eventName) {
-      flicking.on(eventName, function (e) {
-        e.currentTarget = _this; // Make events from camelCase to kebab-case
+      events.forEach(function (eventName) {
+        flicking.on(eventName, function (e) {
+          e.currentTarget = _this; // Make events from camelCase to kebab-case
 
-        _this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+          _this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+        });
+      });
+    },
+    checkPlugins: function () {
+      var _a, _b;
+
+      var _c = this.pluginsDiffer.update(this.plugins),
+          list = _c.list,
+          added = _c.added,
+          removed = _c.removed,
+          prevList = _c.prevList;
+
+      (_a = this.vanillaFlicking).addPlugins.apply(_a, added.map(function (index) {
+        return list[index];
+      }));
+
+      (_b = this.vanillaFlicking).removePlugins.apply(_b, removed.map(function (index) {
+        return prevList[index];
+      }));
+    },
+    fillKeys: function () {
+      var vnodes = this.getSlots();
+      vnodes.forEach(function (node, idx) {
+        if (node.key == null) {
+          node.key = "$_" + idx;
+        }
+      });
+    },
+    getChildren: function () {
+      var childRefs = this.$refs;
+      return Object.keys(childRefs).map(function (refKey) {
+        return childRefs[refKey];
       });
-    });
-  };
-
-  __proto._checkPlugins = function () {
-    var _a, _b;
-
-    var _c = this.pluginsDiffer.update(this.plugins),
-        list = _c.list,
-        added = _c.added,
-        removed = _c.removed,
-        prevList = _c.prevList;
-
-    (_a = this.vanillaFlicking).addPlugins.apply(_a, added.map(function (index) {
-      return list[index];
-    }));
-
-    (_b = this.vanillaFlicking).removePlugins.apply(_b, removed.map(function (index) {
-      return prevList[index];
-    }));
-  };
-
-  __proto._fillKeys = function () {
-    var vnodes = this.getSlots();
-    vnodes.forEach(function (node, idx) {
-      if (node.key == null) {
-        node.key = "$_" + idx;
-      }
-    });
-  };
-
-  __decorate([withFlickingMethods], Flicking.prototype, "vanillaFlicking", void 0);
-
-  Flicking = __decorate([Options({
-    components: {
-      Panel: VuePanelComponent
     }
-  })], Flicking);
-  return Flicking;
-}(Vue.with(FlickingProps));
+  }
+});
 
-export default Flicking;
+export { Flicking as default };
 //# sourceMappingURL=flicking.esm.js.map