nuxt-hs-ui 1.0.1

package/dist/runtime/components/hs-ui/window-loader.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\window-loader.vue
+// ----------------------------------------------------------------------------
+HsUiWindowLoader
+HsUiWindowLoaderHsUiWindowLoader
+----------------------------------------------------------------------------- */
+
+/* ----------------------------------------------------------------------------
+const WindowLoader = useHsUiWindowLoader();
+WindowLoader.Show()
+WindowLoader.zindex=10000
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { ref, watch } from 'vue';
+import { useHsUiWindowLoader } from '../../composables/use-hs-ui-window-loader';
+// [ vueuse ]
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+// ----------------------------------------------------------------------------
+const WindowLoader = useHsUiWindowLoader();
+// ----------------------------------------------------------------------------
+// [ focusTrap ]
+const focusTargetElm = ref<HTMLElement | null>(null);
+const { activate, deactivate } = useFocusTrap(focusTargetElm);
+watch(
+  () => WindowLoader.state.show,
+  (show) => {
+    if (show) {
+      activate();
+    } else {
+      deactivate();
+    }
+  }
+);
+// ----------------------------------------------------------------------------
+</script>
+<template>
+  <div
+    ref="focusTargetElm"
+    class="HsUiWindowLoader"
+    :class="{ show: WindowLoader.state.show }"
+    :style="{ 'z-index': WindowLoader.state.zindex }"
+  >
+    <!--  -->
+    <!--  -->
+    <div class="HsUiWindowLoader-body">
+      <div class="sk-cube-grid">
+        <div class="sk-cube sk-cube1" />
+        <div class="sk-cube sk-cube2" />
+        <div class="sk-cube sk-cube3" />
+        <div class="sk-cube sk-cube4" />
+        <div class="sk-cube sk-cube5" />
+        <div class="sk-cube sk-cube6" />
+        <div class="sk-cube sk-cube7" />
+        <div class="sk-cube sk-cube8" />
+        <div class="sk-cube sk-cube9" />
+      </div>
+      <div class="HsUiWindowLoader-text">Please wait...</div>
+      <input type="checkbox" class="dummy" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dummy {
+  opacity: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+}
+
+.HsUiWindowLoader {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.411);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 300ms;
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.HsUiWindowLoader.show {
+  pointer-events: all;
+  opacity: 1;
+}
+.HsUiWindowLoader .HsUiWindowLoader-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.HsUiWindowLoader .HsUiWindowLoader-text {
+  padding: 18px 0 0 0;
+  font-size: 20px;
+  line-height: 1em;
+  color: white;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  outline: none;
+}
+@media screen and (min-width: 0px) and (max-width: 599.9px) {
+  .HsUiWindowLoader .HsUiWindowLoader-text {
+    font-size: 16px;
+  }
+}
+.HsUiWindowLoader .HsUiWindowLoader-text:focus {
+  background-color: red;
+}
+.HsUiWindowLoader .sk-cube-grid {
+  width: 130px;
+  height: 130px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+.HsUiWindowLoader .sk-cube {
+  width: calc(33.33% - 2px);
+  height: calc(33.33% - 2px);
+  margin: 1px;
+  background-color: rgba(37, 243, 233, 0.767);
+  animation: HsUiWindowLoader-anime 1.3s infinite ease-in-out;
+}
+.HsUiWindowLoader .sk-cube1 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.HsUiWindowLoader .sk-cube2 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.HsUiWindowLoader .sk-cube3 {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+.HsUiWindowLoader .sk-cube4 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+.HsUiWindowLoader .sk-cube5 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.HsUiWindowLoader .sk-cube6 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.HsUiWindowLoader .sk-cube7 {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.HsUiWindowLoader .sk-cube8 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+.HsUiWindowLoader .sk-cube9 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+</style>
+
+<style lang="scss">
+@keyframes HsUiWindowLoader-anime {
+  0%,
+  70%,
+  100% {
+    -webkit-transform: scale3D(1, 1, 1);
+    transform: scale3D(1, 1, 1);
+  }
+
+  35% {
+    -webkit-transform: scale3D(0, 0, 1);
+    transform: scale3D(0, 0, 1);
+  }
+}
+</style>

package/dist/runtime/components/v-test.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// [ vue ]
+
+import { computed, ref } from 'vue';
+// [ tailwind ]
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type ClassType, ClassTypeToString } from '../lib/com';
+import { GetPrefix, RemovePrefix } from '../lib/prefix';
+
+// ----------------------------------------------------------------------------
+const twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+// ----------------------------------------------------------------------------
+
+interface Props {
+  class?: ClassType;
+  text?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  text: 'hello',
+  class: '',
+});
+
+const baseClass = RemovePrefix([
+  //
+  'bg-blue-400',
+  'tw-bg-blue-400',
+  `m-0`,
+  `sm:m-4`,
+  `tw-m-0`,
+  `sm:tw-m-4`,
+]);
+
+const topClass = computed(() => {
+  return twMerge(baseClass, ClassTypeToString(props.class));
+});
+const counter = ref(0);
+</script>
+<template>
+  <div class="tw-my-3">
+    <button class="text-message" :class="topClass" @click="counter++">
+      {{ topClass }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.text-message {
+  color: black;
+  border: solid 2px rgb(227, 123, 27);
+  padding: 2px 10px;
+  border-radius: 4px;
+  outline: none;
+  font-weight: bold;
+}
+</style>

package/dist/runtime/composables/use-hs-form-focus.d.ts

@@ -0,0 +1,10 @@
+interface State {
+    state: {
+        isInit: boolean;
+        id: string;
+    };
+}
+export declare const useHsFormFocus: import("pinia").StoreDefinition<"HsFormFocus", State, {}, {
+    Init(): Promise<void>;
+}>;
+export {};

package/dist/runtime/composables/use-hs-form-focus.js

@@ -0,0 +1,29 @@
+import { watch } from "vue";
+import { defineStore } from "pinia";
+import { useRoute } from "#imports";
+export const useHsFormFocus = defineStore({
+  id: "HsFormFocus",
+  state: () => {
+    return {
+      state: {
+        isInit: false,
+        id: ""
+      }
+    };
+  },
+  actions: {
+    async Init() {
+      const state = this.state;
+      if (state.isInit)
+        return;
+      const route = useRoute();
+      watch(
+        () => route.fullPath,
+        () => {
+          state.id = "";
+        }
+      );
+    }
+    // ---------------------------------------------------
+  }
+});

package/dist/runtime/composables/use-hs-multi-lang.d.ts

@@ -0,0 +1,9 @@
+import { type MultiLang } from '../lib/multi-lang.js';
+export interface StoreState {
+    lang: string;
+    fallback: string;
+}
+export declare const useHsMultiLang: import("pinia").StoreDefinition<"HsMultiLang", StoreState, {}, {
+    MultiLangText(text: MultiLang): string;
+    GetTextByMultiLang: (text: MultiLang, lang: string | undefined, fallback?: string | undefined) => string;
+}>;

package/dist/runtime/composables/use-hs-multi-lang.js

@@ -0,0 +1,21 @@
+import { computed } from "vue";
+import { defineStore } from "pinia";
+import { GetTextByMultiLang } from "../lib/multi-lang.js";
+export const useHsMultiLang = defineStore({
+  id: "HsMultiLang",
+  state: () => {
+    return {
+      lang: "ja",
+      fallback: "ja"
+    };
+  },
+  // ----------------------------------------------------------------------------
+  actions: {
+    MultiLangText(text) {
+      return computed(() => {
+        return GetTextByMultiLang(text, this.lang, this.fallback);
+      }).value;
+    },
+    GetTextByMultiLang
+  }
+});

package/dist/runtime/composables/use-hs-ui-dialog.d.ts

@@ -0,0 +1,22 @@
+import { type MultiLang } from '../lib/multi-lang.js';
+import { DialogItem, DialogResult, type DialogOption } from '../components/hs-ui/dialog/index.type.js';
+interface State {
+    state: {
+        id: number;
+        pendingList: {
+            ts: string;
+            data: DialogItem;
+        }[];
+    };
+}
+export declare const useHsUiDialog: import("pinia").StoreDefinition<"HsUiDialog", State, {
+    InitOption: () => () => DialogOption;
+    Result: () => {
+        readonly left: "left";
+        readonly right: "right";
+        readonly cancel: "cancel";
+    };
+}, {
+    Show(message: MultiLang, title: MultiLang, option?: DialogOption): Promise<DialogResult>;
+}>;
+export {};

package/dist/runtime/composables/use-hs-ui-dialog.js

@@ -0,0 +1,43 @@
+import dayjs from "dayjs";
+import { defineStore } from "pinia";
+import { GenerateUniqeKey } from "../lib/com.js";
+import { DialogItem, InitDialogOption, DialogResult } from "../components/hs-ui/dialog/index.type.js";
+export const useHsUiDialog = defineStore({
+  id: "HsUiDialog",
+  state: () => {
+    return {
+      state: {
+        id: 0,
+        pendingList: []
+      }
+    };
+  },
+  getters: {
+    // hoge: (state) => {
+    //   return '';
+    // },
+    InitOption: () => {
+      return InitDialogOption;
+    },
+    Result: () => {
+      return DialogResult;
+    }
+  },
+  actions: {
+    async Show(message, title, option = InitDialogOption()) {
+      if (import.meta.server)
+        return DialogResult.cancel;
+      const item = new DialogItem(message, title, option);
+      const pendingList = this.state.pendingList;
+      const ts = GenerateUniqeKey() + dayjs().format("x");
+      pendingList.push({
+        ts,
+        data: item
+      });
+      const ret = await item.show();
+      this.state.pendingList = this.state.pendingList.filter((row) => row.ts !== ts);
+      return ret;
+    }
+    // ---------------------------------------------------
+  }
+});

package/dist/runtime/composables/use-hs-ui-toast.d.ts

@@ -0,0 +1,20 @@
+import { type MultiLang } from '../lib/multi-lang.js';
+import { type Message } from '../components/hs-ui/toast/index.type.js';
+interface State {
+    state: {
+        id: number;
+        pendingList: Message[];
+        zindex: number;
+    };
+}
+export declare const useHsUiToast: import("pinia").StoreDefinition<"HsUiToast", State, {}, {
+    s(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+    Success(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+    Info(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+    i(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+    w(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+    Warning(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+    e(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+    Error(message: MultiLang, title: MultiLang, hideAfter?: number): void;
+}>;
+export {};

package/dist/runtime/composables/use-hs-ui-toast.js

@@ -0,0 +1,55 @@
+import { defineStore } from "pinia";
+import { GenerateUniqeKey } from "../lib/com.js";
+import { Theme } from "../components/hs-ui/toast/index.type.js";
+const toastShow = (message, title, hideAfter, theme) => {
+  const toast = useHsUiToast();
+  const newToast = {
+    key: GenerateUniqeKey(),
+    isShow: true,
+    title,
+    message,
+    hideAfter,
+    barWidth: 0,
+    theme
+  };
+  toast.state.pendingList.push(newToast);
+};
+export const useHsUiToast = defineStore({
+  id: "HsUiToast",
+  state: () => {
+    return {
+      state: {
+        id: 0,
+        pendingList: [],
+        zindex: 10002
+      }
+    };
+  },
+  actions: {
+    s(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Success);
+    },
+    Success(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Success);
+    },
+    Info(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Info);
+    },
+    i(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Info);
+    },
+    w(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Warning);
+    },
+    Warning(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Warning);
+    },
+    e(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Error);
+    },
+    Error(message, title, hideAfter = 0) {
+      toastShow(message, title, hideAfter, Theme.Error);
+    }
+    // ---------------------------------------------------
+  }
+});

package/dist/runtime/composables/use-hs-ui-window-loader.d.ts

@@ -0,0 +1,11 @@
+interface State {
+    state: {
+        show: boolean;
+        zindex: number;
+    };
+}
+export declare const useHsUiWindowLoader: import("pinia").StoreDefinition<"HsUiWindowLoader", State, {}, {
+    Show(): Promise<void>;
+    Hide(): Promise<void>;
+}>;
+export {};

package/dist/runtime/composables/use-hs-ui-window-loader.js

@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+export const useHsUiWindowLoader = defineStore({
+  id: "HsUiWindowLoader",
+  state: () => {
+    return {
+      state: {
+        show: false,
+        zindex: 1e4
+      }
+    };
+  },
+  actions: {
+    async Show() {
+      this.state.show = true;
+    },
+    async Hide() {
+      this.state.show = false;
+    }
+    // ---------------------------------------------------
+  }
+});

package/dist/runtime/lib/class-style.d.ts

@@ -0,0 +1,8 @@
+type ClassTypeObje = {
+    [key: string]: boolean;
+};
+type ClassTypeArray = (string | ClassTypeObje | ClassTypeArray)[];
+export type ClassType = string | ClassTypeObje | ClassTypeArray;
+export declare const ClassTypeToString: (c: ClassType | undefined) => string;
+export declare const ClassTypeToArray: (c: ClassType | undefined) => string[];
+export {};

package/dist/runtime/lib/class-style.js

@@ -0,0 +1,59 @@
+const typeOf = (obj) => {
+  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+};
+export const ClassTypeToString = (c) => {
+  if (c === void 0)
+    return "";
+  const valueType = typeOf(c);
+  if (valueType === "string")
+    return c;
+  if (valueType === "undefined")
+    return "";
+  if (valueType === "array") {
+    return c.reduce((ret, row) => {
+      const a = ClassTypeToString(row);
+      if (a) {
+        ret.push(a);
+      }
+      return ret;
+    }, []).join(" ");
+  }
+  if (valueType === "object") {
+    return Object.keys(c).reduce((ret, key) => {
+      const b = c[key];
+      if (b) {
+        ret.push(key);
+      }
+      return ret;
+    }, []).join(" ");
+  }
+  return "";
+};
+export const ClassTypeToArray = (c) => {
+  if (c === void 0)
+    return [];
+  const valueType = typeOf(c);
+  if (valueType === "string")
+    return [c];
+  if (valueType === "undefined")
+    return [];
+  if (valueType === "array") {
+    return c.reduce((ret, row) => {
+      const a = ClassTypeToString(row);
+      if (a) {
+        ret.push(a);
+      }
+      return ret;
+    }, []);
+  }
+  if (valueType === "object") {
+    return Object.keys(c).reduce((ret, key) => {
+      const b = c[key];
+      if (b) {
+        ret.push(key);
+      }
+      return ret;
+    }, []);
+  }
+  return [];
+};

package/dist/runtime/lib/com.d.ts

@@ -0,0 +1,14 @@
+export { type ClassType, ClassTypeToString } from './class-style.js';
+export { RemovePrefix } from './prefix.js';
+/**
+ * ユニークな文字列を生成する
+ */
+export declare const GenerateUniqeKey: (len?: number) => string;
+/**
+ * 一定時間処理を待機
+ */
+export declare const Sleep: (time: number) => Promise<unknown>;
+/**
+ * マウント後にブラウザ側で実行すること
+ */
+export declare const IsMobile: () => boolean;

