spoko-design-system 0.2.49 → 0.2.51

package/src/components/Category/CategoryDetails.astro

@@ -1,82 +1,82 @@
----
-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() {
-    function handleToggle(x) {
-      const sidebar = document.getElementById('sidebar');
-      if (x.matches) { // Mobile view
-        document.body.classList.toggle('overflow-hidden');
-        sidebar.classList.toggle('show');
-      } else {
-        document.body.classList.remove('overflow-hidden');
-        sidebar.classList.toggle('collapsed');
-      }
-    }
-
-    var x = window.matchMedia("(max-width: 768px)");
-    handleToggle(x); // Call listener at runtime
-    x.addListener(handleToggle); // Attach listener for state changes
-  }
-</script>
-
-<style>
-  .category-toggler {
-    right: -1px;
-    bottom: -1px;
-  }
-</style>
+---
+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() {
+    function handleToggle(x) {
+      const sidebar = document.getElementById('sidebar');
+      if (x.matches) { // Mobile view
+        document.body.classList.toggle('overflow-hidden');
+        sidebar.classList.toggle('show');
+      } else {
+        document.body.classList.remove('overflow-hidden');
+        sidebar.classList.toggle('collapsed');
+      }
+    }
+
+    var x = window.matchMedia("(max-width: 768px)");
+    handleToggle(x); // Call listener at runtime
+    x.addListener(handleToggle); // Attach listener for state changes
+  }
+</script>
+
+<style>
+  .category-toggler {
+    right: -1px;
+    bottom: -1px;
+  }
+</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/CategorySection.astro

