fix(ui): incorrect layout impl for FieldSelect
This commit is contained in:
@@ -31,10 +31,10 @@ function toDisplayValue(value: T): string {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ComboboxRoot v-model="modelValue" :class="['relative', 'w-full']">
|
<ComboboxRoot v-model="modelValue" :class="['relative', 'w-full', 'h-fit']">
|
||||||
<ComboboxAnchor
|
<ComboboxAnchor
|
||||||
:class="[
|
:class="[
|
||||||
'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-10 gap-[5px] outline-none',
|
'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-9 gap-[5px] outline-none',
|
||||||
'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
|
'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
|
||||||
'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
|
'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
|
||||||
'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
|
'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
|
||||||
|
|||||||
@@ -21,22 +21,21 @@ const modelValue = defineModel<string>({ required: false })
|
|||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'items-center',
|
'items-center',
|
||||||
'justify-center',
|
props.layout === 'horizontal' ? 'grid grid-rows-2 gap-2' : 'grid grid-cols-2 gap-2',
|
||||||
props.layout === 'horizontal' ? 'grid grid-cols-3 gap-2' : 'grid grid-cols-2 gap-2',
|
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'w-full',
|
'w-full',
|
||||||
props.layout === 'horizontal' ? 'col-span-2' : 'row-span-1',
|
props.layout === 'horizontal' ? 'col-span-1' : 'row-span-2',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<div :class="['flex', 'items-center', 'gap-1', 'break-words', 'text-sm', 'font-medium']">
|
<div :class="['flex', 'items-center', 'gap-1', 'break-words', 'text-sm', 'font-medium', 'text-left']">
|
||||||
<slot name="label">
|
<slot name="label">
|
||||||
{{ props.label }}
|
{{ props.label }}
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div :class="['break-words', 'text-xs', 'text-neutral-500', 'dark:text-neutral-400']">
|
<div :class="['break-words', 'text-xs', 'text-neutral-500', 'dark:text-neutral-400', 'text-left']">
|
||||||
<slot name="description">
|
<slot name="description">
|
||||||
{{ props.description }}
|
{{ props.description }}
|
||||||
</slot>
|
</slot>
|
||||||
|
|||||||
Reference in New Issue
Block a user