@crm-market/template-shared 1.0.1 → 1.0.3

package/composables/useCategories.ts

@@ -1,4 +1,6 @@
 import { ref, computed } from 'vue';
+import { useRuntimeConfig } from '#imports';
+import { useSiteConfig } from './useSiteConfig';
 
 interface Category {
   id: string;

package/composables/useCheckout.ts

@@ -1,4 +1,7 @@
 import { ref } from 'vue';
+import { useRuntimeConfig } from '#imports';
+import { useCart } from './useCart';
+import { useSiteConfig } from './useSiteConfig';
 
 interface ShippingAddress {
   firstName: string;

package/composables/useProducts.ts

@@ -1,4 +1,6 @@
 import { ref, computed } from 'vue';
+import { useRuntimeConfig } from '#imports';
+import { useSiteConfig } from './useSiteConfig';
 
 interface Product {
   id: string;

package/composables/useSiteConfig.ts

@@ -1,4 +1,5 @@
 import { ref, computed } from 'vue';
+import { useRuntimeConfig, useRoute } from '#imports';
 
 interface ColorScheme {
   primary?: string;

package/composables/useTemplateSections.ts

@@ -1,5 +1,6 @@
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import type { TemplateSection, ContentBlock } from '../types';
+import { useSiteConfig } from './useSiteConfig';
 
 /**
  * Composable для управління секціями homepage.

package/modules/auto-imports.ts

@@ -0,0 +1,20 @@
+import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir } from '@nuxt/kit';
+
+export default defineNuxtModule({
+  meta: {
+    name: 'template-shared-auto-imports',
+  },
+  setup(_options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+
+    // Реєстрація composables як auto-imports
+    addImportsDir(resolve('../composables'));
+    addImportsDir(resolve('../utils'));
+
+    // Реєстрація components
+    addComponentsDir({
+      path: resolve('../components'),
+      pathPrefix: false,
+    });
+  },
+});

package/nuxt.config.ts

@@ -42,6 +42,8 @@ export default defineNuxtConfig({
   },
 
   modules: [
+    // Auto-imports composables, utils, components для npm-пакету
+    resolve(__dirname, 'modules/auto-imports'),
     (
       _options: any,
       nuxt: {
@@ -81,16 +83,5 @@ export default defineNuxtConfig({
     },
   },
 
-  components: [
-    { path: resolve(__dirname, 'components'), pathPrefix: false },
-  ],
-
-  imports: {
-    dirs: [
-      resolve(__dirname, 'composables'),
-      resolve(__dirname, 'utils'),
-    ],
-  },
-
   compatibilityDate: "2026-01-02",
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crm-market/template-shared",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "Shared Nuxt 3 layer for CRM Market store templates (layouts, components, composables, pages)",
   "publishConfig": {
@@ -21,18 +21,18 @@
     "plugins",
     "types",
     "utils",
-    "e2e"
+    "modules"
   ],
   "dependencies": {
     "bootstrap": "^5.3.3",
     "nuxt": "^3.12.4",
     "nuxt-swiper": "^1.2.2",
     "vue": "^3.4.34",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.0",
+    "vuetify": "^3.6.13",
+    "vite-plugin-vuetify": "^2.0.3"
   },
   "devDependencies": {
-    "sass": "^1.77.8",
-    "vite-plugin-vuetify": "^2.0.3",
-    "vuetify": "^3.6.13"
+    "sass": "^1.77.8"
   }
 }

package/plugins/site-init.client.ts

@@ -1,3 +1,8 @@
+import { defineNuxtPlugin } from '#app';
+import { useSiteConfig } from '../composables/useSiteConfig';
+import { useCart } from '../composables/useCart';
+import { useCategories } from '../composables/useCategories';
+
 export default defineNuxtPlugin(async () => {
   const { fetchConfig, error } = useSiteConfig();
   const { loadCart } = useCart();

package/utils/image.ts

@@ -1,3 +1,5 @@
+import { useRuntimeConfig } from '#imports';
+
 /**
  * Перетворює відносні шляхи до зображень (/media/...) у повні URL
  */

package/e2e/cart.spec.ts

@@ -1,71 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { setupMockApi } from './fixtures/mock-api';
-import { CartPage } from './pages/cart.page';
-
-test.describe('Кошик', () => {
-  let cartPage: CartPage;
-
-  test.beforeEach(async ({ page }) => {
-    await setupMockApi(page);
-    cartPage = new CartPage(page);
-  });
-
-  test('порожній кошик при першому відвідуванні', async () => {
-    await cartPage.goto();
-    // Кошик має бути порожнім або показувати повідомлення
-    const isEmpty = await cartPage.isEmpty();
-    const itemCount = await cartPage.getItemCount();
-    expect(isEmpty || itemCount === 0).toBeTruthy();
-  });
-
-  test('відображає кошик з товарами після додавання', async ({ page }) => {
-    // Додаємо товар у localStorage перед переходом
-    await page.goto('/');
-    await page.evaluate(() => {
-      const cart = {
-        items: [{
-          productId: 'product-1',
-          name: 'Тестовий товар 1',
-          price: 1500,
-          discountPrice: 1200,
-          quantity: 2,
-          image: '/media/test/product-1.png',
-        }],
-        updatedAt: Date.now(),
-      };
-      localStorage.setItem('shopping_cart', JSON.stringify(cart));
-    });
-
-    await cartPage.goto();
-    await page.waitForTimeout(1000);
-
-    // Має бути хоча б один товар
-    const count = await cartPage.getItemCount();
-    expect(count).toBeGreaterThanOrEqual(1);
-  });
-
-  test('має кнопку оформлення замовлення', async ({ page }) => {
-    // Додаємо товар у localStorage
-    await page.goto('/');
-    await page.evaluate(() => {
-      const cart = {
-        items: [{
-          productId: 'product-1',
-          name: 'Тестовий товар',
-          price: 1500,
-          quantity: 1,
-        }],
-        updatedAt: Date.now(),
-      };
-      localStorage.setItem('shopping_cart', JSON.stringify(cart));
-    });
-
-    await cartPage.goto();
-    await page.waitForTimeout(1000);
-
-    const checkoutBtn = cartPage.checkoutButton;
-    if (await checkoutBtn.isVisible()) {
-      await expect(checkoutBtn).toBeEnabled();
-    }
-  });
-});

package/e2e/fixtures/mock-api.ts

@@ -1,166 +0,0 @@
-import type { Page } from '@playwright/test';
-
-/**
- * Фікстура для моку API відповідей.
- * Використовується для тестування без реального бекенду.
- */
-
-export const MOCK_SITE_CONFIG = {
-  id: 'test-config-id',
-  organizationId: 'test-org-id',
-  publicApiToken: 'pub_test_token_12345',
-  siteName: 'Тестовий магазин',
-  siteDescription: 'Інтернет-магазин для тестування',
-  logoUrl: '/media/test/logo.png',
-  faviconUrl: '/media/test/favicon.ico',
-  heroImageUrl: '/media/test/hero.png',
-  contactInfo: {
-    phone: '+380501234567',
-    email: 'test@example.com',
-    address: 'м. Київ, вул. Тестова, 1',
-    socialMedia: {
-      facebook: 'https://facebook.com/test',
-      instagram: 'https://instagram.com/test',
-    },
-  },
-  subdomain: 'test-shop',
-  isPublished: true,
-  template: {
-    code: 'electronics',
-    name: 'Electronics',
-    type: 'electronics',
-  },
-  customization: {
-    colors: {
-      primary: '#5093f7',
-      secondary: '#22262a',
-      accent: '#f7931e',
-    },
-    contentBlocks: [
-      { key: 'todayBestDeals', order: 1, enabled: true },
-      { key: 'thisMonthSales', order: 2, enabled: true },
-    ],
-  },
-};
-
-export const MOCK_PRODUCTS = {
-  products: [
-    {
-      id: 'product-1',
-      name: 'Тестовий товар 1',
-      price: 1500,
-      discountPrice: 1200,
-      images: ['/media/test/product-1.png'],
-      categoryId: 'cat-1',
-      organizationId: 'test-org-id',
-      isActive: true,
-      stock: 10,
-      rating: 4.5,
-      reviews: 12,
-    },
-    {
-      id: 'product-2',
-      name: 'Тестовий товар 2',
-      price: 2500,
-      images: ['/media/test/product-2.png'],
-      categoryId: 'cat-1',
-      organizationId: 'test-org-id',
-      isActive: true,
-      stock: 5,
-      rating: 4.0,
-      reviews: 8,
-    },
-    {
-      id: 'product-3',
-      name: 'Тестовий товар 3',
-      price: 800,
-      discountPrice: 600,
-      images: ['/media/test/product-3.png'],
-      categoryId: 'cat-2',
-      organizationId: 'test-org-id',
-      isActive: true,
-      stock: 20,
-      rating: 3.8,
-      reviews: 5,
-    },
-  ],
-  total: 3,
-};
-
-export const MOCK_CATEGORIES = {
-  categories: [
-    {
-      id: 'cat-1',
-      name: 'Електроніка',
-      slug: 'electronics',
-      image: '/media/test/cat-1.png',
-      organizationId: 'test-org-id',
-      isActive: true,
-      order: 1,
-    },
-    {
-      id: 'cat-2',
-      name: 'Аксесуари',
-      slug: 'accessories',
-      image: '/media/test/cat-2.png',
-      organizationId: 'test-org-id',
-      isActive: true,
-      order: 2,
-    },
-  ],
-};
-
-/**
- * Налаштовує моки API для сторінки.
- */
-export async function setupMockApi(page: Page) {
-  // Мок конфігурації сайту
-  await page.route('**/site-template/public/config/subdomain/**', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify(MOCK_SITE_CONFIG),
-    });
-  });
-
-  // Мок товарів
-  await page.route('**/site-template/public/store/products*', async (route) => {
-    const url = new URL(route.request().url());
-    const productId = url.pathname.match(/products\/(.+)/)?.[1];
-
-    if (productId) {
-      const product = MOCK_PRODUCTS.products.find(p => p.id === productId);
-      await route.fulfill({
-        status: product ? 200 : 404,
-        contentType: 'application/json',
-        body: JSON.stringify(product ? { product } : { error: 'Not found' }),
-      });
-    } else {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(MOCK_PRODUCTS),
-      });
-    }
-  });
-
-  // Мок категорій
-  await page.route('**/site-template/public/store/categories*', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify(MOCK_CATEGORIES),
-    });
-  });
-
-  // Мок замовлень
-  await page.route('**/order', async (route) => {
-    if (route.request().method() === 'POST') {
-      await route.fulfill({
-        status: 201,
-        contentType: 'application/json',
-        body: JSON.stringify({ id: 'order-test-123' }),
-      });
-    }
-  });
-}

