visua-vue/src/components/label/VLabel.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 }}
    <slot name="required-type">
      <span
        v-if="props.required"
        :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>