@viur/shop-components 0.14.4 → 0.14.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/ShopOrderStepper.vue +9 -53
  3. package/src/ShopOrderStepperAction.vue +59 -0
  4. package/src/shop.js +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viur/shop-components",
3
- "version": "0.14.4",
3
+ "version": "0.14.5",
4
4
  "description": "Frontend Vue components for the shop module of ViUR",
5
5
  "repository": {
6
6
  "type": "git",
package/src/ShopOrderStepper.vue CHANGED
@@ -1,11 +1,12 @@
1
1
  <template>
2
2
  <sl-tab-group
3
- class="viur-shop-order-tabgroup"
4
- noScrollControls
5
3
  ref="stepper"
4
+ class="viur-shop-order-tabgroup"
5
+ no-scroll-controls
6
6
  >
7
7
  <template v-for="(tab,name) in shopStore.state.tabs">
8
- <StepperTab v-show="shopStore.state.currentTab!=='complete'"
8
+ <StepperTab
9
+ v-show="shopStore.state.currentTab!=='complete'"
9
10
  :tab="name"
10
11
  >
11
12
  </StepperTab>
@@ -16,20 +17,9 @@
16
17
  <component :is="tab['component']" :params="tab['params']">
17
18
  <template #top_actions="slotProps">
18
19
  <sl-bar class="viur-shop-stepper-bar">
19
- <div v-if="slotProps.left" slot="left" :id="slotProps.left"></div>
20
+ <div v-if="slotProps.left" :id="slotProps.left" slot="left"></div>
20
21
  <div slot="right">
21
- <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
22
- <sl-button
23
- :class="{'action-button-hint':slotProps.hint}"
24
- variant="success"
25
- size="large"
26
- :disabled="active(slotProps)"
27
- @click="nextStep(slotProps)"
28
- :loading="tab['validating']"
29
- >
30
- {{slotProps.nextName}}
31
- <sl-icon slot="suffix" name="chevron-right"></sl-icon>
32
- </sl-button>
22
+
33
23
  </div>
34
24
  </sl-bar>
35
25
  </template>
@@ -38,22 +28,11 @@
38
28
  <slot :name="'template_'+name"></slot>
39
29
  </template>
40
30
 
41
- <template v-slot="slotProps">
31
+ <template #default="slotProps">
42
32
  <sl-bar class="viur-shop-stepper-bar">
43
- <div v-if="slotProps.left" slot="left" :id="slotProps.left"></div>
33
+ <div v-if="slotProps.left" :id="slotProps.left" slot="left"></div>
44
34
  <div slot="right">
45
- <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
46
- <sl-button
47
- :class="{'action-button-hint':slotProps.hint}"
48
- variant="success"
49
- size="large"
50
- :disabled="active(slotProps)"
51
- @click="nextStep(slotProps)"
52
- :loading="tab['validating']"
53
- >
54
- {{slotProps.nextName}}
55
- <sl-icon slot="suffix" name="chevron-right"></sl-icon>
56
- </sl-button>
35
+ <component :is="shopStore.state.stepperActionComponent" :conf="slotProps" :tab="tab"></component>
57
36
  </div>
58
37
  </sl-bar>
59
38
  </template>
@@ -88,18 +67,11 @@ onMounted(()=>{
88
67
  })
89
68
  })
90
69
 
91
- function nextStep(obj){
92
- shopStore.tabValidation(obj.nextfunction, shopStore.navigateToNext)
93
- }
94
70
 
95
- function active(obj){
96
- return !obj.activefunction()
97
- }
98
71
 
99
72
  </script>
100
73
 
101
74
  <style scoped>
102
-
103
75
  sl-tab-group {
104
76
  flex-grow: 1;
105
77
  &::part(base) {
@@ -134,20 +106,4 @@ sl-tab-panel {
134
106
  }
135
107
  }
136
108
 
137
- .hint{
138
- border:1px solid var(--sl-color-neutral-200);
139
- border-top-left-radius: var(--sl-input-border-radius-medium);
140
- border-bottom-left-radius: var(--sl-input-border-radius-medium);
141
- background-color: var(--sl-color-neutral-100);
142
- color:var(--sl-color-neutral-800);
143
- padding: 0 var(--sl-spacing-small);
144
- height: auto;
145
- min-height: var(--sl-input-height-large);
146
- font-size: var(--sl-button-font-size-large);
147
- line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
148
- }
149
- .action-button-hint::part(base){
150
- border-top-left-radius: 0;
151
- border-bottom-left-radius: 0;
152
- }
153
109
  </style>
package/src/ShopOrderStepperAction.vue ADDED
@@ -0,0 +1,59 @@
1
+ <template>
2
+ <span v-if="conf.hint" class="hint">{{ conf.hint }}</span>
3
+ <sl-button
4
+ :class="{'action-button-hint':conf.hint}"
5
+ variant="success"
6
+ size="large"
7
+ :disabled="active(conf)"
8
+ :loading="tab['validating']"
9
+ @click="nextStep(conf)"
10
+ >
11
+ {{conf.nextName}}
12
+ <sl-icon slot="suffix" name="chevron-right"></sl-icon>
13
+ </sl-button>
14
+
15
+ </template>
16
+ <script setup>
17
+ import {useViurShopStore} from './shop'
18
+ const shopStore = useViurShopStore()
19
+
20
+ const props = defineProps({
21
+ conf:{
22
+ type:Object,
23
+ reuqired:true
24
+ },
25
+ tab:{
26
+ type:Object,
27
+ reuqired:true
28
+ }
29
+
30
+ })
31
+
32
+ function nextStep(obj){
33
+ shopStore.tabValidation(obj.nextfunction, shopStore.navigateToNext)
34
+ }
35
+
36
+ function active(obj){
37
+ return !obj.activefunction()
38
+ }
39
+
40
+ </script>
41
+
42
+ <style scoped>
43
+ .hint{
44
+ border:1px solid var(--sl-color-neutral-200);
45
+ border-top-left-radius: var(--sl-input-border-radius-medium);
46
+ border-bottom-left-radius: var(--sl-input-border-radius-medium);
47
+ background-color: var(--sl-color-neutral-100);
48
+ color:var(--sl-color-neutral-800);
49
+ padding: 0 var(--sl-spacing-small);
50
+ height: auto;
51
+ min-height: var(--sl-input-height-large);
52
+ font-size: var(--sl-button-font-size-large);
53
+ line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
54
+ }
55
+ .action-button-hint::part(base){
56
+ border-top-left-radius: 0;
57
+ border-bottom-left-radius: 0;
58
+ }
59
+ </style>
package/src/shop.js CHANGED
@@ -4,6 +4,7 @@ import {ShopCart, ShopUserDataGuest, ShopShippingMethod, ShopPaymentProvider, Sh
4
4
  import { defineStore } from "pinia";
5
5
  import { useUrlSearchParams,useTimeoutFn } from '@vueuse/core'
6
6
  import AddressFormLayout from './components/AddressFormLayout.vue';
7
+ import ShopOrderStepperAction from "./ShopOrderStepperAction.vue";
7
8
 
8
9
  import { Request } from "@viur/vue-utils";
9
10
 
@@ -123,7 +124,8 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
123
124
  //checkout
124
125
  paymentProviderData:null,
125
126
  UserDataLayout: shallowRef(AddressFormLayout),
126
- discounts:{}
127
+ discounts:{},
128
+ stepperActionComponent:shallowRef(ShopOrderStepperAction)
127
129
  })
128
130
 
129
131
  function addTab({name, component, displayname, iconname, iconlibrary,active})