nuxt-hs-ui 1.0.10 → 2.0.2

package/dist/runtime/components/misc/view-name-display.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\misc\view-name-display.vue
+// ----------------------------------------------------------------------------
+// ViewNameDisplay
+// ViewNameDisplayViewNameDisplay
+----------------------------------------------------------------------------- */
+
+// [ NUXT ]
+import { ref, watch, onMounted, type Ref } from "#imports";
+// [ vueuse ]
+import { useElementVisibility } from "@vueuse/core";
+// ----------------------------------------------------------------------------
+// [ utils ]
+import type { MultiLang } from "../../utils/multi-lang";
+// [ composables ]
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+// ----------------------------------------------------------------------------
+// [ Props ]
+interface Props {
+  // isShow: boolean;
+  componentName: MultiLang;
+  headerElm: HTMLElement | null;
+}
+const props = defineProps<Props>();
+// ----------------------------------------------------------------------------
+// [ MultiLang ]
+const hsMultiLang = useHsMultiLang();
+const tx = hsMultiLang.tx;
+// ----------------------------------------------------------------------------
+let targetIsVisible: false | Ref<boolean> = false;
+watch(
+  () => props.headerElm,
+  () => {
+    targetIsVisible = useElementVisibility(props.headerElm);
+  }
+);
+
+const isMounted = ref(false);
+onMounted(() => {
+  setTimeout(() => {
+    isMounted.value = true;
+  }, 1000);
+});
+
+const scroll = () => {
+  if (props.headerElm === null) return;
+  props.headerElm.scrollIntoView({ behavior: "smooth" });
+};
+</script>
+
+<template>
+  <div
+    class="view-name-display flex-cc"
+    :class="{ isShow: !targetIsVisible && isMounted }"
+  >
+    <div class="view-name elevation-4" @click.stop="scroll()">
+      {{ tx(props.componentName).value }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.view-name-display {
+  position: fixed;
+  top: 20px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 300ms;
+  pointer-events: none;
+}
+.view-name-display.isShow {
+  opacity: 1;
+}
+.view-name-display .view-name {
+  font-size: 0.8rem;
+  padding: 2px 10px;
+  background-color: white;
+  border: solid 2px #eb6600;
+  color: #eb6600;
+  border: solid 2px #1c03a2;
+  color: #1c03a2;
+  pointer-events: all;
+}
+.view-name-display .view-name {
+  font-size: 0.8rem;
+}
+</style>

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

@@ -0,0 +1,40 @@
+import type { MultiLang } from "../utils/multi-lang.js";
+import { DialogItem, DialogResult, type DialogOption } from "../types/dialog.js";
+interface State {
+    state: {
+        id: number;
+        pendingList: {
+            ts: string;
+            data: DialogItem;
+        }[];
+    };
+}
+export declare const useHsDialog: import("pinia").StoreDefinition<"HsDialog", State, {
+    Themes: () => {
+        readonly main0: "main0";
+        readonly main1: "main1";
+        readonly main2: "main2";
+        readonly main3: "main3";
+        readonly accent1: "accent1";
+        readonly accent2: "accent2";
+        readonly info: "info";
+        readonly link: "link";
+        readonly download: "download";
+        readonly success: "success";
+        readonly warn: "warn";
+        readonly error: "error";
+        readonly white: "white";
+        readonly black: "black";
+        readonly dark: "dark";
+        readonly back: "back";
+    };
+    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 → use-hs-dialog.js}

@@ -1,9 +1,13 @@
 import dayjs from "dayjs/esm/index";
 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",
+import { GenerateUniqeKey } from "../utils/com.js";
+import { Theme } from "../utils/theme.js";
+import {
+  DialogItem,
+  InitDialogOption,
+  DialogResult
+} from "../types/dialog.js";
+export const useHsDialog = defineStore("HsDialog", {
   state: () => {
     return {
       state: {
@@ -13,9 +17,9 @@ export const useHsUiDialog = defineStore({
     };
   },
   getters: {
-    // hoge: (state) => {
-    //   return '';
-    // },
+    Themes: () => {
+      return Theme;
+    },
     InitOption: () => {
       return InitDialogOption;
     },
@@ -25,8 +29,7 @@ export const useHsUiDialog = defineStore({
   },
   actions: {
     async Show(message, title, option = InitDialogOption()) {
-      if (import.meta.server)
-        return DialogResult.cancel;
+      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");
@@ -35,7 +38,9 @@ export const useHsUiDialog = defineStore({
         data: item
       });
       const ret = await item.show();
-      this.state.pendingList = this.state.pendingList.filter((row) => row.ts !== ts);
+      this.state.pendingList = this.state.pendingList.filter(
+        (row) => row.ts !== ts
+      );
       return ret;
     }
     // ---------------------------------------------------

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

@@ -4,7 +4,7 @@ interface State {
         id: string;
     };
 }
-export declare const useHsFormFocus: import("pinia").StoreDefinition<"HsFormFocus", State, {}, {
+export declare const useHsFocus: import("pinia").StoreDefinition<"HsFocus", State, {}, {
     Init(): Promise<void>;
 }>;
 export {};

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

@@ -1,8 +1,7 @@
 import { watch } from "vue";
 import { defineStore } from "pinia";
 import { useRoute } from "#imports";
-export const useHsFormFocus = defineStore({
-  id: "HsFormFocus",
+export const useHsFocus = defineStore("HsFocus", {
   state: () => {
     return {
       state: {
@@ -14,8 +13,7 @@ export const useHsFormFocus = defineStore({
   actions: {
     async Init() {
       const state = this.state;
-      if (state.isInit)
-        return;
+      if (state.isInit) return;
       const route = useRoute();
       watch(
         () => route.fullPath,

package/dist/runtime/composables/use-hs-misc.d.ts

@@ -0,0 +1,22 @@
+interface StoreState {
+    state: {
+        isInit: boolean;
+        isReady: boolean;
+        isMobile: boolean;
+        isBracke: boolean;
+        spBracke: number;
+        readyDeray: number;
+        window: {
+            h: number;
+            w: number;
+        };
+        scrollbarWidth: number;
+    };
+}
+export declare const useHsMisc: import("pinia").StoreDefinition<"HsMisc", StoreState, {}, {
+    Init(arg?: {
+        spBracke?: number;
+        readyDeray?: number;
+    }): Promise<void>;
+}>;
+export {};

package/dist/runtime/composables/use-hs-misc.js

@@ -0,0 +1,62 @@
+import { defineStore } from "pinia";
+import { useEventListener, nextTick } from "#imports";
+import { Sleep, IsMobile } from "../utils/com.js";
+export const useHsMisc = defineStore("HsMisc", {
+  state: () => {
+    return {
+      state: {
+        isInit: false,
+        isReady: false,
+        isMobile: false,
+        isBracke: false,
+        spBracke: 768,
+        readyDeray: 10,
+        window: {
+          h: 0,
+          w: 0
+        },
+        scrollbarWidth: 0
+      }
+    };
+  },
+  // ----------------------------------------------------------------------------
+  actions: {
+    // ---------------------
+    async Init(arg) {
+      await Sleep(0);
+      const state = this.state;
+      if (state.isInit) return;
+      if (arg?.readyDeray) {
+        state.readyDeray = arg.readyDeray;
+      }
+      if (arg?.spBracke) {
+        state.spBracke = arg.spBracke;
+      }
+      state.isInit = true;
+      state.isMobile = IsMobile();
+      const initWindow = () => {
+        useEventListener(window, "resize", () => {
+          state.isBracke = window.innerWidth < state.spBracke;
+          state.window = {
+            h: window.innerHeight,
+            w: window.innerWidth
+          };
+          state.scrollbarWidth = window.innerWidth - document.body.clientWidth < 0 ? 0 : window.innerWidth - document.body.clientWidth;
+        });
+        state.isBracke = window.innerWidth < state.spBracke;
+        state.window = {
+          h: window.innerHeight,
+          w: window.innerWidth
+        };
+        setTimeout(() => {
+          state.scrollbarWidth = window.innerWidth - document.body.clientWidth < 0 ? 0 : window.innerWidth - document.body.clientWidth;
+        }, 1e3);
+      };
+      initWindow();
+      await Sleep(state.readyDeray);
+      state.isReady = true;
+      await nextTick();
+    }
+    // ---------------------
+  }
+});

package/dist/runtime/composables/use-hs-modal.d.ts

@@ -0,0 +1,31 @@
+interface State {
+    state: {
+        init: boolean;
+        baseIndex: number;
+        activeList: {
+            id: string;
+            zIndex: number;
+            closeable: boolean;
+        }[];
+    };
+}
+export declare const useHsModal: import("pinia").StoreDefinition<"HsModal", State, {
+    activeId: (state: {
+        state: {
+            init: boolean;
+            baseIndex: number;
+            activeList: {
+                id: string;
+                zIndex: number;
+                closeable: boolean;
+            }[];
+        };
+    } & import("pinia").PiniaCustomStateProperties<State>) => string | null;
+}, {
+    watch(): void;
+    myzIndex(id: string): import("vue").ComputedRef<number>;
+    add(id: string, closeable?: boolean): number;
+    remove(id: string): void;
+    removeAll(): void;
+}>;
+export {};

package/dist/runtime/{components/hs-ui/modal/use-ui-modal.js → composables/use-hs-modal.js}

@@ -1,14 +1,13 @@
-import { computed, watch } from "vue";
-import { useRoute } from "#imports";
 import { defineStore } from "pinia";
 import { clearAllBodyScrollLocks } from "body-scroll-lock";
-export const useStoreModal = defineStore({
-  id: "HsUiStoreModal",
+import { computed, watch, useRoute } from "#imports";
+import { useHsToast } from "../composables/use-hs-toast.js";
+export const useHsModal = defineStore("HsModal", {
   state: () => {
     return {
       state: {
         init: false,
-        baseIndex: 5e3,
+        baseIndex: 500,
         activeList: []
       }
     };
@@ -16,22 +15,18 @@ export const useStoreModal = defineStore({
   getters: {
     activeId: (state) => {
       const activeList = state.state.activeList;
-      if (activeList.length === 0)
-        return null;
+      if (activeList.length === 0) return null;
       const zIndex = Math.max(...activeList.map((row) => row.zIndex));
       const data = activeList.find((row) => row.zIndex === zIndex);
-      if (!data)
-        return null;
+      if (!data) return null;
       return data.id;
     }
   },
   actions: {
     watch() {
       const state = this.state;
-      if (import.meta.server)
-        return;
-      if (state.init)
-        return;
+      if (import.meta.server) return;
+      if (state.init) return;
       state.init = true;
       const route = useRoute();
       watch(
@@ -51,16 +46,23 @@ export const useStoreModal = defineStore({
         return target.zIndex;
       });
     },
-    add(id) {
+    add(id, closeable = false) {
       const zIndex = this.state.activeList.length === 0 ? this.state.baseIndex : Math.max(...this.state.activeList.map((row) => row.zIndex)) + 2;
       this.state.activeList.push({
         id,
-        zIndex
+        zIndex,
+        closeable
+      });
+      const toast = useHsToast();
+      toast.state.pendingList.forEach((row) => {
+        row.isShow = false;
       });
       return zIndex;
     },
     remove(id) {
-      this.state.activeList = this.state.activeList.filter((row) => row.id !== id);
+      this.state.activeList = this.state.activeList.filter(
+        (row) => row.id !== id
+      );
       if (this.state.activeList.length === 0) {
         clearAllBodyScrollLocks();
       }

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

@@ -1,9 +1,17 @@
-import { type MultiLang } from '../lib/multi-lang.js';
-export interface StoreState {
-    lang: string;
-    fallback: string;
+import type { MultiLang } from "../utils/multi-lang.js";
+interface StoreState {
+    state: {
+        lang: string;
+        fallBack: string;
+        dateFormat: string;
+        isInit: boolean;
+    };
 }
 export declare const useHsMultiLang: import("pinia").StoreDefinition<"HsMultiLang", StoreState, {}, {
-    MultiLangText(text: MultiLang): string;
-    GetTextByMultiLang: (text: MultiLang, lang: string | undefined, fallback?: string | undefined) => string;
+    init(arg: {
+        lang?: string;
+        setDayjsLang?: (lang: string) => void;
+    }): void;
+    tx(text: MultiLang, lang?: undefined): import("vue").ComputedRef<string>;
 }>;
+export {};

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

@@ -1,21 +1,54 @@
-import { computed } from "vue";
+import dayjs from "dayjs";
+import ja from "dayjs/locale/ja.js";
+import en from "dayjs/locale/en.js";
 import { defineStore } from "pinia";
-import { GetTextByMultiLang } from "../lib/multi-lang.js";
-export const useHsMultiLang = defineStore({
-  id: "HsMultiLang",
+import { computed, watch } from "#imports";
+import { GetTextByMultiLang } from "../utils/multi-lang.js";
+export const useHsMultiLang = defineStore("HsMultiLang", {
   state: () => {
     return {
-      lang: "ja",
-      fallback: "ja"
+      state: {
+        lang: "ja",
+        fallBack: "ja",
+        dateFormat: "YYYY-MM-DD",
+        isInit: false
+      }
     };
   },
   // ----------------------------------------------------------------------------
   actions: {
-    MultiLangText(text) {
-      return computed(() => {
-        return GetTextByMultiLang(text, this.lang, this.fallback);
-      }).value;
+    init(arg) {
+      const state = this.state;
+      if (state.isInit) return;
+      const setDayjsLang = arg.setDayjsLang !== void 0 ? arg.setDayjsLang : (lang) => {
+        if (lang === "ja") {
+          dayjs.locale(ja);
+        } else {
+          dayjs.locale(en);
+        }
+      };
+      watch(
+        () => this.state.lang,
+        (lang) => {
+          if (arg.setDayjsLang) {
+            arg.setDayjsLang(lang);
+          } else {
+            setDayjsLang(lang);
+          }
+        },
+        { immediate: true }
+      );
     },
-    GetTextByMultiLang
+    // ---------------------
+    tx(text, lang = void 0) {
+      const state = this.state;
+      return computed(() => {
+        if (lang) {
+          return GetTextByMultiLang(text, lang, state.fallBack);
+        }
+        return GetTextByMultiLang(text, state.lang, state.fallBack);
+      });
+    }
+    // ---------------------
   }
 });

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

@@ -1,5 +1,5 @@
-import { type MultiLang } from '../lib/multi-lang.js';
-import { type Message } from '../components/hs-ui/toast/index.type.js';
+import type { MultiLang } from "../utils/multi-lang.js";
+import { type Message } from "../types/toast.js";
 interface State {
     state: {
         id: number;
@@ -7,7 +7,7 @@ interface State {
         zindex: number;
     };
 }
-export declare const useHsUiToast: import("pinia").StoreDefinition<"HsUiToast", State, {}, {
+export declare const useHsToast: 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;

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

@@ -1,8 +1,8 @@
 import { defineStore } from "pinia";
-import { GenerateUniqeKey } from "../lib/com.js";
-import { Theme } from "../components/hs-ui/toast/index.type.js";
+import { GenerateUniqeKey } from "../utils/com.js";
+import { Theme } from "../types/toast.js";
 const toastShow = (message, title, hideAfter, theme) => {
-  const toast = useHsUiToast();
+  const toast = useHsToast();
   const newToast = {
     key: GenerateUniqeKey(),
     isShow: true,
@@ -14,8 +14,7 @@ const toastShow = (message, title, hideAfter, theme) => {
   };
   toast.state.pendingList.push(newToast);
 };
-export const useHsUiToast = defineStore({
-  id: "HsUiToast",
+export const useHsToast = defineStore("HsUiToast", {
   state: () => {
     return {
       state: {

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

@@ -4,7 +4,7 @@ interface State {
         zindex: number;
     };
 }
-export declare const useHsUiWindowLoader: import("pinia").StoreDefinition<"HsUiWindowLoader", State, {}, {
+export declare const useHsWindowLoader: import("pinia").StoreDefinition<"HsWindowLoader", State, {}, {
     Show(): Promise<void>;
     Hide(): Promise<void>;
 }>;

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

@@ -1,6 +1,5 @@
 import { defineStore } from "pinia";
-export const useHsUiWindowLoader = defineStore({
-  id: "HsUiWindowLoader",
+export const useHsWindowLoader = defineStore("HsWindowLoader", {
   state: () => {
     return {
       state: {

package/dist/runtime/plugin/v-select.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugin/v-select.js

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#imports";
+import vSelect from "vue-select";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component("v-select", vSelect);
+});

package/dist/runtime/style.css

@@ -1 +1,22 @@
-@tailwind base;@tailwind components;@tailwind utilities;*{position:relative}
+@import url(//use.fontawesome.com/releases/v6.4.0/css/all.css);
+*:focus {
+  outline: none !important;
+}
+
+:root {
+  color-scheme: light !important;
+}
+
+* {
+  position: relative;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-day.flatpickr-disabled {
+  background-color: rgba(255, 34, 34, 0.164) !important;
+  color: rgb(255, 255, 255) !important;
+  border: solid 1px rgb(187, 153, 153) !important;
+}

package/dist/runtime/tailwind.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer utilities {
+  .flex-cc {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .flex-c {
+    display: flex;
+    align-items: center;
+  }
+  .row {
+    display: flex;
+    margin-left: -6px;
+    margin-right: -6px;
+    flex-wrap: wrap;
+  }
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-9,
+  .col-10,
+  .col-11,
+  .col-12 {
+    padding-left: 6px;
+    padding-right: 6px;
+    flex: none;
+  }
+  .col-a {
+    width: auto;
+    padding-left: 6px;
+    padding-right: 6px;
+    flex: 1 1 auto;
+  }
+  .col-1 {
+    width: 8.3333333333%;
+  }
+  .col-2 {
+    width: 16.6666666667%;
+  }
+  .col-3 {
+    width: 25%;
+  }
+  .col-4 {
+    width: 33.3333333333%;
+  }
+  .col-5 {
+    width: 41.6666666667%;
+  }
+  .col-6 {
+    width: 50%;
+  }
+  .col-7 {
+    width: 58.3333333333%;
+  }
+  .col-8 {
+    width: 66.6666666667%;
+  }
+  .col-9 {
+    width: 75%;
+  }
+  .col-10 {
+    width: 83.3333333333%;
+  }
+  .col-11 {
+    width: 91.6666666667%;
+  }
+  .col-12 {
+    width: 100%;
+  }
+}

package/dist/runtime/types/app.config.d.ts

@@ -0,0 +1,5 @@
+declare module "#build/app.config" {
+  import type { AppConfig } from "@nuxt/schema";
+  const _default: AppConfig;
+  export default _default;
+}