@viur/shop-components 0.0.1-dev.3 → 0.0.1-dev.30

package/package.json

@@ -1,25 +1,7 @@
 {
   "name": "@viur/shop-components",
-  "type": "module",
-  "version": "0.0.1-dev.3",
+  "version": "0.0.1-dev.30",
   "description": "Frontend Vue components for the shop module of ViUR",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/shop-components.umd.cjs",
-  "module": "./dist/shop-components.js",
-  "exports": {
-    ".": {
-      "import": "./dist/shop-components.js",
-      "require": "./dist/shop-components.umd.cjs"
-    },
-    "./dist/style.css": "./dist/style.css"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "serve": "vite preview"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/viur-framework/shop-components.git"
@@ -36,27 +18,16 @@
   },
   "homepage": "https://github.com/viur-framework/shop-components#readme",
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "postcss-custom-media": "^10.0.4",
-    "postcss-nesting": "^12.1.2",
-    "prettier": "^3.2.5",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "vite": "^5.2.10",
-    "vue-router": "^4.3.2",
-    "vue-tsc": "^2.0.14"
+    "postcss-custom-media": "^10.0.0",
+    "postcss-nesting": "^12.0.0",
+    "prettier": "^3.2.5"
   },
   "dependencies": {
+    "@viur/ignite": "^5.0.2",
     "@viur/shoelace": "^1.0.6-v2.15.0",
-    "@viur/vue-utils": "^1.4.4",
-    "vue-i18n": "^9.13.1",
+    "@viur/vue-utils": "^1.4.5",
     "pinia": "^2.1.7",
-    "@viur/ignite": "^5.0.2",
-    "@viur/viur-shop-client": "^0.1.0-dev.8",
-    "ckeditor5-vue": "^0.0.7",
-    "vue": "^3.4.00"
-  },
-  "peerDependencies": {
-    "vue": "^3.4.00"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
   }
 }

package/src/components/cart/CartLeaf.vue

@@ -0,0 +1,195 @@
+<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

@@ -0,0 +1,13 @@
+<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>