@egjs/vue3-flicking 4.4.1 → 4.4.2

package/src/Flicking.ts

@@ -2,10 +2,7 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-/* eslint-disable @typescript-eslint/explicit-member-accessibility */
-/* eslint-disable @typescript-eslint/naming-convention */
-import { h, VNode, resolveComponent, Fragment, getCurrentInstance } from "vue";
-import { Vue, Options, VueConstructor } from "vue-class-component";
+import { h, defineComponent, VNode, resolveComponent, Fragment, getCurrentInstance } from "vue";
 import ListDiffer, { DiffResult } from "@egjs/list-differ";
 import Component from "@egjs/component";
 import VanillaFlicking, {
@@ -17,47 +14,100 @@ import VanillaFlicking, {
   getDefaultCameraTransform,
   range,
   VirtualRenderingStrategy,
-  NormalRenderingStrategy,
-  ExternalPanel
+  NormalRenderingStrategy
 } from "@egjs/flicking";
 
 import FlickingProps from "./FlickingProps";
 import VueRenderer, { VueRendererOptions } from "./VueRenderer";
 import VuePanel from "./VuePanel";
 import VueElementProvider from "./VueElementProvider";
+import { VueFlicking } from "./types";
 
-@Options({
+const Flicking = defineComponent({
+  props: FlickingProps,
   components: {
     Panel: VuePanel
-  }
-})
-class Flicking extends Vue.with(FlickingProps) {
-  public readonly renderEmitter = new Component<{ render: void }>();
-
-  @withFlickingMethods private vanillaFlicking: VanillaFlicking | null = null;
-  private pluginsDiffer!: ListDiffer<Plugin>;
-  private slotDiffer!: ListDiffer<VNode>;
-  private diffResult?: DiffResult<VNode> = undefined;
+  },
+  data() {
+    return {} as {
+      renderEmitter: Component<{ render: void }>;
+      vanillaFlicking: VanillaFlicking;
+      pluginsDiffer: ListDiffer<Plugin>;
+      slotDiffer: ListDiffer<VNode>;
+      diffResult: DiffResult<VNode> | null;
+    };
+  },
+  created() {
+    this.vanillaFlicking = null;
+    this.renderEmitter = new Component();
+    this.diffResult = null;
+
+    this.getPanels = () => {
+      const componentInstance = getCurrentInstance() as unknown as { ctx: Flicking } | null;
+      const vueFlicking = componentInstance?.ctx;
+      const flicking = this.vanillaFlicking;
+      const defaultSlots = this.getSlots();
+      const diffResult = vueFlicking?.diffResult;
+
+      const slots = diffResult
+        ? getRenderingPanels(flicking, diffResult)
+        : defaultSlots;
+
+      const panelComponent = resolveComponent("Panel");
+      const panels = slots.map((slot, idx) => h(panelComponent as any, {
+        key: slot.key!,
+        ref: idx.toString()
+      }, () => slot));
+
+      return panels;
+    };
+    this.getVirtualPanels = () => {
+      const options = this.options;
+      const {
+        panelClass = "flicking-panel"
+      } = options.virtual!;
+      const panelsPerView = options.panelsPerView as number;
+      const flicking = this.vanillaFlicking;
+      const initialized = flicking && flicking.initialized;
+
+      const renderingIndexes = initialized
+        ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
+        : range(panelsPerView + 1);
+
+      const firstPanel = initialized && flicking.panels[0];
+      const size = firstPanel
+        ? flicking.horizontal
+          ? { width: firstPanel.size }
+          : { height: firstPanel.size }
+        : {};
+
+      return renderingIndexes.map(idx => h("div", {
+        key: idx,
+        ref: idx.toString(),
+        class: panelClass,
+        style: size,
+        "data-element-index": idx
+      }));
+    };
 
-  public mounted() {
+    withFlickingMethods(this, "vanillaFlicking");
+  },
+  mounted() {
     const options = this.options;
     const viewportEl = this.$el as HTMLElement;
     const rendererOptions: VueRendererOptions = {
       vueFlicking: this,
+      align: options.align,
       strategy: options.virtual && (options.panelsPerView ?? -1) > 0
         ? new VirtualRenderingStrategy()
         : new NormalRenderingStrategy({
-          providerCtor: VueElementProvider,
-          panelCtor: ExternalPanel
+          providerCtor: VueElementProvider
         })
     };
 
     const flicking = new VanillaFlicking(viewportEl, {
-      ...this.options,
-      ...{ renderExternal: {
-        renderer: VueRenderer,
-        rendererOptions
-      }}
+      ...options,
+      externalRenderer: new VueRenderer(rendererOptions)
     });
     this.vanillaFlicking = flicking;
 
@@ -75,23 +125,19 @@ class Flicking extends Vue.with(FlickingProps) {
     if (this.status) {
       flicking.setStatus(this.status);
     }
-  }
-
-  public beforeDestroy() {
+  },
+  beforeUnmount() {
     this.vanillaFlicking?.destroy();
-  }
-
-  public beforeMount() {
+  },
+  beforeMount() {
     this.fillKeys();
-  }
-
-  public beforeUpdate() {
+  },
+  beforeUpdate() {
     this.fillKeys();
 
     this.diffResult = this.slotDiffer.update(this.getSlots());
-  }
-
-  public updated() {
+  },
+  updated() {
     const flicking = this.vanillaFlicking;
     const diffResult = this.diffResult;
 
@@ -109,9 +155,8 @@ class Flicking extends Vue.with(FlickingProps) {
     }
 
     this.diffResult = undefined;
-  }
-
-  public render() {
+  },
+  render() {
     const flicking = this.vanillaFlicking;
     const options = this.options;
     const initialized = flicking && flicking.initialized;
@@ -146,117 +191,61 @@ class Flicking extends Vue.with(FlickingProps) {
     return h(this.viewportTag, viewportData,
       [h(this.cameraTag, cameraData, { default: panels }), ...viewportSlots]
     );
-  }
-
-  public getSlots() {
-    const slots = this.$slots.default
-      ? this.$slots.default()
-      : [];
-
-    return slots.reduce((elementSlots, slot) => [...elementSlots, ...this.getElementVNodes(slot)], [] as VNode[]);
-  }
-
-  public getElementVNodes(slot: VNode, childSlots: VNode[] = []): VNode[] {
-    if (slot.type === Fragment && Array.isArray(slot.children)) {
-      slot.children
-        .filter(child => child && typeof child === "object")
-        .forEach(child => this.getElementVNodes(child as VNode, childSlots));
-    } else {
-      childSlots.push(slot);
-    }
-
-    return childSlots;
-  }
-
-  private bindEvents() {
-    const flicking = this.vanillaFlicking;
-    const events = (Object.keys(EVENTS) as Array<keyof typeof 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);
-      });
-    });
-  }
-
-  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]));
-  }
-
-  private fillKeys() {
-    const vnodes = this.getSlots();
-
-    vnodes.forEach((node, idx) => {
-      if (node.key == null) {
-        node.key = `$_${idx}`;
+  },
+  methods: {
+    getSlots() {
+      const slots = this.$slots.default
+        ? this.$slots.default()
+        : [];
+
+      return slots.reduce((elementSlots, slot) => [...elementSlots, ...this.getElementVNodes(slot)], [] as VNode[]);
+    },
+    getElementVNodes(slot: VNode, childSlots: VNode[] = []): VNode[] {
+      if (slot.type === Fragment && Array.isArray(slot.children)) {
+        slot.children
+          .filter(child => child && typeof child === "object")
+          .forEach(child => this.getElementVNodes(child as VNode, childSlots));
+      } else {
+        childSlots.push(slot);
       }
-    });
-  }
 
-  private getChildren() {
-    const childRefs = this.$refs;
+      return childSlots;
+    },
+    bindEvents() {
+      const flicking = this.vanillaFlicking;
+      const events = (Object.keys(EVENTS) as Array<keyof typeof 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);
+        });
+      });
+    },
+    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]));
+    },
+    fillKeys() {
+      const vnodes = this.getSlots();
+
+      vnodes.forEach((node, idx) => {
+        if (node.key == null) {
+          node.key = `$_${idx}`;
+        }
+      });
+    },
+    getChildren() {
+      const childRefs = this.$refs;
 
-    return Object.keys(childRefs).map(refKey => childRefs[refKey]);
+      return Object.keys(childRefs).map(refKey => childRefs[refKey]);
+    }
   }
