@blueprint-ts/core 1.0.0

package/examples/js/view/pagination/components/infiniteScrolling/GetProductsRequest.ts

@@ -0,0 +1,50 @@
+import {BaseRequest, type Paginatable, JsonResponse } from '@hank-it/ui/service/requests'
+import type {PaginationResponseContract} from '@hank-it/ui/service/pagination'
+
+export interface ProductResource {
+    id: number
+    title: string
+    description: string
+}
+
+export interface ProductPaginationResource {
+    products: ProductResource[]
+    total: number
+    limit: number
+    skip: number
+}
+
+export class GetProductsRequestResponse extends JsonResponse implements PaginationResponseContract {
+    public getData() {
+        return this.data
+    }
+
+    public getTotal(): number {
+        return this.body.total
+    }
+
+    public dataHandler(data) {
+        return data.products
+    }
+}
+
+export class GetProductsRequest extends BaseRequest implements Paginatable {
+    method() {
+        return 'GET'
+    }
+
+    url() {
+        return 'https://dummyjson.com/products'
+    }
+
+    public setPaginationParams(page: number, size: number): BaseRequest {
+        return this.withParams({
+            skip: (page - 1) * size,
+            limit: size,
+        })
+    }
+
+    protected getResponse() {
+        return new GetProductsRequestResponse
+    }
+}

