@naptics/vue-collection 0.2.15 → 0.3.0

package/components/NValInput.d.ts

@@ -19,7 +19,7 @@ export declare const validationProps: {
      * If `optional` is set to false, the rule {@link required} will be checked first.
      */
     readonly rules: {
-        readonly type: PropType<ValidationRule | ValidationRule[]>;
+        readonly type: PropType<ValidationRule[] | ValidationRule>;
         readonly default: () => never[];
     };
     /**
@@ -66,7 +66,7 @@ export declare const nValInputProps: {
      * If `optional` is set to false, the rule {@link required} will be checked first.
      */
     readonly rules: {
-        readonly type: PropType<ValidationRule | ValidationRule[]>;
+        readonly type: PropType<ValidationRule[] | ValidationRule>;
         readonly default: () => never[];
     };
     /**
@@ -92,7 +92,10 @@ export declare const nValInputProps: {
      */
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
+    readonly tooltipContent: PropType<() => JSX.Element /**
+     * If set to `true` this input is always valid when its value is empty.
+     * If set to `false` the input receives the {@link required} rule. Default is `false`.
+     */>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -148,183 +151,5 @@ export type NValInputExposed = {
 /**
  * The `NValInput` is a `NInput` with custom validation.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * A slot to replace the input.
-     */
-    readonly input: PropType<(props: InputSlotProps) => JSX.Element>;
-    /**
-     * If set to `true` this inputs validation will always succeed and all validation
-     * rules are ignored. Default is `false`.
-     */
-    readonly disableValidation: BooleanConstructor;
-    /**
-     * If set to `true` this input is always valid when its value is empty.
-     * If set to `false` the input receives the {@link required} rule. Default is `false`.
-     */
-    readonly optional: BooleanConstructor;
-    /**
-     * The rules which this input is checked with.
-     * The rules are checked sequentially and the error of the first failed rule is displayed.
-     * If `optional` is set to false, the rule {@link required} will be checked first.
-     */
-    readonly rules: {
-        readonly type: PropType<ValidationRule | ValidationRule[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * The form, which this input will be added to.
-     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
-     */
-    readonly form: PropType<ValidatedForm>;
-    /**
-     * Overrides the internal error state. If set to true, it will always display an error.
-     */
-    readonly error: BooleanConstructor;
-    /**
-     * Overrides the internal error message. If set, this message is always displayed.
-     */
-    readonly errorMessage: StringConstructor;
-    /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
-    readonly hideErrorMessage: BooleanConstructor;
-    /**
-     * Disables the validation on blur. Should only be used in special occasions.
-     */
-    readonly disableBlurValidation: BooleanConstructor;
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    readonly name: StringConstructor;
-    readonly placeholder: StringConstructor;
-    readonly autocomplete: {
-        readonly type: StringConstructor;
-        readonly default: "off";
-    };
-    readonly type: {
-        readonly type: StringConstructor;
-        readonly default: "text";
-    };
-    readonly max: StringConstructor;
-    readonly min: StringConstructor;
-    readonly disabled: BooleanConstructor;
-    readonly small: BooleanConstructor;
-    readonly hideLabel: BooleanConstructor;
-    readonly inputClass: StringConstructor;
-    readonly onFocus: PropType<() => void>;
-    readonly onBlur: PropType<() => void>;
-    readonly value: PropType<string>;
-    readonly onUpdateValue: PropType<(newValue: string) => void>;
-}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * A slot to replace the input.
-     */
-    readonly input: PropType<(props: InputSlotProps) => JSX.Element>;
-    /**
-     * If set to `true` this inputs validation will always succeed and all validation
-     * rules are ignored. Default is `false`.
-     */
-    readonly disableValidation: BooleanConstructor;
-    /**
-     * If set to `true` this input is always valid when its value is empty.
-     * If set to `false` the input receives the {@link required} rule. Default is `false`.
-     */
-    readonly optional: BooleanConstructor;
-    /**
-     * The rules which this input is checked with.
-     * The rules are checked sequentially and the error of the first failed rule is displayed.
-     * If `optional` is set to false, the rule {@link required} will be checked first.
-     */
-    readonly rules: {
-        readonly type: PropType<ValidationRule | ValidationRule[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * The form, which this input will be added to.
-     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
-     */
-    readonly form: PropType<ValidatedForm>;
-    /**
-     * Overrides the internal error state. If set to true, it will always display an error.
-     */
-    readonly error: BooleanConstructor;
-    /**
-     * Overrides the internal error message. If set, this message is always displayed.
-     */
-    readonly errorMessage: StringConstructor;
-    /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
-    readonly hideErrorMessage: BooleanConstructor;
-    /**
-     * Disables the validation on blur. Should only be used in special occasions.
-     */
-    readonly disableBlurValidation: BooleanConstructor;
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    readonly name: StringConstructor;
-    readonly placeholder: StringConstructor;
-    readonly autocomplete: {
-        readonly type: StringConstructor;
-        readonly default: "off";
-    };
-    readonly type: {
-        readonly type: StringConstructor;
-        readonly default: "text";
-    };
-    readonly max: StringConstructor;
-    readonly min: StringConstructor;
-    readonly disabled: BooleanConstructor;
-    readonly small: BooleanConstructor;
-    readonly hideLabel: BooleanConstructor;
-    readonly inputClass: StringConstructor;
-    readonly onFocus: PropType<() => void>;
-    readonly onBlur: PropType<() => void>;
-    readonly value: PropType<string>;
-    readonly onUpdateValue: PropType<(newValue: string) => void>;
-}>> & {}, {
-    readonly small: boolean;
-    readonly type: string;
-    readonly tooltipHide: boolean;
-    readonly tooltipShow: boolean;
-    readonly tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    readonly disabled: boolean;
-    readonly error: boolean;
-    readonly autocomplete: string;
-    readonly hideLabel: boolean;
-    readonly disableValidation: boolean;
-    readonly optional: boolean;
-    readonly rules: ValidationRule | ValidationRule[];
-    readonly hideErrorMessage: boolean;
-    readonly disableBlurValidation: boolean;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NValInput, Component as default };

package/components/NValInput.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { createComponentWithSlots } from '../utils/component';
 import { computed, onMounted, onUnmounted } from 'vue';
 import { ref, reactive, watch } from 'vue';

package/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+import type { VNode } from 'vue'
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            [elem: string]: any
+        }
+        type Element = VNode
+    }
+}
+
+export {}

package/eslint.config.cjs

@@ -0,0 +1,29 @@
+const pluginVue = require('eslint-plugin-vue')
+const { defineConfigWithVueTs, vueTsConfigs } = require('@vue/eslint-config-typescript')
+const js = require('@eslint/js')
+const prettierConfig = require('@vue/eslint-config-prettier')
+
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = defineConfigWithVueTs(
+    {
+        ignores: ['node_modules/**', 'dist/**', 'dist-ssr/**', 'lib/**', 'coverage/**', 'scripts/*.js'],
+    },
+    js.configs.recommended,
+    pluginVue.configs['flat/essential'],
+    vueTsConfigs.recommended,
+    prettierConfig,
+    {
+        files: ['**/*.config.js', '**/*.config.cjs'],
+        languageOptions: {
+            globals: {
+                require: 'readonly',
+                module: 'readonly',
+                __dirname: 'readonly',
+            },
+        },
+        rules: {
+            '@typescript-eslint/no-require-imports': 'off',
+        },
+    }
+)

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vue Collection</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/demo/main.ts"></script>
+    </body>
+</html>

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.2.15",
+    "version": "0.3.0",
     "main": "./index.js",
     "repository": {
         "type": "git",
@@ -10,7 +10,7 @@
     },
     "scripts": {
         "dev": "vite",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+        "lint": "eslint . --fix --ignore-pattern=.gitignore",
         "type-check": "run-p type-check-lib type-check-demo",
         "type-check-demo": "vue-tsc --noEmit -p tsconfig.demo.json --composite false",
         "type-check-lib": "vue-tsc --noEmit -p tsconfig.lib.json --composite false",
@@ -18,7 +18,8 @@
         "build-demo": "run-p type-check-demo build-only-demo",
         "build-lib": "run-p type-check-lib build-only-lib",
         "build-only-demo": "vite build",
-        "build-only-lib": "bash ./scripts/build-lib.sh"
+        "build-only-lib": "bash ./scripts/build-lib.sh",
+        "preinstall": "node ./scripts/sync-node-types.js"
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.10",
@@ -27,36 +28,37 @@
     },
     "peerDependencies": {
         "@heroicons/vue": "^2.0.16",
-        "vue": "^3.2.36"
+        "vue": "^3.5.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.21.0",
         "@babel/core": "^7.21.3",
-        "@intlify/unplugin-vue-i18n": "^0.8.2",
-        "@rushstack/eslint-patch": "^1.2.0",
+        "@intlify/unplugin-vue-i18n": "^11.0.3",
+        "@rushstack/eslint-patch": "^1.15.0",
         "@tailwindcss/forms": "^0.5.3",
         "@types/jsdom": "^21.1.0",
-        "@types/node": "^18.14.0",
-        "@vitejs/plugin-vue": "^4.0.0",
-        "@vitejs/plugin-vue-jsx": "^3.0.0",
+        "@types/node": "^24",
+        "@vitejs/plugin-vue": "^6.0.3",
+        "@vitejs/plugin-vue-jsx": "^5.1.2",
         "@vue/babel-plugin-jsx": "^1.1.1",
-        "@vue/eslint-config-prettier": "^7.1.0",
-        "@vue/eslint-config-typescript": "^11.0.2",
+        "@vue/eslint-config-prettier": "^10.2.0",
+        "@vue/eslint-config-typescript": "^14.6.0",
         "@vue/test-utils": "^2.3.0",
-        "@vue/tsconfig": "^0.1.3",
+        "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.13",
-        "eslint": "^8.34.0",
-        "eslint-plugin-vue": "^9.9.0",
+        "eslint": "^9.17.0",
+        "eslint-plugin-vue": "^10.6.2",
         "jsdom": "^21.1.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.21",
-        "prettier": "^2.8.4",
+        "prettier": "^3.0.0",
         "tailwindcss": "^3.2.7",
-        "typescript": "^4.9.5",
-        "vite": "^4.1.3",
-        "vitest": "^0.28.5",
+        "typescript": "~5.5.4",
+        "vite": "^7.3.0",
+        "vitest": "^4.0.15",
+        "vue": "^3.5.25",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6",
-        "vue-tsc": "^1.1.5"
+        "vue-tsc": "^3.1.8"
     }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/scripts/build-lib.sh

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+# Exit on error
+set -e
+# Remove lib folder
+echo "Removing ./lib folder."
+rm -rf ./lib 
+
+# Compile typescript code to javascript code
+echo "Compiling typescript code with tsconfig.lib.json."
+tsc --project tsconfig.lib.json 
+
+# Move lib two directories up
+echo "Cleaning up ./lib directory."
+if [ ! -d "./lib/src/lib" ]; then
+    echo "Error: ./lib/src/lib directory not found after compilation"
+    exit 1
+fi
+mv ./lib/src/lib/* ./lib 
+
+# Remove unused files
+rm -rf ./lib/src
+rm -f ./lib/tsconfig.lib.tsbuildinfo 
+
+# Move all css files from components to lib
+echo "Copying .css files from the components folder."
+if ls ./src/lib/components/*.css 1> /dev/null 2>&1; then
+    cp ./src/lib/components/*.css ./lib/components
+else
+    echo "Warning: No CSS files found in ./src/lib/components/"
+fi
+
+# Transpile jsx files to js with babel
+echo "Using Babel to transpile jsx."
+BABEL_OUTPUT=$(./node_modules/.bin/babel lib --out-dir lib 2>&1)
+BABEL_EXIT_CODE=$?
+echo "$BABEL_OUTPUT"
+
+# Check if Babel command succeeded
+if [ $BABEL_EXIT_CODE -ne 0 ]; then
+    echo "Error: Babel transpilation failed with exit code $BABEL_EXIT_CODE"
+    exit $BABEL_EXIT_CODE
+fi
+
+# Optionally, check if any .js files were produced
+if ! find ./lib -name "*.js" -type f | grep -q .; then
+    echo "Error: No .js files produced by Babel transpilation"
+    exit 1
+fi
+
+find ./lib -name "*.jsx" -type f -delete
+
+echo "Build completed successfully!"

package/scripts/sync-node-types.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+const fs = require('fs')
+const path = require('path')
+
+const rootDir = path.join(__dirname, '..')
+const nvmrcPath = path.join(rootDir, '.nvmrc')
+const packageJsonPath = path.join(rootDir, 'package.json')
+
+// Read .nvmrc
+if (!fs.existsSync(nvmrcPath)) {
+    console.error('Error: .nvmrc file not found')
+    process.exit(1)
+}
+
+const nvmrcContent = fs.readFileSync(nvmrcPath, 'utf8').trim()
+
+// Extract major version from .nvmrc
+// Supports formats like: "24", "v24", "24.12.0", "lts/iron", etc.
+let nodeMajorVersion
+
+if (nvmrcContent.startsWith('lts/')) {
+    // Map LTS names to major versions
+    const ltsMap = {
+        krypton: '24',
+        jod: '22',
+        iron: '20',
+        hydrogen: '18',
+        gallium: '16',
+        fermium: '14',
+    }
+    const ltsName = nvmrcContent.replace('lts/', '').toLowerCase()
+    nodeMajorVersion = ltsMap[ltsName]
+    if (!nodeMajorVersion) {
+        console.error(`Error: Unknown LTS name "${ltsName}"`)
+        process.exit(1)
+    }
+} else {
+    // Extract numeric version
+    const versionMatch = nvmrcContent.match(/^v?(\d+)/)
+    if (!versionMatch) {
+        console.error(`Error: Could not extract Node version from .nvmrc: "${nvmrcContent}"`)
+        process.exit(1)
+    }
+    nodeMajorVersion = versionMatch[1]
+}
+
+console.log(`Node version from .nvmrc: ${nodeMajorVersion}`)
+
+// Read package.json
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
+
+// Check current @types/node version
+const currentTypesNode = packageJson.devDependencies?.['@types/node']
+const desiredTypesNode = `^${nodeMajorVersion}`
+
+if (currentTypesNode === desiredTypesNode) {
+    console.log(`✓ @types/node is already set to ${desiredTypesNode}`)
+    process.exit(0)
+}
+
+console.log(`Updating @types/node from ${currentTypesNode} to ${desiredTypesNode}`)
+
+// Update package.json
+packageJson.devDependencies['@types/node'] = desiredTypesNode
+
+// Write back to package.json
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf8')
+
+console.log('✓ package.json updated. Run `npm install` to install the correct @types/node version.')

package/src/demo/App.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply text-default-900;
+    }
+}

package/src/demo/App.tsx

@@ -0,0 +1,5 @@
+import { createView } from '@/lib/utils/component'
+import { RouterView } from 'vue-router'
+import './App.css'
+
+export default createView('App', () => () => <RouterView />)

package/src/demo/components/ColorGrid.tsx

@@ -0,0 +1,26 @@
+import { createComponent } from '@/lib/utils/component'
+import { computed, type PropType } from 'vue'
+import ComponentGrid, { componentGridProps } from '@/demo/components/ComponentGrid'
+
+export const colorGridProps = {
+    ...componentGridProps,
+    colors: {
+        type: Number,
+        default: 6,
+    },
+    item: Function as PropType<(color: string, index: number) => JSX.Element>,
+} as const
+
+export default createComponent('ColorGrid', colorGridProps, props => {
+    const colors = ['primary', 'secondary', 'green', 'red', 'yellow', 'default']
+
+    const selectedColors = computed(() => colors.slice(0, props.colors))
+
+    return () => (
+        <ComponentGrid cols={props.cols}>
+            {selectedColors.value.map((color, index) => (
+                <div class="flex">{props.item?.(color, index)}</div>
+            ))}
+        </ComponentGrid>
+    )
+})

package/src/demo/components/ComponentGrid.tsx

@@ -0,0 +1,26 @@
+import { createComponent } from '@/lib/utils/component'
+import { computed, type PropType } from 'vue'
+
+export const componentGridProps = {
+    cols: {
+        type: Number as PropType<2 | 4 | 6 | 8>,
+        default: 6,
+    },
+} as const
+
+export default createComponent('ComponentGrid', componentGridProps, (props, { slots }) => {
+    const classes = computed(() => {
+        switch (props.cols) {
+            case 2:
+                return 'grid-cols-1 sm:grid-cols-2'
+            case 4:
+                return 'grid-cols-2 sm:grid-cols-4'
+            case 8:
+                return 'grid-cols-4 sm:grid-cols-8'
+            default:
+                return 'grid-cols-3 sm:grid-cols-6'
+        }
+    })
+
+    return () => <div class={`grid gap-4 ${classes.value}`}>{slots.default?.()}</div>
+})

package/src/demo/components/ComponentSection.tsx

@@ -0,0 +1,30 @@
+import { createComponent } from '@/lib/utils/component'
+import { LinkIcon } from '@heroicons/vue/24/solid'
+import { RouterLink } from 'vue-router'
+
+export const componentSectionProps = {
+    id: String,
+    title: String,
+    subtitle: String,
+} as const
+
+export default createComponent('ComponentSection', componentSectionProps, (props, { slots }) => {
+    return () => (
+        <div class="border-b-2 border-default-200" id={props.id}>
+            <div>
+                <div class="px-8 py-10 max-w-4xl mx-auto">
+                    <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-none">
+                        <h2 class="font-bold text-4xl mb-2 flex items-center space-x-2 ">
+                            <span>{props.title}</span>
+                            <LinkIcon class="h-8 w-8 text-default-900 opacity-30 hidden group-hover:block group-focus-visible:block" />
+                        </h2>
+                    </RouterLink>
+                    <p class="text-default-500 text-xl font-light">{props.subtitle}</p>
+                </div>
+            </div>
+            <div class="bg-default-50">
+                <div class="px-8 pt-10 pb-20 space-y-8 max-w-4xl mx-auto">{slots.default?.()}</div>
+            </div>
+        </div>
+    )
+})

package/src/demo/components/VariantSection.tsx

@@ -0,0 +1,18 @@
+import { createComponent } from '@/lib/utils/component'
+
+export const variantSectionProps = {
+    title: String,
+    subtitle: String,
+} as const
+
+export default createComponent('VariantSection', variantSectionProps, (props, { slots }) => {
+    return () => (
+        <div>
+            <div class="mb-6">
+                <h3 class="text-lg font-medium text-default-700"> {props.title} </h3>
+                {props.subtitle && <p class="text-default-500 text-sm"> {props.subtitle} </p>}
+            </div>
+            <div class="border-2 border-dashed rounded-lg p-8 border-default-200 bg-white">{slots.default?.()}</div>
+        </div>
+    )
+})

package/src/demo/i18n/de.ts

@@ -0,0 +1,7 @@
+import vueCollection from '@/lib/i18n/de/vue-collection.json'
+
+const de = {
+    ['vue-collection']: vueCollection,
+}
+
+export default de

package/src/demo/i18n/en.ts

@@ -0,0 +1,7 @@
+import vueCollection from '@/lib/i18n/en/vue-collection.json'
+
+const en = {
+    ['vue-collection']: vueCollection,
+}
+
+export default en

package/src/demo/i18n/index.ts

@@ -0,0 +1,24 @@
+import en from './en'
+import de from './de'
+import { createI18n } from 'vue-i18n'
+import { registerTranslationProvider } from '@/lib/i18n'
+
+export const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+        en,
+        de,
+    },
+})
+
+registerTranslationProvider({
+    trsl(key, params) {
+        return i18n.global.t(key, params == null ? {} : params)
+    },
+    trslc(key, count, params) {
+        const newCount = count ?? 0
+        const newParams = { n: newCount, ...params }
+        return i18n.global.t(key, newParams, { plural: newCount })
+    },
+})