contents-popup-redtombo 1.0.0 → 1.0.1

package/composables/usePopup.ts

@@ -0,0 +1,60 @@
+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;
+
+    if (component in state.componentList) {
+      state.currentComponent = markRaw(state.componentList[component]);
+      state.componentErrorMessage = ""; // エラーメッセージをリセット
+    } else {
+      const errorMessage = `選択されたコンポーネントが無効です: ${component}`;
+      console.error(errorMessage);
+      state.componentErrorMessage = errorMessage;
+    }
+
+    state.isLoading = false; // ローディングを終了
+  }
+
+  // ポップアップを閉じる関数
+  function closePopup(): void {
+    state.popupVisible = false;
+    state.currentComponent = null; // 現在のコンポーネントをリセット
+    state.componentErrorMessage = ""; // エラーメッセージをリセット
+  }
+
+  // 必要なものを返却
+  return {
+    state,
+    initPopup,
+    openPopup,
+    closePopup,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contents-popup-redtombo",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ポップアップのコンテンツを切り替える",
   "main": "./module.ts",
   "exports": {
@@ -18,6 +18,7 @@
   },
   "files": [
     "module.ts",
-    "components"
+    "components",
+    "composables"
   ]
 }