49 lines
1.2 KiB
Vue
49 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"
|
||
|
|
:aria-required="props.required"
|
||
|
|
>
|
||
|
|
{{ props.label }}
|
||
|
|
<slot name="required-type">
|
||
|
|
<span
|
||
|
|
v-if="'required' in $attrs && $attrs.required !== false"
|
||
|
|
:class="{ 'required': props.required }"
|
||
|
|
>*</span>
|
||
|
|
</slot>
|
||
|
|
<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);}
|
||
|
|
</style>
|