80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { Icon } from '@iconify/vue';
|
|
import { onMounted } from 'vue';
|
|
const props = defineProps<{
|
|
icon: string;
|
|
text: string;
|
|
iconColor: string;
|
|
bgColor: string;
|
|
changeColor?: boolean;
|
|
index?: number;
|
|
}>();
|
|
|
|
const _self = ref<InstanceType<typeof HTMLDivElement>>();
|
|
|
|
onMounted(() => {
|
|
if (props.index === 0) {
|
|
_self.value?.focus();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
ref="_self"
|
|
class="wrapper surface-1 shadow-2"
|
|
type="submit"
|
|
@click="$emit('trigger')"
|
|
style="padding: 0; border-radius: var(--radius-2); width: 320px"
|
|
>
|
|
<div class="column justify-center" style="height: 100%">
|
|
<div class="col-6 flex justify-center items-center">
|
|
<div
|
|
class="q-pa-md row items-center"
|
|
:style="`border-radius: 50%; background-color: hsla(${bgColor} / 0.1)`"
|
|
>
|
|
<Icon :icon="icon" width="53px" :color="`var(${iconColor})`" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-2 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
:style="`background-color: ${bgColor}`"
|
|
>
|
|
<div style="font-size: 14px">{{ $t(text) }}</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.variable-item-card {
|
|
--_var-filter: grayscale(30%);
|
|
|
|
filter: var(--_var-filter);
|
|
&.dark {
|
|
--_var-filter: grayscale(0%);
|
|
}
|
|
}
|
|
|
|
.variable-icon-color {
|
|
--_var-filter: grayscale(0%);
|
|
|
|
filter: var(--_var-filter);
|
|
&.dark {
|
|
--_var-filter: color;
|
|
}
|
|
}
|
|
.wrapper {
|
|
appearance: none;
|
|
background: transparent;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.wrapper:focus {
|
|
border: 2px solid var(--blue-6);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|