contents-popup-redtombo 1.4.2 → 1.4.4

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "contents-popup-redtombo",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "ポップアップの中のComponentsを動的に切り替えることができるポップアップ",
   "type": "module",
+  "main": "./dist/module.cjs",
+  "module": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/module.d.ts",
       "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs",
-      "types": "./dist/module.d.ts"
+      "require": "./dist/module.cjs"
     }
   },
   "files": [
     "dist",
+    "runtime",
     "README.md",
     "CHANGELOG.md"
   ],
@@ -19,7 +23,7 @@
     "dev": "nuxt dev",
     "preview": "nuxt preview",
     "build": "unbuild",
-    "prepublishOnly": "npm run build"
+    "prepack": "npm run build"
   },
   "peerDependencies": {
     "bootstrap": "^5.0.0",
@@ -27,6 +31,7 @@
   },
   "devDependencies": {
     "@nuxt/cli": "^3.29.3",
+    "@types/node": "^24.9.2",
     "nuxt": "^4.2.0",
     "typescript": "^5.9.3",
     "unbuild": "^2.0.0"

package/runtime/components/componentPopup.vue

@@ -0,0 +1,46 @@
+<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<{
+  buttonName: string;
+  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() {
+  // 親コンポーネントの関数が存在するなら、
+  // 親コンポーネントの関数を呼び出す。
+  if(props.click){
+    props.click();
+  }
+  openPopup(props.component)
+}
+</script>
+
+<template>
+  <div>
+    <button @click="handleClick();" class="btn btn-primary">{{ props.buttonName }}</button>
+    <componentPopup2 v-if="popupVisible" />
+  </div>
+</template>

package/runtime/components/componentPopup2.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+import { usePopup } from "../composables/usePopup";
+
+import PopupContents from "./componentPopup3.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>
+            <componentPopup3 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/runtime/components/componentPopup3.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+import { usePopup } from "../composables/usePopup";
+
+// EditSongを登録
+const { state, closePopup } = usePopup();
+const { isLoading,currentComponent } = toRefs(state);
+</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>
+      <component :is="currentComponent" />
+    </div>
+  </div>
+</template>

package/runtime/composables/usePopup.ts

@@ -0,0 +1,67 @@
+import { reactive, markRaw } from "vue";
+import type { Component } from "vue";
+
+interface State {
+  componentErrorMessage: string; // コンポーネントエラーメッセージ
+  popupVisible: boolean; // ポップアップが表示中かどうか
+  isLoading: boolean; // ローディング中かどうか
+  currentComponent: Component | null; // 現在のコンポーネント
+  componentList: Record<string, Component>; // 使用可能なコンポーネントのリスト
+}
+
+// グローバルな状態管理
+const state = reactive<State>({
+  componentErrorMessage: "",
+  popupVisible: false,
+  isLoading: true,
+  currentComponent: null,
+  componentList: {},
+});
+
+// `usePopup` composable 関数
+export function usePopup() {
+  // ポップアップの初期化
+  function initPopup(componentList: Record<string, Component>): void {
+    state.componentList = Object.fromEntries(
+      Object.entries(componentList).map(([key, component]) => [key, markRaw(component)])
+    );
+  }
+
+  // ポップアップを開く関数
+  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 = ""; // エラーメッセージをリセット
+    } else {
+      const errorMessage = `選択されたコンポーネントが無効です: ${component}`;
+      console.error(errorMessage);
+      state.componentErrorMessage = errorMessage;
+    }
+  }
+
+  // ポップアップを閉じる関数
+  function closePopup(): void {
+    state.currentComponent = null; // 現在のコンポーネントをリセット
+    state.componentErrorMessage = ""; // エラーメッセージをリセット
+
+    state.popupVisible = false;
+  }
+
+  // 必要なものを返却
+  return {
+    state,
+    initPopup,
+    openPopup,
+    closePopup,
+    changePopup,
+  };
+}