@crm-market/template-shared 1.0.7 → 1.0.8

package/components/Categories/index.vue

@@ -1,305 +1,102 @@
-<template>
-  <div class="blog-area ptb-60">
-    <div class="container">
-      <v-row class="justify-content-center">
-        <v-col cols="12" lg="8">
-          <v-row>
-            <v-col cols="12" lg="12" md="6">
-              <div class="single-blog-item">
-                <NuxtLink to="/blog-details" class="blog-img">
-                  <img src="~/assets/images/blog-1.jpg" alt="blog" />
-                </NuxtLink>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCategoryImages } from '../../composables/useCategoryImages';
 
-                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
-                  <li>
-                    By: <a href="#" class="text-decoration-none">Admin</a>
-                  </li>
-                  <li>
-                    <i class="ri-calendar-2-line text-warning"></i>
-                    25 December 2024
-                  </li>
-                  <li>
-                    <i class="ri-question-answer-line text-warning"></i>
-                    <NuxtLink to="/blog-details" class="text-decoration-none">
-                      03 Comments
-                    </NuxtLink>
-                  </li>
-                </ul>
+const { t } = useI18n();
+const { topLevelCategories, getSubcategories, fetchCategories, loading, error } = useCategories();
+const { imageFor, ensureFallbacks } = useCategoryImages();
 
-                <h2>
-                  <NuxtLink to="/blog-details">
-                    The Future of Tech: A Sneak Peek into Innovation
-                  </NuxtLink>
-                </h2>
-                <p>
-                  Express the excitement of looking ahead and exploring the
-                  innovations that will shape the future. Highlight real-world
-                  applications and potential impacts on various industries
-                </p>
-                <NuxtLink to="/blog-details" class="read-more">
-                  <span>Read More</span>
-                  <i class="ri-arrow-right-up-line"></i>
-                </NuxtLink>
-              </div>
-            </v-col>
-            <v-col cols="12" lg="12" md="6">
-              <div class="single-blog-item">
-                <NuxtLink to="/blog-details" class="blog-img">
-                  <img src="~/assets/images/blog-2.jpg" alt="blog" />
-                </NuxtLink>
+// Категорії зазвичай приходять з SSR (плагін); догружаємо, якщо список порожній
+await fetchCategories().catch(() => undefined);
+// Категорії без картинки — фото першого товару
+await useAsyncData('categories-page-images', () => ensureFallbacks(topLevelCategories.value).then(() => true), {
+  default: () => false,
+});
 
-                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
-                  <li>
-                    By: <a href="#" class="text-decoration-none">Admin</a>
-                  </li>
-                  <li>
-                    <i class="ri-calendar-2-line text-warning"></i>
-                    25 December 2024
-                  </li>
-                  <li>
-                    <i class="ri-question-answer-line text-warning"></i>
-                    <NuxtLink to="/blog-details" class="text-decoration-none">
-                      03 Comments
-                    </NuxtLink>
-                  </li>
-                </ul>
+const cards = computed(() =>
+  topLevelCategories.value.map((c) => ({
+    ...c,
+    imageSrc: imageFor(c),
+    subs: getSubcategories(c.id),
+  })),
+);
 
-                <h2>
-                  <NuxtLink to="/blog-details">
-                    The Future of Tech: A Sneak Peek into Innovation
-                  </NuxtLink>
-                </h2>
-                <p>
-                  Express the excitement of looking ahead and exploring the
-                  innovations that will shape the future. Highlight real-world
-                  applications and potential impacts on various industries
-                </p>
-                <NuxtLink to="/blog-details" class="read-more">
-                  <span>Read More</span>
-                  <i class="ri-arrow-right-up-line"></i>
-                </NuxtLink>
-              </div>
-            </v-col>
-            <v-col cols="12" lg="12" md="6">
-              <div class="single-blog-item">
-                <NuxtLink to="/blog-details" class="blog-img">
-                  <img src="~/assets/images/blog-3.jpg" alt="blog" />
-                </NuxtLink>
-
-                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
-                  <li>
-                    By: <a href="#" class="text-decoration-none">Admin</a>
-                  </li>
-                  <li>
-                    <i class="ri-calendar-2-line text-warning"></i>
-                    25 December 2024
-                  </li>
-                  <li>
-                    <i class="ri-question-answer-line text-warning"></i>
-                    <NuxtLink to="/blog-details" class="text-decoration-none">
-                      03 Comments
-                    </NuxtLink>
-                  </li>
-                </ul>
-
-                <h2>
-                  <NuxtLink to="/blog-details">
-                    The Future of Tech: A Sneak Peek into Innovation
-                  </NuxtLink>
-                </h2>
-                <p>
-                  Express the excitement of looking ahead and exploring the
-                  innovations that will shape the future. Highlight real-world
-                  applications and potential impacts on various industries
-                </p>
-                <NuxtLink to="/blog-details" class="read-more">
-                  <span>Read More</span>
-                  <i class="ri-arrow-right-up-line"></i>
-                </NuxtLink>
-              </div>
-            </v-col>
-            <v-col cols="12" lg="12" md="6">
-              <div class="single-blog-item">
-                <NuxtLink to="/blog-details" class="blog-img">
-                  <img src="~/assets/images/blog-4.jpg" alt="blog" />
-                </NuxtLink>
-
-                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
-                  <li>
-                    By: <a href="#" class="text-decoration-none">Admin</a>
-                  </li>
-                  <li>
-                    <i class="ri-calendar-2-line text-warning"></i>
-                    25 December 2024
-                  </li>
-                  <li>
-                    <i class="ri-question-answer-line text-warning"></i>
-                    <NuxtLink to="/blog-details" class="text-decoration-none">
-                      03 Comments
-                    </NuxtLink>
-                  </li>
-                </ul>
+const reload = () => fetchCategories(true).catch(() => undefined);
+</script>
 
