nuxt-hs-ui 2.0.14 → 2.0.16

package/README.md

@@ -1,11 +1,33 @@
-<!--
-Get your module up and running quickly.
+# nuxt-hs-ui
 
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
+.......
+ 
 
-# My Module
+## Installation
 
+```sh
+npm i nuxt-hs-ui
+```
+
+### Nuxt
+
+```ts
+import twConfig from "./tailwind.config";
+export default defineNuxtConfig({
+  modules: [
+    //
+    [
+      "nuxt-hs-ui",
+      {
+        tailwind: twConfig,
+        prefix: {
+          nuxtUi: "",
+          form: "",
+          interactive: "",
+          layout: "",
+        },
+      },
+    ],
+  ],
+});
+```

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "2.0.14",
+  "version": "2.0.16",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/utils/modal.d.ts

@@ -0,0 +1,87 @@
+/** --------------------------------------------
+使用方法
+
+import { ModalControl, InitModalControl, InitModals } from '@/lib-front/modal-control';
+
+interface Modal {
+  test1: ModalControl<{
+    isLock: boolean;
+    id: number;
+  }>;
+  //test2子コンポーネント側で閉じる部分の制御する
+  test2: ModalControl;
+}
+
+const modal = reactive<Modal>({
+  test1: InitModalControl<Modal['test1']['state']>({
+    state: { isLock: false, id: 1 },
+    //asyncもOK
+    showBefore: (state) => {
+      //ここに制御を入れてtrueを返せば中断できる
+      return state.isLock;
+    },
+    showAfter: (state) => {
+    },
+    //asyncもOK
+    closeBefore: (state) => {
+      //ここに制御を入れてtrueを返せば中断できる
+      return state.isLock;
+    },
+    closeAfter: (state) => {
+    },
+  }),
+  test2: InitModalControl(),
+});
+
+onMounted(() => {
+  InitModals(modal, nextTick);
+});
+
+-------------------------------------------- */
+type OptionalFunction<T> = ((state: T) => undefined | boolean) | ((state: T) => Promise<undefined | boolean>) | null;
+export interface ModalControl<T = any> {
+    /**
+     * showBefre,showAfter がasync付きならasync付き関数になります。
+     */
+    show: (() => undefined) | (() => Promise<undefined>);
+    /**
+     * showBefore モーダルが開く前に実行される関数
+     * - true をreturnするとモーダルを開く処理は中止される
+     */
+    showBefore: OptionalFunction<T>;
+    showAfter: OptionalFunction<T>;
+    /**
+     * closeBefore,closeAfter がasync付きならasync付き関数になります。
+     */
+    close: (() => undefined) | (() => Promise<undefined>);
+    /**
+     * closeBefore モーダルが閉じる前に実行される関数
+     * - true をreturnするとモーダルを閉じる処理は中止される
+     */
+    closeBefore: OptionalFunction<T>;
+    closeAfter: OptionalFunction<T>;
+    isShow: boolean;
+    state: T;
+}
+export declare const InitModalControl: <T = any>(arg?: {
+    state?: T;
+    /**
+     * showBefore モーダルが開く前に実行される関数
+     * - true をreturnするとモーダルを開く処理は中止される
+     */
+    showBefore?: OptionalFunction<T>;
+    showAfter?: OptionalFunction<T>;
+    /**
+     * closeBefore モーダルが閉じる前に実行される関数
+     * - true をreturnするとモーダルを閉じる処理は中止される
+     */
+    closeBefore?: OptionalFunction<T>;
+    closeAfter?: OptionalFunction<T>;
+}) => ModalControl<T>;
+/**
+ * modalオブジェクトの初期化
+ * @param modal ModalControlが含まれるReactiveオブジェクト
+ * @param nextTick Vue の nextTick関数
+ */
+export declare const InitModals: (modal: any, nextTick: any) => void;
+export {};

package/dist/runtime/utils/modal.js

