mansel-vck1-vue3

mansel-vck1-vue3

Vue 3 / Vite component library for Mansel online calculations.

What It Exposes

• Main component: ManselVCK1
• Runtime dependency: axios
• Peer dependencies: vue, vuetify

Consumers must install and register Vuetify themselves, including the icon set used by their Vuetify controls. The demo uses vuetify/iconsets/mdi-svg; the library does not configure the host application's Vuetify instance.

Install

npm install

Develop

npm run dev

Build

npm run build

Format

npm run format

ESM Package Usage

import { ManselVCK1 } from 'mansel-vck1-vue3'
import 'mansel-vck1-vue3/style.css'

Browser UMD Usage

The standalone UMD build is for direct browser <script> loading, not CommonJS. ESM consumers should use the package imports above. The host must provide the globals Vue, Vuetify (including the Vuetify.components and Vuetify.directives namespaces from the Vuetify browser build), and lowercase axios. Load Vue, Vuetify's base CSS and browser JS, axios, the library CSS, then the UMD script. The example loads MDI font icons for Vuetify's internal controls; hosts may instead supply their configured SVG icon set. This browser-only stylesheet does not add @mdi/font to the library's dependencies or distributed CSS.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7/css/materialdesignicons.min.css">
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="./mansel-vck1-vue3.css">
<script src="./mansel-vck1-vu3.umd.js"></script>

<div id="app"></div>
<script>
    const vuetify = Vuetify.createVuetify();
    const app = Vue.createApp({
        components: { ManselVCK1: window.ManselVCK1.ManselVCK1 },
        template: '<ManselVCK1 produkt="PRODUCT" jazyk="CJ" url="/produkt-query/" />'
    });
    app.use(vuetify).mount('#app');
</script>

Public Lifecycle Contract

invalidDataEvent uses this discriminated payload union:

type InvalidDataEvent =
    | {
        type: 'unknown-input'
        message: string
        unknownInputTypes: Array<{
            key: string
            typ: string
            contexts: string[]
        }>
    }
    | {
        type: 'request-error'
        operation: 'reload' | 'reset' | 'load'
        message: string
    }

reloadComponent(), resetVstupy(), and loadDataFromString(data) resolve to:

type MutationResult =
    | { ok: true }
    | ({ ok: false } & InvalidDataEvent & { error?: unknown })
    | { ok: false; stale: true }

Mutation methods resolve failures so internal fire-and-forget reloads do not create unhandled rejections. Callers that need completion status must inspect ok; stale means a newer mutation in the same queue segment superseded the request. saveDataToString() reserves a queue barrier: it waits for all earlier mutations, rejects without a save POST if one leaves the component invalid, and completes before later mutations run. A mutation queued after the barrier cannot supersede a mutation queued before it.

Demo App

src/App.vue is only a local demo harness. It is not the package API.

The demo shows:

• product selector
• save configuration
• load configuration
• reset configuration
• hardcoded backend URL

Docs

• docs/development.md
• docs/architecture.md
• docs/public-api.md