feat: add button options demo to file input

dzangolab · Jan 17, 2025 · b7efbc5 · b7efbc5
1 parent 3159a68
commit b7efbc5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git a/apps/demo/src/locales/en/form.json b/apps/demo/src/locales/en/form.json
@@ -52,6 +52,7 @@
     "availableDatetime": "Available datetime",
     "basicInput": "Basic",
     "bike": "Bike",
+    "buttonOptions": "Button options",
     "car": "Car",
     "checkbox": "Checkbox input",
     "consequences": "Consequences",

diff --git a/apps/demo/src/locales/fr/form.json b/apps/demo/src/locales/fr/form.json
@@ -49,6 +49,7 @@
     "availableDatetime": "Available datetime[fr]",
     "basicInput": "Basic[fr]",
     "bike": "Bike",
+    "buttonOptions": "Button options",
     "car": "Car",
     "checkbox": "Checkbox input",
     "consequences": "Consequences",

diff --git a/apps/demo/src/views/Form/fileInput/Index.vue b/apps/demo/src/views/Form/fileInput/Index.vue
@@ -26,6 +26,44 @@
       </div>
     </section>
 
+    <section>
+      <h2>{{ $t("form.label.buttonOptions") }}</h2>
+
+      <div class="section-content">
+        <FileInput
+          button-label="Choose"
+          button-label-selected="Chose"
+          :button-props="{
+            iconLeft: 'pi pi-file-arrow-up',
+            severity: 'success',
+            size: 'small',
+            variant: 'filled',
+          }"
+        />
+
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;FileInput
+              button-label="Choose"
+              button-label-selected="Chose"
+              :button-props="{
+                iconLeft: 'pi pi-file-arrow-up',
+                severity: 'success',
+                size: 'small',
+                variant: 'filled',
+              }"
+            /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { FileInput } from "@dzangolab/vue3-form";
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+      </div>
+    </section>
+
     <section>
       <h2>{{ $t("form.label.dropzone") }}</h2>