contents-popup-redtombo 1.1.3 → 1.4.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Change Log
+すべての重要な変更はこのファイルに記録されます。
+
+## [1.3.0] - 2025-10-10
+### 修正 (Fixed)
+- `unbuild` を導入し、**dist配布**に変更。
+- `nuxt` の対応範囲を `^3.0.0 || ^4.0.0` に拡張。
+- `module.ts` を ESM 形式に修正（`createResolver(import.meta.url)` を使用）。
+
+---
+
+## [1.2.0] - 2024-01-22
+### 変更 (Changed)
+- componentPopupコンポーネントに渡すクリックイベントの指定を省略可能にしました。
+- ボタンに名前を付けられる機能を追加しました。
+
+---
+
+## [1.1.0] - 2024-01-21
+### 変更 (Changed)
+- パッケージの説明を追加。
+
+---
+
+## [1.0.0] - 2024-01-21
+### 初回リリース (Initial Release)
+- プロジェクト初回リリース。
+- ポップアップを提供。

package/dist/module.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+const kit = require('nuxt/kit');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+const module$1 = kit.defineNuxtModule({
+  meta: {
+    name: "contents-popup-redtombo",
+    compatibility: { nuxt: "^3.0.0 || ^4.0.0" }
+  },
+  setup(_options, _nuxt) {
+    const { resolve } = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('module.cjs', document.baseURI).href)));
+    kit.addComponentsDir({
+      path: resolve("./components"),
+      pathPrefix: false
+    });
+    kit.addImportsDir(resolve("./composables"));
+  }
+});
+
+module.exports = module$1;

package/dist/module.d.cts

@@ -0,0 +1,5 @@
+import * as nuxt_schema from 'nuxt/schema';
+
+declare const _default: nuxt_schema.NuxtModule<nuxt_schema.ModuleOptions, nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.d.mts

@@ -0,0 +1,5 @@
+import * as nuxt_schema from 'nuxt/schema';
+
+declare const _default: nuxt_schema.NuxtModule<nuxt_schema.ModuleOptions, nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,5 @@
+import * as nuxt_schema from 'nuxt/schema';
+
+declare const _default: nuxt_schema.NuxtModule<nuxt_schema.ModuleOptions, nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.mjs

@@ -0,0 +1,18 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from 'nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "contents-popup-redtombo",
+    compatibility: { nuxt: "^3.0.0 || ^4.0.0" }
+  },
+  setup(_options, _nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolve("./components"),
+      pathPrefix: false
+    });
+    addImportsDir(resolve("./composables"));
+  }
+});
+
+export { module as default };

package/package.json

@@ -1,18 +1,31 @@
 {
   "name": "contents-popup-redtombo",
- "version": "1.1.3",
- "description": "ポップアップの中のComponentsを動的に切り替えることができるポップアップ",
- "main": "./module.ts",
- "exports": {
-   ".": "./module.ts"
- },
+  "version": "1.4.0",
+  "description": "ポップアップの中のComponentsを動的に切り替えることができるポップアップ",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs",
+      "types": "./dist/module.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "prepublishOnly": "pnpm build"
+  },
   "peerDependencies": {
     "bootstrap": "^5.0.0",
-    "nuxt": "^3.0.0"
+    "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "files": [
-    "module.ts",
-    "components",
-    "composables"
-  ]
+  "devDependencies": {
+    "nuxt": "4",
+    "typescript": "^5.9.3",
+    "unbuild": "^2.0.0"
+  }
 }

package/components/componentPopup.vue

@@ -1,46 +0,0 @@
-<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/components/componentPopup2.vue

@@ -1,69 +0,0 @@
-<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/components/componentPopup3.vue

@@ -1,24 +0,0 @@
-<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/composables/usePopup.ts

@@ -1,67 +0,0 @@
-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,
-  };
-}

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,
-      })
-    })
-  },
-})