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

package/dev/archive/demo-common.css

@@ -0,0 +1,208 @@
+/* 공통 데모 스타일 */
+
+/* 기본 레이아웃 */
+.demo-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 타이포그래피 */
+h1 {
+  color: #333;
+  margin: 40px 0 20px;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+h1:first-child {
+  margin-top: 0;
+}
+
+h2 {
+  color: #333;
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 28px;
+}
+
+h3 {
+  color: #666;
+  margin-bottom: 15px;
+  font-size: 20px;
+}
+
+/* 섹션 */
+.section {
+  margin-bottom: 30px;
+}
+
+/* 패널 스타일 */
+.panel {
+  width: 200px;
+  height: 200px;
+  margin-right: 20px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.panel:nth-child(2) {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.panel:nth-child(3) {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.panel:nth-child(4) {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+.panel:nth-child(5) {
+  background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%);
+}
+
+.panel:nth-child(6) {
+  background: linear-gradient(135deg, #fa8bff 0%, #2bd2ff 100%);
+}
+
+.panel:nth-child(7) {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
+}
+
+.panel:nth-child(n + 8) {
+  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+}
+
+/* 컨트롤 버튼 */
+.controls {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin: 20px 0;
+  flex-wrap: wrap;
+}
+
+.button,
+.btn,
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.button:hover,
+.btn:hover:not(:disabled),
+button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+.button:active,
+.btn:active:not(:disabled),
+button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.btn:disabled,
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+/* 상태 표시 */
+.status {
+  background-color: #f8f9fa;
+  padding: 15px;
+  border-radius: 5px;
+  margin: 20px 0;
+  text-align: center;
+}
+
+.status p {
+  margin: 5px 0;
+  color: #666;
+}
+
+/* 폼 요소 */
+label {
+  display: inline-block;
+  margin: 10px 20px 10px 0;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  margin-right: 5px;
+}
+
+/* 페이지네이션 */
+.pagination {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin: 20px 0;
+  flex-wrap: wrap;
+}
+
+.pagination-btn {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.pagination-btn:hover {
+  background-color: #0056b3;
+}
+
+.pagination-btn:active {
+  transform: translateY(1px);
+}
+
+.pagination-btn.active {
+  background-color: #28a745;
+}
+
+/* 프로그레스 바 */
+.progress-container {
+  position: relative;
+  width: 100%;
+  height: 20px;
+  background: #f0f0f0;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 20px 0;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #007bff, #28a745);
+  transition: width 0.3s ease;
+  border-radius: 10px;
+}
+
+.progress-text {
+  text-align: center;
+  margin-top: 10px;
+  font-size: 14px;
+  color: #666;
+  font-weight: bold;
+}

package/dev/archive/main.ts

@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+import MainApp from "./MainApp.vue";
+import router from "./router";
+
+// CSS imports
+import "@dev/flicking-css";
+import "@dev/plugins-css";
+
+// @ts-expect-error - injected by vite
+const buildMode = __DEV__ ? "source" : "build";
+console.log(`🔧 Vue3 Flicking Dev - ${buildMode} 모드`);
+
+const app = createApp(MainApp);
+app.use(router);
+app.mount("#app");

package/dev/archive/router.ts

@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory } from "vue-router";
+import App from "./App.vue";
+import BasicDemo from "./BasicDemo.vue";
+import ReactiveDemo from "./ReactiveDemo.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: App
+  },
+  {
+    path: "/basic",
+    name: "BasicDemo",
+    component: BasicDemo
+  },
+  {
+    path: "/reactive",
+    name: "ReactiveDemo",
+    component: ReactiveDemo
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+export default router;

package/dev/basic-sample/App.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :style="css.container">
+    <h1>Basic Sample</h1>
+    <Flicking :options="{ align: 'prev', circular: true }">
+      <div v-for="n in 5" :key="n" :style="css.panel">{{ n }}</div>
+    </Flicking>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Flicking from "@dev/vue3-flicking";
+
+const css = {
+  container: {
+    maxWidth: "800px",
+    margin: "0 auto",
+    padding: "20px"
+  },
+  panel: {
+    minWidth: "200px",
+    height: "200px",
+    margin: "0 5px",
+    background: "#e0e7ff",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "24px",
+    fontWeight: "bold"
+  }
+};
+</script>

package/dev/basic-sample/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Basic Sample - Vue3 Flicking</title>
+    <style>
+      body { margin: 0; padding: 20px; font-family: sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/dev/basic-sample/main.ts

@@ -0,0 +1,13 @@
+/**
+ * Basic Sample - 기본 동작 확인용
+ *
+ * http://localhost:3002/basic-sample/
+ *
+ * 이 파일은 수정하지 마세요.
+ * 샘플 코드는 App.vue에 작성합니다.
+ */
+import { createApp } from "vue";
+import "@dev/flicking-css";
+import App from "./App.vue";
+
+createApp(App).mount("#app");

package/dev/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vue3 Flicking - Dev</title>
+    <style>
+      body { margin: 0; padding: 40px; font-family: sans-serif; }
+      a { display: block; margin: 8px 0; font-size: 18px; }
+    </style>
+  </head>
+  <body>
+    <h1>Vue3 Flicking Dev</h1>
+    <a href="/basic-sample/">Basic Sample</a>
+    <a href="/plugin-check/">Plugin Check (마이그레이션 검증용)</a>
+    <a href="/scratch/">Scratch (이슈 재현)</a>
+  </body>
+</html>

package/dev/plugin-check/App.vue

@@ -0,0 +1,245 @@
+<!--
+  플러그인 마이그레이션 검증용 (임시)
+  docs 데모 추가 후 제거 예정
+
+  참고: https://naver.github.io/egjs-flicking/ko/Plugins
+-->
+<template>
+  <div :style="{ maxWidth: '640px', margin: '0 auto', padding: '20px' }">
+    <h1>Plugin Check</h1>
+    <p :style="css.note">마이그레이션 검증용 — docs 데모 추가 후 제거 예정</p>
+
+    <!-- Arrow -->
+    <section :style="css.section">
+      <div :style="css.title">Arrow</div>
+      <Flicking :options="{ circular: true }" :plugins="arrowPlugins">
+        <div v-for="n in 5" :key="n" :style="css.panel">{{ n }}</div>
+        <template #viewport>
+          <span class="flicking-arrow-prev"></span>
+          <span class="flicking-arrow-next"></span>
+        </template>
+      </Flicking>
+    </section>
+
+    <!-- AutoPlay -->
+    <section :style="css.section">
+      <div :style="css.title">AutoPlay</div>
+      <Flicking :options="{ circular: true, preventDefaultOnDrag: true }" :plugins="autoPlayPlugins">
+        <div v-for="(src, i) in images.slice(0, 3)" :key="i" :style="css.pluginsPanel">
+          <img :style="css.panelImage" :src="src" />
+        </div>
+      </Flicking>
+    </section>
+
+    <!-- Pagination -->
+    <section :style="css.section">
+      <div :style="css.title">Pagination (bullet)</div>
+      <Flicking :options="{ circular: true }" :plugins="paginationPlugins">
+        <div v-for="n in 8" :key="n" :style="css.panel">{{ n }}</div>
+        <template #viewport>
+          <div class="flicking-pagination"></div>
+        </template>
+      </Flicking>
+    </section>
+
+    <!-- Fade -->
+    <section :style="css.section">
+      <div :style="css.title">Fade</div>
+      <Flicking :options="{ circular: true, preventDefaultOnDrag: true }" :plugins="fadePlugins">
+        <div v-for="(src, i) in images.slice(0, 3)" :key="i" :style="css.pluginsPanel">
+          <img :style="css.panelImage" :src="src" />
+        </div>
+      </Flicking>
+    </section>
+
+    <!-- Parallax -->
+    <section :style="css.section">
+      <div :style="css.title">Parallax</div>
+      <Flicking :options="{ circular: true, preventDefaultOnDrag: true, gap: 2 }" :plugins="parallaxPlugins">
+        <div v-for="(src, i) in images.slice(0, 3)" :key="i" :style="{ ...css.pluginsPanel, width: '100%' }">
+          <img :style="{ ...css.panelImage, width: '150%', maxWidth: 'none' }" :src="src" />
+        </div>
+      </Flicking>
+    </section>
+
+    <!-- Perspective -->
+    <section :style="css.section">
+      <div :style="css.title">Perspective</div>
+      <Flicking :options="{ circular: true }" :plugins="perspectivePlugins">
+        <div v-for="n in 5" :key="n" :style="css.panel">{{ n }}</div>
+      </Flicking>
+    </section>
+
+    <!-- Sync (camera) -->
+    <section :style="css.section">
+      <div :style="css.title">Sync (camera)</div>
+      <Flicking ref="syncCam0" :options="{ align: 'prev', bound: true, bounce: 30 }" :plugins="syncCameraPlugins">
+        <span v-for="item in fruits" :key="item" :style="css.syncItem">{{ item }}</span>
+      </Flicking>
+      <div style="margin-top: 4px;">
+        <Flicking ref="syncCam1" :options="{ align: 'prev', bound: true, bounce: 30 }">
+          <span v-for="item in foods" :key="item" :style="css.syncItem">{{ item }}</span>
+        </Flicking>
+      </div>
+      <div style="margin-top: 4px;">
+        <Flicking ref="syncCam2" :options="{ align: 'prev', bound: true, bounce: 30 }">
+          <span v-for="item in drinks" :key="item" :style="css.syncItem">{{ item }}</span>
+        </Flicking>
+      </div>
+    </section>
+
+    <!-- Sync (index + thumbnail) -->
+    <section :style="css.section">
+      <div :style="css.title">Sync (index + thumbnail)</div>
+      <Flicking ref="syncMain" :options="{ bounce: 30, preventDefaultOnDrag: true }" :plugins="syncIndexPlugins">
+        <div v-for="(src, i) in images" :key="i" :style="css.pluginsPanel">
+          <img :style="css.panelImage" :src="src" />
+        </div>
+      </Flicking>
+      <div style="margin-top: 8px;">
+        <Flicking ref="syncThumb" :options="{ moveType: 'freeScroll', bound: true, bounce: 30, preventDefaultOnDrag: true }">
+          <div v-for="(src, i) in images" :key="i" :style="css.thumbPanel">
+            <img :style="css.thumbImage" :src="src" />
+          </div>
+        </Flicking>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Arrow, AutoPlay, Fade, Pagination, Parallax, Perspective, Sync } from "@dev/plugins";
+import Flicking from "@dev/vue3-flicking";
+import { onMounted, ref } from "vue";
+
+const css = {
+  section: { marginBottom: "48px" },
+  title: {
+    fontSize: "18px",
+    fontWeight: "bold",
+    marginBottom: "12px",
+    borderBottom: "2px solid #333",
+    paddingBottom: "4px"
+  },
+  note: { fontSize: "12px", color: "#666", marginTop: "8px" },
+  panel: {
+    minWidth: "200px",
+    height: "160px",
+    margin: "0 5px",
+    background: "#e0e7ff",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "24px",
+    fontWeight: "bold",
+    overflow: "hidden"
+  },
+  pluginsPanel: { position: "relative" as const, width: "100%", height: "200px", overflow: "hidden" },
+  panelImage: { width: "100%", height: "100%", objectFit: "cover" as const },
+  thumbPanel: {
+    width: "100px",
+    height: "70px",
+    margin: "0 2px",
+    overflow: "hidden",
+    opacity: "0.5",
+    transition: "opacity 0.3s"
+  },
+  thumbImage: { width: "100%", height: "100%", objectFit: "cover" as const },
+  syncItem: {
+    display: "inline-block",
+    padding: "8px 16px",
+    margin: "0 4px",
+    background: "#f5f5f5",
+    borderRadius: "4px",
+    whiteSpace: "nowrap"
+  }
+};
+
+const images = [
+  "https://picsum.photos/seed/a/600/300",
+  "https://picsum.photos/seed/b/600/300",
+  "https://picsum.photos/seed/c/600/300",
+  "https://picsum.photos/seed/d/600/300",
+  "https://picsum.photos/seed/e/600/300",
+  "https://picsum.photos/seed/f/600/300"
+];
+
+const fruits = [
+  "🍎 Apple",
+  "🍉 Watermelon",
+  "🥝 Kiwi",
+  "🍊 Orange",
+  "🍇 Grape",
+  "🍓 Strawberry",
+  "🍑 Peach",
+  "🍋 Lemon",
+  "🫐 Blueberry",
+  "🍌 Banana"
+];
+const foods = [
+  "🍔 Hamburger",
+  "🍕 Pizza",
+  "🍞 Bread",
+  "🌮 Taco",
+  "🍜 Ramen",
+  "🍣 Sushi",
+  "🥗 Salad",
+  "🍝 Pasta",
+  "🥘 Stew",
+  "🍱 Bento"
+];
+const drinks = [
+  "🥛 Milk",
+  "☕ Coffee",
+  "🍵 Green tea",
+  "🧃 Juice",
+  "🥤 Soda",
+  "🍺 Beer",
+  "🧋 Bubble tea",
+  "🍷 Wine",
+  "🥥 Coconut",
+  "🍶 Sake"
+];
+
+// Simple plugins (no ref dependency)
+const arrowPlugins = [new Arrow()];
+const autoPlayPlugins = [new AutoPlay()];
+const paginationPlugins = [new Pagination({ type: "bullet" })];
+const fadePlugins = [new Fade()];
+const parallaxPlugins = [new Parallax("img")];
+const perspectivePlugins = [new Perspective({ rotate: 1, scale: 2, perspective: 600 })];
+
+// Sync plugins (need refs)
+const syncCam0 = ref<InstanceType<typeof Flicking> | null>(null);
+const syncCam1 = ref<InstanceType<typeof Flicking> | null>(null);
+const syncCam2 = ref<InstanceType<typeof Flicking> | null>(null);
+const syncCameraPlugins = ref<Sync[]>([]);
+
+const syncMain = ref<InstanceType<typeof Flicking> | null>(null);
+const syncThumb = ref<InstanceType<typeof Flicking> | null>(null);
+const syncIndexPlugins = ref<Sync[]>([]);
+
+onMounted(() => {
+  syncCameraPlugins.value = [
+    new Sync({
+      type: "camera",
+      synchronizedFlickingOptions: [
+        { flicking: syncCam0.value!, isClickable: false },
+        { flicking: syncCam1.value!, isClickable: false },
+        { flicking: syncCam2.value!, isClickable: false }
+      ]
+    })
+  ];
+
+  syncIndexPlugins.value = [
+    new Sync({
+      type: "index",
+      synchronizedFlickingOptions: [
+        { flicking: syncMain.value!, isSlidable: true },
+        { flicking: syncThumb.value!, isClickable: true, activeClass: "active" }
+      ]
+    })
+  ];
+});
+</script>

package/dev/plugin-check/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Plugin Check - Vue3 Flicking</title>
+    <style>
+      body { margin: 0; padding: 20px; font-family: sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/dev/plugin-check/main.ts

@@ -0,0 +1,13 @@
+/**
+ * Plugin Check - 플러그인 마이그레이션 검증용 (임시)
+ *
+ * http://localhost:3002/plugin-check/
+ *
+ * 이 파일은 수정하지 마세요.
+ */
+import { createApp } from "vue";
+import "@dev/flicking-css";
+import "@dev/plugins-css";
+import App from "./App.vue";
+
+createApp(App).mount("#app");

package/dev/scratch/App.vue

@@ -0,0 +1,32 @@
+<!--
+  이슈 재현 템플릿
+
+  이 파일을 덮어써서 이슈를 재현하세요.
+-->
+<template>
+  <div>
+    <h2>Scratch</h2>
+    <Flicking :options="{ align: 'prev', circular: true }">
+      <div v-for="n in 3" :key="n" :style="css.panel">{{ n }}</div>
+    </Flicking>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Flicking from "@dev/vue3-flicking";
+
+const css = {
+  panel: {
+    minWidth: "200px",
+    height: "200px",
+    margin: "0 5px",
+    background: "#f0f0f0",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "24px",
+    fontWeight: "bold"
+  }
+};
+</script>

package/dev/scratch/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Scratch - Vue3 Flicking</title>
+    <style>
+      body { margin: 0; padding: 20px; font-family: sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/dev/scratch/main.ts

@@ -0,0 +1,13 @@
+/**
+ * Scratch - 이슈 재현용 독립 페이지
+ *
+ * http://localhost:3002/scratch/
+ *
+ * 이 파일은 수정하지 마세요.
+ * 재현 코드는 App.vue에 작성합니다.
+ */
+import { createApp } from "vue";
+import "@dev/flicking-css";
+import App from "./App.vue";
+
+createApp(App).mount("#app");

package/dev/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare const __DEV__: boolean;
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}