bf7fb0732c
- Bump all ESLint dependencies related to TypeScript to their latest version. This was made possible by the resolution of compatibility issues with `@vue/eslint-config-airbnb-with-typescript`. See vuejs/eslint-config-airbnb#58 for details. - Refactor code to comply with the latest linting configuration. - Improve documentation in the ESLint configuration file to better describe the functionality and limitations of `@vue/typescript/recommended`. See vuejs/eslint-config-typescript#67 for details. - Document functionality and limitation of `@vue/typescript/recommended` more clearly in ESLint configuration file.
74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<!-- Use `button` instead of DIV as it is semantically correct and accessibility best-practice -->
|
|
<button
|
|
v-non-collapsing
|
|
type="button"
|
|
class="flat-button"
|
|
:class="{
|
|
disabled,
|
|
}"
|
|
@click="onClicked"
|
|
>
|
|
<AppIcon v-if="icon" :icon="icon" />
|
|
<span v-if="label">{{ label }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
|
|
import { IconName } from '@/presentation/components/Shared/Icon/IconName';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
|
|
export default defineComponent({
|
|
components: { AppIcon },
|
|
directives: { NonCollapsing },
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: undefined,
|
|
required: false,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
icon: {
|
|
type: String as PropType<IconName | undefined>,
|
|
default: undefined,
|
|
required: false,
|
|
},
|
|
},
|
|
emits: [
|
|
'click',
|
|
],
|
|
setup(props, { emit }) {
|
|
function onClicked() {
|
|
if (props.disabled) {
|
|
return;
|
|
}
|
|
emit('click');
|
|
}
|
|
return { onClicked };
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.flat-button {
|
|
display: inline-flex;
|
|
gap: 0.5em;
|
|
font-family: $font-normal;
|
|
&.disabled {
|
|
@include flat-button($disabled: true);
|
|
}
|
|
&:not(.disabled) {
|
|
@include flat-button($disabled: false);
|
|
}
|
|
}
|
|
</style>
|