@egjs/vue-flicking - npm Package Compare versions

Comparing version 4.4.0 to 4.4.1

declaration/Flicking.d.ts

@@ -1,31 +0,28 @@
-import { Vue } from "vue-property-decorator";
-import { CreateElement, VNode } from "vue";
-import VanillaFlicking, { FlickingOptions, Plugin, Status } from "@egjs/flicking";
-declare class Flicking extends Vue {
-    viewportTag: string;
-    cameraTag: string;
-    hideBeforeInit: string;
-    firstPanelSize?: string;
-    options: Partial<FlickingOptions>;
-    plugins: Plugin[];
-    status: Status;
-    private _vanillaFlicking;
-    private _pluginsDiffer;
-    private _slotDiffer;
-    private _diffResult;
-    mounted(): void;
-    beforeDestroy(): void;
-    beforeMount(): void;
-    beforeUpdate(): void;
-    updated(): void;
-    render(h: CreateElement): VNode;
-    private _bindEvents;
-    private _checkPlugins;
-    private _getSlots;
-    private _fillKeys;
-    private _getPanels;
-    private _getVirtualPanels;
+import ListDiffer, { DiffResult } from "@egjs/list-differ";
+import Vue, { CreateElement, VNode } from "vue";
+import VanillaFlicking, { Plugin } from "@egjs/flicking";
+declare const Flicking: import("vue/types/vue").ExtendedVue<Vue, {
+    vanillaFlicking: VanillaFlicking;
+    pluginsDiffer: ListDiffer<Plugin>;
+    slotDiffer: ListDiffer<VNode>;
+    diffResult: DiffResult<VNode> | null;
+}, {
+    _getSlots(): any;
+    _fillKeys(): void;
+    _bindEvents(): void;
+    _checkPlugins(): void;
+    _getPanels(h: CreateElement, initialized: boolean): any;
+    _getVirtualPanels(h: CreateElement, initialized: boolean): any;
+}, unknown, {
+    readonly viewportTag: string;
+    readonly cameraTag: string;
+    readonly hideBeforeInit: boolean;
+    readonly firstPanelSize: string;
+    readonly options: Partial<import("@egjs/flicking").FlickingOptions>;
+    readonly plugins: Plugin[];
+    readonly status: import("@egjs/flicking").Status;
+}>;
+declare type VueFlicking = InstanceType<typeof Flicking>;
+interface Flicking extends VueFlicking, VanillaFlicking {
 }
-interface Flicking extends VanillaFlicking {
-}
 export default Flicking;

declaration/index.d.ts

@@ -11,3 +11,23 @@ import { VueConstructor } from "vue";
 declare const plugin: {
-    Flicking: typeof Flicking;
+    Flicking: import("vue/types/vue").ExtendedVue<import("vue").default, {
+        vanillaFlicking: import("@egjs/flicking/declaration/Flicking").default;
+        pluginsDiffer: import("@egjs/list-differ/declaration/ListDiffer").default<import("@egjs/flicking").Plugin>;
+        slotDiffer: import("@egjs/list-differ/declaration/ListDiffer").default<import("vue").VNode>;
+        diffResult: import("@egjs/list-differ").DiffResult<import("vue").VNode>;
+    }, {
+        _getSlots(): any;
+        _fillKeys(): void;
+        _bindEvents(): void;
+        _checkPlugins(): void;
+        _getPanels(h: import("vue").CreateElement, initialized: boolean): any;
+        _getVirtualPanels(h: import("vue").CreateElement, initialized: boolean): any;
+    }, unknown, {
+        readonly viewportTag: string;
+        readonly cameraTag: string;
+        readonly hideBeforeInit: boolean;
+        readonly firstPanelSize: string;
+        readonly options: Partial<import("@egjs/flicking").FlickingOptions>;
+        readonly plugins: import("@egjs/flicking").Plugin[];
+        readonly status: import("@egjs/flicking").Status;
+    }>;
     install: (Vue: VueConstructor) => void;
@@ -14,0 +34,0 @@ version: string;

declaration/index.umd.d.ts

 import { VueConstructor } from "vue";
-import Flicking from "./Flicking";
 declare global {
@@ -9,3 +8,23 @@ interface Window {
 declare const plugin: {
-    Flicking: typeof Flicking;
+    Flicking: import("vue/types/vue").ExtendedVue<import("vue").default, {
+        vanillaFlicking: import("@egjs/flicking/declaration/Flicking").default;
+        pluginsDiffer: import("@egjs/list-differ/declaration/ListDiffer").default<import("@egjs/flicking").Plugin>;
+        slotDiffer: import("@egjs/list-differ/declaration/ListDiffer").default<import("vue").VNode>;
+        diffResult: import("@egjs/list-differ").DiffResult<import("vue").VNode>;
+    }, {
+        _getSlots(): any;
+        _fillKeys(): void;
+        _bindEvents(): void;
+        _checkPlugins(): void;
+        _getPanels(h: import("vue").CreateElement, initialized: boolean): any;
+        _getVirtualPanels(h: import("vue").CreateElement, initialized: boolean): any;
+    }, unknown, {
+        readonly viewportTag: string;
+        readonly cameraTag: string;
+        readonly hideBeforeInit: boolean;
+        readonly firstPanelSize: string;
+        readonly options: Partial<import("@egjs/flicking").FlickingOptions>;
+        readonly plugins: import("@egjs/flicking").Plugin[];
+        readonly status: import("@egjs/flicking").Status;
+    }>;
     install: (Vue: VueConstructor) => void;
@@ -12,0 +31,0 @@ version: string;

declaration/VueElementProvider.d.ts

@@ -1,4 +0,4 @@
-import { ExternalElementProvider } from "@egjs/flicking";
+import { ElementProvider } from "@egjs/flicking";
 import VuePanel from "./VuePanel";
-declare class VueElementProvider implements ExternalElementProvider {
+declare class VueElementProvider implements ElementProvider {
     private _el;
@@ -5,0 +5,0 @@ get element(): HTMLElement;

declaration/VuePanel.d.ts

@@ -1,7 +0,10 @@
-import { Vue } from "vue-property-decorator";
-declare class VuePanel extends Vue {
+import Vue from "vue";
+declare const VuePanel: import("vue/types/vue").ExtendedVue<Vue, {
     hide: boolean;
-    get nativeElement(): HTMLElement;
-    render(): import("vue").VNode[];
+}, {}, {
+    nativeElement: HTMLElement;
+}, Record<never, any>>;
+declare type VuePanelType = InstanceType<typeof VuePanel>;
+interface VuePanel extends VuePanelType {
 }
 export default VuePanel;

dist/flicking.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/vue-flicking
-version: 4.4.0
+version: 4.4.1
 */
@@ -13,3 +13,3 @@ 'use strict';
 var ListDiffer = require('@egjs/list-differ');
-var vuePropertyDecorator = require('vue-property-decorator');
+var Vue = require('vue');
 var VanillaFlicking = require('@egjs/flicking');
@@ -68,9 +68,2 @@
 };
-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) {
@@ -239,6 +232,10 @@ function adopt(value) {
 }
-function __spreadArray(to, from) {
-  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
-
-  return to;
+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));
 }
@@ -318,33 +315,26 @@
 
-var VuePanel =
-/*#__PURE__*/
-function (_super) {
-  __extends(VuePanel, _super);
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+var VuePanel = Vue.extend({
+  data: function () {
+    return {
+      hide: false
+    };
+  },
+  render: function () {
+    var _a;
 
-  function VuePanel() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+    var children = this.hide ? undefined : (_a = this.$slots.default) !== null && _a !== void 0 ? _a : []; // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
 
-    _this.hide = false;
-    return _this;
+    return children;
+  },
+  computed: {
+    nativeElement: function () {
+      return this.$el;
+    }
   }
+});
 
-  var __proto = VuePanel.prototype;
-  Object.defineProperty(__proto, "nativeElement", {
-    get: function () {
-      return this.$el;
-    },
-    enumerable: false,
-    configurable: true
-  });
-
-  __proto.render = function () {
-    var _a;
-
-    return this.hide ? undefined : (_a = this.$slots.default) !== null && _a !== void 0 ? _a : [];
-  };
-
-  VuePanel = __decorate([vuePropertyDecorator.Component({})], VuePanel);
-  return VuePanel;
-}(vuePropertyDecorator.Vue);
-
 var VueElementProvider =
@@ -384,17 +374,72 @@ /*#__PURE__*/
 
-var Flicking =
-/*#__PURE__*/
-function (_super) {
-  __extends(Flicking, _super);
+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 {};
+    },
+    required: false
+  },
+  plugins: {
+    type: Array,
+    default: function () {
+      return [];
+    },
+    required: false
+  },
+  status: {
+    type: Object,
+    required: false
+  }
+};
 
-  function Flicking() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+var getSlots = function (component) {
+  var _a, _b;
 
-    _this._diffResult = null;
-    return _this;
-  }
+  return (_b = (_a = component.$slots.default) === null || _a === void 0 ? void 0 : _a.filter(function (slot) {
+    return slot.tag;
+  })) !== null && _b !== void 0 ? _b : [];
+};
+var fillKeys = function (component) {
+  var vnodes = getSlots(component);
+  vnodes.forEach(function (node, idx) {
+    if (node.key == null) {
+      node.key = "$_" + idx;
+    }
+  });
+};
 
-  var __proto = Flicking.prototype;
-
-  __proto.mounted = function () {
+var Flicking = Vue.extend({
+  props: FlickingProps,
+  components: {
+    Panel: VuePanel
+  },
+  data: function () {
+    // Mocking the type, as we don't want them to be reactive
+    return {};
+  },
+  created: function () {
+    this.diffResult = null;
+    VanillaFlicking.withFlickingMethods(this, "vanillaFlicking");
+  },
+  mounted: function () {
     var _this = this;
@@ -407,25 +452,21 @@
     var rendererOptions = {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       vueFlicking: this,
+      align: options.align,
       strategy: options.virtual && ((_a = options.panelsPerView) !== null && _a !== void 0 ? _a : -1) > 0 ? new VanillaFlicking.VirtualRenderingStrategy() : new VanillaFlicking.NormalRenderingStrategy({
-        providerCtor: VueElementProvider,
-        panelCtor: VanillaFlicking.ExternalPanel
+        providerCtor: VueElementProvider
       })
     };
-    var flicking = new VanillaFlicking(viewportEl, __assign(__assign({}, this.options), {
-      renderExternal: {
-        renderer: VueRenderer,
-        rendererOptions: rendererOptions
-      }
+    var flicking = new VanillaFlicking(viewportEl, __assign(__assign({}, options), {
+      externalRenderer: new VueRenderer(rendererOptions)
     }));
-    this._vanillaFlicking = flicking;
+    this.vanillaFlicking = flicking;
     flicking.once(VanillaFlicking.EVENTS.READY, function () {
       _this.$forceUpdate();
     });
-
-    var slots = this._getSlots();
-
-    this._slotDiffer = new ListDiffer(slots, function (vnode) {
+    var slots = getSlots(this);
+    this.slotDiffer = new ListDiffer(slots, function (vnode) {
       return vnode.key;
     });
-    this._pluginsDiffer = new ListDiffer();
+    this.pluginsDiffer = new ListDiffer();
 
@@ -439,24 +480,19 @@ this._bindEvents();
     }
-  };
-
-  __proto.beforeDestroy = function () {
+  },
+  beforeDestroy: function () {
     var _a;
 
-    (_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
-  };
+    (_a = this.vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
+  },
+  beforeMount: function () {
+    fillKeys(this);
+  },
+  beforeUpdate: function () {
+    fillKeys(this);
+    this.diffResult = this.slotDiffer.update(getSlots(this));
+  },
+  updated: function () {
+    var flicking = this.vanillaFlicking;
+    var diffResult = this.diffResult;
 
-  __proto.beforeMount = function () {
-    this._fillKeys();
-  };
-
-  __proto.beforeUpdate = function () {
-    this._fillKeys();
-
-    this._diffResult = this._slotDiffer.update(this._getSlots());
-  };
-
-  __proto.updated = function () {
-    var flicking = this._vanillaFlicking;
-    var diffResult = this._diffResult;
-
     this._checkPlugins();
@@ -472,11 +508,10 @@
 
-    this._diffResult = null;
-  };
-
-  __proto.render = function (h) {
+    this.diffResult = null;
+  },
+  render: function (h) {
     var _a, _b;
 
-    var flicking = this._vanillaFlicking;
+    var flicking = this.vanillaFlicking;
     var options = this.options;
-    var initialized = !!this._diffResult && flicking && flicking.initialized;
+    var initialized = !!this.diffResult && flicking && flicking.initialized;
     var isHorizontal = flicking ? flicking.horizontal : (_a = options.horizontal) !== null && _a !== void 0 ? _a : true;
@@ -500,146 +535,89 @@ var viewportData = {
     return h(this.viewportTag, viewportData, [h(this.cameraTag, cameraData, panels), this.$slots.viewport]);
-  };
+  },
+  methods: {
+    /* eslint-disable @typescript-eslint/naming-convention */
+    _getSlots: function () {
+      var _a, _b;
 
-  __proto._bindEvents = function () {
-    var _this = this;
+      return (_b = (_a = this.$slots.default) === null || _a === void 0 ? void 0 : _a.filter(function (slot) {
+        return slot.tag;
+      })) !== null && _b !== void 0 ? _b : [];
+    },
+    _fillKeys: function () {
+      var vnodes = this._getSlots();
 
-    var flicking = this._vanillaFlicking;
-    var events = Object.keys(VanillaFlicking.EVENTS).map(function (key) {
-      return VanillaFlicking.EVENTS[key];
-    });
-    events.forEach(function (eventName) {
-      flicking.on(eventName, function (e) {
-        e.currentTarget = _this; // Make events from camelCase to kebab-case
+      vnodes.forEach(function (node, idx) {
+        if (node.key == null) {
+          node.key = "$_" + idx;
+        }
+      });
+    },
+    _bindEvents: function () {
+      var _this = this;
 
-        _this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+      var flicking = this.vanillaFlicking;
+      var events = Object.keys(VanillaFlicking.EVENTS).map(function (key) {
+        return VanillaFlicking.EVENTS[key];
       });
-    });
-  };
+      events.forEach(function (eventName) {
+        flicking.on(eventName, function (e) {
+          e.currentTarget = _this; // Make events from camelCase to kebab-case
 
-  __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, __spreadArray([], __read(added.map(function (index) {
-      return list[index];
-    }))));
-
-    (_b = this._vanillaFlicking).removePlugins.apply(_b, __spreadArray([], __read(removed.map(function (index) {
-      return prevList[index];
-    }))));
-  };
-
-  __proto._getSlots = function () {
-    var _a, _b;
-
-    return (_b = (_a = this.$slots.default) === null || _a === void 0 ? void 0 : _a.filter(function (slot) {
-      return slot.tag;
-    })) !== null && _b !== void 0 ? _b : [];
-  };
-
-  __proto._fillKeys = function () {
-    var vnodes = this._getSlots();
-
-    vnodes.forEach(function (node, idx) {
-      if (node.key == null) {
-        node.key = "$_" + idx;
-      }
-    });
-  };
-
-  __proto._getPanels = function (h, initialized) {
-    var slots = initialized ? VanillaFlicking.getRenderingPanels(this._vanillaFlicking, this._diffResult) : this._getSlots();
-    return slots.map(function (slot) {
-      return h("Panel", {
-        key: slot.key
-      }, [slot]);
-    });
-  };
-
-  __proto._getVirtualPanels = function (h, initialized) {
-    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 renderingIndexes = initialized ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking) : VanillaFlicking.range(panelsPerView + 1);
-    var firstPanel = flicking && flicking.panels[0];
-    var size = firstPanel ? flicking.horizontal ? {
-      width: firstPanel.size
-    } : {
-      height: firstPanel.size
-    } : {};
-    return renderingIndexes.map(function (idx) {
-      return h("div", {
-        key: idx,
-        staticClass: panelClass,
-        style: size,
-        domProps: {
-          "data-element-index": idx
-        }
+          _this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+        });
       });
-    });
-  };
+    },
+    _checkPlugins: function () {
+      var _a, _b;
 
-  __decorate([vuePropertyDecorator.Prop({
-    type: String,
-    default: "div",
-    required: false
-  })], Flicking.prototype, "viewportTag", void 0);
+      var _c = this.pluginsDiffer.update(this.plugins),
+          list = _c.list,
+          added = _c.added,
+          removed = _c.removed,
+          prevList = _c.prevList;
 
-  __decorate([vuePropertyDecorator.Prop({
-    type: String,
-    default: "div",
-    required: false
-  })], Flicking.prototype, "cameraTag", void 0);
+      (_a = this.vanillaFlicking).addPlugins.apply(_a, __spreadArray([], __read(added.map(function (index) {
+        return list[index];
+      }))));
 
-  __decorate([vuePropertyDecorator.Prop({
-    type: Boolean,
-    default: false,
-    required: false
-  })], Flicking.prototype, "hideBeforeInit", void 0);
-
-  __decorate([vuePropertyDecorator.Prop({
-    type: String,
-    required: false
-  })], Flicking.prototype, "firstPanelSize", void 0);
-
-  __decorate([vuePropertyDecorator.Prop({
-    type: Object,
-    default: function () {
-      return {};
+      (_b = this.vanillaFlicking).removePlugins.apply(_b, __spreadArray([], __read(removed.map(function (index) {
+        return prevList[index];
+      }))));
     },
-    required: false
-  })], Flicking.prototype, "options", void 0);
-
-  __decorate([vuePropertyDecorator.Prop({
-    type: Array,
-    default: function () {
-      return [];
+    _getPanels: function (h, initialized) {
+      var slots = initialized ? VanillaFlicking.getRenderingPanels(this.vanillaFlicking, this.diffResult) : this._getSlots();
+      return slots.map(function (slot) {
+        return h("Panel", {
+          key: slot.key
+        }, [slot]);
+      });
     },
-    required: false
-  })], Flicking.prototype, "plugins", void 0);
-
-  __decorate([vuePropertyDecorator.Prop({
-    type: Object,
-    required: false
-  })], Flicking.prototype, "status", void 0);
-
-  __decorate([VanillaFlicking.withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0);
-
-  Flicking = __decorate([vuePropertyDecorator.Component({
-    components: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      Panel: VuePanel
+    _getVirtualPanels: function (h, initialized) {
+      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 renderingIndexes = initialized ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking) : VanillaFlicking.range(panelsPerView + 1);
+      var firstPanel = flicking && flicking.panels[0];
+      var size = firstPanel ? flicking.horizontal ? {
+        width: firstPanel.size
+      } : {
+        height: firstPanel.size
+      } : {};
+      return renderingIndexes.map(function (idx) {
+        return h("div", {
+          key: idx,
+          staticClass: panelClass,
+          style: size,
+          domProps: {
+            "data-element-index": idx
+          }
+        });
+      });
     }
-  })], Flicking);
-  return Flicking;
-}(vuePropertyDecorator.Vue);
+  }
+});
 
-var version = "4.4.0";
+var version = "4.4.1";
 
@@ -646,0 +624,0 @@ var install = function (Vue) {

dist/flicking.esm.js

@@ -7,7 +7,7 @@ /*
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/vue-flicking
-version: 4.4.0
+version: 4.4.1
 */
 import ListDiffer from '@egjs/list-differ';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import VanillaFlicking, { getFlickingAttached, ExternalRenderer, VirtualRenderingStrategy, NormalRenderingStrategy, ExternalPanel, EVENTS, sync, getDefaultCameraTransform, getRenderingPanels, range, withFlickingMethods } from '@egjs/flicking';
+import Vue from 'vue';
+import VanillaFlicking, { getFlickingAttached, ExternalRenderer, withFlickingMethods, VirtualRenderingStrategy, NormalRenderingStrategy, EVENTS, sync, getDefaultCameraTransform, getRenderingPanels, range } from '@egjs/flicking';
 export * from '@egjs/flicking';
@@ -66,9 +66,2 @@
 };
-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) {
@@ -237,6 +230,10 @@ function adopt(value) {
 }
-function __spreadArray(to, from) {
-  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
-
-  return to;
+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));
 }
@@ -316,33 +313,26 @@
 
-var VuePanel =
-/*#__PURE__*/
-function (_super) {
-  __extends(VuePanel, _super);
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+var VuePanel = Vue.extend({
+  data: function () {
+    return {
+      hide: false
+    };
+  },
+  render: function () {
+    var _a;
 
-  function VuePanel() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+    var children = this.hide ? undefined : (_a = this.$slots.default) !== null && _a !== void 0 ? _a : []; // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
 
-    _this.hide = false;
-    return _this;
+    return children;
+  },
+  computed: {
+    nativeElement: function () {
+      return this.$el;
+    }
   }
+});
 
-  var __proto = VuePanel.prototype;
-  Object.defineProperty(__proto, "nativeElement", {
-    get: function () {
-      return this.$el;
-    },
-    enumerable: false,
-    configurable: true
-  });
-
-  __proto.render = function () {
-    var _a;
-
-    return this.hide ? undefined : (_a = this.$slots.default) !== null && _a !== void 0 ? _a : [];
-  };
-
-  VuePanel = __decorate([Component({})], VuePanel);
-  return VuePanel;
-}(Vue);
-
 var VueElementProvider =
@@ -382,17 +372,72 @@ /*#__PURE__*/
 
-var Flicking =
-/*#__PURE__*/
-function (_super) {
-  __extends(Flicking, _super);
+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 {};
+    },
+    required: false
+  },
+  plugins: {
+    type: Array,
+    default: function () {
+      return [];
+    },
+    required: false
+  },
+  status: {
+    type: Object,
+    required: false
+  }
+};
 
-  function Flicking() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+var getSlots = function (component) {
+  var _a, _b;
 
-    _this._diffResult = null;
-    return _this;
-  }
+  return (_b = (_a = component.$slots.default) === null || _a === void 0 ? void 0 : _a.filter(function (slot) {
+    return slot.tag;
+  })) !== null && _b !== void 0 ? _b : [];
+};
+var fillKeys = function (component) {
+  var vnodes = getSlots(component);
+  vnodes.forEach(function (node, idx) {
+    if (node.key == null) {
+      node.key = "$_" + idx;
+    }
+  });
+};
 
-  var __proto = Flicking.prototype;
-
-  __proto.mounted = function () {
+var Flicking = Vue.extend({
+  props: FlickingProps,
+  components: {
+    Panel: VuePanel
+  },
+  data: function () {
+    // Mocking the type, as we don't want them to be reactive
+    return {};
+  },
+  created: function () {
+    this.diffResult = null;
+    withFlickingMethods(this, "vanillaFlicking");
+  },
+  mounted: function () {
     var _this = this;
@@ -405,25 +450,21 @@
     var rendererOptions = {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       vueFlicking: this,
+      align: options.align,
       strategy: options.virtual && ((_a = options.panelsPerView) !== null && _a !== void 0 ? _a : -1) > 0 ? new VirtualRenderingStrategy() : new NormalRenderingStrategy({
-        providerCtor: VueElementProvider,
-        panelCtor: ExternalPanel
+        providerCtor: VueElementProvider
       })
     };
-    var flicking = new VanillaFlicking(viewportEl, __assign(__assign({}, this.options), {
-      renderExternal: {
-        renderer: VueRenderer,
-        rendererOptions: rendererOptions
-      }
+    var flicking = new VanillaFlicking(viewportEl, __assign(__assign({}, options), {
+      externalRenderer: new VueRenderer(rendererOptions)
     }));
-    this._vanillaFlicking = flicking;
+    this.vanillaFlicking = flicking;
     flicking.once(EVENTS.READY, function () {
       _this.$forceUpdate();
     });
-
-    var slots = this._getSlots();
-
-    this._slotDiffer = new ListDiffer(slots, function (vnode) {
+    var slots = getSlots(this);
+    this.slotDiffer = new ListDiffer(slots, function (vnode) {
       return vnode.key;
     });
-    this._pluginsDiffer = new ListDiffer();
+    this.pluginsDiffer = new ListDiffer();
 
@@ -437,24 +478,19 @@ this._bindEvents();
     }
-  };
-
-  __proto.beforeDestroy = function () {
+  },
+  beforeDestroy: function () {
     var _a;
 
-    (_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
-  };
+    (_a = this.vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
+  },
+  beforeMount: function () {
+    fillKeys(this);
+  },
+  beforeUpdate: function () {
+    fillKeys(this);
+    this.diffResult = this.slotDiffer.update(getSlots(this));
+  },
+  updated: function () {
+    var flicking = this.vanillaFlicking;
+    var diffResult = this.diffResult;
 
-  __proto.beforeMount = function () {
-    this._fillKeys();
-  };
-
-  __proto.beforeUpdate = function () {
-    this._fillKeys();
-
-    this._diffResult = this._slotDiffer.update(this._getSlots());
-  };
-
-  __proto.updated = function () {
-    var flicking = this._vanillaFlicking;
-    var diffResult = this._diffResult;
-
     this._checkPlugins();
@@ -470,11 +506,10 @@
 
-    this._diffResult = null;
-  };
-
-  __proto.render = function (h) {
+    this.diffResult = null;
+  },
+  render: function (h) {
     var _a, _b;
 
-    var flicking = this._vanillaFlicking;
+    var flicking = this.vanillaFlicking;
     var options = this.options;
-    var initialized = !!this._diffResult && flicking && flicking.initialized;
+    var initialized = !!this.diffResult && flicking && flicking.initialized;
     var isHorizontal = flicking ? flicking.horizontal : (_a = options.horizontal) !== null && _a !== void 0 ? _a : true;
@@ -498,146 +533,89 @@ var viewportData = {
     return h(this.viewportTag, viewportData, [h(this.cameraTag, cameraData, panels), this.$slots.viewport]);
-  };
+  },
+  methods: {
+    /* eslint-disable @typescript-eslint/naming-convention */
+    _getSlots: function () {
+      var _a, _b;
 
-  __proto._bindEvents = function () {
-    var _this = this;
+      return (_b = (_a = this.$slots.default) === null || _a === void 0 ? void 0 : _a.filter(function (slot) {
+        return slot.tag;
+      })) !== null && _b !== void 0 ? _b : [];
+    },
+    _fillKeys: function () {
+      var vnodes = this._getSlots();
 
-    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
+      vnodes.forEach(function (node, idx) {
+        if (node.key == null) {
+          node.key = "$_" + idx;
+        }
+      });
+    },
+    _bindEvents: function () {
+      var _this = this;
 
-        _this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+      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
 
-  __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, __spreadArray([], __read(added.map(function (index) {
-      return list[index];
-    }))));
-
-    (_b = this._vanillaFlicking).removePlugins.apply(_b, __spreadArray([], __read(removed.map(function (index) {
-      return prevList[index];
-    }))));
-  };
-
-  __proto._getSlots = function () {
-    var _a, _b;
-
-    return (_b = (_a = this.$slots.default) === null || _a === void 0 ? void 0 : _a.filter(function (slot) {
-      return slot.tag;
-    })) !== null && _b !== void 0 ? _b : [];
-  };
-
-  __proto._fillKeys = function () {
-    var vnodes = this._getSlots();
-
-    vnodes.forEach(function (node, idx) {
-      if (node.key == null) {
-        node.key = "$_" + idx;
-      }
-    });
-  };
-
-  __proto._getPanels = function (h, initialized) {
-    var slots = initialized ? getRenderingPanels(this._vanillaFlicking, this._diffResult) : this._getSlots();
-    return slots.map(function (slot) {
-      return h("Panel", {
-        key: slot.key
-      }, [slot]);
-    });
-  };
-
-  __proto._getVirtualPanels = function (h, initialized) {
-    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 renderingIndexes = initialized ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking) : range(panelsPerView + 1);
-    var firstPanel = flicking && flicking.panels[0];
-    var size = firstPanel ? flicking.horizontal ? {
-      width: firstPanel.size
-    } : {
-      height: firstPanel.size
-    } : {};
-    return renderingIndexes.map(function (idx) {
-      return h("div", {
-        key: idx,
-        staticClass: panelClass,
-        style: size,
-        domProps: {
-          "data-element-index": idx
-        }
+          _this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+        });
       });
-    });
-  };
+    },
+    _checkPlugins: function () {
+      var _a, _b;
 
-  __decorate([Prop({
-    type: String,
-    default: "div",
-    required: false
-  })], Flicking.prototype, "viewportTag", void 0);
+      var _c = this.pluginsDiffer.update(this.plugins),
+          list = _c.list,
+          added = _c.added,
+          removed = _c.removed,
+          prevList = _c.prevList;
 
-  __decorate([Prop({
-    type: String,
-    default: "div",
-    required: false
-  })], Flicking.prototype, "cameraTag", void 0);
+      (_a = this.vanillaFlicking).addPlugins.apply(_a, __spreadArray([], __read(added.map(function (index) {
+        return list[index];
+      }))));
 
-  __decorate([Prop({
-    type: Boolean,
-    default: false,
-    required: false
-  })], Flicking.prototype, "hideBeforeInit", void 0);
-
-  __decorate([Prop({
-    type: String,
-    required: false
-  })], Flicking.prototype, "firstPanelSize", void 0);
-
-  __decorate([Prop({
-    type: Object,
-    default: function () {
-      return {};
+      (_b = this.vanillaFlicking).removePlugins.apply(_b, __spreadArray([], __read(removed.map(function (index) {
+        return prevList[index];
+      }))));
     },
-    required: false
-  })], Flicking.prototype, "options", void 0);
-
-  __decorate([Prop({
-    type: Array,
-    default: function () {
-      return [];
+    _getPanels: function (h, initialized) {
+      var slots = initialized ? getRenderingPanels(this.vanillaFlicking, this.diffResult) : this._getSlots();
+      return slots.map(function (slot) {
+        return h("Panel", {
+          key: slot.key
+        }, [slot]);
+      });
     },
-    required: false
-  })], Flicking.prototype, "plugins", void 0);
-
-  __decorate([Prop({
-    type: Object,
-    required: false
-  })], Flicking.prototype, "status", void 0);
-
-  __decorate([withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0);
-
-  Flicking = __decorate([Component({
-    components: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      Panel: VuePanel
+    _getVirtualPanels: function (h, initialized) {
+      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 renderingIndexes = initialized ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking) : range(panelsPerView + 1);
+      var firstPanel = flicking && flicking.panels[0];
+      var size = firstPanel ? flicking.horizontal ? {
+        width: firstPanel.size
+      } : {
+        height: firstPanel.size
+      } : {};
+      return renderingIndexes.map(function (idx) {
+        return h("div", {
+          key: idx,
+          staticClass: panelClass,
+          style: size,
+          domProps: {
+            "data-element-index": idx
+          }
+        });
+      });
     }
-  })], Flicking);
-  return Flicking;
-}(Vue);
+  }
+});
 
-var version = "4.4.0";
+var version = "4.4.1";
 
@@ -644,0 +622,0 @@ var install = function (Vue) {

package.json

 {
   "name": "@egjs/vue-flicking",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -13,6 +13,3 @@ "main": "dist/flicking.cjs.js",
     "postbuild": "cpx 'node_modules/@egjs/flicking/dist/*.css' dist/",
-    "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-    "test": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint --no-fix",
-    "demo": "vue-cli-service demo"
+    "declaration": "rm -rf declaration && tsc -p ./tsconfig.declaration.json"
   },
@@ -40,5 +37,4 @@ "repository": {
   "dependencies": {
-    "@egjs/flicking": "^4.4.0",
-    "@egjs/list-differ": "^1.0.0",
-    "vue-property-decorator": "^8.1.0"
+    "@egjs/flicking": "^4.4.1",
+    "@egjs/list-differ": "^1.0.0"
   },
@@ -58,7 +54,7 @@ "devDependencies": {
     "rollup-plugin-vue": "^5.0.0",
-    "tslib": "^2.1.0",
+    "tslib": "^2.3.1",
     "typescript": "^4.2.3",
     "vue": "^2.6.10",
-    "vue-class-component": "^7.0.2",
     "vue-cli-plugin-p11n": "^0.3.0",
+    "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.0.6",
@@ -65,0 +61,0 @@ "vue-template-compiler": "^2.5.21"

src/Flicking.ts

@@ -6,11 +6,8 @@ /*
 import ListDiffer, { DiffResult } from "@egjs/list-differ";
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { CreateElement, VNodeData, VNode } from "vue";
+import Vue, { CreateElement, VNodeData, VNode } from "vue";
 import VanillaFlicking, {
   EVENTS,
-  FlickingOptions,
   withFlickingMethods,
   sync,
   Plugin,
-  Status,
   getRenderingPanels,
@@ -20,4 +17,3 @@ getDefaultCameraTransform,
   VirtualRenderingStrategy,
-  NormalRenderingStrategy,
-  ExternalPanel
+  NormalRenderingStrategy
 } from "@egjs/flicking";
@@ -28,35 +24,35 @@
 import VueElementProvider from "./VueElementProvider";
+import FlickingProps from "./FlickingProps";
+import { fillKeys, getSlots } from "./utils";
 
-@Component({
+const Flicking = Vue.extend({
+  props: FlickingProps,
   components: {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     Panel: VuePanel
-  }
-})
-class Flicking extends Vue {
-  // Tag of the viewport element
-  @Prop({ type: String, default: "div", required: false }) public viewportTag!: string;
-  // Tag of the camera element
-  @Prop({ type: String, default: "div", required: false }) public cameraTag!: string;
-  @Prop({ type: Boolean, default: false, required: false }) public hideBeforeInit!: string;
-  @Prop({ type: String, required: false }) public firstPanelSize?: string;
-  @Prop({ type: Object, default: () => ({}), required: false }) public options!: Partial<FlickingOptions>;
-  @Prop({ type: Array, default: () => ([]), required: false }) public plugins!: Plugin[];
-  @Prop({ type: Object, required: false }) public status!: Status;
+  },
+  data() {
+    // Mocking the type, as we don't want them to be reactive
+    return {} as {
+      vanillaFlicking: VanillaFlicking;
+      pluginsDiffer: ListDiffer<Plugin>;
+      slotDiffer: ListDiffer<VNode>;
+      diffResult: DiffResult<VNode> | null;
+    };
+  },
+  created() {
+    this.diffResult = null;
 
-  @withFlickingMethods private _vanillaFlicking!: VanillaFlicking;
-  private _pluginsDiffer!: ListDiffer<Plugin>;
-  private _slotDiffer!: ListDiffer<VNode>;
-  private _diffResult: DiffResult<VNode> | null = null;
-
-  public mounted() {
+    withFlickingMethods(this, "vanillaFlicking");
+  },
+  mounted() {
     const options = this.options;
     const viewportEl = this.$el as HTMLElement;
     const rendererOptions: VueRendererOptions = {
-      vueFlicking: this,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      vueFlicking: this as any,
+      align: options.align,
       strategy: options.virtual && (options.panelsPerView ?? -1) > 0
         ? new VirtualRenderingStrategy()
         : new NormalRenderingStrategy({
-          providerCtor: VueElementProvider,
-          panelCtor: ExternalPanel
+          providerCtor: VueElementProvider
         })
@@ -66,9 +62,6 @@ };
     const flicking = new VanillaFlicking(viewportEl, {
-      ...this.options,
-      ...{ renderExternal: {
-        renderer: VueRenderer,
-        rendererOptions
-      }}
+      ...options,
+      externalRenderer: new VueRenderer(rendererOptions)
     });
-    this._vanillaFlicking = flicking;
+    this.vanillaFlicking = flicking;
 
@@ -79,5 +72,5 @@ flicking.once(EVENTS.READY, () => {
 
-    const slots = this._getSlots();
-    this._slotDiffer = new ListDiffer<VNode>(slots, vnode => vnode.key!);
-    this._pluginsDiffer = new ListDiffer<Plugin>();
+    const slots = getSlots(this);
+    this.slotDiffer = new ListDiffer<VNode>(slots, vnode => vnode.key!);
+    this.pluginsDiffer = new ListDiffer<Plugin>();
 
@@ -90,22 +83,18 @@ this._bindEvents();
     }
-  }
+  },
+  beforeDestroy() {
+    this.vanillaFlicking?.destroy();
+  },
+  beforeMount() {
+    fillKeys(this);
+  },
+  beforeUpdate() {
+    fillKeys(this);
 
-  public beforeDestroy() {
-    this._vanillaFlicking?.destroy();
-  }
+    this.diffResult = this.slotDiffer.update(getSlots(this));
+  },
+  updated() {
+    const flicking = this.vanillaFlicking;
+    const diffResult = this.diffResult;
 
-  public beforeMount() {
-    this._fillKeys();
-  }
-
-  public beforeUpdate() {
-    this._fillKeys();
-
-    this._diffResult = this._slotDiffer.update(this._getSlots());
-  }
-
-  public updated() {
-    const flicking = this._vanillaFlicking;
-    const diffResult = this._diffResult;
-
     this._checkPlugins();
@@ -122,9 +111,8 @@ this.$emit("render");
 
-    this._diffResult = null;
-  }
-
-  public render(h: CreateElement) {
-    const flicking = this._vanillaFlicking;
+    this.diffResult = null;
+  },
+  render(h: CreateElement): VNode {
+    const flicking = this.vanillaFlicking;
     const options = this.options;
-    const initialized = !!this._diffResult && flicking && flicking.initialized;
+    const initialized = !!this.diffResult && flicking && flicking.initialized;
     const isHorizontal = flicking
@@ -159,77 +147,75 @@ ? flicking.horizontal
     );
-  }
+  },
+  methods: {
+    /* eslint-disable @typescript-eslint/naming-convention */
+    _getSlots() {
+      return this.$slots.default?.filter(slot => slot.tag) ?? [];
+    },
+    _fillKeys() {
+      const vnodes = this._getSlots();
 
-  private _bindEvents() {
-    const flicking = this._vanillaFlicking;
-    const events = Object.keys(EVENTS).map(key => EVENTS[key]);
+      vnodes.forEach((node, idx) => {
+        if (node.key == null) {
+          node.key = `$_${idx}`;
+        }
+      });
+    },
+    _bindEvents() {
+      const flicking = this.vanillaFlicking;
+      const events = Object.keys(EVENTS).map(key => EVENTS[key]);
 
-    events.forEach(eventName => {
-      flicking.on(eventName, (e: any) => {
-        e.currentTarget = this;
-        // Make events from camelCase to kebab-case
-        this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+      events.forEach(eventName => {
+        flicking.on(eventName, (e: any) => {
+          e.currentTarget = this;
+          // Make events from camelCase to kebab-case
+          this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
+        });
       });
-    });
-  }
+    },
+    _checkPlugins() {
+      const { list, added, removed, prevList } = this.pluginsDiffer.update(this.plugins);
 
-  private _checkPlugins() {
-    const { list, added, removed, prevList } = this._pluginsDiffer.update(this.plugins);
+      this.vanillaFlicking.addPlugins(...added.map(index => list[index]));
+      this.vanillaFlicking.removePlugins(...removed.map(index => prevList[index]));
+    },
+    _getPanels(h: CreateElement, initialized: boolean) {
+      const slots = initialized
+        ? getRenderingPanels(this.vanillaFlicking, this.diffResult!)
+        : this._getSlots();
+      return slots.map(slot => h("Panel", { key: slot.key }, [slot]));
+    },
+    _getVirtualPanels(h: CreateElement, initialized: boolean) {
+      const options = this.options;
+      const {
+        panelClass = "flicking-panel"
+      } = options.virtual!;
+      const panelsPerView = options.panelsPerView as number;
+      const flicking = this.vanillaFlicking;
 
-    this._vanillaFlicking.addPlugins(...added.map(index => list[index]));
-    this._vanillaFlicking.removePlugins(...removed.map(index => prevList[index]));
-  }
+      const renderingIndexes = initialized
+        ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
+        : range(panelsPerView + 1);
 
-  private _getSlots() {
-    return this.$slots.default?.filter(slot => slot.tag) ?? [];
-  }
+      const firstPanel = flicking && flicking.panels[0];
+      const size = firstPanel
+        ? flicking.horizontal
+          ? { width: firstPanel.size }
+          : { height: firstPanel.size }
+        : {};
 
-  private _fillKeys() {
-    const vnodes = this._getSlots();
-
-    vnodes.forEach((node, idx) => {
-      if (node.key == null) {
-        node.key = `$_${idx}`;
-      }
-    });
+      return renderingIndexes.map(idx => h("div", {
+        key: idx,
+        staticClass: panelClass,
+        style: size,
+        domProps: {
+          "data-element-index": idx
+        }
+      }));
+    }
   }
+});
 
-  private _getPanels(h: CreateElement, initialized: boolean) {
-    const slots = initialized
-      ? getRenderingPanels(this._vanillaFlicking, this._diffResult!)
-      : this._getSlots();
-    return slots.map(slot => h("Panel", { key: slot.key }, [slot]));
-  }
+type VueFlicking = InstanceType<typeof Flicking>;
 
-  private _getVirtualPanels(h: CreateElement, initialized: boolean) {
-    const options = this.options;
-    const {
-      panelClass = "flicking-panel"
-    } = options.virtual!;
-    const panelsPerView = options.panelsPerView!;
-    const flicking = this._vanillaFlicking;
-
-    const renderingIndexes = initialized
-      ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
-      : range(panelsPerView + 1);
-
-    const firstPanel = flicking && flicking.panels[0];
-    const size = firstPanel
-      ? flicking.horizontal
-        ? { width: firstPanel.size }
-        : { height: firstPanel.size }
-      : {};
-
-    return renderingIndexes.map(idx => h("div", {
-      key: idx,
-      staticClass: panelClass,
-      style: size,
-      domProps: {
-        "data-element-index": idx
-      }
-    }));
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Flicking extends VanillaFlicking {}
+interface Flicking extends VueFlicking, VanillaFlicking {}
 export default Flicking;

src/VueElementProvider.ts

@@ -5,7 +5,7 @@ /*
  */
-import { ExternalElementProvider } from "@egjs/flicking";
+import { ElementProvider } from "@egjs/flicking";
 
 import VuePanel from "./VuePanel";
 
-class VueElementProvider implements ExternalElementProvider {
+class VueElementProvider implements ElementProvider {
   private _el: VuePanel;
@@ -12,0 +12,0 @@

src/VuePanel.ts

@@ -5,17 +5,26 @@ /*
  */
-import { Component, Vue } from "vue-property-decorator";
+import Vue from "vue";
 
-@Component({})
-class VuePanel extends Vue {
-  public hide = false;
-
-  public get nativeElement() { return this.$el as HTMLElement; }
-
-  public render() {
-    return this.hide
+const VuePanel = Vue.extend<{ hide: boolean }, {}, { nativeElement: HTMLElement }>({
+  data() {
+    return {
+      hide: false
+    };
+  },
+  render() {
+    const children = this.hide
       ? undefined
       : this.$slots.default ?? [];
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return children as any;
+  },
+  computed: {
+    nativeElement(): HTMLElement { return this.$el as HTMLElement; }
   }
-}
+});
 
+type VuePanelType = InstanceType<typeof VuePanel>;
+
+interface VuePanel extends VuePanelType {}
 export default VuePanel;

No alert changes

Improved metrics

Total package byte prevSize

109159

6.12%

Dependency count

2

-33.33%

Number of package files

33

13.79%

Lines of code

1732

8.25%

Dependency changes

• - Removed

  vue-property-decorator@^8.1.0

• - Removed

  @babel/helper-string-parser@7.27.1
  (transitive)

• - Removed

  @babel/helper-validator-identifier@7.27.1
  (transitive)

• - Removed

  @babel/parser@7.28.0
  (transitive)

• - Removed

  @babel/types@7.28.1
  (transitive)

• - Removed

  @jridgewell/sourcemap-codec@1.5.4
  (transitive)

• - Removed

  @vue/compiler-core@3.5.17
  (transitive)

• - Removed

  @vue/compiler-dom@3.5.17
  (transitive)

• - Removed

  @vue/compiler-sfc@2.7.163.5.17
  (transitive)

• - Removed

  @vue/compiler-ssr@3.5.17
  (transitive)

• - Removed

  @vue/reactivity@3.5.17
  (transitive)

• - Removed

  @vue/runtime-core@3.5.17
  (transitive)

• - Removed

  @vue/runtime-dom@3.5.17
  (transitive)

• - Removed

  @vue/server-renderer@3.5.17
  (transitive)

• - Removed

  @vue/shared@3.5.17
  (transitive)

• - Removed

  csstype@3.1.3
  (transitive)

• - Removed

  entities@4.5.0
  (transitive)

• - Removed

  estree-walker@2.0.2
  (transitive)

• - Removed

  magic-string@0.30.17
  (transitive)

• - Removed

  nanoid@3.3.11
  (transitive)

• - Removed

  picocolors@1.1.1
  (transitive)

• - Removed

  postcss@8.5.6
  (transitive)

• - Removed

  prettier@2.8.8
  (transitive)

• - Removed

  source-map@0.6.1
  (transitive)

• - Removed

  source-map-js@1.2.1
  (transitive)

• - Removed

  vue@2.7.163.5.17
  (transitive)

• - Removed

  vue-class-component@7.2.6
  (transitive)

• - Removed

  vue-property-decorator@8.5.1
  (transitive)

• Updated

  @egjs/flicking@^4.4.1