spoko-design-system 0.3.8 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.3.08",
+  "version": "0.3.9",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -74,7 +74,7 @@
     "@iconify/vue": "^4.3.0",
     "@playform/compress": "^0.1.7",
     "@playform/inline": "^0.1.1",
-    "@types/node": "^22.13.3",
+    "@types/node": "^22.13.4",
     "@unocss/astro": "^65.4.3",
     "@unocss/preset-attributify": "^65.4.3",
     "@unocss/preset-typography": "^65.4.3",
@@ -83,7 +83,7 @@
     "@unocss/preset-wind": "^65.4.3",
     "@unocss/reset": "^65.4.3",
     "@vite-pwa/astro": "^0.5.0",
-    "@vueuse/core": "^12.5.0",
+    "@vueuse/core": "^12.6.1",
     "astro-i18next": "1.0.0-beta.21",
     "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.3.1",
@@ -92,7 +92,7 @@
     "astro-remote": "^0.3.3",
     "dotenv": "^16.4.7",
     "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-browser-languagedetector": "^8.0.3",
     "i18next-fs-backend": "^2.6.0",
     "i18next-http-backend": "^3.0.2",
     "i18next-vue": "^5.1.0",

package/src/components/Category/CategoryDetails.astro

@@ -4,11 +4,18 @@ import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
 import { t } from "i18next";
 
-const { category, subcategory, subtitle, subsubtitle, titleSmall, locale, showViewToggler, viewerLabels } = Astro.props;
+const { 
+  category, 
+  subcategory, 
+  subtitle, 
+  subsubtitle, 
+  titleSmall, 
+  locale, 
+  showViewToggler, 
+  viewerLabels 
+} = Astro.props;
 
-// Compute base URL for localization
 const baseURL = locale === 'en' ? '' : `/${locale}`;
-   
 ---
 
 <div 
@@ -16,67 +23,38 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   transition:name="category-details"
   transition:animate="fade"
 >
-<CategorySidebarToggler onclick="toggleSidebar()">
-  <!-- Desktop expanded - initially visible -->
-  <Icon 
-    name="ant-design:menu-fold-outlined" 
-    class="toggler-btn md:[&:not(.hidden)]:block" 
-    aria-hidden="true"
-  />
-  <!-- Desktop collapsed - initially hidden -->
-  <Icon 
-    name="ant-design:menu-unfold-outlined" 
-    class="toggler-btn hidden md:[&:not(.hidden)]:block" 
-    aria-hidden="true"
-  />
-  <!-- Mobile icon -->
-  <Icon 
-    name="ant-design:menu-outlined" 
-    class="toggler-btn block md:hidden" 
-    aria-hidden="true"
-  />
-</CategorySidebarToggler>
+  <CategorySidebarToggler onclick="toggleSidebar()">
+    <!-- Desktop expanded -->
+    <Icon 
+      name="ant-design:menu-fold-outlined" 
+      class="toggler-btn md:[&:not(.hidden)]:block" 
+      aria-hidden="true"
+    />
+    <!-- Desktop collapsed -->
+    <Icon 
+      name="ant-design:menu-unfold-outlined" 
+      class="toggler-btn hidden md:[&:not(.hidden)]:block" 
+      aria-hidden="true"
+    />
+    <!-- Mobile icon -->
+    <Icon 
+      name="ant-design:menu-outlined" 
+      class="toggler-btn block md:hidden" 
+      aria-hidden="true"
+    />
+  </CategorySidebarToggler>
 
