spoko-design-system 0.2.45 → 0.2.46

package/index.ts

@@ -16,6 +16,14 @@ export { default as FeaturesList } from './src/components/FeaturesList.vue';
 export { default as ProductCodes } from './src/components/ProductCodes.vue';
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
 export { default as ProductButton } from './src/components/Product/ProductButton.vue';
+export { default as ProductColors } from './src/components/Product/ProductColors.vue';
+export { default as ProductDetailName } from './src/components/Product/ProductDetailName.vue';
+export { default as ProductDetails } from './src/components/Product/ProductDetails.vue';
+export { default as ProductDoc } from './src/components/Product/ProductDoc.vue';
+export { default as ProductModel } from './src/components/Product/ProductModel.vue';
+export { default as ProductModels } from './src/components/Product/ProductModels.vue';
+export { default as ProductName } from './src/components/Product/ProductName.vue';
+export { default as ProductPositions } from './src/components/Product/ProductPositions.vue';
 
 export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
 export { default as CategorySidebarToggler } from './src/components/Category/CategorySidebarToggler.vue';

package/package.json

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

package/src/components/Category/CategoryDetails.astro

@@ -1,5 +1,5 @@
 ---
-import CategorySidebarToggler from "@components/Category/CategorySidebarToggler.vue";
+import CategorySidebarToggler from '@components/Category/CategorySidebarToggler.vue';
 import { Icon } from 'astro-icon/components';
 const { category, subcategory, subtitle, subsubtitle, titleSmall, locale } = Astro.props;
 import { t } from "i18next";

package/src/components/Product/ProductColors.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  colors: {
+    type: Object as PropType<{id: number, slug: string, name: string}[]>,
+    default: null,
+    required: true,
+  },
+  small: {
+    type: Boolean,
+    required: false,
+  },
+  isPdp: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  filterName: {
+    type: String,
+    required: false,
+    default: 'Color'
+  }
+})
+
+</script>
+
+<template>
+  <span v-for="(color, index) in colors" :key="index" class="product-color" :data-pagefind-filter="filterName">
+    {{  color.name }}
+  </span>
+</template>
+
+<style lang="scss">
+.product-color:not(:last-child) {
+  @apply mr-1;
+
+  &:after {
+    content: ','
+  }
+}
+</style>

package/src/components/Product/ProductDetailName.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  styles: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <div class="font-bold detail-name w-full sm:w-50 flex">
+    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
+      {{ props.text }}
+    </span>
+  </div>
+</template>

package/src/components/Product/ProductDetails.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { DetailList, DetailObject } from '../../types/index'
+import ProductDetailName from './ProductDetailName.vue'
+import {getTranslation} from "@utils/text"
+// import ProductColors from "@components/Product/ProductColors.vue"
+
+const props = defineProps({
+  details: {
+    type: Array as PropType<DetailList[]> | null,
+    default: null,
+    required: false,
+  },
+  small: {
+    type: Boolean,
+    required: false,
+  },
+  colors: {
+    type: Array as PropType<string[] | null>,
+    default: null,
+    required: false,
+  },
+  locale: {
+    type: String,
+    default: 'en',
+    required: false,
+  },
+})
+
+</script>
+
+<template>
+  <template v-for="(detail, index) in details" :key="index" class="" v-if="details && details.length">
+    <!-- PDP PAGE - PRODUCT ROW -->
+    <!-- <pre>{{  JSON.stringify(details) }}</pre> -->
+    <li v-if="props.small" class="text-xs md:text-sm text-gray-900 dark:text-gray-300 leading-tight font-textlight md:font-textregular">
+
+      <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">
+        {{ detail.value }}
+      </span>
+
+      <div 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">
+            {{ color['name'] }}
+          </span>
+      </div>
+
+      <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">
+        {{  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>
+        </span> -->
+      </span>
+
+    </li>
+
+    <div v-else 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">
+
+        <span v-if="detail.translated && !detail.isArrayValue" :class="detail.id === 'light-function' ? 'whitespace-pre-line' : ''">
+          {{ getTranslation(`detail.value.${detail.value}`) }}
+        </span>
+
+        <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" class="">
+          <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-for="(mark, index) in JSON.parse(String(detail.value))" :key="index" class="item">
+            {{ 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">
+            · {{ d }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </template>
+</template>

package/src/components/Product/ProductDoc.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const props = defineProps({
+  file: {
+    type: Object,
+    default: null,
+    required: true,
+  },
+  locale: {
+    type: String,
+    default: 'en',
+    required: false
+  }
+})
+</script>
+
+<template>
+  <li v-if="props.file">
+    <a :href="`${locale !== 'en' ? `/${locale}` : ''}/docs/${props.file.name}/`" 
+      :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-500 dark:text-lightBlue-500" /> <span>{{ props.file.name }}</span>
+    </a>
+  </li>
+</template>

package/src/components/Product/ProductModel.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { Model } from 'types/index';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  carModel: {
+    type: Object as PropType<Model>,
+    required: true,
+  },
+})
+
+</script>
+<template>
+  <strong class="product-model" :data-pagefind-filter="`model:${props.carModel.name}`">{{ props.carModel.name }}</strong>
+</template>
+<style lang="scss">
+.product-model:not(:last-child) {
+  @apply mr-1;
+
+  &:after {
+    content: ','
+  }
+}
+</style>

package/src/components/Product/ProductModels.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+const props = defineProps({
+  modelIds: {
+    type: Array,
+    default: null,
+    required: true,
+  },
+})
+
+</script>
+
+<template>
+  <div inline-flex flex-wrap max-w-max>
+    <span v-for="(modelId, index) in modelIds"
+      :key="index"
+      class="product-model block"
+    >
+      <ProductModel :id="modelId" />
+    </span>
+  </div>
+</template>
+
+<style lang="scss">
+.product-model:not(:last-child) {
+  @apply mr-1;
+
+  &:after {
+    content: ','
+  }
+}
+</style>

package/src/components/Product/ProductName.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <h1 class="pdp-headline select-all">
+    {{ props.name }}
+  </h1>
+</template>

package/src/components/Product/ProductPositions.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+
+import type { Position } from 'types/index'
+import type { PropType } from 'vue';
+const props = defineProps({
+  positions: {
+    type: Object as PropType<Position[]>,
+    default: null,
+    required: true,
+  },
+  locale: {
+    type: String,
+    default: null,
+    required: false,
+  }
+})
+
+</script>
+
+<template>
+  <span v-for="(position) in positions" :key="position.sort" class="product-position">
+    {{  position.name }}
+  </span>
+</template>
+
+<style lang="scss">
+.product-position:not(:last-child) {
+  // @apply mr-1;
+  margin-right: 0.25rem;
+
+  &:after {
+    content: ','
+  }
+}
+</style>

package/tsconfig.json

@@ -18,7 +18,7 @@
     "moduleResolution": "node",
     "jsx": "preserve",
     "allowJs": true,
-    "types": ["vitest, vite/client", "@astrojs/ts","unplugin-vue-macros/macros-global", "unplugin-icons/types/astro", "src/types/astro.d.ts", "@astrojs/ts-plugin"],
+    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
     "paths": {
       "@components/*": ["components/*"],
       "@utils/*": ["utils/*"],