feat: use BaseButton where easily possible
This replaces links with BaseButton components. BaseButton will use `<button type="button">` inside for this case. This improves accessibility a lot. Also we might be able to remove the `.stop` modifiers in some places because AFAIK the button element stops propagation by default.
This commit is contained in:
Dominik Pschenitschni
committed by
Gitea
Gitea
parent
9e1ec72739
commit
3b9bc5b2f8
@ -1,18 +1,16 @@
|
||||
<template>
|
||||
<div class="datepicker" :class="{'disabled': disabled}">
|
||||
<a @click.stop="toggleDatePopup" class="show">
|
||||
<template v-if="date === null">
|
||||
{{ chooseDateLabel }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatDateShort(date) }}
|
||||
</template>
|
||||
</a>
|
||||
<BaseButton @click.stop="toggleDatePopup" class="show">
|
||||
{{ date === null ? chooseDateLabel : formatDateShort(date) }}
|
||||
</BaseButton>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
|
||||
|
||||
<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
|
||||
<BaseButton
|
||||
v-if="(new Date()).getHours() < 21"
|
||||
@click.stop="setDate('today')"
|
||||
>
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'calendar-alt']"/>
|
||||
</span>
|
||||
@ -24,8 +22,8 @@
|
||||
{{ getWeekdayFromStringInterval('today') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('tomorrow')">
|
||||
</BaseButton>
|
||||
<BaseButton @click.stop="() => setDate('tomorrow')">
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'sun']"/>
|
||||
</span>
|
||||
@ -37,8 +35,8 @@
|
||||
{{ getWeekdayFromStringInterval('tomorrow') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextMonday')">
|
||||
</BaseButton>
|
||||
<BaseButton @click.stop="() => setDate('nextMonday')">
|
||||
<span class="icon">
|
||||
<icon icon="coffee"/>
|
||||
</span>
|
||||
@ -50,8 +48,8 @@
|
||||
{{ getWeekdayFromStringInterval('nextMonday') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('thisWeekend')">
|
||||
</BaseButton>
|
||||
<BaseButton @click.stop="() => setDate('thisWeekend')">
|
||||
<span class="icon">
|
||||
<icon icon="cocktail"/>
|
||||
</span>
|
||||
@ -63,8 +61,8 @@
|
||||
{{ getWeekdayFromStringInterval('thisWeekend') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('laterThisWeek')">
|
||||
</BaseButton>
|
||||
<BaseButton @click.stop="() => setDate('laterThisWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="chess-knight"/>
|
||||
</span>
|
||||
@ -76,8 +74,8 @@
|
||||
{{ getWeekdayFromStringInterval('laterThisWeek') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextWeek')">
|
||||
</BaseButton>
|
||||
<BaseButton @click.stop="() => setDate('nextWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="forward"/>
|
||||
</span>
|
||||
@ -89,7 +87,7 @@
|
||||
{{ getWeekdayFromStringInterval('nextWeek') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</BaseButton>
|
||||
|
||||
<flat-pickr
|
||||
:config="flatPickerConfig"
|
||||
@ -117,6 +115,8 @@ import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
import {i18n} from '@/i18n'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
import {format} from 'date-fns'
|
||||
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
|
||||
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
|
||||
@ -134,6 +134,7 @@ export default defineComponent({
|
||||
},
|
||||
components: {
|
||||
flatPickr,
|
||||
BaseButton,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
|
||||
@ -16,23 +16,23 @@
|
||||
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
|
||||
{{ emptyText }}
|
||||
<template v-if="isEditEnabled">
|
||||
<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
|
||||
<BaseButton @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</BaseButton>.
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<ul class="actions d-print-none" v-if="bottomActions.length > 0">
|
||||
<li v-if="isEditEnabled && !showPreviewText && showSave">
|
||||
<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
||||
<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
|
||||
<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
|
||||
<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
|
||||
</li>
|
||||
<li v-for="(action, k) in bottomActions" :key="k">
|
||||
<a @click="action.action">{{ action.title }}</a>
|
||||
<BaseButton @click="action.action">{{ action.title }}</BaseButton>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-else-if="isEditEnabled && showSave">
|
||||
<ul v-if="showEditButton" class="actions d-print-none">
|
||||
<li>
|
||||
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
||||
<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
|
||||
</li>
|
||||
</ul>
|
||||
<x-button
|
||||
@ -62,10 +62,13 @@ import AttachmentService from '../../services/attachment'
|
||||
import {findCheckboxesInText} from '../../helpers/checklistFromText'
|
||||
import {createRandomID} from '@/helpers/randomId'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'editor',
|
||||
components: {
|
||||
VueEasymde,
|
||||
BaseButton,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<slot name="tag" :item="item">
|
||||
<span :key="`item${key}`" class="tag ml-2 mt-2">
|
||||
{{ label !== '' ? item[label] : item }}
|
||||
<a @click="() => remove(item)" class="delete is-small"></a>
|
||||
<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
|
||||
</span>
|
||||
</slot>
|
||||
</template>
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
<transition name="fade">
|
||||
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
|
||||
<button
|
||||
<BaseButton
|
||||
class="is-fullwidth"
|
||||
v-for="(data, key) in filteredSearchResults"
|
||||
:key="key"
|
||||
@ -54,9 +54,9 @@
|
||||
<span class="hint-text">
|
||||
{{ selectPlaceholder }}
|
||||
</span>
|
||||
</button>
|
||||
</BaseButton>
|
||||
|
||||
<button
|
||||
<BaseButton
|
||||
v-if="creatableAvailable"
|
||||
class="is-fullwidth"
|
||||
:ref="`result-${filteredSearchResults.length}`"
|
||||
@ -75,7 +75,7 @@
|
||||
<span class="hint-text">
|
||||
{{ createPlaceholder }}
|
||||
</span>
|
||||
</button>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@ -87,8 +87,13 @@ import {defineComponent} from 'vue'
|
||||
import {i18n} from '@/i18n'
|
||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'multiselect',
|
||||
components: {
|
||||
BaseButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
|
||||
Reference in New Issue
Block a user