spoko-design-system 0.8.0 → 0.8.2

package/package.json

@@ -1,124 +1,124 @@
-{
-  "name": "spoko-design-system",
-  "version": "0.8.0",
-  "private": false,
-  "main": "./index.ts",
-  "module": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": {
-      "import": "./index.ts",
-      "require": "./index.ts"
-    },
-    "./styles/*": "./src/styles/*",
-    "./icons": "./icon.config.ts",
-    "./icon-collections": "./icon.collections.ts",
-    "./uno-config": "./uno-config/index.ts"
-  },
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/polo-blue/sds"
-  },
-  "author": {
-    "name": "spokospace",
-    "email": "szymon@spoko.space",
-    "url": "https://spoko.space"
-  },
-  "homepage": "https://sds.spoko.space/",
-  "license": "MIT",
-  "keywords": [
-    "astro-starter",
-    "seo",
-    "astro",
-    "sds design system",
-    "spoko design system"
-  ],
-  "dependencies": {
-    "@algolia/client-search": "^5.27.0",
-    "@astrojs/mdx": "^4.3.0",
-    "@astrojs/node": "^9.2.2",
-    "@astrojs/sitemap": "^3.4.1",
-    "@astrojs/ts-plugin": "^1.10.4",
-    "@astrojs/vue": "^5.1.0",
-    "@docsearch/css": "^3.9.0",
-    "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/bi": "^1.2.4",
-    "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.9",
-    "@iconify-json/circle-flags": "^1.2.6",
-    "@iconify-json/ei": "^1.2.2",
-    "@iconify-json/el": "^1.2.1",
-    "@iconify-json/eos-icons": "^1.2.2",
-    "@iconify-json/et": "^1.2.1",
-    "@iconify-json/flowbite": "^1.2.5",
-    "@iconify-json/fluent": "^1.2.23",
-    "@iconify-json/fluent-emoji": "1.2.3",
-    "@iconify-json/ic": "^1.2.2",
-    "@iconify-json/icon-park-outline": "^1.2.2",
-    "@iconify-json/la": "^1.2.1",
-    "@iconify-json/material-symbols-light": "^1.2.26",
-    "@iconify-json/mdi": "^1.2.3",
-    "@iconify-json/noto-v1": "^1.2.2",
-    "@iconify-json/octicon": "^1.2.6",
-    "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.38",
-    "@iconify-json/system-uicons": "^1.2.2",
-    "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.348",
-    "@iconify/vue": "^5.0.0",
-    "@playform/compress": "^0.2.0",
-    "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.2.0",
-    "@unocss/preset-attributify": "66.2.0",
-    "@unocss/preset-typography": "66.2.0",
-    "@unocss/preset-uno": "66.2.0",
-    "@unocss/preset-web-fonts": "66.2.0",
-    "@unocss/preset-wind": "66.2.0",
-    "@unocss/reset": "66.2.0",
-    "@vite-pwa/astro": "^1.1.0",
-    "@vueuse/core": "^13.3.0",
-    "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.5",
-    "astro-meta-tags": "^0.3.2",
-    "astro-navbar": "^2.3.9",
-    "astro-pagefind": "^1.8.3",
-    "astro-remote": "^0.3.4",
-    "dotenv": "^16.5.0",
-    "i18next": "^25.2.1",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "i18next-fs-backend": "^2.6.0",
-    "i18next-http-backend": "^3.0.2",
-    "i18next-vue": "^5.3.0",
-    "swiper": "^11.2.8",
-    "unocss": "66.2.0",
-    "vue": "^3.5.16"
-  },
-  "devDependencies": {
-    "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.0.1",
-    "@unocss/transformer-variant-group": "66.2.0",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vue/compiler-sfc": "^3.5.16",
-    "astro": "^5.9.2",
-    "unocss": "^0.65.0",
-    "vite": "^6.3.5"
-  },
-  "packageManager": "pnpm@9.15.3",
-  "pnpm": {
-    "default": "9.15.3",
-    "overrides": {
-      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
-      "sharp@<0.30.5": ">=0.30.5"
-    }
-  },
-  "engines": {
-    "node": ">=18.14.1",
-    "pnpm": ">=9.15.3"
-  }
+{
+  "name": "spoko-design-system",
+  "version": "0.8.2",
+  "private": false,
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": "./index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./icons": "./icon.config.ts",
+    "./icon-collections": "./icon.collections.ts",
+    "./uno-config": "./uno-config/index.ts"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polo-blue/sds"
+  },
+  "author": {
+    "name": "spokospace",
+    "email": "szymon@spoko.space",
+    "url": "https://spoko.space"
+  },
+  "homepage": "https://sds.spoko.space/",
+  "license": "MIT",
+  "keywords": [
+    "astro-starter",
+    "seo",
+    "astro",
+    "sds design system",
+    "spoko design system"
+  ],
+  "dependencies": {
+    "@algolia/client-search": "^5.29.0",
+    "@astrojs/mdx": "^4.3.0",
+    "@astrojs/node": "^9.2.2",
+    "@astrojs/sitemap": "^3.4.1",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@astrojs/vue": "^5.1.0",
+    "@docsearch/css": "^3.9.0",
+    "@iconify-json/ant-design": "^1.2.5",
+    "@iconify-json/bi": "^1.2.4",
+    "@iconify-json/bx": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.10",
+    "@iconify-json/circle-flags": "^1.2.6",
+    "@iconify-json/ei": "^1.2.2",
+    "@iconify-json/el": "^1.2.1",
+    "@iconify-json/eos-icons": "^1.2.2",
+    "@iconify-json/et": "^1.2.1",
+    "@iconify-json/flowbite": "^1.2.5",
+    "@iconify-json/fluent": "^1.2.25",
+    "@iconify-json/fluent-emoji": "1.2.3",
+    "@iconify-json/ic": "^1.2.2",
+    "@iconify-json/icon-park-outline": "^1.2.2",
+    "@iconify-json/la": "^1.2.1",
+    "@iconify-json/material-symbols-light": "^1.2.27",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/noto-v1": "^1.2.2",
+    "@iconify-json/octicon": "^1.2.6",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.39",
+    "@iconify-json/system-uicons": "^1.2.2",
+    "@iconify-json/uil": "^1.2.3",
+    "@iconify/json": "^2.2.351",
+    "@iconify/vue": "^5.0.0",
+    "@playform/compress": "^0.2.0",
+    "@playform/inline": "^0.1.2",
+    "@unocss/astro": "66.2.3",
+    "@unocss/preset-attributify": "66.2.3",
+    "@unocss/preset-typography": "66.2.3",
+    "@unocss/preset-uno": "66.2.3",
+    "@unocss/preset-web-fonts": "66.2.3",
+    "@unocss/preset-wind": "66.2.3",
+    "@unocss/reset": "66.2.3",
+    "@vite-pwa/astro": "^1.1.0",
+    "@vueuse/core": "^13.4.0",
+    "astro-i18next": "1.0.0-beta.21",
+    "astro-icon": "^1.1.5",
+    "astro-meta-tags": "^0.3.2",
+    "astro-navbar": "^2.4.0",
+    "astro-pagefind": "^1.8.3",
+    "astro-remote": "^0.3.4",
+    "dotenv": "^16.5.0",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-fs-backend": "^2.6.0",
+    "i18next-http-backend": "^3.0.2",
+    "i18next-vue": "^5.3.0",
+    "swiper": "^11.2.8",
+    "unocss": "66.2.3",
+    "vue": "^3.5.17"
+  },
+  "devDependencies": {
+    "@types/gtag.js": "^0.0.20",
+    "@types/node": "^24.0.3",
+    "@unocss/transformer-variant-group": "66.2.3",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/compiler-sfc": "^3.5.17",
+    "astro": "^5.10.1",
+    "unocss": "^0.65.0",
+    "vite": "^6.3.5"
+  },
+  "packageManager": "pnpm@9.15.3",
+  "pnpm": {
+    "default": "9.15.3",
+    "overrides": {
+      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
+      "sharp@<0.30.5": ">=0.30.5"
+    }
+  },
+  "engines": {
+    "node": ">=18.14.1",
+    "pnpm": ">=9.15.3"
+  }
 }

