@viur/shop-components 0.0.1-dev.2

package/src/router/index.js

@@ -0,0 +1,93 @@
+// @ts-nocheck
+import { createRouter, createWebHashHistory } from "vue-router";
+import ViewMissing from "../views/ViewMissing.vue";
+
+const default_routes = [
+  {
+    path: "/:pathMatch(.*)*",
+    name: "view_missing",
+    component: ViewMissing,
+  },
+  {
+    path: "/shop/category/:identifier",
+    name: "CategoryView",
+    component: () => import("../components/order/category/CategoryView.vue"),
+  },
+  {
+    path: "/shop/item/:item",
+    name: "itemView",
+    component: () => import("../components/order/item/ItemView.vue"),
+  },
+  {
+    path: "/shop/basket/",
+    name: "BasketView",
+    component: () => import("../components/cart/BasketView.vue"),
+  },
+];
+
+function createRouterInstance(routes, replace = false) {
+  let newRoutes = [];
+  if (replace) {
+    newRoutes = routes;
+  } else {
+    newRoutes = routes.concat(default_routes);
+  }
+
+  const router = createRouter({
+    // @ts-ignore
+    history: createWebHashHistory(import.meta.env.BASE_URL),
+    routes: newRoutes,
+  });
+
+  // router.afterEach((to, from) => {
+  //   //useUserStore().addAction();
+  // });
+
+  // router.beforeEach((to, from, next) => {
+  //   const contextStore = useContextStore();
+  //   let localContext = {};
+  //   let handlerId = to.query["_"]?.toString();
+  //   if (!handlerId) next();
+  //   if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
+  //     localContext = contextStore.state.localContext[handlerId];
+  //   }
+  //   let newQuery = {
+  //     ...contextStore.state.globalContext,
+  //     ...localContext,
+  //     ...to.query,
+  //   };
+  //   if (
+  //     Object.keys(to.query).every(
+  //       (key) =>
+  //         to.query[key] === newQuery[key] &&
+  //         to.query.hasOwnProperty(key) &&
+  //         newQuery.hasOwnProperty(key),
+  //     ) &&
+  //     Object.keys(newQuery).every(
+  //       (key) =>
+  //         to.query[key] === newQuery[key] &&
+  //         to.query.hasOwnProperty(key) &&
+  //         newQuery.hasOwnProperty(key),
+  //     )
+  //   ) {
+  //     //disabled because of to much context copy and updates
+  //     // Writes query to context
+  //     /*
+  //     for (const [k, v] of Object.entries(to.query)) {
+  //       if (k.startsWith("_")) continue
+  //       if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
+  //         contextStore.state.localContext[handlerId][k] = v
+  //       } else {
+  //         contextStore.state.localContext[handlerId] = { [k]: v }
+  //       }
+  //     }*/
+  //     next(); // no change
+  //   } else {
+  //     to.query = newQuery;
+  //     next(to);
+  //   }
+  // });
+  return router;
+}
+
+export default createRouterInstance;

package/src/shoelaceConfig.js

@@ -0,0 +1,54 @@
+// import "@viur/shoelace/dist/themes/viur.css"
+import "@viur/shoelace/dist/components/button/button.js";
+import "@viur/shoelace/dist/components/button-group/button-group.js";
+import "@viur/shoelace/dist/components/icon/icon.js";
+import "@viur/shoelace/dist/components/input/input.js";
+import "@viur/shoelace/dist/components/dropdown/dropdown.js";
+import "@viur/shoelace/dist/components/menu/menu.js";
+import "@viur/shoelace/dist/components/menu-item/menu-item.js";
+import "@viur/shoelace/dist/components/badge/badge.js";
+import "@viur/shoelace/dist/components/divider/divider.js";
+import "@viur/shoelace/dist/components/avatar/avatar.js";
+import "@viur/shoelace/dist/components/dialog/dialog.js";
+import "@viur/shoelace/dist/components/tooltip/tooltip.js";
+import "@viur/shoelace/dist/components/split-panel/split-panel.js";
+import "@viur/shoelace/dist/components/radio-group/radio-group.js";
+import "@viur/shoelace/dist/components/radio-button/radio-button.js";
+import "@viur/shoelace/dist/components/select/select.js";
+import "@viur/shoelace/dist/components/option/option.js";
+import "@viur/shoelace/dist/components/spinner/spinner.js";
+import "@viur/shoelace/dist/components/switch/switch.js";
+import "@viur/shoelace/dist/components/card/card.js";
+import "@viur/shoelace/dist/components/tag/tag.js";
+import "@viur/shoelace/dist/components/tooltip/tooltip.js";
+import "@viur/shoelace/dist/components/checkbox/checkbox.js";
+import "@viur/shoelace/dist/components/table-wrapper/table-wrapper.js";
+import "@viur/shoelace/dist/components/drawer/drawer.js";
+import "@viur/shoelace/dist/components/alert/alert.js";
+import "@viur/shoelace/dist/components/icon-button/icon-button.js";
+import "@viur/shoelace/dist/components/tree/tree.js";
+import "@viur/shoelace/dist/components/tree-item/tree-item.js";
+import "@viur/shoelace/dist/components/breadcrumb/breadcrumb.js";
+import "@viur/shoelace/dist/components/breadcrumb-item/breadcrumb-item.js";
+import "@viur/shoelace/dist/components/format-date/format-date.js";
+import "@viur/shoelace/dist/components/format-bytes/format-bytes.js";
+import "@viur/shoelace/dist/components/tab-group/tab-group.js";
+import "@viur/shoelace/dist/components/tab/tab.js";
+import "@viur/shoelace/dist/components/tab-panel/tab-panel.js";
+import "@viur/shoelace/dist/components/combobox/combobox.js";
+
+import { setBasePath } from "@viur/shoelace/dist/utilities/base-path.js";
+import { registerIconLibrary } from "@viur/shoelace/dist/utilities/icon-library.js";
+
+if (import.meta.env.DEV) {
+    setBasePath(`/static/dashboard/shoelace`);
+} else {
+    setBasePath(`shoelace`);
+}
+
+
+// Register a custom icons repository for this app
+
+// registerIconLibrary("logo", {
+//     resolver: (name) => `/static/app-logos/${name}.svg`,
+// });

