Skip to content

Commit

Permalink
Add append mode and detail demo of file input component (#459)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KabinKhandThakuri
KabinKhandThakuri authored Jan 17, 2025
1 parent 3991199 commit 18e711a
Show file tree
Hide file tree
Showing 5 changed files with 218 additions and 2 deletions.
5 changes: 5 additions & 0 deletions apps/demo/src/locales/en/form.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@
},
"label": {
"accept": "Accept the terms and conditions to proceed",
"append": "Append mode",
"appointmentDate": "Appointment date",
"appointmentTime": "Appointment time",
"arrivalDate": "Arrival date",
"assumptions": "Assumptions",
"availableDatetime": "Available datetime",
"basicInput": "Basic",
"bike": "Bike",
"buttonOptions": "Button options",
"car": "Car",
"checkbox": "Checkbox input",
"consequences": "Consequences",
Expand All @@ -73,6 +75,8 @@
"disableWeekDays": "Disable week days",
"disabledMultiSelect": "Disabled multiselect",
"disableSort": "Disable alphabetical sorting",
"dropzone": "Dropzone",
"dropzoneOptions": "Dropzone options",
"editableContent": "Editable content",
"email": "Email",
"expiresAfter": "Expires after",
Expand All @@ -97,6 +101,7 @@
"monthPicker": "Month picker",
"multiCalendars": "Multicalendar",
"multiCheckbox": "Multiple checkbox input",
"multiple": "Multiple files",
"multiSelect": "Multiselect",
"next": "Next",
"number": "Number",
Expand Down
5 changes: 5 additions & 0 deletions apps/demo/src/locales/fr/form.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,15 @@
},
"label": {
"accept": "Accept the terms and conditions to proceed",
"append": "Append mode",
"appointmentDate": "Appointment date[fr]",
"appointmentTime": "Appointment time[fr]",
"arrivalDate": "Arrival date[fr]",
"assumptions": "Assumptions",
"availableDatetime": "Available datetime[fr]",
"basicInput": "Basic[fr]",
"bike": "Bike",
"buttonOptions": "Button options",
"car": "Car",
"checkbox": "Checkbox input",
"consequences": "Consequences",
Expand All @@ -70,6 +72,8 @@
"disabled": "Disabled[fr]",
"disableWeekDays": "Disable week days[fr]",
"disableSort": "Disable alphabetical sorting",
"dropzone": "Dropzone",
"dropzoneOptions": "Dropzone options",
"editableContent": "Editable content",
"email": "Email[fr]",
"expiresAfter": "Expires after",
Expand All @@ -94,6 +98,7 @@
"monthPicker": "Month picker[fr]",
"multiCalendars": "Multicalendar[fr]",
"multiCheckbox": "Multiple checkbox input",
"multiple": "Multiple files",
"multiSelect": "Multiselect[fr]",
"next": "Next",
"number": "Number[fr]",
Expand Down
172 changes: 172 additions & 0 deletions apps/demo/src/views/Form/fileInput/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,178 @@
<!-- eslint-enable -->
</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>

<div class="section-content">
<FileInput input-method="dropzone" />

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;FileInput input-method="dropzone" /&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.dropzoneOptions") }}</h2>

<div class="section-content">
<FileInput
:dropzone-options="{
accept: ['image/jpeg', 'image/png'],
maxSize: 1000000,
minSize: 1000,
}"
enable-description
input-method="dropzone"
name="images"
show-error-message
/>

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;FileInput
:dropzone-options="{
accept: ['image/jpeg', 'image/png'],
maxSize: 1000000,
minSize: 1000,
}"
enable-description
input-method="dropzone"
name="images"
show-error-message
/&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.multiple") }}</h2>

<div class="section-content">
<FileInput
:dropzone-options="{
accept: ['image/jpeg', 'image/png'],
maxFiles: 5,
}"
enable-description
input-method="dropzone"
multiple
name="files"
show-error-message
/>

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;FileInput
:dropzone-options="{
accept: ['image/jpeg', 'image/png'],
maxFiles: 5,
}"
enable-description
input-method="dropzone"
multiple
name="files"
show-error-message
/&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.append") }}</h2>

<div class="section-content">
<FileInput
enable-description
input-method="dropzone"
mode="append"
multiple
name="files"
show-error-message
/>

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;FileInput
enable-description
input-method="dropzone"
mode="append"
multiple
name="files"
show-error-message
/&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { FileInput } from "@dzangolab/vue3-form";
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->
</div>
</section>
</FormPage>
</template>

Expand Down
2 changes: 1 addition & 1 deletion packages/vue-form/src/assets/css/fileInput.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
flex-direction: row;
gap: 0.5rem;
justify-content: space-between;
padding: 0.5rem 0rem;
padding: 0.9rem 0;
position: relative;
}

Expand Down
36 changes: 35 additions & 1 deletion packages/vue-form/src/components/File/FileInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,17 @@ const props = defineProps({
inputMethod: {
default: "button",
type: String,
validator: (value: string) => ["button", "dropzone"].includes(value),
},
label: {
default: undefined,
type: String,
},
mode: {
default: "update",
type: String,
validator: (value: string) => ["append", "update"].includes(value),
},
multiple: Boolean,
name: {
default: "file",
Expand All @@ -122,7 +128,35 @@ const onDrop = (
acceptFiles: FileExtended[],
rejectReasons: FileRejectReason[],
) => {
inputFiles.value = acceptFiles.length ? acceptFiles : [];
if (!props.multiple || props.mode === "update") {
inputFiles.value = acceptFiles.length ? acceptFiles : [];
} else {
const newFiles = [...(acceptFiles || []), ...inputFiles.value];
const uniqueFiles = newFiles.reduce(
(previousUniqueFiles: FileExtended[], currentFile) => {
const currentFileEntries = Object.entries(currentFile);
if (
previousUniqueFiles.find((existingFile: FileExtended) => {
const existingFileEntries = Object.entries(existingFile);
return existingFileEntries.every(
([key, value], index) =>
key === currentFileEntries[index][0] &&
value === currentFileEntries[index][1],
);
})
) {
return previousUniqueFiles;
} else {
return [...previousUniqueFiles, currentFile];
}
},
[],
);
inputFiles.value = uniqueFiles;
}
const firstError = rejectReasons[0]?.errors[0];
errorMessage.value =
Expand Down

0 comments on commit 18e711a

Please sign in to comment.