@egjs/vue3-flicking 4.3.0 → 4.4.2

package/dist/flicking.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"flicking.esm.js","sources":["../src/VuePanel.ts","../src/VueRenderer.ts","../src/VuePanelComponent.ts","../src/Flicking.ts"],"sourcesContent":["import { ExternalPanel } from \"@egjs/flicking\";\n\nimport VuePanelComponent from \"./VuePanelComponent\";\n\nclass VuePanel extends ExternalPanel<VuePanelComponent> {\n  public get element() {\n    return (this._externalComponent.$.subTree.children as any)[0].el as HTMLElement;\n  }\n\n  public get rendered() { return !this._externalComponent.hide; }\n\n  public markForShow() {\n    this._externalComponent.hide = false;\n  }\n\n  public markForHide() {\n    this._externalComponent.hide = true;\n  }\n}\n\nexport default VuePanel;\n","import { ExternalRenderer, PanelOptions, RendererOptions } from \"@egjs/flicking\";\n\nimport VueFlicking from \"./Flicking\";\nimport VuePanel from \"./VuePanel\";\nimport VuePanelComponent from \"./VuePanelComponent\";\n\nexport interface VueRendererOptions extends RendererOptions {\n  vueFlicking: VueFlicking;\n}\n\nclass VueRenderer extends ExternalRenderer {\n  // Internal States\n  protected _vueFlicking: VueFlicking;\n\n  public constructor(options: VueRendererOptions) {\n    super(options);\n\n    this._vueFlicking = options.vueFlicking;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/require-await\n  public async render() {\n    const flicking = this._flicking;\n\n    if (!flicking) return;\n\n    this._updateRenderingPanels();\n    this._vueFlicking.$forceUpdate();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/require-await\n  public async forceRenderAllPanels() {\n    this._panels.forEach(panel => panel.markForShow());\n    this._vueFlicking.$forceUpdate();\n  }\n\n  protected _collectPanels() {\n    const align = this._getPanelAlign();\n    const childRefs = this._vueFlicking.$refs;\n    const children: any[] = Object.keys(childRefs).map(refKey => childRefs[refKey]);\n\n    this._panels = children.map((panelComponent, index) => new VuePanel({\n      flicking: this._flicking!,\n      index,\n      align,\n      externalComponent: panelComponent\n    }));\n  }\n\n  protected _createPanel(externalComponent: VuePanelComponent, options: PanelOptions) {\n    return new VuePanel({ externalComponent, ...options });\n  }\n}\n\nexport default VueRenderer;\n","\nimport { Vue } from \"vue-class-component\";\n\nclass VuePanelComponent extends Vue {\n  public hide: boolean = false;\n\n  public render() {\n    if (this.hide || !this.$slots.default) return;\n\n    return this.$slots.default() as any;\n  }\n}\n\nexport default VuePanelComponent;\n","/**\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\n/* eslint-disable max-classes-per-file */\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\nimport { Vue, Options, prop, VueConstructor } from \"vue-class-component\";\nimport ListDiffer, { DiffResult } from \"@egjs/list-differ\";\nimport { h, VNode, resolveComponent, Fragment } from \"vue\";\nimport VanillaFlicking, {\n  EVENTS,\n  FlickingOptions,\n  withFlickingMethods,\n  sync,\n  Plugin,\n  Status,\n  getRenderingPanels,\n  getDefaultCameraTransform\n} from \"@egjs/flicking\";\n\nimport VueRenderer from \"./VueRenderer\";\nimport VuePanelComponent from \"./VuePanelComponent\";\n\nclass FlickingProps {\n  viewportTag = prop<string>({ required: false, default: \"div\" });\n  cameraTag = prop<string>({ required: false, default: \"div\" });\n  hideBeforeInit = prop<boolean>({ required: false, default: false });\n  firstPanelSize = prop<string>({ required: false });\n  options = prop<Partial<FlickingOptions>>({ required: false, default: {} });\n  plugins = prop<Plugin[]>({ required: false, default: [] });\n  status = prop<Status>({ required: false });\n}\n\n@Options({\n  components: {\n    Panel: VuePanelComponent\n  }\n})\nclass Flicking extends Vue.with(FlickingProps) {\n  @withFlickingMethods private vanillaFlicking: VanillaFlicking | null = null;\n  private pluginsDiffer!: ListDiffer<Plugin>;\n  private slotDiffer!: ListDiffer<VNode>;\n  private diffResult?: DiffResult<VNode> = undefined;\n\n  public mounted() {\n    const viewportEl = this.$el as HTMLElement;\n    const flicking = new VanillaFlicking(viewportEl, {\n      ...this.options,\n      ...{ renderExternal: {\n        renderer: VueRenderer,\n        rendererOptions: { vueFlicking: this }\n      }}\n    });\n    this.vanillaFlicking = flicking;\n\n    flicking.once(EVENTS.READY, () => {\n      this.$forceUpdate();\n    });\n\n    const slots = this.getSlots();\n    this.slotDiffer = new ListDiffer<VNode>(slots, vnode => vnode.key! as string | number);\n    this.pluginsDiffer = new ListDiffer<Plugin>();\n\n    this._bindEvents();\n    this._checkPlugins();\n    if (this.status) {\n      flicking.setStatus(this.status);\n    }\n  }\n\n  public beforeDestroy() {\n    this.vanillaFlicking?.destroy();\n  }\n\n  public beforeMount() {\n    this._fillKeys();\n  }\n\n  public beforeUpdate() {\n    this._fillKeys();\n  }\n\n  public updated() {\n    const flicking = this.vanillaFlicking;\n    const diffResult = this.diffResult;\n\n    if (!diffResult) return;\n\n    const children = (this.$.subTree as any).children[0].children.map((c: any) => c.component.ctx);\n\n    sync(flicking!, diffResult, children);\n\n    this._checkPlugins();\n\n    if (diffResult.added.length > 0 || diffResult.removed.length > 0) {\n      this.$forceUpdate();\n    }\n  }\n\n  public render() {\n    const flicking = this.vanillaFlicking;\n    const initialized = flicking && flicking.initialized;\n    const isHorizontal = flicking\n      ? flicking.horizontal\n      : this.options.horizontal ?? true;\n\n    const viewportData = {\n      class: {\n        \"flicking-viewport\": true,\n        \"vertical\": !isHorizontal,\n        \"flicking-hidden\": this.hideBeforeInit && !initialized\n      }\n    };\n    const cameraData = {\n      class: {\n        \"flicking-camera\": true\n      },\n      style: !initialized && this.firstPanelSize\n        ? { transform: getDefaultCameraTransform(this.options.align, this.options.horizontal, this.firstPanelSize) }\n        : {}\n    };\n\n    const getPanels = () => {\n      const defaultSlots = this.getSlots();\n      this.diffResult = initialized\n        ? this.slotDiffer.update(defaultSlots)\n        : undefined;\n\n      const slots = this.diffResult\n        ? getRenderingPanels(flicking!, this.diffResult)\n        : defaultSlots;\n      const panelComponent = resolveComponent(\"Panel\");\n      const panels = slots.map((slot, idx) => h(panelComponent as any, {\n        key: slot.key!,\n        ref: idx.toString()\n      }, () => slot));\n\n      return panels;\n    };\n\n    const viewportSlots = this.$slots.viewport\n      ? this.$slots.viewport()\n      : [];\n\n    return h(this.viewportTag, viewportData,\n      [h(this.cameraTag, cameraData, { default: getPanels }), ...viewportSlots]\n    );\n  }\n\n  public getSlots() {\n    const slots = this.$slots.default\n      ? this.$slots.default()\n      : [];\n\n    return slots.reduce((elementSlots, slot) => [...elementSlots, ...this.getElementVNodes(slot)], [] as VNode[]);\n  }\n\n  public getElementVNodes(slot: VNode, childSlots: VNode[] = []): VNode[] {\n    if (slot.type === Fragment && Array.isArray(slot.children)) {\n      slot.children\n        .filter(child => child && typeof child === \"object\")\n        .forEach(child => this.getElementVNodes(child as VNode, childSlots));\n    } else {\n      childSlots.push(slot);\n    }\n\n    return childSlots;\n  }\n\n  private _bindEvents() {\n    const flicking = this.vanillaFlicking;\n    const events = (Object.keys(EVENTS) as Array<keyof typeof EVENTS>)\n      .map(key => EVENTS[key]);\n\n    events.forEach(eventName => {\n      flicking!.on(eventName, (e: any) => {\n        e.currentTarget = this;\n        // Make events from camelCase to kebab-case\n        this.$emit(eventName.replace(/([A-Z])/g, \"-$1\").toLowerCase(), e);\n      });\n    });\n  }\n\n  private _checkPlugins() {\n    const { list, added, removed, prevList } = this.pluginsDiffer.update(this.plugins);\n\n    this.vanillaFlicking!.addPlugins(...added.map(index => list[index]));\n    this.vanillaFlicking!.removePlugins(...removed.map(index => prevList[index]));\n  }\n\n  private _fillKeys() {\n    const vnodes = this.getSlots();\n\n    vnodes.forEach((node, idx) => {\n      if (node.key == null) {\n        node.key = `$_${idx}`;\n      }\n    });\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface Flicking extends VanillaFlicking, VueConstructor<Vue & FlickingProps> {}\nexport default Flicking;\n"],"names":["__extends","Object","_externalComponent","$","subTree","children","el","hide","ExternalPanel","options","_super","_this","_vueFlicking","vueFlicking","flicking","_flicking","_updateRenderingPanels","$forceUpdate","_panels","forEach","panel","markForShow","align","_getPanelAlign","childRefs","$refs","keys","map","refKey","panelComponent","index","VuePanel","externalComponent","ExternalRenderer","$slots","default","Vue","prop","required","undefined","viewportEl","$el","VanillaFlicking","renderExternal","renderer","VueRenderer","rendererOptions","vanillaFlicking","once","EVENTS","READY","slots","getSlots","slotDiffer","ListDiffer","vnode","key","pluginsDiffer","_bindEvents","_checkPlugins","status","setStatus","destroy","_fillKeys","diffResult","c","component","ctx","sync","added","length","removed","initialized","isHorizontal","horizontal","viewportData","class","hideBeforeInit","cameraData","style","firstPanelSize","transform","getDefaultCameraTransform","getPanels","defaultSlots","update","getRenderingPanels","resolveComponent","panels","slot","idx","h","ref","toString","viewportSlots","viewport","viewportTag","cameraTag","reduce","elementSlots","getElementVNodes","childSlots","type","Fragment","Array","isArray","filter","child","push","events","eventName","on","e","currentTarget","$emit","replace","toLowerCase","_c","plugins","list","prevList","_a","addPlugins","_b","removePlugins","vnodes","node","__decorate","withFlickingMethods","Flicking","Options","components","Panel","VuePanelComponent","with","FlickingProps"],"mappings":"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"}
+{"version":3,"file":"flicking.esm.js","sources":["../src/FlickingProps.ts","../src/VueRenderer.ts","../src/VuePanel.ts","../src/VueElementProvider.ts","../src/Flicking.ts"],"sourcesContent":["/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { PropType } from \"vue\";\nimport { FlickingOptions, Plugin, Status } from \"@egjs/flicking\";\n\nexport default {\n  viewportTag: {\n    type: String,\n    default: \"div\",\n    required: false\n  },\n  cameraTag: {\n    type: String,\n    default: \"div\",\n    required: false\n  },\n  hideBeforeInit: {\n    type: Boolean,\n    default: false,\n    required: false\n  },\n  firstPanelSize: {\n    type: String,\n    required: false\n  },\n  options: {\n    type: Object as unknown as () => Partial<FlickingOptions>,\n    default: () => ({}),\n    required: false\n  },\n  plugins: {\n    type: Array as PropType<Plugin[]>,\n    default: () => ([]),\n    required: false\n  },\n  status: {\n    type: Object as PropType<Status>,\n    required: false\n  }\n};\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport {\n  ExternalRenderer,\n  getFlickingAttached,\n  PanelOptions,\n  RendererOptions\n} from \"@egjs/flicking\";\n\nimport VueFlicking from \"./Flicking\";\nimport VuePanel from \"./VuePanel\";\n\nexport interface VueRendererOptions extends RendererOptions {\n  vueFlicking: VueFlicking;\n}\n\nclass VueRenderer extends ExternalRenderer {\n  // Internal States\n  private _vueFlicking: VueFlicking;\n\n  public constructor(options: VueRendererOptions) {\n    super(options);\n\n    this._vueFlicking = options.vueFlicking;\n  }\n\n  public async render() {\n    const flicking = getFlickingAttached(this._flicking);\n    const vueFlicking = this._vueFlicking;\n    const strategy = this._strategy;\n\n    strategy.updateRenderingPanels(flicking);\n    strategy.renderPanels(flicking);\n\n    return new Promise<void>((resolve) => {\n      vueFlicking.renderEmitter.once(\"render\", resolve);\n      vueFlicking.$forceUpdate();\n    });\n  }\n\n  public async forceRenderAllPanels() {\n    const vueFlicking = this._vueFlicking;\n\n    await super.forceRenderAllPanels();\n\n    return new Promise<void>((resolve) => {\n      vueFlicking.renderEmitter.once(\"render\", resolve);\n      vueFlicking.$forceUpdate();\n    });\n  }\n\n  protected _collectPanels() {\n    const flicking = getFlickingAttached(this._flicking);\n    const vueFlicking = this._vueFlicking;\n    const childRefs = vueFlicking.$refs;\n    const vuePanels: any[] = Object.keys(childRefs).map(refKey => childRefs[refKey]);\n\n    this._panels = this._strategy.collectPanels(flicking, vuePanels);\n  }\n\n  protected _createPanel(externalComponent: VuePanel, options: PanelOptions) {\n    return this._strategy.createPanel(externalComponent, options);\n  }\n}\n\nexport default VueRenderer;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\n\nimport { defineComponent } from \"vue\";\n\nconst VuePanel = defineComponent({\n  data() {\n    return {\n      hide: false\n    };\n  },\n  render() {\n    if (this.hide || !this.$slots.default) return;\n\n    return this.$slots.default();\n  }\n});\n\ntype VuePanelType = InstanceType<typeof VuePanel>;\n\ninterface VuePanel extends VuePanelType {}\nexport default VuePanel;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ElementProvider } from \"@egjs/flicking\";\n\nimport VuePanel from \"./VuePanel\";\n\nclass VueElementProvider implements ElementProvider {\n  private _el: VuePanel;\n  private _cachedElement: HTMLElement;\n\n  public get rendered() { return !this._el.hide; }\n  public get element() {\n    const el = this._el.$el.nextSibling as HTMLElement;\n\n    if (el && el.nodeType === Node.ELEMENT_NODE) {\n      this._cachedElement = el;\n    }\n\n    return this._cachedElement;\n  }\n\n  public constructor(el: VuePanel) {\n    this._el = el;\n  }\n\n  public show() {\n    this._el.hide = false;\n  }\n\n  public hide() {\n    this._el.hide = true;\n  }\n}\n\nexport default VueElementProvider;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { h, defineComponent, VNode, resolveComponent, Fragment, getCurrentInstance } from \"vue\";\nimport ListDiffer, { DiffResult } from \"@egjs/list-differ\";\nimport Component from \"@egjs/component\";\nimport VanillaFlicking, {\n  EVENTS,\n  withFlickingMethods,\n  sync,\n  Plugin,\n  getRenderingPanels,\n  getDefaultCameraTransform,\n  range,\n  VirtualRenderingStrategy,\n  NormalRenderingStrategy\n} from \"@egjs/flicking\";\n\nimport FlickingProps from \"./FlickingProps\";\nimport VueRenderer, { VueRendererOptions } from \"./VueRenderer\";\nimport VuePanel from \"./VuePanel\";\nimport VueElementProvider from \"./VueElementProvider\";\nimport { VueFlicking } from \"./types\";\n\nconst Flicking = defineComponent({\n  props: FlickingProps,\n  components: {\n    Panel: VuePanel\n  },\n  data() {\n    return {} as {\n      renderEmitter: Component<{ render: void }>;\n      vanillaFlicking: VanillaFlicking;\n      pluginsDiffer: ListDiffer<Plugin>;\n      slotDiffer: ListDiffer<VNode>;\n      diffResult: DiffResult<VNode> | null;\n    };\n  },\n  created() {\n    this.vanillaFlicking = null;\n    this.renderEmitter = new Component();\n    this.diffResult = null;\n\n    this.getPanels = () => {\n      const componentInstance = getCurrentInstance() as unknown as { ctx: Flicking } | null;\n      const vueFlicking = componentInstance?.ctx;\n      const flicking = this.vanillaFlicking;\n      const defaultSlots = this.getSlots();\n      const diffResult = vueFlicking?.diffResult;\n\n      const slots = diffResult\n        ? getRenderingPanels(flicking, diffResult)\n        : defaultSlots;\n\n      const panelComponent = resolveComponent(\"Panel\");\n      const panels = slots.map((slot, idx) => h(panelComponent as any, {\n        key: slot.key!,\n        ref: idx.toString()\n      }, () => slot));\n\n      return panels;\n    };\n    this.getVirtualPanels = () => {\n      const options = this.options;\n      const {\n        panelClass = \"flicking-panel\"\n      } = options.virtual!;\n      const panelsPerView = options.panelsPerView as number;\n      const flicking = this.vanillaFlicking;\n      const initialized = flicking && flicking.initialized;\n\n      const renderingIndexes = initialized\n        ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)\n        : range(panelsPerView + 1);\n\n      const firstPanel = initialized && flicking.panels[0];\n      const size = firstPanel\n        ? flicking.horizontal\n          ? { width: firstPanel.size }\n          : { height: firstPanel.size }\n        : {};\n\n      return renderingIndexes.map(idx => h(\"div\", {\n        key: idx,\n        ref: idx.toString(),\n        class: panelClass,\n        style: size,\n        \"data-element-index\": idx\n      }));\n    };\n\n    withFlickingMethods(this, \"vanillaFlicking\");\n  },\n  mounted() {\n    const options = this.options;\n    const viewportEl = this.$el as HTMLElement;\n    const rendererOptions: VueRendererOptions = {\n      vueFlicking: this,\n      align: options.align,\n      strategy: options.virtual && (options.panelsPerView ?? -1) > 0\n        ? new VirtualRenderingStrategy()\n        : new NormalRenderingStrategy({\n          providerCtor: VueElementProvider\n        })\n    };\n\n    const flicking = new VanillaFlicking(viewportEl, {\n      ...options,\n      externalRenderer: new VueRenderer(rendererOptions)\n    });\n    this.vanillaFlicking = flicking;\n\n    flicking.once(EVENTS.READY, () => {\n      this.$forceUpdate();\n    });\n\n    const slots = this.getSlots();\n    this.slotDiffer = new ListDiffer<VNode>(slots, vnode => vnode.key! as string | number);\n    this.pluginsDiffer = new ListDiffer<Plugin>();\n\n    this.bindEvents();\n    this.checkPlugins();\n\n    if (this.status) {\n      flicking.setStatus(this.status);\n    }\n  },\n  beforeUnmount() {\n    this.vanillaFlicking?.destroy();\n  },\n  beforeMount() {\n    this.fillKeys();\n  },\n  beforeUpdate() {\n    this.fillKeys();\n\n    this.diffResult = this.slotDiffer.update(this.getSlots());\n  },\n  updated() {\n    const flicking = this.vanillaFlicking;\n    const diffResult = this.diffResult;\n\n    this.checkPlugins();\n    this.renderEmitter.trigger(\"render\");\n\n    if (!diffResult || !flicking?.initialized) return;\n\n    const children = this.getChildren();\n\n    sync(flicking, diffResult, children);\n\n    if (diffResult.added.length > 0 || diffResult.removed.length > 0) {\n      this.$forceUpdate();\n    }\n\n    this.diffResult = undefined;\n  },\n  render() {\n    const flicking = this.vanillaFlicking;\n    const options = this.options;\n    const initialized = flicking && flicking.initialized;\n    const isHorizontal = flicking\n      ? flicking.horizontal\n      : this.options.horizontal ?? true;\n\n    const viewportData = {\n      class: {\n        \"flicking-viewport\": true,\n        \"vertical\": !isHorizontal,\n        \"flicking-hidden\": this.hideBeforeInit && !initialized\n      }\n    };\n    const cameraData = {\n      class: {\n        \"flicking-camera\": true\n      },\n      style: !initialized && this.firstPanelSize\n        ? { transform: getDefaultCameraTransform(this.options.align, this.options.horizontal, this.firstPanelSize) }\n        : {}\n    };\n\n    const panels = options.virtual && options.panelsPerView && options.panelsPerView > 0\n      ? this.getVirtualPanels\n      : this.getPanels;\n\n    const viewportSlots = this.$slots.viewport\n      ? this.$slots.viewport()\n      : [];\n\n    return h(this.viewportTag, viewportData,\n      [h(this.cameraTag, cameraData, { default: panels }), ...viewportSlots]\n    );\n  },\n  methods: {\n    getSlots() {\n      const slots = this.$slots.default\n        ? this.$slots.default()\n        : [];\n\n      return slots.reduce((elementSlots, slot) => [...elementSlots, ...this.getElementVNodes(slot)], [] as VNode[]);\n    },\n    getElementVNodes(slot: VNode, childSlots: VNode[] = []): VNode[] {\n      if (slot.type === Fragment && Array.isArray(slot.children)) {\n        slot.children\n          .filter(child => child && typeof child === \"object\")\n          .forEach(child => this.getElementVNodes(child as VNode, childSlots));\n      } else {\n        childSlots.push(slot);\n      }\n\n      return childSlots;\n    },\n    bindEvents() {\n      const flicking = this.vanillaFlicking;\n      const events = (Object.keys(EVENTS) as Array<keyof typeof EVENTS>)\n        .map(key => EVENTS[key]);\n\n      events.forEach(eventName => {\n        flicking.on(eventName, (e: any) => {\n          e.currentTarget = this;\n          // Make events from camelCase to kebab-case\n          this.$emit(eventName.replace(/([A-Z])/g, \"-$1\").toLowerCase(), e);\n        });\n      });\n    },\n    checkPlugins() {\n      const { list, added, removed, prevList } = this.pluginsDiffer.update(this.plugins);\n\n      this.vanillaFlicking!.addPlugins(...added.map(index => list[index]));\n      this.vanillaFlicking!.removePlugins(...removed.map(index => prevList[index]));\n    },\n    fillKeys() {\n      const vnodes = this.getSlots();\n\n      vnodes.forEach((node, idx) => {\n        if (node.key == null) {\n          node.key = `$_${idx}`;\n        }\n      });\n    },\n    getChildren() {\n      const childRefs = this.$refs;\n\n      return Object.keys(childRefs).map(refKey => childRefs[refKey]);\n    }\n  }\n}) as unknown as VueFlicking;\n\ninterface Flicking extends VueFlicking, VanillaFlicking {}\nexport default Flicking;\n"],"names":["viewportTag","type","String","default","required","cameraTag","hideBeforeInit","Boolean","firstPanelSize","options","Object","plugins","Array","status","__extends","_super","_this","_vueFlicking","vueFlicking","flicking","getFlickingAttached","_flicking","strategy","_strategy","updateRenderingPanels","renderPanels","Promise","resolve","renderEmitter","once","$forceUpdate","forceRenderAllPanels","_a","childRefs","$refs","vuePanels","keys","map","refKey","_panels","collectPanels","externalComponent","createPanel","ExternalRenderer","VuePanel","defineComponent","data","hide","render","$slots","el","_el","$el","nextSibling","nodeType","Node","ELEMENT_NODE","_cachedElement","Flicking","props","FlickingProps","components","Panel","created","vanillaFlicking","Component","diffResult","getPanels","componentInstance","getCurrentInstance","ctx","defaultSlots","getSlots","slots","getRenderingPanels","panelComponent","resolveComponent","panels","slot","idx","h","key","ref","toString","getVirtualPanels","virtual","panelClass","panelsPerView","initialized","renderingIndexes","renderer","getRenderingIndexesByOrder","range","firstPanel","size","horizontal","width","height","class","style","withFlickingMethods","mounted","viewportEl","rendererOptions","align","VirtualRenderingStrategy","NormalRenderingStrategy","providerCtor","VueElementProvider","VanillaFlicking","externalRenderer","VueRenderer","EVENTS","READY","slotDiffer","ListDiffer","vnode","pluginsDiffer","bindEvents","checkPlugins","setStatus","beforeUnmount","destroy","beforeMount","fillKeys","beforeUpdate","update","updated","trigger","children","getChildren","sync","added","length","removed","undefined","isHorizontal","viewportData","cameraData","transform","getDefaultCameraTransform","viewportSlots","viewport","methods","reduce","elementSlots","getElementVNodes","childSlots","Fragment","isArray","filter","child","forEach","push","events","eventName","on","e","currentTarget","$emit","replace","toLowerCase","_c","list","prevList","addPlugins","index","_b","removePlugins","vnodes","node"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egjs/vue3-flicking",
-  "version": "4.3.0",
+  "version": "4.4.2",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
   "main": "dist/flicking.cjs.js",
   "module": "dist/flicking.esm.js",
@@ -30,15 +30,14 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@egjs/flicking": "^4.3.0",
-    "vue-class-component": "^8.0.0-rc.1"
+    "@egjs/flicking": "^4.4.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
     "@egjs/build-helper": "^0.1.2",
-    "@egjs/flicking-plugins": "^4.2.1",
+    "@egjs/flicking-plugins": "^4.2.2",
     "@rollup/plugin-commonjs": "^19.0.2",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
@@ -46,7 +45,7 @@
     "cpx": "^1.5.0",
     "rollup-plugin-vue": "^6.0.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.1.6",
-    "vue": "^3.2.6"
+    "typescript": "^4.2.3",
+    "vue": "^3.2.22"
   }
 }

