@viur/shop-components 0.0.1-dev.9 → 0.1.0

package/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_width = 120
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

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

@@ -0,0 +1,42 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+     tags:
+      - v*
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - name: Publish npm package
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_API_TOKEN}}
+
+
+  gh-release:
+    runs-on: ubuntu-latest
+    permissions: write-all
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: debug
+        run: |
+          echo "${{ contains(github.ref_name, 'dev') }}"
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        # if: "!startsWith(github.ref_name, 'v-test-')"
+        with:
+          generate_release_notes: true
+          prerelease: ${{ contains(github.ref_name, 'dev') }}

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/style/ignite"]
+	path = src/style/ignite
+	url = git@github.com:viur-framework/ignite.git

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ViUR
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -6,6 +6,17 @@
     <a href="LICENSE">
         <img src="https://img.shields.io/github/license/viur-framework/shop-components" alt="Badge displaying the license" title="License badge">
     </a>
-    <br>
-    A collection of Vue.js components for the <a href="https://www.viur.dev">ViUR</a> <a href="https://github.com/viur-framework/viur-shop">shop</a>.
+    <br />
+    A collection of Vue.js components for the <a href="https://www.viur.dev">ViUR</a>
+    <a href="https://github.com/viur-framework/viur-shop">shop</a>.
 </div>
+
+### Structure
+* **Main components** have to be exported in `./src/main.js`. Main Components should be in folder `./src/components`.
+* **Ui Elements** for main components should be in `./src/components/ui` so everyone who contributes can see if there is an element/component already for their use.  
+* Components should be as small as possible to make the code easier to access and understand, thats why the directory structure has importance.  
+* Every logic/function according to articles/items/cart or anything else should be in the `cartStore` in `./src/stores/cart.js` - reason is as follows - all components get their data with so called props which are not "reactive" by nature. We want to trigger a rerender if we change/add/edit... items thats why anything according to that should be in the cartStore. Read the cartStore carefully and use the already existing states to grant a clean rerender/reactive process. The props all get updated as soon as the main states get updated in the `cartStore` -> rerender --> profit...
+
+Try to understand this structure and adopt it with new components for easy implementation without much effort.
+
+Real documentation is coming soon...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.0.1-dev.9",
+  "version": "0.1.0",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",
@@ -17,17 +17,29 @@
     "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": "src/main.js",
+  "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",
-    "pinia": "^2.1.7",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2"
+    "@tanstack/vue-table": "^8.20.5",
+    "@viur/ignite": "^5.1.2",
+    "@viur/shoelace": "^1.0.8-v2.19.0",
+    "@viur/vue-utils": "^1.8.2",
+    "@vueuse/core": "^11.1.0",
+    "pinia": "^2.2.4",
+    "primevue": "^4.1.1",
+    "vue": "^3.5.12",
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.0.3",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "postcss-custom-media": "^11.0.3",
+    "postcss-nesting": "^13.0.0",
+    "prettier": "^3.3.3",
+    "vite": "^5.4.9"
   }
 }

package/src/Shop.vue

