@koumoul/vjsf 4.1.4 → 4.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test-tz1": "TZ=Europe/Paris vitest run",
@@ -25,6 +25,12 @@
         "default": "./src/index.js"
       }
     },
+    "./webmcp": {
+      "import": {
+        "types": "./types/webmcp.d.ts",
+        "default": "./src/webmcp.js"
+      }
+    },
     "./types.js": {
       "import": {
         "types": "./types/types.d.ts",

package/src/components/vjsf-webmcp.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { computed, shallowRef, watch } from 'vue'
+
+import { compile, produceCompileOptions } from '@json-layout/core/compile'
+import { WebMCP } from '@json-layout/core/webmcp'
+import Tree from './tree.vue'
+import { useVjsf, emits } from '../composables/use-vjsf.js'
+import '../styles/vjsf.css'
+import { nodeComponents } from './nodes/index.js'
+
+const props = defineProps({
+  schema: {
+    type: Object,
+    required: true
+  },
+  precompiledLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').CompiledLayout> */
+    type: Object,
+    default: null
+  },
+  modelValue: {
+    type: null,
+    default: null
+  },
+  options: {
+    /** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
+    type: Object,
+    default: null
+  },
+  prefixName: {
+    type: String,
+    default: null
+  },
+  dataTitle: {
+    type: String,
+    default: null
+  }
+})
+
+const emit = defineEmits(emits)
+
+const { el, statefulLayout, stateTree } = useVjsf(
+  computed(() => props.schema),
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  nodeComponents,
+  emit,
+  compile,
+  produceCompileOptions,
+  computed(() => props.precompiledLayout)
+)
+
+/** @type import('vue').ShallowRef<WebMCP | null> */
+const webMCP = shallowRef(null)
+watch(statefulLayout, () => {
+  if (webMCP.value) webMCP.value.unregisterTools()
+  if (statefulLayout.value) {
+    webMCP.value = new WebMCP(
+      /** @type {import('@json-layout/core').StatefulLayout} */(/** @type {unknown} */(statefulLayout.value)),
+      { prefixName: props.prefixName, dataTitle: props.dataTitle, schema: props.schema }
+    )
+    webMCP.value.registerTools()
+  }
+}, { immediate: true })
+
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="vjsf"
+  >
+    <tree
+      v-if="statefulLayout && stateTree"
+      :model-value="stateTree"
+      :stateful-layout="statefulLayout"
+    />
+  </div>
+</template>
+
+<style lang="css">
+/* nothing here, use ../styles/vjsf.css */
+</style>

package/src/webmcp.js

@@ -0,0 +1,2 @@
+import Vjsf from './components/vjsf-webmcp.vue'
+export default Vjsf

package/types/components/vjsf-webmcp.vue.d.ts

@@ -0,0 +1,70 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    schema: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    precompiledLayout: {
+        /** @type import('vue').PropType<import('@json-layout/core').CompiledLayout> */
+        type: import("vue").PropType<import("@json-layout/core").CompiledLayout>;
+        default: null;
+    };
+    modelValue: {
+        type: null;
+        default: null;
+    };
+    options: {
+        /** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
+        type: import("vue").PropType<import("../types.js").PartialVjsfOptions | null>;
+        default: null;
+    };
+    prefixName: {
+        type: StringConstructor;
+        default: null;
+    };
+    dataTitle: {
+        type: StringConstructor;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+    "update:state": (state: import("../types.js", { with: { "resolution-mode": "import" } }).VjsfStatefulLayout) => void;
+    "update:modelValue": (data: any) => void;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    schema: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    precompiledLayout: {
+        /** @type import('vue').PropType<import('@json-layout/core').CompiledLayout> */
+        type: import("vue").PropType<import("@json-layout/core").CompiledLayout>;
+        default: null;
+    };
+    modelValue: {
+        type: null;
+        default: null;
+    };
+    options: {
+        /** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
+        type: import("vue").PropType<import("../types.js").PartialVjsfOptions | null>;
+        default: null;
+    };
+    prefixName: {
+        type: StringConstructor;
+        default: null;
+    };
+    dataTitle: {
+        type: StringConstructor;
+        default: null;
+    };
+}>> & Readonly<{
+    "onUpdate:state"?: ((state: import("../types.js", { with: { "resolution-mode": "import" } }).VjsfStatefulLayout) => any) | undefined;
+    "onUpdate:modelValue"?: ((data: any) => any) | undefined;
+}>, {
+    options: import("../types.js", { with: { "resolution-mode": "import" } }).PartialVjsfOptions | null;
+    modelValue: any;
+    precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js", { with: { "resolution-mode": "import" } }).CompiledLayout;
+    prefixName: string;
+    dataTitle: string;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=vjsf-webmcp.vue.d.ts.map

package/types/components/vjsf-webmcp.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vjsf-webmcp.vue.d.ts","sourceRoot":"","sources":["../../src/components/vjsf-webmcp.vue"],"names":[],"mappings":"wBAgOqB,OAAO,YAAY;;AA/BxC;;;;;;QAQI,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;;QAS5E,oFAAoF;cAA1E,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;QATjF,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;;QAS5E,oFAAoF;cAA1E,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;wHAalF"}

package/types/webmcp.d.ts

@@ -0,0 +1,3 @@
+export default Vjsf;
+import Vjsf from './components/vjsf-webmcp.vue';
+//# sourceMappingURL=webmcp.d.ts.map

package/types/webmcp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webmcp.d.ts","sourceRoot":"","sources":["../src/webmcp.js"],"names":[],"mappings":";iBAAiB,8BAA8B"}

package/src/composables/use-webmcp.js

@@ -1,28 +0,0 @@
-import { shallowRef, onScopeDispose, toValue } from 'vue'
-import { WebMCP } from '@json-layout/core/webmcp'
-
-/**
- * @param {{ prefixName?: import('vue').MaybeRefOrGetter<string | null | undefined>, dataTitle?: import('vue').MaybeRefOrGetter<string | null | undefined>, schema: import('vue').MaybeRefOrGetter<object> }} options
- */
-export function useWebMCP (options) {
-  /** @type import('vue').ShallowRef<WebMCP | null> */
-  const webMCP = shallowRef(null)
-
-  /**
-   * @param {import('@json-layout/core').StatefulLayout} statefulLayout
-   */
-  function onStateUpdate (statefulLayout) {
-    if (webMCP.value) webMCP.value.unregisterTools()
-    webMCP.value = new WebMCP(
-      /** @type {import('@json-layout/core').StatefulLayout} */(/** @type {unknown} */(statefulLayout)),
-      { prefixName: toValue(options.prefixName) ?? undefined, dataTitle: toValue(options.dataTitle) ?? undefined, schema: toValue(options.schema) }
-    )
-    webMCP.value.registerTools()
-  }
-
-  onScopeDispose(() => {
-    if (webMCP.value) webMCP.value.unregisterTools()
-  })
-
-  return { onStateUpdate }
-}