@koumoul/vjsf 3.26.0 → 3.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.26.0",
+  "version": "3.26.1",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test-tz1": "TZ=Europe/Paris vitest run",

package/src/components/nodes/color-picker.vue

@@ -1,57 +1,38 @@
-<script setup>
-import TextFieldMenu from '../fragments/text-field-menu.vue'
-import { VColorPicker } from 'vuetify/components/VColorPicker'
-import { computed, toRef } from 'vue'
+<script>
+import { defineComponent, h, toRef, watch, computed } from 'vue'
+import { VColorInput } from 'vuetify/labs/VColorInput'
 import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
 
-useDefaults({}, 'VjsfColorPicker')
-
-const props = defineProps({
-  modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfColorPickerNode> */
-    type: Object,
-    required: true
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfColorPickerNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
   },
-  statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
-    type: Object,
-    required: true
-  }
-})
+  setup (props) {
+    useDefaults({}, 'VjsfColorPicker')
+    const vColorInputDefaults = useCompDefaults('VColorInput', { colorPip: true, hideActions: true })
 
-const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+    const { inputProps, localData, compSlots } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder'] }
+    )
 
-const colorPickerProps = computed(() => {
-  const colorPickerProps = { ...compProps.value }
-  colorPickerProps.modelValue = localData.value
-  return colorPickerProps
-})
+    const colorInputProps = computed(() => ({
+      ...vColorInputDefaults.value, ...inputProps.value, modelValue: localData.value
+    }))
+    watch(colorInputProps, () => console.log('colorInputProps', colorInputProps.value), { immediate: true })
 
-const menuProps = computed(() => {
-  return {
-    minWidth: '300px',
-    maxWidth: '300px',
+    return () => h(VColorInput, colorInputProps.value, compSlots.value)
   }
 })
-</script>
 
-<template>
-  <text-field-menu
-    :model-value="modelValue"
-    v-bind="menuProps"
-    :stateful-layout="statefulLayout"
-    :formatted-value="modelValue.data ?? undefined"
-  >
-    <template
-      v-if="modelValue.data"
-      #prepend-inner
-    >
-      <div :style="`height:30px; width: 30px; border-radius: 40px; margin-right:6px; background: ${modelValue.data};`" />
-    </template>
-    <v-color-picker
-      v-bind="colorPickerProps"
-      @update:model-value="value => statefulLayout.input(modelValue, value)"
-    />
-  </text-field-menu>
-</template>
+</script>

package/types/components/nodes/color-picker.vue.d.ts

@@ -11,7 +11,9 @@ declare const __VLS_export: import("vue", { with: { "resolution-mode": "import"
         type: import("vue").PropType<import("../../types.js").VjsfStatefulLayout>;
         required: true;
     };
-}>, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+}>, () => import("vue", { with: { "resolution-mode": "import" } }).VNode<import("vue", { with: { "resolution-mode": "import" } }).RendererNode, import("vue", { with: { "resolution-mode": "import" } }).RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfColorPickerNode> */
         type: import("vue").PropType<import("../../types.js").VjsfColorPickerNode>;

package/types/components/nodes/color-picker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/color-picker.vue"],"names":[],"mappings":"wBAmLqB,OAAO,YAAY;;AAdxC;;QAGI,iFAAiF;cAAvE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,mBAAmB,CAAC;;;;QAK9E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;QAL7E,iFAAiF;cAAvE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,mBAAmB,CAAC;;;;QAK9E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;6IAK9E"}
+{"version":3,"file":"color-picker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/color-picker.vue"],"names":[],"mappings":"wBA+CqB,OAAO,YAAY;;AAQxC;;QAGM,iFAAiF;cAAvE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,mBAAmB,CAAC;;;;QAK9E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,iFAAiF;cAAvE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,mBAAmB,CAAC;;;;QAK9E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;6IAoBhF"}