package/src/Flicking.ts

@@ -1,56 +1,113 @@
-/**
+/*
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-/* eslint-disable max-classes-per-file */
-/* eslint-disable @typescript-eslint/explicit-member-accessibility */
-/* eslint-disable @typescript-eslint/naming-convention */
-import { Vue, Options, prop, VueConstructor } from "vue-class-component";
+import { h, defineComponent, VNode, resolveComponent, Fragment, getCurrentInstance } from "vue";
 import ListDiffer, { DiffResult } from "@egjs/list-differ";
-import { h, VNode, resolveComponent, Fragment } from "vue";
+import Component from "@egjs/component";
 import VanillaFlicking, {
   EVENTS,
-  FlickingOptions,
   withFlickingMethods,
   sync,
   Plugin,
-  Status,
   getRenderingPanels,
-  getDefaultCameraTransform
+  getDefaultCameraTransform,
+  range,
+  VirtualRenderingStrategy,
+  NormalRenderingStrategy
 } from "@egjs/flicking";
 
-import VueRenderer from "./VueRenderer";
-import VuePanelComponent from "./VuePanelComponent";
+import FlickingProps from "./FlickingProps";
+import VueRenderer, { VueRendererOptions } from "./VueRenderer";
+import VuePanel from "./VuePanel";
+import VueElementProvider from "./VueElementProvider";
+import { VueFlicking } from "./types";
 
