spoko-design-system 1.1.15 → 1.1.16

package/CHANGELOG.md

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

package/package.json

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

package/src/components/Badge.vue

@@ -14,10 +14,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    class="badge"
-    :class="props.class"
-  >
+  <div class="badge" :class="props.class">
     {{ props.badge }}
   </div>
 </template>

package/src/components/Badges.vue

@@ -14,10 +14,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    v-if="props.badges && props.badges.length > 0"
-    class="absolute z-2"
-  >
+  <div v-if="props.badges && props.badges.length > 0" class="absolute z-2">
     <Badge
       v-for="(badge, index) in props.badges"
       :key="index"

package/src/components/Breadcrumbs.vue

@@ -39,19 +39,9 @@ const isLast = (index: number) => {
 <template>
   <nav>
     <ul class="breadcrumbs-base">
-      <li
-        v-if="props.showBack"
-        class="breadcrumb-item"
-      >
-        <button
-          class="breadcrumb-back-btn"
-          :title="props.textBack"
-          onclick="history.back()"
-        >
-          <span
-            class="block px-3"
-            i-bx-bx-arrow-back
-          />
+      <li v-if="props.showBack" class="breadcrumb-item">
+        <button class="breadcrumb-back-btn" :title="props.textBack" onclick="history.back()">
+          <span class="block px-3" i-bx-bx-arrow-back />
         </button>
       </li>
     </ul>
@@ -60,10 +50,7 @@ const isLast = (index: number) => {
       itemscope
       itemtype="https://schema.org/BreadcrumbList"
     >
-      <li
-        v-if="props.showHome"
-        class="breadcrumb-item"
-      >
+      <li v-if="props.showHome" class="breadcrumb-item">
         <a
           href="/"
           class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto"
@@ -71,10 +58,7 @@ const isLast = (index: number) => {
           itemprop="item"
           i-carbon-home
         />
-        <meta
-          itemprop="position"
-          content="1"
-        >
+        <meta itemprop="position" content="1" />
       </li>
       <li
         v-for="(crumb, index) in breadcrumbs"
@@ -84,10 +68,7 @@ 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)"
@@ -96,10 +77,7 @@ 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
@@ -108,22 +86,15 @@ 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

@@ -28,18 +28,11 @@ 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,9 +1,5 @@
 <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,9 +1,5 @@
 <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,18 +16,11 @@ 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 in props.items"
-      :key="item"
-      class="features-list-item"
-    >
+    <li v-for="item in props.items" :key="item" class="features-list-item">
       {{ item }}
     </li>
   </ul>

package/src/components/FuckRussia.vue

@@ -1,47 +1,20 @@
 <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,31 +125,18 @@ 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,23 +7,13 @@ 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,10 +8,11 @@ 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,10 +21,7 @@ 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,10 +9,7 @@ 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,10 +15,7 @@ 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,28 +30,18 @@ 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>
 
@@ -59,26 +49,16 @@ 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>
@@ -91,14 +71,8 @@ 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' : ''"
@@ -106,34 +80,25 @@ 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"
@@ -142,15 +107,8 @@ 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,10 +20,7 @@ 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,10 +15,7 @@ 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,27 +1,16 @@
 <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>
 
@@ -33,20 +22,11 @@
         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,10 +10,7 @@ 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,16 +11,8 @@ 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,11 +16,7 @@ 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,15 +24,8 @@ 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,10 +23,7 @@ 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

@@ -144,25 +144,14 @@ 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 groupedItems" :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="'links' in row" class="details-table-cell">
           <ul class="list-none p-0 m-0">
             <li
               v-for="(link, linkIndex) in row.links"
@@ -175,22 +164,14 @@ const groupedItems = computed(() => {
                   '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"
-              >
+              <a :href="link.value" target="_blank" rel="noopener noreferrer" class="link-primary">
                 {{ link.name }}
               </a>
             </li>
           </ul>
         </td>
 
-        <td
-          v-else-if="'id' in row && isColorArray(row)"
-          class="details-table-cell"
-        >
+        <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[]"
@@ -208,17 +189,11 @@ const groupedItems = computed(() => {
           </ul>
         </td>
 
-        <td
-          v-else-if="'id' in row && isPaintMarks(row)"
-          class="details-table-cell"
-        >
+        <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"
-        >
+        <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[]"
@@ -236,10 +211,7 @@ const groupedItems = computed(() => {
           </ul>
         </td>
 
-        <td
-          v-else-if="'id' in row && isGenericArray(row)"
-          class="details-table-cell"
-        >
+        <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[]"
@@ -258,10 +230,7 @@ const groupedItems = computed(() => {
           v-html="row.value"
         />
 
-        <slot
-          v-else-if="'id' in row"
-          :name="row.id"
-        >
+        <slot v-else-if="'id' in row" :name="row.id">
           <td class="details-table-cell">
             {{ row.value }}
           </td>

package/src/components/SlimBanner.vue

@@ -15,24 +15,22 @@ 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,26 +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
-          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 in props.data"
-        :key="row"
-        class="border"
-      >
-        <td
-          v-for="key in Object.keys(row)"
-          :key="key"
-          class="px-4 py-2"
-        >
+      <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

@@ -18,10 +18,7 @@ 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"

package/src/pwa.ts

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