fix: tabs
This commit is contained in:
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<component :is="Default || 'div'">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<UIcon name="line-md:arrow-left" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
<p class="cursor-pointer text-(--accent-blue-light) dark:text-(--accent-blue-dark)" @click="backFromProduct()">
|
||||
<UIcon name="line-md:arrow-left" class="text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
<p class="cursor-pointer text-(--text-sky-light) dark:text-(--text-sky-dark)" @click="backFromProduct()">
|
||||
Back to products</p>
|
||||
</div>
|
||||
<div class="container mx-auto ">
|
||||
<div
|
||||
class=" gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
|
||||
class=" gap-4 mb-6 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
|
||||
<div v-if="!isShowProductView" class="flex items-center justify-between">
|
||||
<div class="flex flex-col items-center gap-3" v-if="!isTranslations">
|
||||
<p class="light:text-(--accent-green-light) dark:text-(--accent-green-dark) text-md whitespace-nowrap">
|
||||
<p class="text-md whitespace-nowrap">
|
||||
Translate from Polish to :</p>
|
||||
<USelectMenu v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
|
||||
class="w-48 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm" :searchInput="false">
|
||||
@@ -36,17 +36,16 @@
|
||||
</USelectMenu>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-7">
|
||||
<div class="flex gap-3">
|
||||
<UButton @click="() => {
|
||||
fetchForLanguage(toLangId)
|
||||
isShowProductView = true
|
||||
}" v-if="isTranslations === false" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)"
|
||||
color="neutral" variant="outline">
|
||||
}" v-if="!isTranslations" class="text-(--text-sky-light) dark:text-(--text-sky-dark)" color="neutral"
|
||||
variant="outline">
|
||||
<p class="dark:text-white"> Show product</p>
|
||||
</UButton>
|
||||
<UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
|
||||
v-if="isTranslations === false"
|
||||
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) flex items-center! justify-center! px-12">
|
||||
<UButton @click="translateToSelectedLanguage" color="primary" :loading="translating" v-if="!isTranslations"
|
||||
class="text-sky-600 bg-sky-100 dark:bg-(--accent-blue-dark) flex items-center! justify-center!">
|
||||
Translate
|
||||
</UButton>
|
||||
<div v-else class="flex gap-3">
|
||||
@@ -95,12 +94,12 @@
|
||||
{{ productStore.productDescription.name || 'Product Name' }}
|
||||
</p>
|
||||
<p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
|
||||
|
||||
|
||||
<div class="space-y-[10px]">
|
||||
<div class="flex items-center gap-1">
|
||||
<UIcon name="lets-icons:done-ring-round-fill"
|
||||
class="text-[20px] light:text-(--accent-green-light) dark:text-(--accent-green-dark)" />
|
||||
<p class="text-[16px] font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
|
||||
<p class="text-[16px] font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
|
||||
{{ productStore.productDescription.available_now }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -116,60 +115,57 @@
|
||||
</div>
|
||||
|
||||
<div v-if="productStore.productDescription" class="mt-16">
|
||||
<div class="flex gap-4 my-6">
|
||||
<UButton @click="activeTab = 'description'"
|
||||
:class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
|
||||
variant="outline">
|
||||
<p class="dark:text-white">Description</p>
|
||||
</UButton>
|
||||
<UTabs :items="items" v-model="activeTab" color="info" :content="true">
|
||||
<template #description>
|
||||
<div class="px-7">
|
||||
<div class="flex items-center justify-end gap-3 mb-4">
|
||||
<UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
|
||||
class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
|
||||
<p class="text-white">Change Text</p>
|
||||
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
|
||||
</UButton>
|
||||
|
||||
<UButton @click="activeTab = 'usage'"
|
||||
:class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
|
||||
variant="outline">
|
||||
<p class="dark:text-white">Usage</p>
|
||||
</UButton>
|
||||
</div>
|
||||
<UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral"
|
||||
variant="outline" class="p-2.5 cursor-pointer">
|
||||
<p class="dark:text-white text-black">Save the edited text</p>
|
||||
</UButton>
|
||||
|
||||
<div v-if="activeTab === 'usage'"
|
||||
class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
|
||||
<UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral"
|
||||
variant="outline" class="p-2.5 cursor-pointer">
|
||||
Cancel
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end items-center gap-3 mb-4">
|
||||
<UButton v-if="!isEditing" @click="enableEdit"
|
||||
class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
|
||||
<p class="text-white">Change Text</p>
|
||||
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
|
||||
</UButton>
|
||||
<UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
|
||||
<p class="dark:text-white text-black">Save the edited text</p>
|
||||
</UButton>
|
||||
<UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline"
|
||||
class="p-2.5 cursor-pointer">
|
||||
Cancel
|
||||
</UButton>
|
||||
</div>
|
||||
<p ref="usageRef" v-html="productStore.productDescription.usage"
|
||||
class="flex flex-col justify-center w-full text-start dark:text-white! text-black!"></p>
|
||||
</div>
|
||||
<div ref="description" v-html="productStore.productDescription.description"
|
||||
class="flex flex-col justify-center dark:text-white text-black"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="activeTab === 'description'"
|
||||
class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
|
||||
<div class="flex items-center justify-end gap-3 mb-4">
|
||||
<UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
|
||||
class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
|
||||
<p class="text-white">Change Text</p>
|
||||
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
|
||||
</UButton>
|
||||
<UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral" variant="outline"
|
||||
class="p-2.5 cursor-pointer">
|
||||
<p class="dark:text-white text-black ">Save the edited text</p>
|
||||
</UButton>
|
||||
<UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral"
|
||||
variant="outline" class="p-2.5 cursor-pointer">Cancel</UButton>
|
||||
</div>
|
||||
<div ref="descriptionRef" v-html="productStore.productDescription.description"
|
||||
class="flex flex-col justify-center dark:text-white text-black">
|
||||
</div>
|
||||
</div>
|
||||
<template #usage>
|
||||
<div class="px-7">
|
||||
<div class="flex justify-end items-center gap-3 mb-4">
|
||||
<UButton v-if="!isEditing" @click="enableEdit"
|
||||
class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
|
||||
<p class="text-white">Change Text</p>
|
||||
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
|
||||
</UButton>
|
||||
|
||||
<UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline"
|
||||
class="p-2.5 cursor-pointer">
|
||||
<p class="dark:text-white text-black">Save the edited text</p>
|
||||
</UButton>
|
||||
|
||||
<UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline"
|
||||
class="p-2.5 cursor-pointer">
|
||||
Cancel
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<p ref="usage" v-html="productStore.productDescription.usage"
|
||||
class="flex flex-col justify-center w-full text-start dark:text-white text-black"></p>
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
</div>
|
||||
</div>
|
||||
</component>
|
||||
@@ -256,6 +252,10 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
const items = ref([
|
||||
{ label: 'Description', slot: 'description', name: 'description' },
|
||||
{ label: 'Usage', slot: 'usage', name: 'usage' }
|
||||
])
|
||||
|
||||
// text edit
|
||||
const enableEdit = () => {
|
||||
@@ -334,7 +334,7 @@ function removeInlineStylesFromAll(product) {
|
||||
})
|
||||
div.querySelectorAll('table').forEach(table => {
|
||||
table.querySelectorAll('tbody').forEach(tbody => {
|
||||
tbody.style.setProperty('background-color', '#F5F6FA', 'important')
|
||||
tbody.style.setProperty('background-color', '#F8FAFC', 'important')
|
||||
tbody.querySelectorAll('tr').forEach(tr => {
|
||||
tr.querySelectorAll('td').forEach(td => {
|
||||
td.style.setProperty('padding', '10px', 'important')
|
||||
|
||||
Reference in New Issue
Block a user