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

package/src/components/order/category/CategoryView.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="item-list">
-    <router-link
-      v-for="item in state.skellist"
-      :key="item.shop_name"
-      :to="{ name: 'itemView', params: { item: item.key } }"
-    >
-      <ItemCard :item="item"> </ItemCard>
-    </router-link>
-  </div>
-
-  <sl-button
-    @click="loadMore"
-    :loading="state.loading"
-    :disabled="state.isLastItem"
-  >
-    Mehr anzeigen
-  </sl-button>
-</template>
-
-<script setup>
-import { onMounted, reactive, computed } from "vue";
-import { useCartStore } from "../../../stores/cart";
-import { useRoute } from "vue-router";
-import { Request, ListRequest } from "@viur/vue-utils";
-// import { ViURShopClient } from "@viur/viur-shop-client";
-
-// component imports
-import ItemCard from "../item/ItemCard.vue";
-
-const route = useRoute();
-
-const cartStore = useCartStore();
-
-const state = reactive({
-  skellist: [],
-  loading: true,
-  currentCursor: "",
-  isLastItem: false,
-  itemCount: 99,
-  itemType: computed(() => route.params.identifier),
-});
-
-const categoryList = ListRequest("categorystore", {
-  module: "variante",
-  params: { type: state.itemType, limit: state.itemCount },
-});
-
-function listItems() {
-  let params = {
-    limit: state.itemCount,
-    cursor: state.currentCursor,
-    type: state.itemType,
-  };
-
-  state.loading = true;
-
-  Request.get("/json/variante/list", { dataObj: params }).then(async (resp) => {
-    let data = await resp.json();
-
-    if (data.cursor !== state.currentCursor && !state.isLastItem) {
-      state.currentCursor = data.cursor;
-      state.skellist.push(...data.skellist);
-      state.loading = false;
-    } else if (data.cursor === state.currentCursor) {
-      state.isLastItem = true;
-      state.loading = false;
-    }
-
-    console.log("hier", data);
-  });
-}
-
-async function loadMore() {
-  state.loading = true;
-  await categoryList.next();
-
-  if (state.skellist.length < categoryList.state.skellist.length) {
-    state.skellist = categoryList.state.skellist;
-    state.loading = false;
-  } else {
-    state.loading = false;
-    state.isLastItem = true;
-  }
-}
-
-onMounted(async () => {
-  await categoryList.fetch(true);
-  state.skellist = categoryList.state.skellist;
-  state.loading = false;
-
-  // await cartStore.init();
-});
-</script>
-
-<style scoped>
-.item-list {
-  display: grid;
-  width: 100%;
-  grid-gap: var(--sl-spacing-medium);
-  grid-template-columns: repeat(4, 1fr);
-}
-</style>

package/src/components/order/item/ItemCard.vue

