@teamnovu/kit-shopware-composables 0.0.1

package/src/usePagination.ts

@@ -0,0 +1,72 @@
+import type { Schemas } from '#store-types'
+import type { MaybeRef } from 'vue'
+import { computed, reactive, toRef, unref, watch } from 'vue'
+
+interface PaginationOptions {
+  page?: MaybeRef<number>
+  total?: MaybeRef<number>
+  limit?: MaybeRef<number>
+}
+
+export function usePagination(opts?: PaginationOptions) {
+  const { total, limit, page } = opts ?? {}
+
+  const state = reactive({
+    page: page ?? 1,
+    total: total ?? 0,
+    limit: limit,
+  })
+
+  const pageCount = computed(() => {
+    if (state.limit === undefined) return 1
+    return Math.max(1, Math.ceil(state.total / state.limit))
+  })
+
+  const privatePage = computed<number, number>({
+    get() {
+      return state.page
+    },
+    set(value) {
+      // Clamp the value between 1 and totalPages
+      state.page = Math.max(1, Math.min(unref(pageCount), value))
+    },
+  })
+
+  watch(
+    [() => unref(pageCount), () => state],
+    ([newPageCount, newState]) => {
+      // Reset the page to the last available page when the total pages change
+      state.page = Math.min(newPageCount, state.page)
+      state.total = newState.total ?? 0
+      state.limit = newState.limit
+    },
+  )
+
+  const isLastPage = computed(() => state.page === unref(pageCount))
+  const isFirstPage = computed(() => state.page === 1)
+
+  const queryOptions = computed(() => ({
+    p: state.page,
+    limit: state.limit,
+  }))
+
+  const usePaginationSync = (data: MaybeRef<Schemas['EntitySearchResult']>) => {
+    watch(() => unref(data), (newData) => {
+      state.total = newData?.total ?? 0
+      state.limit = newData?.limit ?? 0
+    })
+  }
+
+  return {
+    page: unref(privatePage),
+    total: toRef(state, 'total'),
+    limit: toRef(state, 'limit'),
+    pageCount,
+    isLastPage,
+    isFirstPage,
+    usePaginationSync,
+
+    // This can be used to pass the pagination options directly to the query options
+    queryOptions,
+  }
+}

package/src/util/url.ts

@@ -0,0 +1,8 @@
+export const relativizeSeoUrl = (seoUrl: string) => {
+  const url = seoUrl.replace(/\/?$/, '')
+  return url.startsWith('/') ? url.slice(1) : url
+}
+
+export const absolutizeSeoUrl = (seoUrl: string) => {
+  return `/${relativizeSeoUrl(seoUrl)}`
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "vue",
+      "vite/client",
+      "vitest/globals"
+    ],
+    "paths": {
+      "#store-types": [
+        "./api-types/storeApiTypes.d.ts"
+      ]
+    },
+    "typeRoots": [
+      "./node_modules"
+    ],
+  },
+  "include": [
+    "src/**/*",
+    "../components/src/injects"
+  ]
+}

package/vite.config.js

@@ -0,0 +1,39 @@
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import pkg from './package.json'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      staticImport: true,
+    }),
+  ],
+  build: {
+    emptyOutDir: false,
+    lib: {
+      formats: ['es'],
+      // Could also be a dictionary or array of multiple entry points
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+      },
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: [
+        ...Object.keys(pkg.dependencies ?? {}),
+        ...Object.keys(pkg.peerDependencies ?? {}),
+      ],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+})

package/vitest.config.js

@@ -0,0 +1,10 @@
+import { loadEnv } from 'vite'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig(({ mode }) => ({
+  test: {
+    include: ['**/*.test.ts'],
+    globals: true,
+    env: loadEnv(mode, __dirname, ''),
+  },
+}))