nuxt-hs-ui 2.12.7 → 4.0.0

package/dist/runtime/components/misc/tabulator.vue

@@ -1,190 +1,122 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\misc\tabulator.vue
-// ----------------------------------------------------------------------------
-// Tabulator
-// TabulatorTabulator
------------------------------------------------------------------------------ */
-
-// ----------------------------------------------------------------------------
-// [ node_modules ]
-import { TabulatorFull as Tabulator } from "tabulator-tables";
-// [ NUXT ]
-import {
-  ref,
-  watch,
-  computed,
-  onMounted,
-  // onUnmounted,
-  onBeforeUnmount,
-} from "#imports";
-// ----------------------------------------------------------------------------
-// [ utils ]
-import { Option } from "../../utils/tabulator";
-// [ composables ]
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-const multiLang = useHsMultiLang();
-// ----------------------------------------------------------------------------
-// [ Props ]
-type Props = {
-  columns: any[];
-  rows: any[];
-  option?: any;
-};
-const props = withDefaults(defineProps<Props>(), {
-  // rowCountHeight: 0,
-  option: () => Option(),
-});
-// [ emit ]
-type Emits = {
-  "row-click": [data: any];
-  "row-dbl-click": [data: any];
-  init: [flag: boolean];
-  tabulator: [tabulator: any];
-  "table-rebuild": [func: () => void];
-  "table-redraw": [func: () => void];
-  "table-refresh": [func: () => void];
-  "table-refresh-stop-toggle": [func: (flag: boolean) => void];
-};
-const emit = defineEmits<Emits>();
-// [ reactive ]
-const table = ref<HTMLElement | null>(null); // reference to your table element
-const tabulator = ref<any>(null); // variable to hold your table
-
-const data = computed(() => {
-  return props.rows;
-});
-// ----------------------------------------------------------------------------
-
-const refreshStopFlag = ref(false);
-watch(
-  () => props.rows,
-  () => {
-    // console.log("watch rows", props.rows);
-    if (table.value === null) return;
-    if (isInit.value && tabulator.value !== null && !refreshStopFlag.value) {
-      tabulator.value.replaceData(data.value as any);
-    }
-  }
-  //   //   { deep: true }
-);
-
-watch(
-  () => multiLang.state.lang,
-  () => {
-    // console.log(ct, 'watch multiLang', multiLang.lang);
-    if (table.value === null) return;
-    // console.log('watch  > prop.lang', tabulator.value);
-    tabulator.value.setLocale(multiLang.state.lang);
-    // console.log('watch  > prop.lang', tabulator.value.redraw);
-    tabulator.value.redraw(true);
-  }
-);
-
-// [▼ 初期化 ▼]
-Tabulator.extendModule("localize", "langs", Option().langs);
-const isInit = ref(false);
-
-watch(isInit, (value) => {
-  emit("init", value);
-});
-
-watch(
-  () => props.columns,
-  () => {
-    // console.log(ct, 'watch columns', value);
-    if (table.value === null) return;
-    if (isInit.value) {
-      tabulator.value.setColumns(props.columns);
-    }
-  }
-);
-
-const initTabulator = () => {
-  // console.log(ct, 'initTabulator');
-  if (table.value === null) return;
-  const option = {
-    reactiveData: true,
-    ...props.option,
-    columns: props.columns,
-    data: data.value,
-  };
-  tabulator.value = new Tabulator(table.value, option);
-  tabulator.value.on("rowClick", (e: any, row: any) => {
-    emit("row-click", row._row.data);
-    e.stopPropagation();
-  });
-  tabulator.value.on("rowDblClick", (e: any, row: any) => {
-    emit("row-dbl-click", row._row.data);
-    e.stopPropagation();
-  });
-  tabulator.value.on("tableBuilding", () => (isInit.value = false));
-  const beforeRows = option.data.length;
-  let buildingFlag = true;
-  tabulator.value.on("tableBuilt", () => {
-    // console.log(ct, 'tableBuilt');
-    const afterRows = props.rows.length;
-    if (buildingFlag && beforeRows !== afterRows) {
-      buildingFlag = false;
-      tabulator.value.replaceData(props.rows as any);
-    }
-    isInit.value = true;
-  });
-  tabulator.value.on("tableDestroyed", () => (isInit.value = false));
-
-  // 親コントロールへtableを伝達
-  emit("tabulator", tabulator.value);
-  // ----------------------------------------
-
-  /** 意図的にテーブルを再描画する */
-  const reBuild = () => {
-    // console.log(ct, 'reBuild');
-    if (tabulator.value === null || isInit.value === false) return;
-    tabulator.value.destroy();
-    tabulator.value = null;
-    initTabulator();
-  };
-  emit("table-rebuild", reBuild);
-  // ----------------------------------------
-
-  /** 意図的にテーブルを再描画する   */
-  const redraw = () => {
-    if (tabulator.value === null || isInit.value === false) return;
-    tabulator.value.redraw(true);
-  };
-  emit("table-redraw", redraw);
-  // ----------------------------------------
-
-  const tableRefreshStopToggle = (flag: boolean) => {
-    // console.log('tableRefreshStopToggle', flag);
-    refreshStopFlag.value = flag;
-  };
-  emit("table-refresh-stop-toggle", tableRefreshStopToggle);
-
-  /** 意図的にテーブルデータをリフレッシュする */
-  const refresh = async () => {
-    if (tabulator.value === null || isInit.value === false) return;
-    await tabulator.value.replaceData(data.value as any);
-  };
-  emit("table-refresh", refresh);
-};
-// ----------------------------------------
-
-onMounted(() => {
-  initTabulator();
-});
-
-onBeforeUnmount(() => {
-  // console.log("onBeforeUnmount");
-  if (tabulator.value === null) return;
-  tabulator.value.destroy();
-  tabulator.value = null;
-});
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <div ref="table"></div>
-</template>
+<script setup>
+import { TabulatorFull as Tabulator } from "tabulator-tables";
+import {
+  ref,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { Option } from "../../utils/tabulator";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../composables/use-pinia";
+const multiLang = useHsMultiLang(useHsPinia());
+const props = defineProps({
+  columns: { type: Array, required: true },
+  rows: { type: Array, required: true },
+  option: { type: null, required: false, default: () => Option() }
+});
+const emit = defineEmits(["row-click", "row-dbl-click", "init", "tabulator", "table-rebuild", "table-redraw", "table-refresh", "table-refresh-stop-toggle"]);
+const table = ref(null);
+const tabulator = ref(null);
+const data = computed(() => {
+  return props.rows;
+});
+const refreshStopFlag = ref(false);
+watch(
+  () => props.rows,
+  () => {
+    if (table.value === null) return;
+    if (isInit.value && tabulator.value !== null && !refreshStopFlag.value) {
+      tabulator.value.replaceData(data.value);
+    }
+  }
+  //   //   { deep: true }
+);
+watch(
+  () => multiLang.lang,
+  () => {
+    if (table.value === null) return;
+    tabulator.value.setLocale(multiLang.lang);
+    tabulator.value.redraw(true);
+  }
+);
+Tabulator.extendModule("localize", "langs", Option().langs);
+const isInit = ref(false);
+watch(isInit, (value) => {
+  emit("init", value);
+});
+watch(
+  () => props.columns,
+  () => {
+    if (table.value === null) return;
+    if (isInit.value) {
+      tabulator.value.setColumns(props.columns);
+    }
+  }
+);
+const initTabulator = () => {
+  if (table.value === null) return;
+  const option = {
+    reactiveData: true,
+    ...props.option,
+    columns: props.columns,
+    data: data.value
+  };
+  tabulator.value = new Tabulator(table.value, option);
+  tabulator.value.on("rowClick", (e, row) => {
+    emit("row-click", row._row.data);
+    e.stopPropagation();
+  });
+  tabulator.value.on("rowDblClick", (e, row) => {
+    emit("row-dbl-click", row._row.data);
+    e.stopPropagation();
+  });
+  tabulator.value.on("tableBuilding", () => isInit.value = false);
+  const beforeRows = option.data.length;
+  let buildingFlag = true;
+  tabulator.value.on("tableBuilt", () => {
+    const afterRows = props.rows.length;
+    if (buildingFlag && beforeRows !== afterRows) {
+      buildingFlag = false;
+      tabulator.value.replaceData(props.rows);
+    }
+    isInit.value = true;
+  });
+  tabulator.value.on("tableDestroyed", () => isInit.value = false);
+  emit("tabulator", tabulator.value);
+  const reBuild = () => {
+    if (tabulator.value === null || isInit.value === false) return;
+    tabulator.value.destroy();
+    tabulator.value = null;
+    initTabulator();
+  };
+  emit("table-rebuild", reBuild);
+  const redraw = () => {
+    if (tabulator.value === null || isInit.value === false) return;
+    tabulator.value.redraw(true);
+  };
+  emit("table-redraw", redraw);
+  const tableRefreshStopToggle = (flag) => {
+    refreshStopFlag.value = flag;
+  };
+  emit("table-refresh-stop-toggle", tableRefreshStopToggle);
+  const refresh = async () => {
+    if (tabulator.value === null || isInit.value === false) return;
+    await tabulator.value.replaceData(data.value);
+  };
+  emit("table-refresh", refresh);
+};
+onMounted(() => {
+  initTabulator();
+});
+onBeforeUnmount(() => {
+  if (tabulator.value === null) return;
+  tabulator.value.destroy();
+  tabulator.value = null;
+});
+</script>
+
+<template>
+  <div ref="table"></div>
+</template>

package/dist/runtime/components/misc/tabulator.vue.d.ts

@@ -0,0 +1,28 @@
+type Props = {
+    columns: any[];
+    rows: any[];
+    option?: any;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    init: (flag: boolean) => any;
+    "row-click": (data: any) => any;
+    "row-dbl-click": (data: any) => any;
+    tabulator: (tabulator: any) => any;
+    "table-rebuild": (func: () => void) => any;
+    "table-redraw": (func: () => void) => any;
+    "table-refresh": (func: () => void) => any;
+    "table-refresh-stop-toggle": (func: (flag: boolean) => void) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onInit?: ((flag: boolean) => any) | undefined;
+    "onRow-click"?: ((data: any) => any) | undefined;
+    "onRow-dbl-click"?: ((data: any) => any) | undefined;
+    onTabulator?: ((tabulator: any) => any) | undefined;
+    "onTable-rebuild"?: ((func: () => void) => any) | undefined;
+    "onTable-redraw"?: ((func: () => void) => any) | undefined;
+    "onTable-refresh"?: ((func: () => void) => any) | undefined;
+    "onTable-refresh-stop-toggle"?: ((func: (flag: boolean) => void) => any) | undefined;
+}>, {
+    option: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,69 +1,58 @@
-<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>
-
+<script setup>
+import { ref, computed, onMounted, watch } from "#imports";
+import { useElementVisibility } from "@vueuse/core";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../composables/use-pinia";
+const props = defineProps({
+  label: { type: [String, Object], required: true },
+  offset: { type: Number, required: false, default: 10 }
+});
+const emit = defineEmits(["ref"]);
+const hsMultiLang = useHsMultiLang(useHsPinia());
+const tx = hsMultiLang.tx;
+const targetScrollElm = ref(null);
+watch(targetScrollElm, (e) => () => {
+  if (!e) return;
+  emit("ref", e);
+});
+const targetVisibleElm = ref(null);
+const targetIsVisible = useElementVisibility(targetVisibleElm);
+const isMounted = ref(false);
+onMounted(() => {
+  setTimeout(() => {
+    isMounted.value = true;
+  }, 1e3);
+});
+const scroll = () => {
+  if (targetScrollElm.value === null) return;
+  targetScrollElm.value.scrollIntoView({ behavior: "smooth" });
+};
+const styleScrollTarget = computed(() => {
+  return `margin-top:-${props.offset}px;`;
+});
+const styleVisibleTarget = computed(() => {
+  return `margin-top:-${props.offset - 10}px;`;
+});
+</script>
+
+<template>
+  <div class="absolute">
+    <div ref="targetScrollElm" class="absolute top-0 pointer-events-none" :style="styleScrollTarget"></div>
+    <div ref="targetVisibleElm" class="absolute top-0 pointer-events-none" :style="styleVisibleTarget"></div>
+    <div class="view-name-display flex items-center justify-center" :class="{ isShow: !targetIsVisible && isMounted }">
+      <div class="view-name elevation-4 cursor-pointer bg-white" @click.stop="scroll()">
+        <div class="hover:bg-orange-700/10 min-h-full min-w-full px-2 py-1">
+          {{ tx(props.label).value }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .view-name-display {
   position: fixed;
-  top: 20px;
+  top: 4px;
   left: 0;
   right: 0;
   z-index: 1;
@@ -76,15 +65,11 @@ const scroll = () => {
 }
 .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>
+</style>

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

@@ -0,0 +1,14 @@
+import type { MultiLang } from '../../utils/multi-lang.js';
+interface Props {
+    label: MultiLang;
+    offset?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ref: (element: HTMLElement) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onRef?: ((element: HTMLElement) => any) | undefined;
+}>, {
+    offset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/test.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="">
+    <UAlert title="src" color="info" />
+    <div class="bg-green-400 py-8">FormTest bg-green-400 py-8</div>
+    <!-- <div class="bg-main1">{{ GetColorCode('main3') }}</div> -->
+    <!-- <div class="bg-red-500 1000:bg-green-400">red -> 1000 -> green</div> -->
+    <!-- <div class="bg-main2 @1000:bg-green-400">main2 -> @1000 -> green</div> -->
+  </div>
+</template>

package/dist/runtime/components/test.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/test.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeColor } from '../../runtime/utils/theme.js';
+export declare const useStore: import("pinia").StoreDefinition<"store", Pick<{
+    theme: import("vue").Ref<ThemeColor, ThemeColor>;
+}, "theme">, Pick<{
+    theme: import("vue").Ref<ThemeColor, ThemeColor>;
+}, never>, Pick<{
+    theme: import("vue").Ref<ThemeColor, ThemeColor>;
+}, never>>;

package/dist/runtime/composables/test.js

@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+export const useStore = defineStore(
+  "store",
+  () => {
+    const theme = ref("main1");
+    return { theme };
+  },
+  {
+    persist: true
+  }
+);

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

@@ -1,5 +1,5 @@
-import type { MultiLang } from "../utils/multi-lang.js";
-import { DialogItem, DialogResult, type DialogOption } from "../types/dialog.js";
+import type { MultiLang } from '../utils/multi-lang.js';
+import { DialogItem, DialogResult, type DialogOption } from '../types/dialog.js';
 interface State {
     state: {
         id: number;
@@ -10,24 +10,7 @@ interface State {
     };
 }
 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";
-    };
+    Themes: () => Record<import("../utils/theme.js").ThemeColor, import("../utils/theme.js").ThemeColor>;
     InitOption: () => () => DialogOption;
     Result: () => {
         readonly left: "left";

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

@@ -1,12 +1,8 @@
-import dayjs from "dayjs/esm/index";
 import { defineStore } from "pinia";
 import { GenerateUniqeKey } from "../utils/com.js";
 import { Theme } from "../utils/theme.js";
-import {
-  DialogItem,
-  InitDialogOption,
-  DialogResult
-} from "../types/dialog.js";
+import { dayjs } from "../utils/dayjs.js";
+import { DialogItem, InitDialogOption, DialogResult } from "../types/dialog.js";
 export const useHsDialog = defineStore("HsDialog", {
   state: () => {
     return {
@@ -38,9 +34,7 @@ export const useHsDialog = defineStore("HsDialog", {
         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-is-mobile.d.ts

@@ -1,7 +1,13 @@
 export declare const useHsIsMobile: import("pinia").StoreDefinition<"HsIsMobile", Pick<{
     isMobile: import("vue").Ref<boolean | null, boolean | null>;
-}, "isMobile">, Pick<{
+    init: () => void;
+    isIPhone: import("vue").Ref<boolean | null, boolean | null>;
+}, "isMobile" | "isIPhone">, Pick<{
     isMobile: import("vue").Ref<boolean | null, boolean | null>;
+    init: () => void;
+    isIPhone: import("vue").Ref<boolean | null, boolean | null>;
 }, never>, Pick<{
     isMobile: import("vue").Ref<boolean | null, boolean | null>;
-}, never>>;
+    init: () => void;
+    isIPhone: import("vue").Ref<boolean | null, boolean | null>;
+}, "init">>;