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

package/src/components/order/information/UserInformation.vue

@@ -1,332 +0,0 @@
-<template>
-  <!-- <slot name="form" v-if="mode === 'form'">
-    <form @submit.prevent="sendData">
-      <h2 class="viur-shop-form-headline headline">Nutzterdaten</h2>
-      <div class="viur-shop-form-wrap">
-        <sl-input
-          name="email"
-          v-model="state.formValues['email']"
-          placeholder="E-Mail"
-          class="viur-shop-form-grid-w-4"
-        >
-          <label slot="label">E-Mail*</label>
-        </sl-input>
-        <sl-input
-          name="name"
-          v-model="state.formValues['lastname']"
-          placeholder="Name"
-          class="viur-shop-form-grid-w-2"
-        >
-          <label slot="label">Name*</label>
-        </sl-input>
-        <sl-input
-          name="firstname"
-          v-model="state.formValues['firstname']"
-          placeholder="Vorname"
-          class="viur-shop-form-grid-w-2"
-        >
-          <label slot="label">Vorname*</label>
-        </sl-input>
-      </div>
-      <div class="viur-shop-form-adress-wrapper">
-        <div class="viur-shop-form-adress-column">
-          <h2 class="viur-shop-form-headline headline">Lieferadresse</h2>
-          <div class="viur-shop-form-wrap">
-            <sl-input
-              name="street"
-              v-model="state.formValues['street']"
-              placeholder="Straße"
-              class="viur-shop-form-grid-w-3"
-            >
-              <label slot="label">Strasse *</label>
-            </sl-input>
-            <sl-input
-              name="street"
-              v-model="state.formValues['streetnumber']"
-              placeholder="Hausnummer"
-              type="number"
-            >
-              <label slot="label">Hausnummer *</label>
-            </sl-input>
-            <sl-input
-              name="street"
-              v-model="state.formValues['areacode']"
-              placeholder="Postleitzahl"
-              class="viur-shop-form-grid-w-2"
-              type="number"
-            >
-              <label slot="label">Postleitzahl *</label>
-            </sl-input>
-            <sl-input
-              name="city"
-              v-model="state.formValues['city']"
-              placeholder="Stadt"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Stadt*</label>
-            </sl-input>
-            <sl-input
-              name="province"
-              v-model="state.formValues['province']"
-              placeholder="Bundesland"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Bundesland</label>
-            </sl-input>
-          </div>
-        </div>
-
-        <sl-checkbox @sl-change="onCustomAdressChange" checked>
-          Rechnungsadresse wie Lieferadresse
-        </sl-checkbox>
-
-        <div class="viur-shop-form-adress-column" v-show="state.isCustomAdress">
-          <h2 class="viur-shop-form-headline headline">Rechnungsadresse</h2>
-          <div class="viur-shop-form-wrap">
-            <sl-input
-              name="street"
-              v-model="state.formValues['billing.street']"
-              placeholder="Straße"
-              class="viur-shop-form-grid-w-3"
-            >
-              <label slot="label">Strasse *</label>
-            </sl-input>
-            <sl-input
-              name="street"
-              v-model="state.formValues['billing.streetnumber']"
-              placeholder="Hausnummer"
-              type="number"
-            >
-              <label slot="label">Hausnummer *</label>
-            </sl-input>
-            <sl-input
-              name="city"
-              v-model="state.formValues['billing.areacode']"
-              placeholder="Postleitzahl"
-              type="number"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Postleitzahl *</label>
-            </sl-input>
-            <sl-input
-              name="city"
-              v-model="state.formValues['billing.city']"
-              placeholder="Stadt"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Stadt*</label>
-            </sl-input>
-            <sl-input
-              name="province"
-              v-model="state.formValues['billing.province']"
-              placeholder="Bundesland"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Bundesland</label>
-            </sl-input>
-          </div>
-        </div>
-      </div>
-      <div class="viur-shop-form-footer">
-        <sl-button type="submit"> Zurück </sl-button>
-        <sl-button
-          :disabled="!state.requiredFieldsFilled"
-          type="submit"
-          variant="primary"
-        >
-          Weiter
-        </sl-button>
-      </div>
-    </form>
-  </slot> -->
-  <!-- <div class="viur-shop-form-wrap"> -->
-
-  <div>
-    <h2 class="viur-shop-form-headline headline">Nutzterdaten</h2>
-    <template v-for="item in state.addSkel" :key="item[0]">
-      <bone
-        :is="getBoneWidget(item[1].type)"
-        v-if="item[1].visible && item[1].params.group === 'Customer Info'"
-        :name="item[0]"
-        :structure="structToDict(state.addSkel)"
-        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
-        :skel="state.formValues"
-        @change="changeEvent(item[0], $event)"
-        class="viur-shop-form-grid-w-2"
-      >
-      </bone>
-    </template>
-  </div>
-  <div>
-    <h2 class="viur-shop-form-headline headline">Lieferadresse</h2>
-    <template v-for="item in state.addSkel" :key="item[0]">
-      <bone
-        :is="getBoneWidget(item[1].type)"
-        v-if="item[1].visible && item[1].params.group === 'Customer Address'"
-        :name="item[0]"
-        :structure="structToDict(state.addSkel)"
-        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
-        :skel="state.formValues"
-        @change="changeEvent(item[0], $event)"
-      >
-      </bone>
-    </template>
-  </div>
-  <div v-if="state.isCustomAdress">
-    <h2 class="viur-shop-form-headline headline">Rechnungsadresse</h2>
-    <template v-for="item in state.addSkel" :key="item[0]">
-      <bone
-        :is="getBoneWidget(item[1].type)"
-        v-if="item[1].visible && item[1].params.group === 'Customer Address'"
-        :name="item[0]"
-        :structure="structToDict(state.addSkel)"
-        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
-        :skel="state.formValues"
-        @change="changeEvent(item[0], $event)"
-      >
-      </bone>
-    </template>
-  </div>
-
-  <sl-checkbox @sl-change="onCustomAdressChange" checked>
-    Rechnungsadresse wie Lieferadresse
-  </sl-checkbox>
-
-  <!-- </div> -->
-</template>
-
-<script setup>
-import { getBoneWidget } from "@viur/vue-utils/bones/edit/index";
-
-import { reactive, computed, watch, onBeforeMount } from "vue";
-import { useCartStore } from "../../../stores/cart";
-
-const props = defineProps({
-  mode: { type: String, default: "form" },
-  conditions: { type: Function },
-});
-
-const cartStore = useCartStore();
-
-const state = reactive({
-  formValues: {},
-  requiredFieldsFilled: computed(() => {
-    if (state.isCustomAdress) {
-      return (
-        Object.keys(state.formValues).includes("city") &&
-        Object.keys(state.formValues).includes("street") &&
-        Object.keys(state.formValues).includes("billing.city") &&
-        Object.keys(state.formValues).includes("billing.street") &&
-        Object.keys(state.formValues).includes("email") &&
-        Object.keys(state.formValues).includes("firstname") &&
-        Object.keys(state.formValues).includes("lastname")
-      );
-    }
-    if (!state.isCustomAdress) {
-      return (
-        Object.keys(state.formValues).includes("city") &&
-        Object.keys(state.formValues).includes("street") &&
-        Object.keys(state.formValues).includes("email") &&
-        Object.keys(state.formValues).includes("firstname") &&
-        Object.keys(state.formValues).includes("lastname")
-      );
-    }
-  }),
-  isCustomAdress: false,
-  addSkel: null,
-  errors: {},
-});
-
-// function updateFormValues(e){
-//   state.formValues[e.target.name] = e.target.value
-// }
-
-function sendData(e) {
-  console.log("sende daten...", state.formValues);
-}
-
-function onCustomAdressChange(e) {
-  if (e.target.checked) state.isCustomAdress = false;
-  if (!e.target.checked) state.isCustomAdress = true;
-}
-
-function changeEvent(boneName, ev) {
-  for (const [key, value] of Object.entries(ev.value[0])) {
-    state.formValues[key] = value;
-  }
-}
-
-function structToDict(structure) {
-  let output = {};
-
-  structure.forEach((bone) => {
-    let boneName = bone[0];
-    let boneValues = bone[1];
-
-    output[boneName] = boneValues;
-  });
-
-  return output;
-}
-
-function initBoneNames(structure) {
-  let output = [];
-
-  structure.forEach((bone) => {
-    let boneName = bone[0];
-
-    output.push(boneName);
-  });
-
-  return output;
-}
-
-watch(state.formValues, (newValues) => {
-  Object.entries(newValues).forEach(([k, v]) => {
-    if (v === "") {
-      delete state.formValues[k];
-    }
-  });
-});
-
-onBeforeMount(async () => {
-  await cartStore.getAdressStructure();
-  state.addSkel = cartStore.state.structure.address;
-});
-</script>
-
-<style scoped>
-
-.viur-shop-form-adress-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-  justify-content: space-around;
-  align-items: flex-start;
-}
-
-.viur-shop-form-adress-column {
-  align-self: flex-start;
-  flex-grow: 1;
-}
-
-.viur-shop-form-wrap {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0 var(--sl-spacing-medium);
-  margin: var(--sl-spacing-large) 0;
-}
-
-.viur-shop-form-grid-w-2 {
-  grid-column: span 2;
-}
-
-.viur-shop-form-grid-w-3 {
-  grid-column: span 3;
-}
-
-.viur-shop-form-grid-w-4 {
-  grid-column: span 4;
-}
-</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>