spoko-design-system 0.9.5 → 1.0.0

package/src/components/Product/ProductEngineType.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-interface Engine {
-  id: number | string;
-  name: string;
-}
-
-const props = withDefaults(defineProps<{
-  engines: Engine[];
-}>(), {
-  engines: () => []
-});
-</script>
-
-<template>
-  <ul v-if="engines.length" class="engine-types">
-    <li 
-      v-for="(engine, index) in engines" 
-      :key="engine.id"
-      class="engine-type"
-      :class="{ 'with-comma': index !== engines.length - 1 }"
-    >
-      {{ engine.name }}
-    </li>
-  </ul>
-</template>
-
-<style >
-.engine-types {
-  @apply flex flex-wrap items-center;
-}
-
-.engine-type {
-  @apply inline-block;
-
-  &.with-comma {
-    @apply mr-1;
-    
-    &:after {
-      content: ',';
-    }
-  }
-}
+<script setup lang="ts">
+interface Engine {
+  id: number | string;
+  name: string;
+}
+
+const props = withDefaults(defineProps<{
+  engines: Engine[];
+}>(), {
+  engines: () => []
+});
+</script>
+
+<template>
+  <ul v-if="engines.length" class="engine-types">
+    <li 
+      v-for="(engine, index) in engines" 
+      :key="engine.id"
+      class="engine-type"
+      :class="{ 'with-comma': index !== engines.length - 1 }"
+    >
+      {{ engine.name }}
+    </li>
+  </ul>
+</template>
+
+<style >
+.engine-types {
+  @apply flex flex-wrap items-center;
+}
+
+.engine-type {
+  @apply inline-block;
+
+  &.with-comma {
+    @apply mr-1;
+    
+    &:after {
+      content: ',';
+    }
+  }
+}
 </style>

package/src/components/Product/ProductImage.astro

@@ -1,41 +1,41 @@
----
-import { Image } from 'astro:assets'
-interface ImageObject {
-  src: string;
-  alt?: string;
-  height?: string | number;
-  width?: string | number;
-  loading?: 'lazy' | 'eager';
-  srcset?: string[];
-  class?: string;
-  index?: number;
-}
-
-const { imageObject } = Astro.props as { imageObject: ImageObject; };
-
-let inputProps = {};
-
-
-if (imageObject.index && imageObject.index === 1) {
-  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
-  imageObject.loading = 'eager'
-}
-
-if (imageObject.srcset && imageObject.srcset.length) {
-  inputProps['widths'] = imageObject.srcset
-}
-
----
-<Image 
-    src={imageObject.src}
-    alt={imageObject.alt}
-    height={Number(imageObject.height)} 
-    width={Number(imageObject.width)}
-    loading={imageObject.loading ? imageObject.loading : 'lazy'}
-    itemprop="image"
-    format="avif"
-    data-pagefind-index-attrs={imageObject.alt}
-    onerror="this.style.display='none';"
-    class={`product-image ${imageObject.class || ''}`}
-    { ...inputProps}
+---
+import { Image } from 'astro:assets'
+interface ImageObject {
+  src: string;
+  alt?: string;
+  height?: string | number;
+  width?: string | number;
+  loading?: 'lazy' | 'eager';
+  srcset?: string[];
+  class?: string;
+  index?: number;
+}
+
+const { imageObject } = Astro.props as { imageObject: ImageObject; };
+
+let inputProps = {};
+
+
+if (imageObject.index && imageObject.index === 1) {
+  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
+  imageObject.loading = 'eager'
+}
+
+if (imageObject.srcset && imageObject.srcset.length) {
+  inputProps['widths'] = imageObject.srcset
+}
+
+---
+<Image 
+    src={imageObject.src}
+    alt={imageObject.alt}
+    height={Number(imageObject.height)} 
+    width={Number(imageObject.width)}
+    loading={imageObject.loading ? imageObject.loading : 'lazy'}
+    itemprop="image"
+    format="avif"
+    data-pagefind-index-attrs={imageObject.alt}
+    onerror="this.style.display='none';"
+    class={`product-image ${imageObject.class || ''}`}
+    { ...inputProps}
 />

