feat(BaseInputFile): add configurable i18n property

shuriken-ui · Mar 30, 2024 · 320d17e · 320d17e
1 parent 7ac7391
commit 320d17e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 13 deletions.
diff --git a/.playground/pages/tests/form/input-file.vue b/.playground/pages/tests/form/input-file.vue
@@ -21,13 +21,15 @@ const fifth = ref<FileList | null>(null)
           <BaseInputFile
             v-model="first"
             rounded="none"
+            placeholder="Choose file"
             label="Rounded: none"
             color-focus
           />
           <BaseInputFile
             v-model="second"
             rounded="sm"
             label="Rounded: sm"
+            icon="heroicons:document-text"
             color-focus
           />
           <BaseInputFile

diff --git a/app.config.ts b/app.config.ts
@@ -177,6 +177,11 @@ export default {
       contrast: 'default',
       rounded: 'sm',
       size: 'md',
+      i18n: {
+        empty: 'No file chosen',
+        invalid: 'Invalid file selected',
+        multiple: '{count} files selected',
+      },
     },
     BaseInputFileHeadless: {},
     BaseInputNumber: {

diff --git a/components/form/BaseInputFile.vue b/components/form/BaseInputFile.vue
@@ -68,6 +68,17 @@ const props = withDefaults(
      */
     size?: 'sm' | 'md' | 'lg'
 
+    /**
+     * Translation strings.
+     *
+     * @default { empty: 'No file chosen', invalid: 'Invalid file selected', multiple: '{count} files selected'}
+     */
+    i18n?: {
+      empty: string
+      invalid: string
+      multiple: string
+    }
+
     /**
      * Optional CSS classes to apply to the wrapper, label, input, text, error, and icon elements.
      */
@@ -107,20 +118,13 @@ const props = withDefaults(
     id: undefined,
     rounded: undefined,
     size: undefined,
+    i18n: undefined,
     contrast: undefined,
     label: undefined,
     icon: undefined,
-    placeholder: 'Choose file',
+    placeholder: undefined,
     error: false,
-    textValue: (fileList?: FileList | null) => {
-      if (!fileList?.item?.length) {
-        return 'No file chosen'
-      }
-
-      return fileList?.item.length === 1
-        ? fileList.item(0)?.name ?? 'Invalid file selected'
-        : `${fileList?.item?.length ?? 0} files selected`
-    },
+    textValue: undefined,
     classes: () => ({}),
   },
 )
@@ -130,10 +134,24 @@ const [modelValue] = defineModel<FileList | null>()
 const contrast = useNuiDefaultProperty(props, 'BaseInputFile', 'contrast')
 const rounded = useNuiDefaultProperty(props, 'BaseInputFile', 'rounded')
 const size = useNuiDefaultProperty(props, 'BaseInputFile', 'size')
+const i18n = useNuiDefaultProperty(props, 'BaseInputFile', 'i18n')
 
 const inputRef = ref<HTMLInputElement>()
 const id = useNinjaId(() => props.id)
 
+const defaultTextValue = (fileList?: FileList | null) => {
+  if (!fileList?.item?.length) {
+    return i18n.value.empty
+  }
+
+  return fileList?.item.length === 1
+    ? fileList.item(0)?.name ?? i18n.value.invalid
+    : i18n.value.multiple.replaceAll(
+        '{count}',
+        String(fileList?.item?.length ?? 0),
+      )
+}
+
 const radiuses = {
   none: '',
   sm: 'nui-input-rounded-sm',
@@ -154,7 +172,11 @@ const contrasts = {
 }
 
 const textValue = computed(() => {
-  return props.textValue?.(modelValue.value)
+  if (props.textValue) {
+    return props.textValue(modelValue.value)
+  }
+
+  return defaultTextValue(modelValue.value)
 })
 
 defineExpose({
@@ -199,8 +221,14 @@ defineExpose({
         :for="id"
         :class="[props.classes?.input]"
       >
-        <div class="nui-input-file-addon" :class="props.classes?.text">
-          <span class="text-xs">{{ props.placeholder }}</span>
+        <div
+          v-if="props.placeholder || props.icon || 'icon' in $slots"
+          class="nui-input-file-addon"
+          :class="props.classes?.text"
+        >
+          <span v-if="props.placeholder" class="text-xs">
+            {{ props.placeholder }}
+          </span>
           <slot name="icon">
             <Icon
               v-if="props.icon"

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -636,6 +636,16 @@ export default defineNuxtSchema({
          * @type {'sm' | 'md' | 'lg'}
          */
         size: 'md',
+        /**
+         * The size of the input.
+         *
+         * @type {{ empty: string; invalid: string; multiple: string }}
+         */
+        i18n: {
+          empty: 'No file chosen',
+          invalid: 'Invalid file selected',
+          multiple: '{count} files selected',
+        },
       },
       BaseInputFileHeadless: {},
       BaseInputNumber: {