nuxt-hs-ui 2.7.0 → 2.8.1

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "2.7.0",
+  "version": "2.8.1",
   "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

@@ -56,7 +56,7 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;

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

@@ -107,7 +107,7 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;
@@ -119,8 +119,8 @@ type Props = {
   // ----------------------------------------------------------------------------
   uiText?: {
     error: {
-      inputRangeTitle: string;
-      inputRangeMessage: string;
+      inputRangeTitle: MultiLang;
+      inputRangeMessage: MultiLang;
     };
   };
 };
@@ -170,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",
+        },
       },
     };
   },

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

@@ -36,7 +36,7 @@ type Props = {
   // ----------------------------------------------------------------------------
 
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;
@@ -165,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;
@@ -195,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">

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

@@ -64,7 +64,7 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;

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

@@ -61,7 +61,7 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;

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

@@ -63,7 +63,7 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;

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

@@ -16,6 +16,7 @@ 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";
 // ----------------------------------------------------------------------------
@@ -50,7 +51,7 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;
@@ -61,7 +62,7 @@ type Props = {
   size?: "s" | "m" | "l";
   // ----------------------------------------------------------------------------
   uiText?: {
-    rowsUnit: string;
+    rowsUnit: MultiLang;
   };
 };
 const props = withDefaults(defineProps<Props>(), {
@@ -99,11 +100,10 @@ const props = withDefaults(defineProps<Props>(), {
   // ----------------------------------------------------------------------------
   // 設定
   size: "m",
-
   // ----------------------------------------------------------------------------
   uiText: () => {
     return {
-      rowsUnit: "行",
+      rowsUnit: { ja: "行", en: "Rows" },
     };
   },
 });
@@ -123,7 +123,12 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
+
+const multiLang = useHsMultiLang();
+const tx = multiLang.tx;
+
 // [ getCurrentInstance ]
+
 const uid = useId();
 // ----------------------------------------------------------------------------
 
@@ -373,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

@@ -75,7 +75,7 @@ type Props = {
   readonly?: boolean;
   // ----------------------------------------------------------------------------
   // 表示
-  label?: string;
+  label?: MultiLang;
   // 表示-副情報
   require?: boolean;
   requireText?: MultiLang;

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

@@ -47,7 +47,7 @@ const classStyleUnlink = computed(() => {
       theme="back"
       variant="body"
     >
-      <div class="flex flex-wrap gap-[2px] sm:gap-[4px]">
+      <div class="flex flex-wrap gap-[2px] sm:gap-[4px] max-w-full">
         <template v-for="(item, index) in props.links" :key="index">
           <div class="truncate min-w-0 w-full sm:w-auto">
             <NuxtLink

package/package.json

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