@@ -1,70 +1,70 @@
----
-const { category, subcategory, subsubcategory, locale} = Astro.props;
-import { t } from "i18next";
-
-import ProductLink from "@components/Product/ProductLink.astro";
-import { Icon } from 'astro-icon/components';
-
-import { createSubCatLink, createSubSubCatLink } from "@utils/db";
-import { getCategoryProducts } from "@utils/category/getCategoryProducts"
-
-const category2search =  subsubcategory ? subsubcategory : (subcategory ? subcategory : category)
-const mainItemsCount = category2search.children ? 4 : 8
-const products = await getCategoryProducts(category2search.id, mainItemsCount);
-
-const getArray = async () => {
-  const arr: { name: string; id: number }[] = [];
-
-  if (category2search.children) {
-    for (const childCat of category2search.children) {
-      const output = await getCategoryProducts(childCat.id, 3);
-      arr.push(output);
-    }
-  } else {
-    null
-  }
-  return arr.flat(1)
-}
-
-const childrenProducts = await getArray()
-
-const categoryLink = subsubcategory ? createSubSubCatLink(locale, category.slug, subcategory.slug, subsubcategory.slug) : createSubCatLink(locale, category.slug, subcategory.slug);
----
-<div class="category-section">
-  <div class="px-4 md:px-1.5 py-3 text-xl flex">
-    <a href={categoryLink} class="hover:underline">
-      <h2>{category2search.name}</h2>
-    </a>
-  </div>
-  <swiper-container slides-per-view="auto" space-between="0" class="flex w-full max-w-full"
-    itemscope itemtype="https://schema.org/ItemList"
-  >
-    {childrenProducts && childrenProducts.length > 0 && (
-      childrenProducts.map((product, index) => <swiper-slide class="category-tile product-link"><ProductLink class="w-full" productId={product.id} locale={locale} index={index+1} /></swiper-slide>)
-    )}
-    {products && products.length > 0 && (
-      products.map((product, index) => 
-      <swiper-slide class="category-tile product-link"><ProductLink class="w-full h-full" productId={product.id} locale={locale} index={index+1}/></swiper-slide>)
-    )}
-    <swiper-slide class="category-tile product-link pr-4 pb-4 sm:pb-1">
-          <a
-          href={categoryLink}
-          title={category2search.name}
-          class="uppercase flex items-center bg-white w-full sm:w-auto sm:h-full mt-0 p-8 aspect-ratio-[4/3] sm:aspect-auto mb-auto sm:mb-0 sm:text-sm">
-          {t("more")}
-          <Icon name="la:arrow-right" class="h-4 ml-2 text-blue-500" />
-        </a>
-    </swiper-slide>
-  </swiper-container>
-</div>
-
-<style >
-  .category-section {
-    content-visibility: auto;
-
-    &:hover {
-      content-visibility: visible;
-    }
-  }
-  
+---
+const { category, subcategory, subsubcategory, locale} = Astro.props;
+import { t } from "i18next";
+
+import ProductLink from "@components/Product/ProductLink.astro";
+import { Icon } from 'astro-icon/components';
+
+import { createSubCatLink, createSubSubCatLink } from "@utils/db";
+import { getCategoryProducts } from "@utils/category/getCategoryProducts"
+
+const category2search =  subsubcategory ? subsubcategory : (subcategory ? subcategory : category)
+const mainItemsCount = category2search.children ? 4 : 8
+const products = await getCategoryProducts(category2search.id, mainItemsCount);
+
+const getArray = async () => {
+  const arr: { name: string; id: number }[] = [];
+
+  if (category2search.children) {
+    for (const childCat of category2search.children) {
+      const output = await getCategoryProducts(childCat.id, 3);
+      arr.push(output);
+    }
+  } else {
+    null
+  }
+  return arr.flat(1)
+}
+
+const childrenProducts = await getArray()
+
+const categoryLink = subsubcategory ? createSubSubCatLink(locale, category.slug, subcategory.slug, subsubcategory.slug) : createSubCatLink(locale, category.slug, subcategory.slug);
+---
+<div class="category-section">
+  <div class="px-4 md:px-1.5 py-3 text-xl flex">
+    <a href={categoryLink} class="hover:underline">
+      <h2>{category2search.name}</h2>
+    </a>
+  </div>
+  <swiper-container slides-per-view="auto" space-between="0" class="flex w-full max-w-full"
+    itemscope itemtype="https://schema.org/ItemList"
+  >
+    {childrenProducts && childrenProducts.length > 0 && (
+      childrenProducts.map((product, index) => <swiper-slide class="category-tile product-link"><ProductLink class="w-full" productId={product.id} locale={locale} index={index+1} /></swiper-slide>)
+    )}
+    {products && products.length > 0 && (
+      products.map((product, index) => 
+      <swiper-slide class="category-tile product-link"><ProductLink class="w-full h-full" productId={product.id} locale={locale} index={index+1}/></swiper-slide>)
+    )}
+    <swiper-slide class="category-tile product-link pr-4 pb-4 sm:pb-1">
+          <a
+          href={categoryLink}
+          title={category2search.name}
+          class="uppercase flex items-center bg-white w-full sm:w-auto sm:h-full mt-0 p-8 aspect-ratio-[4/3] sm:aspect-auto mb-auto sm:mb-0 sm:text-sm">
+          {t("more")}
+          <Icon name="la:arrow-right" class="h-4 ml-2 text-blue-500" />
+        </a>
+    </swiper-slide>
+  </swiper-container>
+</div>
+
+<style >
+  .category-section {
+    content-visibility: auto;
+
+    &:hover {
+      content-visibility: visible;
+    }
+  }
+  
 </style>

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,42 +1,42 @@
----
-import { getTranslatedLink } from "@utils/text/getTranslatedLink";
-import { Image } from "astro:assets";
-
-interface CategoryObject {
-  photo: string;
-  desc: string;
-  alt: string;
-  name: string;
-  slug: string;
-  height?: number;
-  width?: number;
-  class?: string;
-}
-
-let inputProps = {};
-const { CategoryObject } = Astro.props as { CategoryObject: CategoryObject };
-CategoryObject.height = CategoryObject.height ?? 70;
-CategoryObject.width = CategoryObject.width ?? 70;
----
-
-<a
-  href={getTranslatedLink(`/${CategoryObject.slug}/`)}
-  class="carousel-item"
-  {...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 { getTranslatedLink } from "@utils/text/getTranslatedLink";
+import { Image } from "astro:assets";
+
+interface CategoryObject {
+  photo: string;
+  desc: string;
+  alt: string;
+  name: string;
+  slug: string;
+  height?: number;
+  width?: number;
+  class?: string;
+}
+
+let inputProps = {};
+const { CategoryObject } = Astro.props as { CategoryObject: CategoryObject };
+CategoryObject.height = CategoryObject.height ?? 70;
+CategoryObject.width = CategoryObject.width ?? 70;
+---
+
+<a
+  href={getTranslatedLink(`/${CategoryObject.slug}/`)}
+  class="carousel-item"
+  {...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>

package/src/components/Category/SubCategoryLink.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-const props = defineProps({
-  text: {
-    type: String,
-    default: null,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <a
-    v-if="!props.active"
-    class="w-full block text-base hover:(bg-gray-50 sm:bg-inherit) font-medium text-gray-300 pr-2 py-2 text-left pl-6 sm:(pr-3 text-sm w-auto) md:(py-0.5 pr-4)"
-  >
-    {{ props.text }}
-</a>
-  <div
-    v-else
-    class="w-full text-base hover:(bg-gray-50 sm:bg-inherit) font-medium pr-2 py-2 pl-6 sm:(w-auto pr-3 text-sm) md:(py-0.5 pr-4) s-active"
-  >
-    {{ props.text }}
-  </div>
-</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
+    v-if="!props.active"
+    class="w-full block text-base hover:(bg-gray-50 sm:bg-inherit) font-medium text-gray-300 pr-2 py-2 text-left pl-6 sm:(pr-3 text-sm w-auto) md:(py-0.5 pr-4)"
+  >
+    {{ props.text }}
+</a>
+  <div
+    v-else
+    class="w-full text-base hover:(bg-gray-50 sm:bg-inherit) font-medium pr-2 py-2 pl-6 sm:(w-auto pr-3 text-sm) md:(py-0.5 pr-4) s-active"
+  >
+    {{ props.text }}
+  </div>
+</template>

package/src/components/CategoryLink.astro

@@ -1,18 +1,18 @@
----
-const { categories } = Astro.props;
----
-
-<div class="text-light-blue-400 uppercase text-base z-3 relative w-full">
-  {
-    categories
-      ? categories.map((category) => (
-          <a
-            class="term-link text-sm sm:text-base not-first:(before:content-empty) before:(w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative)"
-            href={category.uri}
-          >
-            {category.name}
-          </a>
-        ))
-      : null
-  }
-</div>
+---
+const { categories } = Astro.props;
+---
+
+<div class="text-light-blue-400 uppercase text-base z-3 relative w-full">
+  {
+    categories
+      ? categories.map((category) => (
+          <a
+            class="term-link text-sm sm:text-base not-first:(before:content-empty) before:(w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative)"
+            href={category.uri}
+          >
+            {category.name}
+          </a>
+        ))
+      : null
+  }
+</div>

package/src/components/Copyright.astro

@@ -1,12 +1,12 @@
----
-const { class: className } = Astro.props;
----
-
-<div
-  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
-  class:list={[className]}
->
-  <slot name="left-item" />
-  <slot name="middle-item" />
-  <slot name="right-item" />
-</div>
+---
+const { class: className } = Astro.props;
+---
+
+<div
+  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
+  class:list={[className]}
+>
+  <slot name="left-item" />
+  <slot name="middle-item" />
+  <slot name="right-item" />
+</div>

package/src/components/Date.astro

@@ -1,7 +1,7 @@
----
-const { date } = Astro.props;
----
-
-<time class="text-sm flex items-center mr-2" datetime={date}>
-  {new Date(date).toLocaleDateString()}
-</time>
+---
+const { date } = Astro.props;
+---
+
+<time class="text-sm flex items-center mr-2" datetime={date}>
+  {new Date(date).toLocaleDateString()}
+</time>

package/src/components/Faq.astro

@@ -1,33 +1,33 @@
----
-
-/* 
-	FAQ component for questons & answers with structured microdata for rich snippets 
-	https://developers.google.com/search/docs/appearance/structured-data/faqpage?hl=en
-
-	*/
-
-import {t }  from "i18next"
-import FaqItem from "@components/FaqItem.astro"
-
-interface Props {
-
-	questions: {
-		question: string;
-    answer: string;
-	}[]
-}
-
-const { questions } = Astro.props
----
-
-<div class="flex flex-col mt-6 mb-4 w-full px-4 md:px-0" itemscope itemtype="https://schema.org/FAQPage" >
-	<div class="mb-6 text-4xl font-headbold sm:text-4xl text-blue-802 faq-heading">
-		{t('faq.title')}
-	</div>
-	<div class="flex flex-col divide-y dark:divide-gray-700">
-		{
-			questions.map((question) => 
-				<FaqItem data={question} />)
-		}
-	</div>
-</div>
+---
+
+/* 
+	FAQ component for questons & answers with structured microdata for rich snippets 
+	https://developers.google.com/search/docs/appearance/structured-data/faqpage?hl=en
+
+	*/
+
+import {t }  from "i18next"
+import FaqItem from "@components/FaqItem.astro"
+
+interface Props {
+
+	questions: {
+		question: string;
+    answer: string;
+	}[]
+}
+
+const { questions } = Astro.props
+---
+
+<div class="flex flex-col mt-6 mb-4 w-full px-4 md:px-0" itemscope itemtype="https://schema.org/FAQPage" >
+	<div class="mb-6 text-4xl font-headbold sm:text-4xl text-blue-802 faq-heading">
+		{t('faq.title')}
+	</div>
+	<div class="flex flex-col divide-y dark:divide-gray-700">
+		{
+			questions.map((question) => 
+				<FaqItem data={question} />)
+		}
+	</div>
+</div>