spoko-design-system 0.2.83 → 0.2.85

package/src/components/Category/CategoriesCarousel.astro

@@ -1,101 +1,101 @@
----
-const { activeCategorySlug, locale, class: className } = Astro.props;
-
-import { getTranslatedLink } from "@utils/text/getTranslatedLink"
-import { getMainCategoryList } from "@utils/category/getMainCategoryList"
-import { Image } from 'astro:assets'
-
-import i18next, { t } from "i18next";
-const categories = await getMainCategoryList()
-const imgDomain = 'https://api.polo.blue/img/';
-
-const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug) : 0
----
-<!-- <div class={`cat-menu ${className ? className : ''}`} 
-  data-pagefind-ignore
-  itemscope itemtype="https://schema.org/SiteNavigationElement"
-  transition:persist={`catcarousel${activeIndex}`}
-  transition:animate="none"
-> -->
-  <swiper-container 
-    class={`categories-carousel flex pb-1 sm:pb-0 bg-white cat-menu ${className ? className : ''}`}
-    data-pagefind-ignore
-    itemscope itemtype="https://schema.org/SiteNavigationElement"
-    transition:persist={`catcarousel${activeIndex}`}
-    transition:animate="none"
-    data-active={activeIndex}
-    initial-slide={activeIndex}
-    space-between="0"
-    slides-per-view="auto"
-    scrollbar="true"
-    draggable="true"
-    keyboard
-    free-mode
-    data-off-observer
-    run-callbacks-on-init="false"
-  >
-    {
-      categories.map((category, index) => (
-        <swiper-slide itemprop="hasPart" role="presentation"
-          class={`swiper-slide cats-slide group ${category.slug === activeCategorySlug ? 'active': ''}`}
-        >
-          <a href={getTranslatedLink(`/${category.slug}/`)}
-            class="carousel-item"
-          >
-            {
-              // itemprop="url" 
-              // role="menuitem"
-              // aria-label={ t(`cat.${category.slug}.name`) }
-            }
-
-              <Image 
-                src={`${imgDomain}${category.photo}`} 
-                alt={t(`cat.${category.slug}.desc`).split('. ', 1)[0]}
-                height="70"
-                width="70"
-                format="avif"
-                loading="eager"
-                onerror="this.style.display='none';"
-                class="cats-img"
-              />
-              <div class="swiper-lazy-preloader"></div>
-   
-            <div class="cat-name"
-              // itemprop="name"
-            >
-              { t(`cat.${category.slug}.name`) }
-            </div>
-          </a>
-        </swiper-slide>
-      ))
-    }
-
-  </swiper-container>
-<!-- </div> -->
-
-<style >
-.active {
-  @apply bg-blue-700 text-white bg-opacity-100;
-
-  &:not(:hover) .cats-img {
-    filter: invert(100%);
-    /* // @apply filter-invert; */
-  }
-  
-}
-
-.categories-carousel {
-  @apply overflow-hidden;
-
-  &.swiper-initialized {
-    .img-preloader {
-      display: none;
-    }
-  }
-}
-
-.swiper-slide {
-  @apply transition w-[calc(100%/3.55)] min-w-[calc(100%/3.55)] sm:w-35 sm:min-w-35 3xl:min-w-[calc(100%/12.5-4px)];
-}
-
-</style>
+---
+const { activeCategorySlug, locale, class: className } = Astro.props;
+
+import { getTranslatedLink } from "@utils/text/getTranslatedLink"
+import { getMainCategoryList } from "@utils/category/getMainCategoryList"
+import { Image } from 'astro:assets'
+
+import i18next, { t } from "i18next";
+const categories = await getMainCategoryList()
+const imgDomain = 'https://api.polo.blue/img/';
+
+const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug) : 0
+---
+<!-- <div class={`cat-menu ${className ? className : ''}`} 
+  data-pagefind-ignore
+  itemscope itemtype="https://schema.org/SiteNavigationElement"
+  transition:persist={`catcarousel${activeIndex}`}
+  transition:animate="none"
+> -->
+  <swiper-container 
+    class={`categories-carousel flex pb-1 sm:pb-0 bg-white cat-menu ${className ? className : ''}`}
+    data-pagefind-ignore
+    itemscope itemtype="https://schema.org/SiteNavigationElement"
+    transition:persist={`catcarousel${activeIndex}`}
+    transition:animate="none"
+    data-active={activeIndex}
+    initial-slide={activeIndex}
+    space-between="0"
+    slides-per-view="auto"
+    scrollbar="true"
+    draggable="true"
+    keyboard
+    free-mode
+    data-off-observer
+    run-callbacks-on-init="false"
+  >
+    {
+      categories.map((category, index) => (
+        <swiper-slide itemprop="hasPart" role="presentation"
+          class={`swiper-slide cats-slide group ${category.slug === activeCategorySlug ? 'active': ''}`}
+        >
+          <a href={getTranslatedLink(`/${category.slug}/`)}
+            class="carousel-item"
+          >
+            {
+              // itemprop="url" 
+              // role="menuitem"
+              // aria-label={ t(`cat.${category.slug}.name`) }
+            }
+
+              <Image 
+                src={`${imgDomain}${category.photo}`} 
+                alt={t(`cat.${category.slug}.desc`).split('. ', 1)[0]}
+                height="70"
+                width="70"
+                format="avif"
+                loading="eager"
+                onerror="this.style.display='none';"
+                class="cats-img"
+              />
+              <div class="swiper-lazy-preloader"></div>
+   
+            <div class="cat-name"
+              // itemprop="name"
+            >
+              { t(`cat.${category.slug}.name`) }
+            </div>
+          </a>
+        </swiper-slide>
+      ))
+    }
+
+  </swiper-container>
+<!-- </div> -->
+
+<style >
+.active {
+  @apply bg-blue-700 text-white bg-opacity-100;
+
+  &:not(:hover) .cats-img {
+    filter: invert(100%);
+    /* // @apply filter-invert; */
+  }
+  
+}
+
+.categories-carousel {
+  @apply overflow-hidden;
+
+  &.swiper-initialized {
+    .img-preloader {
+      display: none;
+    }
+  }
+}
+
+.swiper-slide {
+  @apply transition w-[calc(100%/3.55)] min-w-[calc(100%/3.55)] sm:w-35 sm:min-w-35 3xl:min-w-[calc(100%/12.5-4px)];
+}
+
+</style>

