@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/ui/field/FieldLegend.vue

@@ -4,19 +4,19 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    variant?: 'legend' | 'label';
+	class?: HTMLAttributes['class'];
+	variant?: 'legend' | 'label';
 }>();
 </script>
 
 <template>
-    <legend data-slot="field-legend" :data-variant="variant" :class="cn(
-        'mb-3 font-semibold',
-        'data-[variant=legend]:text-base',
-        'data-[variant=label]:text-sm',
-        props.class
-    )
-        ">
-        <slot />
-    </legend>
+	<legend data-slot="field-legend" :data-variant="variant" :class="cn(
+		'mb-3 font-semibold',
+		'data-[variant=legend]:text-base',
+		'data-[variant=label]:text-sm',
+		props.class
+	)
+		">
+		<slot />
+	</legend>
 </template>

package/src/components/ui/field/FieldSeparator.vue

@@ -5,19 +5,19 @@ import { Separator } from '../separator';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="field-separator" :data-content="!!$slots.default" :class="cn(
-        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-        props.class
-    )
-        ">
-        <Separator class="absolute inset-0 top-1/2" />
-        <span v-if="$slots.default" class="bg-background text-muted-foreground relative mx-auto block w-fit px-2" data-slot="field-separator-content">
-            <slot />
-        </span>
-    </div>
+	<div data-slot="field-separator" :data-content="!!$slots.default" :class="cn(
+		'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+		props.class
+	)
+		">
+		<Separator class="absolute inset-0 top-1/2" />
+		<span v-if="$slots.default" class="bg-background text-muted-foreground relative mx-auto block w-fit px-2" data-slot="field-separator-content">
+			<slot />
+		</span>
+	</div>
 </template>

package/src/components/ui/field/FieldSet.vue

@@ -4,17 +4,17 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <fieldset data-slot="field-set" :class="cn(
-        'flex flex-col gap-6',
-        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-        props.class
-    )
-        ">
-        <slot />
-    </fieldset>
+	<fieldset data-slot="field-set" :class="cn(
+		'flex flex-col gap-6',
+		'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+		props.class
+	)
+		">
+		<slot />
+	</fieldset>
 </template>

package/src/components/ui/field/FieldTitle.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="field-label" :class="cn(
-        'flex w-fit items-center gap-2 text-sm leading-snug font-semibold group-data-[disabled=true]/field:opacity-50',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="field-label" :class="cn(
+		'flex w-fit items-center gap-2 text-sm leading-snug font-semibold group-data-[disabled=true]/field:opacity-50',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

package/src/components/ui/field/field-context.ts

