@viur/shop-components 0.0.1-dev.31 → 0.0.1-dev.33

package/dist/viur-shop-components.umd.js

@@ -0,0 +1 @@
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@viur/vue-utils"),require("pinia"),require("@viur/viur-shop-client"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","@viur/vue-utils","pinia","@viur/viur-shop-client","vue-router"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.ViurShopComponents={},f.Vue,f.ViurVueUtils,f.Pinia,f.ViurShopClient))})(this,function(f,e,w,q,D){"use strict";const y=(t,r)=>{const n=t.__vccOpts||t;for(const[m,o]of r)n[m]=o;return n},C={props:{size:{type:String,default:"2"},active:{type:Boolean,default:!0},logo:{default:"logo-cube.svg",type:String},color:{default:"var(--sl-color-primary-500)",type:String}},setup(t,r){const n=e.reactive({trackWidth:e.computed(()=>`${t.size/30}rem`),outerSize:e.computed(()=>`calc(${t.size}rem + ${n.trackWidth})`),spinnerSize:e.computed(()=>`${t.size}rem`),logoSize:e.computed(()=>`calc(${t.size}rem - ${n.trackWidth} * 10)`),shadow:e.computed(()=>`0px 0px ${t.size/6}rem 0 color-mix(in hsl, var(--sl-color-neutral-1000), 80% transparent)`)});return{state:n}}},T=()=>{e.useCssVars(t=>({"93747d92":t.state.outerSize,"284424e5":t.state.shadow,"6485ca5e":t.state.logoSize,"5d833915":t.state.spinnerSize,d5b3feca:t.color,"2050b700":t.state.trackWidth}))},I=C.setup;C.setup=I?(t,r)=>(T(),I(t,r)):T;const O={key:0,class:"loading"},A={class:"logo"};function F(t,r,n,m,o,l){const b=e.resolveComponent("sl-spinner"),_=e.resolveComponent("sl-icon");return e.openBlock(),e.createBlock(e.Transition,null,{default:e.withCtx(()=>[n.active?(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(b,{class:"loader"}),e.createElementVNode("div",A,[e.createVNode(_,{src:n.logo},null,8,["src"])])])):e.createCommentVNode("",!0)]),_:1})}const j=y(C,[["render",F],["__scopeId","data-v-46c45785"]]),g=q.defineStore("cartstore",()=>{const t=new D.ViURShopClient({host_url:window.location.origin==="http://localhost:8081"?"http://localhost:8080":window.location.origin}),r=e.reactive({basketRootNode:{},whishlistRootNodes:[],children:{},structure:{address:{},cart:{}}});async function n(){await o()}async function m(s){return await t.cart_list({cart_key:s})}async function o(){(await t.cart_list()).forEach(a=>{a.is_root_node&&(a.cart_type==="basket"?r.basketRootNode=a:r.whishlistRootNodes.push(a))})}async function l(s,a){let i=await t.article_add({article_key:s,parent_cart_key:a});console.log("addToCart",i)}async function b(s,a){let i=await t.article_view({article_key:s,parent_cart_key:a});console.log("getArticleView",i)}async function _(s,a){let i=await t.article_remove({article_key:s,parent_cart_key:a});console.log("remove Resp",i)}async function p(s,a,i){let d=await t.article_update({article_key:s,parent_cart_key:a,quantity:i,quantity_mode:"replace"});console.log("update Resp",d)}async function h(){let s=await t.address_structure();r.structure.address=s.addSkel,console.log("adress add",r.structure.address)}return{state:r,addToCart:l,getArticleView:b,removeItem:_,updateItem:p,init:n,getAdressStructure:h,getChildren:m}}),W={__name:"CartNode",props:{node:{type:Object,required:!0}},setup(t){return e.reactive({}),(r,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createTextVNode(" cartnode "),e.createElementVNode("pre",null,e.toDisplayString(t.node.name),1)],64))}},x=t=>(e.pushScopeId("data-v-0e24135f"),t=t(),e.popScopeId(),t),M=["src"],K={class:"viur-shop-cart-card-header",slot:"header"},L={class:"viur-shop-cart-card-headline headline"},U={class:"viur-shop-cart-card-body-row"},G={class:"viur-shop-cart-card-body-info"},P=x(()=>e.createElementVNode("div",{class:"viur-shop-cart-card-descr"},[e.createTextVNode(" Version: 900x900x2000 "),e.createElementVNode("br"),e.createTextVNode(" Farbe: Chromoptik "),e.createElementVNode("br"),e.createTextVNode(" Glasart: Klar hell mit Edelglasbeschichtung"),e.createElementVNode("br"),e.createTextVNode(" Anschlag: Beidseitig variabel"),e.createElementVNode("br"),e.createTextVNode(" Griff: Stangengriff Exklusiv (56) ")],-1)),Z={class:"viur-shop-cart-card-body-footer"},H={class:"viur-shop-cart-card-body-amount"},J={class:"viur-shop-cart-card-price-wrap",slot:"footer"},Q=x(()=>e.createElementVNode("div",{class:"viur-shop-cart-card-price-label"},"Preis",-1)),X={class:"viur-shop-cart-card-price"},Y=x(()=>e.createElementVNode("div",{class:"viur-shop-cart-card-small-print"},"Brutto / Stk.",-1)),v=y({__name:"CartLeaf",props:{leaf:{type:Object,required:!0},node:{type:Object,required:!0}},emits:["updateItem","removeItem"],setup(t,{emit:r}){const n=t,m=r,o=e.reactive({leaf:{}});function l(p){return p!==void 0?w.Request.downloadUrlFor(p):"https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"}function b(p,h,s,a){m("updateItem",{item:p,articleKey:h,node:s,quantity:a})}function _(p,h,s){m("removeItem",{item:p,articleKey:h,node:s})}return e.onBeforeMount(()=>{o.leaf=n.leaf}),(p,h)=>{const s=e.resolveComponent("sl-icon"),a=e.resolveComponent("sl-button"),i=e.resolveComponent("sl-input"),d=e.resolveComponent("sl-card");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createTextVNode(" cartleafe "),e.createVNode(d,{horizontal:"",class:"viur-shop-cart-card"},{default:e.withCtx(()=>[e.createElementVNode("img",{class:"viur-shop-cart-card-img",slot:"image",src:l(o.leaf.shop_image?o.leaf.shop_image:void 0)},null,8,M),e.createElementVNode("div",K,[e.createElementVNode("h4",L,e.toDisplayString(o.leaf.shop_name)+" | "+e.toDisplayString(t.leaf.shop_art_no_or_gtin),1)]),e.createElementVNode("div",U,[e.createElementVNode("div",G,[P,e.createElementVNode("div",Z,[e.createVNode(a,{size:"small",outline:"",class:"viur-shop-cart-card-add-to-favourites-btn",variant:"primary",title:"Add to favourites"},{default:e.withCtx(()=>[e.createVNode(s,{name:"heart",slot:"prefix"})]),_:1}),e.createVNode(a,{size:"small",outline:"",class:"viur-shop-cart-card-delete-btn",variant:"primary",title:"Remove from cart",onClick:h[0]||(h[0]=k=>_(o.leaf,o.leaf.article.dest.key,t.node))},{default:e.withCtx(()=>[e.createVNode(s,{name:"trash",slot:"prefix"})]),_:1})])]),e.createElementVNode("div",H,[e.createVNode(i,{class:"amount-input",type:"number",label:"Anzahl",placeholder:"Number",min:"0",modelValue:o.leaf.quantity,"onUpdate:modelValue":h[1]||(h[1]=k=>o.leaf.quantity=k),onInput:h[2]||(h[2]=k=>b(o.leaf,o.leaf.article.dest.key,t.node,o.leaf.quantity))},null,8,["modelValue"])]),e.createElementVNode("div",J,[Q,e.createElementVNode("div",X,e.toDisplayString(o.leaf.price.retail)+" € ",1),Y])])]),_:1})],64)}}},[["__scopeId","data-v-0e24135f"]]),u=t=>(e.pushScopeId("data-v-7aae4815"),t=t(),e.popScopeId(),t),ee=u(()=>e.createElementVNode("p",null,"Möchten Sie den Artikel wirklich aus dem Warenkorb entfernen?",-1)),te={class:"footer-wrap",slot:"footer"},oe={key:0},ae=u(()=>e.createElementVNode("h2",{class:"viur-shop-cart-sidebar-headline headline"},"Zusammenfassung",-1)),ne=u(()=>e.createElementVNode("br",null,null,-1)),re=u(()=>e.createElementVNode("br",null,null,-1)),se={class:"viur-shop-cart-sidebar-info-line"},ce=u(()=>e.createElementVNode("span",null,"Zwischensumme",-1)),le=u(()=>e.createElementVNode("div",{class:"viur-shop-cart-sidebar-info-line"},[e.createElementVNode("span",null,"Rabatt"),e.createTextVNode(" 0 € ")],-1)),ie=u(()=>e.createElementVNode("div",{class:"viur-shop-cart-sidebar-info-line"},[e.createElementVNode("span",null,"Versandkosten"),e.createTextVNode(" 0 € ")],-1)),de={class:"viur-shop-cart-sidebar-info-line total"},me=u(()=>e.createElementVNode("span",null,"Gesamt:",-1)),pe={class:"viur-shop-cart-sidebar-btn-wrap"},B=y({__name:"CartView",props:{mode:{type:String,default:"basket"},cartKey:{type:String,required:!0},sidebar:{type:Boolean,default:!0}},setup(t){const r=t,n=g(),m=e.ref(null),o=e.reactive({cartIsInit:e.computed(()=>!!n.state.basketRootNode),itemsIsInit:e.computed(()=>!0),images:{},currentItem:{},currentNode:{},nodes:[],leaves:{}});e.computed(()=>r.mode==="basket"?n.state.basket:r.cartKey);async function l(){await n.updateItem(o.currentItem.article.dest.key,o.currentNode.key,0),await h(),m.value.hide()}async function b(a){console.log("updateItem :",a),a.quantity===0?(m.value.show(),o.currentItem=a.item,o.currentNode=a.node):(await n.updateItem(a.articleKey,a.node.key,a.quantity),await n.init())}function _(a){console.log("removeItem :",a),m.value.show(),o.currentItem=a.item,o.currentNode=a.node}async function p(){o.leaves[o.currentNode.key].forEach(a=>{a.key===o.currentItem.key&&(a.quantity=1)}),o.currentItem={},o.currentNode={}}async function h(){o.nodes=[],o.leaves={},await n.init(),await s()}async function s(a=r.cartKey){console.log("debug getChildren parentKey from comp: ",a);const i=await n.getChildren(a);console.log("getChildren children: ",i),i.forEach(async d=>{d.skel_type==="node"?(o.nodes.push(d),await s(d.key)):(Object.keys(o.leaves).includes(a)||(o.leaves[a]=[]),o.leaves[a].push(d))})}return e.onBeforeMount(async()=>{await n.init(),await s(),r.mode==="basket"&&o.nodes.push(n.state.basketRootNode),console.log("state.nodes test",o.nodes),console.log("state.leaves",o.leaves)}),(a,i)=>{const d=e.resolveComponent("sl-spinner"),k=e.resolveComponent("sl-button"),S=e.resolveComponent("sl-dialog"),$=e.resolveComponent("sl-input"),N=e.resolveComponent("sl-icon");return t.cartKey.length?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createVNode(S,{ref_key:"confirm",ref:m,onSlHide:p},{default:e.withCtx(()=>[ee,e.createElementVNode("div",te,[e.createVNode(k,{variant:"danger",onClick:i[0]||(i[0]=V=>m.value.hide()),size:"medium"},{default:e.withCtx(()=>[e.createTextVNode(" Abbrechen ")]),_:1}),e.createVNode(k,{variant:"success",onClick:l,size:"medium"},{default:e.withCtx(()=>[e.createTextVNode(" Aus Warenkorb entfernen ")]),_:1})])]),_:1},512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.nodes,V=>(e.openBlock(),e.createElementBlock("div",null,[Object.keys(o.leaves).includes(V.key)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(W,{node:V},null,8,["node"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.leaves[V.key],E=>(e.openBlock(),e.createBlock(v,{key:E.key,leaf:E,node:V,onRemoveItem:_,onUpdateItem:b},null,8,["leaf","node"]))),128))],64)):e.createCommentVNode("",!0)]))),256)),t.sidebar?(e.openBlock(),e.createElementBlock("div",oe,[ae,ne,e.createVNode($,{label:"Rabattcode eingeben"}),re,e.createElementVNode("div",se,[ce,e.createTextVNode(" --> "+e.toDisplayString(t.mode==="basket"?e.unref(n).state.basketRootNode.total:e.unref(n).state.whishlistRootNodes[t.cartKey].total)+" € ",1)]),le,ie,e.createElementVNode("div",de,[me,e.createTextVNode(" "+e.toDisplayString(t.mode==="basket"?e.unref(n).state.basketRootNode.total:e.unref(n).state.whishlistRootNodes[t.cartKey].total)+" € ",1)]),e.createElementVNode("div",pe,[e.createVNode(k,{variant:"info",size:"small"},{default:e.withCtx(()=>[e.createTextVNode(" Jetzt Bestellen ")]),_:1}),e.createVNode(k,{size:"small",variant:"primary"},{default:e.withCtx(()=>[e.createVNode(N,{name:"paypal",slot:"prefix"}),e.createTextVNode(" Paypal ")]),_:1})])])):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createBlock(d,{key:0}))}}},[["__scopeId","data-v-7aae4815"]]),c=t=>(e.pushScopeId("data-v-75e70e9a"),t=t(),e.popScopeId(),t),_e={key:1,class:"list"},he=c(()=>e.createElementVNode("h2",{class:"viur-shop-cart-headline headline"},"Bestellung prüfen",-1)),fe=c(()=>e.createElementVNode("br",null,null,-1)),Ne={class:"viur-shop-cart-address-wrap"},Ve={class:"viur-shop-cart-address"},be={class:"viur-shop-cart-address-headline"},ke=c(()=>e.createElementVNode("br",null,null,-1)),ue=c(()=>e.createElementVNode("br",null,null,-1)),ye=c(()=>e.createElementVNode("br",null,null,-1)),ge=c(()=>e.createElementVNode("br",null,null,-1)),Ee=c(()=>e.createElementVNode("br",null,null,-1)),we={class:"viur-shop-cart-address"},Ce={class:"viur-shop-cart-address-headline"},xe=c(()=>e.createElementVNode("br",null,null,-1)),Be=c(()=>e.createElementVNode("br",null,null,-1)),Se=c(()=>e.createElementVNode("br",null,null,-1)),$e=c(()=>e.createElementVNode("br",null,null,-1)),Te=c(()=>e.createElementVNode("br",null,null,-1)),Ie={class:"viur-shop-cart-payment"},ze=c(()=>e.createElementVNode("div",{class:"viur-shop-cart-payment-method"},[e.createElementVNode("span",null,"Zahlungsmethode:"),e.createTextVNode(" Paypal ")],-1)),Re=c(()=>e.createElementVNode("h2",{class:"viur-shop-cart-headline headline"},"Warenkorb",-1)),qe=c(()=>e.createElementVNode("br",null,null,-1)),De=["src"],Oe={class:"viur-shop-cart-mini-cart-header",slot:"header"},Ae={class:"viur-shop-cart-mini-headline headline"},Fe={class:"viur-shop-cart-mini-card-body-row"},je={class:"viur-shop-cart-mini-card-body-info"},We={class:"viur-shop-cart-mini-card-info-wrap"},Me=c(()=>e.createElementVNode("div",{class:"viur-shop-cart-mini-card-info"},[e.createElementVNode("span",null,"Anzahl: "),e.createTextVNode(" 1 ")],-1)),Ke={class:"viur-shop-cart-mini-card-info"},Le=c(()=>e.createElementVNode("span",null,"Preis: ",-1)),Ue=c(()=>e.createElementVNode("h2",{class:"viur-shop-cart-sidebar-headline headline"},"Jetzt Bestellen",-1)),Ge=c(()=>e.createElementVNode("br",null,null,-1)),Pe={class:"viur-shop-cart-sidebar-info-line"},Ze=c(()=>e.createElementVNode("span",null,"Zwischensumme",-1)),He=c(()=>e.createElementVNode("div",{class:"viur-shop-cart-sidebar-info-line"},[e.createElementVNode("span",null,"Rabatt"),e.createTextVNode(" 0 € ")],-1)),Je=c(()=>e.createElementVNode("div",{class:"viur-shop-cart-sidebar-info-line"},[e.createElementVNode("span",null,"Versandkosten"),e.createTextVNode(" 0 € ")],-1)),Qe={class:"viur-shop-cart-sidebar-info-line total"},Xe=c(()=>e.createElementVNode("span",null,"Gesamt:",-1)),Ye={class:"viur-shop-cart-sidebar-btn-wrap"},z=y({__name:"ConfirmView",setup(t){const r=g(),n=e.reactive({cartIsInit:e.computed(()=>!!r.state.basket.length),itemsIsInit:e.computed(()=>!!r.state.carts[r.state.basket].items),images:{},showOrderButton:!1});function m(l){return w.Request.get(`/json/dk_variante/view/${l}`).then(async b=>{let _=await b.json();_=_.values;let p=_.dk_artikel.dest.image?w.Request.downloadUrlFor(_.dk_artikel.dest.image):"https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";n.images[l]=p}),n.images[l]}function o(l){l.target.checked&&(n.showOrderButton=!0),l.target.checked||(n.showOrderButton=!1)}return e.onBeforeMount(async()=>{await r.init()}),(l,b)=>{const _=e.resolveComponent("sl-icon"),p=e.resolveComponent("sl-button"),h=e.resolveComponent("sl-card"),s=e.resolveComponent("sl-checkbox");return n.cartIsInit?(e.openBlock(),e.createElementBlock("div",_e,[he,fe,e.createElementVNode("div",Ne,[e.createElementVNode("div",Ve,[e.createElementVNode("div",be,[e.createTextVNode(" Versandadresse "),e.createVNode(p,{outline:"",size:"small"},{default:e.withCtx(()=>[e.createVNode(_,{name:"pencil",slot:"prefix"})]),_:1})]),e.createTextVNode(" Roland Brose"),ke,e.createTextVNode(" Speicherstraße 33"),ue,e.createTextVNode(" 44147 Dortmund, DE"),ye,ge,e.createTextVNode(" rb@mausbrand.de"),Ee,e.createTextVNode(" 0231 21 34 68 90 ")]),e.createElementVNode("div",we,[e.createElementVNode("div",Ce,[e.createTextVNode(" Rechnungsadresse "),e.createVNode(p,{outline:"",size:"small"},{default:e.withCtx(()=>[e.createVNode(_,{name:"pencil",slot:"prefix"})]),_:1})]),e.createTextVNode(" Roland Brose"),xe,e.createTextVNode(" Speicherstraße 33"),Be,e.createTextVNode(" 44147 Dortmund, DE"),Se,$e,e.createTextVNode(" rb@mausbrand.de"),Te,e.createTextVNode(" 0231 21 34 68 90 ")])]),e.createElementVNode("div",Ie,[ze,e.createVNode(p,{outline:"",size:"small"},{default:e.withCtx(()=>[e.createVNode(_,{name:"pencil",slot:"prefix"})]),_:1})]),Re,qe,(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).state.carts[e.unref(r).state.basket].items,a=>(e.openBlock(),e.createBlock(h,{horizontal:"",class:"viur-shop-cart-mini-card"},{default:e.withCtx(()=>[e.createElementVNode("img",{class:"viur-shop-cart-mini-card-img",slot:"image",src:m(a.article.dest.key)},null,8,De),e.createElementVNode("div",Oe,[e.createElementVNode("h4",Ae,e.toDisplayString(a.article.dest.shop_name)+" | 425018",1)]),e.createElementVNode("div",Fe,[e.createElementVNode("div",je,[e.createElementVNode("div",We,[Me,e.createElementVNode("div",Ke,[Le,e.createTextVNode(" "+e.toDisplayString(a.article.dest.shop_price_recommended)+" € ",1)])])])])]),_:2},1024))),256)),(e.openBlock(),e.createBlock(e.Teleport,{to:"#order_sidebar"},[Ue,Ge,e.createElementVNode("div",Pe,[Ze,e.createTextVNode(" "+e.toDisplayString(e.unref(r).state.carts[e.unref(r).state.basket].info.total)+" € ",1)]),He,Je,e.createElementVNode("div",Qe,[Xe,e.createTextVNode(" "+e.toDisplayString(e.unref(r).state.carts[e.unref(r).state.basket].info.total)+" € ",1)]),e.createVNode(s,{onSlChange:o},{default:e.withCtx(()=>[e.createTextVNode(" Ich akzeptiere die geltenden AGBs und Datenschutzbestimmungen ")]),_:1}),e.createElementVNode("div",Ye,[e.createVNode(p,{variant:n.showOrderButton?"info":"disabled",size:"small",disabled:!n.showOrderButton},{default:e.withCtx(()=>[e.createTextVNode(" Zahlungspflichtig bestellen ")]),_:1},8,["variant","disabled"])])]))])):(e.openBlock(),e.createBlock(j,{key:0}))}}},[["__scopeId","data-v-75e70e9a"]]),ve=t=>(e.pushScopeId("data-v-61488015"),t=t(),e.popScopeId(),t),et={class:"bind viur-shop-wrap"},tt={class:"viur-shop-order-step"},ot={class:"viur-shop-order-status-text"},at=ve(()=>e.createElementVNode("div",{class:"viur-shop-sidebar",id:"order_sidebar"},null,-1)),nt=y({__name:"OrderView",props:{tabs:{type:Object,required:!0}},emits:["tabChange"],setup(t,{emit:r}){const n=t,m=r,o=e.reactive({tabNames:e.computed(()=>b(n.tabs)),isFirstTab:s=>s===0}),l=e.ref(null);function b(s){let a=[],i=[];for(const d in s)s[d].position?a.push([d,s[d].position]):a.push([d,0]);return a.sort((d,k)=>d[1]-k[1]),a.forEach(d=>{i.push(d[0])}),i}function _(s){m("tabChange",s)}function p(s){l.value.show(s)}function h(s){l.value.show(s)}return(s,a)=>{const i=e.resolveComponent("sl-icon"),d=e.resolveComponent("sl-tab"),k=e.resolveComponent("sl-button"),S=e.resolveComponent("sl-tab-panel"),$=e.resolveComponent("sl-tab-group");return e.openBlock(),e.createElementBlock("div",et,[e.createVNode($,{class:"viur-shop-order-tab",noScrollControls:"",onSlTabShow:_,ref_key:"tabGroup",ref:l},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.tabNames,(N,V)=>(e.openBlock(),e.createBlock(d,{slot:"nav",panel:N,key:N,disabled:t.tabs[N].disabled},{default:e.withCtx(()=>[e.createElementVNode("div",tt,[e.createVNode(i,{name:t.tabs[N].icon.name,library:t.tabs[N].icon.library},null,8,["name","library"]),e.createElementVNode("div",ot,e.toDisplayString(V+1)+". "+e.toDisplayString(t.tabs[N].displayName),1)]),V<o.tabNames.length-1?(e.openBlock(),e.createBlock(i,{key:0,name:"chevron-right",class:"viur-shop-order-tab-check"})):e.createCommentVNode("",!0)]),_:2},1032,["panel","disabled"]))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.tabNames,(N,V)=>(e.openBlock(),e.createBlock(S,{name:N,key:N},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tabs[N].component),e.mergeProps({ref_for:!0},t.tabs[N].props?t.tabs[N].props:""),null,16)),V!==o.tabNames.length-1?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["viur-shop-form-footer",{"flex-end":o.isFirstTab(V)}])},[e.withDirectives(e.createVNode(k,{type:"submit",onClick:E=>p(o.tabNames[V-1])},{default:e.withCtx(()=>[e.createTextVNode(" Zurück ")]),_:2},1032,["onClick"]),[[e.vShow,V!==0]]),e.createVNode(k,{type:"submit",variant:"primary",onClick:E=>h(o.tabNames[V+1])},{default:e.withCtx(()=>[e.createTextVNode(" Weiter ")]),_:2},1032,["onClick"])],2)):e.createCommentVNode("",!0)]),_:2},1032,["name"]))),128))]),_:1},512),at])}}},[["__scopeId","data-v-61488015"]]),R={__name:"ExampleUsage",setup(t){const r=g(),n=e.computed(()=>r.state.basketRootNode.key?r.state.basketRootNode.key:""),m=e.reactive({rootNode:{},tabs:{cart:{component:e.shallowRef(B),props:{sidebar:!0,mode:"basket",cartKey:n},displayName:"Warenkorb",icon:{name:"cart",library:"hsk"},position:2,disabled:!1,atShow:null,atHide:null}}});function o(l){(l==null?void 0:l.detail.name)==="confirm"&&(m.tabs.orderComplete.disabled=!1)}return e.onBeforeMount(async()=>{await r.init(),await r.getAdressStructure(),console.log("debug init exampleusage :",r.state.basketRootNode)}),(l,b)=>(e.openBlock(),e.createBlock(nt,{tabs:m.tabs,onTabChange:o},null,8,["tabs"]))}},rt={install(t){t.component("CartView",B),t.component("ExampleUsage",R),t.component("ConfirmView",z)}};f.CartView=B,f.ConfirmView=z,f.ExampleUsage=R,f.default=rt,f.useCartStore=g,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.0.1-dev.31",
+  "version": "0.0.1-dev.33",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",
@@ -17,17 +17,30 @@
     "url": "https://github.com/viur-framework/shop-components/issues"
   },
   "homepage": "https://github.com/viur-framework/shop-components#readme",
