contents-popup-redtombo 1.0.1 → 1.0.2

package/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/components/DeleteSong.vue

@@ -0,0 +1,3 @@
+<template>
+  DeleteSong
+</template>

package/components/EditSong.vue

@@ -1,3 +1,3 @@
 <template>
-  <p>EditSong</p>
+  EditSong
 </template>

package/components/componentPopup.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { toRefs, watch } from "vue";
+import { usePopup } from "../composables/usePopup";
+import type { Component } from "vue";
+
+const { state, openPopup, changePopup, initPopup } = usePopup();
+const { popupVisible } = toRefs(state);
+
+// プロパティ定義と取得
+const props = defineProps<{
+  component: string;
+  componentList: Record<string, Component>;
+  click: (variable?: any) => void;
+}>();
+
+// 必要な props をリアクティブに扱うため分割代入
+const { component, componentList } = toRefs(props);
+
+// 初期化処理
+initPopup(componentList.value);
+
+// `component` が変更された場合にポップアップを開く
+watch(
+  component, // 監視対象としてリアクティブな `component` を指定
+  (newComponent: string) => {
+    changePopup(newComponent); // ポップアップを変更する
+  }
+);
+
+function handleClick() {
+  // ボタンがクリックされたら親の関数を呼び出す
+  props.click();
+  openPopup(props.component)
+}
+</script>
+
+<template>
+  <div>
+    <button @click="handleClick();" class="btn btn-primary">更新</button>
+    <componentPopup2 v-if="popupVisible" />
+  </div>
+</template>

package/components/{popup.vue → componentPopup2.vue}

@@ -2,13 +2,11 @@
 import { toRefs } from "vue";
 import { usePopup } from "../composables/usePopup";
 
-import PopupContents from "../components/PopupContents.vue";
-
+import PopupContents from "./componentPopup3.vue";
 const { state } = usePopup();
 const { componentErrorMessage } = toRefs(state);
 </script>
 
-
 <template>
   <Teleport to="body">
     <div
@@ -30,7 +28,7 @@ const { componentErrorMessage } = toRefs(state);
               エラーが発生しました<br/>
               {{ componentErrorMessage }}
             </p>
-            <PopupContents v-else/>
+            <componentPopup3 v-else/>
           </div>
         </div>
       </div>

package/components/{PopupContents.vue → componentPopup3.vue}

@@ -1,18 +1,10 @@
 <script setup lang="ts">
 import { toRefs } from "vue";
 import { usePopup } from "../composables/usePopup";
-import EditSong from "~/components/EditSong.vue";
 
 // EditSongを登録
-const { state, closePopup, initPopup } = usePopup();
+const { state, closePopup } = usePopup();
 const { isLoading,currentComponent } = toRefs(state);
-
-const component: string = 'EditSong';
-const componentList: Record<string, Component> = {
-  "EditSong": EditSong
-};
-
-initPopup(componentList);
 </script>
 
 <template>
@@ -26,8 +18,6 @@ initPopup(componentList);
   </p>
   <div v-show="!isLoading">
     <div>
-      <!-- EditSongの表示 -->
-      <!-- <EditSong v-if="currentComponent === 'EditSong'"/> -->
       <component :is="currentComponent" />
     </div>
   </div>

package/composables/useComponent.ts

@@ -0,0 +1,23 @@
+interface State {
+  component: string; //コンポーネント
+}
+
+// グローバルな状態管理
+const state = reactive<State>({
+  component: "EditSong",
+});
+
+export function useComponent() {
+  function changeComponent(): void {
+    if (state.component === "EditSong") {
+      state.component = "DeleteSong";
+    } else {
+      state.component = "EditSong";
+    }
+  }
+
+  return {
+    changeComponent,
+    state,
+  };
+}

package/composables/usePopup.ts

@@ -27,10 +27,17 @@ export function usePopup() {
     );
   }
 
-  // ポップアップを開いて、指定されたコンポーネントをセットする関数
+  // ポップアップを開く関数
   function openPopup(component: string): void {
     state.popupVisible = true;
 
+    changePopup(component);
+
+    state.isLoading = false; // ローディングを終了
+  }
+
+  // 指定されたコンポーネントをセットする関数
+  function changePopup(component: string): void {
     if (component in state.componentList) {
       state.currentComponent = markRaw(state.componentList[component]);
       state.componentErrorMessage = ""; // エラーメッセージをリセット
@@ -39,15 +46,14 @@ export function usePopup() {
       console.error(errorMessage);
       state.componentErrorMessage = errorMessage;
     }
-
-    state.isLoading = false; // ローディングを終了
   }
 
   // ポップアップを閉じる関数
   function closePopup(): void {
-    state.popupVisible = false;
     state.currentComponent = null; // 現在のコンポーネントをリセット
     state.componentErrorMessage = ""; // エラーメッセージをリセット
+
+    state.popupVisible = false;
   }
 
   // 必要なものを返却
@@ -56,5 +62,6 @@ export function usePopup() {
     initPopup,
     openPopup,
     closePopup,
+    changePopup,
   };
 }

package/package.json

@@ -1,20 +1,14 @@
 {
   "name": "contents-popup-redtombo",
-  "version": "1.0.1",
-  "description": "ポップアップのコンテンツを切り替える",
-  "main": "./module.ts",
-  "exports": {
-    ".": "./module.ts"
-  },
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "install": "nuxt prepare"
-  },
-  "dependencies": {
+ "version": "1.0.2",
+ "description": "中のコンポーネントを変更できるポップアップ",
+ "main": "./module.ts",
+ "exports": {
+   ".": "./module.ts"
+ },
+  "peerDependencies": {
     "bootstrap": "^5.0.0",
-    "nuxt": "^3.0.0",
-    "nuxt-lodash": "^2.0.0"
+    "nuxt": "^3.0.0"
   },
   "files": [
     "module.ts",

package/module.ts

@@ -1,14 +0,0 @@
-import { defineNuxtModule } from '@nuxt/kit'
-import { resolve } from 'path'
-
-export default defineNuxtModule({
-  setup(_, nuxt) {
-    // コンポーネントディレクトリを追加
-    nuxt.hook('components:dirs', (dirs) => {
-      dirs.push({
-        path: resolve(__dirname, 'components'), // モジュール内のコンポーネントを登録
-        pathPrefix: false,
-      })
-    })
-  },
-})