fix: tabs

This commit is contained in:
2026-04-02 15:53:27 +02:00
parent 7c69d56a48
commit 2ce2556685
14 changed files with 100 additions and 101 deletions

1
bo/components.d.ts vendored
View File

@@ -58,5 +58,6 @@ declare module 'vue' {
USelectMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue')['default']
USidebar: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Sidebar.vue')['default']
UTable: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Table.vue')['default']
UTabs: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Tabs.vue')['default']
}
}

View File

@@ -8,9 +8,6 @@ export const uiOptions: NuxtUIOptions = {
}
},
button: {
slots: {
base: 'px-10!',
},
},
input: {
slots: {

View File

@@ -15,9 +15,9 @@ body {
@theme {
--main-light: #FFFEFB;
--second-light: #F5F6FA;
--second-light: #F8FAFC;
--main-dark: #212121;
--main-dark: #1A1A1A;
--black: #1A1A1A;
/* gray */
@@ -25,15 +25,15 @@ body {
--gray-dark: #6B7280;
/* borders */
--border-light: #E8E7E0;
--border-dark: #3F3E3D;
--border-light: #E2E8F0;
--border-dark: #334155;
/* text */
--accent-green-dark: #22c55e;
--accent-green-light: #16A34A;
--accent-blue-dark: #3B82F6;
--accent-blue-light: #2563EB;
--accent-blue-dark: #0EA5E91A;
--accent-blue-light: #E0F2FE;
--text-dark: #FFFEFB;
--text-sky-light: #0284C7;
--text-sky-dark: #38BDF8;
/* placeholder */
--placeholder: #8C8C8A;
@@ -55,6 +55,7 @@ body {
--ui-error: var(--dark-red);
--border: var(--border-dark);
--tw-border-style: var(--border-dark);
--ui-text-inverted: #fff;
}
.label-form {

View File

@@ -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">
@@ -100,7 +99,7 @@
<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')

View File

@@ -8,7 +8,7 @@
<UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
<UIcon name="ic:baseline-search"
class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) relative left-40" />
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark) relative left-40" />
</div>
<UButton color="primary" @click="openCreateModal"
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
@@ -32,7 +32,7 @@
<UIcon name="material-symbols:delete" class="text-[18px]" />
</button>
<UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) text-[13px]">
class="text-(--text-sky-light) dark:text-(--text-sky-dark) text-[13px]">
{{ t('edit') }}
<UIcon name="ic:sharp-edit" class="text-[15px]" />
</UButton>

View File

@@ -43,7 +43,7 @@
name: 'customer-product', params: {
product_id: '51'
}
}" class="inline-block mt-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
}" class="inline-block mt-4 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
{{ t('Continue Shopping') }}
</RouterLink>
</div>
@@ -72,7 +72,7 @@
</div>
<div class="flex justify-between mb-6">
<span class="text-black dark:text-white font-semibold text-lg">{{ t('Total') }}</span>
<span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-bold text-lg">${{
<span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-bold text-lg">${{
cartStore.orderTotal.toFixed(2) }}</span>
</div>
<div class="flex flex-col gap-3">
@@ -103,7 +103,7 @@
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
<input type="radio" :value="address.id" v-model="selectedAddress"
class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
<div class="flex-1">
<p class="text-black dark:text-white font-medium">{{ address.street }}</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode }}, {{ address.city }}</p>
@@ -115,7 +115,7 @@
<UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
<p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
<RouterLink :to="{ name: 'addresses' }"
class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
{{ t('Add Address') }}
</RouterLink>
</div>
@@ -131,11 +131,11 @@
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
<input type="radio" :value="method.id" v-model="selectedDeliveryMethod"
class="w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
class="w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="text-black dark:text-white font-medium">{{ method.name }}</span>
<span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-medium">
<span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-medium">
{{ method.price > 0 ? `$${method.price.toFixed(2)}` : t('Free') }}
</span>
</div>

View File

@@ -15,7 +15,7 @@
<p class="text-gray-600 dark:text-gray-300">
{{ productData.description }}
</p>
<div class="text-3xl font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
<div class="text-3xl font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
{{ productData.price }}
</div>
<div class="flex flex-col">
@@ -32,7 +32,7 @@
</div>
<div class="flex md:flex-row flex-col justify-between md:items-end items-start gap-5 md:gap-0 md:mb-8 mb-4">
<div class="flex flex-col gap-3">
<span class="text-sm text-(--accent-blue-light) dark:text-(--accent-blue-dark) ">Colors:</span>
<span class="text-sm text-(--text-sky-light) dark:text-(--text-sky-dark) ">Colors:</span>
<div class="flex gap-2">
<button v-for="color in productData.colors" :key="color.id" @click="selectedColor = color"
class="w-10 h-10 border-2 transition-all" :class="selectedColor?.id === color.id

View File

