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

package/src/components/order/OrderSidebar.vue

@@ -1,102 +0,0 @@
-,
-<template>
-  <div class="viur-shop-sidebar">
-    <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
-    <br />
-    <div class="viur-shop-cart-sidebar-info-line">
-      <span>Zwischensumme</span>
-      999.99 €
-    </div>
-    <div class="viur-shop-cart-sidebar-info-line">
-      <span>Rabatt</span>
-      {{
-        cartStore.state.basketRootNode.total -
-        cartStore.state.basketRootNode.total_discount_price
-      }}
-      €
-    </div>
-    <div class="viur-shop-cart-sidebar-info-line">
-      <span>Versandkosten</span>
-      0 €
-    </div>
-    <div class="viur-shop-cart-sidebar-info-line total">
-      <span>Gesamt:</span>
-      <!--{{ cartStore.state.basketRootNode }}-->
-      €
-    </div>
-    <div class="viur-shop-cart-sidebar-btn-wrap">
-
-      <!-- TODO: Placement of discount? -->
-      <div class="viur-shop-discount-wrap">
-        <Discount></Discount>
-      </div>
-
-      <sl-button variant="primary" size="medium"> Jetzt Bestellen</sl-button>
-      <sl-button size="medium" variant="info">
-        <sl-icon name="paypal" slot="prefix"></sl-icon>
-        Paypal
-      </sl-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onBeforeMount } from "vue";
-import { useCartStore } from "../../stores/cart.js";
-import Discount from "../cart/Discount.vue";
-
-const cartStore = useCartStore();
-
-onBeforeMount(() => {
-  cartStore.init();
-});
-</script>
-
-<style>
-.viur-shop-cart-sidebar-info-line {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: var(--sl-spacing-2x-small) 0;
-
-  &.total {
-    font-weight: 600;
-    border-top: 1px solid var(--sl-color-neutral-300);
-    border-bottom: 1px solid var(--sl-color-neutral-300);
-    padding: var(--sl-spacing-x-small) 0;
-    margin: var(--sl-spacing-small) 0;
-  }
-
-  span {
-    margin-right: auto;
-  }
-}
-
-.viur-shop-cart-sidebar-btn-wrap {
-  display: flex;
-  flex-direction: column;
-  margin-top: var(--sl-spacing-large);
-
-  sl-button {
-    margin-bottom: var(--sl-spacing-x-small);
-  }
-}
-.viur-shop-cart-sidebar-headline {
-  margin: 0 0 var(--sl-spacing-large) 0;
-}
-
-.viur-shop-sidebar {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--shop-sidebar-background);
-  padding: var(--sl-spacing-medium);
-  overflow: hidden;
-  border-radius: var(--sl-border-radius-medium);
-
-  @media (min-width: 1024px) {
-    position: sticky;
-    top: 0;
-    margin-left: var(--sl-spacing-2x-large);
-  }
-}
-</style>

package/src/components/order/category/CategoryList.vue

@@ -1,83 +0,0 @@
-<template>
-    <RouterLink :to="{ name: 'CategoryView', params: { identifier: 'dk' } }"
-                v-for="item in list"
-                :key="item"
-                class="viur-shop-category-list-item-link"
-    >
-      <sl-card class="viur-shop-category-list-item">
-        <img
-          slot="image"
-          src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-          alt="A kitten."
-          class="viur-shop-category-list-item-img"
-        />
-        <h2 class="viur-shop-category-list-item-headline"> {{ item }}</h2>
-        <div class="viur-shop-category-list-fake-link">Alle anzeigen &raquo;</div>
-
-      </sl-card>
-    </RouterLink>
-</template>
-
-<script setup>
-import { onBeforeMount } from "vue";
-import ItemCard from "../item/ItemCard.vue";
-import { useCartStore } from "../../../stores/cart";
-
-const cartStore = useCartStore();
-const props = defineProps({
-  list: { type: Array, required: true },
-});
-
-onBeforeMount(async () => {
-  await cartStore.init();
-});
-</script>
-
-<style scoped>
-
-.viur-shop-category-list-item-link{
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &:hover{
-    .viur-shop-category-list-fake-link{
-      text-decoration: underline;
-    }
-
-    .viur-shop-category-list-item-img{
-      transform: scale(1.02);
-    }
- }
-}
-
-.viur-shop-category-list-item{
-  width: 100%;
-
-  &::part(header){
-    padding: var(--sl-spacing-medium) 0;
-   }
-
-  &::part(body){
-    padding: var(--sl-spacing-medium) 0;
-   }
-
-  &::part(footer){
-    padding: var(--sl-spacing-medium) 0;
-   }
-}
-
-.viur-shop-category-list-item-headline{
-  font-size: 1.4em;
-  margin-bottom: var(--sl-spacing-medium);
-  color: var(--ignt-basic-color-text);
-}
-
-.viur-shop-category-list-item-img{
-  aspect-ratio: 1;
-  object-fit: cover;
-  transition: all ease .3s;
- }
-
-
-</style>

package/src/components/order/category/CategoryView.vue

