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

package/src/components/ui/ShopSummary.vue

@@ -0,0 +1,145 @@
+,
+<template>
+  <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+  <br />
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Zwischensumme</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.node?.total"
+    >
+    </sl-format-number>
+    <br />
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Rabatt</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.node?.discount ? state.node.discount : 0"
+    >
+    </sl-format-number>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+    <Shipping ref="shipping">
+      <template #custom v-if="customShippingComponent">
+            <component :is="customShippingComponent"></component>
+          </template>
+    </Shipping>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line total">
+    <span>Gesamt:</span>
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="totalPrice"
+    >
+    </sl-format-number>
+    <!-- TODO: Some project needs "VAT included" here -->
+  </div>
+  <slot name="action-buttons">
+    HIER KANN DEIN BUTTON REIN
+    <div class="viur-shop-cart-sidebar-btn-wrap">
+      <!-- TODO: Placement of discount? -->
+      <div class="viur-shop-discount-wrap" v-if="showDiscount">
+        <Discount></Discount>
+      </div>
+
+      <sl-button variant="primary" size="medium"> Jetzt Bestellen</sl-button>
+      <sl-button size="medium" variant="info">
+        <sl-icon name="paypal" slot="prefix"></sl-icon>
+        Paypal
+      </sl-button>
+    </div>
+    <!-- TODO: Delivery time estimate: slot -->
+  </slot>
+  <slot name="custom"></slot>
+</template>
+
+<script setup>
+import Discount from "../cart/Discount.vue";
+import Shipping from "../order/process/Shipping.vue";
+import { computed, onBeforeMount, reactive, ref } from "vue";
+import { useCartStore } from "../../stores/cart";
+
+const cartStore = useCartStore();
+
+const shipping = ref(null);
+const props = defineProps({
+  showDiscount: {type: Boolean, default: true},
+  customShippingComponent:{type:Object,default:undefined},
+});
+console.log("csc",props.customShippingComponent)
+const state=reactive({
+  node:{}
+})
+
+const totalPrice = computed(() => {
+  if (state.node?.shipping) {
+    return (
+      state.node.total +
+      state.node?.shipping?.dest.shipping_cost -
+      state.node.discount
+    );
+  } else {
+    // use shippingprice formbasket
+    console.log(cartStore.state.basket);
+
+    if (cartStore.state.basket.length === 1) {
+      return (
+        state.node?.total +
+        cartStore.state.basket.shipping?.dest.shipping_cost -
+        state.node.discount
+      );
+    } else {
+      return state.node.total + 0 - state.node.discount; //kein shipping
+    }
+  }
+});
+onBeforeMount(async () => {
+  await cartStore.init();
+  state.node  = cartStore.state.basketRootNode;
+  console.log("get node",state.node)
+})
+</script>
+
+<style>
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+  &.total {
+    font-weight: 600;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
+    padding: var(--sl-spacing-x-small) 0;
+    margin: var(--sl-spacing-small) 0;
+  }
+
+  span {
+    margin-right: auto;
+  }
+}
+
+.viur-shop-cart-sidebar-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--sl-spacing-large);
+
+  sl-button {
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+}
+
+.viur-shop-cart-sidebar-headline {
+  margin: 0 0 var(--sl-spacing-large) 0;
+}
+</style>