@@ -1,182 +0,0 @@
-<template>
-  <sl-card class="card">
-    <img
-            slot="image"
-            :src="getImage(item)"
-            :alt="item.shop_name"
-            class="card-image"
-          />
-          <h3 class="card-headline"> {{ item.shop_name }}</h3>
-          <h4 class="card-subline">B 21 x H 6,5 x T 19 cm</h4>
-          <div class="price">
-            {{ item.shop_price_retail }} €
-          </div>
-        <div class="card-footer" slot="footer">
-          <!-- <sl-button-group label="Amount">
-              <sl-tooltip content="Remove">
-                <sl-icon-button
-                  variant="primary"
-                  name="cart-dash"
-                  label="Remove Amount"
-                  style="font-size: 2em"
-                >
-                </sl-icon-button>
-              </sl-tooltip>
-              <sl-tooltip content="Plus">
-                <sl-icon-button
-                  variant="primary"
-                  name="cart-plus"
-                  label="Add Amount"
-                  style="font-size: 2em"
-                >
-                </sl-icon-button>
-              </sl-tooltip>
-              <sl-tooltip content="Add to cart">
-                <sl-icon-button
-                  variant="primary"
-                  name="cart-check"
-                  label="Add to cart"
-                  style="font-size: 2em"
-                  @click="
-                    cartStore.addToCart(item.key, cartStore.state.currentCart)
-                  "
-                >
-                </sl-icon-button>
-              </sl-tooltip>
-            </sl-button-group> -->
-          <sl-button
-            size="small"
-            class="add-to-cart-btn"
-            variant="primary"
-            title="Add to cart"
-            @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
-          >
-            <sl-icon name="bag-plus"
-                     slot="prefix"
-                     ></sl-icon>
-
-            In den Warenkorb
-          </sl-button>
-
-          <sl-button
-            size="small"
-            outline
-            class="add-to-favourites-btn"
-            variant="primary"
-            title="Add to favourites"
-          >
-            <sl-icon name="heart"
-                     slot="prefix"
-                     ></sl-icon>
-          </sl-button>
-
-
-        </div>
-  </sl-card>
-</template>
-
-<script>
-import {Request} from "@viur/vue-utils";
-
-export default {
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props, context) {
-
-  function getImage(item) {
-    let imageUrl =
-    "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
-    if (item.dk_artikel.dest.image) {
-     return Request.downloadUrlFor(item.dk_artikel.dest.image);
-    }
-
-    return imageUrl;
-  }
-
-	return {
-      props,
-    getImage
-	}
-  }
-}
-</script>
-
-<style scoped>
-.card {
-  width: 100%;
-
-  &::part(header){
-    padding: var(--sl-spacing-medium) 0;
-   }
-
-  &::part(body){
-    padding: var(--sl-spacing-medium) 0;
-   }
-
-  &::part(footer){
-    padding: var(--sl-spacing-medium) 0;
-   }
-
-  &:hover{
-    .add-to-cart-btn{
-      opacity: 1;
-    }
-
-    .card-headline{
-      color: var(--sl-color-primary-500)
-    }
-
-    .card-image{
-      transform: scale(1.02);
-    }
-  }
-}
-
-.card-footer{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-}
-
-.add-to-cart-btn{
-  transition: all ease .3s;
-  margin-right: var(--sl-spacing-medium);
-  opacity: 0;
-}
-
-.add-to-favourites-btn{
-  margin-left: auto;
-}
-
-
-.card-image {
-  aspect-ratio: 1;
-  object-fit: cover;
-  transition: all ease .3s;
-}
-
-.card-headline{
-  font-size: 1.1em;
-  font-weight: bold;
-  color: var(--ignt-basic-color-text);
-  margin-bottom: var(--sl-spacing-2x-small);
-  transition: all ease .3s;
-}
-
-.card-subline{
-  color: var(--ignt-basic-color-text);
-  margin-bottom: var(--sl-spacing-2x-small);
-}
-
-.price{
-  font-size: 1.1em;
-  font-weight: bold;
-  color: var(--ignt-basic-color-text);
-  margin-left: auto;
-}
-</style>

package/src/components/order/item/ItemView.vue

