@viur/shop-components 0.14.2 → 0.14.4

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.2",
+  "version": "0.14.4",
   "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/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}`"
       >
-        {{$t(item.shop_availability)}}
+        <span class="availability-description">{{$t(item.shop_availability.toString())}}</span>
       </div>
     </div>
 
@@ -135,28 +135,38 @@ function removeArticle(){
     flex-basis: 70%;
     font-size: .9em;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
     white-space: nowrap;
     &:before {
       content: '';
       display: block;
       background-color: #666;
       width: .7em;
+      min-width: .7em;
       height: .7em;
       border-radius: 50%;
       margin-right: 5px;
       margin-bottom: 2px;
     }
   }
+  .availability-description {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    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);
@@ -303,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/components/dialogButton.vue

@@ -31,12 +31,13 @@ function close(){
 
 <style scoped>
 
-.decent{
+.decent {
     margin: 0;
     transition: all ease .3s;
 
     &::part(base){
-        border: none;
+      border: none;
+      border-radius: 0;
     }
 
     &::part(label){
@@ -46,4 +47,4 @@ function close(){
     }
 }
 
-</style>
+</style>

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
         })
     }