@@ -1,143 +0,0 @@
-<template>
-  <div class="viur-shop-loading-wrap" v-if="state.loading">
-    <sl-spinner></sl-spinner>
-  </div>
-
-  <div class="bind" v-else>
-    <div class="page-header">
-      <h1>{{ pageHeader }}</h1>
-    </div>
-    <slot name="filter" v-if="filter">
-      text-transform text-transform TEST
-    </slot>
-    <div class="viur-shop-category-view-list">
-      <!-- <router-link
-        v-for="item in state.skellist"
-        :key="item.shop_name"
-        :to="{ name: 'itemView', params: { item: item.key } }"
-      > -->
-
-      <ItemCard
-        v-for="item in state.skellist"
-        :key="item.shop_name"
-        :item="item"
-      >
-      </ItemCard>
-      <!-- </router-link> -->
-    </div>
-
-    <sl-button
-      @click="loadMore"
-      :loading="state.loading"
-      :disabled="state.isLastItem"
-      class="viur-shop-category-view-more-button"
-    >
-      Mehr anzeigen
-    </sl-button>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, reactive, computed } from "vue";
-import { useCartStore } from "../../../stores/cart";
-import { useRoute } from "vue-router";
-import { Request, ListRequest } from "@viur/vue-utils";
-// import { ViURShopClient } from "@viur/viur-shop-client";
-
-// component imports
-import ItemCard from "../item/ItemCard.vue";
-
-const props = defineProps({
-  skellist: { type: Array },
-  filter: { type: Boolean, default: true },
-  pageHeader: { type: String, default: "Artikel Liste" },
-  listHandler: { type: Object, required: true },
-});
-
-const route = useRoute();
-
-const cartStore = useCartStore();
-
-const state = reactive({
-  skellist: [],
-  loading: true,
-  currentCursor: "",
-  isLastItem: false,
-  itemCount: 99,
-  itemType: computed(() => route.params.identifier),
-});
-
-const categoryList = props.listHandler;
-
-function listItems() {
-  let params = {
-    limit: state.itemCount,
-    cursor: state.currentCursor,
-    type: state.itemType,
-  };
-
-  state.loading = true;
-
-  Request.get("/json/variante/list", { dataObj: params }).then(async (resp) => {
-    let data = await resp.json();
-
-    if (data.cursor !== state.currentCursor && !state.isLastItem) {
-      state.currentCursor = data.cursor;
-      state.skellist.push(...data.skellist);
-      state.loading = false;
-    } else if (data.cursor === state.currentCursor) {
-      state.isLastItem = true;
-      state.loading = false;
-    }
-
-    console.log("hier", data);
-  });
-}
-
-async function loadMore() {
-  state.loading = true;
-  await categoryList.next();
-
-  if (state.skellist.length < categoryList.state.skellist.length) {
-    state.skellist = categoryList.state.skellist;
-    state.loading = false;
-  } else {
-    state.loading = false;
-    state.isLastItem = true;
-  }
-}
-
-onMounted(async () => {
-  await cartStore.init();
-  await categoryList.fetch(true);
-  state.skellist = categoryList.state.skellist;
-  state.loading = false;
-
-  // await cartStore.init();
-});
-</script>
-
-<style scoped>
-.viur-shop-category-view-list {
-  display: grid;
-  width: 100%;
-  grid-gap: var(--sl-spacing-medium);
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.viur-shop-loading-wrap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  sl-spinner {
-    font-size: 3.5em;
-    --track-width: 4px;
-  }
-}
-</style>

package/src/components/order/information/adress/ShippingAdress.vue