-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 });
-  options = prop<Partial<FlickingOptions>>({ required: false, default: {} });
-  plugins = prop<Plugin[]>({ required: false, default: [] });
-  status = prop<Status>({ required: false });
-}
-
-@Options({
+const Flicking = defineComponent({
+  props: FlickingProps,
   components: {
-    Panel: VuePanelComponent
-  }
-})
-class Flicking extends Vue.with(FlickingProps) {
-  @withFlickingMethods private vanillaFlicking: VanillaFlicking | null = null;
-  private pluginsDiffer!: ListDiffer<Plugin>;
-  private slotDiffer!: ListDiffer<VNode>;
-  private diffResult?: DiffResult<VNode> = undefined;
-
-  public mounted() {
+    Panel: VuePanel
+  },
+  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
+      }));
+    };
+
+    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
+        })
+    };
+
     const flicking = new VanillaFlicking(viewportEl, {
-      ...this.options,
-      ...{ renderExternal: {
-        renderer: VueRenderer,
-        rendererOptions: { vueFlicking: this }
-      }}
+      ...options,
+      externalRenderer: new VueRenderer(rendererOptions)
     });
     this.vanillaFlicking = flicking;
 
@@ -62,44 +119,46 @@ class Flicking extends Vue.with(FlickingProps) {
     this.slotDiffer = new ListDiffer<VNode>(slots, vnode => vnode.key! as string | number);
     this.pluginsDiffer = new ListDiffer<Plugin>();
 
-    this._bindEvents();
-    this._checkPlugins();
+    this.bindEvents();
+    this.checkPlugins();
+
     if (this.status) {
       flicking.setStatus(this.status);
     }
-  }
-
-  public beforeDestroy() {
+  },
+  beforeUnmount() {
     this.vanillaFlicking?.destroy();
-  }
-
-  public beforeMount() {
-    this._fillKeys();
-  }
-
-  public beforeUpdate() {
-    this._fillKeys();
-  }
-
-  public updated() {
+  },
+  beforeMount() {
+    this.fillKeys();
+  },
+  beforeUpdate() {
+    this.fillKeys();
+
+    this.diffResult = this.slotDiffer.update(this.getSlots());
+  },
+  updated() {
     const flicking = this.vanillaFlicking;
     const diffResult = this.diffResult;
 
-    if (!diffResult) return;
+    this.checkPlugins();
+    this.renderEmitter.trigger("render");
 
-    const children = (this.$.subTree as any).children[0].children.map((c: any) => c.component.ctx);
+    if (!diffResult || !flicking?.initialized) return;
 
-    sync(flicking!, diffResult, children);
+    const children = this.getChildren();
 
-    this._checkPlugins();
+    sync(flicking, diffResult, children);
 
     if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
       this.$forceUpdate();
     }