@@ -2,61 +2,61 @@ import type { InjectionKey, Ref } from 'vue';
 import { computed, inject, onBeforeUnmount, provide, ref, useAttrs, useId } from 'vue';
 
 interface FieldContext {
-    // Id of the control the field label points to (undefined until a control registers)
-    controlId: Ref<string | undefined>;
-    // Id of the field label, for controls that combine it with their own text
-    labelId: Ref<string | undefined>;
+	// Id of the control the field label points to (undefined until a control registers)
+	controlId: Ref<string | undefined>;
+	// Id of the field label, for controls that combine it with their own text
+	labelId: Ref<string | undefined>;
 }
 
 const fieldContextKey: InjectionKey<FieldContext> = Symbol('uv-field');
 
 // Share the label target with the label and the control inside a Field
 export const provideFieldContext = () => {
-    const context: FieldContext = { controlId: ref(undefined), labelId: ref(undefined) };
-    provide(fieldContextKey, context);
-    return context;
+	const context: FieldContext = { controlId: ref(undefined), labelId: ref(undefined) };
+	provide(fieldContextKey, context);
+	return context;
 };
 
 // Id the FieldLabel should point to, if the field has a control, and the id the label registers for itself
 export const useFieldLabel = () => {
-    const field = inject(fieldContextKey, null);
-    const labelId = `uv-field-label-${useId()}`;
-    if (field && !field.labelId.value) {
-        field.labelId.value = labelId;
-        onBeforeUnmount(() => {
-            if (field.labelId.value === labelId) field.labelId.value = undefined;
-        });
-    }
-    return {
-        labelId: field ? labelId : undefined,
-        target: computed(() => field?.controlId.value)
-    };
+	const field = inject(fieldContextKey, null);
+	const labelId = `uv-field-label-${useId()}`;
+	if (field && !field.labelId.value) {
+		field.labelId.value = labelId;
+		onBeforeUnmount(() => {
+			if (field.labelId.value === labelId) field.labelId.value = undefined;
+		});
+	}
+	return {
+		labelId: field ? labelId : undefined,
+		target: computed(() => field?.controlId.value)
+	};
 };
 
 // Id of the surrounding Field label, if any
 export const useFieldLabelId = () => {
-    const field = inject(fieldContextKey, null);
-    return computed(() => field?.labelId.value);
+	const field = inject(fieldContextKey, null);
+	return computed(() => field?.labelId.value);
 };
 
 // Give the first control inside a Field an id its FieldLabel points to (an explicit id on the control wins)
 export const useFieldControlId = (explicitId?: () => string | undefined) => {
-    const field = inject(fieldContextKey, null);
-    const attrs = useAttrs();
-    const generatedId = `uv-field-control-${useId()}`;
+	const field = inject(fieldContextKey, null);
+	const attrs = useAttrs();
+	const generatedId = `uv-field-control-${useId()}`;
 
-    // Only the first control claims the label, so composite controls (like DateTimePicker) don't fight over it
-    if (!field || field.controlId.value) {
-        return computed(() => explicitId?.());
-    }
+	// Only the first control claims the label, so composite controls (like DateTimePicker) don't fight over it
+	if (!field || field.controlId.value) {
+		return computed(() => explicitId?.());
+	}
 
-    const id = (explicitId?.() ?? (attrs.id as string | undefined)) || generatedId;
-    field.controlId.value = id;
+	const id = (explicitId?.() ?? (attrs.id as string | undefined)) || generatedId;
+	field.controlId.value = id;
 
-    // Release the label when the control goes away
-    onBeforeUnmount(() => {
-        if (field.controlId.value === id) field.controlId.value = undefined;
-    });
+	// Release the label when the control goes away
+	onBeforeUnmount(() => {
+		if (field.controlId.value === id) field.controlId.value = undefined;
+	});
 
-    return computed(() => id);
-};
+	return computed(() => id);
+};

package/src/components/ui/field/index.ts

@@ -2,31 +2,31 @@ import type { ClassProp } from 'class-variance-authority/types';
 import { cva } from 'class-variance-authority';
 
 export type FieldVariants = {
-    orientation?: 'vertical' | 'horizontal' | 'responsive' | null | undefined;
+	orientation?: 'vertical' | 'horizontal' | 'responsive' | null | undefined;
 };
 
 export const fieldVariants: (props?: FieldVariants & ClassProp) => string = cva(
-    'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
-    {
-        variants: {
-            orientation: {
-                vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
-                horizontal: [
-                    'flex-row items-center',
-                    '[&>[data-slot=field-label]]:flex-auto',
-                    'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
-                ],
-                responsive: [
-                    'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
-                    '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
-                    '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
-                ]
-            }
-        },
-        defaultVariants: {
-            orientation: 'vertical'
-        }
-    }
+	'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+	{
+		variants: {
+			orientation: {
+				vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+				horizontal: [
+					'flex-row items-center',
+					'[&>[data-slot=field-label]]:flex-auto',
+					'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+				],
+				responsive: [
+					'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+					'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+					'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+				]
+			}
+		},
+		defaultVariants: {
+			orientation: 'vertical'
+		}
+	}
 );
 
 export { useFieldControlId } from './field-context';