package/src/components/Product/ProductLink.astro

@@ -1,101 +1,101 @@
----
-import type { Product } from 'types/index';
-
-interface Props {
-  productId?: number;
-  productObject?: Product;
-  locale: string;
-  index: number;
-  bigTile?: boolean;
-  loading?: "eager" | "lazy";
-  isShopProduct?: boolean;
-}
-
-const {
-  productId,
-  productObject,
-  bigTile,
-  locale,
-  index,
-  loading = "lazy",
-  isShopProduct = false,
-} = Astro.props;
-
-import { getProductById } from '@utils/product/getProductById';
-import { getShopProductById } from '@utils/product/getShopProductById';
-import { getProductUrl } from "@utils/product/getProductUrl";
-import { getShopProductUrl } from "@utils/product/getShopProductUrl";
-import { getProductTranslation } from "@utils/product/getProductTranslation";
-import { getImageUrl } from '@utils/getImageUrl';
-import i18next, { t } from "i18next";
-import { ProductImage, ProductNumber, removeSemicolon, getPriceFormatted } from "spoko-design-system";
-
-// Użycie productObject jeśli przekazane, inaczej pobranie produktu na podstawie productId
-const product = productObject || (productId ? (isShopProduct ? await getShopProductById(productId) : await getProductById(productId)) : null);
-
-// Określenie URL miniatury produktu
-const thumb = product ? (
-  isShopProduct
-    ? await getImageUrl(product.images?.[0]?.path || "", "SHOP")
-    : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
-) : "";
-
-// Tłumaczenie nazwy produktu jeśli dostępne
-const productTranslation = i18next.exists(`parts.${product?.number}.name`)
-  ? null
-  : productId ? await getProductTranslation(productId, product?.number || "") : null;
- 
-// const productName = product ? (
-//   isShopProduct
-//     ? (locale === "pl" ? product.name_pl : product.name_en)
-//     : productTranslation?.name || t(`parts.${product.number}.name`)
-// ) : "";
-
-const productName = product.name || 'NO NAME';
-
-const nameFormatted = removeSemicolon(productName.toString());
----
-
-{product && (
-  <div class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}>
-    {product.photo !== null && thumb ? (
-      <ProductImage
-        imagesApiUrl="https://api.polo.blue"
-        imageObject={{
-          src: thumb,
-          alt: productName,
-          height: '180',
-          width: '240',
-          loading
-        }}
-      />
-    ) : (
-      <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
-    )}
-  </div>
-
-  <div class={bigTile ? '' : 'sm:pl-4'}>
-    {product.price_pln && (
-      <p class="block mb-2 font-600 font-headbold text-5">
-        {getPriceFormatted(product)}
-      </p>
-    )}
-
-    <a 
-      class="product-link--url"
-      href={isShopProduct ? getShopProductUrl(product.slug, locale) : getProductUrl(product.number, locale)}
-      itemprop="url"
-      title={product.number}
-      set:html={nameFormatted}
-    />
-
-    <ProductNumber productNumber={product.number} copyDisabled={true} />
-    
-    {index !== null && (
-      <>
-        <meta itemprop="position" content={index.toString()} />
-        <meta itemprop="name" content={nameFormatted} />
-      </>
-    )}
-  </div>
-)}
+---
+import type { Product } from 'types/index';
+
+interface Props {
+  productId?: number;
+  productObject?: Product;
+  locale: string;
+  index: number;
+  bigTile?: boolean;
+  loading?: "eager" | "lazy";
+  isShopProduct?: boolean;
+}
+
+const {
+  productId,
+  productObject,
+  bigTile,
+  locale,
+  index,
+  loading = "lazy",
+  isShopProduct = false,
+} = Astro.props;
+
+import { getProductById } from '@utils/product/getProductById';
+import { getShopProductById } from '@utils/product/getShopProductById';
+import { getProductUrl } from "@utils/product/getProductUrl";
+import { getShopProductUrl } from "@utils/product/getShopProductUrl";
+import { getProductTranslation } from "@utils/product/getProductTranslation";
+import { getImageUrl } from '@utils/getImageUrl';
+import i18next, { t } from "i18next";
+import { ProductImage, ProductNumber, removeSemicolon, getPriceFormatted } from "spoko-design-system";
+
+// Użycie productObject jeśli przekazane, inaczej pobranie produktu na podstawie productId
+const product = productObject || (productId ? (isShopProduct ? await getShopProductById(productId) : await getProductById(productId)) : null);
+
+// Określenie URL miniatury produktu
+const thumb = product ? (
+  isShopProduct
+    ? await getImageUrl(product.images?.[0]?.path || "", "SHOP")
+    : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
+) : "";
+
+// Tłumaczenie nazwy produktu jeśli dostępne
+const productTranslation = i18next.exists(`parts.${product?.number}.name`)
+  ? null
+  : productId ? await getProductTranslation(productId, product?.number || "") : null;
+ 
+// const productName = product ? (
+//   isShopProduct
+//     ? (locale === "pl" ? product.name_pl : product.name_en)
+//     : productTranslation?.name || t(`parts.${product.number}.name`)
+// ) : "";
+
+const productName = product.name || 'NO NAME';
+
+const nameFormatted = removeSemicolon(productName.toString());
+---
+
+{product && (
+  <div class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}>
+    {product.photo !== null && thumb ? (
+      <ProductImage
+        imagesApiUrl="https://api.polo.blue"
+        imageObject={{
+          src: thumb,
+          alt: productName,
+          height: '180',
+          width: '240',
+          loading
+        }}
+      />
+    ) : (
+      <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
+    )}
+  </div>
+
+  <div class={bigTile ? '' : 'sm:pl-4'}>
+    {product.price_pln && (
+      <p class="block mb-2 font-600 font-headbold text-5">
+        {getPriceFormatted(product)}
+      </p>
+    )}
+
+    <a 
+      class="product-link--url"
+      href={isShopProduct ? getShopProductUrl(product.slug, locale) : getProductUrl(product.number, locale)}
+      itemprop="url"
+      title={product.number}
+      set:html={nameFormatted}
+    />
+
+    <ProductNumber productNumber={product.number} copyDisabled={true} />
+    
+    {index !== null && (
+      <>
+        <meta itemprop="position" content={index.toString()} />
+        <meta itemprop="name" content={nameFormatted} />
+      </>
+    )}
+  </div>
+)}

