@viur/shop-components 0.0.1-dev.2 → 0.0.1-dev.4

package/src/components/order/item/ItemCard.vue

@@ -1,18 +1,17 @@
 <template>
-  <sl-card class="card">
+  <sl-card class="viur-shop-item-card-card">
     <img
-            slot="image"
-            :src="getImage(item)"
-            :alt="item.shop_name"
-            class="card-image"
-          />
-          <h3 class="card-headline"> {{ item.shop_name }}</h3>
-          <h4 class="card-subline">B 21 x H 6,5 x T 19 cm</h4>
-          <div class="price">
-            {{ item.shop_price_retail }} €
-          </div>
-        <div class="card-footer" slot="footer">
-          <!-- <sl-button-group label="Amount">
+      slot="image"
+      :src="getImage(item)"
+      :alt="item.shop_name"
+      loading="lazy"
+      class="viur-shop-item-card-image"
+    />
+    <h3 class="viur-shop-item-card-headline">{{ item.shop_name }}</h3>
+    <h4 class="viur-shop-item-card-subline">B 21 x H 6,5 x T 19 cm</h4>
+    <div class="viur-shop-item-card-price">{{ item.shop_price_retail }} €</div>
+    <div class="viur-shop-item-card-footer" slot="footer">
+      <!-- <sl-button-group label="Amount">
               <sl-tooltip content="Remove">
                 <sl-icon-button
                   variant="primary"
@@ -44,136 +43,123 @@
                 </sl-icon-button>
               </sl-tooltip>
             </sl-button-group> -->
-          <sl-button
-            size="small"
-            class="add-to-cart-btn"
-            variant="primary"
-            title="Add to cart"
-            @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
-          >
-            <sl-icon name="bag-plus"
-                     slot="prefix"
-                     ></sl-icon>
-
-            In den Warenkorb
-          </sl-button>
-
-          <sl-button
-            size="small"
-            outline
-            class="add-to-favourites-btn"
-            variant="primary"
-            title="Add to favourites"
-          >
-            <sl-icon name="heart"
-                     slot="prefix"
-                     ></sl-icon>
-          </sl-button>
-
-
-        </div>
+      <sl-button
+        size="small"
+        class="viur-shop-item-card-add-to-cart-btn"
+        variant="primary"
+        title="Add to cart"
+        @click.stop="cartStore.addToCart(item.key, cartStore.state.basket)"
+      >
+        <sl-icon name="bag-plus" slot="prefix"></sl-icon>
+
+        In den Warenkorb
+      </sl-button>
+
+      <sl-button
+        size="small"
+        outline
+        class="viur-shop-item-card-add-to-favourites-btn"
+        variant="primary"
+        title="Add to favourites"
+      >
+        <sl-icon name="heart" slot="prefix"></sl-icon>
+      </sl-button>
+    </div>
   </sl-card>
 </template>
 
-<script>
-import {Request} from "@viur/vue-utils";
+<script setup>
+import { Request } from "@viur/vue-utils";
+import { useCartStore } from "../../../stores/cart";
 
-export default {
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
   },
-  setup(props, context) {
+});
 
-  function getImage(item) {
-    let imageUrl =
-    "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
-    if (item.dk_artikel.dest.image) {
-     return Request.downloadUrlFor(item.dk_artikel.dest.image);
-    }
+const cartStore = useCartStore();
 
-    return imageUrl;
+function getImage(item) {
+  let imageUrl =
+    "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
+  if (item.dk_artikel.dest.image) {
+    return Request.downloadUrlFor(item.dk_artikel.dest.image);
   }
 
-	return {
-      props,
-    getImage
-	}
-  }
+  return imageUrl;
 }
 </script>
 
 <style scoped>
