fix: moved dropdown option to tab

This commit is contained in:
Shariq Ansari 2024-12-23 23:11:12 +05:30
parent 545b601852
commit 6a06cbd08d

View File

@ -1,19 +1,18 @@
<template>
<div class="flex flex-col gap-5.5">
<div
class="flex justify-between items-center gap-1 text-base bg-surface-gray-2 rounded py-2 px-2.5"
class="flex items-center gap-2 text-base bg-surface-gray-2 rounded py-2 px-2.5"
>
<div class="flex items-center gap-1">
<Draggable
v-if="tabs.length && !tabs[tabIndex].no_tabs"
:list="tabs"
item-key="label"
class="flex items-center gap-1"
class="flex items-center gap-2"
@end="(e) => (tabIndex = e.newIndex)"
>
<template #item="{ element: tab, index: i }">
<div
class="cursor-pointer rounded"
class="flex items-center gap-2 cursor-pointer rounded"
:class="[
tabIndex == i
? 'text-ink-gray-9 bg-surface-white shadow-sm'
@ -41,6 +40,18 @@
/>
</div>
</div>
<Dropdown
v-if="!tab.no_tabs && tabIndex == i"
:options="getTabOptions(tab)"
class="!h-4"
@click.stop
>
<template #default>
<Button variant="ghost" class="!p-1 !h-4">
<FeatherIcon name="more-horizontal" class="h-4" />
</Button>
</template>
</Dropdown>
</div>
</template>
</Draggable>
@ -50,22 +61,11 @@
@click="addTab"
:label="__('Add Tab')"
>
<template #prefix>
<template v-slot:[slotName]>
<FeatherIcon name="plus" class="h-4" />
</template>
</Button>
</div>
<Dropdown
v-if="tabs.length && !tabs[tabIndex].no_tabs"
:options="getTabOptions(tabs[tabIndex])"
>
<template #default>
<Button variant="ghost">
<FeatherIcon name="more-horizontal" class="h-4" />
</Button>
</template>
</Dropdown>
</div>
<div v-show="tabIndex == i" v-for="(tab, i) in tabs" :key="tab.label">
<Draggable
:list="tab.sections"
@ -207,6 +207,12 @@ const props = defineProps({
})
const tabIndex = ref(0)
const slotName = computed(() => {
if (props.tabs.length == 1 && props.tabs[0].no_tabs) {
return 'prefix'
}
return 'default'
})
const restrictedFieldTypes = [
'Geolocation',