@platforma-sdk/ui-vue 1.41.11 → 1.41.17

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.41.11 build /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.41.17 build /home/runner/_work/platforma/platforma/sdk/ui-vue
 > vite build
 
 vite v6.3.5 building for production...
@@ -10,7 +10,7 @@ rendering chunks...
 
 [vite:dts] Start generate declaration files...
 computing gzip size...
-[vite:dts] Declaration files built in 5047ms.
+[vite:dts] Declaration files built in 5282ms.
 
 dist/_virtual/re.js                                                                                                                                                                                   0.08 kB │ gzip:   0.10 kB │ map:   0.09 kB
 dist/lib/ui/uikit/dist/node_modules/.pnpm/d3-interpolate@3.0.1/node_modules/d3-interpolate/src/constant.js                                                                                            0.09 kB │ gzip:   0.10 kB │ map:   0.32 kB
@@ -44,8 +44,8 @@ computing gzip size...
 dist/lib/ui/uikit/dist/node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/constant.js                                                                                                0.12 kB │ gzip:   0.12 kB │ map:   0.40 kB
 dist/lib/ui/uikit/dist/node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/constant.js                                                                                                        0.12 kB │ gzip:   0.12 kB │ map:   0.40 kB
 dist/components/PlAgDataTable/PlAgOverlayLoading.vue2.js                                                                                                                                              0.12 kB │ gzip:   0.12 kB │ map:   0.11 kB
-dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue2.js                                                                                                                                         0.12 kB │ gzip:   0.12 kB │ map:   0.11 kB
 dist/components/PlTableFilters/PlTableAddFilterV2.vue2.js                                                                                                                                             0.12 kB │ gzip:   0.12 kB │ map:   0.11 kB
+dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue2.js                                                                                                                                         0.12 kB │ gzip:   0.12 kB │ map:   0.11 kB
 dist/plugins/Monetization/MonetizationSidebar.vue2.js                                                                                                                                                 0.13 kB │ gzip:   0.12 kB │ map:   0.11 kB
 dist/components/PlTableFilters/PlTableFilterEntryV2.vue2.js                                                                                                                                           0.13 kB │ gzip:   0.12 kB │ map:   0.11 kB
 dist/components/PlAgGridColumnManager/PlAgGridColumnManager.vue2.js                                                                                                                                   0.13 kB │ gzip:   0.12 kB │ map:   0.11 kB
@@ -861,7 +861,7 @@ computing gzip size...
 dist/internal/createAppV1.js                                                                                                                                                                          5.80 kB │ gzip:   1.89 kB │ map:  15.32 kB
 dist/lib/ui/uikit/dist/components/PlDialogModal/PlDialogModal.vue.js                                                                                                                                  5.80 kB │ gzip:   2.01 kB │ map:   5.33 kB
 dist/lib/ui/uikit/dist/components/PlSidebar/PlSidebarItem.vue3.js                                                                                                                                     5.87 kB │ gzip:   1.77 kB │ map:   0.12 kB
-dist/internal/createAppV2.js                                                                                                                                                                          6.37 kB │ gzip:   2.21 kB │ map:  17.56 kB
+dist/internal/createAppV2.js                                                                                                                                                                          6.49 kB │ gzip:   2.29 kB │ map:  18.40 kB
 dist/lib/ui/uikit/dist/components/PlLogView/PlLogView.vue.js                                                                                                                                          6.50 kB │ gzip:   2.32 kB │ map:   5.68 kB
 dist/components/PlTableFilters/PlTableFiltersV2.vue2.js                                                                                                                                               6.57 kB │ gzip:   2.06 kB │ map:   9.28 kB
 dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/semver.js                                                                                                                            6.70 kB │ gzip:   1.86 kB │ map:  15.20 kB
@@ -885,7 +885,7 @@ computing gzip size...
 dist/lib/ui/uikit/dist/node_modules/.pnpm/d3-color@3.1.0/node_modules/d3-color/src/color.js                                                                                                           9.19 kB │ gzip:   3.33 kB │ map:  22.02 kB
 dist/components/PlTableFilters/filters_logic.js                                                                                                                                                       9.69 kB │ gzip:   2.25 kB │ map:  20.32 kB
 dist/lib/ui/uikit/dist/components/PlNumberField/PlNumberField.vue.js                                                                                                                                 10.42 kB │ gzip:   3.33 kB │ map:  13.57 kB
-dist/lib/ui/uikit/dist/components/PlFileInput/PlFileInput.vue.js                                                                                                                                     10.76 kB │ gzip:   3.37 kB │ map:   8.09 kB
+dist/lib/ui/uikit/dist/components/PlFileInput/PlFileInput.vue.js                                                                                                                                     10.78 kB │ gzip:   3.38 kB │ map:   8.09 kB
 dist/lib/ui/uikit/dist/demo-site-data/all-css-variables.js                                                                                                                                           11.00 kB │ gzip:   1.76 kB │ map:  18.24 kB
 dist/lib/ui/uikit/dist/components/PlDropdownLine/PlDropdownLine.vue.js                                                                                                                               14.70 kB │ gzip:   3.91 kB │ map:  12.75 kB
 dist/lib/ui/uikit/dist/lib/model/common/dist/index.js                                                                                                                                                15.38 kB │ gzip:   4.26 kB │ map:  89.29 kB
@@ -911,6 +911,6 @@ computing gzip size...
 dist/lib/ui/uikit/dist/node_modules/.pnpm/zod@3.23.8/node_modules/zod/lib/index.js                                                                                                                   83.80 kB │ gzip:  17.23 kB │ map: 240.83 kB
 dist/node_modules/.pnpm/zod@3.23.8/node_modules/zod/lib/index.js                                                                                                                                     83.81 kB │ gzip:  17.26 kB │ map: 241.15 kB
 dist/lib/ui/uikit/dist/index.js                                                                                                                                                                     497.97 kB │ gzip: 191.79 kB │ map:   0.19 kB
-dist/lib/ui/uikit/dist/components/PlSlideModal/PlPureSlideModal.vue.js                                                                                                                              601.20 kB │ gzip: 204.75 kB │ map:   0.22 kB
-dist/lib/ui/uikit/dist/components/DataTable/TableComponent.vue.js                                                                                                                                   603.09 kB │ gzip: 205.61 kB │ map:   0.28 kB
-✓ built in 9.10s
+dist/lib/ui/uikit/dist/components/PlSlideModal/PlPureSlideModal.vue.js                                                                                                                              601.22 kB │ gzip: 204.76 kB │ map:   0.22 kB
+dist/lib/ui/uikit/dist/components/DataTable/TableComponent.vue.js                                                                                                                                   603.11 kB │ gzip: 205.62 kB │ map:   0.28 kB
+✓ built in 9.48s

package/.turbo/turbo-type-check.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.41.11 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.41.17 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
 > vue-tsc --noEmit --project ./tsconfig.json
 

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @platforma-sdk/ui-vue
 
+## 1.41.17
+
+### Patch Changes
+
+- Updated dependencies [093dbda]
+  - @milaboratories/uikit@2.3.22
+
+## 1.41.13
+
+### Patch Changes
+
+- d29cbad: Simplify app model for v2 api
+
 ## 1.41.11
 
 ### Patch Changes

package/dist/internal/createAppV2.d.ts