package/src/stores/cart.js

@@ -0,0 +1,98 @@
+import { reactive } from "vue";
+import { Request } from "@viur/vue-utils";
+import { defineStore } from "pinia";
+import { ViURShopClient } from "@viur/viur-shop-client";
+
+export const useCartStore = defineStore("cartstore", () => {
+  const state = reactive({
+    currentCart: "",
+    allCarts: {},
+    cartItems: {},
+    basketArticle: [],
+  });
+
+  function init() {
+    listCarts().then(async (resp) => {
+      let data = await resp.json();
+      getBasket(data);
+      data.forEach((cart) => {
+        state.allCarts[cart.key] = cart;
+        getCartItems(cart.key).then(async (resp) => {
+          let data = await resp.json();
+          state.cartItems[cart.key] = data;
+        });
+      });
+    });
+
+    console.log("hier", state.currentCart);
+
+    getBasketItems(state.currentCart).then(async (resp) => {
+      let data = await resp.json();
+      console.log("cartStore basket article", data);
+      state.basketArticle = data;
+    });
+
+    // state.allCarts.forEach((cart) => {
+    //   getCartItems(cart.key).then(async (resp) => {
+    //     let data = await resp.json();
+    //     state.cartItems[cartKey] = data;
+    //   });
+    // });
+  }
+
+  function listCarts() {
+    return Request.get("/shop/api/cart_list");
+    // const sc = new ViURShopClient();
+
+    // sc.cart_list().then(async (resp) => console.log("test", await resp.json));
+  }
+
+  function getBasket(skellist) {
+    skellist.forEach((cart) => {
+      if ((cart.cart_type = "basket")) {
+        state.currentCart = cart.key;
+      }
+    });
+  }
+
+  function getBasketItems(cartKey) {
+    return Request.get(`/shop/api/cart_list`, {
+      dataObj: { cart_key: cartKey },
+    });
+  }
+
+  function getCartItems(cartKey) {
+    return Request.get(`/shop/api/cart_list`, {
+      dataObj: { cart_key: cartKey },
+    });
+  }
+
+  function addToCart(articleKey, cartKey) {
+    // let skey = "";
+    // Request.get("/vi/skey?amount=1").then(async (resp) => {
+    //   let data = await resp.json();
+    //   console.log("skey", data);
+    //   skey = data;
+    // });
+    Request.securePost("/shop/api/article_add", {
+      dataObj: {
+        article_key: articleKey,
+        parent_cart_key: cartKey,
+        quantity: 1,
+        quantity_mode: "increase",
+        // skey: skey,
+      },
+    }).then(async (resp) => {
+      let data = await resp.json();
+      console.log("article add", data);
+    });
+  }
+
+  return {
+    state,
+    listCarts,
+    addToCart,
+    getBasketItems,
+    init,
+  };
+});

package/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/views/ViewMissing.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="home">View {{ route.path }} is missing.</div>
+</template>
+
+<script>
+import { defineComponent, reactive } from "vue"
+import { useRoute } from "vue-router"
+
+export default defineComponent({
+  props: {},
+  components: {},
+  setup(props, context) {
+    const route = useRoute()
+    const state = reactive({})
+    return { state, route }
+  }
+})
+</script>
+
+<style scoped></style>

package/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from "node:path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.js"),
+      name: "ShopComponents",
+      fileName: "shop-components",
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+});