@@ -0,0 +1,72 @@
+export const InitModalControl = (arg) => {
+  const noneInitMessage = "\u304C\u521D\u671F\u5316\u3055\u308C\u3066\u3044\u307E\u305B\u3093";
+  return {
+    show: () => console.log("[show]" + noneInitMessage),
+    showBefore: null,
+    showAfter: null,
+    close: () => console.log("[close]" + noneInitMessage),
+    closeBefore: null,
+    closeAfter: null,
+    isShow: false,
+    state: null,
+    ...arg
+  };
+};
+const isAsync = (func) => {
+  try {
+    if (func === null) return false;
+    if (func === void 0) return false;
+    if (!("constructor" in func)) return false;
+    return func.constructor.name === "AsyncFunction";
+  } catch {
+    return false;
+  }
+};
+export const InitModals = (modal, nextTick) => {
+  Object.keys(modal).forEach((key) => {
+    const m = modal[key];
+    m.show = async () => {
+      if (m.showBefore) {
+        if (isAsync(m.showBefore)) {
+          if (await m.showBefore(m.state) === true) {
+            console.info("\u30E2\u30FC\u30C0\u30EB\u306EShow\u52D5\u4F5C\u306F\u30AD\u30E3\u30F3\u30BB\u30EB\u3055\u308C\u307E\u3057\u305F");
+            return;
+          }
+        } else if (m.showBefore(m.state) === true) {
+          console.info("\u30E2\u30FC\u30C0\u30EB\u306EShow\u52D5\u4F5C\u306F\u30AD\u30E3\u30F3\u30BB\u30EB\u3055\u308C\u307E\u3057\u305F");
+          return;
+        }
+      }
+      m.isShow = true;
+      if (!m.showAfter) return;
+      await nextTick();
+      if (isAsync(m.showAfter)) {
+        await m.showAfter(m.state);
+      } else {
+        m.showAfter(m.state);
+      }
+    };
+    m.close = async () => {
+      if (m.closeBefore) {
+        if (isAsync(m.closeBefore)) {
+          if (await m.closeBefore(m.state) === true) {
+            console.info("\u30E2\u30FC\u30C0\u30EB\u306EClose\u52D5\u4F5C\u306F\u30AD\u30E3\u30F3\u30BB\u30EB\u3055\u308C\u307E\u3057\u305F");
+            return;
+          }
+        } else if (m.closeBefore(m.state) === true) {
+          console.info("\u30E2\u30FC\u30C0\u30EB\u306EClose\u52D5\u4F5C\u306F\u30AD\u30E3\u30F3\u30BB\u30EB\u3055\u308C\u307E\u3057\u305F");
+          return;
+        }
+      }
+      m.isShow = false;
+      await nextTick();
+      if (!m.closeAfter) return;
+      if (isAsync(m.closeAfter)) {
+        await m.closeAfter(m.state);
+      } else {
+        m.closeAfter(m.state);
+      }
+      return void 0;
+    };
+  });
+};

package/dist/runtime/utils/tabulator.d.ts

@@ -1,3 +1,4 @@
+export type { TabulatorFull as Tabulator } from "tabulator-tables";
 import { type Theme } from "../utils/theme.js";
 /**
  * セル内部にボタンを配置した時用

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-hs-ui",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "My new Nuxt module",
   "repository": "https://github.com/hare-systems-ryo/nuxt-hs-ui",
   "license": "MIT",
@@ -35,6 +35,11 @@
       "import": "./dist/runtime/utils/float.js",
       "require": "./dist/runtime/utils/float.js"
     },
+    "./utils/modal": {
+      "types": "./dist/runtime/utils/modal.d.ts",
+      "import": "./dist/runtime/utils/modal.js",
+      "require": "./dist/runtime/utils/modal.js"
+    },
     "./utils/multi-lang-object": {
       "types": "./dist/runtime/utils/multi-lang-object.d.ts",
       "import": "./dist/runtime/utils/multi-lang-object.js",