WebComponentsVue: Added computedAsync to InputForm

datagrok-ai · Aug 15, 2024 · 8811523 · 8811523
1 parent 92adf99
commit 8811523
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 11 deletions.
diff --git a/libraries/webcomponents-vue/package-lock.json b/libraries/webcomponents-vue/package-lock.json
diff --git a/libraries/webcomponents-vue/package.json b/libraries/webcomponents-vue/package.json
@@ -5,6 +5,7 @@
   "description": "Datagrok web components vue wrappers",
   "dependencies": {
     "@datagrok-libraries/webcomponents": "^0.0.2",
+    "@vueuse/core": "^10.11.1",
     "cash-dom": "^8.1.4",
     "datagrok-api": "^1.18.6",
     "dayjs": "=1.11.10",

diff --git a/libraries/webcomponents-vue/src/InputForm/InputForm.tsx b/libraries/webcomponents-vue/src/InputForm/InputForm.tsx
@@ -2,16 +2,16 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {computed, defineComponent, isReactive, KeepAlive, PropType, ref, shallowRef, watch, watchEffect} from 'vue';
+import {defineComponent, PropType, watch} from 'vue';
 import type {InputFormT} from '@datagrok-libraries/webcomponents/src';
 import {getValidators,
   injectInputBaseValidation,
   isInputBase,
   validate,
 } from '@datagrok-libraries/compute-utils/shared-utils/utils';
 import {SYNC_FIELD} from '@datagrok-libraries/compute-utils/shared-utils/consts';
-import {ValidationResult, Validator} from '@datagrok-libraries/compute-utils/shared-utils/validation';
-import {FuncCallInputValidated, isFuncCallInputValidated} from '@datagrok-libraries/compute-utils/shared-utils/input-wrappers';
+import {isFuncCallInputValidated} from '@datagrok-libraries/compute-utils/shared-utils/input-wrappers';
+import { computedAsync } from '@vueuse/core'
 
 declare global {
   namespace JSX {
@@ -35,17 +35,11 @@ export const InputForm = defineComponent({
   setup(props, {emit}) {
     let currentForm = undefined as undefined | DG.InputForm;
 
-    let loadedValidators = shallowRef({});
-
-    watch(() => props.funcCall, () => {
-      console.log('props.funcCall changed', props.funcCall);
-
-      getValidators(props.funcCall, SYNC_FIELD.INPUTS).then((res) => loadedValidators.value = res);
-    })
+    let loadedValidators = computedAsync(() => getValidators(props.funcCall, SYNC_FIELD.INPUTS), {}, {shallow: true});
 
     watch(loadedValidators, () => {
       runValidation();
-    })
+    });
 
     const allParams = (funcCall: DG.FuncCall) =>
       [...funcCall.inputParams.values() ?? []].map((param) => param.name);