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

package/src/components/ui/userdata/CustomStringBone.vue

@@ -0,0 +1,71 @@
+<template>
+  <sl-input
+    ref="stringBone"
+    :placeholder="boneState.bonestructure.descr"
+    :disabled="boneState.readonly"
+    :value="Utils.unescape(value)"
+    :required="boneState.bonestructure.required"
+    @sl-change="changeEvent"
+    @keyup="changeEvent"
+  ></sl-input>
+</template>
+
+<script lang="ts">
+//@ts-nocheck
+import { reactive, defineComponent, onMounted, inject, computed, watchEffect, ref } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+import Utils from "@viur/vue-utils//bones/utils"
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    name: String,
+    value: [Object, String, Number, Boolean, Array],
+    index: Number,
+    lang: String,
+    autofocus: Boolean
+  },
+  components: {},
+  emits: ["change"],
+  setup(props, context) {
+    const boneState = inject("boneState")
+    const state = reactive({
+      value: computed(() => props.value)
+    })
+
+    const stringBone = ref(null)
+
+    function changeEvent(event) {
+      context.emit("change", props.name, event.target.value, props.lang, props.index)
+    }
+
+    watchEffect(() => {
+      if (props.autofocus) {
+        if (stringBone.value && stringBone.value !== null && stringBone !== null) {
+          const { start } = useTimeoutFn(() => {
+            stringBone.value.focus()
+          }, 600)
+
+          start()
+        }
+      }
+    })
+
+    onMounted(() => {
+      context.emit("change", props.name, props.value, props.lang, props.index) //init
+    })
+
+    return {
+      state,
+      Utils,
+      boneState,
+      changeEvent,
+      stringBone
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ui/userdata/DefaultLayout.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="vi-shop-cart-form-wrap" v-if="Object.keys(formState.structure).length > 0">
+    <slot
+      boneName="salutation"
+      :widget="CustomSelectBone"
+      label="hide"
+    >
+    </slot>
+
+    <slot boneName="firstname"
+        :widget="CustomStringBone"
+        label="hide">
+    </slot>
+
+    <slot boneName="lastname"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot boneName="street_name"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot boneName="street_number"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot
+        boneName="zip_code"
+        :widget="CustomStringBone"
+        placeholder="PLZ"
+        label="hide"
+    >
+    </slot>
+
+    <slot boneName="city"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+
+  <slot boneName="country"
+        :widget="CustomSelectBone"
+        label="hide">
+  </slot>
+
+  <!--<slot boneName="address_type"
+        :widget="CustomSelectBone"
+        label="hide">
+  </slot>-->
+
+  <slot
+    boneName="is_default"
+    :widget="CustomBooleanBone"
+    label="hide"
+  >
+  </slot>
+
+
+  </div>
+
+
+</template>
+<script setup>
+import { inject } from "vue";
+import { getBoneWidget } from "@viur/vue-utils/bones/edit";
+import CustomBooleanBone from "./CustomBooleanBone.vue";
+import CustomStringBone from "./CustomStringBone.vue";
+import CustomSelectBone from "./CustomSelectBone.vue";
+import booleanBone from '@viur/vue-utils/bones/edit/default/booleanBone.vue';
+
+const formState = inject("formState");
+const formUpdate = inject("formUpdate");
+</script>
+<style scoped>
+
+.vi-shop-cart-form-wrap{
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--sl-spacing-small);
+  margin-bottom: var(--sl-spacing-medium);
+}
+
+:deep(.bone-wrapper){
+  margin: 0;
+}
+
+:deep(.wrapper-bone-firstname){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-lastname){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-street_name){
+  grid-column: 1 / span 3;
+}
+
+:deep(.wrapper-bone-street_number){
+  grid-column: 4 / span 1;
+}
+
+:deep(.wrapper-bone-zip_code){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-city){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-country){
+  grid-column: 1 / span 4;
+}
+
+:deep(.wrapper-bone-is_default){
+  padding: var(--sl-spacing-x-small) 0;
+  grid-column: 1 / span 4;
+}
+
+
+
+
+</style>

package/src/components/ui/userdata/SelectAddress.vue

@@ -0,0 +1,21 @@
+<template>
+  <sl-select
+    :value="modelValue"
+    @sl-change="emit('update:modelValue', $event.target.value)"
+  >
+    <sl-option
+      v-for="address in addressList"
+      :key="address.key"
+      :value="address.key"
+    >
+      {{ address.street_name }} {{ address.street_number }}
+    </sl-option>
+  </sl-select>
+</template>
+<script setup>
+const props = defineProps({
+  addressList: { type: Array, required: true },
+  modelValue: { type: String },
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>

package/src/components/ui/userdata/multi/ActionBar.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="viur-shop-form-btn-wrap">
+    <sl-button
+      size="medium"
+      title="Lieferadresse entfernen"
+      @click="removeAddress"
+    >
+      <sl-icon name="x-lg" slot="prefix"></sl-icon>
+    </sl-button>
+    <sl-button size="medium" variant="primary" @click="addAddress">
+      <sl-icon name="plus-lg" slot="prefix"></sl-icon>
+      Lieferadresse hinzufügen
+    </sl-button>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["onAddressAdd", "onAddressRemove"]);
+function addAddress() {
+  emit("onAddressAdd");
+}
+
+function removeAddress() {
+  emit("onAddressRemove");
+}
+</script>
+
+<style scoped>
+.viur-shop-form-btn-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+
+  margin-top: var(--sl-spacing-medium);
+}
+</style>

package/src/components/ui/userdata/multi/CartSelection.vue

@@ -0,0 +1,42 @@
+<template>
+  <sl-select
+    :value="state.selectedCarts"
+    multiple="true"
+    clearable
+    @sl-change="handleSelect"
+    @sl-clear="reset"
+  >
+    <sl-option v-for="cart in carts" :key="cart.key" :value="cart.key">
+       {{ cart.name }}
+    </sl-option>
+  </sl-select>
+</template>
+<script setup>
+import { onBeforeMount, reactive } from "vue";
+
+const props = defineProps({
+  carts: { type: Array, required: true },
+});
+const emit = defineEmits(["cartSelected", "onReset"]);
+
+const state = reactive({
+  selectedCarts: [],
+});
+
+function handleSelect(e) {
+  state.selectedCarts = e.target.value;
+  emit("cartSelected", e.target.value);
+}
+
+function reset() {
+  emit("onReset");
+}
+
+onBeforeMount(() => {
+  props.carts.forEach((cart) => {
+    state.selectedCarts.push(cart.key);
+  });
+  emit("cartSelected", state.selectedCarts);
+});
+</script>
+<style scoped></style>

package/src/main.js

@@ -0,0 +1,50 @@
+// imports
+import { createPinia } from "pinia";
+import { createI18n } from "vue-i18n";
+import {
+  de_translations,
+  en_translations,
+} from "@viur/vue-components/translations/translations";
+
+import { useCartStore } from "./stores/cart";
+import createRouterInstance from "./router/index";
+import CartNode from "./components/cart/CartNode.vue";
+import CartLeaf from "./components/cart/CartLeaf.vue";
+// import { createApp } from "vue";
+// import bone from "@viur/vue-utils/bones/edit/bone.vue";
+// import Wrapper_nested from "@viur/vue-utils/bones/edit/wrapper_nested.vue";
+
+export { useCartStore, createRouterInstance };
+
+// export all main components
+export { default as ShopOrderStepper } from "./components/ShopOrderStepper.vue";
+export { default as ShopUserData } from "./components/ShopUserData.vue";
+
+export { default as CartView } from "./components/cart/CartView.vue";
+export { default as ExampleUsage } from "./components/order/process/ExampleUsage.vue";
+export { default as ConfirmView } from "./components/ShopOrderConfirm.vue";
+export { default as OrderComplete } from "./components/ShopOrderComplete.vue";
+// export { default as UserInformation } from "./components/order/information/UserInformation.vue";
+// export { default as UserInfoMulti } from "./components/order/information/UserInfoMulti.vue";
+export { default as SelectPaymentProvider } from "./components/order/process/SelectPaymentProvider.vue";
+
+const pinia = createPinia();
+const i18n = createI18n({
+  locale: "de",
+  fallbackLocale: "en",
+  messages: {
+    en: { ...en_translations },
+    de: { ...de_translations },
+  },
+});
+
+// Create a plugin to install all components
+const ViurShopComponents = {
+  install(app) {
+    app.use(pinia);
+    app.use(i18n);
+  },
+};
+
+// Export the plugin as default
+export default ViurShopComponents;

package/src/router/index.js

@@ -31,7 +31,7 @@ const default_routes = [
   {
     path: "/shop/order/confirm",
     name: "ConfirmView",
-    component: () => import("../components/cart/ConfirmView.vue"),
+    component: () => import("../components/ShopOrderConfirm.vue"),
   },
 ];4