spoko-design-system 0.2.69 → 0.2.70

package/index.ts

@@ -25,8 +25,8 @@ export { default as ProductModels } from './src/components/Product/ProductModels
 export { default as ProductName } from './src/components/Product/ProductName.vue';
 export { default as ProductPositions } from './src/components/Product/ProductPositions.vue';
 export { default as ProductNumber } from './src/components/Product/ProductNumber.astro';
-export { default as ProductLink } from './src/components/Product/ProductLink.astro';
-export { default as ProductCarousel } from './src/components/Product/ProductCarousel.astro';
+export { default as ProductLink } from './src/components/Product/ProductLink.vue';
+// export { default as ProductCarousel } from './src/components/Product/ProductCarousel.astro';
 
 
 export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.69",
+  "version": "0.2.70",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/Category/CategoryTile.astro

@@ -22,6 +22,7 @@ CategoryObject.width = CategoryObject.width ?? 70;
 <a
   href={getTranslatedLink(`/${CategoryObject.slug}/`)}
   class="carousel-item"
+  data-astro-prefetch
   {...inputProps}
 >
   <Image

package/src/components/Product/ProductLink.vue

@@ -0,0 +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-gray-100/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>