-                <h2>
-                  <NuxtLink to="/blog-details">
-                    The Future of Tech: A Sneak Peek into Innovation
-                  </NuxtLink>
-                </h2>
-                <p>
-                  Express the excitement of looking ahead and exploring the
-                  innovations that will shape the future. Highlight real-world
-                  applications and potential impacts on various industries
-                </p>
-                <NuxtLink to="/blog-details" class="read-more">
-                  <span>Read More</span>
-                  <i class="ri-arrow-right-up-line"></i>
-                </NuxtLink>
-              </div>
-            </v-col>
-            <v-col cols="12" lg="12">
-              <div class="pagination-area">
-                <a href="#" class="next page-numbers">
-                  <i class="ri-arrow-left-s-line"></i>
-                </a>
+<template>
+  <div class="categories-area ptb-60">
+    <div class="container">
+      <div class="mb-4 text-center text-md-start">
+        <h2 class="fs-3 mb-1">{{ t('catalog.title') }}</h2>
+        <p class="text-muted mb-0">{{ t('catalog.subtitle') }}</p>
+      </div>
 
-                <span class="page-numbers current" aria-current="page">1</span>
-                <a href="#" class="page-numbers">2</a>
-                <a href="#" class="page-numbers">3</a>
+      <div v-if="cards.length" class="row g-4">
+        <div v-for="category in cards" :key="category.id" class="col-12 col-sm-6 col-lg-4 col-xl-3">
+          <div class="category-card h-100 border rounded-4 p-3 bg-white">
+            <NuxtLink
+              :to="categoryPath(category)"
+              class="d-flex align-items-center gap-3 text-decoration-none text-reset mb-2"
+            >
+              <img
+                v-if="category.imageSrc"
+                :src="category.imageSrc"
+                :alt="category.name"
+                class="rounded-circle flex-shrink-0"
+                style="width: 72px; height: 72px; object-fit: cover"
+                loading="lazy"
+              />
+              <span
+                v-else
+                class="rounded-circle bg-light d-flex align-items-center justify-content-center flex-shrink-0"
+                style="width: 72px; height: 72px"
+              >
+                <i class="ri-folder-3-line fs-3 text-muted"></i>
+              </span>
+              <span class="min-w-0">
+                <span class="d-block fw-bold text-truncate">{{ category.name }}</span>
+                <span v-if="category.productsCount != null" class="d-block text-muted fs-14">
+                  {{ t('catalog.productsCount', { count: category.productsCount }) }}
+                </span>
+              </span>
+            </NuxtLink>
 
-                <a href="#" class="next page-numbers">
-                  <i class="ri-arrow-right-s-line"></i>
-                </a>
-              </div>
-            </v-col>
-          </v-row>
-        </v-col>
-        <v-col cols="12" lg="4" class="mt-4 mt-lg-0">
-          <div class="sidebar ms-78">
-            <div class="single-sidebar-widget">
-              <h3>Search</h3>
-              <form class="search-form position-relative">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="Search here"
-                />
-                <button
-                  type="submit"
-                  class="position-absolute top-50 end-0 translate-middle-y p-0 bg-transparent border-0 text-warning pe-3"
+            <ul v-if="category.subs.length" class="list-unstyled mb-0 ps-0 border-top pt-2">
+              <li v-for="sub in category.subs" :key="sub.id">
+                <NuxtLink
+                  :to="categoryPath(sub)"
+                  class="d-flex justify-content-between text-decoration-none text-muted py-1 fs-14"
                 >
