@platforma-sdk/ui-vue 1.4.9 → 1.5.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.4.9",
+  "version": "1.5.38",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -21,7 +21,7 @@
     "lru-cache": "^11.0.1",
     "vue": "^3.5.11",
     "canonicalize": "^2.0.0",
-    "@milaboratories/uikit": "^1.2.16",
+    "@milaboratories/uikit": "^1.2.17",
     "@platforma-sdk/model": "^1.2.32"
   },
   "devDependencies": {

package/src/createModel.ts

@@ -1,30 +1,7 @@
 import { reactive, computed, ref, watch, unref } from 'vue';
-import type { ZodError } from 'zod';
 import type { ModelOptions, Model } from './types';
 import { deepClone } from '@milaboratories/helpers';
-import { isJsonEqual } from './utils';
-
-const identity = <T, V = T>(v: T): V => v as unknown as V;
-
-const ensureError = (cause: unknown) => {
-  if (cause instanceof Error) {
-    return cause;
-  }
-
-  return Error(String(cause));
-};
-
-const isZodError = (err: Error): err is ZodError => {
-  return err.name === 'ZodError';
-};
-
-const formatZodError = (err: ZodError) => {
-  const { formErrors, fieldErrors } = err.flatten();
-  const _fieldErrors = Object.entries(fieldErrors).map(([field, errors]) => {
-    return field + ':' + errors?.join(',');
-  });
-  return formErrors.concat(_fieldErrors).join('; ');
-};
+import { isJsonEqual, identity, ensureError, isZodError, formatZodError } from './utils';
 
 export function createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<M> {
   const validate = options.validate ?? identity;
@@ -89,9 +66,9 @@ export function createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<
 
   watch(
     local,
-    (v, old) => {
-      if (v && v === old) {
-        setValue(v.model);
+    (n, o) => {
+      if (n && n === o) {
+        setValue(n.model);
       }
     },
     { deep: true },

package/src/internal/createApp.ts

@@ -4,9 +4,9 @@ import type { NavigationState, BlockOutputsBase, BlockState, Platforma } from '@
 import { reactive, nextTick, computed, watch } from 'vue';
 import type { UnwrapValueOrErrors, StateModelOptions, UnwrapOutputs, OptionalResult, OutputValues, OutputErrors } from '../types';
 import { createModel } from '../createModel';
+import { createAppModel } from './createAppModel';
 import { parseQuery } from '../urls';
 import { MultiError, unwrapValueOrErrors } from '../utils';
-import { pick } from 'lodash';
 
 export function createApp<
   Args = unknown,
@@ -101,22 +101,23 @@ export function createApp<
         },
       });
     },
-    createAppModel<T = AppModel>(options: StateModelOptions<AppModel, T> = {}) {
-      return createModel<T, AppModel>({
-        get() {
-          if (options.transform) {
-            return options.transform(snapshot);
-          }
+    // @TODO currently disabled but will be used
+    // createAppModel<T extends AppModel = AppModel>(options: StateModelOptions<AppModel, T> = {}) {
+    //   return createAppModel<T, AppModel>({
+    //     get() {
+    //       if (options.transform) {
+    //         return options.transform(snapshot);
+    //       }
 
-          return { args: snapshot.args, ui: snapshot.ui } as T;
-        },
-        validate: options.validate,
-        autoSave: true,
-        onSave(newData) {
-          setBlockArgsAndUiState(newData.args, newData.ui);
-        },
-      });
-    },
+    //       return { args: snapshot.args, ui: snapshot.ui } as T;
+    //     },
+    //     validate: options.validate,
+    //     autoSave: true,
+    //     onSave(newData) {
+    //       setBlockArgsAndUiState(newData.args, newData.ui);
+    //     },
+    //   });
+    // },
     /**
      * Note: Don't forget to list the output names, like: useOutputs('output1', 'output2', ...etc)
      * @param keys - List of output names
@@ -212,28 +213,71 @@ export function createApp<
     },
   };
 
+  const outputs = computed<OutputValues<Outputs>>(() => {
+    const entries = Object.entries(snapshot.outputs).map(([k, vOrErr]) => [k, vOrErr.ok && vOrErr.value !== undefined ? vOrErr.value : undefined]);
+    return Object.fromEntries(entries);
+  });
+
+  const outputErrors = computed<OutputErrors<Outputs>>(() => {
+    const entries = Object.entries(snapshot.outputs).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);
+    return Object.fromEntries(entries);
+  });
+
   const getters = {
-    args: computed(() => snapshot.args),
-    outputs: computed(() => snapshot.outputs),
-    ui: computed(() => snapshot.ui),
-    navigationState: computed(() => snapshot.navigationState),
+    snapshot,
+    queryParams: computed(() => parseQuery<Href>(snapshot.navigationState.href)),
     href: computed(() => snapshot.navigationState.href),
+    hasErrors: computed(() => Object.values(snapshot.outputs).some((v) => !v?.ok)), // @TODO: there is middle-layer error, v sometimes is undefined
 
-    outputValues: computed<OutputValues<Outputs>>(() => {
-      const entries = Object.entries(snapshot.outputs).map(([k, vOrErr]) => [k, vOrErr.ok && vOrErr.value !== undefined ? vOrErr.value : undefined]);
-      return Object.fromEntries(entries);
+    /** @deprecated */
+    outputValues: computed(() => {
+      console.warn('Change app.outputValues to app.model.outputs');
+      return outputs.value;
     }),
 
-    outputErrors: computed<OutputErrors<Outputs>>(() => {
-      const entries = Object.entries(snapshot.outputs).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);
-      return Object.fromEntries(entries);
+    /** @deprecated */
+    outputErrors: computed(() => {
+      console.warn('Change app.outputErrors to app.model.outputErrors');
+      return outputErrors.value;
     }),
 
-    queryParams: computed(() => parseQuery<Href>(snapshot.navigationState.href)),
-    hasErrors: computed(() => Object.values(snapshot.outputs).some((v) => !v?.ok)), // @TODO: there is middle-layer error, v sometimes is undefined
+    /** @deprecated */
+    args: computed(() => {
+      console.warn('Change app.args to app.snapshot.args');
+      return snapshot.args;
+    }),
+    /** @deprecated */
+    outputs: computed(() => {
+      console.warn('Change app.outputs to app.snapshot.outputs');
+      return snapshot.outputs;
+    }),
+    /** @deprecated */
+    ui: computed(() => {
+      console.warn('Change app.ui to app.snapshot.ui');
+      return snapshot.ui;
+    }),
+    /** @deprecated */
+    navigationState: computed(() => {
+      console.warn('Change app.navigationState to app.snapshot.navigationState');
+      return snapshot.navigationState;
+    }),
   };
 
-  const appModel = methods.createAppModel();
+  const appModel = createAppModel(
+    {
+      get() {
+        return { args: snapshot.args, ui: snapshot.ui } as AppModel;
+      },
+      autoSave: true,
+      onSave(newData: AppModel) {
+        setBlockArgsAndUiState(newData.args, newData.ui);
+      },
+    },
+    {
+      outputs,
+      outputErrors,
+    },
+  );
 
   return reactive(Object.assign(appModel, methods, getters));
 }