@@ -24,7 +24,7 @@
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
<h2 class="text-xl font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
<UIcon name="mdi:domain"
class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
class="text-[24px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
{{ t('Company Information') }}
</h2>
<div class="grid grid-cols-1 gap-10">
@@ -65,7 +65,7 @@
<h2
class="text-xl font-semibold text-black dark:text-white mb-2 flex items-center gap-2">
<UIcon name="mdi:map-marker"
class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
class="text-[24px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
{{ t('Addresses') }}
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -88,7 +88,7 @@
</div>
<div class="flex justify-end">
<UButton color="primary" variant="outline"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
class="text-(--text-sky-light) dark:text-(--text-sky-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
@click="goToCreateAccount">
<UIcon name="ic:sharp-edit" />
{{ t('Edit Account') }}

View File

@@ -11,7 +11,7 @@
<h2
class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
<UIcon name="mdi:domain"
class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
{{ t('Company Information') }}
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -54,7 +54,7 @@
<h2
class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
<UIcon name="mdi:map-marker"
class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
{{ t('Select Addresses') }}
</h2>
<div class="bg-(--second-light) dark:bg-(--main-dark)">
@@ -70,7 +70,7 @@
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
<input type="radio" :value="address.id" v-model="selectedAddress"
class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
<div class="flex-1">
<p class="text-black dark:text-white font-medium">{{ address.street }}
</p>
@@ -87,7 +87,7 @@
<UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
<p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
<RouterLink :to="{ name: 'addresses' }"
class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
{{ t('Add Address') }}
</RouterLink>
</div>

View File

@@ -107,7 +107,7 @@ const PrivacyComponent = computed(() =>
<div class="flex items-center justify-between w-full dark:text-white text-black">
<button variant="link" size="sm" @click="goToPasswordRecovery"
class="text-[15px] w-full flex justify-end text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">
class="text-[15px] w-full flex justify-end text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">
{{ $t('general.forgot_password') }}?
</button>
</div>
@@ -145,18 +145,18 @@ const PrivacyComponent = computed(() =>
<p class="dark:text-white text-black">
{{ $t('general.dont_have_an_account') }}?
<button variant="link" size="sm"
class="text-[15px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer"
class="text-[15px] text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer"
@click="goToRegister">{{ $t('general.create_account_now') }}</button>
</p>
</div>
<p class="mt-8 text-center text-xs dark:text-white text-black">
{{ $t('general.by_signing_in_you_agree_to_our') }}
<span @click="showTherms = !showTherms"
class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">{{
$t('general.terms_of_service') }}</span>
{{ $t('general.and') }}
<span @click="showPrivacy = !showPrivacy"
class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">{{
$t('general.privacy_policy') }}</span>
</p>
</div>

View File

@@ -92,13 +92,13 @@ function validate(): FormError[] {
class="w-full flex items-center gap-2 justify-center text-[15px] dark:text-white text-black cursor-pointer"
@click="goToLogin">
<UIcon name="mingcute:arrow-left-line"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) text-[16px]" />
class="text-(--text-sky-light) dark:text-(--text-sky-dark) text-[16px]" />
{{ $t('general.back_to_sign_in') }}
</button>
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ $t('general.dont_have_an_account') }}
<button variant="link" size="sm" @click="goToRegister"
class=" text-[15px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
class=" text-[15px] text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">{{
$t('general.create_account_now') }}
</button>
</p>

View File

@@ -83,12 +83,12 @@
<span class="dark:text-white text-black">
{{ $t('general.i_agree_to_the') }}
<span @click="showTherms = !showTherms"
class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{
class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark)">{{
$t('general.terms_of_service')
}}</span>
{{ $t('general.and') }}
<span @click="showPrivacy = !showPrivacy"
class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{
class="cursor-pointer underline text-(--text-sky-light) dark:text-(--text-sky-dark)">{{
$t('general.privacy_policy')
}}</span>
</span>

View File

@@ -120,7 +120,7 @@ function validate(): FormError[] {
<div class="text-center border-t dark:border-(--border-dark) border-(--border-light) pt-4">
<button color="neutral" variant="ghost" @click="goToLogin"
class="text-[15px] flex items-center gap-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">
class="text-[15px] flex items-center gap-2 text-(--text-sky-light) dark:text-(--text-sky-dark) cursor-pointer">
<UIcon name="mingcute:arrow-left-line" />
{{ $t('general.back_to_sign_in') }}
</button>

View File

@@ -135,7 +135,7 @@ function goToLogin() {
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ $t('verify_email.already_registered') }}
<button variant="link" size="sm" @click="goToLogin"
class="cursor-pointer text-(--accent-blue-light) dark:text-(--accent-blue-dark)"> {{
class="cursor-pointer text-(--text-sky-light) dark:text-(--text-sky-dark)"> {{
$t('general.sign_in')
}}
</button>