package/src/components/Product/ProductLink.vue

@@ -1,60 +1,60 @@
-<template>
-    <div class="product-link" itemscope itemtype="https://schema.org/Product">
-      <div :class="[
-        bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'
-      ]">
-        <!-- Slot na ProductImage z Astro -->
-        <slot name="image">
-          <img src="/1x1.png" class="bg-neutral-lightest/70" :alt="productName" />
-        </slot>
-      </div>
-  
-      <div :class="[bigTile ? '' : 'sm:pl-4']">
-        <p v-if="price" class="block mb-2 font-600 font-headbold text-5">
-          {{ price }}
-        </p>
-  
-        <a 
-          class="product-link--url"
-          :href="url"
-          itemprop="url"
-          :title="productNumber"
-          v-html="nameFormatted"
-        />
-  
-        <ProductNumber 
-          :productNumber="productNumber" 
-          :copyDisabled="true" 
-        />
-        
-        <template v-if="index !== null">
-          <meta itemprop="position" :content="index.toString()" />
-          <meta itemprop="name" :content="nameFormatted" />
-        </template>
-      </div>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { computed } from 'vue'
-  import { ProductNumber } from 'spoko-design-system'
-  import { removeSemicolon } from 'spoko-design-system'
-  
-  interface Props {
-    productName: string
-    productNumber: string
-    url: string
-    price?: string
-    bigTile?: boolean
-    index?: number
-  }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    bigTile: false,
-    index: null,
-  })
-  
-  const nameFormatted = computed(() => {
-    return removeSemicolon(props.productName.toString())
-  })
+<template>
+    <div class="product-link" itemscope itemtype="https://schema.org/Product">
+      <div :class="[
+        bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'
+      ]">
+        <!-- Slot na ProductImage z Astro -->
+        <slot name="image">
+          <img src="/1x1.png" class="bg-neutral-lightest/70" :alt="productName" />
+        </slot>
+      </div>
+  
+      <div :class="[bigTile ? '' : 'sm:pl-4']">
+        <p v-if="price" class="block mb-2 font-600 font-headbold text-5">
+          {{ price }}
+        </p>
+  
+        <a 
+          class="product-link--url"
+          :href="url"
+          itemprop="url"
+          :title="productNumber"
+          v-html="nameFormatted"
+        />
+  
+        <ProductNumber 
+          :productNumber="productNumber" 
+          :copyDisabled="true" 
+        />
+        
+        <template v-if="index !== null">
+          <meta itemprop="position" :content="index.toString()" />
+          <meta itemprop="name" :content="nameFormatted" />
+        </template>
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { computed } from 'vue'
+  import { ProductNumber } from 'spoko-design-system'
+  import { removeSemicolon } from 'spoko-design-system'
+  
+  interface Props {
+    productName: string
+    productNumber: string
+    url: string
+    price?: string
+    bigTile?: boolean
+    index?: number
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    bigTile: false,
+    index: null,
+  })
+  
+  const nameFormatted = computed(() => {
+    return removeSemicolon(props.productName.toString())
+  })
   </script>