package/src/internal/createAppModel.ts

@@ -0,0 +1,100 @@
+import { reactive, computed, ref, watch, unref, type ComputedRef, type UnwrapNestedRefs } from 'vue';
+import type { ModelOptions, Model } from '../types';
+import { deepClone } from '@milaboratories/helpers';
+import { isJsonEqual, identity, ensureError, isZodError, formatZodError } from '../utils';
+
+export function createAppModel<
+  M extends Record<string, unknown>,
+  V = unknown,
+  E extends Record<string, ComputedRef<unknown>> = Record<string, ComputedRef<unknown>>,
+>(options: ModelOptions<M, V>, extended?: E): Model<M & UnwrapNestedRefs<E>> {
+  type R = M & UnwrapNestedRefs<E>;
+
+  const validate = options.validate ?? identity;
+
+  const { autoSave } = options;
+
+  const error = ref<Error | undefined>();
+
+  const local = ref<{ model: R }>();
+
+  const setSource = (v: M) => {
+    local.value = {
+      model: Object.assign(deepClone(v), extended ?? {}) as R,
+    };
+  };
+
+  watch(
+    () => options.get(),
+    (v) => setSource(v),
+    { immediate: true },
+  );
+
+  const save = () => {
+    options.onSave(validate(deepClone(local.value?.model)));
+  };
+
+  const revert = () => {
+    setSource(options.get());
+    error.value = undefined;
+  };
+
+  const setError = (cause: unknown) => {
+    const err = ensureError(cause);
+    if (isZodError(err)) {
+      error.value = Error(formatZodError(err)); // @todo temp
+    } else {
+      error.value = err;
+    }
+  };
+
+  const setValue = (v: M) => {
+    error.value = undefined;
+    try {
+      validate(v);
+      if (autoSave) {
+        save();
+      }
+    } catch (cause: unknown) {
+      setError(cause);
+    }
+  };
+
+  const model = computed<R>({
+    get: () => {
+      return local.value?.model as R;
+    },
+    set() {
+      throw Error('Cannot replace base model');
+    },
+  });
+
+  watch(
+    local,
+    (n, o) => {
+      if (n && n === o) {
+        setValue(n.model);
+      }
+    },
+    { deep: true },
+  );
+
+  const valid = computed(() => !error.value);
+
+  const isChanged = computed(() => {
+    return !isJsonEqual(options.get(), unref(local));
+  });
+
+  const errorString = computed(() => (error.value ? error.value.message : ''));
+
+  return reactive({
+    model,
+    valid,
+    isChanged,
+    error,
+    errorString,
+    save,
+    revert,
+    setError,
+  });
+}

