@koumoul/vjsf 4.1.4 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "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",
@@ -72,7 +78,7 @@
     "vuetify": "^4.0.0"
   },
   "dependencies": {
-    "@json-layout/core": "~2.5.0",
+    "@json-layout/core": "~2.6.0",
     "@json-layout/vocabulary": "~2.12.0",
     "@vueuse/core": "^12.5.0",
     "debug": "^4.3.4"

package/src/components/fragments/list-select-key.vue

@@ -33,7 +33,7 @@ export default defineComponent({
   setup (props, { emit }) {
     useDefaults({}, 'VjsfListSelectKey')
     const vSelectProps = useCompDefaults('VjsfIndexedList-VSelect', { variant: 'outlined', class: 'mt-2' })
-    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
+    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small', color: 'transparent' })
 
     // @ts-ignore
     const { getItems, selectProps, selectSlots } = useSelectNode(toRef(props, 'listNode'), props.statefulLayout, avatarProps.value, 'v-select')

package/src/components/fragments/select-item-icon.vue

@@ -17,7 +17,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const isUrl = computed(() => props.icon.startsWith('http://') || props.icon.startsWith('https://'))
+    const isUrl = computed(() => props.icon.startsWith('http://') || props.icon.startsWith('https://') || props.icon.startsWith('/'))
     const isSVG = computed(() => props.icon.startsWith('<?xml') || props.icon.startsWith('<svg'))
     return () => {
       if (isUrl.value) {

package/src/components/nodes/autocomplete.vue

@@ -20,7 +20,7 @@ export default defineComponent({
   },
   setup (props) {
     useDefaults({}, 'VjsfAutocomplete')
-    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
+    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small', color: 'transparent' })
 
     const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value, 'v-autocomplete')
 

package/src/components/nodes/select.vue

@@ -20,7 +20,7 @@ export default defineComponent({
   },
   setup (props) {
     useDefaults({}, 'VjsfSelect')
-    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
+    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small', color: 'transparent' })
 
     const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value, 'v-select')
 

package/src/components/nodes/slider.vue

@@ -40,3 +40,9 @@ export default defineComponent({
   }
 })
 </script>
+
+<style>
+.vjsf-node-slider .v-slider {
+  padding-right: 8px;
+}
+</style>

package/src/components/vjsf-webmcp.vue

@@ -0,0 +1,87 @@
+<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
+  },
+  subAgent: {
+    type: Boolean,
+    default: false
+  }
+})
+
+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, includeSubAgent: props.subAgent }
+    )
+    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/nodes/slider.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/slider.vue"],"names":[],"mappings":"wBAkDqB,OAAO,YAAY;;AAQxC;;QAGM,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKzE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKzE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;6IA0BhF"}
+{"version":3,"file":"slider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/slider.vue"],"names":[],"mappings":"wBAwDqB,OAAO,YAAY;;AAQxC;;QAGM,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKzE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKzE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;6IA0BhF"}

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

@@ -0,0 +1,79 @@
+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;
+    };
+    subAgent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, 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;
+    };
+    subAgent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & 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;
+    subAgent: boolean;
+}, {}, {}, {}, 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":"wBA4OqB,OAAO,YAAY;;AAnCxC;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;wHAiBlF"}

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 }
-}