spoko-design-system 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.3.3](https://github.com/polo-blue/sds/compare/v1.3.2...v1.3.3) (2025-10-07)
+
+### Bug Fixes
+
+* prevent double rendering of links array with slot fallback ([ac7ec23](https://github.com/polo-blue/sds/commit/ac7ec2349b2098912ed27a303a7502c9a1c63678))
+
+## [1.3.2](https://github.com/polo-blue/sds/compare/v1.3.1...v1.3.2) (2025-10-07)
+
 ## [1.3.1](https://github.com/polo-blue/sds/compare/v1.3.0...v1.3.1) (2025-10-05)
 
 ## [1.3.0](https://github.com/polo-blue/sds/compare/v1.2.2...v1.3.0) (2025-10-05)

package/package.json

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

package/src/components/ProductDetailsList.vue

@@ -2,30 +2,18 @@
 import { PropType, computed } from 'vue';
 import ProductDetailName from './ProductDetailName.vue';
 
-interface ColorCode {
-  code: string;
-  name: string;
+interface Link {
+  type: string;
+  url: string;
+  anchor: string;
 }
 
 interface TableItem {
   id: string;
-  name: string;
-  value: unknown; // Może być string, number, boolean, array (ColorCode[] lub string[])
-  translated?: boolean;
-  icon?: boolean;
-  isArrayValue?: boolean;
-  isColorArray?: boolean; // dla product.colors (color_ids)
-  isPaintMarks?: boolean; // dla product.paint_marks_text
-  isGenericArray?: boolean; // dla ogólnych tablic stringów (np. position)
-  isForExteriorColour?: boolean; // Ta flaga będzie ustawiana przez getProductDetails na true, jeśli 'value' jest tablicą
-}
-
-interface GroupedLink {
-  id: string;
-  links: {
-    name: string;
-    value: string;
-  }[];
+  label: string; // Display name from API
+  value: unknown; // Can be string, number, boolean, string array, or Link array
+  type?: string; // 'links' for link arrays
+  isGenericArray?: boolean; // for generic string arrays (e.g., position)
 }
 
 const props = defineProps({
@@ -33,21 +21,9 @@ const props = defineProps({
   caption: { type: String, default: null },
 });
 
-// Function to check if a value is a link
-const isLink = (id: string) => {
-  return ['blog', 'youtube', 'vimeo'].includes(id);
-};
-
-// Function to check if it's a color array (for 'color_ids' field from product.colors)
-// This will still apply to the 'color' detail if its value is an array of ColorCode objects
-const isColorArray = (item: TableItem) => {
-  const colorIds = ['color', 'thread-color']; // lista ID które są kolorami
-  return (item.isColorArray || colorIds.includes(item.id)) && Array.isArray(item.value);
-};
-
-// Function to check if it's paint marks (value is now a string from API)
-const isPaintMarks = (item: TableItem) => {
-  return item.isPaintMarks && typeof item.value === 'string';
+// Function to check if it's a links array from new API
+const isLinksArray = (item: TableItem) => {
+  return item.type === 'links' && Array.isArray(item.value);
 };
 
 // Function to check if it's a generic array (e.g., for position)
@@ -55,33 +31,23 @@ const isGenericArray = (item: TableItem) => {
   return item.isGenericArray && Array.isArray(item.value);
 };
 
-// ✅ Zaktualizowana funkcja: Sprawdzamy ID i czy value jest faktycznie tablicą ColorCode[]
-const isForExteriorColour = (item: TableItem) => {
-  return item.id === 'for-exterior-colour' && Array.isArray(item.value);
-};
-
 // Function to check if value is HTML string (fallback)
 const isHtmlValue = (value: unknown): boolean => {
   return typeof value === 'string' && (value.includes('<span') || value.includes('<br>'));
 };
 
 // Function for specifying header text
-const getHeaderText = (row: TableItem | GroupedLink) => {
-  if (row.id === 'blog') {
-    return row.id.charAt(0).toUpperCase() + row.id.slice(1);
-  }
-  // Użyj `name` z obiektu `TableItem`, jeśli istnieje, w przeciwnym razie sformatuj `id`.
-  return 'name' in row
-    ? row.name
-    : row.id
-        .split('-')
-        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
+const getHeaderText = (row: TableItem) => {
+  return row.label || row.id
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
 };
 
 // Function to determine the icon class for a link type
-const getLinkIconClass = (linkId: string) => {
-  switch (linkId) {
+const getLinkIconClass = (linkType: string) => {
+  const type = linkType.toLowerCase();
+  switch (type) {
     case 'blog':
       return 'i-lucide-book-text';
     case 'youtube':
@@ -93,46 +59,13 @@ const getLinkIconClass = (linkId: string) => {
   }
 };
 
-// Grouping of elements by id
-const groupedItems = computed(() => {
-  // ✅ Add validation to ensure props.items is an array
+// Validate items
+const validatedItems = computed(() => {
   if (!Array.isArray(props.items)) {
     console.warn('ProductDetailsList: items prop is not an array:', props.items);
     return [];
   }
-
-  const result: (TableItem | GroupedLink)[] = [];
-  const linkGroups = new Map<string, GroupedLink>();
-
-  // Process all elements
-  for (const item of props.items) {
-    // If it's a link (blog, youtube, vimeo)
-    if (isLink(item.id)) {
-      // Add a link to the relevant group
-      if (!linkGroups.has(item.id)) {
-        linkGroups.set(item.id, {
-          id: item.id,
-          links: [],
-        });
-      }
-
-      // Add link to the relevant group
-      linkGroups.get(item.id)?.links.push({
-        name: item.name,
-        value: item.value as string,
-      });
-    } else {
-      // If it's not a link, add it normally to the results
-      result.push(item);
-    }
-  }
-
-  // Add all link groups at the end
-  for (const group of linkGroups.values()) {
-    result.push(group);
-  }
-
-  return result;
+  return props.items;
 });
 </script>
 
@@ -149,7 +82,7 @@ const groupedItems = computed(() => {
     </colgroup>
     <tbody>
       <tr
-        v-for="(row, index) in groupedItems"
+        v-for="(row, index) in validatedItems"
         :key="index"
         class="details-table-row"
       >
@@ -159,85 +92,38 @@ const groupedItems = computed(() => {
           class="details-table-header"
         />
 
+        <!-- Links Array -->
         <td
-          v-if="'links' in row"
+          v-if="isLinksArray(row)"
           class="details-table-cell"
         >
           <ul class="list-none p-0 m-0">
             <li
-              v-for="(link, linkIndex) in row.links"
+              v-for="(link, linkIndex) in row.value as Link[]"
               :key="linkIndex"
               class="mb-2 last:mb-0 flex items-center"
             >
               <span
                 :class="[
-                  getLinkIconClass(row.id),
+                  getLinkIconClass(link.type),
                   'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400',
                 ]"
               />
               <a
-                :href="link.value"
+                :href="link.url"
                 target="_blank"
                 rel="noopener noreferrer"
                 class="link-primary"
               >
-                {{ link.name }}
+                {{ link.anchor }}
               </a>
             </li>
           </ul>
         </td>
 
+        <!-- Generic String Array -->
         <td
-          v-else-if="'id' in row && isColorArray(row)"
-          class="details-table-cell"
-        >
-          <ul class="list-none p-0 m-0">
-            <li
-              v-for="(colorItem, colorIndex) in row.value as ColorCode[]"
-              :key="colorIndex"
-              class="flex items-center gap-1 mb-1 last:mb-0"
-            >
-              <template v-if="colorItem.code">
-                <code class="font-mono text-sm">
-                  {{ colorItem.code }}
-                </code>
-                <span class="text-gray-400">-</span>
-              </template>
-              <span class="text-gray-700 dark:text-gray-300">{{ colorItem.name }}</span>
-            </li>
-          </ul>
-        </td>
-
-        <td
-          v-else-if="'id' in row && isPaintMarks(row)"
-          class="details-table-cell"
-        >
-          <span class="text-gray-700 dark:text-gray-300">{{ row.value }}</span>
-        </td>
-
-        <td
-          v-else-if="'id' in row && isForExteriorColour(row)"
-          class="details-table-cell"
-        >
-          <ul class="list-none p-0 m-0">
-            <li
-              v-for="(colorEntry, colourIndex) in row.value as ColorCode[]"
-              :key="colourIndex"
-              class="flex items-center gap-1 mb-1 last:mb-0"
-            >
-              <template v-if="colorEntry.code">
-                <code class="font-mono text-sm">
-                  {{ colorEntry.code }}
-                </code>
-                <span class="text-gray-400">-</span>
-              </template>
-              <span class="text-gray-700 dark:text-gray-300">{{ colorEntry.name }}</span>
-            </li>
-          </ul>
-        </td>
-
-        <td
-          v-else-if="'id' in row && isGenericArray(row)"
+          v-else-if="isGenericArray(row)"
           class="details-table-cell"
         >
           <ul class="list-none p-0 m-0">
@@ -252,14 +138,16 @@ const groupedItems = computed(() => {
           </ul>
         </td>
 
+        <!-- HTML Value -->
         <td
-          v-else-if="'id' in row && isHtmlValue(row.value)"
+          v-else-if="isHtmlValue(row.value)"
           class="details-table-cell"
           v-html="row.value"
         />
 
+        <!-- Slot or Default Value -->
         <slot
-          v-else-if="'id' in row"
+          v-else
           :name="row.id"
         >
           <td class="details-table-cell">