package/src/types.static-test.ts

@@ -85,6 +85,8 @@ declare const _app: ExtApp;
 
 type _UpdateArgsParams = Parameters<Parameters<_App1['updateArgs']>[0]>[0];
 
+type _ccc = _App1['model']['args'];
+
 type __cases = [
   Expect<Equal<Model<string>, typeof __model1>>,
   Expect<Equal<Model<number>, typeof __model2>>,
@@ -95,7 +97,8 @@ type __cases = [
   Expect<Equal<ExtApp['label'], string>>,
   Expect<Equal<ExtApp['method'], () => number>>,
   Expect<Equal<_App1['args'], Readonly<_Args>>>,
-  Expect<Equal<_App1['outputValues']['sum'], number | undefined>>,
+  Expect<Equal<_App1['model']['outputs']['sum'], number | undefined>>,
+  Expect<Equal<_App1['model']['outputErrors']['sum'], Error | undefined>>,
   Expect<Equal<_App1['ui'], Readonly<_UiState>>>,
   Expect<Equal<_App1['model']['args'], _Args>>,
   Expect<Equal<_App1['model']['ui'], _UiState>>,

package/src/utils.ts

@@ -1,5 +1,6 @@
 import type { ValueOrErrors } from '@platforma-sdk/model';
 import type { OptionalResult } from './types';
+import type { ZodError } from 'zod';
 import canonicalize from 'canonicalize';
 
 export class UnresolvedError extends Error {}
@@ -62,3 +63,25 @@ export function isDefined<T>(v: T | undefined): v is T {
 export function isJsonEqual(a: unknown, b: unknown) {
   return canonicalize(a) === canonicalize(b);
 }
+
+export const identity = <T, V = T>(v: T): V => v as unknown as V;
+
+export const ensureError = (cause: unknown) => {
+  if (cause instanceof Error) {
+    return cause;
+  }
+
+  return Error(String(cause));
+};
+
+export const isZodError = (err: Error): err is ZodError => {
+  return err.name === 'ZodError';
+};
+
+export const formatZodError = (err: ZodError) => {
+  const { formErrors, fieldErrors } = err.flatten();
+  const _fieldErrors = Object.entries(fieldErrors).map(([field, errors]) => {
+    return field + ':' + errors?.join(',');
+  });
+  return formErrors.concat(_fieldErrors).join('; ');
+};