68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
|
|
defineEmits<{ (e: 'labelClick', value: string, index: number | null): void }>();
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
label: string;
|
|
value?: string | string[];
|
|
icon?: string;
|
|
iconSize?: string;
|
|
tooltip?: boolean;
|
|
clickable?: boolean;
|
|
}>(),
|
|
{
|
|
label: '-',
|
|
value: '-',
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<article class="row items-center">
|
|
<Icon
|
|
v-if="icon"
|
|
:icon
|
|
class="app-text-muted q-pr-sm"
|
|
:width="iconSize || '2rem'"
|
|
/>
|
|
<span class="row col">
|
|
<span class="col-12 app-text-muted-2" style="font-size: 10px">
|
|
{{ label }}
|
|
</span>
|
|
<span class="col-12 ellipsis">
|
|
<slot name="value">
|
|
<span
|
|
:class="{ 'link cursor-pointer': clickable }"
|
|
v-if="typeof value === 'string'"
|
|
@click="$emit('labelClick', value, null)"
|
|
>
|
|
{{ value }}
|
|
<q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
|
|
</span>
|
|
<span v-else :class="{ 'link cursor-pointer': clickable }">
|
|
<span
|
|
v-for="(item, index) in value"
|
|
:key="index"
|
|
@click="$emit('labelClick', item, index)"
|
|
class="link cursor-pointer"
|
|
>
|
|
{{ item }}
|
|
<span v-if="index < value.length - 1">, </span>
|
|
|
|
<q-tooltip v-if="tooltip" :delay="500">{{ item }}</q-tooltip>
|
|
</span>
|
|
</span>
|
|
</slot>
|
|
</span>
|
|
</span>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.link {
|
|
color: hsl(var(--info-bg));
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|