-  }
 
-  public render() {
+    this.diffResult = undefined;
+  },
+  render() {
     const flicking = this.vanillaFlicking;
+    const options = this.options;
     const initialized = flicking && flicking.initialized;
     const isHorizontal = flicking
       ? flicking.horizontal
@@ -121,85 +180,72 @@ class Flicking extends Vue.with(FlickingProps) {
         : {}
     };
 
-    const getPanels = () => {
-      const defaultSlots = this.getSlots();
-      this.diffResult = initialized
-        ? this.slotDiffer.update(defaultSlots)
-        : undefined;
-
-      const slots = this.diffResult
-        ? getRenderingPanels(flicking!, this.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;
-    };
+    const panels = options.virtual && options.panelsPerView && options.panelsPerView > 0
+      ? this.getVirtualPanels
+      : this.getPanels;
 
     const viewportSlots = this.$slots.viewport
       ? this.$slots.viewport()
       : [];
 
     return h(this.viewportTag, viewportData,
-      [h(this.cameraTag, cameraData, { default: getPanels }), ...viewportSlots]
+      [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;
-  }
+  },
+  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 _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);
+      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);
+        });
       });
-    });
-  }
-
-  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();
+    },
+    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;
 
-    vnodes.forEach((node, idx) => {
-      if (node.key == null) {
-        node.key = `$_${idx}`;
-      }
-    });
+      return Object.keys(childRefs).map(refKey => childRefs[refKey]);
+    }
   }
