spoko-design-system 1.1.17 → 1.2.1

package/src/components/FuckRussia.vue

@@ -1,20 +1,47 @@
 <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,18 +125,31 @@ 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,13 +7,23 @@ 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,11 +8,10 @@ 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,7 +21,10 @@ 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,7 +9,10 @@ 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,7 +15,10 @@ 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,18 +30,28 @@ 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>
 
@@ -49,16 +59,26 @@ 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>
@@ -71,8 +91,14 @@ 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' : ''"
@@ -80,25 +106,34 @@ 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"
@@ -107,8 +142,15 @@ 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,7 +20,10 @@ 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,7 +15,10 @@ 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,16 +1,27 @@
 <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>
 
@@ -22,11 +33,20 @@
         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>
@@ -34,8 +54,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { ProductNumber } from 'spoko-design-system';
-import { removeSemicolon } from 'spoko-design-system';
+import { ProductNumber, removeSemicolon } from 'spoko-design-system';
 
 interface Props {
   productName: string;

package/src/components/Product/ProductLinkInfo.astro

@@ -1,5 +1,5 @@
 ---
-import type { Product } from '../../types/Product';
+import type { Product } from '../../types/catalog';
 import ProductNumber from './ProductNumber.astro';
 
 interface Props {

package/src/components/Product/ProductModel.vue

@@ -10,7 +10,10 @@ 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,8 +11,16 @@ 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,7 +16,11 @@ 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,8 +24,15 @@ 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,7 +23,10 @@ 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

@@ -105,7 +105,7 @@ const groupedItems = computed(() => {
   const linkGroups = new Map<string, GroupedLink>();
 
   // Process all elements
-  props.items.forEach(item => {
+  for (const item of props.items) {
     // If it's a link (blog, youtube, vimeo)
     if (isLink(item.id)) {
       // Add a link to the relevant group
@@ -125,12 +125,12 @@ const groupedItems = computed(() => {
       // If it's not a link, add it normally to the results
       result.push(item);
     }
-  });
+  }
 
   // Add all link groups at the end
-  linkGroups.forEach(group => {
+  for (const group of linkGroups.values()) {
     result.push(group);
-  });
+  }
 
   return result;
 });
@@ -144,14 +144,25 @@ 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"
@@ -164,14 +175,22 @@ 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[]"
@@ -189,11 +208,17 @@ 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[]"
@@ -211,7 +236,10 @@ 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[]"
@@ -230,7 +258,10 @@ 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,22 +15,24 @@ 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