contents-popup-redtombo 1.0.0

package/components/EditSong.vue

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

package/components/PopupContents.vue

@@ -0,0 +1,34 @@
+<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 { isLoading,currentComponent } = toRefs(state);
+
+const component: string = 'EditSong';
+const componentList: Record<string, Component> = {
+  "EditSong": EditSong
+};
+
+initPopup(componentList);
+</script>
+
+<template>
+  <div class="d-flex justify-content-end mb-4">
+    <button @click="closePopup()" class="btn btn-close" type="button"></button>
+  </div>
+
+  <!-- currentComponentでコンポーネントの表示を切り替える。 -->
+  <p v-show="isLoading" class="text-center text-primary">
+    データ取得中...
+  </p>
+  <div v-show="!isLoading">
+    <div>
+      <!-- EditSongの表示 -->
+      <!-- <EditSong v-if="currentComponent === 'EditSong'"/> -->
+      <component :is="currentComponent" />
+    </div>
+  </div>
+</template>

package/components/popup.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+import { usePopup } from "../composables/usePopup";
+
+import PopupContents from "../components/PopupContents.vue";
+
+const { state } = usePopup();
+const { componentErrorMessage } = toRefs(state);
+</script>
+
+
+<template>
+  <Teleport to="body">
+    <div
+      class="modal show fade d-flex align-items-center justify-content-center"
+      tabindex="-1"
+      style="display: block"
+    >
+      <div class="modal-dialog custom-size" @click.stop>
+        <div
+          class="modal-content p-3"
+          :class="{ 'modal-danger': componentErrorMessage }"
+        >
+          <div class="modal-body">
+            <!-- エラーメッセージ表示 -->
+            <p
+              v-if="componentErrorMessage"
+              class="text-danger"
+            >
+              エラーが発生しました<br/>
+              {{ componentErrorMessage }}
+            </p>
+            <PopupContents v-else/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal.show {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  border-radius: 8px;
+}
+
+.custom-size {
+  width: 1080px !important; /* 任意の幅を指定 */
+  max-width: none !important; /* 最大幅の制限を解除 */
+}
+
+.modal.show {
+  display: flex !important; /* Flexbox有効 */
+  align-items: center !important; /* 縦中央揃え */
+  justify-content: center !important; /* 横中央揃え */
+}
+
+.modal-danger {
+  background-color: var(
+    --bs-danger-bg-subtle,
+    #f8d7da
+  ); /* Bootstrapのalert-dangerの背景色 */
+  color: var(
+    --bs-danger-text,
+    #842029
+  ); /* Bootstrapのalert-dangerのテキスト色 */
+}
+</style>

package/module.ts

@@ -0,0 +1,14 @@
+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,
+      })
+    })
+  },
+})

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "contents-popup-redtombo",
+  "version": "1.0.0",
+  "description": "ポップアップのコンテンツを切り替える",
+  "main": "./module.ts",
+  "exports": {
+    ".": "./module.ts"
+  },
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "install": "nuxt prepare"
+  },
+  "dependencies": {
+    "bootstrap": "^5.0.0",
+    "nuxt": "^3.0.0",
+    "nuxt-lodash": "^2.0.0"
+  },
+  "files": [
+    "module.ts",
+    "components"
+  ]
+}