spoko-design-system 1.1.11 → 1.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/eslint.config.js +10 -0
  3. package/package.json +1 -1
  4. package/src/components/Product/ProductDetails.vue +71 -67
  5. package/src/components/ProductDetailsList.vue +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## [1.1.13](https://github.com/polo-blue/sds/compare/v1.1.12...v1.1.13) (2025-09-23)
2
+
3
+ ### Bug Fixes
4
+
5
+ * apply prettier formatting to ProductDetails.vue ([4b4c508](https://github.com/polo-blue/sds/commit/4b4c508ea86c050bc8af398484469f172cdea5b8))
6
+
7
+ ## [1.1.12](https://github.com/polo-blue/sds/compare/v1.1.11...v1.1.12) (2025-09-23)
8
+
9
+ ### Bug Fixes
10
+
11
+ * restore normal console usage and add browser globals to ESLint config ([b8863af](https://github.com/polo-blue/sds/commit/b8863af8ec11266c8d612ea28129423a51d0a2d7))
12
+
1
13
  ## [1.1.11](https://github.com/polo-blue/sds/compare/v1.1.10...v1.1.11) (2025-09-23)
2
14
 
3
15
  ### Bug Fixes
package/eslint.config.js CHANGED
@@ -16,6 +16,11 @@ export default [
16
16
  ecmaVersion: 'latest',
17
17
  sourceType: 'module',
18
18
  },
19
+ globals: {
20
+ console: 'readonly',
21
+ window: 'readonly',
22
+ document: 'readonly',
23
+ },
19
24
  },
20
25
  plugins: {
21
26
  '@typescript-eslint': typescript,
@@ -37,6 +42,11 @@ export default [
37
42
  ecmaVersion: 'latest',
38
43
  sourceType: 'module',
39
44
  },
45
+ globals: {
46
+ console: 'readonly',
47
+ window: 'readonly',
48
+ document: 'readonly',
49
+ },
40
50
  },
41
51
  rules: {
42
52
  'vue/multi-word-component-names': 'off',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "1.1.11",
3
+ "version": "1.1.13",
4
4
  "private": false,
5
5
  "main": "./index.ts",
6
6
  "module": "./index.ts",
package/src/components/Product/ProductDetails.vue CHANGED
@@ -30,86 +30,90 @@ const props = defineProps({
30
30
 
31
31
  <template>
32
32
  <div v-if="details && details.length">
33
- <template
34
- v-for="(detail, index) in details"
35
- :key="index"
36
- >
37
- <!-- PDP PAGE - PRODUCT ROW -->
38
- <!-- <pre>{{ JSON.stringify(details) }}</pre> -->
39
- <li
40
- v-if="props.small"
41
- class="text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular"
42
- >
43
- <span v-if="detail.id" class="inline-block mr-1 items--0">
44
- {{ getTranslation(`detail.${detail.id}`) }}:
45
- </span>
46
-
47
- <span v-if="detail.translated" :class="detail.id ? 'font-semibold' : ''" class="items--1">
48
- {{ detail.value }}
49
- </span>
50
-
51
- <div
52
- v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue"
53
- class="items--2 inline-block"
33
+ <template v-for="(detail, index) in details" :key="index">
34
+ <!-- PDP PAGE - PRODUCT ROW -->
35
+ <!-- <pre>{{ JSON.stringify(details) }}</pre> -->
36
+ <li
37
+ v-if="props.small"
38
+ class="text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular"
54
39
  >
55
- <span class="comma" v-for="(color, indexColor) in detail.value" :key="indexColor">
56
- {{ color['name'] }}
40
+ <span v-if="detail.id" class="inline-block mr-1 items--0">
41
+ {{ getTranslation(`detail.${detail.id}`) }}:
57
42
  </span>
58
- </div>
59
-
60
- <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="items--3">
61
- {{ locale === 'en' ? String(detail.value).replace(/,/g, '.') : String(detail.value) }}
62
- </span>
63
43
 
64
- <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items items--4">
65
- {{ detail.value }}
66
- <!-- <span v-for="(mark, index2) in JSON.parse(String(detail.value))" :key="index2" class="item">
67
- {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
68
- </span> -->
69
- </span>
70
- </li>
44
+ <span v-if="detail.translated" :class="detail.id ? 'font-semibold' : ''" class="items--1">
45
+ {{ detail.value }}
46
+ </span>
71
47
 
72
- <div
73
- v-else
74
- 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"
75
- >
76
- <!-- PRODUCT CARD -->
77
- <ProductDetailName v-if="detail.id" :text="getTranslation(`detail.${detail.id}`)" />
78
- <div v-if="detail.value" class="leading-4 flex items-end">
79
- <span
80
- v-if="detail.translated && !detail.isArrayValue"
81
- :class="detail.id === 'light-function' ? 'whitespace-pre-line' : ''"
48
+ <div
49
+ v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue"
50
+ class="items--2 inline-block"
82
51
  >
83
- {{ getTranslation(`detail.value.${detail.value}`) }}
52
+ <span class="comma" v-for="(color, indexColor) in detail.value" :key="indexColor">
53
+ {{ color['name'] }}
54
+ </span>
55
+ </div>
56
+
57
+ <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="items--3">
58
+ {{ locale === 'en' ? String(detail.value).replace(/,/g, '.') : String(detail.value) }}
84
59
  </span>
85
60
 
86
- <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="">
61
+ <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items items--4">
87
62
  {{ detail.value }}
63
+ <!-- <span v-for="(mark, index2) in JSON.parse(String(detail.value))" :key="index2" class="item">
64
+ {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
65
+ </span> -->
88
66
  </span>
67
+ </li>
89
68
 
90
- <span
91
- v-else-if="
92
- detail.value !== undefined && detail.id === 'for-exterior-colour' && detail.isArrayValue
93
- "
94
- class=""
95
- >
96
- <div v-for="(color, indexColor) in JSON.parse(String(detail.value))" :key="indexColor">
97
- <span class="font-mono">{{ color }}</span> - {{ getTranslation(`colorCodes.${color}`) }}
98
- </div>
99
- </span>
69
+ <div
70
+ v-else
71
+ 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"
72
+ >
73
+ <!-- PRODUCT CARD -->
74
+ <ProductDetailName v-if="detail.id" :text="getTranslation(`detail.${detail.id}`)" />
75
+ <div v-if="detail.value" class="leading-4 flex items-end">
76
+ <span
77
+ v-if="detail.translated && !detail.isArrayValue"
78
+ :class="detail.id === 'light-function' ? 'whitespace-pre-line' : ''"
79
+ >
80
+ {{ getTranslation(`detail.value.${detail.value}`) }}
81
+ </span>
100
82
 
101
- <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
102
- <span v-for="(mark, index) in JSON.parse(String(detail.value))" :key="index" class="item">
103
- {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
83
+ <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="">
84
+ {{ detail.value }}
104
85
  </span>
105
- </span>
106
- <ul v-else-if="detail.id && detail.isArrayValue" class="items">
107
- <li v-for="(d, index3) in JSON.parse(String(detail.value))" :key="index3" class="item">
108
- · {{ d }}
109
- </li>
110
- </ul>
86
+
87
+ <span
88
+ v-else-if="
89
+ detail.value !== undefined &&
90
+ detail.id === 'for-exterior-colour' &&
91
+ detail.isArrayValue
92
+ "
93
+ class=""
94
+ >
95
+ <div v-for="(color, indexColor) in JSON.parse(String(detail.value))" :key="indexColor">
96
+ <span class="font-mono">{{ color }}</span> -
97
+ {{ getTranslation(`colorCodes.${color}`) }}
98
+ </div>
99
+ </span>
100
+
101
+ <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
102
+ <span
103
+ v-for="(mark, index) in JSON.parse(String(detail.value))"
104
+ :key="index"
105
+ class="item"
106
+ >
107
+ {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
108
+ </span>
109
+ </span>
110
+ <ul v-else-if="detail.id && detail.isArrayValue" class="items">
111
+ <li v-for="(d, index3) in JSON.parse(String(detail.value))" :key="index3" class="item">
112
+ · {{ d }}
113
+ </li>
114
+ </ul>
115
+ </div>
111
116
  </div>
112
- </div>
113
117
  </template>
114
118
  </div>
115
119
  </template>
package/src/components/ProductDetailsList.vue CHANGED
@@ -97,7 +97,7 @@ const getLinkIconClass = (linkId: string) => {
97
97
  const groupedItems = computed(() => {
98
98
  // ✅ Add validation to ensure props.items is an array
99
99
  if (!Array.isArray(props.items)) {
100
- globalThis.console.warn('ProductDetailsList: items prop is not an array:', props.items);
100
+ console.warn('ProductDetailsList: items prop is not an array:', props.items);
101
101
  return [];
102
102
  }
103
103