nuxt-hs-ui 2.6.0 → 2.8.0

package/dist/module.json

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

package/dist/runtime/components/form/check-box.vue

@@ -12,9 +12,11 @@ import { twMerge } from "tailwind-merge";
 import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
 // [ utils ]
 import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+import type { MultiLang } from "../../utils/multi-lang";
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
 import { useHsToast } from "../../composables/use-hs-toast";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
 // [ Components ]
 import SelectImgIcon from "./select-img-icon.vue";
 // ----------------------------------------------------------------------------
@@ -41,7 +43,7 @@ type Props = {
   disabled?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -50,7 +52,7 @@ type Props = {
   // ----------------------------------------------------------------------------
   uiText?: {
     validError: {
-      title: string;
+      title: MultiLang;
     };
   };
 };
@@ -80,7 +82,7 @@ const props = withDefaults(defineProps<Props>(), {
   uiText: () => {
     return {
       validError: {
-        title: "入力値の警告",
+        title: { ja: "入力値の警告", en: "Input Value Warning" },
       },
     };
   },
@@ -101,6 +103,10 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
+
+const multiLang = useHsMultiLang();
+const tx = multiLang.tx;
+// ----------------------------------------------------------------------------
 // [ getCurrentInstance ]
 const uid = useId();
 // ----------------------------------------------------------------------------
@@ -292,7 +298,7 @@ const labelClass = computed(() => {
         :class-img-tag="props.classImgTag"
       />
       <div class="flex-1 min-w-[0] whitespace-pre-wrap break-words">
-        {{ label }}
+        {{ tx(label) }}
         <slot />
       </div>
       <span

package/dist/runtime/components/form/check-list.vue

@@ -31,7 +31,7 @@ type Props = {
   // Input 種類別
   list: SelectItem[] | readonly SelectItem[];
   image?: boolean;
-  nullText?: string;
+  nullText?: MultiLang;
   classRow?: ClassType;
   classCol?: ClassType;
   classItem?: ClassType;
@@ -56,10 +56,10 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -72,7 +72,7 @@ const props = withDefaults(defineProps<Props>(), {
   // Input 種類別
   order: false,
   image: false,
-  nullText: "選択してください",
+  nullText: () => ({ ja: "選択してください", en: "" }),
   nullable: true,
   classRow: "",
   classCol: "",
@@ -102,7 +102,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------
@@ -314,7 +314,7 @@ const itemClass = computed(() => {
     :readonly="props.readonly"
     :label="props.label"
     :require="props.require"
-    :require-text="props.requireText"
+    :require-text="tx(props.requireText).value"
     :warn="props.warn"
     :warn-time-out="props.warnTimeOut"
     :size="props.size"

package/dist/runtime/components/form/datepicker.vue

@@ -29,6 +29,7 @@ import {
 import { Sleep } from "../../utils/com";
 import type { ClassType } from "../../utils/class-style";
 import { GetTimeShiftValue, Dayjs, DayjsInit } from "../../utils/dayjs";
+import type { MultiLang } from "../../utils/multi-lang";
 // [ utils ]
 
 import { ja } from "../../types/flatpickr/ja";
@@ -59,6 +60,7 @@ const hsFocus = useHsFocus();
 const Toast = useHsToast();
 const multiLang = useHsMultiLang();
 const hsMisc = useHsMisc();
+const tx = multiLang.tx;
 // ----------------------------------------------------------------------------
 // [ vueuse ]
 const isMounted = useMounted();
@@ -105,10 +107,10 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -117,8 +119,8 @@ type Props = {
   // ----------------------------------------------------------------------------
   uiText?: {
     error: {
-      inputRangeTitle: string;
-      inputRangeMessage: string;
+      inputRangeTitle: MultiLang;
+      inputRangeMessage: MultiLang;
     };
   };
 };
@@ -158,7 +160,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "Required" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------
@@ -168,8 +170,11 @@ const props = withDefaults(defineProps<Props>(), {
   uiText: () => {
     return {
       error: {
-        inputRangeTitle: "入力値エラー",
-        inputRangeMessage: "入力範囲外です",
+        inputRangeTitle: { ja: "入力値の警告", en: "Input Value Warning" },
+        inputRangeMessage: {
+          ja: "入力範囲外です",
+          en: "Input is out of range",
+        },
       },
     };
   },
@@ -751,7 +756,7 @@ const computedIsFocusOpenBtn = computed(() => {
     :readonly="props.readonly"
     :label="props.label"
     :require="props.require"
-    :require-text="props.requireText"
+    :require-text="tx(props.requireText).value"
     :warn="props.warn"
     :warn-time-out="props.warnTimeOut"
     :size="props.size"

package/dist/runtime/components/form/input-frame.vue

@@ -12,8 +12,10 @@ import { twMerge } from "tailwind-merge";
 import { computed, useSlots } from "#imports";
 // [ utils ]
 import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+import type { MultiLang } from "../../utils/multi-lang";
 // [ composables ]
 import { useHsToast } from "../../composables/use-hs-toast";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
 // ----------------------------------------------------------------------------
 // [ Props ]
 type Props = {
@@ -34,10 +36,10 @@ type Props = {
   // ----------------------------------------------------------------------------
 
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -64,7 +66,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "Required" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------
@@ -82,6 +84,8 @@ const emit = defineEmits<Emits>();
 
 const toast = useHsToast();
 
+const multiLang = useHsMultiLang();
+const tx = multiLang.tx;
 // ----------------------------------------------------------------------------
 const baseClass = computed(() => {
   return [
@@ -161,9 +165,11 @@ const iconDisabled = computed(() => {
   return false;
 });
 // ----------------------------------------------------------------------------
+const label = computed(() => tx(props.label).value);
+// ----------------------------------------------------------------------------
 const slots = useSlots();
 const hasHeader = computed(() => {
-  if (props.label.length !== 0) return true;
+  if (label.value.length !== 0) return true;
   if (props.require && !props.readonly) return true;
   // if (slots.label) return true;
   if (slots["label-prepend"]) return true;
@@ -191,11 +197,10 @@ const hasHeader = computed(() => {
       >
         <div
           class="grow-0 shrink-1 truncate leading-[1.5em]"
-          :title="props.label"
+          :title="label"
           @click.stop="emit('header-label-click')"
         >
-          <slot name="label-prepend" />{{ props.label
-          }}<slot name="label-append" />
+          <slot name="label-prepend" />{{ label }}<slot name="label-append" />
         </div>
         <div class="flex-1"></div>
         <div class="flex-none flex gap-2">
@@ -205,7 +210,7 @@ const hasHeader = computed(() => {
             :class="headerIconClass"
             class="text-white bg-error"
           >
-            <span data-type="require">{{ props.requireText }}</span>
+            <span data-type="require">{{ tx(props.requireText) }}</span>
           </div>
         </div>
       </div>

package/dist/runtime/components/form/radio.vue

@@ -14,6 +14,8 @@ import { reactive, ref, watch, computed, useId } from "#imports";
 import { type ClassType, ClassTypeToString } from "../../utils/class-style";
 import type { SelectItem } from "../../utils/select-item";
 import { useDisplayList, type DisplaySelectItem } from "../../utils/select";
+import type { MultiLang } from "../../utils/multi-lang";
+
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
 import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
@@ -35,7 +37,7 @@ type Props = {
   order?: boolean;
   image?: boolean;
   loading?: boolean;
-  nullText?: string;
+  nullText?: MultiLang;
   classCol?: ClassType;
   classRow?: ClassType;
   classImg?: ClassType;
@@ -62,10 +64,10 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -79,7 +81,7 @@ const props = withDefaults(defineProps<Props>(), {
   order: false,
   image: false,
   loading: false,
-  nullText: "選択してください",
+  nullText: () => ({ ja: "選択してください", en: "Select..." }),
   nullable: false,
   classCol: "",
   classRow: "",
@@ -108,7 +110,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "Required" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------
@@ -211,7 +213,7 @@ const displayList = computed<SelectItemShow[]>(() => {
     unKnownSelected: unKnownSelected.value,
     isShowHidden: isShowHidden.value,
     require: props.require || !props.nullable,
-    nullText: props.nullText,
+    nullText: tx(props.nullText).value,
   }).map((row, index) => {
     return {
       ...row,
@@ -391,7 +393,7 @@ const inputClass = computed(() => {
     :readonly="props.readonly"
     :label="props.label"
     :require="props.require"
-    :require-text="props.requireText"
+    :require-text="tx(props.requireText).value"
     :warn="props.warn"
     :warn-time-out="props.warnTimeOut"
     :size="props.size"
@@ -455,7 +457,7 @@ const inputClass = computed(() => {
                 :class-img="props.classImg"
                 :class-img-tag="props.classImgTag"
               />
-              <div class="radio-text truncate">{{ nullText }}</div>
+              <div class="radio-text truncate">{{ tx(nullText) }}</div>
             </div>
           </div>
         </div>

package/dist/runtime/components/form/select.vue

@@ -13,6 +13,7 @@ import { reactive, ref, watch, computed, useId } from "#imports";
 import type { ClassType } from "../../utils/class-style";
 import type { SelectItem } from "../../utils/select-item";
 import { useDisplayList, type DisplaySelectItem } from "../../utils/select";
+import type { MultiLang } from "../../utils/multi-lang";
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
 import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
@@ -34,7 +35,7 @@ type Props = {
   list: SelectItem<IdType>[];
   order?: boolean;
   loading?: boolean;
-  nullText?: string;
+  nullText?: MultiLang;
   image?: boolean;
   classImg?: ClassType;
   classImgTag?: ClassType;
@@ -60,10 +61,10 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -76,7 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
   // Input 種類別
   order: false,
   loading: false,
-  nullText: "選択してください",
+  nullText: () => ({ ja: "選択してください", en: "Select..." }),
   nullable: false,
   image: false,
   classImg: "",
@@ -104,7 +105,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "Required" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------
@@ -200,7 +201,7 @@ const displayList = computed(() => {
     unKnownSelected: unKnownSelected.value,
     isShowHidden: isShowHidden.value,
     require: props.require || !props.nullable,
-    nullText: props.nullText,
+    nullText: tx(props.nullText).value,
   });
 });
 // ----------------------------------------------------------------------------
@@ -290,7 +291,7 @@ const selectClose = () => {
     :readonly="props.readonly"
     :label="props.label"
     :require="props.require"
-    :require-text="props.requireText"
+    :require-text="tx(props.requireText).value"
     :warn="props.warn"
     :warn-time-out="props.warnTimeOut"
     :size="props.size"
@@ -309,7 +310,7 @@ const selectClose = () => {
       class="absolute inset-0 flex items-center px-1 pointer-events-none text-[0.9em]"
       :class="[computedActivate ? 'opacity-30' : '']"
     >
-      {{ props.nullText }}
+      {{ tx(props.nullText) }}
     </div>
     <v-select
       ref="inputElement"

package/dist/runtime/components/form/text-box.vue

@@ -14,6 +14,7 @@ import { reactive, ref, watch, computed, nextTick, useId } from "#imports";
 
 // [ utils ]
 import type { ClassType } from "../../utils/class-style";
+import type { MultiLang } from "../../utils/multi-lang";
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
 // [ Components ]
@@ -62,10 +63,10 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -105,7 +106,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "Required" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------

package/dist/runtime/components/form/textarea.vue

@@ -12,9 +12,11 @@ import { twMerge } from "tailwind-merge";
 import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
 // [ utils ]
 import type { ClassType } from "../../utils/class-style";
+import type { MultiLang } from "../../utils/multi-lang";
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
 import { useHsMisc } from "../../composables/use-hs-misc";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
 // [ Components ]
 import InputFrame from "./input-frame.vue";
 // ----------------------------------------------------------------------------
@@ -49,10 +51,10 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -60,7 +62,7 @@ type Props = {
   size?: "s" | "m" | "l";
   // ----------------------------------------------------------------------------
   uiText?: {
-    rowsUnit: string;
+    rowsUnit: MultiLang;
   };
 };
 const props = withDefaults(defineProps<Props>(), {
@@ -92,17 +94,16 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "Required" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------
   // 設定
   size: "m",
-
   // ----------------------------------------------------------------------------
   uiText: () => {
     return {
-      rowsUnit: "行",
+      rowsUnit: { ja: "行", en: "Rows" },
     };
   },
 });
@@ -122,7 +123,12 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
+
+const multiLang = useHsMultiLang();
+const tx = multiLang.tx;
+
 // [ getCurrentInstance ]
+
 const uid = useId();
 // ----------------------------------------------------------------------------
 
@@ -372,7 +378,7 @@ const textAreaClass = computed(() => {
       </div>
       <div v-if="props.maxRows !== 0" :class="[defaultClass, rowLabelClass]">
         {{ state.value.split("\n").length }} / {{ props.maxRows }}
-        {{ props.uiText.rowsUnit }}
+        {{ tx(props.uiText.rowsUnit) }}
       </div>
     </template>
     <div

package/dist/runtime/components/form/value-box.vue

@@ -22,10 +22,12 @@ import {
 import type { ClassType } from "../../utils/class-style";
 import { InsertComma } from "../../utils/number";
 import { FloatNullable } from "../../utils/float";
+import type { MultiLang } from "../../utils/multi-lang";
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
 import { useHsToast } from "../../composables/use-hs-toast";
 import { useHsMisc } from "../../composables/use-hs-misc";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
 // [ Components ]
 import InputFrame from "./input-frame.vue";
 // ----------------------------------------------------------------------------
@@ -35,6 +37,9 @@ import InputFrame from "./input-frame.vue";
 const hsFocus = useHsFocus();
 const hsMisc = useHsMisc();
 const Toast = useHsToast();
+const multiLang = useHsMultiLang();
+const gt = multiLang.gt;
+
 // ----------------------------------------------------------------------------
 // [ Props ]
 type Props = {
@@ -70,10 +75,10 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
-  requireText?: string;
+  requireText?: MultiLang;
   warn?: string;
   warnTimeOut?: number;
   // ----------------------------------------------------------------------------
@@ -82,10 +87,10 @@ type Props = {
   // ----------------------------------------------------------------------------
   uiText?: {
     validError: {
-      title: string;
-      nullValue: string;
-      minValue: string;
-      maxValue: string;
+      title: MultiLang;
+      nullValue: MultiLang;
+      minValue: MultiLang;
+      maxValue: MultiLang;
     };
   };
 };
@@ -125,7 +130,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: "",
   // 表示-副情報
   require: false,
-  requireText: "必須",
+  requireText: () => ({ ja: "必須", en: "Required" }),
   warn: "",
   warnTimeOut: 3000,
   // ----------------------------------------------------------------------------
@@ -135,10 +140,19 @@ const props = withDefaults(defineProps<Props>(), {
   uiText: () => {
     return {
       validError: {
-        title: "入力値の警告",
-        nullValue: "数値以外は許可されていません。",
-        minValue: "[{value}]以下の数値は入力できません",
-        maxValue: "[{value}]以上の数値は入力できません",
+        title: { ja: "入力値の警告", en: "Input Value Warning" },
+        nullValue: {
+          ja: "数値以外は許可されていません。",
+          en: "Non-numeric values are not allowed.",
+        },
+        minValue: {
+          ja: "[{value}]以下の数値は入力できません",
+          en: "You cannot enter a number below {value}.",
+        },
+        maxValue: {
+          ja: "[{value}]以上の数値は入力できません",
+          en: "You cannot enter a number greater than {value}.",
+        },
       },
     };
   },
@@ -211,7 +225,7 @@ const validCheck = (
       return {
         result: false,
         value: 0,
-        message: props.uiText.validError.nullValue,
+        message: gt(props.uiText.validError.nullValue),
       };
     } else {
       return { result: true, value: null, message: "" };
@@ -221,7 +235,7 @@ const validCheck = (
     return {
       result: false,
       value: props.min,
-      message: props.uiText.validError.minValue.replace(
+      message: gt(props.uiText.validError.minValue).replace(
         /\{value\}/g,
         String(props.min)
       ),
@@ -231,7 +245,7 @@ const validCheck = (
     return {
       result: false,
       value: props.max,
-      message: props.uiText.validError.maxValue.replace(
+      message: gt(props.uiText.validError.maxValue).replace(
         /\{value\}/g,
         String(props.min)
       ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-hs-ui",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "My new Nuxt module",
   "repository": "https://github.com/hare-systems-ryo/nuxt-hs-ui",
   "license": "MIT",