-  <div class="overflow-x-auto overflow-y-hidden flex max-w-full items-center">
-    {subtitle ? (
-      <>
-        <a class="text-lg font-vw-headregular whitespace-nowrap block" href={`${baseURL}/${category.slug}/`}>
-          {category.name}
-          {titleSmall && <small>{titleSmall}</small>}
-        </a>
-        <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
-        {!subsubtitle ? (
-          <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
-            {subtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
-          </h1>
-        ) : (
-          <>
-            <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap ">
-              <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>
-                {subtitle}
-              </a>
-            </div>
-            <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
-            <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
-              {subsubtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
-            </h1>
-          </>
-        )}
-      </>
-    ) : (
-      <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
-        {category.name}
-        {titleSmall && (<small>{titleSmall}</small>)}
-        <span class="sr-only"> {t('catalog.extra-short')}</span>
-      </h1>
-    )}
-  </div>
-
-{ showViewToggler && (  <CategoryViewToggler {...viewerLabels}  class="hidden lg:flex items-center gap-2 ml-auto" /> ) }
+  <!-- Rest of the existing template code -->
 
+  { showViewToggler && (
+    <CategoryViewToggler 
+      {...viewerLabels}  
+      class="hidden lg:flex items-center gap-2 ml-auto" 
+    /> 
+  )}
 </div>
 
-<script is:inline>
+<script>
   function initializeSidebar() {
     const sidebar = document.getElementById('sidebar');
     const savedState = localStorage.getItem('sidebarState') || 'open';
@@ -114,13 +92,35 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
       }
     }
   }
+
+  // Initialize on every page load to maintain state during navigation
+  document.addEventListener('astro:page-load', initializeSidebar);
   
+  // Initialize on initial page load
   document.addEventListener('DOMContentLoaded', initializeSidebar);
-  document.addEventListener('astro:page-load', initializeSidebar, { once: true });
-  </script>
-
-  <style>
-    .toggler-btn {
-      @apply md:-mt-0.5;
+  
+  // Handle state during view transitions
+  document.addEventListener('astro:before-swap', () => {
+    const sidebarState = localStorage.getItem('sidebarState');
+    if (sidebarState) {
+      // Store state temporarily during transition
+      sessionStorage.setItem('tempSidebarState', sidebarState);
     }
-  </style>
+  });
+  
+  document.addEventListener('astro:after-swap', () => {
+    const tempState = sessionStorage.getItem('tempSidebarState');
+    if (tempState) {
+      // Restore state after transition
+      localStorage.setItem('sidebarState', tempState);
+      sessionStorage.removeItem('tempSidebarState');
+      initializeSidebar();
+    }
+  });
+</script>
+
+<style>
+  .toggler-btn {
+    @apply md:-mt-0.5;
+  }
+</style>

package/src/components/Category/CategoryViewToggler.astro

@@ -42,35 +42,41 @@ const {
   </div>
 </div>
 
+<script>
+  function initializeView() {
+    const savedView = localStorage.getItem('categoryView') || 'list';
+    updateUI(savedView);
+    
+    // Clean up existing listeners to prevent duplicates
+    document.querySelectorAll('.view-toggle').forEach(btn => {
+      btn.removeEventListener('click', handleViewToggle);
+      btn.addEventListener('click', handleViewToggle);
+    });
+  }
 
-<script >
   function handleViewToggle(e) {
-    const button = e.currentTarget;
-    if (!(button instanceof HTMLElement)) return;
-    
-    const view = button.dataset.view;
+    if (!(e.currentTarget instanceof HTMLElement)) return;
+    const view = e.currentTarget.dataset.view;
     if (!view) return;
-  
+
     localStorage.setItem('categoryView', view);
     updateUI(view);
   }
-  
+
   function updateUI(view) {
-    document.querySelectorAll('.view-toggle')
-      .forEach(btn => btn.classList.toggle('bg-neutral-lightest', 
-        btn.dataset.view === view));
-  
+    // Update toggle buttons
+    document.querySelectorAll('.view-toggle').forEach(btn => {
+      btn.classList.toggle('bg-neutral-lightest', btn.dataset.view === view);
+    });
+
+    // Update products container
     const productsContainer = document.querySelector('.products-container');
     if (productsContainer) {
       productsContainer.classList.remove('view-grid', 'view-list');
       productsContainer.classList.add(`view-${view}`);
     }
   }
-  
-  document.addEventListener('astro:page-load', () => {
-    
-    updateUI(localStorage.getItem('categoryView') || 'list');
-    document.querySelectorAll('.view-toggle')
-      .forEach(btn => btn.addEventListener('click', handleViewToggle));
-  }, { once: true });
-  </script>
+
+  // Initialize on page load and view transitions
+  document.addEventListener('astro:page-load', initializeView);
+</script>