diff options
| author |  Corentin THOMASSET <corentin.thomasset74@gmail.com>
| 2023-08-07 17:30:00 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-08-07 15:30:00 +0000 |
| commit | dfa1ba85548508e680f68200ea521be95c3eafe0 (patch) | |
| tree | c166b635e5eb006806bd40a88252d90735be9ca4 /src/ui/c-label/c-label.vue | |
| parent | 6498c9b0fa0427d567506dbd4a6e87d227b138d4 (diff) | |
| download | it-tools-dfa1ba85548508e680f68200ea521be95c3eafe0.tar.gz it-tools-dfa1ba85548508e680f68200ea521be95c3eafe0.tar.zst it-tools-dfa1ba85548508e680f68200ea521be95c3eafe0.zip | |
feat(ui): added c-select in the ui lib (#550)
* feat(ui): added c-select in the ui lib
* refactor(ui): switched n-select to c-select
Diffstat (limited to 'src/ui/c-label/c-label.vue')
| -rw-r--r-- | src/ui/c-label/c-label.vue | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/src/ui/c-label/c-label.vue b/src/ui/c-label/c-label.vue new file mode 100644 index 0000000..3e0f64d --- /dev/null +++ b/src/ui/c-label/c-label.vue @@ -0,0 +1,32 @@ +<script lang="ts" setup> +import { toRefs } from 'vue'; +import type { CLabelProps } from './c-label.types'; + +const props = withDefaults(defineProps<CLabelProps>(), { label: undefined, labelAlign: 'left', labelFor: undefined, labelPosition: 'top', labelWidth: 'auto' }); +const { label, labelAlign, labelFor, labelPosition, labelWidth } = toRefs(props); +</script> + +<template> + <div + :class="{ + 'flex-col': labelPosition === 'top', + 'flex-row': labelPosition === 'left', + }" + flex + items-baseline + > + <label + v-if="label" :for="labelFor" :style="{ flex: `0 0 ${labelWidth}` }" + mb-5px + pr-12px + :class="{ + 'text-left': labelAlign === 'left', + 'text-center': labelAlign === 'center', + 'text-right': labelAlign === 'right', + }" + > + {{ label }} + </label> + <slot /> + </div> +</template> |