@@ -18,19 +18,13 @@ export declare const createNextAuthorMarker: (marker: AuthorMarker | undefined)
  * @returns A reactive application object with methods, getters, and state.
  */
 export declare function createAppV2<Args = unknown, Outputs extends BlockOutputsBase = BlockOutputsBase, UiState = unknown, Href extends `/${string}` = `/${string}`>(state: ValueWithUTag<BlockState<Args, Outputs, UiState, Href>>, platforma: PlatformaV2<Args, Outputs, UiState, Href>, settings: AppSettings): {
+    error: string;
     model: {
         args: import('vue').UnwrapRef<Args>;
         ui: import('vue').UnwrapRef<UiState>;
         outputs: import('vue').UnwrapRef<OutputValues<Outputs>>;
         outputErrors: import('vue').UnwrapRef<OutputErrors<Outputs>>;
     };
-    readonly valid: boolean;
-    readonly isChanged: boolean;
-    readonly error: Error | undefined;
-    readonly errorString: string | undefined;
-    readonly save: () => void;
-    readonly revert: () => void;
-    readonly setError: (cause: unknown) => void;
     cloneArgs: () => Args;
     cloneUiState: () => UiState;
     cloneNavigationState: () => Mutable<NavigationState<Href>>;

package/dist/internal/createAppV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAppV2.d.ts","sourceRoot":"","sources":["../../src/internal/createAppV2.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIpI,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ1G,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,eAAO,MAAM,sBAAsB,WAAY,YAAY,GAAG,SAAS,KAAG,YAGxE,CAAC;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CACzB,IAAI,GAAG,OAAO,EACd,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EACnD,OAAO,GAAG,OAAO,EACjB,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,EAExC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,EAC9D,SAAS,EAAE,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,EACpD,QAAQ,EAAE,WAAW;;;;;;;;;;;;;;qBAsJqC,IAAI;wBACH,OAAO;gCACc,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;sBAM5F,CAAC,SAAS,IAAI,mBAAkB,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC;oBAmB5D,CAAC,SAAS,OAAO,qBAAqB,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC,8BAAuB,MAAM,OAAO;oBAwBvG,CAAC,SAAS,MAAM,OAAO,WAAW,CAAC,EAAE,KAAG,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;qBAWhE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,KAAG,OAAO,CAAC,OAAO,CAAC;wBAcpC,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,KAAG,OAAO,CAAC,OAAO,CAAC;uBAY9C,IAAI;;;;cA5Lf,IAAI;iBACD,OAAO,CAAC,OAAO,CAAC;YACrB,OAAO;yBACM,eAAe,CAAC,IAAI,CAAC;;;;;EA6MzC;AAED,MAAM,MAAM,SAAS,CACnB,IAAI,GAAG,OAAO,EACd,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EACnD,OAAO,GAAG,OAAO,EACjB,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,IACtC,UAAU,CAAC,OAAO,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC"}
+{"version":3,"file":"createAppV2.d.ts","sourceRoot":"","sources":["../../src/internal/createAppV2.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIpI,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAO1G,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,eAAO,MAAM,sBAAsB,WAAY,YAAY,GAAG,SAAS,KAAG,YAGxE,CAAC;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CACzB,IAAI,GAAG,OAAO,EACd,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EACnD,OAAO,GAAG,OAAO,EACjB,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,EAExC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,EAC9D,SAAS,EAAE,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,EACpD,QAAQ,EAAE,WAAW;WAsFZ,MAAM;;;;;;;qBAiF2C,IAAI;wBACH,OAAO;gCACc,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;sBAM5F,CAAC,SAAS,IAAI,mBAAkB,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC;oBAmB5D,CAAC,SAAS,OAAO,qBAAqB,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC,8BAAuB,MAAM,OAAO;oBAwBvG,CAAC,SAAS,MAAM,OAAO,WAAW,CAAC,EAAE,KAAG,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;qBAWhE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,KAAG,OAAO,CAAC,OAAO,CAAC;wBAcpC,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,KAAG,OAAO,CAAC,OAAO,CAAC;uBAY9C,IAAI;;;;cAlNf,IAAI;iBACD,OAAO,CAAC,OAAO,CAAC;YACrB,OAAO;yBACM,eAAe,CAAC,IAAI,CAAC;;;;;EAmOzC;AAED,MAAM,MAAM,SAAS,CACnB,IAAI,GAAG,OAAO,EACd,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EACnD,OAAO,GAAG,OAAO,EACjB,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,IACtC,UAAU,CAAC,OAAO,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC"}

package/dist/internal/createAppV2.js

@@ -1,73 +1,75 @@
-import { uniqueId as B, deepClone as w, delay as $ } from "../lib/util/helpers/dist/index.js";
+import { deepClone as l, uniqueId as V, delay as L } from "../lib/util/helpers/dist/index.js";
 import "../sdk/model/dist/index.js";
-import { ref as A, computed as h, reactive as z } from "vue";
+import { ref as A, computed as p, reactive as B, watch as W } from "vue";
 import { createModel as N } from "../createModel.js";
-import { createAppModel as D } from "./createAppModel.js";
-import { parseQuery as L } from "../urls.js";
-import { MultiError as F, unwrapValueOrErrors as G } from "../utils.js";
+import { parseQuery as F } from "../urls.js";
+import { MultiError as G, unwrapValueOrErrors as H } from "../utils.js";
 import "../node_modules/.pnpm/fast-json-patch@3.1.1/node_modules/fast-json-patch/index.js";
-import { UpdateSerializer as v } from "./UpdateSerializer.js";
-import { unwrapResult as s, hasAbortError as H } from "../lib/model/common/dist/index.js";
+import { UpdateSerializer as m } from "./UpdateSerializer.js";
+import { unwrapResult as c, hasAbortError as K } from "../lib/model/common/dist/index.js";
 import { applyPatch as O } from "../node_modules/.pnpm/fast-json-patch@3.1.1/node_modules/fast-json-patch/module/core.js";
-const P = 100, K = (n) => ({
-  authorId: (n == null ? void 0 : n.authorId) ?? B(),
+const Q = 100, X = (n) => ({
+  authorId: (n == null ? void 0 : n.authorId) ?? V(),
   localVersion: ((n == null ? void 0 : n.localVersion) ?? 0) + 1
 });
-function ue(n, c, d) {
+function se(n, d, h) {
   const r = (e, ...t) => {
-    d.debug && console.log(`%c>>> %c${e}`, "color: orange; font-weight: bold", "color: orange", d.appId, ...t);
+    h.debug && console.log(`%c>>> %c${e}`, "color: orange; font-weight: bold", "color: orange", h.appId, ...t);
   }, b = (e, ...t) => {
-    console.error(`%c>>> %c${e}`, "color: red; font-weight: bold", "color: red", d.appId, ...t);
+    console.error(`%c>>> %c${e}`, "color: red; font-weight: bold", "color: red", h.appId, ...t);
   }, u = {
     isExternalSnapshot: !1,
     author: {
-      authorId: B(),
+      authorId: V(),
       localVersion: 0
     }
-  }, S = () => (u.author = K(u.author), r("nextAuthorMarker", u.author), u.author), p = A(!1), f = A(n.uTag), g = d.debounceSpan ?? 200, y = new v({ debounceSpan: g }), U = new v({ debounceSpan: g }), M = new v({ debounceSpan: g }), Q = new v({ debounceSpan: g }), o = A(n.value), T = async (e) => c.setBlockArgs(e, S()), x = async (e) => c.setBlockUiState(e, S()), V = async (e, t) => c.setBlockArgsAndUiState(e, t, S()), R = async (e) => c.setNavigationState(e);
+  }, S = () => (u.author = X(u.author), r("nextAuthorMarker", u.author), u.author), g = A(!1), f = A(n.uTag), v = h.debounceSpan ?? 200, y = new m({ debounceSpan: v }), M = new m({ debounceSpan: v }), U = new m({ debounceSpan: v }), R = new m({ debounceSpan: v }), o = A(n.value), T = async (e) => d.setBlockArgs(e, S()), x = async (e) => d.setBlockUiState(e, S()), k = async (e, t) => d.setBlockArgsAndUiState(e, t, S()), q = async (e) => d.setNavigationState(e), C = p(() => {
+    const e = Object.entries(o.value.outputs).map(([t, a]) => [t, a.ok && a.value !== void 0 ? a.value : void 0]);
+    return Object.fromEntries(e);
+  }), D = p(() => {
+    const e = Object.entries(o.value.outputs).map(([t, a]) => [t, a && !a.ok ? new G(a.errors) : void 0]);
+    return Object.fromEntries(e);
+  }), s = B({
+    error: "",
+    model: {
+      args: l(o.value.args),
+      ui: l(o.value.ui),
+      outputs: C,
+      outputErrors: D
+    }
+  }), E = W(
+    () => s.model,
+    (e) => {
+      const t = l(e);
+      r("appModel.model", t), U.run(() => k(t.args, t.ui).then(c));
+    },
+    { deep: !0 }
+  ), $ = (e) => {
+    r("updateAppModelSilently", e), E.pause(), s.model.args = l(e.args), s.model.ui = l(e.ui), E.resume();
+  };
   (async () => {
     var e, t;
     for (window.addEventListener("beforeunload", () => {
-      p.value = !0, c.dispose().then(s).catch((a) => {
+      g.value = !0, d.dispose().then(c).catch((a) => {
         b("error in dispose", a);
       });
-    }); !p.value; )
+    }); !g.value; )
       try {
-        const a = await c.getPatches(f.value).then(s);
-        if (r("patches", JSON.stringify(a, null, 2)), r("uTagRef.value", f.value), r("patches.uTag", a.uTag), r("patches.author", a.author), r("data.author", u.author), f.value = a.uTag, a.value.length === 0) {
-          await new Promise((m) => setTimeout(m, P));
+        const a = await d.getPatches(f.value).then(c);
+        if (r("patches.length", a.value.length), r("uTagRef.value", f.value), r("patches.uTag", a.uTag), r("patches.author", a.author), r("data.author", u.author), f.value = a.uTag, a.value.length === 0) {
+          await new Promise((w) => setTimeout(w, Q));
           continue;
         }
-        const l = ((e = u.author) == null ? void 0 : e.authorId) !== ((t = a.author) == null ? void 0 : t.authorId);
-        l || u.isExternalSnapshot ? (r("got external changes, applying them to the snapshot", JSON.stringify(o.value, null, 2)), o.value = O(o.value, a.value, !1, !1).newDocument, u.isExternalSnapshot = l) : o.value = O(o.value, a.value).newDocument, await new Promise((m) => setTimeout(m, P));
+        const i = ((e = u.author) == null ? void 0 : e.authorId) !== ((t = a.author) == null ? void 0 : t.authorId);
+        i || u.isExternalSnapshot ? (r("got external changes, applying them to the snapshot", JSON.stringify(o.value, null, 2)), o.value = O(o.value, a.value, !1, !1).newDocument, $(o.value), u.isExternalSnapshot = i) : o.value = O(o.value, a.value).newDocument, await new Promise((w) => setTimeout(w, Q));
       } catch (a) {
-        H(a) ? (r("patches loop aborted"), p.value = !0) : (b("error in patches loop", a), await new Promise((l) => setTimeout(l, 1e3)));
+        K(a) ? (r("patches loop aborted"), g.value = !0) : (b("error in patches loop", a), await new Promise((i) => setTimeout(i, 1e3)));
       }
   })();
-  const k = h(() => {
-    const e = Object.entries(o.value.outputs).map(([t, a]) => [t, a.ok && a.value !== void 0 ? a.value : void 0]);
-    return Object.fromEntries(e);
-  }), q = h(() => {
-    const e = Object.entries(o.value.outputs).map(([t, a]) => [t, a && !a.ok ? new F(a.errors) : void 0]);
-    return Object.fromEntries(e);
-  }), i = D(
-    {
-      get() {
-        return { args: o.value.args, ui: o.value.ui };
-      },
-      autoSave: !0,
-      onSave(e) {
-        r("onSave", e), M.run(() => V(e.args, e.ui).then(s));
-      }
-    },
-    {
-      outputs: k,
-      outputErrors: q
-    }
-  ), E = () => w(i.model.args), I = () => w(i.model.ui), j = () => w(o.value.navigationState), C = {
-    cloneArgs: E,
-    cloneUiState: I,
-    cloneNavigationState: j,
+  const I = () => l(s.model.args), j = () => l(s.model.ui), P = () => l(o.value.navigationState), z = {
+    cloneArgs: I,
+    cloneUiState: j,
+    cloneNavigationState: P,
     createArgsModel(e = {}) {
       return N({
         get() {
@@ -76,7 +78,7 @@ function ue(n, c, d) {
         validate: e.validate,
         autoSave: !0,
         onSave(t) {
-          y.run(() => T(t).then(s));
+          y.run(() => T(t).then(c));
         }
       });
     },
@@ -91,7 +93,7 @@ function ue(n, c, d) {
         validate: e.validate,
         autoSave: !0,
         onSave(a) {
-          U.run(() => x(a).then(s));
+          M.run(() => x(a).then(c));
         }
       });
     },
@@ -104,7 +106,7 @@ function ue(n, c, d) {
      * @returns An object with unwrapped output values.
      */
     unwrapOutputs(...e) {
-      const t = o.value.outputs, a = e.map((l) => [l, G(t[l])]);
+      const t = o.value.outputs, a = e.map((i) => [i, H(t[i])]);
       return Object.fromEntries(a);
     },
     /**
@@ -114,8 +116,8 @@ function ue(n, c, d) {
      * @returns A promise resolving after the update is applied.
      */
     updateArgs(e) {
-      const t = E();
-      return e(t), r("updateArgs", t), i.model.args = t, y.run(() => T(t).then(s));
+      const t = I();
+      return e(t), r("updateArgs", t), s.model.args = t, y.run(() => T(t).then(c));
     },
     /**
      * Updates the UI state by applying a callback.
@@ -125,8 +127,8 @@ function ue(n, c, d) {
      * @todo Make it mutable since there is already an initial one
      */
     updateUiState(e) {
-      const t = e(I());
-      return r("updateUiState", t), i.model.ui = t, U.run(() => x(t).then(s));
+      const t = e(j());
+      return r("updateUiState", t), s.model.ui = t, M.run(() => x(t).then(c));
     },
     /**
      * Navigates to a specific href by updating the navigation state.
@@ -135,24 +137,24 @@ function ue(n, c, d) {
      * @returns A promise resolving after the navigation state is updated.
      */
     navigateTo(e) {
-      const t = j();
-      return t.href = e, Q.run(() => R(t).then(s));
+      const t = P();
+      return t.href = e, R.run(() => q(t).then(c));
     },
     async allSettled() {
-      return await $(0), M.allSettled();
+      return await L(0), U.allSettled();
     }
   }, J = {
-    closedRef: p,
+    closedRef: g,
     snapshot: o,
-    queryParams: h(() => L(o.value.navigationState.href)),
-    href: h(() => o.value.navigationState.href),
-    hasErrors: h(() => Object.values(o.value.outputs).some((e) => !(e != null && e.ok)))
+    queryParams: p(() => F(o.value.navigationState.href)),
+    href: p(() => o.value.navigationState.href),
+    hasErrors: p(() => Object.values(o.value.outputs).some((e) => !(e != null && e.ok)))
   };
-  return z(Object.assign(i, C, J));
+  return B(Object.assign(s, z, J));
 }
 export {
-  ue as createAppV2,
-  K as createNextAuthorMarker,
-  P as patchPoolingDelay
+  se as createAppV2,
+  X as createNextAuthorMarker,
+  Q as patchPoolingDelay
 };
 //# sourceMappingURL=createAppV2.js.map

package/dist/internal/createAppV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"createAppV2.js","sources":["../../src/internal/createAppV2.ts"],"sourcesContent":["import { deepClone, delay, uniqueId } from '@milaboratories/helpers';\nimport type { Mutable } from '@milaboratories/helpers';\nimport type { NavigationState, BlockOutputsBase, BlockState, PlatformaV2, ValueWithUTag, AuthorMarker } from '@platforma-sdk/model';\nimport { hasAbortError, unwrapResult } from '@platforma-sdk/model';\nimport type { Ref } from 'vue';\nimport { reactive, computed, ref } from 'vue';\nimport type { StateModelOptions, UnwrapOutputs, OutputValues, OutputErrors, AppSettings } from '../types';\nimport { createModel } from '../createModel';\nimport { createAppModel } from './createAppModel';\nimport { parseQuery } from '../urls';\nimport { MultiError, unwrapValueOrErrors } from '../utils';\nimport { applyPatch } from 'fast-json-patch';\nimport { UpdateSerializer } from './UpdateSerializer';\n\nexport const patchPoolingDelay = 100;\n\nexport const createNextAuthorMarker = (marker: AuthorMarker | undefined): AuthorMarker => ({\n  authorId: marker?.authorId ?? uniqueId(),\n  localVersion: (marker?.localVersion ?? 0) + 1,\n});\n\n/**\n * Creates an application instance with reactive state management, outputs, and methods for state updates and navigation.\n *\n * @template Args - The type of arguments used in the application.\n * @template Outputs - The type of block outputs extending `BlockOutputsBase`.\n * @template UiState - The type of the UI state.\n * @template Href - The type of navigation href, defaulting to a string starting with `/`.\n *\n * @param state - Initial state of the application, including args, outputs, UI state, and navigation state.\n * @param platforma - A platform interface for interacting with block states.\n * @param settings - Application settings, such as debug flags.\n *\n * @returns A reactive application object with methods, getters, and state.\n */\nexport function createAppV2<\n  Args = unknown,\n  Outputs extends BlockOutputsBase = BlockOutputsBase,\n  UiState = unknown,\n  Href extends `/${string}` = `/${string}`,\n>(\n  state: ValueWithUTag<BlockState<Args, Outputs, UiState, Href>>,\n  platforma: PlatformaV2<Args, Outputs, UiState, Href>,\n  settings: AppSettings,\n) {\n  type AppModel = {\n    args: Args;\n    ui: UiState;\n  };\n\n  const debug = (msg: string, ...rest: unknown[]) => {\n    if (settings.debug) {\n      console.log(`%c>>> %c${msg}`, 'color: orange; font-weight: bold', 'color: orange', settings.appId, ...rest);\n    }\n  };\n\n  const error = (msg: string, ...rest: unknown[]) => {\n    console.error(`%c>>> %c${msg}`, 'color: red; font-weight: bold', 'color: red', settings.appId, ...rest);\n  };\n\n  const data = {\n    isExternalSnapshot: false,\n    author: {\n      authorId: uniqueId(),\n      localVersion: 0,\n    },\n  };\n\n  const nextAuthorMarker = () => {\n    data.author = createNextAuthorMarker(data.author);\n    debug('nextAuthorMarker', data.author);\n    return data.author;\n  };\n\n  const closedRef = ref(false);\n\n  const uTagRef = ref(state.uTag);\n\n  const debounceSpan = settings.debounceSpan ?? 200;\n\n  const setArgsQueue = new UpdateSerializer({ debounceSpan });\n  const setUiStateQueue = new UpdateSerializer({ debounceSpan });\n  const setArgsAndUiStateQueue = new UpdateSerializer({ debounceSpan });\n  const setNavigationStateQueue = new UpdateSerializer({ debounceSpan });\n  /**\n   * Reactive snapshot of the application state, including args, outputs, UI state, and navigation state.\n   */\n  const snapshot = ref<{\n    args: Args;\n    outputs: Partial<Outputs>;\n    ui: UiState;\n    navigationState: NavigationState<Href>;\n  }>(state.value) as Ref<{\n    args: Args;\n    outputs: Partial<Outputs>;\n    ui: UiState;\n    navigationState: NavigationState<Href>;\n  }>;\n\n  const setBlockArgs = async (args: Args) => {\n    return platforma.setBlockArgs(args, nextAuthorMarker());\n  };\n\n  const setBlockUiState = async (ui: UiState) => {\n    return platforma.setBlockUiState(ui, nextAuthorMarker());\n  };\n\n  const setBlockArgsAndUiState = async (args: Args, ui: UiState) => {\n    return platforma.setBlockArgsAndUiState(args, ui, nextAuthorMarker());\n  };\n\n  const setNavigationState = async (state: NavigationState<Href>) => {\n    return platforma.setNavigationState(state);\n  };\n\n  (async () => {\n    window.addEventListener('beforeunload', () => {\n      closedRef.value = true;\n      platforma.dispose().then(unwrapResult).catch((err) => {\n        error('error in dispose', err);\n      });\n    });\n\n    while (!closedRef.value) {\n      try {\n        const patches = await platforma.getPatches(uTagRef.value).then(unwrapResult);\n\n        debug('patches', JSON.stringify(patches, null, 2));\n        debug('uTagRef.value', uTagRef.value);\n        debug('patches.uTag', patches.uTag);\n        debug('patches.author', patches.author);\n        debug('data.author', data.author);\n\n        uTagRef.value = patches.uTag;\n\n        if (patches.value.length === 0) {\n          await new Promise((resolve) => setTimeout(resolve, patchPoolingDelay));\n          continue;\n        }\n\n        const isAuthorChanged = data.author?.authorId !== patches.author?.authorId;\n\n        // Immutable behavior, apply external changes to the snapshot\n        if (isAuthorChanged || data.isExternalSnapshot) {\n          debug('got external changes, applying them to the snapshot', JSON.stringify(snapshot.value, null, 2));\n          snapshot.value = applyPatch(snapshot.value, patches.value, false, false).newDocument;\n          data.isExternalSnapshot = isAuthorChanged;\n        } else {\n          // Mutable behavior\n          snapshot.value = applyPatch(snapshot.value, patches.value).newDocument;\n        }\n\n        await new Promise((resolve) => setTimeout(resolve, patchPoolingDelay));\n      } catch (err) {\n        if (hasAbortError(err)) {\n          debug('patches loop aborted');\n          closedRef.value = true;\n        } else {\n          error('error in patches loop', err);\n          await new Promise((resolve) => setTimeout(resolve, 1000));\n        }\n      }\n    }\n  })();\n\n  const outputs = computed<OutputValues<Outputs>>(() => {\n    const entries = Object.entries(snapshot.value.outputs as Partial<Readonly<Outputs>>).map(([k, vOrErr]) => [k, vOrErr.ok && vOrErr.value !== undefined ? vOrErr.value : undefined]);\n    return Object.fromEntries(entries);\n  });\n\n  const outputErrors = computed<OutputErrors<Outputs>>(() => {\n    const entries = Object.entries(snapshot.value.outputs as Partial<Readonly<Outputs>>).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);\n    return Object.fromEntries(entries);\n  });\n\n  const appModel = createAppModel(\n    {\n      get() {\n        return { args: snapshot.value.args, ui: snapshot.value.ui } as AppModel;\n      },\n      autoSave: true,\n      onSave(newData: AppModel) {\n        debug('onSave', newData);\n        setArgsAndUiStateQueue.run(() => setBlockArgsAndUiState(newData.args, newData.ui).then(unwrapResult));\n      },\n    },\n    {\n      outputs,\n      outputErrors,\n    },\n    settings,\n  );\n\n  const cloneArgs = () => deepClone(appModel.model.args) as Args;\n  const cloneUiState = () => deepClone(appModel.model.ui) as UiState;\n  const cloneNavigationState = () => deepClone(snapshot.value.navigationState) as Mutable<NavigationState<Href>>;\n\n  const methods = {\n    cloneArgs,\n    cloneUiState,\n    cloneNavigationState,\n    createArgsModel<T extends Args = Args>(options: StateModelOptions<Args, T> = {}) {\n      return createModel<T, Args>({\n        get() {\n          if (options.transform) {\n            return options.transform(snapshot.value.args as Args);\n          }\n\n          return snapshot.value.args as T;\n        },\n        validate: options.validate,\n        autoSave: true,\n        onSave(newArgs) {\n          setArgsQueue.run(() => setBlockArgs(newArgs).then(unwrapResult));\n        },\n      });\n    },\n    /**\n     * defaultUiState is temporarily here, remove it after implementing initialUiState\n     */\n    createUiModel<T extends UiState = UiState>(options: StateModelOptions<UiState, T> = {}, defaultUiState: () => UiState) {\n      return createModel<T, UiState>({\n        get() {\n          if (options.transform) {\n            return options.transform(snapshot.value.ui as UiState);\n          }\n\n          return (snapshot.value.ui ?? defaultUiState()) as T;\n        },\n        validate: options.validate,\n        autoSave: true,\n        onSave(newData) {\n          setUiStateQueue.run(() => setBlockUiState(newData).then(unwrapResult));\n        },\n      });\n    },\n    /**\n     * Retrieves the unwrapped values of outputs for the given keys.\n     *\n     * @template K - Keys of the outputs to unwrap.\n     * @param keys - List of output names.\n     * @throws Error if the outputs contain errors.\n     * @returns An object with unwrapped output values.\n     */\n    unwrapOutputs<K extends keyof Outputs>(...keys: K[]): UnwrapOutputs<Outputs, K> {\n      const outputs = snapshot.value.outputs as Partial<Readonly<Outputs>>;\n      const entries = keys.map((key) => [key, unwrapValueOrErrors(outputs[key])]);\n      return Object.fromEntries(entries);\n    },\n    /**\n     * Updates the arguments state by applying a callback.\n     *\n     * @param cb - Callback to modify the current arguments.\n     * @returns A promise resolving after the update is applied.\n     */\n    updateArgs(cb: (args: Args) => void): Promise<boolean> {\n      const newArgs = cloneArgs();\n      cb(newArgs);\n      debug('updateArgs', newArgs);\n      appModel.model.args = newArgs;\n      return setArgsQueue.run(() => setBlockArgs(newArgs).then(unwrapResult));\n    },\n    /**\n     * Updates the UI state by applying a callback.\n     *\n     * @param cb - Callback to modify the current UI state.\n     * @returns A promise resolving after the update is applied.\n     * @todo Make it mutable since there is already an initial one\n     */\n    updateUiState(cb: (args: UiState) => UiState): Promise<boolean> {\n      const newUiState = cb(cloneUiState());\n      debug('updateUiState', newUiState);\n      appModel.model.ui = newUiState;\n      return setUiStateQueue.run(() => setBlockUiState(newUiState).then(unwrapResult));\n    },\n    /**\n     * Navigates to a specific href by updating the navigation state.\n     *\n     * @param href - The target href to navigate to.\n     * @returns A promise resolving after the navigation state is updated.\n     */\n    navigateTo(href: Href) {\n      const newState = cloneNavigationState();\n      newState.href = href;\n      return setNavigationStateQueue.run(() => setNavigationState(newState).then(unwrapResult));\n    },\n    async allSettled() {\n      await delay(0);\n      return setArgsAndUiStateQueue.allSettled();\n    },\n  };\n\n  const getters = {\n    closedRef,\n    snapshot,\n    queryParams: computed(() => parseQuery<Href>(snapshot.value.navigationState.href as Href)),\n    href: computed(() => snapshot.value.navigationState.href),\n    hasErrors: computed(() => Object.values(snapshot.value.outputs as Partial<Readonly<Outputs>>).some((v) => !v?.ok)),\n  };\n\n  return reactive(Object.assign(appModel, methods, getters));\n}\n\nexport type BaseAppV2<\n  Args = unknown,\n  Outputs extends BlockOutputsBase = BlockOutputsBase,\n  UiState = unknown,\n  Href extends `/${string}` = `/${string}`,\n> = ReturnType<typeof createAppV2<Args, Outputs, UiState, Href>>;\n"],"names":["patchPoolingDelay","createNextAuthorMarker","marker","uniqueId","createAppV2","state","platforma","settings","debug","msg","rest","error","data","nextAuthorMarker","closedRef","ref","uTagRef","debounceSpan","setArgsQueue","UpdateSerializer","setUiStateQueue","setArgsAndUiStateQueue","setNavigationStateQueue","snapshot","setBlockArgs","args","setBlockUiState","ui","setBlockArgsAndUiState","setNavigationState","unwrapResult","err","patches","resolve","isAuthorChanged","_a","_b","applyPatch","hasAbortError","outputs","computed","entries","k","vOrErr","outputErrors","MultiError","appModel","createAppModel","newData","cloneArgs","deepClone","cloneUiState","cloneNavigationState","methods","options","createModel","newArgs","defaultUiState","keys","key","unwrapValueOrErrors","cb","newUiState","href","newState","delay","getters","parseQuery","v","reactive"],"mappings":"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"}
+{"version":3,"file":"createAppV2.js","sources":["../../src/internal/createAppV2.ts"],"sourcesContent":["import { deepClone, delay, uniqueId } from '@milaboratories/helpers';\nimport type { Mutable } from '@milaboratories/helpers';\nimport type { NavigationState, BlockOutputsBase, BlockState, PlatformaV2, ValueWithUTag, AuthorMarker } from '@platforma-sdk/model';\nimport { hasAbortError, unwrapResult } from '@platforma-sdk/model';\nimport type { Ref } from 'vue';\nimport { reactive, computed, ref, watch } from 'vue';\nimport type { StateModelOptions, UnwrapOutputs, OutputValues, OutputErrors, AppSettings } from '../types';\nimport { createModel } from '../createModel';\nimport { parseQuery } from '../urls';\nimport { MultiError, unwrapValueOrErrors } from '../utils';\nimport { applyPatch } from 'fast-json-patch';\nimport { UpdateSerializer } from './UpdateSerializer';\n\nexport const patchPoolingDelay = 100;\n\nexport const createNextAuthorMarker = (marker: AuthorMarker | undefined): AuthorMarker => ({\n  authorId: marker?.authorId ?? uniqueId(),\n  localVersion: (marker?.localVersion ?? 0) + 1,\n});\n\n/**\n * Creates an application instance with reactive state management, outputs, and methods for state updates and navigation.\n *\n * @template Args - The type of arguments used in the application.\n * @template Outputs - The type of block outputs extending `BlockOutputsBase`.\n * @template UiState - The type of the UI state.\n * @template Href - The type of navigation href, defaulting to a string starting with `/`.\n *\n * @param state - Initial state of the application, including args, outputs, UI state, and navigation state.\n * @param platforma - A platform interface for interacting with block states.\n * @param settings - Application settings, such as debug flags.\n *\n * @returns A reactive application object with methods, getters, and state.\n */\nexport function createAppV2<\n  Args = unknown,\n  Outputs extends BlockOutputsBase = BlockOutputsBase,\n  UiState = unknown,\n  Href extends `/${string}` = `/${string}`,\n>(\n  state: ValueWithUTag<BlockState<Args, Outputs, UiState, Href>>,\n  platforma: PlatformaV2<Args, Outputs, UiState, Href>,\n  settings: AppSettings,\n) {\n  const debug = (msg: string, ...rest: unknown[]) => {\n    if (settings.debug) {\n      console.log(`%c>>> %c${msg}`, 'color: orange; font-weight: bold', 'color: orange', settings.appId, ...rest);\n    }\n  };\n\n  const error = (msg: string, ...rest: unknown[]) => {\n    console.error(`%c>>> %c${msg}`, 'color: red; font-weight: bold', 'color: red', settings.appId, ...rest);\n  };\n\n  const data = {\n    isExternalSnapshot: false,\n    author: {\n      authorId: uniqueId(),\n      localVersion: 0,\n    },\n  };\n\n  const nextAuthorMarker = () => {\n    data.author = createNextAuthorMarker(data.author);\n    debug('nextAuthorMarker', data.author);\n    return data.author;\n  };\n\n  const closedRef = ref(false);\n\n  const uTagRef = ref(state.uTag);\n\n  const debounceSpan = settings.debounceSpan ?? 200;\n\n  const setArgsQueue = new UpdateSerializer({ debounceSpan });\n  const setUiStateQueue = new UpdateSerializer({ debounceSpan });\n  const setArgsAndUiStateQueue = new UpdateSerializer({ debounceSpan });\n  const setNavigationStateQueue = new UpdateSerializer({ debounceSpan });\n  /**\n   * Reactive snapshot of the application state, including args, outputs, UI state, and navigation state.\n   */\n  const snapshot = ref<{\n    args: Args;\n    outputs: Partial<Outputs>;\n    ui: UiState;\n    navigationState: NavigationState<Href>;\n  }>(state.value) as Ref<{\n    args: Args;\n    outputs: Partial<Outputs>;\n    ui: UiState;\n    navigationState: NavigationState<Href>;\n  }>;\n\n  const setBlockArgs = async (args: Args) => {\n    return platforma.setBlockArgs(args, nextAuthorMarker());\n  };\n\n  const setBlockUiState = async (ui: UiState) => {\n    return platforma.setBlockUiState(ui, nextAuthorMarker());\n  };\n\n  const setBlockArgsAndUiState = async (args: Args, ui: UiState) => {\n    return platforma.setBlockArgsAndUiState(args, ui, nextAuthorMarker());\n  };\n\n  const setNavigationState = async (state: NavigationState<Href>) => {\n    return platforma.setNavigationState(state);\n  };\n\n  const outputs = computed<OutputValues<Outputs>>(() => {\n    const entries = Object.entries(snapshot.value.outputs as Partial<Readonly<Outputs>>).map(([k, vOrErr]) => [k, vOrErr.ok && vOrErr.value !== undefined ? vOrErr.value : undefined]);\n    return Object.fromEntries(entries);\n  });\n\n  const outputErrors = computed<OutputErrors<Outputs>>(() => {\n    const entries = Object.entries(snapshot.value.outputs as Partial<Readonly<Outputs>>).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);\n    return Object.fromEntries(entries);\n  });\n\n  const appModel = reactive({\n    error: '',\n    model: {\n      args: deepClone(snapshot.value.args) as Args,\n      ui: deepClone(snapshot.value.ui) as UiState,\n      outputs,\n      outputErrors,\n    },\n  }) as {\n    error: string;\n    model: {\n      args: Args;\n      ui: UiState;\n      outputs: OutputValues<Outputs>;\n      outputErrors: OutputErrors<Outputs>;\n    };\n  };\n\n  const appModelWatch = watch(\n    () => appModel.model,\n    (_newData) => {\n      const newData = deepClone(_newData);\n      debug('appModel.model', newData);\n      setArgsAndUiStateQueue.run(() => setBlockArgsAndUiState(newData.args, newData.ui).then(unwrapResult));\n    },\n    { deep: true },\n  );\n\n  const updateAppModelSilently = (newData: {\n    args: Args;\n    ui: UiState;\n  }) => {\n    debug('updateAppModelSilently', newData);\n    appModelWatch.pause();\n    appModel.model.args = deepClone(newData.args) as Args;\n    appModel.model.ui = deepClone(newData.ui) as UiState;\n    appModelWatch.resume();\n  };\n\n  (async () => {\n    window.addEventListener('beforeunload', () => {\n      closedRef.value = true;\n      platforma.dispose().then(unwrapResult).catch((err) => {\n        error('error in dispose', err);\n      });\n    });\n\n    while (!closedRef.value) {\n      try {\n        const patches = await platforma.getPatches(uTagRef.value).then(unwrapResult);\n\n        debug('patches.length', patches.value.length);\n        debug('uTagRef.value', uTagRef.value);\n        debug('patches.uTag', patches.uTag);\n        debug('patches.author', patches.author);\n        debug('data.author', data.author);\n\n        uTagRef.value = patches.uTag;\n\n        if (patches.value.length === 0) {\n          await new Promise((resolve) => setTimeout(resolve, patchPoolingDelay));\n          continue;\n        }\n\n        const isAuthorChanged = data.author?.authorId !== patches.author?.authorId;\n\n        // Immutable behavior, apply external changes to the snapshot\n        if (isAuthorChanged || data.isExternalSnapshot) {\n          debug('got external changes, applying them to the snapshot', JSON.stringify(snapshot.value, null, 2));\n          snapshot.value = applyPatch(snapshot.value, patches.value, false, false).newDocument;\n          updateAppModelSilently(snapshot.value);\n          data.isExternalSnapshot = isAuthorChanged;\n        } else {\n          // Mutable behavior\n          snapshot.value = applyPatch(snapshot.value, patches.value).newDocument;\n        }\n\n        await new Promise((resolve) => setTimeout(resolve, patchPoolingDelay));\n      } catch (err) {\n        if (hasAbortError(err)) {\n          debug('patches loop aborted');\n          closedRef.value = true;\n        } else {\n          error('error in patches loop', err);\n          await new Promise((resolve) => setTimeout(resolve, 1000));\n        }\n      }\n    }\n  })();\n\n  const cloneArgs = () => deepClone(appModel.model.args) as Args;\n  const cloneUiState = () => deepClone(appModel.model.ui) as UiState;\n  const cloneNavigationState = () => deepClone(snapshot.value.navigationState) as Mutable<NavigationState<Href>>;\n\n  const methods = {\n    cloneArgs,\n    cloneUiState,\n    cloneNavigationState,\n    createArgsModel<T extends Args = Args>(options: StateModelOptions<Args, T> = {}) {\n      return createModel<T, Args>({\n        get() {\n          if (options.transform) {\n            return options.transform(snapshot.value.args as Args);\n          }\n\n          return snapshot.value.args as T;\n        },\n        validate: options.validate,\n        autoSave: true,\n        onSave(newArgs) {\n          setArgsQueue.run(() => setBlockArgs(newArgs).then(unwrapResult));\n        },\n      });\n    },\n    /**\n     * defaultUiState is temporarily here, remove it after implementing initialUiState\n     */\n    createUiModel<T extends UiState = UiState>(options: StateModelOptions<UiState, T> = {}, defaultUiState: () => UiState) {\n      return createModel<T, UiState>({\n        get() {\n          if (options.transform) {\n            return options.transform(snapshot.value.ui as UiState);\n          }\n\n          return (snapshot.value.ui ?? defaultUiState()) as T;\n        },\n        validate: options.validate,\n        autoSave: true,\n        onSave(newData) {\n          setUiStateQueue.run(() => setBlockUiState(newData).then(unwrapResult));\n        },\n      });\n    },\n    /**\n     * Retrieves the unwrapped values of outputs for the given keys.\n     *\n     * @template K - Keys of the outputs to unwrap.\n     * @param keys - List of output names.\n     * @throws Error if the outputs contain errors.\n     * @returns An object with unwrapped output values.\n     */\n    unwrapOutputs<K extends keyof Outputs>(...keys: K[]): UnwrapOutputs<Outputs, K> {\n      const outputs = snapshot.value.outputs as Partial<Readonly<Outputs>>;\n      const entries = keys.map((key) => [key, unwrapValueOrErrors(outputs[key])]);\n      return Object.fromEntries(entries);\n    },\n    /**\n     * Updates the arguments state by applying a callback.\n     *\n     * @param cb - Callback to modify the current arguments.\n     * @returns A promise resolving after the update is applied.\n     */\n    updateArgs(cb: (args: Args) => void): Promise<boolean> {\n      const newArgs = cloneArgs();\n      cb(newArgs);\n      debug('updateArgs', newArgs);\n      appModel.model.args = newArgs;\n      return setArgsQueue.run(() => setBlockArgs(newArgs).then(unwrapResult));\n    },\n    /**\n     * Updates the UI state by applying a callback.\n     *\n     * @param cb - Callback to modify the current UI state.\n     * @returns A promise resolving after the update is applied.\n     * @todo Make it mutable since there is already an initial one\n     */\n    updateUiState(cb: (args: UiState) => UiState): Promise<boolean> {\n      const newUiState = cb(cloneUiState());\n      debug('updateUiState', newUiState);\n      appModel.model.ui = newUiState;\n      return setUiStateQueue.run(() => setBlockUiState(newUiState).then(unwrapResult));\n    },\n    /**\n     * Navigates to a specific href by updating the navigation state.\n     *\n     * @param href - The target href to navigate to.\n     * @returns A promise resolving after the navigation state is updated.\n     */\n    navigateTo(href: Href) {\n      const newState = cloneNavigationState();\n      newState.href = href;\n      return setNavigationStateQueue.run(() => setNavigationState(newState).then(unwrapResult));\n    },\n    async allSettled() {\n      await delay(0);\n      return setArgsAndUiStateQueue.allSettled();\n    },\n  };\n\n  const getters = {\n    closedRef,\n    snapshot,\n    queryParams: computed(() => parseQuery<Href>(snapshot.value.navigationState.href as Href)),\n    href: computed(() => snapshot.value.navigationState.href),\n    hasErrors: computed(() => Object.values(snapshot.value.outputs as Partial<Readonly<Outputs>>).some((v) => !v?.ok)),\n  };\n\n  return reactive(Object.assign(appModel, methods, getters));\n}\n\nexport type BaseAppV2<\n  Args = unknown,\n  Outputs extends BlockOutputsBase = BlockOutputsBase,\n  UiState = unknown,\n  Href extends `/${string}` = `/${string}`,\n> = ReturnType<typeof createAppV2<Args, Outputs, UiState, Href>>;\n"],"names":["patchPoolingDelay","createNextAuthorMarker","marker","uniqueId","createAppV2","state","platforma","settings","debug","msg","rest","error","data","nextAuthorMarker","closedRef","ref","uTagRef","debounceSpan","setArgsQueue","UpdateSerializer","setUiStateQueue","setArgsAndUiStateQueue","setNavigationStateQueue","snapshot","setBlockArgs","args","setBlockUiState","ui","setBlockArgsAndUiState","setNavigationState","outputs","computed","entries","k","vOrErr","outputErrors","MultiError","appModel","reactive","deepClone","appModelWatch","watch","_newData","newData","unwrapResult","updateAppModelSilently","err","patches","resolve","isAuthorChanged","_a","_b","applyPatch","hasAbortError","cloneArgs","cloneUiState","cloneNavigationState","methods","options","createModel","newArgs","defaultUiState","keys","key","unwrapValueOrErrors","cb","newUiState","href","newState","delay","getters","parseQuery","v"],"mappings":"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"}

package/dist/lib/ui/uikit/dist/components/DataTable/TableComponent.vue.js

@@ -65,7 +65,7 @@ import "../../colors/gradient.js";
 .ui-text-area{--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);width:100%;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.ui-text-area__envelope{font-family:var(--font-family-base)}.ui-text-area textarea{min-height:calc(var(--control-height) - 2px);width:100%;padding:10px 12px;border:none;font-size:inherit;background-color:transparent;color:var(--txt-01);caret-color:var(--border-color-focus);cursor:inherit;resize:none;--thumb-color: var(--ic-02);overflow-y:auto}.ui-text-area textarea::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.ui-text-area textarea::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.ui-text-area textarea::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.ui-text-area textarea:focus{outline:none}.ui-text-area textarea::placeholder{color:var(--color-placeholder)}.ui-text-area label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.ui-text-area label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.ui-text-area__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.ui-text-area__append{display:flex;flex-direction:row;align-items:center;gap:4px}.ui-text-area__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area:hover{--contour-color: var(--control-hover-color)}.ui-text-area:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.ui-text-area:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.ui-text-area.dashed .ui-text-area__contour{border-style:dashed}.ui-text-area.nonEmpty{--prefix-color: var(--txt-01)}.ui-text-area.error{--contour-color: var(--txt-error)}.ui-text-area.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.ui-text-area.disabled *{color:var(--contour-color)}
 .pl-text-field{--pl-text-field-text-color: var(--txt-01);--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--show-clearable: none;width:100%;min-width:160px;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.pl-text-field__envelope{font-family:var(--font-family-base)}.pl-text-field input{font-family:var(--font-family-base);font-weight:500;min-height:calc(var(--control-height) - 2px);line-height:20px;width:100%;padding:0 12px;border:none;font-size:inherit;background-color:transparent;color:var(--pl-text-field-text-color);caret-color:var(--border-color-focus);cursor:inherit}.pl-text-field input:focus{outline:none}.pl-text-field input::placeholder{color:var(--color-placeholder)}.pl-text-field label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-text-field label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-text-field__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-text-field__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-text-field__append{padding-right:12px;display:flex;flex-direction:row;align-items:center;gap:4px;cursor:text}.pl-text-field__append .icon-16{cursor:pointer}.pl-text-field__append .mask-16{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-text-field__clearable{display:var(--show-clearable)!important;--icon-color: var(--ic-02) !important}.pl-text-field__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field:hover{--contour-color: var(--control-hover-color);--show-clearable: inline-block}.pl-text-field:focus-within{--show-clearable: inline-block}.pl-text-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-text-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-text-field.dashed .pl-text-field__contour{border-style:dashed}.pl-text-field.nonEmpty{--prefix-color: var(--txt-01)}.pl-text-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-text-field.disabled{--contour-color: var(--color-dis-01);--label-color: var(--dis-01);--pl-text-field-text-color: var(--dis-01);--mask-icon-bg-color: var(--dis-01);cursor:not-allowed}
 .ui-toggle-switch{--handle-ml: 0;--body-bg: var(--bg-base-light);--body-shadow: var(--btn-group-shape-shadow);display:flex;align-items:center;gap:12px;outline:none}.ui-toggle-switch__body{width:40px;height:24px;display:flex;padding:5px;border-radius:12px;border:1px solid var(--color-ic-01);box-shadow:var(--body-shadow);background:var(--body-bg);cursor:pointer}.ui-toggle-switch__handle{width:12px;height:12px;border-radius:12px;border:1px solid var(--color-ic-01);background:var(--color-ic-00);margin-left:var(--handle-ml)}.ui-toggle-switch.active{--body-bg: var(--btn-switcher-bg);--handle-ml: auto}.ui-toggle-switch:focus-visible{--label-color: var(--txt-focus);--body-shadow: var(--btn-group-shape-shadow), 0 0 0 2px #fff, 0 0 0 4px var(--border-color-focus)}
-.pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--contour-offset: 2px;--icon-color: #000;width:100%;height:var(--control-height, 40px);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}
+.pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--contour-offset: 2px;--icon-color: #000;position:relative;z-index:0;width:100%;height:var(--control-height, 40px);border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}
 .pl-notification-alert{padding:12px;position:relative;border-radius:6px;border:1px solid var(--border-color-default);min-height:40px;width:256px;max-height:100%;overflow:auto}.pl-notification-alert .ui-btn-ghost{position:absolute;right:0;top:0}.pl-notification-alert__close{width:32px;min-width:28px}.pl-notification-alert__close .pl-btn-ghost{position:absolute;top:0;right:0;width:40px!important;height:40px!important}.pl-notification-alert__wrapper{flex-grow:1;overflow:auto}.pl-notification-alert.neutral{background:var(--notification-neutral)}.pl-notification-alert.error{background:var(--notification-error)}.pl-notification-alert.success{background:var(--notification-success)}.pl-notification-alert.warning{background:var(--notification-warning)}`)), document.head.appendChild(w);
     }
   } catch (p) {

package/dist/lib/ui/uikit/dist/components/PlFileInput/PlFileInput.vue.js

@@ -1,19 +1,19 @@
 import { defineComponent as M, reactive as P, useSlots as j, computed as i, watch as I, ref as q, createElementBlock as n, openBlock as o, Fragment as S, createElementVNode as u, createVNode as D, normalizeClass as B, createCommentVNode as s, withModifiers as N, withKeys as H, createBlock as p, normalizeStyle as K, toDisplayString as c, unref as r, withCtx as L, renderSlot as Q, createTextVNode as R } from "vue";
-import U from "../PlTooltip/PlTooltip.vue.js";
-import Y from "../PlFileDialog/PlFileDialog.vue.js";
-import f from "../PlIcon24/PlIcon24.vue.js";
+import { prettyBytes as x } from "../../lib/util/helpers/dist/index.js";
 import "../../sdk/model/dist/index.js";
+import U from "../../generated/components/svg/images/SvgRequired.vue2.js";
+import { getErrorMessage as Y } from "../../helpers/error.js";
 import A from "../../utils/DoubleContour.vue.js";
 import { useLabelNotch as G } from "../../utils/useLabelNotch.js";
-import { prettyBytes as x } from "../../lib/util/helpers/dist/index.js";
-import J from "../../generated/components/svg/images/SvgRequired.vue2.js";
-import { getErrorMessage as W } from "../../helpers/error.js";
+import J from "../PlFileDialog/PlFileDialog.vue.js";
+import f from "../PlIcon24/PlIcon24.vue.js";
+import W from "../PlTooltip/PlTooltip.vue.js";
 import { getFileNameFromHandle as X, getFilePathFromHandle as Z } from "../../lib/model/common/dist/index.js";
 (function() {
   try {
     if (typeof document < "u") {
       var h = document.createElement("style");
-      h.appendChild(document.createTextNode(".pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--contour-offset: 2px;--icon-color: #000;width:100%;height:var(--control-height, 40px);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}")), document.head.appendChild(h);
+      h.appendChild(document.createTextNode(".pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--contour-offset: 2px;--icon-color: #000;position:relative;z-index:0;width:100%;height:var(--control-height, 40px);border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}")), document.head.appendChild(h);
     }
   } catch (v) {
     console.error("vite-plugin-css-injected-by-js", v);
@@ -59,7 +59,7 @@ const ee = {
         } catch (d) {
           return a.error = d instanceof Error ? d.message : String(d), e;
         }
-    }, y = i(() => b(l.modelValue, X)), w = i(() => b(l.modelValue, Z)), O = i(() => l.progress && !l.progress.done), E = i(() => l.progress && l.progress.done), k = i(() => W(a.error, l.error)), m = i(() => typeof k.value == "string"), V = i(() => {
+    }, y = i(() => b(l.modelValue, X)), w = i(() => b(l.modelValue, Z)), O = i(() => l.progress && !l.progress.done), E = i(() => l.progress && l.progress.done), k = i(() => Y(a.error, l.error)), m = i(() => typeof k.value == "string"), V = i(() => {
       const { status: e, done: t } = l.progress ?? {};
       return !e || !e.bytesTotal ? "" : e.bytesProcessed && !t ? x(e.bytesProcessed, {}) + " / " + x(e.bytesTotal, {}) : x(e.bytesTotal, {});
     }), T = i(() => {
@@ -96,9 +96,9 @@ const ee = {
             class: "pl-file-input__progress"
           }, null, 4),
           !e.cellStyle && e.label ? (o(), n("label", ee, [
-            e.required ? (o(), p(J, { key: 0 })) : s("", !0),
+            e.required ? (o(), p(U, { key: 0 })) : s("", !0),
             u("span", null, c(e.label), 1),
-            r(_).tooltip || w.value ? (o(), p(r(U), {
+            r(_).tooltip || w.value ? (o(), p(r(W), {
               key: 1,
               class: "info",
               position: "top"
@@ -139,7 +139,7 @@ const ee = {
         ], 34),
         m.value ? (o(), n("div", te, c(k.value), 1)) : e.helper ? (o(), n("div", re, c(e.helper), 1)) : s("", !0)
       ], 2),
-      D(r(Y), {
+      D(r(J), {
         modelValue: a.fileDialogOpen,
         "onUpdate:modelValue": t[0] || (t[0] = (d) => a.fileDialogOpen = d),
         "close-on-outside-click": e.fileDialogCloseOnOutsideClick,

package/dist/lib/ui/uikit/dist/components/PlFileInput/PlFileInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlFileInput.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlFileInput/PlFileInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './pl-file-input.scss';\nimport { PlTooltip } from '../PlTooltip';\nimport { PlFileDialog } from '../PlFileDialog';\nimport type { ImportedFiles } from '../../types';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { computed, reactive, ref, useSlots, watch } from 'vue';\nimport type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';\nimport { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { prettyBytes } from '@milaboratories/helpers';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst data = reactive({\n  fileDialogOpen: false,\n  error: undefined as undefined | string,\n});\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: ImportFileHandle | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current import file handle.\n     */\n    modelValue: ImportFileHandle | undefined;\n    /**\n     * The label to display above the input field.\n     */\n    label?: string;\n    /**\n     * If `true`, the input field is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the component border is dashed.\n     */\n    dashed?: boolean;\n    /**\n     * Allowed file extensions (should start with `.`)\n     */\n    extensions?: string[];\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Import/Upload progress\n     */\n    progress?: ImportProgress;\n    /**\n     * An error message to display below the input field.\n     */\n    error?: unknown;\n    /**\n     * A helper text to display below the input field when there are no errors.\n     */\n    helper?: string;\n    /**\n     * Remove rounded border and change styles\n     */\n    cellStyle?: boolean;\n    /**\n     * File dialog title\n     */\n    fileDialogTitle?: string;\n    /**\n     * If `true`, the file dialog window closes when clicking outside the modal area (default: `true`)\n     */\n    fileDialogCloseOnOutsideClick?: boolean;\n  }>(),\n  {\n    label: undefined,\n    extensions: undefined,\n    fileDialogTitle: undefined,\n    placeholder: undefined,\n    progress: undefined,\n    error: undefined,\n    helper: undefined,\n    cellStyle: false,\n    fileDialogCloseOnOutsideClick: true,\n  },\n);\n\nconst tryValue = <T extends ImportFileHandle>(v: T | undefined, cb: (v: T) => string | undefined) => {\n  if (!v) {\n    return undefined;\n  }\n\n  try {\n    return cb(v);\n  } catch (err) {\n    data.error = err instanceof Error ? err.message : String(err);\n    return v;\n  }\n};\n\nconst fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));\n\nconst filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));\n\nconst isUploading = computed(() => props.progress && !props.progress.done);\n\nconst isUploaded = computed(() => props.progress && props.progress.done);\n\nconst computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));\n\nconst hasErrors = computed(() => typeof computedErrorMessage.value === 'string');\n\nconst uploadStats = computed(() => {\n  const { status, done } = props.progress ?? {};\n\n  if (!status || !status.bytesTotal) {\n    return '';\n  }\n\n  if (status.bytesProcessed && !done) {\n    return prettyBytes(status.bytesProcessed, {}) + ' / ' + prettyBytes(status.bytesTotal, {});\n  }\n\n  return prettyBytes(status.bytesTotal, {});\n});\n\nconst progressStyle = computed(() => {\n  const { progress } = props;\n\n  if (!progress) {\n    return {};\n  }\n\n  return {\n    width: progress.done ? '100%' : Math.round((progress.status?.progress ?? 0) * 100) + '%',\n  };\n});\n\nconst openFileDialog = () => {\n  data.fileDialogOpen = true;\n};\n\nconst onImport = (v: ImportedFiles) => {\n  if (v.files.length) {\n    emit('update:modelValue', v.files[0]);\n  }\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nwatch(\n  () => props.modelValue,\n  () => (data.error = undefined),\n  { immediate: true },\n);\n\nconst rootRef = ref();\n\nif (!props.cellStyle) {\n  useLabelNotch(rootRef);\n}\n</script>\n\n<template>\n  <div :class=\"{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }\" class=\"pl-file-input__envelope\">\n    <div\n      ref=\"rootRef\"\n      :class=\"{ dashed, error: hasErrors }\"\n      class=\"pl-file-input\"\n      tabindex=\"0\"\n      @keyup.enter=\"openFileDialog\"\n      @click.stop=\"openFileDialog\"\n    >\n      <div :style=\"progressStyle\" class=\"pl-file-input__progress\" />\n      <label v-if=\"!cellStyle && label\" ref=\"label\">\n        <SvgRequired v-if=\"required\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip || filePath\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot v-if=\"slots.tooltip\" name=\"tooltip\" />\n            <template v-else>{{ filePath }}</template>\n          </template>\n        </PlTooltip>\n      </label>\n      <PlMaskIcon24 v-if=\"hasErrors\" name=\"restart\" />\n      <PlMaskIcon24 v-else-if=\"isUploading\" name=\"cloud-upload\" />\n      <PlMaskIcon24 v-else-if=\"isUploaded\" name=\"success\" />\n      <PlMaskIcon24 v-else name=\"paper-clip\" />\n      <div :data-placeholder=\"placeholder ?? 'Choose file'\" class=\"pl-file-input__filename\">\n        {{ fileName }}\n      </div>\n      <div v-if=\"uploadStats\" class=\"pl-file-input__stats\">{{ uploadStats }}</div>\n      <PlMaskIcon24 v-if=\"modelValue\" class=\"pl-file-input__clear\" name=\"close\" @click.stop=\"clear\" />\n      <DoubleContour class=\"pl-file-input__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-file-input__error\">\n      {{ computedErrorMessage }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-file-input__helper\">{{ helper }}</div>\n  </div>\n  <PlFileDialog\n    v-model=\"data.fileDialogOpen\"\n    :close-on-outside-click=\"fileDialogCloseOnOutsideClick\"\n    :extensions=\"extensions\"\n    :title=\"fileDialogTitle\"\n    @import:files=\"onImport\"\n  />\n</template>\n"],"names":["N","T","K","useSlots","v","err","data","k","s","props","h","o","x","E","P","V","Y","b","status","computed","y","t","e","progress","openFileDialog","emit","clear","watch","U","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAAA,WAAsBC,EAAA,GAAA;AAAA,UACJ,IAAAC,EAAA;AAAA,MAChB,gBAAO;AAAA,MACR,OAEaC;AAAAA,IAuEPC,CAAAA,GAAAA,IAAAA,EAAAA,GAAAA,IAAAA,GAAAA,IAAAA,GAAAA,IAAAA,CAAAA,GAAAA,MAAAA;AAID,UAAA;AACF,YAAA;AAAW,iBACJC,EAAK,CAAA;AAAA,QACZC,SAAAA;AACO,iBAAA,EAAA,QAAA,aAAA,QAAA,EAAA,UAAA,OAAA,CAAA,GAAA;AAAA,QAAA;AAAA,IAiBH,GAAAC,IAAAC,EAAA,UAAU,YAASC,CAAAA,CAAAA,eAAmBC,EAAAC,EAAA,YAAAC,CAAA,CAAA,GAAAC,IAAAL,EAAA,MAAAG,EAAA,YAAA,CAAAA,EAAA,SAAA,IAAA,GAAAG,IAAAN,EAAA,MAAAG,EAAA,YAAAA,EAAA,SAAA,IAAA,GAAAI,IAAAP,EAAA,MAAAQ,EAAA,EAAA,OAAAL,EAAA,KAAA,CAAA,GAAA,IAAAH,EAAA,MAAA,OAAAO,EAAA,SAAA,QAAA,GAAAE,IAAAT,EAAA,MAAA;AAExC,YAAA,EAACU,QAAkB,GAAA,MAAA,oBAIZ,CAAA;AAKZ,aAEqBC,CAAS,KAAM,CAAA,EAAA,aAAA,KAAA,EAAA,kBAAA,CAAA,IAAAC,EAAA,EAAA,gBAAA,CAAA,CAAA,IAAA,QAAAA,EAAA,EAAA,YAAA,CAAA,CAAA,IAAAA,EAAA,EAAA,YAAA,CAAA,CAAA;AAAA;AAC7B,UAAAC;AAEN,YAAA,EAIO,UAAAC,EAAA,IAAAX;AAAA,aACEY,IAAS;AAAA,eAJRD,EAAA,OAAA,SAAA,KAAA,SAAAD,IAAAC,EAAA,WAAA,OAAA,SAAAD,EAAA,aAAA,KAAA,GAAA,IAAA;AAAA,MAAA,IAQNG,CAAiB;AAAA,IACrB,CAAA,GAAK,IAAiB,MAAA;AACxB,QAEiB,iBAAsB;AAAA,IACjC,GAAApB,WACFqB;AAIEC,QAAAA,MAAcD,iCAAmC,EAAA,MAAA,CAAA,CAAA;AAAA,IAEvDE,GAAAA,IAAAA,MAAAA,EAAAA,qBAAAA,MAAAA;AAAAC,IAAAA;AAAAA,MAEE,MAAOtB,EAAK;AAAA,MACZ,gBAAkB;AAAA,MACpB,EAAA,WAAA,GAAA;AAAA,IAEA;AAEKG,UAAAA,IACHoB,EAAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlFileInput.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlFileInput/PlFileInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { prettyBytes } from '@milaboratories/helpers';\nimport type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';\nimport { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';\nimport { computed, reactive, ref, useSlots, watch } from 'vue';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport type { ImportedFiles } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { PlFileDialog } from '../PlFileDialog';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlTooltip } from '../PlTooltip';\nimport './pl-file-input.scss';\n\nconst data = reactive({\n  fileDialogOpen: false,\n  error: undefined as undefined | string,\n});\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: ImportFileHandle | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current import file handle.\n     */\n    modelValue: ImportFileHandle | undefined;\n    /**\n     * The label to display above the input field.\n     */\n    label?: string;\n    /**\n     * If `true`, the input field is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the component border is dashed.\n     */\n    dashed?: boolean;\n    /**\n     * Allowed file extensions (should start with `.`)\n     */\n    extensions?: string[];\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Import/Upload progress\n     */\n    progress?: ImportProgress;\n    /**\n     * An error message to display below the input field.\n     */\n    error?: unknown;\n    /**\n     * A helper text to display below the input field when there are no errors.\n     */\n    helper?: string;\n    /**\n     * Remove rounded border and change styles\n     */\n    cellStyle?: boolean;\n    /**\n     * File dialog title\n     */\n    fileDialogTitle?: string;\n    /**\n     * If `true`, the file dialog window closes when clicking outside the modal area (default: `true`)\n     */\n    fileDialogCloseOnOutsideClick?: boolean;\n  }>(),\n  {\n    label: undefined,\n    extensions: undefined,\n    fileDialogTitle: undefined,\n    placeholder: undefined,\n    progress: undefined,\n    error: undefined,\n    helper: undefined,\n    cellStyle: false,\n    fileDialogCloseOnOutsideClick: true,\n  },\n);\n\nconst tryValue = <T extends ImportFileHandle>(v: T | undefined, cb: (v: T) => string | undefined) => {\n  if (!v) {\n    return undefined;\n  }\n\n  try {\n    return cb(v);\n  } catch (err) {\n    data.error = err instanceof Error ? err.message : String(err);\n    return v;\n  }\n};\n\nconst fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));\n\nconst filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));\n\nconst isUploading = computed(() => props.progress && !props.progress.done);\n\nconst isUploaded = computed(() => props.progress && props.progress.done);\n\nconst computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));\n\nconst hasErrors = computed(() => typeof computedErrorMessage.value === 'string');\n\nconst uploadStats = computed(() => {\n  const { status, done } = props.progress ?? {};\n\n  if (!status || !status.bytesTotal) {\n    return '';\n  }\n\n  if (status.bytesProcessed && !done) {\n    return prettyBytes(status.bytesProcessed, {}) + ' / ' + prettyBytes(status.bytesTotal, {});\n  }\n\n  return prettyBytes(status.bytesTotal, {});\n});\n\nconst progressStyle = computed(() => {\n  const { progress } = props;\n\n  if (!progress) {\n    return {};\n  }\n\n  return {\n    width: progress.done ? '100%' : Math.round((progress.status?.progress ?? 0) * 100) + '%',\n  };\n});\n\nconst openFileDialog = () => {\n  data.fileDialogOpen = true;\n};\n\nconst onImport = (v: ImportedFiles) => {\n  if (v.files.length) {\n    emit('update:modelValue', v.files[0]);\n  }\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nwatch(\n  () => props.modelValue,\n  () => (data.error = undefined),\n  { immediate: true },\n);\n\nconst rootRef = ref();\n\nif (!props.cellStyle) {\n  useLabelNotch(rootRef);\n}\n</script>\n\n<template>\n  <div :class=\"{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }\" class=\"pl-file-input__envelope\">\n    <div\n      ref=\"rootRef\"\n      :class=\"{ dashed, error: hasErrors }\"\n      class=\"pl-file-input\"\n      tabindex=\"0\"\n      @keyup.enter=\"openFileDialog\"\n      @click.stop=\"openFileDialog\"\n    >\n      <div :style=\"progressStyle\" class=\"pl-file-input__progress\" />\n      <label v-if=\"!cellStyle && label\" ref=\"label\">\n        <SvgRequired v-if=\"required\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip || filePath\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot v-if=\"slots.tooltip\" name=\"tooltip\" />\n            <template v-else>{{ filePath }}</template>\n          </template>\n        </PlTooltip>\n      </label>\n      <PlMaskIcon24 v-if=\"hasErrors\" name=\"restart\" />\n      <PlMaskIcon24 v-else-if=\"isUploading\" name=\"cloud-upload\" />\n      <PlMaskIcon24 v-else-if=\"isUploaded\" name=\"success\" />\n      <PlMaskIcon24 v-else name=\"paper-clip\" />\n      <div :data-placeholder=\"placeholder ?? 'Choose file'\" class=\"pl-file-input__filename\">\n        {{ fileName }}\n      </div>\n      <div v-if=\"uploadStats\" class=\"pl-file-input__stats\">{{ uploadStats }}</div>\n      <PlMaskIcon24 v-if=\"modelValue\" class=\"pl-file-input__clear\" name=\"close\" @click.stop=\"clear\" />\n      <DoubleContour class=\"pl-file-input__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-file-input__error\">\n      {{ computedErrorMessage }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-file-input__helper\">{{ helper }}</div>\n  </div>\n  <PlFileDialog\n    v-model=\"data.fileDialogOpen\"\n    :close-on-outside-click=\"fileDialogCloseOnOutsideClick\"\n    :extensions=\"extensions\"\n    :title=\"fileDialogTitle\"\n    @import:files=\"onImport\"\n  />\n</template>\n"],"names":["N","T","K","useSlots","v","err","data","k","s","props","h","o","x","E","P","V","J","b","status","computed","y","t","e","progress","openFileDialog","emit","clear","watch","U","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAAA,WAAsBC,EAAA,GAAA;AAAA,UACJ,IAAAC,EAAA;AAAA,MAChB,gBAAO;AAAA,MACR,OAEaC;AAAAA,IAuEPC,CAAAA,GAAAA,IAAAA,EAAAA,GAAAA,IAAAA,GAAAA,IAAAA,GAAAA,IAAAA,CAAAA,GAAAA,MAAAA;AAID,UAAA;AACF,YAAA;AAAW,iBACJC,EAAK,CAAA;AAAA,QACZC,SAAAA;AACO,iBAAA,EAAA,QAAA,aAAA,QAAA,EAAA,UAAA,OAAA,CAAA,GAAA;AAAA,QAAA;AAAA,IAiBH,GAAAC,IAAAC,EAAA,UAAU,YAASC,CAAAA,CAAAA,eAAmBC,EAAAC,EAAA,YAAAC,CAAA,CAAA,GAAAC,IAAAL,EAAA,MAAAG,EAAA,YAAA,CAAAA,EAAA,SAAA,IAAA,GAAAG,IAAAN,EAAA,MAAAG,EAAA,YAAAA,EAAA,SAAA,IAAA,GAAAI,IAAAP,EAAA,MAAAQ,EAAA,EAAA,OAAAL,EAAA,KAAA,CAAA,GAAA,IAAAH,EAAA,MAAA,OAAAO,EAAA,SAAA,QAAA,GAAAE,IAAAT,EAAA,MAAA;AAExC,YAAA,EAACU,QAAkB,GAAA,MAAA,oBAIZ,CAAA;AAKZ,aAEqBC,CAAS,KAAM,CAAA,EAAA,aAAA,KAAA,EAAA,kBAAA,CAAA,IAAAC,EAAA,EAAA,gBAAA,CAAA,CAAA,IAAA,QAAAA,EAAA,EAAA,YAAA,CAAA,CAAA,IAAAA,EAAA,EAAA,YAAA,CAAA,CAAA;AAAA;AAC7B,UAAAC;AAEN,YAAA,EAIO,UAAAC,EAAA,IAAAX;AAAA,aACEY,IAAS;AAAA,eAJRD,EAAA,OAAA,SAAA,KAAA,SAAAD,IAAAC,EAAA,WAAA,OAAA,SAAAD,EAAA,aAAA,KAAA,GAAA,IAAA;AAAA,MAAA,IAQNG,CAAiB;AAAA,IACrB,CAAA,GAAK,IAAiB,MAAA;AACxB,QAEiB,iBAAsB;AAAA,IACjC,GAAApB,WACFqB;AAIEC,QAAAA,MAAcD,iCAAmC,EAAA,MAAA,CAAA,CAAA;AAAA,IAEvDE,GAAAA,IAAAA,MAAAA,EAAAA,qBAAAA,MAAAA;AAAAC,IAAAA;AAAAA,MAEE,MAAOtB,EAAK;AAAA,MACZ,gBAAkB;AAAA,MACpB,EAAA,WAAA,GAAA;AAAA,IAEA;AAEKG,UAAAA,IACHoB,EAAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlSlideModal/PlPureSlideModal.vue.js

@@ -56,7 +56,7 @@ import "../../colors/gradient.js";
 .ui-text-area{--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);width:100%;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.ui-text-area__envelope{font-family:var(--font-family-base)}.ui-text-area textarea{min-height:calc(var(--control-height) - 2px);width:100%;padding:10px 12px;border:none;font-size:inherit;background-color:transparent;color:var(--txt-01);caret-color:var(--border-color-focus);cursor:inherit;resize:none;--thumb-color: var(--ic-02);overflow-y:auto}.ui-text-area textarea::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.ui-text-area textarea::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.ui-text-area textarea::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.ui-text-area textarea:focus{outline:none}.ui-text-area textarea::placeholder{color:var(--color-placeholder)}.ui-text-area label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.ui-text-area label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.ui-text-area__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.ui-text-area__append{display:flex;flex-direction:row;align-items:center;gap:4px}.ui-text-area__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area:hover{--contour-color: var(--control-hover-color)}.ui-text-area:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.ui-text-area:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.ui-text-area.dashed .ui-text-area__contour{border-style:dashed}.ui-text-area.nonEmpty{--prefix-color: var(--txt-01)}.ui-text-area.error{--contour-color: var(--txt-error)}.ui-text-area.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.ui-text-area.disabled *{color:var(--contour-color)}
 .pl-text-field{--pl-text-field-text-color: var(--txt-01);--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--show-clearable: none;width:100%;min-width:160px;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.pl-text-field__envelope{font-family:var(--font-family-base)}.pl-text-field input{font-family:var(--font-family-base);font-weight:500;min-height:calc(var(--control-height) - 2px);line-height:20px;width:100%;padding:0 12px;border:none;font-size:inherit;background-color:transparent;color:var(--pl-text-field-text-color);caret-color:var(--border-color-focus);cursor:inherit}.pl-text-field input:focus{outline:none}.pl-text-field input::placeholder{color:var(--color-placeholder)}.pl-text-field label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-text-field label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-text-field__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-text-field__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-text-field__append{padding-right:12px;display:flex;flex-direction:row;align-items:center;gap:4px;cursor:text}.pl-text-field__append .icon-16{cursor:pointer}.pl-text-field__append .mask-16{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-text-field__clearable{display:var(--show-clearable)!important;--icon-color: var(--ic-02) !important}.pl-text-field__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field:hover{--contour-color: var(--control-hover-color);--show-clearable: inline-block}.pl-text-field:focus-within{--show-clearable: inline-block}.pl-text-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-text-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-text-field.dashed .pl-text-field__contour{border-style:dashed}.pl-text-field.nonEmpty{--prefix-color: var(--txt-01)}.pl-text-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-text-field.disabled{--contour-color: var(--color-dis-01);--label-color: var(--dis-01);--pl-text-field-text-color: var(--dis-01);--mask-icon-bg-color: var(--dis-01);cursor:not-allowed}
 .ui-toggle-switch{--handle-ml: 0;--body-bg: var(--bg-base-light);--body-shadow: var(--btn-group-shape-shadow);display:flex;align-items:center;gap:12px;outline:none}.ui-toggle-switch__body{width:40px;height:24px;display:flex;padding:5px;border-radius:12px;border:1px solid var(--color-ic-01);box-shadow:var(--body-shadow);background:var(--body-bg);cursor:pointer}.ui-toggle-switch__handle{width:12px;height:12px;border-radius:12px;border:1px solid var(--color-ic-01);background:var(--color-ic-00);margin-left:var(--handle-ml)}.ui-toggle-switch.active{--body-bg: var(--btn-switcher-bg);--handle-ml: auto}.ui-toggle-switch:focus-visible{--label-color: var(--txt-focus);--body-shadow: var(--btn-group-shape-shadow), 0 0 0 2px #fff, 0 0 0 4px var(--border-color-focus)}
-.pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--contour-offset: 2px;--icon-color: #000;width:100%;height:var(--control-height, 40px);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}
+.pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--contour-offset: 2px;--icon-color: #000;position:relative;z-index:0;width:100%;height:var(--control-height, 40px);border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}
 .pl-notification-alert{padding:12px;position:relative;border-radius:6px;border:1px solid var(--border-color-default);min-height:40px;width:256px;max-height:100%;overflow:auto}.pl-notification-alert .ui-btn-ghost{position:absolute;right:0;top:0}.pl-notification-alert__close{width:32px;min-width:28px}.pl-notification-alert__close .pl-btn-ghost{position:absolute;top:0;right:0;width:40px!important;height:40px!important}.pl-notification-alert__wrapper{flex-grow:1;overflow:auto}.pl-notification-alert.neutral{background:var(--notification-neutral)}.pl-notification-alert.error{background:var(--notification-error)}.pl-notification-alert.success{background:var(--notification-success)}.pl-notification-alert.warning{background:var(--notification-warning)}`)), document.head.appendChild(o);
     }
   } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.41.11",
+  "version": "1.41.17",
   "type": "module",
   "main": "dist/lib.js",
   "styles": "dist/lib.js",
@@ -26,7 +26,7 @@
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@milaboratories/uikit": "2.3.21",
+    "@milaboratories/uikit": "2.3.22",
     "@platforma-sdk/model": "~1.41.6"
   },
   "devDependencies": {
@@ -45,8 +45,8 @@
     "@faker-js/faker": "^9.2.0",
     "@milaboratories/build-configs": "1.0.5",
     "@milaboratories/helpers": "^1.6.19",
-    "@milaboratories/ts-configs": "1.0.5",
-    "@milaboratories/eslint-config": "^1.0.4"
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/ts-configs": "1.0.5"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/internal/createAppV2.ts

@@ -3,10 +3,9 @@ import type { Mutable } from '@milaboratories/helpers';
 import type { NavigationState, BlockOutputsBase, BlockState, PlatformaV2, ValueWithUTag, AuthorMarker } from '@platforma-sdk/model';
 import { hasAbortError, unwrapResult } from '@platforma-sdk/model';
 import type { Ref } from 'vue';
-import { reactive, computed, ref } from 'vue';
+import { reactive, computed, ref, watch } from 'vue';
 import type { StateModelOptions, UnwrapOutputs, OutputValues, OutputErrors, AppSettings } from '../types';
 import { createModel } from '../createModel';
-import { createAppModel } from './createAppModel';
 import { parseQuery } from '../urls';
 import { MultiError, unwrapValueOrErrors } from '../utils';
 import { applyPatch } from 'fast-json-patch';
@@ -43,11 +42,6 @@ export function createAppV2<
   platforma: PlatformaV2<Args, Outputs, UiState, Href>,
   settings: AppSettings,
 ) {
-  type AppModel = {
-    args: Args;
-    ui: UiState;
-  };
-
   const debug = (msg: string, ...rest: unknown[]) => {
     if (settings.debug) {
       console.log(`%c>>> %c${msg}`, 'color: orange; font-weight: bold', 'color: orange', settings.appId, ...rest);
@@ -113,6 +107,55 @@ export function createAppV2<
     return platforma.setNavigationState(state);
   };
 
+  const outputs = computed<OutputValues<Outputs>>(() => {
+    const entries = Object.entries(snapshot.value.outputs as Partial<Readonly<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.value.outputs as Partial<Readonly<Outputs>>).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);
+    return Object.fromEntries(entries);
+  });
+
+  const appModel = reactive({
+    error: '',
+    model: {
+      args: deepClone(snapshot.value.args) as Args,
+      ui: deepClone(snapshot.value.ui) as UiState,
+      outputs,
+      outputErrors,
+    },
+  }) as {
+    error: string;
+    model: {
+      args: Args;
+      ui: UiState;
+      outputs: OutputValues<Outputs>;
+      outputErrors: OutputErrors<Outputs>;
+    };
+  };
+
+  const appModelWatch = watch(
+    () => appModel.model,
+    (_newData) => {
+      const newData = deepClone(_newData);
+      debug('appModel.model', newData);
+      setArgsAndUiStateQueue.run(() => setBlockArgsAndUiState(newData.args, newData.ui).then(unwrapResult));
+    },
+    { deep: true },
+  );
+
+  const updateAppModelSilently = (newData: {
+    args: Args;
+    ui: UiState;
+  }) => {
+    debug('updateAppModelSilently', newData);
+    appModelWatch.pause();
+    appModel.model.args = deepClone(newData.args) as Args;
+    appModel.model.ui = deepClone(newData.ui) as UiState;
+    appModelWatch.resume();
+  };
+
   (async () => {
     window.addEventListener('beforeunload', () => {
       closedRef.value = true;
@@ -125,7 +168,7 @@ export function createAppV2<
       try {
         const patches = await platforma.getPatches(uTagRef.value).then(unwrapResult);
 
-        debug('patches', JSON.stringify(patches, null, 2));
+        debug('patches.length', patches.value.length);
         debug('uTagRef.value', uTagRef.value);
         debug('patches.uTag', patches.uTag);
         debug('patches.author', patches.author);
@@ -144,6 +187,7 @@ export function createAppV2<
         if (isAuthorChanged || data.isExternalSnapshot) {
           debug('got external changes, applying them to the snapshot', JSON.stringify(snapshot.value, null, 2));
           snapshot.value = applyPatch(snapshot.value, patches.value, false, false).newDocument;
+          updateAppModelSilently(snapshot.value);
           data.isExternalSnapshot = isAuthorChanged;
         } else {
           // Mutable behavior
@@ -163,34 +207,6 @@ export function createAppV2<
     }
   })();
 
-  const outputs = computed<OutputValues<Outputs>>(() => {
-    const entries = Object.entries(snapshot.value.outputs as Partial<Readonly<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.value.outputs as Partial<Readonly<Outputs>>).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);
-    return Object.fromEntries(entries);
-  });
-
-  const appModel = createAppModel(
-    {
-      get() {
-        return { args: snapshot.value.args, ui: snapshot.value.ui } as AppModel;
-      },
-      autoSave: true,
-      onSave(newData: AppModel) {
-        debug('onSave', newData);
-        setArgsAndUiStateQueue.run(() => setBlockArgsAndUiState(newData.args, newData.ui).then(unwrapResult));
-      },
-    },
-    {
-      outputs,
-      outputErrors,
-    },
-    settings,
-  );
-
   const cloneArgs = () => deepClone(appModel.model.args) as Args;
   const cloneUiState = () => deepClone(appModel.model.ui) as UiState;
   const cloneNavigationState = () => deepClone(snapshot.value.navigationState) as Mutable<NavigationState<Href>>;