package/e2e/homepage.spec.ts

@@ -1,65 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { setupMockApi } from './fixtures/mock-api';
-import { HomepagePage } from './pages/homepage.page';
-
-test.describe('Головна сторінка', () => {
-  let homepage: HomepagePage;
-
-  test.beforeEach(async ({ page }) => {
-    await setupMockApi(page);
-    homepage = new HomepagePage(page);
-    await homepage.goto();
-  });
-
-  test('відображає header з логотипом', async ({ page }) => {
-    // Header має бути видимим
-    await expect(page.locator('.middle-header-area, .header-area').first()).toBeVisible();
-  });
-
-  test('відображає банер', async ({ page }) => {
-    // Банер або swiper має бути видимим
-    await expect(page.locator('.banner-area, .swiper, .banner-wrapper').first()).toBeVisible();
-  });
-
-  test('відображає footer', async ({ page }) => {
-    // Скролимо вниз і перевіряємо footer
-    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
-    await expect(page.locator('.footer-area, footer').first()).toBeVisible();
-  });
-
-  test('має коректний title з конфігурації', async ({ page }) => {
-    // Чекаємо поки title оновиться з API конфігу
-    await page.waitForTimeout(2000);
-    const title = await page.title();
-    expect(title).toBeTruthy();
-  });
-
-  test('навігація до сторінки товарів', async ({ page }) => {
-    // Шукаємо посилання на товари
-    const productsLink = page.locator('a[href*="products"], a:has-text("Products"), a:has-text("Товари")').first();
-    if (await productsLink.isVisible()) {
-      await productsLink.click();
-      await expect(page).toHaveURL(/products/);
-    }
-  });
-
-  test('навігація до кошика', async ({ page }) => {
-    const cartLink = page.locator('a[href*="cart"], .cart-btn').first();
-    if (await cartLink.isVisible()) {
-      await cartLink.click();
-      await expect(page).toHaveURL(/cart/);
-    }
-  });
-});
-
-test.describe('SSR', () => {
-  test('сторінка має серверний HTML контент', async ({ page }) => {
-    await setupMockApi(page);
-    // Перевіряємо що HTML рендериться server-side (не порожній body)
-    const response = await page.goto('/');
-    const html = await response?.text();
-    expect(html).toContain('<!DOCTYPE html>');
-    // Має містити хоча б базову розмітку
-    expect(html).toContain('<div');
-  });
-});

