spoko-design-system 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [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)
 
 ### Features

package/package.json

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

package/src/components/Breadcrumbs.vue

@@ -74,7 +74,7 @@ const isLast = (index: number) => {
         <meta
           itemprop="position"
           content="1"
-        />
+        >
       </li>
       <li
         v-for="(crumb, index) in breadcrumbs"
@@ -84,7 +84,10 @@ const isLast = (index: number) => {
         itemscope
         itemtype="https://schema.org/ListItem"
       >
-        <span v-if="index > 0 || props.showHome" class="text-gray-400 px-1 py-4.25 sm:py-1">/</span>
+        <span
+          v-if="index > 0 || props.showHome"
+          class="text-gray-400 px-1 py-4.25 sm:py-1"
+        >/</span>
 
         <a
           v-if="!isLast(index)"
@@ -93,7 +96,10 @@ const isLast = (index: number) => {
           itemprop="item"
           :title="`Polo 6R ${crumb.name}`"
         >
-          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
+          <strong
+            class="font-normal"
+            itemprop="name"
+          >{{ crumb.name }}</strong>
         </a>
         <a
           v-else
@@ -102,15 +108,22 @@ const isLast = (index: number) => {
           :title="`Polo 6R ${crumb.name} ${productNumber}`"
           itemprop="item"
         >
-          <span class="font-normal" itemprop="name">
+          <span
+            class="font-normal"
+            itemprop="name"
+          >
             <span v-html="crumb.name" />
-            <b v-if="productNumber" class="hidden sm:inline font-normal ml-1"
-              >&nbsp;{{ productNumber }}</b
-            >
+            <b
+              v-if="productNumber"
+              class="hidden sm:inline font-normal ml-1"
+            >&nbsp;{{ productNumber }}</b>
           </span>
         </a>
 
-        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)" />
+        <meta
+          itemprop="position"
+          :content="String(props.showHome ? index + 2 : index + 1)"
+        >
       </li>
     </ul>
   </nav>

package/src/components/ButtonCopy.vue

@@ -27,11 +27,18 @@ const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 
 <template>
-  <button :aria-label="texts.copy" class="btn-copy has-tooltip" @click="copy()">
+  <button
+    :aria-label="texts.copy"
+    class="btn-copy has-tooltip"
+    @click="copy()"
+  >
     <span
       :class="`tooltip rounded-full btn-copy-text ${tooltipClasses}`"
       :data-text="!copied ? texts.copy : texts.copied"
     />
-    <span i-ph-copy-simple-light class="leading-none w-full h-full" />
+    <span
+      i-ph-copy-simple-light
+      class="leading-none w-full h-full"
+    />
   </button>
 </template>

package/src/components/Category/CategoryLink.vue

@@ -1,5 +1,9 @@
 <template>
-  <a :href="href" class="category-link" :class="{ active: active }">
+  <a
+    :href="href"
+    class="category-link"
+    :class="{ active: active }"
+  >
     {{ text }}
   </a>
 </template>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,5 +1,9 @@
 <template>
-  <button class="category-toggler md:w-8" type="button" aria-label="toggle menu">
+  <button
+    class="category-toggler md:w-8"
+    type="button"
+    aria-label="toggle menu"
+  >
     <slot />
   </button>
 </template>

package/src/components/FeaturesList.vue

@@ -16,11 +16,18 @@ const props = defineProps({
 </script>
 
 <template>
-  <h2 v-if="props.caption" class="features-list-caption">
+  <h2
+    v-if="props.caption"
+    class="features-list-caption"
+  >
     {{ props.caption }}
   </h2>
   <ul class="features-list-ul">
-    <li v-for="(item, index) in props.items" :key="index" class="features-list-item">
+    <li
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="features-list-item"
+    >
       {{ item }}
     </li>
   </ul>

package/src/components/FuckRussia.vue

@@ -1,20 +1,47 @@
 <template>
-  <div class="relative flex" title="FUCK PUTIN! FUCK RUZZIA!">
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-5 mt-0.5" />
+  <div
+    class="relative flex"
+    title="FUCK PUTIN! FUCK RUZZIA!"
+  >
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-1 mt-0.5"
+    />
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-1 mt-0.5"
+    />
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-5 mt-0.5"
+    />
     <div class="relative">
-      <div class="inline-block absolute" i-noto-v1:flag-for-flag-russia />
-      <div i-emojione:fire class="inline-block absolute -mt-1 animate-ping animate-pulseR" />
+      <div
+        class="inline-block absolute"
+        i-noto-v1:flag-for-flag-russia
+      />
+      <div
+        i-emojione:fire
+        class="inline-block absolute -mt-1 animate-ping animate-pulseR"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull--1 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull animate-bull--2 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull--3 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
   </div>
 </template>

package/src/components/Input.vue

@@ -125,18 +125,31 @@ const handleBlur = (event: globalThis.FocusEvent) => emit('blur', event);
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
 
-    <label :for="id" :class="labelClass" style="transform-origin: top left">
+    <label
+      :for="id"
+      :class="labelClass"
+      style="transform-origin: top left"
+    >
       {{ label }}
-      <span v-if="required" class="text-red-500 ml-1">*</span>
+      <span
+        v-if="required"
+        class="text-red-500 ml-1"
+      >*</span>
     </label>
 
-    <div v-if="error && typeof error === 'string'" class="input-error-message">
+    <div
+      v-if="error && typeof error === 'string'"
+      class="input-error-message"
+    >
       {{ error }}
     </div>
 
-    <div v-if="success && typeof success === 'string'" class="input-success-message">
+    <div
+      v-if="success && typeof success === 'string'"
+      class="input-success-message"
+    >
       {{ success }}
     </div>
   </div>

package/src/components/MainColors.vue

@@ -7,13 +7,23 @@ const colorCategories = Object.entries(colors);
 
 <template>
   <div class="flex flex-col space-y-12">
-    <div v-for="[category, shades] in colorCategories" :key="category">
+    <div
+      v-for="[category, shades] in colorCategories"
+      :key="category"
+    >
       <h3 class="capitalize">
         {{ category }}
       </h3>
       <div class="grid grid-cols-3 md:grid-cols-9">
-        <div v-for="(value, name) in shades" :key="name" class="mb-6">
-          <div class="h-12 transition-all" :style="`background: ${value}`" />
+        <div
+          v-for="(value, name) in shades"
+          :key="name"
+          class="mb-6"
+        >
+          <div
+            class="h-12 transition-all"
+            :style="`background: ${value}`"
+          />
           <div class="text-sm flex flex-col text-center font-mono text-slate-500">
             <span>{{ name }}</span>
             <span class="uppercase text-xs">{{ value }}</span>

package/src/components/MainInput.vue

@@ -8,11 +8,10 @@ const props = defineProps<{
   <label class="group text-left w-full max-w-xs flex flex-col">
     <span
       class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium"
-      >{{ props.label }}</span
-    >
+    >{{ props.label }}</span>
     <input
       class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
       type="text"
-    />
+    >
   </label>
 </template>

package/src/components/PartNumber.vue

@@ -21,7 +21,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <component :is="props.as" :class="props.class">
+  <component
+    :is="props.as"
+    :class="props.class"
+  >
     {{ props.number }}
   </component>
 </template>

package/src/components/Product/ProductButton.vue

@@ -9,7 +9,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <button class="product-button" :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''">
+  <button
+    class="product-button"
+    :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''"
+  >
     <slot />
   </button>
 </template>

package/src/components/Product/ProductDetailName.vue

@@ -15,7 +15,10 @@ const props = defineProps({
 
 <template>
   <div class="font-bold detail-name w-full sm:w-50 flex">
-    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
+    <span
+      class="colon-after"
+      :class="styles && styles.length ? styles : 'mt-auto'"
+    >
       {{ props.text }}
     </span>
   </div>

package/src/components/Product/ProductDetails.vue

@@ -30,18 +30,28 @@ const props = defineProps({
 
 <template>
   <div v-if="details && details.length">
-    <template v-for="(detail, index) in details" :key="index">
+    <template
+      v-for="(detail, index) in details"
+      :key="index"
+    >
       <!-- PDP PAGE - PRODUCT ROW -->
       <!-- <pre>{{  JSON.stringify(details) }}</pre> -->
       <li
         v-if="props.small"
         class="text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular"
       >
-        <span v-if="detail.id" class="inline-block mr-1 items--0">
+        <span
+          v-if="detail.id"
+          class="inline-block mr-1 items--0"
+        >
           {{ getTranslation(`detail.${detail.id}`) }}:
         </span>
 
-        <span v-if="detail.translated" :class="detail.id ? 'font-semibold' : ''" class="items--1">
+        <span
+          v-if="detail.translated"
+          :class="detail.id ? 'font-semibold' : ''"
+          class="items--1"
+        >
           {{ detail.value }}
         </span>
 
@@ -49,16 +59,26 @@ const props = defineProps({
           v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue"
           class="items--2 inline-block"
         >
-          <span v-for="(color, indexColor) in detail.value" :key="indexColor" class="comma">
+          <span
+            v-for="(color, indexColor) in detail.value"
+            :key="indexColor"
+            class="comma"
+          >
             {{ color['name'] }}
           </span>
         </div>
 
-        <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="items--3">
+        <span
+          v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue"
+          class="items--3"
+        >
           {{ locale === 'en' ? String(detail.value).replace(/,/g, '.') : String(detail.value) }}
         </span>
 
-        <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items items--4">
+        <span
+          v-else-if="detail.id && detail.id === 'paint-marks'"
+          class="items items--4"
+        >
           {{ detail.value }}
           <!-- <span v-for="(mark, index2) in JSON.parse(String(detail.value))" :key="index2" class="item">
           {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
@@ -71,8 +91,14 @@ const props = defineProps({
         class="text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4"
       >
         <!-- PRODUCT CARD -->
-        <ProductDetailName v-if="detail.id" :text="getTranslation(`detail.${detail.id}`)" />
-        <div v-if="detail.value" class="leading-4 flex items-end">
+        <ProductDetailName
+          v-if="detail.id"
+          :text="getTranslation(`detail.${detail.id}`)"
+        />
+        <div
+          v-if="detail.value"
+          class="leading-4 flex items-end"
+        >
           <span
             v-if="detail.translated && !detail.isArrayValue"
             :class="detail.id === 'light-function' ? 'whitespace-pre-line' : ''"
@@ -80,25 +106,34 @@ const props = defineProps({
             {{ getTranslation(`detail.value.${detail.value}`) }}
           </span>
 
-          <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="">
+          <span
+            v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue"
+            class=""
+          >
             {{ detail.value }}
           </span>
 
           <span
             v-else-if="
               detail.value !== undefined &&
-              detail.id === 'for-exterior-colour' &&
-              detail.isArrayValue
+                detail.id === 'for-exterior-colour' &&
+                detail.isArrayValue
             "
             class=""
           >
-            <div v-for="(color, indexColor) in JSON.parse(String(detail.value))" :key="indexColor">
+            <div
+              v-for="(color, indexColor) in JSON.parse(String(detail.value))"
+              :key="indexColor"
+            >
               <span class="font-mono">{{ color }}</span> -
               {{ getTranslation(`colorCodes.${color}`) }}
             </div>
           </span>
 
-          <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
+          <span
+            v-else-if="detail.id && detail.id === 'paint-marks'"
+            class="items"
+          >
             <span
               v-for="(mark, markIndex) in JSON.parse(String(detail.value))"
               :key="markIndex"
@@ -107,8 +142,15 @@ const props = defineProps({
               {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
             </span>
           </span>
-          <ul v-else-if="detail.id && detail.isArrayValue" class="items">
-            <li v-for="(d, index3) in JSON.parse(String(detail.value))" :key="index3" class="item">
+          <ul
+            v-else-if="detail.id && detail.isArrayValue"
+            class="items"
+          >
+            <li
+              v-for="(d, index3) in JSON.parse(String(detail.value))"
+              :key="index3"
+              class="item"
+            >
               · {{ d }}
             </li>
           </ul>

package/src/components/Product/ProductDoc.vue

@@ -20,7 +20,10 @@ const props = defineProps({
       :title="props.file.path"
       class="flex items-center hover:underline underline-offset-2 hover:underline-1"
     >
-      <div i-system-uicons-document-justified class="text-blue-lightest dark:text-accent-light" />
+      <div
+        i-system-uicons-document-justified
+        class="text-blue-lightest dark:text-accent-light"
+      />
       <span>{{ props.file.name }}</span>
     </a>
   </li>

package/src/components/Product/ProductEngineType.vue

@@ -15,7 +15,10 @@ const props = withDefaults(
 </script>
 
 <template>
-  <ul v-if="props.engines.length" class="engine-types">
+  <ul
+    v-if="props.engines.length"
+    class="engine-types"
+  >
     <li
       v-for="(engine, index) in props.engines"
       :key="engine.id"

package/src/components/Product/ProductLink.vue

@@ -1,16 +1,27 @@
 <template>
-  <div class="product-link" itemscope itemtype="https://schema.org/Product">
+  <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" />
+        <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">
+      <p
+        v-if="price"
+        class="block mb-2 font-600 font-headbold text-5"
+      >
         {{ price }}
       </p>
 
@@ -22,11 +33,20 @@
         v-html="nameFormatted"
       />
 
-      <ProductNumber :product-number="productNumber" :copy-disabled="true" />
+      <ProductNumber
+        :product-number="productNumber"
+        :copy-disabled="true"
+      />
 
       <template v-if="index !== null">
-        <meta itemprop="position" :content="index.toString()" />
-        <meta itemprop="name" :content="nameFormatted" />
+        <meta
+          itemprop="position"
+          :content="index.toString()"
+        >
+        <meta
+          itemprop="name"
+          :content="nameFormatted"
+        >
       </template>
     </div>
   </div>

package/src/components/Product/ProductModel.vue

@@ -10,7 +10,10 @@ const props = defineProps({
 });
 </script>
 <template>
-  <strong class="product-model" :data-pagefind-filter="`model:${props.carModel.name}`">{{
+  <strong
+    class="product-model"
+    :data-pagefind-filter="`model:${props.carModel.name}`"
+  >{{
     props.carModel.name
   }}</strong>
 </template>

package/src/components/Product/ProductModels.vue

@@ -11,8 +11,16 @@ const props = defineProps({
 </script>
 
 <template>
-  <div inline-flex flex-wrap max-w-max>
-    <span v-for="(modelId, index) in props.modelIds" :key="index" class="product-model block">
+  <div
+    inline-flex
+    flex-wrap
+    max-w-max
+  >
+    <span
+      v-for="(modelId, index) in props.modelIds"
+      :key="index"
+      class="product-model block"
+    >
       <ProductModel :id="modelId" />
     </span>
   </div>

package/src/components/Product/ProductPositions.vue

@@ -16,7 +16,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <span v-for="position in props.positions" :key="position.sort" class="product-position">
+  <span
+    v-for="position in props.positions"
+    :key="position.sort"
+    class="product-position"
+  >
     {{ position.name }}
   </span>
 </template>

package/src/components/ProductCodes.vue

@@ -24,8 +24,15 @@ const settings = {
 </script>
 
 <template>
-  <span v-for="(prcode, index) in settings.prcodes" :key="index" class="not-last:mr-1">
-    <PrCode v-if="!String(prcode).includes('+')" :prcode="prcode" />
+  <span
+    v-for="(prcode, index) in settings.prcodes"
+    :key="index"
+    class="not-last:mr-1"
+  >
+    <PrCode
+      v-if="!String(prcode).includes('+')"
+      :prcode="prcode"
+    />
     <span v-else>
       <PrCode
         v-for="(splittedCode, index2) in String(prcode).split('+')"

package/src/components/ProductDetailName.vue

@@ -23,7 +23,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
+  <component
+    :is="props.as"
+    class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64"
+  >
     <span :class="styles && styles.length ? styles : 'mt-auto'">
       <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
     </span>

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>
 
@@ -144,74 +77,53 @@ const groupedItems = computed(() => {
       </slot>
     </caption>
     <colgroup>
-      <col class="details-table-col" />
-      <col class="details-table-col" />
+      <col class="details-table-col">
+      <col class="details-table-col">
     </colgroup>
     <tbody>
-      <tr v-for="(row, index) in groupedItems" :key="index" class="details-table-row">
-        <ProductDetailName as="th" :text="getHeaderText(row)" class="details-table-header" />
+      <tr
+        v-for="(row, index) in validatedItems"
+        :key="index"
+        class="details-table-row"
+      >
+        <ProductDetailName
+          as="th"
+          :text="getHeaderText(row)"
+          class="details-table-header"
+        />
 
-        <td v-if="'links' in row" class="details-table-cell">
+        <td
+          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" target="_blank" rel="noopener noreferrer" class="link-primary">
-                {{ link.name }}
+              <a
+                :href="link.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link-primary"
+              >
+                {{ link.anchor }}
               </a>
             </li>
           </ul>
         </td>
 
-        <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)" class="details-table-cell">
+        <td
+          v-else-if="isGenericArray(row)"
+          class="details-table-cell"
+        >
           <ul class="list-none p-0 m-0">
             <li
               v-for="(item, itemIndex) in row.value as string[]"
@@ -225,12 +137,14 @@ const groupedItems = computed(() => {
         </td>
 
         <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 v-else-if="'id' in row" :name="row.id">
+        <slot
+          :name="row.id"
+        >
           <td class="details-table-cell">
             {{ row.value }}
           </td>

package/src/components/SlimBanner.vue

@@ -15,22 +15,24 @@ const toggleVisibility = () => {
 </script>
 
 <template>
-  <div v-if="isShow" data-pagefind-ignore class="slimbanner">
+  <div
+    v-if="isShow"
+    data-pagefind-ignore
+    class="slimbanner"
+  >
     <span
       class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]"
     />
-    <span class="leading-none"
-      ><span
-        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
-      />
+    <span class="leading-none"><span
+                                 data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
+                               />
       <a
         href="https://polo.blue/support-ukraine/"
         target="_blank"
         rel="noopener"
         title="Support Ukraine"
         class="underline underline-offset-2 hover:text-blue-wrc"
-        >this page</a
-      >.
+      >this page</a>.
     </span>
 
     <button

package/src/components/Table.vue

@@ -14,14 +14,26 @@ const capitalizeFirstLetter = (text: string) => {
   <table class="table-auto text-left border bg-white shadow-md">
     <thead class="bg-gray-500 text-white">
       <tr class="border">
-        <th v-for="(thead, index) in theads" :key="index" class="px-4 py-2 font-semibold">
+        <th
+          v-for="(thead, index) in theads"
+          :key="index"
+          class="px-4 py-2 font-semibold"
+        >
           {{ capitalizeFirstLetter(thead) }}
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(row, index) in props.data" :key="index" class="border">
-        <td v-for="key in Object.keys(row)" :key="key" class="px-4 py-2">
+      <tr
+        v-for="(row, index) in props.data"
+        :key="index"
+        class="border"
+      >
+        <td
+          v-for="key in Object.keys(row)"
+          :key="key"
+          class="px-4 py-2"
+        >
           {{ row[key] }}
         </td>
       </tr>

package/src/components/Translations.vue

@@ -18,7 +18,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div v-if="props.translations !== null && props.translations.uri" data-pagefind-ignore>
+  <div
+    v-if="props.translations !== null && props.translations.uri"
+    data-pagefind-ignore
+  >
     <a
       aria-label="Change language"
       type="button"