@viur/shop-components 0.14.3 → 0.14.5

package/.github/workflows/npm-publish.yml

@@ -8,6 +8,10 @@ on:
      tags:
       - v*
 
+permissions:
+  contents: read
+  id-token: write
+
 jobs:
   publish-npm:
     runs-on: ubuntu-latest
@@ -18,11 +22,28 @@ jobs:
         with:
           node-version: 22
           registry-url: https://registry.npmjs.org/
+
+      - name: Ensure npm supports trusted publishing
+        run: npm install -g npm@latest
       - run: npm ci
-      - name: Publish npm package
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_API_TOKEN}}
+
+      - name: Determine npm tag
+        id: npm_tag
+        run: |
+          TAG_NAME="${GITHUB_REF_NAME}"
+          echo "Detected tag: $TAG_NAME"
+
+          if [[ "$TAG_NAME" =~ -alpha[0-9]*$ ]]; then
+            echo "tag=alpha" >> $GITHUB_OUTPUT
+          elif [[ "$TAG_NAME" =~ -beta[0-9]*$ ]]; then
+            echo "tag=beta" >> $GITHUB_OUTPUT
+          elif [[ "$TAG_NAME" =~ -rc[0-9]*$ ]]; then
+            echo "tag=rc" >> $GITHUB_OUTPUT
+          else
+            echo "tag=latest" >> $GITHUB_OUTPUT
+          fi
+      - name: Publish to npm (Trusted Publishing)
+        run: npm publish --access public --tag ${{ steps.npm_tag.outputs.tag }}
 
 
   gh-release:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.14.3",
+  "version": "0.14.5",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@viur/ignite": "^5.1.2",
     "@viur/shoelace": "^1.0.10-v2.20.0",
-    "@viur/vue-utils": "^3.1.4",
+    "@viur/vue-utils": "^3.3.1",
     "@vueuse/core": "^13.1.0",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",

package/src/Shop.vue

@@ -26,7 +26,9 @@
         </div>
 
         <div class="viur-shop-sidebar-wrap" :class="{ bottom: (summary==='bottom') }" v-if="shopStore.state.currentTab!=='complete'">
-          <shop-summary ></shop-summary>
+          <slot name="summary">
+            <shop-summary ></shop-summary>
+          </slot>
         </div>
     </div>
     <template v-if="shopStore.state.debug">

package/src/ShopOrderStepper.vue

@@ -1,11 +1,12 @@
 <template>
     <sl-tab-group
-        class="viur-shop-order-tabgroup"
-        noScrollControls
         ref="stepper"
+        class="viur-shop-order-tabgroup"
+        no-scroll-controls
     >
         <template v-for="(tab,name) in shopStore.state.tabs">
-            <StepperTab v-show="shopStore.state.currentTab!=='complete'"
+            <StepperTab
+v-show="shopStore.state.currentTab!=='complete'"
                 :tab="name"
             >
             </StepperTab>
@@ -16,20 +17,9 @@
                     <component :is="tab['component']" :params="tab['params']">
                       <template #top_actions="slotProps">
                         <sl-bar class="viur-shop-stepper-bar">
-                          <div v-if="slotProps.left" slot="left" :id="slotProps.left"></div>
+                          <div v-if="slotProps.left" :id="slotProps.left" slot="left"></div>
                           <div slot="right">
-                            <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
-                            <sl-button
-                              :class="{'action-button-hint':slotProps.hint}"
-                              variant="success"
-                              size="large"
-                              :disabled="active(slotProps)"
-                              @click="nextStep(slotProps)"
-                              :loading="tab['validating']"
-                            >
-                              {{slotProps.nextName}}
-                              <sl-icon slot="suffix" name="chevron-right"></sl-icon>
-                            </sl-button>
+
                           </div>
                         </sl-bar>
                       </template>
@@ -38,22 +28,11 @@
                         <slot :name="'template_'+name"></slot>
                       </template>
 
-                      <template v-slot="slotProps">
+                      <template #default="slotProps">
                         <sl-bar class="viur-shop-stepper-bar">
-                          <div v-if="slotProps.left" slot="left" :id="slotProps.left"></div>
+                          <div v-if="slotProps.left" :id="slotProps.left" slot="left"></div>
                           <div slot="right">
-                            <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
-                            <sl-button
-                              :class="{'action-button-hint':slotProps.hint}"
-                              variant="success"
-                              size="large"
-                              :disabled="active(slotProps)"
-                              @click="nextStep(slotProps)"
-                              :loading="tab['validating']"
-                            >
-                              {{slotProps.nextName}}
-                              <sl-icon slot="suffix" name="chevron-right"></sl-icon>
-                            </sl-button>
+                            <component :is="shopStore.state.stepperActionComponent" :conf="slotProps" :tab="tab"></component>
                           </div>
                         </sl-bar>
                       </template>
@@ -88,18 +67,11 @@ onMounted(()=>{
     })
 })
 
-function nextStep(obj){
-  shopStore.tabValidation(obj.nextfunction, shopStore.navigateToNext)
-}
 
-function active(obj){
-  return !obj.activefunction()
-}
 
 </script>
 
 <style scoped>