+}) as unknown as VueFlicking;
 
-  private getPanels = () => {
-    const componentInstance = getCurrentInstance() as unknown as { ctx: Flicking } | null;
-    const vueFlicking = componentInstance?.ctx;
-    const flicking = this.vanillaFlicking;
-    const defaultSlots = this.getSlots();
-    const diffResult = vueFlicking?.diffResult;
-
-    const slots = diffResult
-      ? getRenderingPanels(flicking!, diffResult)
-      : defaultSlots;
-
-    const panelComponent = resolveComponent("Panel");
-    const panels = slots.map((slot, idx) => h(panelComponent as any, {
-      key: slot.key!,
-      ref: idx.toString()
-    }, () => slot));
-
-    return panels;
-  };
-
-  private getVirtualPanels = () => {
-    const options = this.options;
-    const {
-      panelClass = "flicking-panel"
-    } = options.virtual!;
-    const panelsPerView = options.panelsPerView!;
-    const flicking = this.vanillaFlicking;
-    const initialized = flicking && flicking.initialized;
-
-    const renderingIndexes = initialized
-      ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
-      : range(panelsPerView + 1);
-
-    const firstPanel = initialized && flicking.panels[0];
-    const size = firstPanel
-      ? flicking.horizontal
-        ? { width: firstPanel.size }
-        : { height: firstPanel.size }
-      : {};
-
-    return renderingIndexes.map(idx => h("div", {
-      key: idx,
-      ref: idx.toString(),
-      class: panelClass,
-      style: size,
-      domProps: {
-        "data-element-index": idx
-      }
-    }));
-  };
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Flicking extends VanillaFlicking, VueConstructor<Vue & FlickingProps> {}
+interface Flicking extends VueFlicking, VanillaFlicking {}
 export default Flicking;