package/e2e/layout.spec.ts

@@ -1,73 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { setupMockApi } from './fixtures/mock-api';
-
-test.describe('Layout — шари візуалізації', () => {
-  test.beforeEach(async ({ page }) => {
-    await setupMockApi(page);
-  });
-
-  test('головна сторінка: правильний порядок шарів', async ({ page }) => {
-    await page.goto('/');
-
-    // Перевіряємо порядок: TopHeader -> MiddleHeader -> Navbar -> Content -> Footer
-    const body = page.locator('body');
-    const html = await body.innerHTML();
-
-    // TopHeader має бути перед MiddleHeader
-    const topHeaderPos = html.indexOf('top-header');
-    const middleHeaderPos = html.indexOf('middle-header');
-    const navbarPos = html.indexOf('navbar-area');
-
-    if (topHeaderPos > -1 && middleHeaderPos > -1) {
-      expect(topHeaderPos).toBeLessThan(middleHeaderPos);
-    }
-    if (middleHeaderPos > -1 && navbarPos > -1) {
-      expect(middleHeaderPos).toBeLessThan(navbarPos);
-    }
-  });
-
-  test('внутрішня сторінка: має page banner', async ({ page }) => {
-    await page.goto('/about-us');
-
-    // Inner layout має мати page banner замість основного banner
-    const pageBanner = page.locator('.page-banner-area, .breadcrumb-area').first();
-    await expect(pageBanner).toBeVisible({ timeout: 5000 });
-  });
-
-  test('footer містить контактну інформацію', async ({ page }) => {
-    await page.goto('/');
-    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
-
-    const footer = page.locator('.footer-area, footer').first();
-    await expect(footer).toBeVisible();
-  });
-
-  test('back-to-top кнопка з\'являється при скролі', async ({ page }) => {
-    await page.goto('/');
-
-    // Скролимо вниз
-    await page.evaluate(() => window.scrollTo(0, 1000));
-    await page.waitForTimeout(1000);
-
-    const backToTop = page.locator('.back-to-top-btn, .scroll-top, #scrollTop').first();
-    if (await backToTop.count() > 0) {
-      await expect(backToTop).toBeVisible({ timeout: 3000 });
-    }
-  });
-});
-
-test.describe('Layout — динамічний вибір компонентів', () => {
-  test('CSS змінні застосовуються з конфігурації', async ({ page }) => {
-    await setupMockApi(page);
-    await page.goto('/');
-    await page.waitForTimeout(2000);
-
-    // Перевіряємо що CSS змінні встановлені
-    const primaryColor = await page.evaluate(() => {
-      return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
-    });
-
-    // Має бути або з API (#5093f7) або дефолтне значення
-    expect(primaryColor).toBeTruthy();
-  });
-});

