@egjs/vue3-flicking 4.14.1 → 4.16.0-beta.1

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2015-present NAVER Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/declaration/FlickingProps.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from "vue";
 import { FlickingOptions, Plugin, Status } from "@egjs/flicking";
+import { PropType } from "vue";
 declare const _default: {
     viewportTag: {
         type: StringConstructor;

package/declaration/VuePanel.d.ts

@@ -1,6 +1,6 @@
 declare const VuePanel: import("vue").DefineComponent<{}, {}, {
     hide: boolean;
-}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare type VuePanelType = InstanceType<typeof VuePanel>;
 interface VuePanel extends VuePanelType {
 }

package/declaration/VueRenderer.d.ts

@@ -10,6 +10,6 @@ declare class VueRenderer extends ExternalRenderer {
     render(): Promise<void>;
     forceRenderAllPanels(): Promise<void>;
     protected _collectPanels(): void;
-    protected _createPanel(externalComponent: VuePanel, options: PanelOptions): import("@egjs/flicking/declaration/core/panel/Panel").default;
+    protected _createPanel(externalComponent: VuePanel, options: PanelOptions): import("@egjs/flicking/dist/core/panel/Panel").default;
 }
 export default VueRenderer;

package/declaration/types.d.ts

@@ -1,11 +1,11 @@
-import { ComponentOptionsMixin, DefineComponent, VNode } from "vue";
-import VanillaFlicking, { Plugin, Status, FlickingOptions, FlickingEvents } from "@egjs/flicking";
 import Component from "@egjs/component";
+import VanillaFlicking, { FlickingEvents, FlickingOptions, Plugin, Status } from "@egjs/flicking";
 import ListDiffer, { DiffResult } from "@egjs/list-differ";
+import { ComponentOptionsMixin, DefineComponent, VNode } from "vue";
 import FlickingProps from "./FlickingProps";
 export interface FlickingData {
     renderEmitter: Component<{
-        render: void;
+        render: undefined;
     }>;
     vanillaFlicking: VanillaFlicking;
     pluginsDiffer: ListDiffer<Plugin>;

package/dev/archive/App.vue

@@ -0,0 +1,156 @@
+<template>
+  <article class="demo-container">
+      <h1>Default Rendering</h1>
+      <Flicking>
+        <div class="panel">0</div>
+        <div class="panel">1</div>
+        <div class="panel">2</div>
+      </Flicking>
+      <h1>Bound</h1>
+      <Flicking :options="{ bound: true }">
+        <div class="panel">0</div>
+        <div class="panel">1</div>
+        <div class="panel">2</div>
+        <div class="panel">3</div>
+        <div class="panel">4</div>
+        <div class="panel">5</div>
+        <div class="panel">6</div>
+      </Flicking>
+      <h1>FreeScroll</h1>
+      <Flicking :options="{ moveType: 'freeScroll' }">
+        <div class="panel">0</div>
+        <div class="panel">1</div>
+        <div class="panel">2</div>
+      </Flicking>
+      <h1>List Rendering</h1>
+      <Flicking>
+        <Test v-for="item in list0" :key="item" />
+      </Flicking>
+      <h1>Adding panels</h1>
+      <Flicking :options="{ circular: true, renderOnlyVisible: true }">
+        <div class="panel" v-for="panel in panels" :key="panel">{{ panel }}</div>
+        <Test />
+      </Flicking>
+      <div>
+        <span class="button" @click="() => {
+          prepend();
+        }">Prepend</span>
+        <span class="button" @click="() => {
+          append();
+        }">Append</span>
+      </div>
+      <h1>Method call</h1>
+      <Flicking ref="flick" :options="{ circular: true }">
+        <div class="panel">0</div>
+        <div class="panel">1</div>
+        <div class="panel">2</div>
+        <div class="panel">3</div>
+        <div class="panel">4</div>
+        <div class="panel">5</div>
+        <div class="panel">6</div>
+        <div class="panel">7</div>
+        <div class="panel">8</div>
+      </Flicking>
+      <div>
+        <span class="button" @click="() => {
+          prev();
+        }">Prev</span>
+        <span class="button" @click="() => {
+          next();
+        }">Next</span>
+      </div>
+      <Flicking :plugins="arrow">
+        <div class="panel">0</div>
+        <div class="panel">1</div>
+        <div class="panel">2</div>
+        <div class="panel">3</div>
+        <div class="panel">4</div>
+        <template #viewport>
+          <span class="flicking-arrow-prev"></span>
+          <span class="flicking-arrow-next"></span>
+        </template>
+      </Flicking>
+      <Flicking :plugins="fade" :options="{ renderOnlyVisible: true }">
+        <div class="panel">0</div>
+        <div class="panel">1</div>
+        <div class="panel">2</div>
+        <div class="panel">3</div>
+        <div class="panel">4</div>
+      </Flicking>
+      <Flicking class="flicking flicking0" ref="vFlick" :options="{
+        panelsPerView: 5,
+        circular: true,
+        virtual: {
+          panelClass: 'panel',
+          renderPanel: (panel) => `Panel ${panel.index}`,
+          initialPanelCount: 100
+        }
+      }"></Flicking>
+      <button @click="this.vPrepend">Prepend</button>
+      <button @click="this.vAppend">Append</button>
+      <Flicking :options="{ panelsPerView: this.panelsPerView }">
+        <div class="panel">0</div>
+        <div class="panel">1</div>
+        <div class="panel">2</div>
+        <div class="panel">3</div>
+        <div class="panel">4</div>
+      </Flicking>
+      <button @click="this.changeProp">Change</button>
+  </article>
+</template>
+
+<script>
+import { Arrow, Fade } from "@dev/plugins";
+import Flicking from "@dev/vue3-flicking";
+import Test from "./components/Test.vue";
+import Test2 from "./components/Test2.vue";
+
+export default {
+  components: {
+    Flicking,
+    Test,
+    Test2
+  },
+  data() {
+    return {
+      panels: [0, 1, 2, 3, 4, 5, 6],
+      list0: [0, 1, 2],
+      arrow: [new Arrow()],
+      fade: [new Fade()],
+      panelsPerView: 5
+    };
+  },
+  methods: {
+    prepend() {
+      this.panels.splice(0, 0, this.panels[0] - 2, this.panels[0] - 1);
+    },
+    append() {
+      const lastEl = this.panels[this.panels.length - 1];
+      this.panels.push(lastEl + 1, lastEl + 2);
+    },
+    prev() {
+      this.$refs.flick.prev();
+    },
+    next() {
+      this.$refs.flick.next();
+    },
+    vPrepend() {
+      this.$refs.vFlick.virtual.prepend(100);
+    },
+    vAppend() {
+      this.$refs.vFlick.virtual.append(100);
+    },
+    changeProp() {
+      this.panelsPerView -= 1;
+    }
+  }
+};
+</script>
+
+<style>
+@import './demo-common.css';
+</style>
+
+<style scoped>
+/* App.vue 전용 스타일 (필요시 추가) */
+</style>

