Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Label added for FileInput dropzone #304

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Label added for FileInput dropzone #304

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0ee8e66
feat: Label added for FileInput dropzone
Jul 24, 2024
78ac82d
chore: Refactor FwbFileInput component lint
Aug 2, 2024
08ca958
chore: Refactor FwbFileInput component lint
Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 8 additions & 36 deletions src/components/FwbFileInput/FwbFileInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,15 @@
<div v-if="!dropzone">
<label>
<span :class="labelClasses">{{ label }}</span>
<input
:class="fileInpClasses"
:multiple="multiple"
type="file"
:accept="accept"
@change="handleChange"
>
<input :class="fileInpClasses" :multiple="multiple" type="file" :accept="accept" @change="handleChange" />

Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

Disallow self-closing on HTML void elements (<input/>)

Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

':multiple' should be on a new line

Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

'type' should be on a new line

Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

':accept' should be on a new line

Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

'@change' should be on a new line
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Format the input element attributes.

The attributes of the <input> element should be on separate lines for better readability and to conform to the project's style guide.

- <input :class="fileInpClasses" :multiple="multiple" type="file" :accept="accept" @change="handleChange" />
+ <input 
+  :class="fileInpClasses" 
+  :multiple="multiple" 
+  type="file" 
+  :accept="accept" 
+  @change="handleChange" 
+ />
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<input :class="fileInpClasses" :multiple="multiple" type="file" :accept="accept" @change="handleChange" />
<input
:class="fileInpClasses"
:multiple="multiple"
type="file"
:accept="accept"
@change="handleChange"
/>
Tools
GitHub Check: lint (18.x)

[warning] 6-6:
Disallow self-closing on HTML void elements ()

[warning] 6-6:
':multiple' should be on a new line

[warning] 6-6:
'type' should be on a new line

[warning] 6-6:
':accept' should be on a new line

[warning] 6-6:
'@change' should be on a new line

</label>
<slot />
</div>
<div
v-else
class="flex items-center justify-center"
@change="handleChange"
@dragover="dragOverHandler"
@drop="dropFileHandler"
>
<div v-else class="flex flex-col items-start justify-center" @change="handleChange" @dragover="dragOverHandler" @drop="dropFileHandler">

Check warning on line 10 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

'class' should be on a new line

Check warning on line 10 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

'@change' should be on a new line

Check warning on line 10 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

'@dragover' should be on a new line

Check warning on line 10 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

'@drop' should be on a new line
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Format the div element attributes.

The attributes of the <div> element should be on separate lines for better readability and to conform to the project's style guide.

- <div v-else class="flex flex-col items-start justify-center" @change="handleChange" @dragover="dragOverHandler" @drop="dropFileHandler">
+ <div 
+  v-else 
+  class="flex flex-col items-start justify-center" 
+  @change="handleChange" 
+  @dragover="dragOverHandler" 
+  @drop="dropFileHandler"
+ >
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div v-else class="flex flex-col items-start justify-center" @change="handleChange" @dragover="dragOverHandler" @drop="dropFileHandler">
<div
v-else
class="flex flex-col items-start justify-center"
@change="handleChange"
@dragover="dragOverHandler"
@drop="dropFileHandler"
>
Tools
GitHub Check: lint (18.x)

[warning] 10-10:
'class' should be on a new line

[warning] 10-10:
'@change' should be on a new line

[warning] 10-10:
'@dragover' should be on a new line

[warning] 10-10:
'@drop' should be on a new line

<span v-if="label !== ''" :class="labelClasses">{{ label }}</span>

Check warning on line 11 in src/components/FwbFileInput/FwbFileInput.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

':class' should be on a new line
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Format the span element attribute.

The attribute of the <span> element should be on a separate line for better readability and to conform to the project's style guide.

- <span v-if="label !== ''" :class="labelClasses">{{ label }}</span>
+ <span 
+  v-if="label !== ''" 
+  :class="labelClasses"
+ >
+  {{ label }}
+ </span>
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span v-if="label !== ''" :class="labelClasses">{{ label }}</span>
<span
v-if="label !== ''"
:class="labelClasses"
>
{{ label }}
</span>
Tools
GitHub Check: lint (18.x)

[warning] 11-11:
':class' should be on a new line

<label :class="dropzoneLabelClasses">
<div :class="dropzoneWrapClasses">
<svg
aria-hidden="true"
class="w-8 h-8 text-gray-500 dark:text-gray-400"
fill="none"
viewBox="0 0 20 16"
xmlns="http://www.w3.org/2000/svg"
>
<svg aria-hidden="true" class="w-8 h-8 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
stroke-linecap="round"
Expand All @@ -46,12 +29,7 @@
</div>
<p v-else>File: {{ dropZoneText }}</p>
</div>
<input
:multiple="multiple"
type="file"
:accept="accept"
class="hidden"
>
<input :multiple="multiple" type="file" :accept="accept" class="hidden" />
</label>
</div>
</div>
Expand All @@ -67,8 +45,8 @@
label?: string
modelValue?: File | File[] | null
multiple?: boolean
size?: string,
accept?:string,
size?: string
accept?: string
}

const props = withDefaults(defineProps<FileInputProps>(), {
Expand Down Expand Up @@ -138,11 +116,5 @@
event.preventDefault()
}

const {
fileInpClasses,
labelClasses,
dropzoneLabelClasses,
dropzoneWrapClasses,
dropzoneTextClasses,
} = useFileInputClasses(props.size)
const { fileInpClasses, labelClasses, dropzoneLabelClasses, dropzoneWrapClasses, dropzoneTextClasses } = useFileInputClasses(props.size)
</script>
Loading