package/src/components/Product/ProductLinkInfo.astro

@@ -1,38 +1,38 @@
----
-import type { Product } from '../../types/Product';
-import ProductNumber from "./ProductNumber.astro"
-
-interface Props {
-  product: Product;
-  nameFormatted: string;
-  price?: string;
-  url: string;
-  index?: number | null;
-  bigTile?: boolean;
-}
-
-const { product, nameFormatted, price, url, index, bigTile } = Astro.props;
-
----
-
-<div class={`flex flex-col ${bigTile ? '' : 'sm:pl-4'}`}>
-    {price && (
-      <p class="block mb-2 font-600 font-headbold text-5">
-        {price}
-      </p>
-    )}
-    <a 
-      class="product-link--url"
-      href={url}
-      itemprop="url"
-      title={product.number}
-      set:html={nameFormatted}
-    />
-    <ProductNumber productNumber={product.number} copyDisabled={true} />
-    {index !== null && (
-      <>
-        <meta itemprop="position" content={index} />
-        <meta itemprop="name" content={nameFormatted} />
-      </>
-    )}
+---
+import type { Product } from '../../types/Product';
+import ProductNumber from "./ProductNumber.astro"
+
+interface Props {
+  product: Product;
+  nameFormatted: string;
+  price?: string;
+  url: string;
+  index?: number | null;
+  bigTile?: boolean;
+}
+
+const { product, nameFormatted, price, url, index, bigTile } = Astro.props;
+
+---
+
+<div class={`flex flex-col ${bigTile ? '' : 'sm:pl-4'}`}>
+    {price && (
+      <p class="block mb-2 font-600 font-headbold text-5">
+        {price}
+      </p>
+    )}
+    <a 
+      class="product-link--url"
+      href={url}
+      itemprop="url"
+      title={product.number}
+      set:html={nameFormatted}
+    />
+    <ProductNumber productNumber={product.number} copyDisabled={true} />
+    {index !== null && (
+      <>
+        <meta itemprop="position" content={index} />
+        <meta itemprop="name" content={nameFormatted} />
+      </>
+    )}
   </div>

package/src/components/Product/ProductModels.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import type { PropType } from 'vue'
+
 const props = defineProps({
   modelIds: {
-    type: Array,
-    default: null,
+    type: Array as PropType<(string | number)[]>,
+    default: () => [],
     required: true,
   },
 })