-                  <i class="ri-search-line"></i>
-                </button>
-              </form>
-            </div>
-            <div class="single-sidebar-widget">
-              <h3>Popular Posts</h3>
-
-              <div class="d-flex align-items-center popular-item">
-                <div class="flex-shrink-0">
-                  <NuxtLink to="/blog-details" class="d-block">
-                    <img src="~/assets/images/blog-5.jpg" alt="blog" />
-                  </NuxtLink>
-                </div>
-                <div class="flex-grow-1 ms-3">
-                  <h6>
-                    <NuxtLink to="/blog-details">
-                      The Art of Tech Gifting: Finding the Perfect Present
-                    </NuxtLink>
-                  </h6>
-                  <div class="d-flex align-items-center">
-                    <i class="ri-calendar-2-line"></i>
-                    <span>25 December 2024</span>
-                  </div>
-                </div>
-              </div>
-              <div class="d-flex align-items-center popular-item">
-                <div class="flex-shrink-0">
-                  <NuxtLink to="/blog-details" class="d-block">
-                    <img src="~/assets/images/blog-6.jpg" alt="blog" />
-                  </NuxtLink>
-                </div>
-                <div class="flex-grow-1 ms-3">
-                  <h6>
-                    <NuxtLink to="/blog-details">
-                      Mastering the Art of Wearables: A Comprehensive Guide
-                    </NuxtLink>
-                  </h6>
-                  <div class="d-flex align-items-center">
-                    <i class="ri-calendar-2-line"></i>
-                    <span>27 December 2024</span>
-                  </div>
-                </div>
-              </div>
-              <div class="d-flex align-items-center popular-item">
-                <div class="flex-shrink-0">
-                  <NuxtLink to="/blog-details" class="d-block">
-                    <img src="~/assets/images/blog-7.jpg" alt="blog" />
-                  </NuxtLink>
-                </div>
-                <div class="flex-grow-1 ms-3">
-                  <h6>
-                    <NuxtLink to="/blog-details">
-                      Tech Trends 2023: What's Shaping the Digital Landscape?
-                    </NuxtLink>
-                  </h6>
-                  <div class="d-flex align-items-center">
-                    <i class="ri-calendar-2-line"></i>
-                    <span>28 December 2024</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="single-sidebar-widget">
-              <h3>Categories</h3>
+                  <span>{{ sub.name }}</span>
+                  <span v-if="sub.productsCount != null">{{ sub.productsCount }}</span>
+                </NuxtLink>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
 
-              <ul class="ps-0 mb-0 list-unstyled categories">
-                <li>
-                  <NuxtLink to="/categories">Smartphone</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/categories">Laptop</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/categories">Headphone</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/categories">Smart Watch</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/categories">iPad</NuxtLink>
-                </li>
-              </ul>
-            </div>
-            <div class="single-sidebar-widget">
-              <h3>Tags</h3>
+      <div v-else-if="loading" class="text-center text-muted py-5">...</div>
 
-              <ul class="ps-0 mb-0 list-unstyled tags">
-                <li>
-                  <NuxtLink to="/tags">Smartphone</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/tags">Laptop</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/tags">AirPod</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/tags">Tablet</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/tags">Headphone</NuxtLink>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </v-col>
-      </v-row>
+      <div v-else class="text-center text-muted py-5">
+        <p class="mb-3">{{ error ? t('catalog.loadError') : t('catalog.empty') }}</p>
+        <button v-if="error" type="button" class="btn btn-success text-white rounded-pill" @click="reload">
+          {{ t('catalog.retry') }}
+        </button>
+        <NuxtLink v-else to="/products" class="btn btn-success text-white rounded-pill">
+          {{ t('catalog.allProducts') }}
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: "Tags",
-};
-</script>
+<style scoped>
+.category-card {
+  transition: box-shadow 0.25s;
+}
+.category-card:hover {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+}
+</style>

