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

package/src/components/order/process/SelectPaymentProvider.vue

@@ -1,62 +0,0 @@
-<template>
-
-  <div v-for="(providerData,providerName,i) in cartStore.state.paymentProviders">
-    <sl-card selectable :id="'povider__'+providerName" @sl-change="providerChanged" :selected="i===0">
-      <img
-        slot="image"
-        src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-        alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-      />
-      <div slot="footer">
-        {{ providerData?.title }}
-        <br>
-        {{ providerData?.descr }}
-      </div>
-    </sl-card>
-  </div>
-
-</template>
-
-<script setup>
-//todo styling
-// set image
-
-import {onBeforeMount, reactive} from "vue";
-import {useCartStore} from "../../../stores/cart";
-
-const cartStore = useCartStore();
-
-function providerChanged(e) {
-  if (e.target.selected) {
-    console.log( "a",cartStore.state.selectedPaymentProvider)
-    console.log( "b",cartStore.state.paymentProviders)
-
-
-    cartStore.state.selectedPaymentProviderName = e.target.id.replace("povider__", "")
-    cartStore.state.selectedPaymentProvider = cartStore.state.paymentProviders[e.target.id.replace("povider__", "")]
-    console.log(cartStore.state.selectedPaymentProvider)
-    document.querySelectorAll("sl-card").forEach((card) => {
-
-      if (card !== e.target) {
-        card.selected = false;
-      }
-    })
-
-  } else {//can't deselect now
-    e.target.selected = true;
-
-  }
-  console.log("provider changed", e)
-}
-
-onBeforeMount(async () => {
-  await cartStore.getPaymentProviders();
-})
-</script>
-
-<style scoped>
-/*todo select styling for sl-card*/
-sl-card[selected]::part(base) {
-  border: 5px solid #39b200;
-}
-</style>

package/src/components/order/process/Shipping.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="viur-shop-cart-sidebar-info-line">
-
-    <span>Versandkosten </span>
-    <sl-format-number
-      type="currency"
-      currency="EUR"
-      :value="shippingCost"
-      lang="de">
-    </sl-format-number>
-
-  </div>
-  <div class="viur-shop-cart-sidebar-info-line">
-  <slot name="custom"></slot>
-  </div>
-
-</template>
-<script setup>
-import {useCartStore} from "../../../stores/cart";
-import {onBeforeMount, reactive,computed} from "vue";
-
-const cartStore = useCartStore();
-const shippingCost = computed(() => {
-  return cartStore.state.basketRootNode?.shipping?.dest.shipping_cost ? cartStore.state.basketRootNode?.shipping.dest.shipping_cost : 0
-})
-onBeforeMount(async () => {
-  await cartStore.init();
-  console.log("has shipping ? ",cartStore.state.basketRootNode.shipping);
-});
-
-</script>
-
-<style scoped>
-.viur-shop-cart-sidebar-info-line {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: var(--sl-spacing-2x-small) 0;
-
-
-
-  span {
-    margin-right: auto;
-  }
-}
-</style>

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

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

@@ -1,236 +0,0 @@
-<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/alerts/ShopAlert.vue

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

@@ -1,39 +0,0 @@
-// ! 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()
-}

package/src/components/ui/stepper/StepperItem.vue

@@ -1,39 +0,0 @@
-<template>
-  <sl-tab-panel class="viur-shop-order-tab-panel" :name="tab">
-    <component
-      :is="tabs[tab].component"
-      v-bind="tabs[tab].props ? tabs[tab].props : ''"
-      @goToStart="goToStart()"
-      @editAddress="goToUserData"
-    >
-    </component>
-  </sl-tab-panel>
-</template>
-
-<script setup>
-const props = defineProps({
-  tab: {
-    type: String,
-    required: true,
-  },
-  tabs: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["goToStart", "editAddress"]);
-
-function goToStart() {
-  emit("goToStart");
-}
-
-function goToUserData(e) {
-  emit("editAddress", e);
-}
-</script>
-
-<style scoped>
-.viur-shop-order-tab-panel {
-}
-</style>

package/src/components/ui/stepper/StepperTrigger.vue

@@ -1,35 +0,0 @@
-<template>
-  <sl-button type="submit" v-show="index !== 0" @click="prevTab()">
-    Zurück
-    <!-- TODO: $t(i18n referenz) -->
-  </sl-button>
-
-  <sl-button type="submit" variant="primary" @click="nextTab()">
-    Weiter
-    <!-- TODO: $t(i18n referenz) -->
-  </sl-button>
-</template>
-
-<script setup>
-const props = defineProps({
-  index: {
-    type: Number,
-    required: true,
-  },
-});
-const emit = defineEmits({prevTab: null, nextTab: null});
-
-function prevTab() {
-  emit("prevTab");
-}
-
-function nextTab() {
-  emit("nextTab");
-}
-</script>
-
-<style scoped>
-.sticky {
-  position: sticky;
-}
-</style>