package/src/FlickingProps.ts

@@ -2,22 +2,41 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-/* eslint-disable @typescript-eslint/explicit-member-accessibility */
-import { prop } from "vue-class-component";
-import {
-  FlickingOptions,
-  Plugin,
-  Status
-} from "@egjs/flicking";
+import { PropType } from "vue";
+import { FlickingOptions, Plugin, Status } from "@egjs/flicking";
 
-class FlickingProps {
-  viewportTag = prop<string>({ required: false, default: "div" });
-  cameraTag = prop<string>({ required: false, default: "div" });
-  hideBeforeInit = prop<boolean>({ required: false, default: false });
-  firstPanelSize = prop<string>({ required: false, default: null });
-  options = prop<Partial<FlickingOptions>>({ required: false, default: {} });
-  plugins = prop<Plugin[]>({ required: false, default: [] });
-  status = prop<Status>({ required: false, default: null });
-}
-
-export default FlickingProps;
+export default {
+  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 as unknown as () => Partial<FlickingOptions>,
+    default: () => ({}),
+    required: false
+  },
+  plugins: {
+    type: Array as PropType<Plugin[]>,
+    default: () => ([]),
+    required: false
+  },
+  status: {
+    type: Object as PropType<Status>,
+    required: false
+  }
+};

package/src/VueElementProvider.ts

@@ -2,11 +2,11 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-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;
   private _cachedElement: HTMLElement;
 

package/src/VuePanel.ts

@@ -2,17 +2,23 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import { Vue } from "vue-class-component";
 
-class VuePanel extends Vue {
-  public hide: boolean = false;
+import { defineComponent } from "vue";
 
-  public render() {
+const VuePanel = defineComponent({
+  data() {
+    return {
+      hide: false
+    };
+  },
+  render() {
     if (this.hide || !this.$slots.default) return;
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    return this.$slots.default() as any;
+    return this.$slots.default();
   }
-}
+});
 
+type VuePanelType = InstanceType<typeof VuePanel>;
+
+interface VuePanel extends VuePanelType {}
 export default VuePanel;

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 */