mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-13 18:52:14 +01:00
28 lines
1.0 KiB
Vue
28 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import type { Component, HTMLAttributes } from 'vue';
|
|
import { cn } from '../utils/cn';
|
|
import { Label } from '../label/index';
|
|
|
|
const props = defineProps<{
|
|
class?: HTMLAttributes['class'];
|
|
icon?: Component;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Label
|
|
data-slot="field-label"
|
|
:class="
|
|
cn(
|
|
'group/field-label peer/field-label flex w-fit gap-1.5 leading-snug group-data-[disabled=true]/field:opacity-50',
|
|
'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&_>[data-slot=field]]:p-3',
|
|
'has-[[data-state=checked]]:bg-primary/5 has-[[data-state=checked]]:border-primary dark:has-[[data-state=checked]]:bg-primary/10',
|
|
icon ? 'items-center' : '',
|
|
props.class
|
|
)
|
|
">
|
|
<component :is="icon" v-if="icon" class="h-4 w-4 text-text-quaternary shrink-0" />
|
|
<slot />
|
|
</Label>
|
|
</template>
|