package/dev/archive/BasicDemo.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="demo-container">
+    <h2>Vue3 Composition API Flicking Demo</h2>
+    
+    <!-- 기본 Flicking -->
+    <div class="section">
+      <h3>기본 Flicking</h3>
+      <Flicking ref="flickingRef" :options="flickingOptions">
+        <div 
+          v-for="item in panels" 
+          :key="item.id" 
+          class="panel"
+          :style="{ backgroundColor: item.color }"
+        >
+          {{ item.text }}
+        </div>
+      </Flicking>
+    </div>
+
+    <!-- 컨트롤 버튼들 -->
+    <div class="controls">
+      <button @click="addPanel" class="btn">패널 추가</button>
+      <button @click="removePanel" class="btn">패널 제거</button>
+      <button @click="prev" class="btn">이전</button>
+      <button @click="next" class="btn">다음</button>
+      <button @click="moveTo(2)" class="btn">3번 패널로 이동</button>
+    </div>
+
+    <!-- 현재 상태 표시 -->
+    <div class="status">
+      <p>총 패널 수: {{ panelCount }}</p>
+      <p>현재 인덱스: {{ currentIndex }}</p>
+    </div>
+
+    <!-- 동적 옵션 변경 -->
+    <div class="section">
+      <h3>옵션 변경</h3>
+      <label>
+        <input 
+          type="checkbox" 
+          v-model="isCircular" 
+          @change="updateOptions"
+        />
+        circular
+      </label>
+      <label>
+        <input 
+          type="checkbox" 
+          v-model="isBound" 
+          @change="updateOptions"
+        />
+        bound
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Flicking from "@dev/vue3-flicking";
+import { computed, onMounted, reactive, ref, watch } from "vue";
+
+// Flicking 인스턴스 참조
+const flickingRef = ref(null);
+
+// 반응형 데이터
+const panels = reactive([
+  { id: 1, text: "패널 1", color: "#ff6b6b" },
+  { id: 2, text: "패널 2", color: "#4ecdc4" },
+  { id: 3, text: "패널 3", color: "#45b7d1" },
+  { id: 4, text: "패널 4", color: "#96ceb4" },
+  { id: 5, text: "패널 5", color: "#feca57" }
+]);
+
+// Flicking 옵션
+const flickingOptions = reactive({
+  circular: false,
+  bound: false,
+  duration: 500,
+  defaultIndex: 0
+});
+
+// 상태 변수들
+const isCircular = ref(false);
+const isBound = ref(false);
+const currentIndex = ref(0);
+
+// 계산된 속성
+const panelCount = computed(() => panels.length);
+
+// 메서드들
+const addPanel = () => {
+  const newId = Math.max(...panels.map(p => p.id)) + 1;
+  const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#feca57", "#ff9ff3", "#54a0ff"];
+  const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+  panels.push({
+    id: newId,
+    text: `패널 ${newId}`,
+    color: randomColor
+  });
+};
+
+const removePanel = () => {
+  if (panels.length > 1) {
+    panels.pop();
+  }
+};
+
+const prev = () => {
+  if (flickingRef.value) {
+    flickingRef.value.prev();
+  }
+};
+
+const next = () => {
+  if (flickingRef.value) {
+    flickingRef.value.next();
+  }
+};
+
+const moveTo = index => {
+  if (flickingRef.value) {
+    flickingRef.value.moveTo(index);
+  }
+};
+
+const updateOptions = () => {
+  flickingOptions.circular = isCircular.value;
+  flickingOptions.bound = isBound.value;
+};
+
+// 이벤트 리스너
+const onChanged = e => {
+  currentIndex.value = flickingRef.value.index;
+};
+
+// 라이프사이클 훅
+onMounted(() => {
+  if (flickingRef.value) {
+    // 이벤트 리스너 등록
+    flickingRef.value.on("changed", onChanged);
+  }
+});
+
+// 감시자
+watch(
+  panels,
+  newPanels => {
+    console.log("패널이 변경되었습니다:", newPanels.length);
+  },
+  { deep: true }
+);
+</script>
+
+<style>
+@import './demo-common.css';
+</style>
+
+<style scoped>
+/* BasicDemo 전용 스타일 */
+.demo-container {
+  max-width: 800px;
+}
+
+.panel {
+  width: 200px;
+  height: 150px;
+  margin-right: 10px;
+  font-size: 18px;
+}
+</style>