@@ -0,0 +1,232 @@
+<template>
+    <div class="bind viur-shop-wrap" v-bind="$attrs" v-if="shopStore.state.cartReady && shopStore.state.orderReady">
+        <div class="viur-shop-stepper-wrap"
+            :class="{ 'full-width': (!summary || summary==='bottom' || shopStore.state.currentTab==='complete') }"
+        >
+            <shop-order-stepper >
+              <template #template_cart>
+                <slot name="template_cart"></slot>
+              </template>
+              <template #template_userdata>
+                <slot name="template_userdata"></slot>
+              </template>
+              <template #template_shippingmethod>
+                <slot name="template_shippingmethod"></slot>
+              </template>
+              <template #template_paymentprovider>
+                <slot name="template_paymentprovider"></slot>
+              </template>
+              <template #template_confirm>
+                <slot name="template_confirm"></slot>
+              </template>
+              <template #template_complete>
+                <slot name="template_complete"></slot>
+              </template>
+            </shop-order-stepper>
+        </div>
+
+        <div class="viur-shop-sidebar-wrap" :class="{ bottom: (summary==='bottom') }" v-if="shopStore.state.currentTab!=='complete'">
+          <shop-summary ></shop-summary>
+        </div>
+    </div>
+    <template v-if="shopStore.state.debug">
+      <sl-details summary="Debug">
+          order: {{ shopStore.state.orderKey }}<br>
+          cart: {{ shopStore.state.cartRoot?.['key'] }}<br><br>
+
+          shippingaddress: {{shopStore.state.cartRoot?.['shipping_address']}}<br>
+          billingaddress: {{shopStore.state.order?.['billing_address']}}<br><br>
+
+          shipping: {{shopStore.state.cartRoot?.['shipping']}}<br><br>
+          Payment: {{shopStore.state.order?.['payment_provider']}}<br><br>
+
+          Order Status<br>
+          ------<br>
+          canCheckout: {{ shopStore.state.canCheckout }}<br>
+          canOrder: {{ shopStore.state.canOrder }}<br>
+          CheckoutStarted: {{ shopStore.state.order?.['is_checkout_in_progress'] }}<br><br>
+
+          ordered: {{ shopStore.state.order?.['is_ordered'] }}<br>
+          readytoship: {{ shopStore.state.order?.['is_rts'] }}<br>
+          paid: {{ shopStore.state.order?.['is_paid'] }}<br><br>
+
+          OrderObject: {{shopStore.state.order}}
+
+
+      </sl-details>
+    </template>
+    <div id="dialogs"></div>
+</template>
+
+
+<script setup>
+import { onBeforeMount } from 'vue';
+import ShopOrderStepper from './ShopOrderStepper.vue'
+import ShopSummary from "./ShopSummary.vue"
+import {useViurShopStore} from './shop'
+import { useUrlSearchParams } from '@vueuse/core'
+import { useOrder } from './composables/order';
+import { useCart } from './composables/cart';
+
+
+const shopStore = useViurShopStore()
+const {fetchOrder} = useOrder()
+const {fetchCart} = useCart()
+
+const props = defineProps({
+    summary:{
+      default:false
+    }, // bottom, sidebar
+    initTab:{
+      default:'cart'
+    },
+    modulename:{
+      default:'shop'
+    },
+    debug:false,
+    showCartNodes:false
+})
+
+
+onBeforeMount(()=>{
+    shopStore.state.showNodes = props.showCartNodes
+    shopStore.state.debug = props.debug
+    if(props.tabs){
+        shopStore.state.tabs = props.tabs
+    }
+
+    shopStore.state.moduleName= props.modulename
+    fetchCart()
+    shopStore.fetchMetaData()
+    const params = useUrlSearchParams('hash')
+    if (Object.keys(params).includes('order')){
+        shopStore.state.orderKey = params['order']
+        fetchOrder(shopStore.state.orderKey).then(()=>{
+          shopStore.state.orderReady = true
+          // navigate to order state
+          if(shopStore.state.order?.['is_ordered']){
+            shopStore.navigateToTab('complete')
+          } else if (shopStore.state.order?.['is_checkout_in_progress']){
+            shopStore.navigateToTab('confirm')
+          }
+        })
+    }else{
+      shopStore.state.orderReady = true
+    }
+
+
+    if (Object.keys(params).includes('step')){
+        shopStore.navigateToTab(params['step'])
+    }else{
+        shopStore.navigateToTab('cart')
+    }
+
+
+
+
+})
+
+
+
+</script>
+
+<style scoped>
+
+* {
+  box-sizing: border-box;
+}
+
+.viur-shop-wrap {
+  --shop-sidebar-background: var(--sl-color-neutral-100);
+  --shop-sidebar-columns: 4;
+  --shop-main-columns: 8;
+  --shop-tab-color: var(--sl-color-neutral-400);
+  --shop-tab-color-active: var(--ignt-color-primary);
+
+  --shop-form-headline-size: 1.5em;
+  --shop-success-headline-size: var(--shop-form-headline-size);
+
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-rows: 1fr max-content;
+  grid-gap: var(--ignt-spacing-2x-large);
+
+  width: 100%;
+  border: 0 white solid;
+}
+
+@layer foundation.shop {
+  :root{
+    --viur-shop-sidebar-height-offset:0;
+  }
+  .viur-shop-sidebar-wrap {
+    --padding: var(--sl-spacing-large);
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--shop-sidebar-background);
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+    border-radius: var(--sl-border-radius-medium);
+    grid-column: auto / span var(--shop-sidebar-columns);
+    /* height has to be set or sidebar grows until infinity... */
+    height: min-content;
+    @media (min-width: 1024px) {
+      position: sticky;
+      max-height: calc(100vh - var(--viur-shop-sidebar-height-offset) - 2 * var(--padding));
+      top: var(--padding);
+      bottom: var(--padding);
+    }
+  }
+
+  .viur-shop-stepper-wrap {
+    display: flex;
+    flex-direction: column;
+    grid-column: auto / span var(--shop-main-columns);
+
+    @media (max-width: 1024px) {
+      grid-column: auto / span 12;
+    }
+
+    @media (max-width: 600px) {
+      &::part(active-tab-indicator) {
+        display: none;
+      }
+    }
+  }
+
+  .viur-shop-form-footer {
+    height: fit-content;
+
+    /* TODO: sticky Trigger yes no? */
+    /* position: sticky;
+    bottom: 2rem; */
+  }
+
+  :deep(.viur-shop-form-footer) {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--sl-spacing-large);
+  }
+
+  .flex-end {
+    justify-content: flex-end;
+  }
+
+  .bottom {
+    grid-column: auto / span 12;
+    grid-row-start: 2;
+  }
+
+  .full-width {
+    grid-column: auto / span 12;
+  }
+
+  .last-row {
+    grid-row-start: 3;
+  }
+}
+
+
+
+</style>