package/src/components/Category/CategoryDetails.astro

@@ -1,106 +1,137 @@
----
-import CategorySidebarToggler from './CategorySidebarToggler.vue';
-import { Icon } from 'astro-icon/components';
-const { category, subcategory, subtitle, subsubtitle, titleSmall, locale } = Astro.props;
-import { t } from "i18next";
-
-// Compute base URL for localization
-const baseURL = locale === 'en' ? '' : `/${locale}`;
----
-
-<div ref="el"
-   class="flex flex-nowrap pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-gray-100 md:bg-white"
-   transition:name="category-details"
-   transition:animate="fade"
->
-  <CategorySidebarToggler onclick="toggleSidebar()">
-    <Icon name="ant-design:menu-fold-outlined" class="toggler-btn hidden md:block" />
-    <Icon name="ant-design:menu-unfold-outlined" class="toggler-btn hidden" />
-    <Icon name="ant-design:menu-outlined" class="toggler-btn md:hidden" />
-  </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-gray-200 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-gray-200 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>
-</div>
-
-<script is:inline>
-  function toggleSidebar() {
-    const sidebar = document.getElementById('sidebar');
-    const isMobile = window.matchMedia("(max-width: 768px)").matches;
-
-    if (sidebar) {
-      if (isMobile) {
-        document.body.classList.toggle('overflow-hidden');
-        sidebar.classList.toggle('show');
-        localStorage.setItem('sidebarState', sidebar.classList.contains('show') ? 'open' : 'closed');
-      } else {
-        document.body.classList.remove('overflow-hidden');
-        sidebar.classList.toggle('collapsed');
-        localStorage.setItem('sidebarState', sidebar.classList.contains('collapsed') ? 'closed' : 'open');
-      }
-    }
-  }
-
-  // Read status from localStorage on page load
-  document.addEventListener('DOMContentLoaded', () => {
-    const sidebar = document.getElementById('sidebar');
-    const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    const savedState = localStorage.getItem('sidebarState');
-
-    if (sidebar) {
-      if (savedState === 'open') {
-        if (isMobile) {
-          sidebar.classList.add('show');
-        } else {
-          sidebar.classList.remove('collapsed');
-        }
-      } else if (savedState === 'closed') {
-        if (isMobile) {
-          sidebar.classList.remove('show');
-        } else {
-          sidebar.classList.add('collapsed');
-        }
-      }
-    }
-  });
-</script>
-
-
-<style>
-  .category-toggler {
-    right: -1px;
-    bottom: -1px;
-  }
-</style>
+---
+import CategorySidebarToggler from './CategorySidebarToggler.vue';
+import CategoryViewToggler from './CategoryViewToggler.astro';
+import { Icon } from 'astro-icon/components';
+const { category, subcategory, subtitle, subsubtitle, titleSmall, locale } = Astro.props;
+import { t } from "i18next";
+
+// Compute base URL for localization
+const baseURL = locale === 'en' ? '' : `/${locale}`;
+
+// View toggler translations
+const viewerLabels = {
+  showText: t('category.view.show'),
+  listText: t('category.view.list'),
+  gridText: t('category.view.grid'),
+  listAriaLabel: t('category.view.listAriaLabel'),
+  gridAriaLabel: t('category.view.gridAriaLabel')
+};
+---
+
+<div 
+  ref="el"
+  class="flex flex-nowrap items-center pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-gray-100 md:bg-white"
+  transition:name="category-details"
+  transition:animate="fade"
+>
+  <CategorySidebarToggler client:load onclick="toggleSidebar()">
+    <Icon name="ant-design:menu-fold-outlined" class="toggler-btn hidden md:block" />
+    <Icon name="ant-design:menu-unfold-outlined" class="toggler-btn hidden" />
+    <Icon name="ant-design:menu-outlined" class="toggler-btn md:hidden" />
+  </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-gray-200 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-gray-200 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>
+
+  <CategoryViewToggler {...viewerLabels} />
+</div>
+
+<script is:inline>
+  function toggleSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    const togglers = document.querySelectorAll('.toggler-btn');
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
+    if (sidebar) {
+      if (isMobile) {
+        document.body.classList.toggle('overflow-hidden');
+        sidebar.classList.toggle('show');
+        localStorage.setItem('sidebarState', sidebar.classList.contains('show') ? 'open' : 'closed');
+      } else {
+        document.body.classList.remove('overflow-hidden');
+        sidebar.classList.toggle('collapsed');
+        localStorage.setItem('sidebarState', sidebar.classList.contains('collapsed') ? 'closed' : 'open');
+        
+        // Toggle visibility of buttons on desktop
+        togglers.forEach(btn => btn.classList.toggle('hidden'));
+      }
+    }
+  }
+
+  // Read status from localStorage on page load
+  document.addEventListener('astro:page-load', () => {
+    const sidebar = document.getElementById('sidebar');
+    const togglers = document.querySelectorAll('.toggler-btn');
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const savedState = localStorage.getItem('sidebarState');
+
+    if (sidebar) {
+      if (savedState === 'open') {
+        if (isMobile) {
+          sidebar.classList.add('show');
+        } else {
+          sidebar.classList.remove('collapsed');
+          // Show correct button on desktop
+          if (togglers.length >= 2) {
+            togglers[0].classList.remove('hidden'); // menu-fold
+            togglers[1].classList.add('hidden');    // menu-unfold
+          }
+        }
+      } else if (savedState === 'closed') {
+        if (isMobile) {
+          sidebar.classList.remove('show');
+        } else {
+          sidebar.classList.add('collapsed');
+          // Show correct button on desktop
+          if (togglers.length >= 2) {
+            togglers[0].classList.add('hidden');    // menu-fold
+            togglers[1].classList.remove('hidden'); // menu-unfold
+          }
+        }
+      }
+    }
+  });
+</script>
+
+<style>
+  /* View toggle styles */
+  .view-grid {
+    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
+  }
+
+  .view-list {
+    @apply flex flex-col gap-4;
+  }
+</style>