@@ -1,143 +0,0 @@
-<template>
-  <sl-splinner
-    v-if="!cartStore.state.carts[cartStore.state.basket]?.items"
-  ></sl-splinner>
-  <template v-else>
-    <div class="form-wrap">
-      <sl-select
-        v-if="multiAdress"
-        multiple
-        clearable
-        ref="itemSelection"
-        @sl-change="onItemSelect"
-        @sl-clear="onItemReset"
-        :label="'Lieferadresse für: ' + state.selectedItem"
-        class="grid-w-4"
-      >
-        <sl-option
-          v-for="item in cartStore.state.carts[cartStore.state.basket]?.items"
-          :value="item.key"
-        >
-          {{ item.shop_name }}</sl-option
-        >
-      </sl-select>
-      <sl-input
-        name="street"
-        @sl-change="onInput"
-        placeholder="Straße"
-        class="grid-w-3"
-        :disabled="!state.isItemSelected"
-      >
-        <label slot="label">Strasse *</label>
-      </sl-input>
-      <sl-input
-        name="street"
-        @sl-change="onInput"
-        placeholder="Hausnummer"
-        type="number"
-        :disabled="!state.isItemSelected"
-      >
-        <label slot="label">Hausnummer *</label>
-      </sl-input>
-      <sl-input
-        name="street"
-        @sl-change="onInput"
-        placeholder="Postleitzahl"
-        type="number"
-        class="grid-w-2"
-        :disabled="!state.isItemSelected"
-      >
-        <label slot="label">Postleitzahl *</label>
-      </sl-input>
-      <sl-input
-        name="city"
-        @sl-change="onInput"
-        placeholder="Stadt"
-        class="grid-w-2"
-        :disabled="!state.isItemSelected"
-      >
-        <label slot="label">Stadt*</label>
-      </sl-input>
-      <sl-input
-        name="province"
-        @sl-change="onInput"
-        placeholder="Bundesland"
-        class="grid-w-2"
-        :disabled="!state.isItemSelected"
-      >
-        <label slot="label">Bundesland</label>
-      </sl-input>
-    </div>
-  </template>
-</template>
-
-<script setup>
-import { onBeforeMount, reactive, ref } from "vue";
-import { useCartStore } from "../../../../stores/cart";
-
-const props = defineProps({
-  multiAdress: { type: Boolean, default: false },
-  items: { type: Array },
-});
-
-const emit = defineEmits(["adressInput", "itemSelection"]);
-
-const state = reactive({
-  selectedItem: null,
-  isItemSelected: false,
-  items: {},
-});
-
-const itemSelection = ref(null);
-const cartStore = useCartStore();
-
-function onInput(e) {
-  let key = `${[state.selectedItem]}.${[e.target.name]}`;
-  emit("adressInput", {
-    [`${[state.selectedItem]}.${[e.target.name]}`]: e.target.value,
-  });
-}
-
-function onItemSelect(e) {
-  console.log(e.target.value);
-  if (!e.target.value.length) {
-    onItemReset();
-    return;
-  }
-  state.selectedItem = e.target.value;
-  state.isItemSelected = true;
-}
-
-function onItemReset() {
-  console.log("clearing...");
-  state.selectedItem = null;
-  state.isItemSelected = false;
-}
-
-onBeforeMount(() => {
-  console.log(props.items);
-});
-</script>
-
-<style scoped>
-.form-wrap {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0 var(--sl-spacing-medium);
-  margin: var(--sl-spacing-large) 0 var(--sl-spacing-x-large) 0;
-  padding-bottom: var(--sl-spacing-medium);
-  border-bottom: 1px solid var(--sl-color-neutral-400);
-}
-
-.grid-w-2 {
-  grid-column: span 2;
-}
-
-.grid-w-3 {
-  grid-column: span 3;
-}
-
-.grid-w-4 {
-  grid-column: span 4;
-}
-</style>

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

@@ -1,168 +0,0 @@
-<template>
-  <sl-card class="viur-shop-item-card-card">
-    <img
-      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"
-                  name="cart-dash"
-                  label="Remove Amount"
-                  style="font-size: 2em"
-                >
-                </sl-icon-button>
-              </sl-tooltip>
-              <sl-tooltip content="Plus">
-                <sl-icon-button
-                  variant="primary"
-                  name="cart-plus"
-                  label="Add Amount"
-                  style="font-size: 2em"
-                >
-                </sl-icon-button>
-              </sl-tooltip>
-              <sl-tooltip content="Add to cart">
-                <sl-icon-button
-                  variant="primary"
-                  name="cart-check"
-                  label="Add to cart"
-                  style="font-size: 2em"
-                  @click="
-                    cartStore.addToCart(item.key, cartStore.state.currentCart)
-                  "
-                >
-                </sl-icon-button>
-              </sl-tooltip>
-            </sl-button-group> -->
-      <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 setup>
-import { Request } from "@viur/vue-utils";
-import { useCartStore } from "../../../stores/cart";
-
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-});
-
-const cartStore = useCartStore();
-
-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 imageUrl;
-}
-</script>
-
-<style scoped>
-.viur-shop-item-card-card {
-  width: 100%;
-
-  &::part(header) {
-    padding: var(--sl-spacing-medium) 0;
-  }
-
-  &::part(body) {
-    padding: var(--sl-spacing-medium) 0;
-  }
-
-  &::part(footer) {
-    padding: var(--sl-spacing-medium) 0;
-  }
-
-  &:hover {
-    .viur-shop-item-card-add-to-cart-btn {
-      opacity: 1;
-    }
-
-    .viur-shop-item-card-headline {
-      color: var(--sl-color-primary-500);
-    }
-
-    .viur-shop-item-card-image {
-      transform: scale(1.02);
-    }
-  }
-}
-
-.viur-shop-item-card-footer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-}
-
-.viur-shop-item-card-add-to-cart-btn {
-  transition: all ease 0.3s;
-  margin-right: var(--sl-spacing-medium);
-  opacity: 0;
-}
-
-.viur-shop-item-card-add-to-favourites-btn {
-  margin-left: auto;
-}
-
-.viur-shop-item-card-image {
-  aspect-ratio: 1;
-  object-fit: cover;
-  transition: all ease 0.3s;
-}
-
-.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 0.3s;
-}
-
-.viur-shop-item-card-subline {
-  color: var(--ignt-basic-color-text);
-  margin-bottom: var(--sl-spacing-2x-small);
-}
-
-.viur-shop-item-card-price {
-  font-size: 1.1em;
-  font-weight: bold;
-  color: var(--ignt-basic-color-text);
-  margin-left: auto;
-}
-</style>