package/src/components/ui/generic/ArticleList.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import {
+  FlexRender,
+  createColumnHelper,
+  getCoreRowModel,
+  getExpandedRowModel,
+  useVueTable,
+  type ExpandedState,
+  type Row,
+} from '@tanstack/vue-table'
+import { Text, h, ref } from 'vue'
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+const defaultData: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+const columnHelper = createColumnHelper<Person>()
+function renderExpanded(row: Row<Person>) {
+  if (!row.getCanExpand()) {
+    return h(Text, '🔵')
+  }
+  return h(
+    'button',
+    {
+      onClick: row.getToggleExpandedHandler(),
+      style: { cursor: 'pointer' },
+    },
+    row.getIsExpanded() ? '👇' : '👉'
+  )
+}
+const columns = [
+  columnHelper.group({
+    header: 'Name',
+    footer: props => props.column.id,
+    columns: [
+      columnHelper.display({
+        id: 'expander',
+        header: () => null,
+        cell: ({ row }) => renderExpanded(row),
+      }),
+      columnHelper.accessor('firstName', {
+        footer: props => props.column.id,
+      }),
+      columnHelper.accessor(row => row.lastName, {
+        id: 'lastName',
+        cell: info => info.getValue(),
+        header: () => 'Last Name',
+        footer: props => props.column.id,
+      }),
+    ],
+  }),
+  columnHelper.group({
+    header: 'Info',
+    footer: props => props.column.id,
+    columns: [
+      columnHelper.accessor('age', {
+        header: () => 'Age',
+        footer: props => props.column.id,
+      }),
+      columnHelper.group({
+        header: 'More Info',
+        columns: [
+          columnHelper.accessor('visits', {
+            header: () => 'Visits',
+            footer: props => props.column.id,
+          }),
+          columnHelper.accessor('status', {
+            header: 'Status',
+            footer: props => props.column.id,
+          }),
+          columnHelper.accessor('progress', {
+            header: 'Profile Progress',
+            footer: props => props.column.id,
+          }),
+        ],
+      }),
+    ],
+  }),
+]
+const data = ref(defaultData)
+const expanded = ref<ExpandedState>({})
+const rerender = () => {
+  data.value = defaultData
+}
+const table = useVueTable({
+  get data() {
+    return data.value
+  },
+  state: {
+    get expanded() {
+      return expanded.value
+    },
+  },
+  columns,
+  getRowCanExpand: () => true,
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  onExpandedChange: updaterOrValue => {
+    expanded.value =
+      typeof updaterOrValue === 'function'
+        ? updaterOrValue(expanded.value)
+        : updaterOrValue
+  },
+})
+</script>
+
+<template>
+  <div class="p-2">
+    <table>
+      <thead>
+        <tr
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+        >
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="row in table.getRowModel().rows" :key="row.id">
+          <tr>
+            <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+              <FlexRender
+                :render="cell.column.columnDef.cell"
+                :props="cell.getContext()"
+              />
+            </td>
+          </tr>
+          <tr v-if="row.getIsExpanded()">
+            <td :colspan="row.getAllCells().length">
+              <pre :style="{ fontSize: '10px' }">
+                  <code>{{ JSON.stringify(row.original, null, 2) }}</code>
+                </pre>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+      <tfoot>
+        <tr
+          v-for="footerGroup in table.getFooterGroups()"
+          :key="footerGroup.id"
+        >
+          <th
+            v-for="header in footerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.footer"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+    <div class="h-4" />
+    <button @click="rerender" class="border p-2">Rerender</button>
+  </div>
+</template>
+
+<style>
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+table {
+  border: 1px solid lightgray;
+}
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+tfoot {
+  color: gray;
+}
+tfoot th {
+  font-weight: normal;
+}
+</style>