package/e2e/navigation.spec.ts

@@ -1,61 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { setupMockApi } from './fixtures/mock-api';
-
-test.describe('Навігація між сторінками', () => {
-  test.beforeEach(async ({ page }) => {
-    await setupMockApi(page);
-  });
-
-  const pages = [
-    { path: '/about-us', title: 'Про нас' },
-    { path: '/contact', title: 'Контакти' },
-    { path: '/products', title: 'Товари' },
-    { path: '/categories', title: 'Категорії' },
-    { path: '/cart', title: 'Кошик' },
-    { path: '/login', title: 'Увійти' },
-    { path: '/register', title: 'Реєстрація' },
-    { path: '/faq', title: 'Часті запитання' },
-    { path: '/terms-conditions', title: 'Умови' },
-    { path: '/privacy-policy', title: 'Політика' },
-  ];
-
-  for (const p of pages) {
-    test(`відкривається сторінка ${p.path}`, async ({ page }) => {
-      const response = await page.goto(p.path);
-      expect(response?.status()).toBeLessThan(500);
-
-      // Сторінка має рендеритись без помилок
-      const errorOverlay = page.locator('#nuxt-error, .nuxt-error-page');
-      const hasError = await errorOverlay.isVisible().catch(() => false);
-
-      if (!hasError) {
-        // Перевіряємо наявність page banner
-        const banner = page.locator('.page-banner-area, .breadcrumb').first();
-        await expect(banner).toBeVisible({ timeout: 5000 }).catch(() => {
-          // Деякі сторінки можуть не мати banner — це ок
-        });
-      }
-    });
-  }
-});
-
-test.describe('Responsive навігація', () => {
-  test.beforeEach(async ({ page }) => {
-    await setupMockApi(page);
-  });
-
-  test('мобільне меню відкривається', async ({ page }) => {
-    // Встановлюємо мобільний viewport
-    await page.setViewportSize({ width: 375, height: 812 });
-    await page.goto('/');
-
-    // Шукаємо кнопку мобільного меню
-    const menuButton = page.locator('.navbar-toggler, .hamburger-menu, .ri-menu-line, button[aria-label*="menu"]').first();
-    if (await menuButton.isVisible()) {
-      await menuButton.click();
-      // Перевіряємо що мобільне меню з'явилось
-      const mobileMenu = page.locator('.responsive-navbar, .mobile-menu, .offcanvas, .sidebar-menu').first();
-      await expect(mobileMenu).toBeVisible({ timeout: 3000 });
-    }
-  });
-});

