@egjs/vue3-flicking 4.3.1 → 4.4.3

package/src/VueRenderer.ts

@@ -1,8 +1,16 @@
-import { ExternalRenderer, PanelOptions, RendererOptions } from "@egjs/flicking";
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import {
+  ExternalRenderer,
+  getFlickingAttached,
+  PanelOptions,
+  RendererOptions
+} from "@egjs/flicking";
 
 import VueFlicking from "./Flicking";
 import VuePanel from "./VuePanel";
-import VuePanelComponent from "./VuePanelComponent";
 
 export interface VueRendererOptions extends RendererOptions {
   vueFlicking: VueFlicking;
@@ -10,7 +18,7 @@ export interface VueRendererOptions extends RendererOptions {
 
 class VueRenderer extends ExternalRenderer {
   // Internal States
-  protected _vueFlicking: VueFlicking;
+  private _vueFlicking: VueFlicking;
 
   public constructor(options: VueRendererOptions) {
     super(options);
@@ -18,37 +26,42 @@ class VueRenderer extends ExternalRenderer {
     this._vueFlicking = options.vueFlicking;
   }
 
-  // eslint-disable-next-line @typescript-eslint/require-await
   public async render() {
-    const flicking = this._flicking;
+    const flicking = getFlickingAttached(this._flicking);
+    const vueFlicking = this._vueFlicking;
+    const strategy = this._strategy;
 
-    if (!flicking) return;
+    strategy.updateRenderingPanels(flicking);
+    strategy.renderPanels(flicking);
 
-    this._updateRenderingPanels();
-    this._vueFlicking.$forceUpdate();
+    return new Promise<void>((resolve) => {
+      vueFlicking.renderEmitter.once("render", resolve);
+      vueFlicking.$forceUpdate();
+    });
   }
 
-  // eslint-disable-next-line @typescript-eslint/require-await
   public async forceRenderAllPanels() {
-    this._panels.forEach(panel => panel.markForShow());
-    this._vueFlicking.$forceUpdate();
+    const vueFlicking = this._vueFlicking;
+
+    await super.forceRenderAllPanels();
+
+    return new Promise<void>((resolve) => {
+      vueFlicking.renderEmitter.once("render", resolve);
+      vueFlicking.$forceUpdate();
+    });
   }
 
   protected _collectPanels() {
-    const align = this._getPanelAlign();
-    const childRefs = this._vueFlicking.$refs;
-    const children: any[] = Object.keys(childRefs).map(refKey => childRefs[refKey]);
-
-    this._panels = children.map((panelComponent, index) => new VuePanel({
-      flicking: this._flicking!,
-      index,
-      align,
-      externalComponent: panelComponent
-    }));
+    const flicking = getFlickingAttached(this._flicking);
+    const vueFlicking = this._vueFlicking;
+    const childRefs = vueFlicking.$refs;
+    const vuePanels: any[] = Object.keys(childRefs).map(refKey => childRefs[refKey]);
+
+    this._panels = this._strategy.collectPanels(flicking, vuePanels);
   }
 
-  protected _createPanel(externalComponent: VuePanelComponent, options: PanelOptions) {
-    return new VuePanel({ externalComponent, ...options });
+  protected _createPanel(externalComponent: VuePanel, options: PanelOptions) {
+    return this._strategy.createPanel(externalComponent, options);
   }
 }
 

package/src/index.ts

@@ -1,4 +1,4 @@
 import Flicking from "./Flicking";
 
-export default Flicking;
 export * from "@egjs/flicking";
+export default Flicking;

package/src/shims-vue.d.ts

@@ -1,6 +1,6 @@
-/* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+/* eslint-disable @typescript-eslint/ban-types */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

package/src/types.ts

@@ -0,0 +1,75 @@
+import { ComponentOptionsMixin, DefineComponent, VNode } from "vue";
+import VanillaFlicking, {
+  Plugin,
+  Status,
+  FlickingOptions,
+  FlickingEvents
+} from "@egjs/flicking";
+import Component from "@egjs/component";
+import ListDiffer, { DiffResult } from "@egjs/list-differ";
+
+import FlickingProps from "./FlickingProps";
+
+export interface FlickingData {
+  renderEmitter: Component<{ render: void }>;
+  vanillaFlicking: VanillaFlicking;
+  pluginsDiffer: ListDiffer<Plugin>;
+  slotDiffer: ListDiffer<VNode>;
+  diffResult: DiffResult<VNode> | null;
+}
+
+type VueFlickingEmits = {
+  [key in keyof FlickingEvents]: (evt: FlickingEvents[key]) => any;
+};
+
+/* eslint-disable @typescript-eslint/indent */
+export type VueFlicking = DefineComponent<
+  typeof FlickingProps,
+  // RawBindings
+  unknown,
+  // Data
+  FlickingData,
+  // Computed
+  {},
+  // Methods
+  {},
+  // Mixin
+  ComponentOptionsMixin,
+  // Extends
+  ComponentOptionsMixin,
+  // Emits
+  VueFlickingEmits,
+  string,
+  // Public Props
+  import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps,
+  // Props
+  Readonly<{
+    viewportTag?: unknown;
+    cameraTag?: unknown;
+    hideBeforeInit?: unknown;
+    firstPanelSize?: unknown;
+    options?: unknown;
+    plugins?: unknown;
+    status?: unknown;
+  } & {
+    viewportTag: string;
+    cameraTag: string;
+    hideBeforeInit: boolean;
+    options: Partial<FlickingOptions>;
+    plugins: Plugin[];
+  } & {
+    firstPanelSize?: string;
+    status?: Status;
+  } & {
+    [K in keyof VueFlickingEmits as `on${Capitalize<K>}`]?: VueFlickingEmits[K];
+  }>,
+  // Defaults
+  {
+    viewportTag: string;
+    cameraTag: string;
+    hideBeforeInit: boolean;
+    options: Partial<FlickingOptions>;
+    plugins: Plugin[];
+  }
+>;
+/* eslint-enable @typescript-eslint/indent */

package/declaration/VuePanelComponent.d.ts

@@ -1,6 +0,0 @@
-import { Vue } from "vue-class-component";
-declare class VuePanelComponent extends Vue {
-    hide: boolean;
-    render(): any;
-}
-export default VuePanelComponent;

package/src/VuePanelComponent.ts

@@ -1,14 +0,0 @@
-
-import { Vue } from "vue-class-component";
-
-class VuePanelComponent extends Vue {
-  public hide: boolean = false;
-
-  public render() {
-    if (this.hide || !this.$slots.default) return;
-
-    return this.$slots.default() as any;
-  }
-}
-
-export default VuePanelComponent;