fix: placeholder in dropdown component

This commit is contained in:
Shariq Ansari 2024-10-28 22:33:41 +05:30
parent 80cbae2f8f
commit 79a9545319
3 changed files with 11 additions and 85 deletions

View File

@ -2,7 +2,7 @@
<div
class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-gray-800 transition-colors hover:bg-gray-200 active:bg-gray-300"
>
<div class="flex items-center justify-between gap-7">
<div class="flex flex-1 items-center justify-between gap-7">
<div v-show="!editMode">{{ option.value }}</div>
<TextInput
ref="inputRef"
@ -60,13 +60,8 @@
</Tooltip>
</div>
</div>
<div>
<FeatherIcon
v-if="option.selected"
name="check"
class="text-primary-500 h-4 w-6"
size="sm"
/>
<div v-if="option.selected">
<FeatherIcon name="check" class="text-primary-500 h-4 w-6" size="sm" />
</div>
</div>
</template>

View File

@ -35,7 +35,12 @@
:label="data[field.name]"
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
>
<div class="truncate">{{ data[field.name] }}</div>
<div v-if="data[field.name]" class="truncate">
{{ data[field.name] }}
</div>
<div v-else class="text-base leading-5 text-gray-500">
{{ field.placeholder }}
</div>
<template #suffix>
<FeatherIcon
:name="open ? 'chevron-up' : 'chevron-down'"

View File

@ -84,86 +84,12 @@
/>
<span class="">{{ contact.data.company_name }}</span>
</div>
<!-- <div
class="flex flex-col flex-wrap gap-3 text-base text-gray-700 sm:flex-row sm:items-center sm:gap-2"
>
<div
v-if="contact.data.email_id"
class="flex items-center gap-1.5"
>
<Email2Icon class="h-4 w-4" />
<span class="">{{ contact.data.email_id }}</span>
</div>
<span
v-if="contact.data.email_id"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
<component
:is="callEnabled ? Tooltip : 'div'"
:text="__('Make Call')"
v-if="contact.data.actual_mobile_no"
>
<div
class="flex items-center gap-1.5"
:class="callEnabled ? 'cursor-pointer' : ''"
@click="
callEnabled && makeCall(contact.data.actual_mobile_no)
"
>
<PhoneIcon class="h-4 w-4" />
<span class="">{{ contact.data.actual_mobile_no }}</span>
</div>
</component>
<span
v-if="contact.data.actual_mobile_no"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
<div
v-if="contact.data.company_name"
class="flex items-center gap-1.5"
>
<Avatar
size="xs"
:label="contact.data.company_name"
:image="
getOrganization(contact.data.company_name)
?.organization_logo
"
/>
<span class="">{{ contact.data.company_name }}</span>
</div>
<span
v-if="contact.data.company_name"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
<Button
v-if="
contact.data.email_id ||
contact.data.mobile_no ||
contact.data.company_name
"
variant="ghost"
:label="__('More')"
class="w-fit cursor-pointer hover:text-gray-900 sm:-ml-1"
@click="
() => {
detailMode = true
showContactModal = true
}
"
/>
</div> -->
<ErrorMessage :message="__(error)" />
</div>
</div>
<div v-if="contact.data.actual_mobile_no" class="flex gap-1.5">
<div class="flex gap-1.5">
<Button
v-if="contact.data.actual_mobile_no"
:label="__('Make Call')"
size="sm"
@click="