package/src/ShopOrderStepper.vue

@@ -0,0 +1,114 @@
+<template>
+    <sl-tab-group
+        class="viur-shop-order-tabgroup"
+        noScrollControls
+        ref="stepper"
+    >
+        <template v-for="(tab,name) in shopStore.state.tabs">
+            <StepperTab
+                :tab="name"
+            >
+            </StepperTab>
+
+            <sl-tab-panel :name="name">
+                <template v-if="tab?.['loaded']">
+                  
+                  
+                    <component :is="tab['component']">
+                      <template #['template_'+name]>
+                        <slot :name="'template_'+name"></slot> 
+                      </template>
+                      
+                      <template v-slot="slotProps">
+                        <sl-bar>
+                          <div slot="right">
+                            <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
+                            <sl-button
+                               :class="{'action-button-hint':slotProps.hint}"
+                                variant="primary"
+                                :disabled="active(slotProps)"
+                                @click="nextStep(slotProps)"
+                                :loading="tab['validating']"
+                            >
+                              {{slotProps.nextName}}
+                            </sl-button>
+                          </div>
+                        </sl-bar>
+                      </template>
+                    </component>
+                </template>
+            </sl-tab-panel>
+        </template>
+    </sl-tab-group>
+</template>
+
+<script setup>
+import {reactive, shallowRef, watch, ref, onBeforeMount, onMounted} from 'vue'
+import {useViurShopStore} from './shop'
+import StepperTab from './components/StepperTab.vue'
+import { useTimeoutFn  } from '@vueuse/core'
+
+const shopStore = useViurShopStore()
+const stepper = ref()
+
+
+// Activate Tab if currentTab changes
+watch(()=>shopStore.state.currentTab, (newVal, oldVal)=>{
+    stepper.value.show(shopStore.state.currentTab)
+    shopStore.state.tabs[shopStore.state.currentTab]['loaded'] = true
+})
+
+onMounted(()=>{
+    // wait shoelace component is ready
+    stepper.value.updateComplete.then(() => {
+        shopStore.state.tabs[shopStore.state.currentTab]['loaded'] = true
+        stepper.value.show(shopStore.state.currentTab)
+    })
+})
+
+function nextStep(obj){
+  shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
+  shopStore.state.tabs[shopStore.state.currentTab]['validating']=true
+  //validate step, like send forms or something like this
+  Promise.resolve(obj.nextfunction()).then((resp)=>{
+    if (resp){
+      shopStore.state.tabs[shopStore.state.currentTab]['valid']=true
+      shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
+      useTimeoutFn(() => {
+        shopStore.navigateToNext()
+      }, 300)
+     
+    }else{
+      shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
+      shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
+    }
+  }).catch(error=>{
+    shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
+    shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
+  })
+  console.log("----")
+}
+
+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: var(--ignt-basic-line-height);
+  
+}
+.action-button-hint::part(base){
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+</style>