package/components/Checkout/AddressFields.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="form-group mb-3" data-field="city">
+      <label class="label">{{ t('checkout.city') }} *</label>
+      <input v-model="model.cityText" class="form-control" :class="{ 'is-invalid': errors.city }" autocomplete="address-level2" :placeholder="t('checkout.city')" />
+      <div v-if="errors.city" class="invalid-feedback d-block">{{ errors.city }}</div>
+    </div>
+
+    <!-- Кур'єр: вулиця / будинок / квартира; склеюються в одне поле address для payload -->
+    <template v-if="streetMode">
+      <div class="row g-3" data-field="address">
+        <div class="col-12 col-md-6">
+          <label class="label">{{ t('checkout.street') }} *</label>
+          <input v-model="street" class="form-control" :class="{ 'is-invalid': errors.address && !street.trim() }" autocomplete="address-line1" :placeholder="t('checkout.streetPlaceholder')" />
+        </div>
+        <div class="col-6 col-md-3">
+          <label class="label">{{ t('checkout.house') }}</label>
+          <input v-model="house" class="form-control" :class="{ 'is-invalid': errors.address && !street.trim() }" />
+        </div>
+        <div class="col-6 col-md-3">
+          <label class="label">{{ t('checkout.apartment') }}</label>
+          <input v-model="flat" class="form-control" />
+        </div>
+      </div>
+      <div v-if="errors.address" class="invalid-feedback d-block">{{ errors.address }}</div>
+    </template>
+    <div v-else class="form-group mb-3" data-field="address">
+      <label class="label">{{ t('checkout.address') }} *</label>
+      <input v-model="model.address" class="form-control" :class="{ 'is-invalid': errors.address }" autocomplete="address-line1" :placeholder="t('checkout.addressPlaceholder')" />
+      <div v-if="errors.address" class="invalid-feedback d-block">{{ errors.address }}</div>
+    </div>
+
+    <div v-if="postcode" class="form-group mt-3" data-field="postcode">
+      <label class="label">{{ t('checkout.postalCode') }} *</label>
+      <input
+        :value="model.postcode"
+        class="form-control postcode-input"
+        :class="{ 'is-invalid': errors.postcode }"
+        inputmode="numeric"
+        maxlength="5"
+        placeholder="01001"
+        autocomplete="postal-code"
+        @input="model.postcode = ($event.target as HTMLInputElement).value.replace(/\D/g, '').slice(0, 5)"
+      />
+      <small class="text-muted d-block">{{ t('checkout.postalHint') }}</small>
+      <div v-if="errors.postcode" class="invalid-feedback d-block">{{ errors.postcode }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { DeliveryState, FieldErrors } from './types';
+
+// Поля адресної доставки (кур'єр, Укрпошта)
+const props = defineProps<{ errors: FieldErrors; postcode?: boolean; streetMode?: boolean }>();
+const model = defineModel<DeliveryState>({ required: true });
+const { t } = useI18n();
+
+const street = ref('');
+const house = ref('');
+const flat = ref('');
+watch([street, house, flat, () => props.streetMode], () => {
+  if (!props.streetMode) return;
+  const parts = [street.value.trim()];
+  if (house.value.trim()) parts.push(`буд. ${house.value.trim()}`);
+  if (flat.value.trim()) parts.push(`кв. ${flat.value.trim()}`);
+  model.value.address = street.value.trim() ? parts.join(', ') : '';
+});
+</script>
+
+<style scoped>
+.postcode-input { max-width: 140px; letter-spacing: 2px; }
+</style>

package/components/Checkout/CheckoutForm.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="checkout-card" data-field="contacts">
+    <h3>{{ t('checkout.contactTitle') }}</h3>
+    <div class="row g-3">
+      <div class="col-12 col-md-6" data-field="name">
+        <label class="label">{{ t('checkout.fullName') }} *</label>
+        <input
+          v-model="model.name"
+          type="text"
+          class="form-control"
+          :class="{ 'is-invalid': errors.name }"
+          autocomplete="name"
+          :placeholder="t('checkout.fullNamePlaceholder')"
+        />
+        <div v-if="errors.name" class="invalid-feedback d-block">{{ errors.name }}</div>
+      </div>
+      <div class="col-12 col-md-6" data-field="phone">
+        <label class="label">{{ t('checkout.phone') }} *</label>
+        <input
+          :value="model.phone"
+          type="tel"
+          class="form-control"
+          :class="{ 'is-invalid': errors.phone }"
+          autocomplete="tel"
+          inputmode="tel"
+          placeholder="+380 XX XXX XX XX"
+          @input="onPhone"
+        />
+        <small v-if="!errors.phone" class="text-muted">{{ t('checkout.phoneHint') }}</small>
+        <div v-if="errors.phone" class="invalid-feedback d-block">{{ errors.phone }}</div>
+      </div>
+      <div class="col-12" data-field="email">
+        <label class="label">{{ t('checkout.emailOptional') }}</label>
+        <input
+          v-model="model.email"
+          type="email"
+          class="form-control"
+          :class="{ 'is-invalid': errors.email }"
+          autocomplete="email" required
+          placeholder="name@example.com"
+        />
+        <small v-if="!errors.email" class="text-muted">{{ t('checkout.emailHint') }}</small>
+        <div v-if="errors.email" class="invalid-feedback d-block">{{ errors.email }}</div>
+      </div>
+      <div class="col-12">
+        <label class="label">{{ t('checkout.comment') }}</label>
+        <textarea v-model="model.comment" class="form-control" :placeholder="t('checkout.notes')" rows="3"></textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContactState, FieldErrors } from './types';
+
+// Контактні дані покупця: мутуємо поля спільного reactive-обʼєкта
+defineProps<{ errors: FieldErrors }>();
+const model = defineModel<ContactState>({ required: true });
+const { t } = useI18n();
+
+// Маска телефону: +380 XX XXX XX XX (normalizePhone приймає і цей формат)
+const onPhone = (e: Event) => {
+  const el = e.target as HTMLInputElement;
+  let d = el.value.replace(/\D/g, '');
+  if (!d) { model.value.phone = ''; el.value = ''; return; }
+  if (d.startsWith('380')) d = d.slice(3);
+  else if (d.startsWith('38')) d = d.slice(2);
+  else if (d.startsWith('0')) d = d.slice(1);
+  d = d.slice(0, 9);
+  const g = [d.slice(0, 2), d.slice(2, 5), d.slice(5, 7), d.slice(7, 9)].filter(Boolean);
+  const v = '+380' + (g.length ? ' ' + g.join(' ') : '');
+  model.value.phone = v;
+  el.value = v;
+};
+</script>