-}
+}) as unknown as VueFlicking;
 
-// 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

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { PropType } from "vue";
+import { FlickingOptions, Plugin, Status } from "@egjs/flicking";
+
+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

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { ElementProvider } from "@egjs/flicking";
+
+import VuePanel from "./VuePanel";
+
+class VueElementProvider implements ElementProvider {
+  private _el: VuePanel;
+  private _cachedElement: HTMLElement;
+
+  public get rendered() { return !this._el.hide; }
+  public get element() {
+    const el = this._el.$el.nextSibling as HTMLElement;
+
+    if (el && el.nodeType === Node.ELEMENT_NODE) {
+      this._cachedElement = el;
+    }
+
+    return this._cachedElement;
+  }
+
+  public constructor(el: VuePanel) {
+    this._el = el;
+  }
+
+  public show() {
+    this._el.hide = false;
+  }
+
+  public hide() {
+    this._el.hide = true;
+  }
+}
+
+export default VueElementProvider;

package/src/VuePanel.ts

@@ -1,21 +1,24 @@
-import { ExternalPanel } from "@egjs/flicking";
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
 
-import VuePanelComponent from "./VuePanelComponent";
+import { defineComponent } from "vue";
 
-class VuePanel extends ExternalPanel<VuePanelComponent> {
-  public get element() {
-    return (this._externalComponent.$.subTree.children as any)[0].el as HTMLElement;
-  }
-
-  public get rendered() { return !this._externalComponent.hide; }
+const VuePanel = defineComponent({
+  data() {
+    return {
+      hide: false
+    };
+  },
+  render() {
+    if (this.hide || !this.$slots.default) return;
 
-  public markForShow() {
-    this._externalComponent.hide = false;
+    return this.$slots.default();
   }
+});
 
-  public markForHide() {
-    this._externalComponent.hide = true;
-  }
-}
+type VuePanelType = InstanceType<typeof VuePanel>;
 
+interface VuePanel extends VuePanelType {}
 export default VuePanel;