package/src/components/ProductDetailsList.vue

@@ -2,12 +2,26 @@
 import { PropType, computed } from "vue";
 import ProductDetailName from "./ProductDetailName.vue";
 
+interface ColorCode {
+  code: string;
+  name: string;
+}
+
+interface PaintMark {
+  count: number;
+  color: string;
+}
+
 interface TableItem {
   id: string;
   name: string;
   value: unknown;
   translated?: boolean;
   icon?: boolean;
+  isArrayValue?: boolean;
+  isColorArray?: boolean;
+  isPaintMarks?: boolean;
+  isGenericArray?: boolean;
 }
 
 interface GroupedLink {
@@ -28,11 +42,31 @@ const isLink = (id: string) => {
   return ['blog', 'youtube', 'vimeo'].includes(id);
 };
 
+// Function for checking if it's a color array
+const isColorArray = (item: TableItem) => {
+  return item.isColorArray && Array.isArray(item.value);
+};
+
+// Function for checking if it's paint marks
+const isPaintMarks = (item: TableItem) => {
+  return item.isPaintMarks && Array.isArray(item.value);
+};
+
+// Function for checking if it's a generic array
+const isGenericArray = (item: TableItem) => {
+  return item.isGenericArray && 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) => {
   // For the blog, we use id instead of name
   if (row.id === 'blog') {
-    return row.id.charAt(0).toUpperCase() + row.id.slice(1); // "Blog" z dużej litery
+    return row.id.charAt(0).toUpperCase() + row.id.slice(1);
   }
   
   // For other types, we use name (if it is GroupedLink, there is no name)
@@ -70,7 +104,7 @@ const groupedItems = computed(() => {
         });
       }
       
-      // Dodajemy link do odpowiedniej grupy
+      // Add link to the relevant group
       linkGroups.get(item.id)?.links.push({
         name: item.name,
         value: item.value as string
@@ -120,6 +154,39 @@ const groupedItems = computed(() => {
           </ul>
         </td>
         
+        <!-- Special handling for color arrays (already translated) -->
+        <td v-else-if="'id' in row && isColorArray(row)" class="details-table-cell">
+        <ul>
+          <li v-for="(colorItem, colorIndex) in (row.value as ColorCode[])" :key="colorIndex" 
+               class="flex items-center gap-1 mb-1 last:mb-0">
+            <code>
+              {{ colorItem.code }}
+            </code>
+            <span class="text-gray-400">-</span>
+            <span class="text-gray-700 dark:text-gray-300">{{ colorItem.name }}</span>
+          </li>
+          </ul>
+        </td>
+        
+        <!-- Special handling for paint marks (already translated) -->
+        <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>
+        
+        <!-- Generic array handling (bullet list) -->
+        <td v-else-if="'id' in row && isGenericArray(row)" class="details-table-cell">
+          <ul class="list-none p-0 m-0">
+            <li v-for="(item, itemIndex) in (row.value as string[])" :key="itemIndex" 
+                class="flex items-start gap-2 mb-1 last:mb-0 leading-relaxed">
+              <span class="text-gray-500 font-bold flex-shrink-0 mt-0.5">·</span>
+              <span class="text-gray-700 dark:text-gray-300 text-sm">{{ item }}</span>
+            </li>
+          </ul>
+        </td>
+        
+        <!-- Handling HTML values (fallback for already formatted HTML) -->
+        <td v-else-if="'id' in row && isHtmlValue(row.value)" class="details-table-cell" v-html="row.value"></td>
+        
         <!-- Support for standard types -->
         <slot v-else-if="'id' in row" :name="row.id">
           <td class="details-table-cell">{{ row.value }}</td>
@@ -127,4 +194,4 @@ const groupedItems = computed(() => {
       </tr>
     </tbody>
   </table>
-</template>
+</template>