package/src/components/Category/CategoryLink.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-const props = defineProps({
-  text: {
-    type: String,
-    default: null,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <a
-    class="category-link"
-    :class="!props.active ? '' : 'active'"
-  >
-    {{ props.text }}
-  </a>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  text: {
+    type: String,
+    default: null,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <a
+    class="category-link"
+    :class="!props.active ? '' : 'active'"
+  >
+    {{ props.text }}
+  </a>
+</template>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,10 +1,10 @@
-
-<template>
-  <button
-    class="category-toggler"
-    type="button"
-    aria-label="toggle menu"
-  >
-    <slot />
-  </button>
+
+<template>
+  <button
+    class="category-toggler"
+    type="button"
+    aria-label="toggle menu"
+  >
+    <slot />
+  </button>
 </template>

package/src/components/Category/CategoryTile.astro

@@ -1,49 +1,49 @@
----
-
-import { Image } from "astro:assets";
-import { getTranslatedLink } from "../../utils/text/getTranslatedLink"
-
-interface CategoryObject {
-  photo: string;
-  desc: string;
-  alt: string;
-  name: string;
-  slug: string;
-  height?: number;
-  width?: number;
-  class?: string;
-}
-
-
-
-let inputProps = {};
-const { CategoryObject, locale='en' } = Astro.props as { CategoryObject: CategoryObject, locale: string };
-CategoryObject.height = CategoryObject.height ?? 70;
-CategoryObject.width = CategoryObject.width ?? 70;
-
-const mainCategoryLink =  getTranslatedLink(`/${CategoryObject.slug}/`, locale);
-
----
-
-<a
-  href={mainCategoryLink}
-  class="carousel-item"
-  data-astro-prefetch
-  {...inputProps}
->
-  <Image
-    src={`${CategoryObject.photo}`}
-    alt={CategoryObject.alt}
-    height={CategoryObject.height}
-    width={CategoryObject.height}
-    format="avif"
-    loading="eager"
-    onerror="this.style.display='none';"
-    class="cats-img"
-  />
-  <div class="swiper-lazy-preloader"></div>
-
-  <div class="cat-name" itemprop="name">
-    {CategoryObject.name}
-  </div>
-</a>
+---
+
+import { Image } from "astro:assets";
+import { getTranslatedLink } from "../../utils/text/getTranslatedLink"
+
+interface CategoryObject {
+  photo: string;
+  desc: string;
+  alt: string;
+  name: string;
+  slug: string;
+  height?: number;
+  width?: number;
+  class?: string;
+}
+
+
+
+let inputProps = {};
+const { CategoryObject, locale='en' } = Astro.props as { CategoryObject: CategoryObject, locale: string };
+CategoryObject.height = CategoryObject.height ?? 70;
+CategoryObject.width = CategoryObject.width ?? 70;
+
+const mainCategoryLink =  getTranslatedLink(`/${CategoryObject.slug}/`, locale);
+
+---
+
+<a
+  href={mainCategoryLink}
+  class="carousel-item"
+  data-astro-prefetch
+  {...inputProps}
+>
+  <Image
+    src={`${CategoryObject.photo}`}
+    alt={CategoryObject.alt}
+    height={CategoryObject.height}
+    width={CategoryObject.height}
+    format="avif"
+    loading="eager"
+    onerror="this.style.display='none';"
+    class="cats-img"
+  />
+  <div class="swiper-lazy-preloader"></div>
+
+  <div class="cat-name" itemprop="name">
+    {CategoryObject.name}
+  </div>
+</a>