50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type IVLabel from './IVLabel.type';
|
|
import styles from '@visua/typography.module.css';
|
|
import VHint from '../hint/VHint.vue';
|
|
|
|
const props = withDefaults(defineProps<IVLabel>(), {
|
|
type: 'default',
|
|
disabled: false,
|
|
required: false,
|
|
hint: undefined,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<label
|
|
:for="props.for"
|
|
:class="[styles['text-body-MD-standard-text-Regular'], {
|
|
'label': props.type === 'default',
|
|
'success': props.type === 'success',
|
|
'error': props.type === 'error',
|
|
'disabled': props.disabled,
|
|
}]"
|
|
:aria-label="props.label"
|
|
:aria-disabled="props.disabled"
|
|
>
|
|
{{ props.label }}
|
|
<template v-if="props.required">
|
|
<span v-if="props.required" :class="{ 'required': !props.disabled}">
|
|
<slot name="required-tip">*</slot>
|
|
</span>
|
|
</template>
|
|
<VHint
|
|
v-if="props.hint"
|
|
:title="props.hint"
|
|
:disabled="props.disabled"
|
|
/>
|
|
</label>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.label {color: var(--text-label-grey);}
|
|
.success {color: var(--text-default-success);}
|
|
.error {color: var(--text-default-error);}
|
|
.disabled {color: var(--text-disabled-grey);}
|
|
.required {
|
|
color: var(--minor-red-marianne);
|
|
display: inline;
|
|
}
|
|
</style>
|