fix: inputs size

This commit is contained in:
DomWane 2024-10-01 13:53:23 +02:00
parent caf8f42620
commit 06d3815cd3
3 changed files with 15 additions and 20 deletions

View file

@ -76,30 +76,25 @@ const days = computed(() => {
lg="w-1/2" lg="w-1/2"
relative relative
> >
<SelectBox <ProjectCreateComponentsSelect
v-model="day" v-model="day"
w-full class="lg:w-full!"
:options="days.map(day => ({ label: day.toString(), value: day }))" :options="days.map(day => ({ label: day.toString(), value: day }))"
placeholder="Day" placeholder="Day"
:border-opacity="30"
:is-margin-top="false"
/> />
<SelectBox <ProjectCreateComponentsSelect
v-model="month" v-model="month"
w-full class="lg:w-full!"
mx--2px ml--2px
:options="months.map(month => ({ label: month.label, value: month.value }))" :options="months.map(month => ({ label: month.label, value: month.value }))"
placeholder="Month" placeholder="Month"
:border-opacity="30"
:is-margin-top="false"
/> />
<SelectBox <ProjectCreateComponentsSelect
v-model="year" v-model="year"
w-full class="lg:w-full!"
ml--2px
:options="years.map(year => ({ label: year.toString(), value: year }))" :options="years.map(year => ({ label: year.toString(), value: year }))"
placeholder="Year" placeholder="Year"
:border-opacity="30"
:is-margin-top="false"
/> />
</div> </div>
<span <span

View file

@ -45,13 +45,13 @@ const model = defineModel<string>()
lg="flex flex-row gap-24px items-center" lg="flex flex-row gap-24px items-center"
relative relative
> >
<div v-bind="$attrs"> <div v-bind="$attrs" shrink-0>
<textarea <textarea
v-if="textarea" v-if="textarea"
v-model="model" v-model="model"
:rows="textareaRows" :rows="textareaRows"
:placeholder="placeholder" :placeholder="placeholder"
class="relative w-full p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6 focus:ring-0 focus:outline-none" class="relative w-full p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6 focus:outline-none focus:ring-0 focus:border-white"
:class="error ? 'border-app-danger/50' : 'border-white/30'" :class="error ? 'border-app-danger/50' : 'border-white/30'"
/> />
<input <input
@ -59,7 +59,7 @@ const model = defineModel<string>()
v-model="model" v-model="model"
:placeholder="placeholder" :placeholder="placeholder"
type="text" type="text"
class="relative w-full p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6 focus:ring-0 focus:outline-none" class="relative w-full p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6 focus:outline-none focus:ring-0 focus:border-white"
:class="error ? 'border-app-danger/50' : 'border-white/30'" :class="error ? 'border-app-danger/50' : 'border-white/30'"
> >
</div> </div>

View file

@ -7,7 +7,7 @@ const emits = defineEmits(['update:modelValue'])
interface SelectProps { interface SelectProps {
options: InputOption[] options: InputOption[]
label?: string label?: string
modelValue: string modelValue: any
placeholder?: string placeholder?: string
required?: boolean required?: boolean
hint?: string hint?: string
@ -24,7 +24,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
lg="flex flex-row gap-24px" lg="flex flex-row gap-24px"
relative relative
> >
<div lg="w-1/2"> <div v-bind="$attrs" lg="w-1/2">
<HeadlessListbox <HeadlessListbox
v-model="selectedValue" v-model="selectedValue"
as="div" as="div"
@ -48,7 +48,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
> >
<HeadlessListboxButton <HeadlessListboxButton
as="div" as="div"
class="relative w-full cursor-pointer p-8px text-left border-2px text-app-white bg-black border-white/30 sm:text-sm sm:leading-6" class="relative w-full cursor-pointer p-8px text-left border-2px text-app-white bg-black border-white/30 sm:text-sm sm:leading-6 aria-expanded:border-white aria-expanded:z-10"
> >
<span <span
class="block truncate mr-8px" class="block truncate mr-8px"
@ -71,7 +71,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<HeadlessListboxOptions <HeadlessListboxOptions
class="absolute z-100 max-h-60 w-full divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm border-white/30" class="absolute z-100 max-h-60 w-full divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm border-white"
> >
<HeadlessListboxOption <HeadlessListboxOption
v-for="option in props.options" v-for="option in props.options"