package/e2e/pages/cart.page.ts

@@ -1,44 +0,0 @@
-import type { Page, Locator } from '@playwright/test';
-
-/**
- * Page Object для сторінки кошика.
- */
-export class CartPage {
-  readonly page: Page;
-  readonly cartItems: Locator;
-  readonly emptyCartMessage: Locator;
-  readonly subtotal: Locator;
-  readonly checkoutButton: Locator;
-  readonly removeButtons: Locator;
-  readonly quantityInputs: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.cartItems = page.locator('.cart-item, .cart-table tbody tr');
-    this.emptyCartMessage = page.locator('.empty-cart, :text("порожній"), :text("empty")');
-    this.subtotal = page.locator('.subtotal, .cart-total');
-    this.checkoutButton = page.locator('a[href*="checkout"], button:has-text("Checkout"), button:has-text("Оформити")');
-    this.removeButtons = page.locator('.remove-btn, .ri-delete-bin-line, .ri-close-line');
-    this.quantityInputs = page.locator('.quantity-input, input[type="number"]');
-  }
-
-  async goto() {
-    await this.page.goto('/cart');
-  }
-
-  async getItemCount() {
-    return await this.cartItems.count();
-  }
-
-  async removeItem(index: number) {
-    await this.removeButtons.nth(index).click();
-  }
-
-  async proceedToCheckout() {
-    await this.checkoutButton.click();
-  }
-
-  async isEmpty() {
-    return await this.emptyCartMessage.isVisible();
-  }
-}

