@viur/shop-components 0.0.1-dev.6 → 0.0.1-dev.60

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,12 +1,7 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.0.1-dev.6",
+  "version": "0.0.1-dev.60",
   "description": "Frontend Vue components for the shop module of ViUR",
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "serve": "vite preview"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/viur-framework/shop-components.git"
@@ -22,24 +17,31 @@
     "url": "https://github.com/viur-framework/shop-components/issues"
   },
   "homepage": "https://github.com/viur-framework/shop-components#readme",
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.3",
-    "postcss-custom-media": "^10.0.0",
-    "postcss-nesting": "^12.0.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "typescript": "^5.1.6",
-    "vite": "^5.2.8",
-    "prettier": "^3.2.5",
-    "vue-tsc": "^2.0.17"
+  "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-i18n": "^9.13.1",
-    "vue-router": "^4.3.2"
+    "@tanstack/vue-table": "^8.20.5",
+    "@viur/ignite": "^5.1.2",
+    "@viur/shoelace": "^1.0.8-v2.17.1",
+    "@viur/viur-shop-client": "^0.3.0",
+    "@viur/vue-components": "^1.7.12",
+    "@viur/vue-utils": "^1.7.18",
+    "@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/components/ShopCart.vue

@@ -0,0 +1,512 @@
+<template>
+  <sl-spinner v-if="state.loading"></sl-spinner>
+  <CartTree v-model="state.data" v-else></CartTree>
+</template>
+
+<script setup>
+import {
+  reactive,
+  computed,
+  onBeforeMount,
+  ref,
+  watch,
+  watchEffect,
+} from "vue";
+import { useCartStore } from "../stores/cart.js";
+import CartTree from "./cart/CartTree.vue";
+
+const props = defineProps({
+  mode: { type: String, default: "basket" },
+  cartKey: { type: String },
+  sidebar: { type: Boolean, default: true },
+  inOrderView: { type: Boolean, default: false },
+  inOrderConfirm: { type: Boolean, default: false },
+});
+
+const cartStore = useCartStore();
+
+const confirm = ref(null);
+const shipping = ref(null);
+
+const state = reactive({
+  itemsIsInit: computed(() => {
+    return true;
+  }),
+  totalPrice: computed(() => {
+    if (shipping.value) {
+      return (
+        cartStore.state.basketRootNode.total_discount_price +
+        shipping.value.getShippingCost()
+      );
+    }
+    return 0;
+  }),
+  currentItem: {},
+  currentNode: {},
+  data: [],
+  loading: true,
+});
+
+const currentCartKey = computed(() => {
+  return props.mode === "basket"
+    ? cartStore.state.basketRootNode.key
+    : props.cartKey;
+});
+
+async function onConfirm() {
+  confirm.value.hide();
+
+  await cartStore.updateItem(
+    state.currentItem.article.dest.key,
+    state.currentNode.key,
+    0,
+  );
+  await updateCart();
+}
+
+async function updateItem(e) {
+  if (e.quantity === 0) {
+    confirm.value.show();
+    state.currentItem = e.item;
+    state.currentNode = e.node;
+  } else {
+    await cartStore.updateItem(e.articleKey, e.node.key, e.quantity);
+
+    await cartStore.init();
+  }
+
+}
+
+function removeItem(e) {
+  confirm.value.show();
+  state.currentItem = e.item;
+  state.currentNode = e.node;
+}
+
+async function onDialogHide() {
+  // TODO: console error when removing items
+  state.leaves[state.currentNode.key].forEach((item) => {
+    if (item.key === state.currentItem.key) {
+      item.quantity = 1;
+    }
+  });
+
+  state.currentItem = {};
+  state.currentNode = {};
+}
+
+async function updateCart() {
+  state.nodes = [];
+  state.leaves = {};
+
+  await cartStore.init();
+  await getChildren();
+}
+
+async function getChildren(parentKey = currentCartKey.value) {
+  const children = await cartStore.getChildren(parentKey);
+
+  children.forEach(async (child) => {
+    if (child.skel_type === "node") {
+      state.data.push(child);
+      await getChildren(child.key);
+    } else {
+      state.data.push(child);
+    }
+  });
+}
+
+// function buildTree() {
+//   let tempArray = state.nodes;
+
+//   state.nodes.forEach((node) => {
+//     tempArray.push(...state.leaves[node.key]);
+//   });
+
+//   const arrayToTree = (arr, parent = null) =>
+//     arr
+//       .filter((item) => item.parententry === parent)
+//       .map((child) => ({ ...child, children: arrayToTree(arr, child.key) }));
+
+//   let result = arrayToTree(tempArray);
+//   return result[0];
+// }
+
+watch(
+  () => state.data,
+  (oldVal, newVal) => {
+    console.log("oldVal", oldVal);
+    if (oldVal.length === newVal.length) {
+      state.loading = false;
+    }
+  },
+  { deep: true },
+);
+
+onBeforeMount(async () => {
+  await cartStore.init();
+  await getChildren();
+
+  if (props.mode === "basket") {
+    state.data.push(cartStore.state.basketRootNode);
+  }
+});
+</script>
+
+<style scoped>
+.viur-shop-cart-wrap {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+sl-alert {
+  margin-top: var(--sl-spacing-medium);
+  margin-bottom: var(--sl-spacing-medium);
+}
+
+.viur-shop-cart-controlbar {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  sl-input {
+    flex: 1;
+
+    &::part(base) {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.viur-shop-cart-button-list {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  &.left {
+    flex: 1;
+    margin-right: 10px;
+  }
+}
+
+.search {
+  flex: 1 1 100%;
+  margin-left: 10px;
+}
+
+.article-combobox {
+  float: left;
+  width: 75ch;
+}
+
+.viur-shop-cart-card-img {
+  aspect-ratio: 1;
+}
+
+.viur-shop-cart-selection {
+  flex: 1;
+}
+
+.viur-shop-cart-node {
+  display: flex;
+  flex-direction: column;
+}
+
+.cart-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.soma-input {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+}
+
+.soma-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  sl-icon {
+    margin-left: 5px;
+    background-color: @highlightColor;
+    color: #fff;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    padding: 0.3em;
+    font-size: 0.6em;
+    cursor: pointer;
+  }
+}
+
+sl-tooltip {
+  &::part(body) {
+    line-height: 1.2;
+    font-weight: 400;
+    padding: 10px;
+  }
+}
+
+.cart-tab {
+  sl-tab {
+    width: 25%;
+
+    &::part(base) {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      color: var(--sl-color-neutral-400);
+    }
+
+    &[aria-selected="true"]::part(base) {
+      color: var(--ignt-color-primary) !important;
+    }
+  }
+}
+
+.cart-status-text {
+  font-size: 0.8em;
+  color: inherit;
+  text-align: center;
+  margin-top: 0.6em;
+  white-space: initial;
+}
+
+.search-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  margin-bottom: 30px;
+
+  sl-button {
+    &::part(base) {
+      height: 100%;
+    }
+  }
+
+  @media (--ignt-mq-max-break-medium) {
+    flex-wrap: wrap;
+  }
+}
+
+.article-combobox {
+  flex: 1 1 100%;
+  margin-bottom: 10px;
+
+  &::part(base) {
+    margin-bottom: 0;
+  }
+
+  @media (--ignt-mq-max-break-medium) {
+    margin-bottom: 0;
+  }
+}
+
+.comission-box {
+  margin-right: 10px;
+
+  &::part(base) {
+    margin-bottom: 0;
+  }
+
+  @media (--ignt-mq-max-break-medium) {
+    flex: 1;
+  }
+}
+
+.search-amt {
+  margin-right: 10px;
+
+  &::part(base) {
+    margin-bottom: 0;
+    width: 80px;
+  }
+}
+
+.viur-shop-cart-headline {
+  &::part(base) {
+    background-color: transparent;
+    transition: all ease 0.3s;
+    border-bottom: 1px solid transparent;
+    height: auto;
+  }
+
+  :deep(.input--focused) {
+    border-bottom: 1px solid var(--sl-color-primary-500) !important;
+  }
+
+  &::part(input) {
+    color: var(--sl-color-primary-500);
+    font-weight: 300;
+    text-transform: uppercase;
+    font-size: 1.85em;
+    padding: 0.1em 0;
+    height: auto;
+  }
+
+  &::part(suffix) {
+    pointer-events: none;
+    width: 1.5em;
+    margin-left: -1em;
+    font-size: 1.5em;
+  }
+
+  &:hover {
+    &::part(base) {
+      border-bottom: 1px solid var(--sl-color-primary-500);
+    }
+  }
+}
+
+.viur-shop-cart-descr {
+  margin-top: 10px;
+
+  &::part(base) {
+    background-color: transparent;
+    transition: all ease 0.3s;
+    border-bottom: 1px solid transparent;
+    margin-bottom: 0;
+  }
+
+  &::part(input) {
+    padding: 0.1em 0;
+    height: auto;
+    color: var(--ignt-color-text);
+  }
+
+  &::part(suffix) {
+    pointer-events: none;
+    width: 1.5em;
+    margin-left: -1em;
+    font-size: 1.5em;
+  }
+
+  &:hover {
+    &::part(base) {
+      border-bottom: 1px solid var(--ignt-color-text);
+    }
+  }
+}
+
+sl-menu-item {
+  &::part(base) {
+    padding: 0.2em 0.9em 0.2em 0.8em;
+  }
+
+  &::part(checked-icon) {
+    display: none;
+  }
+
+  &::part(prefix) {
+    margin-right: 10px;
+  }
+
+  &::part(suffix) {
+    margin-right: -1.5em;
+  }
+}
+
+.primary-icon {
+  color: var(--ignt-color-primary);
+}
+
+.delete-icon {
+  color: @warnColor;
+}
+
+.dots {
+  color: var(--ignt-color-primary);
+  width: 1.5em;
+  height: 100%;
+  font-size: 1em;
+  padding: 0.4em;
+}
+
+.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;
+}
+
+.viur-shop-cart-mobile-footer {
+  display: none;
+}
+</style>