spoko-design-system 1.4.2 → 1.4.4

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.4.4](https://github.com/polo-blue/sds/compare/v1.4.3...v1.4.4) (2025-10-26)
+
+### Bug Fixes
+
+* resolve vite-plugin-pwa peer dependency warning and update theme constants ([502f684](https://github.com/polo-blue/sds/commit/502f6846c12ef600213559d304336691e8953dd0))
+
+## [1.4.3](https://github.com/polo-blue/sds/compare/v1.4.2...v1.4.3) (2025-10-26)
+
 ## [1.4.2](https://github.com/polo-blue/sds/compare/v1.4.1...v1.4.2) (2025-10-25)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -51,8 +51,8 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.40.1",
-    "@astrojs/mdx": "^4.3.7",
+    "@algolia/client-search": "^5.41.0",
+    "@astrojs/mdx": "^4.3.8",
     "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
     "@astrojs/ts-plugin": "^1.10.5",
@@ -68,25 +68,25 @@
     "@iconify-json/eos-icons": "^1.2.4",
     "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.7",
-    "@iconify-json/fluent": "^1.2.33",
+    "@iconify-json/fluent": "^1.2.34",
     "@iconify-json/fluent-emoji": "1.2.6",
     "@iconify-json/ic": "^1.2.4",
     "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify-json/la": "^1.2.1",
-    "@iconify-json/lucide": "^1.2.70",
+    "@iconify-json/lucide": "^1.2.71",
     "@iconify-json/material-symbols-light": "^1.2.42",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.5",
     "@iconify-json/octicon": "^1.2.16",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.54",
+    "@iconify-json/simple-icons": "^1.2.55",
     "@iconify-json/streamline": "^1.2.5",
     "@iconify-json/streamline-emojis": "^1.2.4",
     "@iconify-json/streamline-freehand-color": "^1.2.2",
     "@iconify-json/system-uicons": "^1.2.4",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify-json/vscode-icons": "^1.2.32",
-    "@iconify/json": "^2.2.397",
+    "@iconify-json/vscode-icons": "^1.2.33",
+    "@iconify/json": "^2.2.400",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
@@ -98,29 +98,30 @@
     "@unocss/preset-wind": "66.5.4",
     "@unocss/reset": "66.5.4",
     "@vite-pwa/astro": "^1.1.1",
-    "@vueuse/core": "^13.9.0",
+    "@vueuse/core": "^14.0.0",
     "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.4.0",
     "astro-navbar": "^2.4.0",
     "astro-pagefind": "^1.8.5",
     "astro-remote": "^0.3.4",
     "dotenv": "^17.2.3",
-    "swiper": "^12.0.2",
+    "swiper": "^12.0.3",
     "unocss": "66.5.4",
+    "vite-plugin-pwa": "^1.1.0",
     "vue": "^3.5.22"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.8.1",
-    "@typescript-eslint/eslint-plugin": "^8.46.1",
-    "@typescript-eslint/parser": "^8.46.1",
+    "@types/node": "^24.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
     "@unocss/transformer-variant-group": "66.5.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/compiler-sfc": "^3.5.22",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.14.6",
+    "astro": "^5.15.1",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.38.0",
     "eslint-plugin-astro": "^1.3.1",
@@ -129,7 +130,7 @@
     "prettier-plugin-astro": "^0.14.1",
     "semantic-release": "^25.0.1",
     "unocss": "^0.65.0",
-    "vite": "^7.1.11"
+    "vite": "^7.1.12"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

package/src/pages/components/details-list.mdx

@@ -12,32 +12,32 @@ export const prcodesArray = ["PJ4", "CA2", "C4E", "2JZ"]
 export const tableItems = [
   {
     id: "number",
-    name: "Part number",
+    label: "Part number",
     value: "6R0071609GRU",
   },
   {
     id: "prcodes",
-    name: "PR-Codes",
+    label: "PR-Codes",
     value: ["PJ4", "CA2", "C4E", "2JZ"],
   },
   {
     id: "color",
-    name: "Color",
+    label: "Color",
     value: "Black",
   },
   {
     id: "position",
-    name: "Fitting position",
+    label: "Fitting position",
     value: "Front axle",
   },
   {
     id: "brake-disck-thicnkess",
-    name: "Brake disc thicknes",
+    label: "Brake disc thicknes",
     value: "22 mm",
   },
   {
     id: "weight",
-    name: "Weight",
+    label: "Weight",
     value: "5.185 kg"
   }
 ];
@@ -58,35 +58,35 @@ export const tableItems = [
 </div>
 
 ```ts
- const tableItems = [
+const tableItems = [
   {
     id: "number",
-    name: "Part number",
+    label: "Part number",
     value: "6R0071609GRU",
   },
   {
     id: "prcodes",
-    name: "PR-Codes",
+    label: "PR-Codes",
     value: ["PJ4", "CA2", "C4E"]
   },
   {
     id: "color",
-    name: "Color",
+    label: "Color",
     value: "Black",
   },
   {
     id: "position",
-    name: "Fitting position",
+    label: "Fitting position",
     value: "Front axle",
   },
   {
     id: "brake-disck-thicnkess",
-    name: "Brake disc thicknes",
+    label: "Brake disc thicknes",
     value: "22 mm",
   },
   {
     id: "weight",
-    name: "Weight",
+    label: "Weight",
     value: "5.185 kg"
   }
 ];
@@ -103,7 +103,7 @@ export const tableItems = [
   </td>
 </ProductDetailsList>
  ```
- ### Vue:
+### Vue:
 ```js
 <ProductDetailsList items={tableItems}>
   <template #number >
@@ -113,4 +113,85 @@ export const tableItems = [
     <ProductCodes as="td" prcodes={prcodesArray} />
   </template>
 </ProductDetailsList>
- ```
+```
+
+## Props
+
+### items
+Array of table items with the following structure:
+- `id` (string): Unique identifier for the row, also used for slot names
+- `label` (string): Display name for the table header
+- `value` (unknown): The value to display - can be string, number, boolean, string array, or Link array
+- `type` (optional string): Set to `'links'` for link arrays
+- `isGenericArray` (optional boolean): Set to `true` for generic string arrays
+
+### caption
+Optional string for the table caption.
+
+## Value Types
+
+The component supports multiple value types:
+
+### Link Arrays
+Use `type: 'links'` to display an array of links with icons:
+
+```ts
+{
+  id: "resources",
+  label: "Resources",
+  type: "links",
+  value: [
+    { type: "blog", url: "https://example.com/blog", anchor: "Blog Post" },
+    { type: "youtube", url: "https://youtube.com/watch", anchor: "Video Tutorial" },
+    { type: "vimeo", url: "https://vimeo.com/123", anchor: "Demo Video" }
+  ]
+}
+```
+
+Supported link types with icons:
+- `blog` - Book text icon
+- `youtube` - YouTube icon
+- `vimeo` - Vimeo icon
+- Default - Generic link icon
+
+### Generic String Arrays
+Use `isGenericArray: true` to display a bulleted list:
+
+```ts
+{
+  id: "position",
+  label: "Fitting position",
+  isGenericArray: true,
+  value: ["Front axle", "Rear axle"]
+}
+```
+
+### HTML Values
+The component automatically detects and renders HTML strings:
+
+```ts
+{
+  id: "description",
+  label: "Description",
+  value: "Compatible with <span class='font-bold'>multiple models</span>"
+}
+```
+
+### Simple Values
+Strings, numbers, and booleans are displayed as-is:
+
+```ts
+{
+  id: "weight",
+  label: "Weight",
+  value: "5.185 kg"
+}
+```
+
+## Slots
+
+### caption
+Override the default caption with custom content.
+
+### Row-specific slots
+Use the row's `id` as the slot name to override the default value rendering. The slot receives the entire row as slot props.

package/uno-config/theme/shortcuts/constants.ts

@@ -46,7 +46,7 @@ export const LAYOUT = {
   },
   spacing: {
     topPadding: 'pt-24 sm:pt-14',
-    containerPadding: 'px-4',
+    containerPadding: 'px-4 2xl:px-10',
   },
   grid: {
     cols2: 'grid-cols-2',
@@ -134,7 +134,7 @@ export const PRODUCT_STYLES = {
     container: `${aspectRatios['4/3']} ${LAYOUT.flex.alignCenter} mb-3 sm:mb-auto ${IMAGE_STYLES.overlay}`,
   },
   link: {
-    base: 'relative flex w-full bg-white after:(absolute bg-accent-light w-[calc(100%-1rem)] left-0 h-px top-[calc(100%-1px)] bottom-1 content-empty scale-x-0 transition-transform-300 origin-top-right) hover:after:(origin-top-left scale-x-100)',
+    base: 'relative flex w-full after:(absolute bg-accent-light w-[calc(100%-1rem)] left-0 h-px top-[calc(100%-1px)] bottom-1 content-empty scale-x-0 transition-transform-300 origin-top-right) hover:after:(origin-top-left scale-x-100)',
     url: 'font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em]',
     urlOverlay: 'before:(content-empty absolute left-0 right-4 h-full top-0)',
     bigTile: `${aspectRatios['4/3']} ${LAYOUT.flex.center} mb-3 w-60 min-w-60 h-auto object-contain object-top bg-gray-50 relative ${IMAGE_STYLES.overlay}`,