package/e2e/pages/homepage.page.ts

@@ -1,46 +0,0 @@
-import type { Page, Locator } from '@playwright/test';
-
-/**
- * Page Object для головної сторінки шаблону.
- */
-export class HomepagePage {
-  readonly page: Page;
-  readonly topHeader: Locator;
-  readonly middleHeader: Locator;
-  readonly navbar: Locator;
-  readonly banner: Locator;
-  readonly footer: Locator;
-  readonly searchInput: Locator;
-  readonly cartIcon: Locator;
-  readonly logo: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.topHeader = page.locator('.top-header-area');
-    this.middleHeader = page.locator('.middle-header-area');
-    this.navbar = page.locator('.navbar-area');
-    this.banner = page.locator('.banner-area, .swiper');
-    this.footer = page.locator('.footer-area');
-    this.searchInput = page.locator('.search-input, input[type="search"], .search-box input');
-    this.cartIcon = page.locator('.cart-btn, .ri-shopping-cart-line').first();
-    this.logo = page.locator('.logo img, .navbar-brand img').first();
-  }
-
-  async goto() {
-    await this.page.goto('/');
-  }
-
-  async searchProduct(query: string) {
-    await this.searchInput.fill(query);
-    await this.searchInput.press('Enter');
-  }
-
-  async openCart() {
-    await this.cartIcon.click();
-  }
-
-  async getSectionCount() {
-    // Підраховує кількість видимих секцій на головній сторінці
-    return await this.page.locator('section, .section-area, [class*="area"]').count();
-  }
-}

package/e2e/playwright.config.ts

@@ -1,32 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-/**
- * Базова конфігурація Playwright для шаблонів магазинів.
- * Кожен шаблон може розширити цю конфігурацію, змінивши baseURL та порт.
- */
-export default defineConfig({
-  testDir: '.',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
-  timeout: 30_000,
-
-  use: {
-    baseURL: process.env.BASE_URL || 'http://localhost:3000',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-  },
-
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    {
-      name: 'mobile',
-      use: { ...devices['iPhone 14'] },
-    },
-  ],
-});

package/e2e/products.spec.ts

@@ -1,33 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { setupMockApi } from './fixtures/mock-api';
-import { ProductsPage } from './pages/products.page';
-
-test.describe('Сторінка товарів', () => {
-  let productsPage: ProductsPage;
-
-  test.beforeEach(async ({ page }) => {
-    await setupMockApi(page);
-    productsPage = new ProductsPage(page);
-    await productsPage.goto();
-  });
-
-  test('відображає банер сторінки', async ({ page }) => {
-    await expect(page.locator('.page-banner-area, .breadcrumb').first()).toBeVisible();
-  });
-
-  test('відображає товари з API', async () => {
-    // Чекаємо завантаження товарів
-    await productsPage.page.waitForTimeout(2000);
-    const count = await productsPage.getProductCount();
-    expect(count).toBeGreaterThan(0);
-  });
-
-  test('товар має назву та ціну', async ({ page }) => {
-    await page.waitForTimeout(2000);
-    // Перевіряємо що є текст з цінами (грн або числа)
-    const priceElements = page.locator('.product-card .price, .product-item .price, .product-price');
-    if (await priceElements.count() > 0) {
-      await expect(priceElements.first()).toBeVisible();
-    }
-  });
-});