package/dist/runtime/lib/com.js

@@ -0,0 +1,25 @@
+import dayjs from "dayjs";
+export { ClassTypeToString } from "./class-style.js";
+export { RemovePrefix } from "./prefix.js";
+export const GenerateUniqeKey = (len = 32) => {
+  const S = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+  const word = len < 14 ? 14 : len - 15;
+  return dayjs().format("YYYYMMDDHHmmssSSS") + "_" + Array.from(Array(word)).map(() => S[Math.floor(Math.random() * S.length)]).join("");
+};
+export const Sleep = (time) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+export const IsMobile = () => {
+  if (navigator === void 0)
+    return false;
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (/android|ipod|ipad|iphone|macintosh/.test(userAgent) && "ontouchend" in document) {
+    return true;
+  } else {
+    return false;
+  }
+};

package/dist/runtime/lib/multi-lang.d.ts

@@ -0,0 +1,9 @@
+export type MultiLang = string | {
+    [key: string]: string;
+};
+export declare const GetTextByMultiLang: (text: MultiLang, lang: string | undefined, fallback?: string | undefined) => string;
+/**
+ * 複数のマルチ言語データを結合します
+ * @returns MultiLangオブジェクト
+ */
+export declare const JoinMultiLang: (list: MultiLang[], seq?: string) => MultiLang;