package/dev/archive/MainApp.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="main-app">
+    <header class="header">
+      <h1>Vue3 Flicking Demo</h1>
+      <nav class="navigation">
+        <router-link to="/" class="nav-link">Home</router-link>
+        <router-link to="/basic" class="nav-link">BasicDemo</router-link>
+        <router-link to="/reactive" class="nav-link">ReactiveDemo</router-link>
+      </nav>
+    </header>
+    
+    <main class="content">
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<script setup>
+// Composition API setup
+</script>
+
+<style scoped>
+.main-app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #eee;
+}
+
+.header h1 {
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.navigation {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.nav-link {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+  font-weight: bold;
+}
+
+.nav-link:hover {
+  background-color: #0056b3;
+}
+
+.nav-link.router-link-active {
+  background-color: #28a745;
+}
+
+.content {
+  min-height: 500px;
+}
+</style> 

package/dev/archive/ReactiveDemo.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="demo-container">
+    <h2>Reactive API - Pagination Demo</h2>
+    
+    <div class="section">
+      <h3>Pagination with Reactive API</h3>
+      <Flicking ref="flickingRef" :options="flickingOptions">
+        <div 
+          v-for="item in panels" 
+          :key="item.id" 
+          class="panel"
+          :style="{ backgroundColor: item.color }"
+        >
+          {{ item.text }}
+        </div>
+      </Flicking>
+    </div>
+    
+    <div class="progress-container">
+      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
+      <div class="progress-text">Progress: {{ progress.toFixed(1) }}%</div>
+    </div>
+
+    <div class="controls">
+      <button @click="handlePrev" :disabled="isReachStart" class="btn">
+        이전
+      </button>
+      <button @click="handleNext" :disabled="isReachEnd" class="btn">
+        다음
+      </button>
+    </div>
+
+    <div class="pagination">
+      <button 
+        v-for="page in totalPanelCount" 
+        :key="page"
+        :class="{ active: currentPanelIndex + 1 === page }"
+        @click="moveTo(page - 1)"
+        class="pagination-btn"
+      >
+        {{ page }}
+      </button>
+    </div>
+
+    <div class="status">
+      <p>총 패널 수: {{ totalPanelCount }}</p>
+      <p>현재 인덱스: {{ currentPanelIndex }}</p>
+      <p>진행률: {{ progress.toFixed(1) }}%</p>
+      <p>첫 번째 패널: {{ isReachStart ? '도달' : '미도달' }}</p>
+      <p>마지막 패널: {{ isReachEnd ? '도달' : '미도달' }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Flicking, { useFlickingReactiveAPI } from "@dev/vue3-flicking";
+import { onMounted, reactive, ref } from "vue";
+
+// Flicking 인스턴스 참조
+const flickingRef = ref(null);
+
+// 반응형 데이터
+const panels = reactive([
+  { id: 1, text: "패널 1", color: "#ff6b6b" },
+  { id: 2, text: "패널 2", color: "#4ecdc4" },
+  { id: 3, text: "패널 3", color: "#45b7d1" },
+  { id: 4, text: "패널 4", color: "#96ceb4" },
+  { id: 5, text: "패널 5", color: "#feca57" }
+]);
+
+// Flicking 옵션
+const flickingOptions = reactive({
+  circular: false,
+  bound: false,
+  duration: 500,
+  defaultIndex: 0
+});
+
+// Reactive API 훅 사용
+const { currentPanelIndex, totalPanelCount, isReachStart, isReachEnd, progress, moveTo } =
+  useFlickingReactiveAPI(flickingRef);
+
+// 메서드들
+const handlePrev = () => {
+  if (!isReachStart.value) {
+    moveTo(currentPanelIndex.value - 1);
+  }
+};
+
+const handleNext = () => {
+  if (!isReachEnd.value) {
+    moveTo(currentPanelIndex.value + 1);
+  }
+};
+
+// 라이프사이클 훅
+onMounted(() => {
+  if (flickingRef.value) {
+    console.log("Flicking 인스턴스가 마운트되었습니다");
+  }
+});
+</script>
+
+<style>
+@import './demo-common.css';
+</style>
+
+<style scoped>
+/* ReactiveDemo 전용 스타일 */
+.demo-container {
+  max-width: 800px;
+}
+
+.panel {
+  width: 200px;
+  height: 150px;
+  margin-right: 10px;
+  font-size: 18px;
+}
+</style>

package/dev/archive/components/Test.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="panel">TEST Component</div>
+</template>

package/dev/archive/components/Test2.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="panel">TEST-2</div>
+</template>