package/src/components/ui/generic/ExamplePagination.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+// ! JUST FOR DEVELOPMENT WILL BE DELETED AFTER FINISHED
+
+import {
+  FlexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useVueTable,
+  createColumnHelper,
+} from "@tanstack/vue-table";
+import { ref } from "vue";
+import { makeData, Person } from "./makeData";
+
+const INITIAL_PAGE_INDEX = 0;
+
+const defaultData = makeData(100);
+const columnHelper = createColumnHelper<Person>();
+const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1);
+const pageSizes = [10, 20, 30, 40, 50];
+const data = ref(defaultData);
+
+const columns = [
+  columnHelper.group({
+    header: "Name",
+    footer: (props) => props.column.id,
+    columns: [
+      columnHelper.accessor("firstName", {
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
+      }),
+      columnHelper.accessor((row) => row.lastName, {
+        id: "lastName",
+        cell: (info) => info.getValue(),
+        header: () => "Last Name",
+        footer: (props) => props.column.id,
+      }),
+    ],
+  }),
+  columnHelper.group({
+    header: "Info",
+    footer: (props) => props.column.id,
+    columns: [
+      columnHelper.accessor("age", {
+        header: () => "Age",
+        footer: (props) => props.column.id,
+      }),
+      columnHelper.group({
+        header: "More Info",
+        columns: [
+          columnHelper.accessor("visits", {
+            header: () => "Visits",
+            footer: (props) => props.column.id,
+          }),
+          columnHelper.accessor("status", {
+            header: "Status",
+            footer: (props) => props.column.id,
+          }),
+          columnHelper.accessor("progress", {
+            header: "Profile Progress",
+            footer: (props) => props.column.id,
+          }),
+        ],
+      }),
+    ],
+  }),
+];
+
+const table = useVueTable({
+  get data() {
+    return data.value;
+  },
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+});
+
+function rerender() {
+  data.value = defaultData;
+}
+
+function handleGoToPage(e: any) {
+  const page = e.target.value ? Number(e.target.value) - 1 : 0;
+  goToPageNumber.value = page + 1;
+  table.setPageIndex(page);
+}
+
+function handlePageSizeChange(e: any) {
+  table.setPageSize(Number(e.target.value));
+}
+</script>
+
+<template>
+  <div class="p-2">
+    <table>
+      <thead>
+        <tr
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+        >
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in table.getRowModel().rows" :key="row.id">
+          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+            <FlexRender
+              :render="cell.column.columnDef.cell"
+              :props="cell.getContext()"
+            />
+          </td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr
+          v-for="footerGroup in table.getFooterGroups()"
+          :key="footerGroup.id"
+        >
+          <th
+            v-for="header in footerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.footer"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+    <div>
+      <div class="flex items-center gap-2">
+        <button
+          class="border rounded p-1"
+          @click="() => table.setPageIndex(0)"
+          :disabled="!table.getCanPreviousPage()"
+        >
+          «
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.previousPage()"
+          :disabled="!table.getCanPreviousPage()"
+        >
+          ‹
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.nextPage()"
+          :disabled="!table.getCanNextPage()"
+        >
+          ›
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.setPageIndex(table.getPageCount() - 1)"
+          :disabled="!table.getCanNextPage()"
+        >
+          »
+        </button>
+        <span class="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {{ table.getState().pagination.pageIndex + 1 }} of
+            {{ table.getPageCount() }}
+          </strong>
+        </span>
+        <span class="flex items-center gap-1">
+          | Go to page:
+          <input
+            type="number"
+            :value="goToPageNumber"
+            @change="handleGoToPage"
+            class="border p-1 rounded w-16"
+          />
+        </span>
+        <select
+          :value="table.getState().pagination.pageSize"
+          @change="handlePageSizeChange"
+        >
+          <option
+            :key="pageSize"
+            :value="pageSize"
+            v-for="pageSize in pageSizes"
+          >
+            Show {{ pageSize }}
+          </option>
+        </select>
+      </div>
+      <div>{{ table.getRowModel().rows.length }} Rows</div>
+      <pre>{{ JSON.stringify(table.getState().pagination, null, 2) }}</pre>
+    </div>
+    <div class="h-2" />
+    <button @click="rerender" class="border p-2">Rerender</button>
+  </div>
+</template>
+
+<style>
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
+</style>

package/src/components/ui/generic/ShopPriceFormatter.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- TODO: at a very later point -->
+  <div class="price-wrap">
+    <sl-format-number
+      class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="price.retail"
+    >
+    </sl-format-number>
+    <sl-format-number
+      class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="price.recommended"
+    >
+    </sl-format-number>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  price: {
+    type: Object,
+    required: true,
+  },
+});
+
+function priceGetter() {
+
+}
+</script>
+
+<style scoped>
+.price-wrap {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/components/ui/generic/alerts/ShopAlert.vue

@@ -0,0 +1,19 @@
+<template>
+  <sl-alert :variant="variant" open closable duration="3000" @sl-hide="onHide">
+    <sl-icon slot="icon" :name="iconName"></sl-icon>
+    <slot name="alertMsg">ALERT!</slot>
+  </sl-alert>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: "primary" },
+  iconName: { type: String, default: "info-circle" },
+});
+
+const emit = defineEmits(["onHide"]);
+
+function onHide() {
+  emit("onHide");
+}
+</script>

package/src/components/ui/generic/makeData.js

@@ -0,0 +1,39 @@
+// ! JUST FOR DEVELOPMENT WILL BE DELETED AFTER FINISHED
+import { faker } from '@faker-js/faker'
+
+const range = (len) => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle([
+      'relationship',
+      'complicated',
+      'single',
+    ]),
+  }
+}
+
+export function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(() => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}