-
Notifications
You must be signed in to change notification settings - Fork 120
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.
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
feat: Label added for FileInput dropzone #304
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -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 GitHub Actions / lint (18.x)
Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue GitHub Actions / lint (18.x)
Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue GitHub Actions / lint (18.x)
Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue GitHub Actions / lint (18.x)
Check warning on line 6 in src/components/FwbFileInput/FwbFileInput.vue GitHub Actions / lint (18.x)
|
||||||||||||||||||
</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 GitHub Actions / lint (18.x)
Check warning on line 10 in src/components/FwbFileInput/FwbFileInput.vue GitHub Actions / lint (18.x)
Check warning on line 10 in src/components/FwbFileInput/FwbFileInput.vue GitHub Actions / lint (18.x)
Check warning on line 10 in src/components/FwbFileInput/FwbFileInput.vue GitHub Actions / lint (18.x)
|
||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Format the div element attributes. The attributes of the - <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
Suggested change
|
||||||||||||||||||
<span v-if="label !== ''" :class="labelClasses">{{ label }}</span> | ||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Format the span element attribute. The attribute of the - <span v-if="label !== ''" :class="labelClasses">{{ label }}</span>
+ <span
+ v-if="label !== ''"
+ :class="labelClasses"
+ >
+ {{ label }}
+ </span> Committable suggestion
Suggested change
ToolsGitHub Check: lint (18.x)
|
||||||||||||||||||
<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" | ||||||||||||||||||
|
@@ -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> | ||||||||||||||||||
|
@@ -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>(), { | ||||||||||||||||||
|
@@ -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> |
There was a problem hiding this comment.
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.Committable suggestion
Tools
GitHub Check: lint (18.x)