package/examples/js/view/pagination/components/infiniteScrolling/InfiniteScrolling.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="container" @scroll="scroll">
+        <div class="item" v-for="row in paginator.getPageData()">
+            {{ row }}
+            <br>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {GetProductsRequest} from "./GetProductsRequest";
+import {InfiniteScroller, RequestDriver, VuePaginationDriverFactory, Paginator} from '@hank-it/ui/service/pagination'
+import {VueLoaderDriverFactory, BaseRequest, FetchDriver} from '@hank-it/ui/service/requests'
+import {isAtBottom} from '@hank-it/ui/service/helpers'
+import { debounce } from 'lodash'
+
+function scroll(event) {
+    console.log("scroll")
+
+    if (isAtBottom(event.target.scrollHeight, event.target.scrollTop, event.target.clientHeight)) {
+        loadNextDebounced()
+    }
+}
+
+const loadNextDebounced = debounce(event => {
+    paginator.toNextPage()
+}, 100)
+
+/* Booting */
+BaseRequest.setRequestDriver(new FetchDriver)
+BaseRequest.setLoaderStateFactory(new VueLoaderDriverFactory)
+Paginator.setViewDriverFactory(new VuePaginationDriverFactory())
+
+/* component */
+const getProductsRequest = new GetProductsRequest
+
+const paginator = new InfiniteScroller(new RequestDriver(getProductsRequest))
+
+paginator.init(1, 10)
+
+</script>
+
+<style scoped>
+.container {
+    overflow: auto;
+    border-style: solid;
+    border-color: red;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+}
+
+.item {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+</style>

package/examples/js/view/pagination/components/tablePagination/GetProductsRequest.ts

@@ -0,0 +1,50 @@
+import {BaseRequest, type Paginatable, JsonResponse } from '@hank-it/ui/service/requests'
+import type {PaginationResponseContract} from '@hank-it/ui/service/pagination'
+
+export interface ProductResource {
+    id: number
+    title: string
+    description: string
+}
+
+export interface ProductPaginationResource {
+    products: ProductResource[]
+    total: number
+    limit: number
+    skip: number
+}
+
+export class GetProductsRequestResponse extends JsonResponse implements PaginationResponseContract {
+    public getData() {
+        return this.data
+    }
+
+    public getTotal(): number {
+        return this.body.total
+    }
+
+    public dataHandler(data) {
+        return data.products
+    }
+}
+
+export class GetProductsRequest extends BaseRequest implements Paginatable {
+    method() {
+        return 'GET'
+    }
+
+    url() {
+        return 'https://dummyjson.com/products'
+    }
+
+    public setPaginationParams(page: number, size: number): BaseRequest {
+        return this.withParams({
+            skip: (page - 1) * size,
+            limit: size,
+        })
+    }
+
+    protected getResponse() {
+        return new GetProductsRequestResponse
+    }
+}

package/examples/js/view/pagination/components/tablePagination/TablePagination.vue

@@ -0,0 +1,63 @@
+<template>
+    <table>
+        <tr>
+            <th>ID</th>
+            <th>Title</th>
+            <th>Description</th>
+        </tr>
+        <tr v-for="row in paginator.getPageData()">
+            <td>{{ row.id }}</td>
+            <td>{{ row.title }}</td>
+            <td>{{ row.description }}</td>
+        </tr>
+    </table>
+
+    Current page: {{ paginator.getCurrentPage() }}
+    <br>
+    Pages: {{ paginator.getPages() }}
+    <br>
+    Page Size: <input v-model="pageSize" />
+    <br>
+    Back Page <button @click="paginator.toPreviousPage()">Back</button>
+    <br>
+    Next Page <button @click="paginator.toNextPage()">Next</button>
+    <br>
+    Showing {{ paginator.getFromItemNumber() }} to {{ paginator.getToItemNumber() }} of {{ paginator.getTotal() }} items.
+
+    {{ displayablePages }}
+</template>
+
+<script setup lang="ts">
+import {GetProductsRequest} from "./GetProductsRequest";
+import {Paginator, RequestDriver, VuePaginationDriverFactory} from '@hank-it/ui/service/pagination'
+import {VueLoaderDriverFactory, BaseRequest, FetchDriver} from '@hank-it/ui/service/requests'
+import {computed} from 'vue'
+import {getDisplayablePages} from '@hank-it/ui/service/helpers'
+
+/* Booting */
+BaseRequest.setRequestDriver(new FetchDriver)
+BaseRequest.setLoaderStateFactory(new VueLoaderDriverFactory)
+Paginator.setViewDriverFactory(new VuePaginationDriverFactory())
+
+/* component */
+const getProductsRequest = new GetProductsRequest
+
+const paginator = new Paginator(new RequestDriver(getProductsRequest))
+
+paginator.init(1, 10)
+
+const pageSize = computed({
+    set(value) {
+        paginator.setPageSize(value)
+    },
+    get() {
+        return paginator.getPageSize()
+    }
+})
+
+const displayablePages = computed(() => {
+    console.log(paginator.getPages())
+
+    return getDisplayablePages(paginator.getPages().length, paginator.getCurrentPage())
+})
+</script>

package/examples/js/view/requests/Requests.vue

@@ -0,0 +1,34 @@
+<template>
+    <DemoPage :components="components" />
+</template>
+
+<script setup lang="ts">
+import GetRequestWithDynamicParams from './components/getRequestWithDynamicParams/GetRequestWithDynamicParams.vue'
+import AbortableRequest from './components/abortableRequest/AbortableRequest.vue'
+import ServerErrorRequest from './components/serverErrorRequest/ServerErrorRequest.vue'
+import FileDownloadRequest from './components/fileDownloadRequest/FileDownloadRequest.vue'
+import DemoPage from '../layout/DemoPage.vue'
+
+const components = {
+    'get-request-with-dynamic-params': {
+        name: 'Get request with dynamic params',
+        component: GetRequestWithDynamicParams,
+        route: { name: 'requests', params: { component: 'get-request-with-dynamic-params' } },
+    },
+    'abortable-request': {
+        name: 'Abortable request',
+        component: AbortableRequest,
+        route: { name: 'requests', params: { component: 'abortable-request' } },
+    },
+    'server-error-request': {
+        name: 'Server error request',
+        component: ServerErrorRequest,
+        route: { name: 'requests', params: { component: 'server-error-request' } },
+    },
+    'file-download-request': {
+        name: 'File download request',
+        component: FileDownloadRequest,
+        route: { name: 'requests', params: { component: 'file-download-request' } },
+    },
+}
+</script>

package/examples/js/view/requests/components/abortableRequest/AbortableRequest.vue

@@ -0,0 +1,36 @@
+<template>
+    <h1>Abortable request</h1>
+
+    <p v-if="request.isLoading()">Lade...</p>
+
+    <p>Response: {{ data }}</p>
+
+    <button @click="controller.abort()">Abort</button>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import {VueLoaderDriverFactory, BaseRequest, FetchDriver} from '@hank-it/ui/service/requests'
+import {GetProductsRequest} from './GetProductsRequest'
+
+/* Booting */
+BaseRequest.setRequestDriver(new FetchDriver)
+BaseRequest.setLoaderStateFactory(new VueLoaderDriverFactory)
+
+/* Component */
+const controller = new AbortController();
+
+const data = ref({})
+
+const request = new GetProductsRequest({
+    abortSignal: controller.signal,
+})
+
+function sendRequest() {
+    request.send().then(response => {
+        data.value = response.data
+    })
+}
+
+sendRequest()
+</script>

package/examples/js/view/requests/components/abortableRequest/GetProductsRequest.ts

@@ -0,0 +1,25 @@
+import {BaseRequest, BaseResponse } from '@hank-it/ui/service/requests'
+import DriverConfigContract from '../../../../../../src/service/requests/contracts/DriverConfigContract'
+import JsonResponse from '../../../../../../src/service/requests/responses/JsonResponse'
+
+export class GetProductsRequestResponse extends JsonResponse {}
+
+export class GetProductsRequest extends BaseRequest implements GetProductsRequest {
+    method() {
+        return 'GET'
+    }
+
+    url() {
+        return 'https://dummyjson.com/products/?delay=5000'
+    }
+
+    protected getConfig(): DriverConfigContract {
+        return {
+            corsWithCredentials: false,
+        }
+    }
+
+    protected getResponse() {
+        return new GetProductsRequestResponse
+    }
+}

package/examples/js/view/requests/components/fileDownloadRequest/DownloadFileRequest.ts

@@ -0,0 +1,15 @@
+import {BaseRequest, BlobResponse } from '@hank-it/ui/service/requests'
+
+export default class DownloadFileRequest extends BaseRequest {
+    method() {
+        return 'GET'
+    }
+
+    url() {
+        return 'http://localhost:5173/files/7z2404-x64.exe'
+    }
+
+    protected getResponse() {
+        return new BlobResponse
+    }
+}

package/examples/js/view/requests/components/fileDownloadRequest/FileDownloadRequest.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import {VueLoaderDriverFactory, BaseRequest, FetchDriver} from '@hank-it/ui/service/requests'
+import DownloadFileRequest from './DownloadFileRequest'
+
+/* Booting */
+BaseRequest.setRequestDriver(new FetchDriver)
+BaseRequest.setLoaderStateFactory(new VueLoaderDriverFactory)
+
+/* Component */
+const request = new DownloadFileRequest
+
+function sendRequest() {
+    request.send().then(response => {
+        console.log(response)
+
+       // saveBlob(response.data, 'test.exe');
+    })
+}
+
+function saveBlob(blob, fileName) {
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.style = "display: none";
+
+    const url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = fileName;
+    a.click();
+    window.URL.revokeObjectURL(url);
+}
+
+sendRequest()
+</script>
+
+<style scoped>
+
+</style>

package/examples/js/view/requests/components/getRequestWithDynamicParams/GetProductsRequest.ts

@@ -0,0 +1,34 @@
+import {BaseRequest, type Paginatable, type DriverConfigContract, JsonResponse } from '@hank-it/ui/service/requests'
+
+export class GetProductsRequestResponse extends JsonResponse {
+    public dataHandler(data) {
+        return data.products
+    }
+}
+
+export class GetProductsRequest extends BaseRequest implements Paginatable {
+    method() {
+        return 'GET'
+    }
+
+    url() {
+        return 'https://dummyjson.com/products/search'
+    }
+
+    public setPaginationParams(page: number, size: number): BaseRequest {
+        return this.withParams({
+            skip: (page - 1) * size,
+            limit: size,
+        })
+    }
+
+    protected getConfig(): DriverConfigContract {
+        return {
+            corsWithCredentials: false,
+        }
+    }
+
+    protected getResponse() {
+        return new GetProductsRequestResponse
+    }
+}

package/examples/js/view/requests/components/getRequestWithDynamicParams/GetRequestWithDynamicParams.vue

@@ -0,0 +1,59 @@
+<template>
+    <h1>Get request with dynamic params</h1>
+
+    <input placeholder="Search" v-model="search">
+
+    <p v-if="request.isLoading()">Lade...</p>
+
+    <table>
+        <tr v-for="row in data">
+            <td>{{ row.id }}</td>
+            <td>{{ row.title }}</td>
+            <td>{{ row.description }}</td>
+        </tr>
+    </table>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import {VueLoaderDriverFactory, BaseRequest, FetchDriver} from '@hank-it/ui/service/requests'
+import {GetProductsRequest} from './GetProductsRequest'
+
+/* Booting */
+BaseRequest.setRequestDriver(new FetchDriver({
+    corsWithCredentials: true,
+}))
+BaseRequest.setLoaderStateFactory(new VueLoaderDriverFactory)
+
+/* Component */
+const internalSearch = ref('')
+
+const search = computed({
+    set(value) {
+        internalSearch.value = value
+
+        sendRequest()
+    },
+    get() {
+        return internalSearch.value
+    }
+})
+
+const data = ref({})
+
+const request = new GetProductsRequest
+
+function sendRequest() {
+    request.setParams({
+        q: search.value,
+    }).send().then(response => {
+        data.value = response.data
+    })
+}
+
+sendRequest()
+</script>
+
+<style scoped>
+
+</style>

package/examples/js/view/requests/components/serverErrorRequest/ServerErrorRequest.ts

@@ -0,0 +1,21 @@
+import {BaseRequest, JsonResponse } from '@hank-it/ui/service/requests'
+
+export class GetProductsRequestResponse extends JsonResponse {}
+
+export class ServerErrorRequest extends BaseRequest implements ServerErrorRequest {
+    method() {
+        return 'GET'
+    }
+
+    url() {
+        return 'https://dummyjson.com/http/500'
+    }
+
+    public getCorsWithCredentials(): boolean {
+        return false
+    }
+
+    protected getResponse() {
+        return new GetProductsRequestResponse
+    }
+}

package/examples/js/view/requests/components/serverErrorRequest/ServerErrorRequest.vue

@@ -0,0 +1,53 @@
+<template>
+    <h1>Server error request</h1>
+
+    <p v-if="request.isLoading()">Lade...</p>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import { VueLoaderDriverFactory, BaseRequest, FetchDriver, ResponseException, ErrorHandler } from '@hank-it/ui/service/requests'
+import {ServerErrorRequest} from './ServerErrorRequest'
+
+/* Booting */
+BaseRequest.setRequestDriver(new FetchDriver({
+    corsWithCredentials: false
+}))
+BaseRequest.setLoaderStateFactory(new VueLoaderDriverFactory)
+
+/* Component */
+const data = ref({})
+
+const request = new ServerErrorRequest()
+
+function sendRequest() {
+    request.send()
+        .then(response => {
+            data.value = response.data
+        })
+        .catch((response: ResponseException) => {
+            console.log('Specific error handler')
+
+            console.log(response.getError().getStatusCode())
+            console.log(response.getError().getHeaders())
+            console.log(response.getError().getOriginalError())
+            response.getError().getBodyPromise().then(body => {
+                console.log(body)
+            })
+        })
+}
+
+// Global error handler
+ErrorHandler.registerHandler(error => {
+    console.debug("Registered handler")
+
+    console.log(error.getStatusCode())
+    console.log(error.getHeaders())
+    console.log(error.getOriginalError())
+    error.getBodyPromise().then(body => {
+        console.log(body)
+    })
+})
+
+sendRequest()
+</script>

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@blueprint-ts/core",
+  "version": "1.0.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    "./service/pagination": "./src/service/pagination/index.ts",
+    "./service/support": "./src/service/support/index.ts",
+    "./service/requests": "./src/service/requests/index.ts",
+    "./service/bulkRequests": "./src/service/bulkRequests/index.ts",
+    "./service/persistenceDrivers": "./src/service/persistenceDrivers/index.ts",
+    "./service/requests/exceptions": "./src/service/requests/exceptions/index.ts",
+    "./service/laravel/requests": "./src/service/laravel/requests/index.ts",
+    "./service/laravel/pagination": "./src/service/laravel/pagination/index.ts",
+    "./helpers": "./src/helpers.ts",
+    "./vue": "./src/vue/index.ts",
+    "./vue/forms": "./src/vue/forms/index.ts",
+    "./vue/forms/validation": "./src/vue/forms/validation/index.ts",
+    "./vue/requests": "./src/vue/requests/index.ts",
+    "./vue/router/routeModelBinding": "./src/vue/router/routeModelBinding/index.ts",
+    "./vue/state": "./src/vue/state/index.ts"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "build-only": "vite build",
+    "lint": "eslint \"src/**/*.{js,vue,ts}\"",
+    "lint:fix": "eslint \"src/**/*.{js,vue,ts}\" --fix",
+    "format": "prettier --check src/",
+    "type-check": "tsc --noEmit",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*",
+    "@rollup/rollup-linux-x64-musl": "*",
+    "@rollup/rollup-win32-x64-gnu": "*",
+    "@rollup/rollup-win32-x64-musl": "*"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@tsconfig/node20": "^20.1.2",
+    "@types/jsdom": "^21.1.6",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.11.28",
+    "@types/qs": "^6.9.18",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "@typescript-eslint/typescript-estree": "^8.21.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitest/coverage-v8": "^3.0.4",
+    "@vue/eslint-config-typescript": "^14.0.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-vue": "^9.31.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "prettier": "^3.0.3",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.21.0",
+    "vite": "^5.1.6",
+    "vitepress": "^1.6.3",
+    "vitest": "^3.0.4",
+    "vue": "^3.4.25",
+    "vue-router": "^4.3.2"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21",
+    "qs": "^6.12.0",
+    "uuid": "^11.1.0"
+  }
+}

package/release-tool.json

@@ -0,0 +1,7 @@
+{
+  "version_file": "package.json",
+  "version_pattern": "\"version\":\\s*\"([0-9]+\\.[0-9]+\\.[0-9]+)\"",
+  "version_template": "\"version\": \"{}\"",
+  "develop_branch": "develop",
+  "main_branch": "main"
+}