spoko-design-system 0.2.45 → 0.2.48

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>
+.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,34 @@
+<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 >
+.product-position:not(:last-child) {
+  margin-right: 0.25rem;
+
+  &:after {
+    content: ','
+  }
+}
+</style>

package/src/components/ProductDetailName.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 </template>
 
 
-<style lang="scss">
+<style>
 .detail-name {
   @apply overflow-hidden relative;
 
@@ -37,7 +37,7 @@ const props = defineProps({
       @apply block bg-white relative z-10 pr-1.5 w-full;
 
       &:before {
-        // order: 2;
+        /* // order: 2; */
         @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
         height: 1em;
         white-space: nowrap;

package/src/components/ProductDetailsList.vue

@@ -35,7 +35,7 @@ const props = defineProps({
   </table>
 </template>
 
-<style lang="scss" scoped>
+<style  scoped>
   .details {
     @apply border-none shadow-none w-full md:w-auto
     box-shadow: none;

package/src/components/layout/Header.astro

@@ -72,7 +72,7 @@ const navItemsLeft = [
   </div>
 </nav>
 
-<style lang="scss" is:global>
+<style is:global>
   nav {
     /* display: grid;  */
     place-items: center;

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/*"],