package/components/Checkout/CityAutocomplete.vue

@@ -0,0 +1,68 @@
+<template>
+  <div ref="root" class="city-ac position-relative">
+    <input
+      :value="modelValue"
+      class="form-control"
+      :class="{ 'is-invalid': invalid }"
+      autocomplete="off"
+      :placeholder="placeholder"
+      @focus="open = true"
+      @input="onInput"
+    />
+    <div v-if="open && (loading || items.length || showEmpty || error)" class="dropdown-menu show w-100 ac-menu">
+      <div v-if="loading" class="dropdown-item-text text-muted">
+        <span class="spinner-border spinner-border-sm me-2"></span>{{ t('checkout.searchingShort') }}
+      </div>
+      <div v-else-if="error" class="dropdown-item-text text-danger">{{ error }}</div>
+      <template v-else>
+        <button v-for="it in items" :key="it.key" type="button" class="dropdown-item" @click="pick(it)">
+          {{ it.title }}<span v-if="it.sub" class="text-muted">, {{ it.sub }}</span>
+        </button>
+        <div v-if="!items.length && showEmpty" class="dropdown-item-text text-muted">{{ t('checkout.nothingFound') }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+// Поле з випадаючим списком (міста / відділення): сам список і пошук надає батьківський компонент
+export interface AcItem { key: string; title: string; sub?: string; raw: any }
+defineProps<{
+  modelValue: string;
+  items: AcItem[];
+  loading?: boolean;
+  error?: string;
+  invalid?: boolean;
+  placeholder?: string;
+  showEmpty?: boolean; // показувати «Нічого не знайдено» при порожньому списку
+}>();
+const emit = defineEmits<{ 'update:modelValue': [string]; input: [string]; pick: [any] }>();
+const { t } = useI18n();
+
+const open = ref(false);
+const root = ref<HTMLElement | null>(null);
+
+const onInput = (e: Event) => {
+  const v = (e.target as HTMLInputElement).value;
+  open.value = true;
+  emit('update:modelValue', v);
+  emit('input', v);
+};
+const pick = (it: AcItem) => {
+  open.value = false;
+  emit('pick', it.raw);
+};
+const onDoc = (e: MouseEvent) => {
+  if (root.value && !root.value.contains(e.target as Node)) open.value = false;
+};
+onMounted(() => document.addEventListener('click', onDoc));
+onBeforeUnmount(() => document.removeEventListener('click', onDoc));
+</script>
+
+<style scoped>
+.ac-menu { max-height: 260px; overflow: auto; margin-top: 2px; }
+.dropdown-item { white-space: normal; }
+.dropdown-item:hover, .dropdown-item:focus { background: rgba(117, 179, 68, 0.15); color: inherit; }
+</style>