@viur/shop-components 0.0.1-dev.6 → 0.0.1-dev.61

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

@@ -1,233 +0,0 @@
-<template>
-  <div class="wrap">
-    <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"
-            :src="getImage(state.item)"
-          />
-        </sl-carousel-item>
-      </sl-carousel>
-
-      <div class="viur-shop-item-view-thumbnails">
-        <div class="viur-shop-item-view-thumbnails-scroller">
-          <img :alt="state.item.shop_name"
-               class="viur-shop-item-view-thumbnails-image active"
-               :src="getImage(state.item)" />
-        </div>
-      </div>
-    </div>
-
-    <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="viur-shop-item-view-price">
-        {{ state.item.shop_price_retail }} €
-      </div>
-
-      <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.
-        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. 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. Stet clita kasd
-        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-      </div>
-
-      <div class="viur-shop-item-view-btn-wrap">
-        <sl-button
-            size="small"
-            class="viur-shop-item-view-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="viur-shop-item-view-add-to-favourites-btn"
-            variant="primary"
-            title="Add to favourites"
-          >
-            <sl-icon name="heart"
-                     slot="prefix"
-                     ></sl-icon>
-            Auf die Wunschliste
-          </sl-button>
-      </div>
-    </div>
-
-  </div>
-  <br>
-  <h1 class="viur-shop-item-view-headline">Ähnliche Artikel</h1>
-  <div class="viur-shop-item-view-item-grid">
-      <ItemCard :item="state.item">
-      </ItemCard>
-
-  </div>
-
-</template>
-
-<script setup>
-import { computed, onBeforeMount, reactive } from "vue";
-import { Request } from "@viur/vue-utils";
-import { useRoute } from "vue-router";
-// component imports
-import ItemCard from "../item/ItemCard.vue";
-import '@viur/shoelace/dist/components/carousel/carousel.js';
-
-const route = useRoute();
-
-const state = reactive({
-  item: {},
-});
-
-function getImage(item) {
-  console.log("hier", item.dk_artikel);
-  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 imageUrl;
-}
-
-onBeforeMount(async () => {
-  Request.get(`/json/variante/view/${route.params.item}`).then(async (resp) => {
-    let data = await resp.json();
-
-    state.item = data.values;
-  });
-});
-</script>
-
-<style scoped>
-  .wrap{
-    display: grid;
-    grid-template-columns: 45% minmax(0 ,1fr);
-  }
-
-  .viur-shop-item-view-info-wrap{
-    padding: var(--sl-spacing-x-large);
-  }
-
-  .viur-shop-item-view-image-wrap{
-    display: flex;
-    flex-direction: column;
-  }
-
-  sl-carousel{
-    aspect-ratio: 1;
-    background-color: var(--sl-color-neutral-200);
-
-    &::part(base){
-      display: flex;
-      gap: 0;
-     }
-
-     &::part(scroll-container){
-      border-radius: 0;
-      }
-
-    &::part(navigation-button){
-      position: absolute;
-      background-color: color-mix(in hsl, var(--sl-color-neutral-0) 85%, transparent);
-      color: var(--app-primary-color);
-      border-radius: 0;
-      transition: all ease.3s;
-      opacity: 0;
-     }
-
-    &::part(navigation-button--previous){
-      left: 0;
-     }
-
-    &::part(navigation-button--next){
-      right: 0;
-     }
-
-    &:hover{
-      &::part(navigation-button){
-        opacity: 1;
-       }
-     }
-  }
-
-  .viur-shop-item-view-thumbnails {
-    display: flex;
-    justify-content: start;
-    margin-top: vaR(--sl-spacing-medium)
-  }
-
-  .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);
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .viur-shop-item-view-thumbnails-image {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-    opacity: 0.3;
-    will-change: opacity;
-    transition: 250ms opacity;
-    cursor: pointer;
-
-    &.active {
-      opacity: 1;
-    }
-  }
-
-
-  .viur-shop-item-view-headline{
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .viur-shop-item-view-subline{
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .viur-shop-item-view-price{
-    font-size: 1.4em;
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .viur-shop-item-view-paragraph{
-    margin-bottom: var(--sl-spacing-x-large);
-  }
-
-  .viur-shop-item-view-btn-wrap{
-    display: flex;
-    flex-direction: column;
-
-    sl-button{
-      margin-bottom: var(--sl-spacing-x-small);
-    }
-  }
-
-  .viur-shop-item-view-item-grid{
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    grid-gap: var(--sl-spacing-medium);
-  }
-</style>

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

@@ -1,100 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-<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

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

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

@@ -1,210 +0,0 @@
-<template>
-  <div class="bind viur-shop-wrap">
-    <sl-tab-group
-      class="viur-shop-order-tab"
-      noScrollControls
-      @sl-tab-show="onTabChange"
-      ref="tabGroup"
-    >
-      <sl-tab
-        slot="nav"
-        :panel="tab"
-        v-for="(tab, index) in state.tabNames"
-        :key="tab"
-        :disabled="tabs[tab].disabled"
-      >
-        <div class="viur-shop-order-step">
-          <sl-icon
-            :name="tabs[tab].icon.name"
-            :library="tabs[tab].icon.library"
-          >
-          </sl-icon>
-          <div class="viur-shop-order-status-text">
-            {{ index + 1 }}. {{ tabs[tab].displayName }}
-          </div>
-        </div>
-        <sl-icon
-          name="chevron-right"
-          class="viur-shop-order-tab-check"
-          v-if="index < state.tabNames.length - 1"
-        ></sl-icon>
-      </sl-tab>
-
-      <sl-tab-panel
-        :name="tab"
-        v-for="(tab, index) in state.tabNames"
-        :key="tab"
-      >
-        <component
-          :is="tabs[tab].component"
-          v-bind="tabs[tab].props ? tabs[tab].props : ''"
-        >
-        </component>
-        <div
-          class="viur-shop-form-footer"
-          :class="{ 'flex-end': state.isFirstTab(index) }"
-          v-if="index !== state.tabNames.length - 1"
-        >
-          <sl-button type="submit" v-show="index !== 0" @click="prevTab(state.tabNames[index-1])">
-            Zurück
-          </sl-button>
-          <!-- :disabled="!state.requiredFieldsFilled" -->
-          <sl-button type="submit" variant="primary" @click="nextTab(state.tabNames[index+1])">
-            Weiter
-          </sl-button>
-        </div>
-      </sl-tab-panel>
-    </sl-tab-group>
-
-    <div class="viur-shop-sidebar" id="order_sidebar"></div>
-  </div>
-</template>
-
-<script setup>
-import { reactive, computed, ref } from "vue";
-
-const props = defineProps({
-  tabs: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["tabChange"]);
-
-const state = reactive({
-  tabNames: computed(() => sortTabs(props.tabs)),
-  isFirstTab: (index) => {
-    if (index === 0) {
-      return true;
-    }
-    return false;
-  },
-});
-
-const tabGroup = ref(null);
-
-function sortTabs(tabs) {
-  let sortedArray = [];
-  let outputArray = [];
-
-  for (const tab in tabs) {
-    if (tabs[tab].position) {
-      sortedArray.push([tab, tabs[tab].position]);
-    } else {
-      sortedArray.push([tab, 0]);
-    }
-  }
-
-  sortedArray.sort((a, b) => {
-    return a[1] - b[1];
-  });
-
-  sortedArray.forEach((tab) => {
-    outputArray.push(tab[0]);
-  });
-
-  return outputArray;
-}
-
-function onTabChange(e) {
-  emit("tabChange", e);
-}
-
-
-function prevTab(tabName) {
-  tabGroup.value.show(tabName);
-}
-
-function nextTab(tabName) {
-  tabGroup.value.show(tabName);
-}
-</script>
-
-<style scoped>
-.viur-shop-wrap {
-  flex-direction: row;
-  gap: var(--sl-spacing-x-large);
-  align-items: flex-start;
-}
-
-.viur-shop-sidebar {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--sl-color-neutral-100);
-  min-width: 300px;
-  padding: var(--sl-spacing-medium);
-  position: sticky;
-  top: 0;
-}
-
-.viur-shop-order-tab {
-  sl-tab {
-    width: 25%;
-
-    &::part(base) {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      color: var(--sl-color-neutral-400);
-    }
-
-    &[aria-selected="true"]::part(base) {
-      color: var(--ignt-color-primary) !important;
-    }
-  }
-}
-
-.viur-shop-order-step {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-
-  @media (--ignt-mq-max-break-small) {
-    justify-content: center;
-  }
-
-  sl-icon {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-
-    @media (--ignt-mq-max-break-small) {
-      display: none;
-    }
-  }
-}
-
-.viur-shop-order-tab-check {
-  position: absolute;
-  right: -0.5em;
-
-  @media (--ignt-mq-max-break-small) {
-    font-size: 0.7em;
-    right: -0.35em;
-    top: calc(50% - 0.35em);
-  }
-}
-
-.viur-shop-order-status-text {
-  font-size: 0.8em;
-  color: inherit;
-  text-align: center;
-  margin-top: 0.6em;
-  white-space: initial;
-}
-
-.viur-shop-form-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--sl-spacing-large);
-}
-.flex-end {
-  justify-content: flex-end;
-}
-</style>

package/src/router/index.js

@@ -1,103 +0,0 @@
-// @ts-nocheck
-import { createRouter, createWebHashHistory } from "vue-router";
-import ViewMissing from "../views/ViewMissing.vue";
-
-const default_routes = [
-  {
-    path: "/:pathMatch(.*)*",
-    name: "view_missing",
-    component: ViewMissing,
-  },
-  {
-    path: "/shop/category/:identifier",
-    name: "CategoryView",
-    component: () => import("../components/order/category/CategoryView.vue"),
-  },
-  {
-    path: "/shop/item/:item",
-    name: "itemView",
-    component: () => import("../components/order/item/ItemView.vue"),
-  },
-  {
-    path: "/shop/cart/view",
-    name: "CartView",
-    component: () => import("../components/cart/CartView.vue"),
-  },
-  {
-    path: "/shop/order/",
-    name: "OrderView",
-    component: () => import("../components/order/process/ExampleUsage.vue"),
-  },
-  {
-    path: "/shop/order/confirm",
-    name: "ConfirmView",
-    component: () => import("../components/cart/ConfirmView.vue"),
-  },
-];4
-
-function createRouterInstance(routes, replace = false) {
-  let newRoutes = [];
-  if (replace) {
-    newRoutes = routes;
-  } else {
-    newRoutes = routes.concat(default_routes);
-  }
-
-  const router = createRouter({
-    // @ts-ignore
-    history: createWebHashHistory(import.meta.env.BASE_URL),
-    routes: newRoutes,
-  });
-
-  // router.afterEach((to, from) => {
-  //   //useUserStore().addAction();
-  // });
-
-  // router.beforeEach((to, from, next) => {
-  //   const contextStore = useContextStore();
-  //   let localContext = {};
-  //   let handlerId = to.query["_"]?.toString();
-  //   if (!handlerId) next();
-  //   if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
-  //     localContext = contextStore.state.localContext[handlerId];
-  //   }
-  //   let newQuery = {
-  //     ...contextStore.state.globalContext,
-  //     ...localContext,
-  //     ...to.query,
-  //   };
-  //   if (
-  //     Object.keys(to.query).every(
-  //       (key) =>
-  //         to.query[key] === newQuery[key] &&
-  //         to.query.hasOwnProperty(key) &&
-  //         newQuery.hasOwnProperty(key),
-  //     ) &&
-  //     Object.keys(newQuery).every(
-  //       (key) =>
-  //         to.query[key] === newQuery[key] &&
-  //         to.query.hasOwnProperty(key) &&
-  //         newQuery.hasOwnProperty(key),
-  //     )
-  //   ) {
-  //     //disabled because of to much context copy and updates
-  //     // Writes query to context
-  //     /*
-  //     for (const [k, v] of Object.entries(to.query)) {
-  //       if (k.startsWith("_")) continue
-  //       if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
-  //         contextStore.state.localContext[handlerId][k] = v
-  //       } else {
-  //         contextStore.state.localContext[handlerId] = { [k]: v }
-  //       }
-  //     }*/
-  //     next(); // no change
-  //   } else {
-  //     to.query = newQuery;
-  //     next(to);
-  //   }
-  // });
-  return router;
-}
-
-export default createRouterInstance;