-.card {
+.viur-shop-item-card-card {
   width: 100%;
 
-  &::part(header){
+  &::part(header) {
     padding: var(--sl-spacing-medium) 0;
-   }
+  }
 
-  &::part(body){
+  &::part(body) {
     padding: var(--sl-spacing-medium) 0;
-   }
+  }
 
-  &::part(footer){
+  &::part(footer) {
     padding: var(--sl-spacing-medium) 0;
-   }
+  }
 
-  &:hover{
-    .add-to-cart-btn{
+  &:hover {
+    .viur-shop-item-card-add-to-cart-btn {
       opacity: 1;
     }
 
-    .card-headline{
-      color: var(--sl-color-primary-500)
+    .viur-shop-item-card-headline {
+      color: var(--sl-color-primary-500);
     }
 
-    .card-image{
+    .viur-shop-item-card-image {
       transform: scale(1.02);
     }
   }
 }
 
-.card-footer{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
+.viur-shop-item-card-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
 }
 
-.add-to-cart-btn{
-  transition: all ease .3s;
+.viur-shop-item-card-add-to-cart-btn {
+  transition: all ease 0.3s;
   margin-right: var(--sl-spacing-medium);
   opacity: 0;
 }
 
-.add-to-favourites-btn{
+.viur-shop-item-card-add-to-favourites-btn {
   margin-left: auto;
 }
 
-
-.card-image {
+.viur-shop-item-card-image {
   aspect-ratio: 1;
   object-fit: cover;
-  transition: all ease .3s;
+  transition: all ease 0.3s;
 }
 
-.card-headline{
+.viur-shop-item-card-headline {
   font-size: 1.1em;
   font-weight: bold;
   color: var(--ignt-basic-color-text);
   margin-bottom: var(--sl-spacing-2x-small);
-  transition: all ease .3s;
+  transition: all ease 0.3s;
 }
 
-.card-subline{
+.viur-shop-item-card-subline {
   color: var(--ignt-basic-color-text);
   margin-bottom: var(--sl-spacing-2x-small);
 }
 
-.price{
+.viur-shop-item-card-price {
   font-size: 1.1em;
   font-weight: bold;
   color: var(--ignt-basic-color-text);

package/src/components/order/item/ItemView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrap">
-    <div class="image-wrap">
-      <sl-carousel class="carousel-thumbnails" navigation loop>
+    <div class="viur-shop-item-view-image-wrap">
+      <sl-carousel class="viur-shop-item-view-carousel-thumbnails" navigation loop>
         <sl-carousel-item>
           <img
             :alt="state.item.shop_name"
@@ -10,24 +10,24 @@
         </sl-carousel-item>
       </sl-carousel>
 
-      <div class="thumbnails">
-        <div class="thumbnails__scroller">
+      <div class="viur-shop-item-view-thumbnails">
+        <div class="viur-shop-item-view-thumbnails-scroller">
           <img :alt="state.item.shop_name"
-               class="thumbnails__image active"
+               class="viur-shop-item-view-thumbnails-image active"
                :src="getImage(state.item)" />
         </div>
       </div>
     </div>
 
-    <div class="info-wrap">
-      <h1 class="headline">{{ state.item.shop_name }}</h1>
-      <h2 class="subline">B 21 x H 6,5 x T 19 cm</h2>
+    <div class="viur-shop-item-view-info-wrap">
+      <h1 class="viur-shop-item-view-headline">{{ state.item.shop_name }}</h1>
+      <h2 class="viur-shop-item-view-subline">B 21 x H 6,5 x T 19 cm</h2>
 
-      <div class="price">
+      <div class="viur-shop-item-view-price">
         {{ state.item.shop_price_retail }} €
       </div>
 
-      <div class="paragraph">
+      <div class="viur-shop-item-view-paragraph">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
         nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
         sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
@@ -38,10 +38,10 @@
         gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
       </div>
 
-      <div class="btn-wrap">
+      <div class="viur-shop-item-view-btn-wrap">
         <sl-button
             size="small"
-            class="add-to-cart-btn"
+            class="viur-shop-item-view-add-to-cart-btn"
             variant="primary"
             title="Add to cart"
             @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
@@ -56,7 +56,7 @@
           <sl-button
             size="small"
             outline
-            class="add-to-favourites-btn"
+            class="viur-shop-item-view-add-to-favourites-btn"
             variant="primary"
             title="Add to favourites"
           >
@@ -70,8 +70,8 @@
 
   </div>
   <br>
-  <h1 class="headline">Ähnliche Artikel</h1>
-  <div class="item-grid">
+  <h1 class="viur-shop-item-view-headline">Ähnliche Artikel</h1>
+  <div class="viur-shop-item-view-item-grid">
       <ItemCard :item="state.item">
       </ItemCard>
 
@@ -119,11 +119,11 @@ onBeforeMount(async () => {
     grid-template-columns: 45% minmax(0 ,1fr);
   }
 
-  .info-wrap{
+  .viur-shop-item-view-info-wrap{
     padding: var(--sl-spacing-x-large);
   }
 
-  .image-wrap{
+  .viur-shop-item-view-image-wrap{
     display: flex;
     flex-direction: column;
   }
@@ -164,59 +164,59 @@ onBeforeMount(async () => {
        }
      }
   }
-  .thumbnails {
+
+  .viur-shop-item-view-thumbnails {
     display: flex;
     justify-content: start;
     margin-top: vaR(--sl-spacing-medium)
   }
 
-  .thumbnails__scroller {
+  .viur-shop-item-view-thumbnails-scroller {
     display: flex;
     gap: var(--sl-spacing-small);
     overflow-x: auto;
     scrollbar-width: none;
     scroll-behavior: smooth;
     scroll-padding: var(--sl-spacing-small);
-  }
 
-  .thumbnails__scroller::-webkit-scrollbar {
-    display: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
-  .thumbnails__image {
+  .viur-shop-item-view-thumbnails-image {
     width: 64px;
     height: 64px;
     object-fit: cover;
-
     opacity: 0.3;
     will-change: opacity;
     transition: 250ms opacity;
-
     cursor: pointer;
-  }
 
-  .thumbnails__image.active {
-    opacity: 1;
+    &.active {
+      opacity: 1;
+    }
   }
 
-  .headline{
+
+  .viur-shop-item-view-headline{
     margin-bottom: var(--sl-spacing-small);
   }
 
-  .subline{
+  .viur-shop-item-view-subline{
     margin-bottom: var(--sl-spacing-small);
   }
 
-  .price{
+  .viur-shop-item-view-price{
     font-size: 1.4em;
     margin-bottom: var(--sl-spacing-small);
   }
 
-  .paragraph{
+  .viur-shop-item-view-paragraph{
     margin-bottom: var(--sl-spacing-x-large);
   }
 
-  .btn-wrap{
+  .viur-shop-item-view-btn-wrap{
     display: flex;
     flex-direction: column;
 
@@ -225,7 +225,7 @@ onBeforeMount(async () => {
     }
   }
 
-  .item-grid{
+  .viur-shop-item-view-item-grid{
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     grid-gap: var(--sl-spacing-medium);

package/src/components/order/process/ExampleUsage.vue

@@ -0,0 +1,100 @@
+<template>
+  <order-view :tabs="state.tabs" @tabChange="handleTabs" />
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, shallowRef } from "vue";
+import { ListRequest } from "@viur/vue-utils";
+
+import CartView from "../../cart/CartView.vue";
+import ConfirmView from "../../cart/ConfirmView.vue";
+import OrderView from "./OrderView.vue";
+import CategoryView from "../category/CategoryView.vue";
+import OrderComplete from "./OrderComplete.vue";
+import UserInformation from "../information/UserInformation.vue";
+import UserInfoMulti from "../information/UserInfoMulti.vue";
+import { useCartStore } from "../../../stores/cart";
+
+const cartStore = useCartStore();
+
+const state = reactive({
+  tabs: {
+    cart: {
+      component: shallowRef(CartView),
+      props: { sidebar: true, mode: "basket" },
+      displayName: "Warenkorb",
+      icon: { name: "cart", library: "hsk" },
+      position: 2,
+      disabled: false,
+      atShow: null,
+      atHide: null,
+    },
+    confirm: {
+      component: shallowRef(ConfirmView),
+      props: {},
+      displayName: "Bestellung prüfen",
+      icon: { name: "order-check", library: "hsk" },
+      position: 5,
+      disabled: false,
+      atShow: null,
+      atHide: null,
+    },
+    // order: {
+    //   component: shallowRef(CategoryView),
+    //   props: {
+    //     listHandler: ListRequest("categorystore", {
+    //       module: "variante",
+    //       params: { type: "dk", limit: 99 },
+    //     }),
+    //   },
+    //   displayName: "Artikel Bestellen",
+    //   icon: { name: "cart-add", library: "hsk" },
+    //   position: 1,
+    //   disabled: false,
+    //   atShow: null,
+    //   atHide: null,
+    // },
+    orderComplete: {
+      component: shallowRef(OrderComplete),
+      props: {},
+      displayName: "Bestellung Abgeschlossen",
+      icon: { name: "order-confirmed", library: "hsk" },
+      position: 6,
+      disabled: true,
+      atShow: null,
+      atHide: null,
+    },
+    userInfo: {
+      component: shallowRef(UserInformation),
+      props: {},
+      displayName: "Daten Eingeben",
+      icon: { name: "user", library: "hsk" },
+      position: 3,
+      disabled: false,
+      atShow: null,
+      atHide: null,
+    },
+    userInfoMulti: {
+      component: shallowRef(UserInfoMulti),
+      props: {},
+      displayName: "Daten Eingeben (Multi)",
+      icon: { name: "user", library: "hsk" },
+      position: 4,
+      disabled: false,
+      atShow: null,
+      atHide: null,
+    },
+  },
+});
+
+function handleTabs(e) {
+  // console.dir("hier", e.target)
+  if (e?.detail.name === "confirm") {
+    state.tabs.orderComplete.disabled = false;
+  }
+}
+
+onBeforeMount(async () => {
+  await cartStore.getAdressStructure();
+});
+</script>

package/src/components/order/process/OrderComplete.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="bind">
+    <h1 class="headline">Vielen Dank für Ihre Bestellung</h1>
+    <br>
+    <p class="paragraph">
+      <strong>Ihre Bestellnummer:</strong> 123345670
+    </p>
+    <p class="paragraph">
+      Wir haben Ihre Bestellung erhalten und werden diese schenllstmöglich bearbeiten.<br>
+      Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.
+
+      <div class="btn-wrap">
+        <sl-button size="medium">
+          Zur Startseite
+        </sl-button>
+
+        <sl-button variant="primary"
+                   size="medium">
+          Weiter Einkaufen
+        </sl-button>
+      </div>
+    </p>
+
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.btn-wrap{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+
+  margin-top: var(--sl-spacing-x-large);
+}
+
+</style>

package/src/components/order/process/OrderTabHeader.vue

@@ -0,0 +1,7 @@
+<template>
+
+  HALLO
+</template>
+
+<script setup>
+</script>