package/dist/runtime/lib/multi-lang.js

@@ -0,0 +1,75 @@
+const isObject = (value) => {
+  return value !== null && typeof value === "object";
+};
+export const GetTextByMultiLang = (text, lang, fallback = "ja") => {
+  if (lang === void 0) {
+    lang = "ja";
+  }
+  const textIsObject = isObject(text);
+  if (!textIsObject) {
+    return String(text);
+  }
+  if (lang in text) {
+    return text[lang];
+  } else if (fallback in text) {
+    console.error(`GetTextByMultiLang :: Language fallback [${lang} -> ${fallback}]`, text);
+    return text.ja;
+  } else {
+    console.error(`GetTextByMultiLang :: Language Error    [${lang}]`, text);
+    return JSON.stringify(text);
+  }
+};
+export const JoinMultiLang = (list, seq = "\n") => {
+  if (Array.isArray(list) === false)
+    return "";
+  if (list.length === 0)
+    return "";
+  const temp = list.map((row) => {
+    return { type: isObject(row) ? "object" : "string", multiLang: row };
+  });
+  const langList = temp.reduce((ret, row) => {
+    if (row.type === "string")
+      return ret;
+    Object.keys(row.multiLang).forEach((key) => {
+      if (!ret.includes(key))
+        ret.push(key);
+    });
+    return ret;
+  }, []);
+  if (langList.length === 0) {
+    return list.filter((row) => row !== "").join(seq);
+  }
+  const multiData = langList.reduce((ret, lang) => {
+    ret[lang] = [];
+    return ret;
+  }, {});
+  temp.forEach((row) => {
+    if (row.type === "string") {
+      if (row.multiLang !== "") {
+        langList.forEach((lang) => {
+          multiData[lang].push(String(row.multiLang));
+        });
+      }
+    } else if (row.type === "object") {
+      langList.forEach((lang) => {
+        const langText = row.multiLang;
+        if (lang in langText) {
+          if (!langText[lang])
+            return;
+          multiData[lang].push(langText[lang]);
+        } else if ("ja" in langText) {
+          if (!langText.ja)
+            return;
+          multiData[lang].push(langText.ja);
+          console.error(`JoinMultiLang :: Language fallback [${lang} -> ja]`, row.multiLang);
+        } else {
+          console.error(`JoinMultiLang :: Language Error    [${lang} -> ja]`, row.multiLang);
+        }
+      });
+    }
+  });
+  return Object.keys(multiData).reduce((ret, lang) => {
+    ret[lang] = multiData[lang].join(seq);
+    return ret;
+  }, {});
+};