-
 sl-tab-group {
   flex-grow: 1;
   &::part(base) {
@@ -134,20 +106,4 @@ sl-tab-panel {
   }
 }
 
-.hint{
-  border:1px solid var(--sl-color-neutral-200);
-  border-top-left-radius: var(--sl-input-border-radius-medium);
-  border-bottom-left-radius: var(--sl-input-border-radius-medium);
-  background-color: var(--sl-color-neutral-100);
-  color:var(--sl-color-neutral-800);
-  padding: 0 var(--sl-spacing-small);
-  height: auto;
-  min-height: var(--sl-input-height-large);
-  font-size: var(--sl-button-font-size-large);
-  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
-}
-.action-button-hint::part(base){
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
 </style>

package/src/ShopOrderStepperAction.vue

@@ -0,0 +1,59 @@
+<template>
+  <span v-if="conf.hint" class="hint">{{ conf.hint }}</span>
+  <sl-button
+    :class="{'action-button-hint':conf.hint}"
+    variant="success"
+    size="large"
+    :disabled="active(conf)"
+    :loading="tab['validating']"
+    @click="nextStep(conf)"
+  >
+    {{conf.nextName}}
+    <sl-icon slot="suffix" name="chevron-right"></sl-icon>
+  </sl-button>
+
+</template>
+<script setup>
+import {useViurShopStore} from './shop'
+const shopStore = useViurShopStore()
+
+const props = defineProps({
+ conf:{
+  type:Object,
+  reuqired:true
+ },
+ tab:{
+  type:Object,
+  reuqired:true
+ }
+
+})
+
+function nextStep(obj){
+  shopStore.tabValidation(obj.nextfunction, shopStore.navigateToNext)
+}
+
+function active(obj){
+  return !obj.activefunction()
+}
+
+</script>
+
+<style scoped>
+.hint{
+  border:1px solid var(--sl-color-neutral-200);
+  border-top-left-radius: var(--sl-input-border-radius-medium);
+  border-bottom-left-radius: var(--sl-input-border-radius-medium);
+  background-color: var(--sl-color-neutral-100);
+  color:var(--sl-color-neutral-800);
+  padding: 0 var(--sl-spacing-small);
+  height: auto;
+  min-height: var(--sl-input-height-large);
+  font-size: var(--sl-button-font-size-large);
+  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
+}
+.action-button-hint::part(base){
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+</style>

package/src/components/AddressForm.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import {computed, reactive, watch} from 'vue'
+import {computed, onMounted, reactive, watch} from 'vue'
 import LoadingHandler from './LoadingHandler.vue';
 import ViForm from "@viur/vue-utils/forms/ViForm.vue";
 import {useViurShopStore} from "../shop";
@@ -80,6 +80,15 @@ function formChange(data){
   }
 }
 
+onMounted(()=>{
+  // Set form language based on locale (use locale if not de-DE, otherwise use store language)
+  if (shopStore.state.locale!=="de-DE"){
+    state.language = shopStore.state.locale.split("-")[1].toLowerCase() // use country
+  }else{
+    state.language = shopStore.state.language
+  }
+})
+
 
 watch(()=>addressState.billingIsShipping, (newVal,oldVal)=>{
   if(oldVal && !newVal){

package/src/components/CartItem.vue

@@ -74,7 +74,7 @@
       <div class="availability"
            :class="`availability--${item.shop_availability}`"
       >
-        <span class="availability-description">{{$t(item.shop_availability)}}</span>
+        <span class="availability-description">{{$t(item.shop_availability.toString())}}</span>
       </div>
     </div>
 
@@ -135,7 +135,7 @@ function removeArticle(){
     flex-basis: 70%;
     font-size: .9em;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
     white-space: nowrap;
     &:before {
       content: '';
@@ -156,14 +156,17 @@ function removeArticle(){
     text-overflow: ellipsis;
   }
   .availability--onrequest,
-  .availability--instock {
+  .availability--instock,
+  .availability--true
+   {
     color: var(--ignt-color-success);
     &:before {
       background-color: var(--ignt-color-success);
     }
   }
   .availability--discontinued,
-  .availability--outofstock {
+  .availability--outofstock,
+  .availability--false {
     color: var(--ignt-color-danger);
     &:before {
       background-color: var(--ignt-color-danger);
@@ -310,7 +313,7 @@ function removeArticle(){
   .viur-shop-cart-leaf-availability {
     grid-column: 4 / span 1;
     align-self: center;
-    text-align: right;
+    text-align: center;
   }
 
   .viur-shop-cart-leaf-label,

package/src/composables/cart.js

@@ -88,11 +88,15 @@ export function useCart() {
                 if(item.discount){
                   shopStore.state.discounts[item.discount.dest.key] = item.discount
                 }
-                await fetchCartItems(item['key'])
+                await fetchCartItems(item['key'], parentKey=true)
               }
             }
+            if (parentKey){
+              shopStore.state.cartList=shopStore.state.cartList.concat(currentLeafs)
+            }else{
+              shopStore.state.cartList=currentLeafs
+            }
 
-            shopStore.state.cartList=shopStore.state.cartList.concat(currentLeafs)
             return resp
         })
     }

package/src/shop.js

@@ -4,6 +4,7 @@ import {ShopCart, ShopUserDataGuest, ShopShippingMethod, ShopPaymentProvider, Sh
 import { defineStore } from "pinia";
 import { useUrlSearchParams,useTimeoutFn } from '@vueuse/core'
 import AddressFormLayout from './components/AddressFormLayout.vue';
+import ShopOrderStepperAction from "./ShopOrderStepperAction.vue";
 
 import { Request } from "@viur/vue-utils";
 
@@ -123,7 +124,8 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         //checkout
         paymentProviderData:null,
         UserDataLayout: shallowRef(AddressFormLayout),
-        discounts:{}
+        discounts:{},
+        stepperActionComponent:shallowRef(ShopOrderStepperAction)
     })
 
     function addTab({name, component, displayname, iconname, iconlibrary,active})