-  "devDependencies": {
-    "postcss-custom-media": "^10.0.0",
-    "postcss-nesting": "^12.0.0",
-    "prettier": "^3.2.5"
+  "main": "dist/viur-shop-components.umd.js",
+  "module": "dist/viur-shop-components.es.js",
+  "style": "dist/style.css",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch"
   },
   "dependencies": {
-    "@viur/ignite": "^5.0.2",
-    "@viur/shoelace": "^1.0.6-v2.15.0",
-    "@viur/vue-utils": "^1.4.5",
+    "@viur/ignite": "^5.1.2",
+    "@viur/shoelace": "^1.0.6-v2.15.1",
+    "@viur/viur-shop-client": "^0.1.0-dev.9",
+    "@viur/vue-utils": "^1.4.10",
     "pinia": "^2.1.7",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2"
+    "vue": "^3.4.31",
+    "vue-router": "^4.4.0"
+  },
+  "devDependencies": {
+    "postcss-custom-media": "^10.0.7",
+    "postcss-nesting": "^12.1.5",
+    "prettier": "^3.3.2",
+    "vite": "^5.3.3",
+    "@vitejs/plugin-vue": "^5.0.5"
   }
 }

package/src/components/cart/CartLeaf.vue

@@ -1,195 +0,0 @@
-<template>
-  <sl-card horizontal class="viur-shop-cart-card">
-    <img
-      class="viur-shop-cart-card-img"
-      slot="image"
-      :src="getImage(state.leaf.shop_image ? state.leaf.shop_image : undefined)"
-    />
-    <div class="viur-shop-cart-card-header" slot="header">
-      <h4 class="viur-shop-cart-card-headline headline">
-        {{ state.leaf.shop_name }} | {{ leaf.shop_art_no_or_gtin }}
-      </h4>
-    </div>
-    <div class="viur-shop-cart-card-body-row">
-      <div class="viur-shop-cart-card-body-info">
-        <div class="viur-shop-cart-card-descr">
-          Version: 900x900x2000 <br />
-          Farbe: Chromoptik <br />
-          Glasart: Klar hell mit Edelglasbeschichtung<br />
-          Anschlag: Beidseitig variabel<br />
-          Griff: Stangengriff Exklusiv (56)
-        </div>
-        <div class="viur-shop-cart-card-body-footer">
-          <sl-button
-            size="small"
-            outline
-            class="viur-shop-cart-card-add-to-favourites-btn"
-            variant="primary"
-            title="Add to favourites"
-          >
-            <sl-icon name="heart" slot="prefix"></sl-icon>
-          </sl-button>
-          <sl-button
-            size="small"
-            outline
-            class="viur-shop-cart-card-delete-btn"
-            variant="primary"
-            title="Remove from cart"
-            @click="removeItem(state.leaf, state.leaf.article.dest.key, node)"
-          >
-            <sl-icon name="trash" slot="prefix"></sl-icon>
-          </sl-button>
-        </div>
-      </div>
-      <div class="viur-shop-cart-card-body-amount">
-        <sl-input
-          class="amount-input"
-          type="number"
-          label="Anzahl"
-          placeholder="Number"
-          min="0"
-          v-model="state.leaf.quantity"
-          @input="
-            updateItem(
-              state.leaf,
-              state.leaf.article.dest.key,
-              node,
-              state.leaf.quantity,
-            )
-          "
-        >
-        </sl-input>
-      </div>
-      <div class="viur-shop-cart-card-price-wrap" slot="footer">
-        <div class="viur-shop-cart-card-price-label">Preis</div>
-        <div class="viur-shop-cart-card-price">
-          {{ state.leaf.price.retail }}
-          €
-        </div>
-        <div class="viur-shop-cart-card-small-print">Brutto / Stk.</div>
-      </div>
-    </div>
-  </sl-card>
-</template>
-
-<script setup>
-import { computed, onBeforeMount, reactive } from "vue";
-import { Request } from "@viur/vue-utils";
-
-const props = defineProps({
-  leaf: { type: Object, required: true },
-  node: { type: Object, required: true },
-});
-
-const emit = defineEmits(["updateItem", "removeItem"]);
-
-const state = reactive({
-  leaf: {},
-});
-
-function getImage(image) {
-  if (image !== undefined) return Request.downloadUrlFor(image);
-
-  return "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
-}
-
-function updateItem(item, articleKey, node, quantity) {
-  emit("updateItem", {
-    item: item,
-    articleKey: articleKey,
-    node: node,
-    quantity: quantity,
-  });
-}
-
-function removeItem(item, articleKey, node) {
-  emit("removeItem", { item: item, articleKey: articleKey, node: node });
-}
-
-onBeforeMount(() => {
-  state.leaf = props.leaf;
-});
-</script>
-
-<style scoped>
-.viur-shop-cart-card-img {
-  aspect-ratio: 1;
-}
-
-.viur-shop-cart-card {
-  margin-bottom: var(--sl-spacing-x-large);
-
-  &::part(header) {
-    border-bottom: none;
-    padding-top: 0;
-    padding-right: 0;
-  }
-
-  &::part(image) {
-    flex-basis: 25%;
-    max-width: 250px;
-  }
-
-  &::part(body) {
-    display: flex;
-    flex: 1;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-right: 0;
-  }
-
-  &::part(group) {
-    padding: var(--sl-spacing-small) 0;
-  }
-}
-
-.viur-shop-cart-card-body-row {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  gap: var(--sl-spacing-large);
-  flex: 1;
-}
-
-.viur-shop-cart-card-body-info {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.viur-shop-cart-card-descr {
-  margin-bottom: auto;
-}
-
-.viur-shop-cart-card-body-footer {
-  display: flex;
-  flex-direction: row;
-  gap: var(--sl-spacing-2x-small);
-  margin-top: var(--sl-spacing-large);
-}
-
-.amount-input {
-  width: 5em;
-}
-
-.viur-shop-cart-card-price-wrap {
-  display: flex;
-  flex-direction: column;
-
-  .viur-shop-cart-card-small-print {
-    font-size: 0.75em;
-    margin-left: auto;
-  }
-}
-
-.viur-shop-cart-card-price {
-  font-size: 1.3em;
-}
-
-.viur-shop-cart-card-price-label {
-  color: var(--ignt-color-primary);
-  font-weight: 600;
-  margin-bottom: 10px;
-  font-size: 1em;
-  margin-left: auto;
-}
-</style>

package/src/components/cart/CartNode.vue

@@ -1,13 +0,0 @@
-<template>
-  <pre>{{ node.name }}</pre>
-</template>
-
-<script setup>
-import { computed, reactive } from "vue";
-
-const props = defineProps({
-  node: { type: Object, required: true },
-});
-
-const state = reactive({});
-</script>