84 lines
1.5 KiB
Vue
84 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
:class="['chooser-element', subclass]"
|
|
:data-cy="cy"
|
|
@click="emit('select')"
|
|
>
|
|
<component
|
|
class="chooser-element__icon"
|
|
:is="realIcon"
|
|
/>
|
|
<div class="chooser-element__title">
|
|
{{ realTitle }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
interface Props {
|
|
type: string;
|
|
icon: string;
|
|
title: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
type: '',
|
|
});
|
|
|
|
const emit = defineEmits(['select']);
|
|
|
|
const defaultTitle = (type:string) => {
|
|
return type.replace(/^\w/, (c :string) => c.toUpperCase());
|
|
}
|
|
|
|
const defaultIcon = (type:string) => {
|
|
return `${type}-icon`;
|
|
}
|
|
|
|
const subclass =`chooser-element--${props.type}`;
|
|
const cy = `choose-${props.type}-widget`;
|
|
|
|
const realTitle = computed(() => {
|
|
return props.title || defaultTitle(props.type);
|
|
});
|
|
const realIcon = computed(() => {
|
|
return props.icon || defaultIcon(props.type);
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import formElementIcons from '@/components/ui/form-element-icons';
|
|
|
|
export default {
|
|
components: {
|
|
...formElementIcons,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.chooser-element {
|
|
cursor: pointer;
|
|
border: 1px solid $color-silver;
|
|
border-radius: 4px;
|
|
height: 105px;
|
|
width: 105px;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-rows: 1fr 45px;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-items: center;
|
|
|
|
&__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
align-self: end;
|
|
}
|
|
}
|
|
</style>
|