@@ -1,233 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="image-wrap">
-      <sl-carousel class="carousel-thumbnails" navigation loop>
-        <sl-carousel-item>
-          <img
-            :alt="state.item.shop_name"
-            :src="getImage(state.item)"
-          />
-        </sl-carousel-item>
-      </sl-carousel>
-
-      <div class="thumbnails">
-        <div class="thumbnails__scroller">
-          <img :alt="state.item.shop_name"
-               class="thumbnails__image active"
-               :src="getImage(state.item)" />
-        </div>
-      </div>
-    </div>
-
-    <div class="info-wrap">
-      <h1 class="headline">{{ state.item.shop_name }}</h1>
-      <h2 class="subline">B 21 x H 6,5 x T 19 cm</h2>
-
-      <div class="price">
-        {{ state.item.shop_price_retail }} €
-      </div>
-
-      <div class="paragraph">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-      </div>
-
-      <div class="btn-wrap">
-        <sl-button
-            size="small"
-            class="add-to-cart-btn"
-            variant="primary"
-            title="Add to cart"
-            @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
-          >
-            <sl-icon name="bag-plus"
-                     slot="prefix"
-                     ></sl-icon>
-
-            In den Warenkorb
-          </sl-button>
-
-          <sl-button
-            size="small"
-            outline
-            class="add-to-favourites-btn"
-            variant="primary"
-            title="Add to favourites"
-          >
-            <sl-icon name="heart"
-                     slot="prefix"
-                     ></sl-icon>
-            Auf die Wunschliste
-          </sl-button>
-      </div>
-    </div>
-
-  </div>
-  <br>
-  <h1 class="headline">Ähnliche Artikel</h1>
-  <div class="item-grid">
-      <ItemCard :item="state.item">
-      </ItemCard>
-
-  </div>
-
-</template>
-
-<script setup>
-import { computed, onBeforeMount, reactive } from "vue";
-import { Request } from "@viur/vue-utils";
-import { useRoute } from "vue-router";
-// component imports
-import ItemCard from "../item/ItemCard.vue";
-import '@viur/shoelace/dist/components/carousel/carousel.js';
-
-const route = useRoute();
-
-const state = reactive({
-  item: {},
-});
-
-function getImage(item) {
-  console.log("hier", item.dk_artikel);
-  let imageUrl =
-    "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
-  if (item?.dk_artikel.dest.image) {
-    return Request.downloadUrlFor(item.dk_artikel.dest.image);
-  }
-
-  return imageUrl;
-}
-
-onBeforeMount(async () => {
-  Request.get(`/json/variante/view/${route.params.item}`).then(async (resp) => {
-    let data = await resp.json();
-
-    state.item = data.values;
-  });
-});
-</script>
-
-<style scoped>
-  .wrap{
-    display: grid;
-    grid-template-columns: 45% minmax(0 ,1fr);
-  }
-
-  .info-wrap{
-    padding: var(--sl-spacing-x-large);
-  }
-
-  .image-wrap{
-    display: flex;
-    flex-direction: column;
-  }
-
-  sl-carousel{
-    aspect-ratio: 1;
-    background-color: var(--sl-color-neutral-200);
-
-    &::part(base){
-      display: flex;
-      gap: 0;
-     }
-
-     &::part(scroll-container){
-      border-radius: 0;
-      }
-
-    &::part(navigation-button){
-      position: absolute;
-      background-color: color-mix(in hsl, var(--sl-color-neutral-0) 85%, transparent);
-      color: var(--app-primary-color);
-      border-radius: 0;
-      transition: all ease.3s;
-      opacity: 0;
-     }
-
-    &::part(navigation-button--previous){
-      left: 0;
-     }
-
-    &::part(navigation-button--next){
-      right: 0;
-     }
-
-    &:hover{
-      &::part(navigation-button){
-        opacity: 1;
-       }
-     }
-  }
-  .thumbnails {
-    display: flex;
-    justify-content: start;
-    margin-top: vaR(--sl-spacing-medium)
-  }
-
-  .thumbnails__scroller {
-    display: flex;
-    gap: var(--sl-spacing-small);
-    overflow-x: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    scroll-padding: var(--sl-spacing-small);
-  }
-
-  .thumbnails__scroller::-webkit-scrollbar {
-    display: none;
-  }
-
-  .thumbnails__image {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-
-    opacity: 0.3;
-    will-change: opacity;
-    transition: 250ms opacity;
-
-    cursor: pointer;
-  }
-
-  .thumbnails__image.active {
-    opacity: 1;
-  }
-
-  .headline{
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .subline{
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .price{
-    font-size: 1.4em;
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .paragraph{
-    margin-bottom: var(--sl-spacing-x-large);
-  }
-
-  .btn-wrap{
-    display: flex;
-    flex-direction: column;
-
-    sl-button{
-      margin-bottom: var(--sl-spacing-x-small);
-    }
-  }
-
-  .item-grid{
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    grid-gap: var(--sl-spacing-medium);
-  }
-</style>

package/src/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

package/src/index.js

@@ -1,4 +0,0 @@
-//import CategoryList from "./components/order/category/CategoryList.vue";
-import createRouterInstance from "./router";
-
-export {  createRouterInstance };

package/src/main.js

@@ -1,9 +0,0 @@
-import { createPinia } from "pinia";
-import { createApp } from "vue";
-import App from "./App.vue";
-
-const pinia = createPinia();
-const app = createApp(App)
-app.use(pinia)
-
-app.mount("#app");

package/src/router/index.js

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

@@ -1,54 +0,0 @@
-// 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`,
-// });