spoko-design-system 0.2.69 → 0.2.71

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.71",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -90,12 +90,12 @@
     "i18next-vue": "^5.0.0",
     "swiper": "^11.1.14",
     "unocss": "^0.64.0",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vue": "^3.5.12"
   },
   "devDependencies": {
     "@unocss/transformer-variant-group": "^0.64.0",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.1.5",
     "astro": "^4.16.10",
     "unocss": "^0.60.0"
   },

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/ProductImage.astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from 'astro:assets'
-
+import getEnvVariable from "./../../utils/getEnvVariable";
+const API_URL = getEnvVariable('API_URL', 'https://default-api.com');
 interface ImageObject {
   src: string;
   alt?: string;
@@ -12,7 +13,7 @@ interface ImageObject {
   index?: number;
 }
 
-const { imageObject, imagesApiUrl } = Astro.props as { imageObject: ImageObject; imagesApiUrl: string };
+const { imageObject } = Astro.props as { imageObject: ImageObject; };
 
 let inputProps = {};
 
@@ -28,7 +29,7 @@ if (imageObject.srcset && imageObject.srcset.length) {
 
 ---
 <Image 
-    src={`${imagesApiUrl}${imageObject.src}`}
+    src={`${API_URL}${imageObject.src}`}
     alt={imageObject.alt}
     height={imageObject.height} 
     width={imageObject.width}

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>

package/src/utils/getEnvVariable.ts

@@ -0,0 +1,15 @@
+export default function getEnvVariable(key, defaultValue = null) {
+    // First we check import.meta.env (for ES6 environments)
+    if (typeof import.meta !== 'undefined' && typeof import.meta.env !== 'undefined') {
+      return import.meta.env[key] || defaultValue;
+    }
+    
+    // Then check process.env (for Node.js environment)
+    if (typeof process !== 'undefined' && typeof process.env !== 'undefined') {
+      return process.env[key] || defaultValue;
+    }
+    
+    // If no variable is found, the default value is returned
+    return defaultValue;
+  }
+