spoko-design-system 1.1.14 → 1.1.16

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.1.16](https://github.com/polo-blue/sds/compare/v1.1.15...v1.1.16) (2025-09-23)
+
+### Bug Fixes
+
+* apply prettier formatting to resolve CI formatting issues ([a95d274](https://github.com/polo-blue/sds/commit/a95d2740358fa6941055f8957a40936a3175fa3e))
+
+## [1.1.15](https://github.com/polo-blue/sds/compare/v1.1.14...v1.1.15) (2025-09-23)
+
+### Bug Fixes
+
+* resolve majority of ESLint warnings ([54c4b7f](https://github.com/polo-blue/sds/commit/54c4b7f611301523ef61359cd62e818026033549))
+
 ## [1.1.14](https://github.com/polo-blue/sds/compare/v1.1.13...v1.1.14) (2025-09-23)
 
 ### Bug Fixes

package/package.json

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

package/src/components/Breadcrumbs.vue

@@ -57,8 +57,7 @@ const isLast = (index: number) => {
           :title="props.textBack"
           itemprop="item"
           i-carbon-home
-        >
-        </a>
+        />
         <meta itemprop="position" content="1" />
       </li>
       <li
@@ -88,7 +87,7 @@ const isLast = (index: number) => {
           itemprop="item"
         >
           <span class="font-normal" itemprop="name">
-            <span v-html="crumb.name"></span>
+            <span v-html="crumb.name" />
             <b v-if="productNumber" class="hidden sm:inline font-normal ml-1"
               >&nbsp;{{ productNumber }}</b
             >

package/src/components/Button.vue

@@ -66,7 +66,7 @@ const attrs = useAttrs();
     :href="props.href"
     :title="props.title ? props.title : null"
   >
-    <slot></slot>
+    <slot />
   </component>
 </template>
 

package/src/components/FeaturesList.vue

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

package/src/components/Input.vue

@@ -106,25 +106,25 @@ const handleBlur = (event: globalThis.FocusEvent) => emit('blur', event);
       :class="inputClass + ' peer'"
       :placeholder="placeholder"
       :value="modelValue"
+      v-bind="attrs"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-bind="attrs"
-    ></textarea>
+    />
 
     <input
       v-else
-      :type="type"
       :id="id"
+      :type="type"
       :name="name || id"
       :required="required"
       :class="inputClass + ' peer'"
       :placeholder="placeholder"
       :value="modelValue"
+      v-bind="attrs"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-bind="attrs"
     />
 
     <label :for="id" :class="labelClass" style="transform-origin: top left">

package/src/components/MainColors.vue

@@ -8,10 +8,12 @@ const colorCategories = Object.entries(colors);
 <template>
   <div class="flex flex-col space-y-12">
     <div v-for="[category, shades] in colorCategories" :key="category">
-      <h3 class="capitalize">{{ category }}</h3>
+      <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>
+          <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/Product/ProductDetails.vue

@@ -49,7 +49,7 @@ const props = defineProps({
           v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue"
           class="items--2 inline-block"
         >
-          <span class="comma" v-for="(color, indexColor) in detail.value" :key="indexColor">
+          <span v-for="(color, indexColor) in detail.value" :key="indexColor" class="comma">
             {{ color['name'] }}
           </span>
         </div>
@@ -100,8 +100,8 @@ const props = defineProps({
 
           <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
             <span
-              v-for="(mark, index) in JSON.parse(String(detail.value))"
-              :key="index"
+              v-for="(mark, markIndex) in JSON.parse(String(detail.value))"
+              :key="markIndex"
               class="item"
             >
               {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>

package/src/components/Product/ProductLink.vue

@@ -22,7 +22,7 @@
         v-html="nameFormatted"
       />
 
-      <ProductNumber :productNumber="productNumber" :copyDisabled="true" />
+      <ProductNumber :product-number="productNumber" :copy-disabled="true" />
 
       <template v-if="index !== null">
         <meta itemprop="position" :content="index.toString()" />
@@ -47,6 +47,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  price: undefined,
   bigTile: false,
   index: null,
 });

package/src/components/ProductCodes.vue

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

package/src/components/ProductDetailsList.vue

@@ -139,7 +139,9 @@ const groupedItems = computed(() => {
 <template>
   <table class="details-table">
     <caption v-if="!!$slots.caption || caption">
-      <slot name="caption">{{ caption }}</slot>
+      <slot name="caption">
+        {{ caption }}
+      </slot>
     </caption>
     <colgroup>
       <col class="details-table-col" />
@@ -226,10 +228,12 @@ const groupedItems = computed(() => {
           v-else-if="'id' in row && isHtmlValue(row.value)"
           class="details-table-cell"
           v-html="row.value"
-        ></td>
+        />
 
         <slot v-else-if="'id' in row" :name="row.id">
-          <td class="details-table-cell">{{ row.value }}</td>
+          <td class="details-table-cell">
+            {{ row.value }}
+          </td>
         </slot>
       </tr>
     </tbody>

package/src/components/SlimBanner.vue

@@ -34,12 +34,12 @@ const toggleVisibility = () => {
     </span>
 
     <button
-      class="btn-close text-white"
       v-if="props.showCloseButton"
-      @click="toggleVisibility()"
+      class="btn-close text-white"
       aria-label="Toggle"
+      @click="toggleVisibility()"
     >
-      <span class="close close-dark"></span>
+      <span class="close close-dark" />
     </button>
   </div>
   <div
@@ -56,12 +56,12 @@ const toggleVisibility = () => {
       <span data-text="STATE" />
     </div>
     <button
-      class="btn-close"
       v-if="props.showCloseButton"
-      @click="toggleVisibility()"
+      class="btn-close"
       aria-label="Toggle"
+      @click="toggleVisibility()"
     >
-      <span class="close close-light"></span>
+      <span class="close close-light" />
     </button>
   </div>
 </template>

package/src/components/Table.vue

@@ -14,14 +14,14 @@ 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 class="px-4 py-2 font-semibold" v-for="(thead, index) in theads" :key="index">
+        <th v-for="(thead, index) in theads" :key="index" class="px-4 py-2 font-semibold">
           {{ capitalizeFirstLetter(thead) }}
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr class="border" v-for="row in props.data" :key="row">
-        <td class="px-4 py-2" v-for="key in Object.keys(row)" :key="key">
+      <tr v-for="row in props.data" :key="row" 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

@@ -4,6 +4,7 @@ import { PropType } from 'vue';
 const props = defineProps({
   lang: {
     type: String,
+    default: 'en',
   },
   translations: {
     type: Object as PropType<{
@@ -11,12 +12,13 @@ const props = defineProps({
       title: string | null;
       name: string | null;
     } | null>,
+    default: null,
   },
 });
 </script>
 
 <template>
-  <div data-pagefind-ignore v-if="props.translations !== null && props.translations.uri">
+  <div v-if="props.translations !== null && props.translations.uri" data-pagefind-ignore>
     <a
       aria-label="Change language"
       type="button"

package/src/pwa.ts

@@ -3,11 +3,9 @@ import { registerSW } from 'virtual:pwa-register';
 registerSW({
   immediate: true,
   onRegisteredSW(swScriptUrl) {
-    // eslint-disable-next-line no-undef
     console.log('SW registered: ', swScriptUrl);
   },
   onOfflineReady() {
-    // eslint-disable-next-line no-undef
     console.log('PWA application ready to work offline');
   },
 });