@milaboratories/uikit 2.3.8 → 2.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -24,7 +24,7 @@
     "d3": "^7.9.0",
     "resize-observer-polyfill": "^1.5.1",
     "@milaboratories/helpers": "^1.6.17",
-    "@platforma-sdk/model": "^1.39.18"
+    "@platforma-sdk/model": "^1.40.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",

package/src/components/PlNumberField/PlNumberField.vue

@@ -152,6 +152,10 @@ const isDecrementDisabled = computed(() => {
   return false;
 });
 
+const multiplier = computed(() =>
+  10 ** (props.step.toString().split('.').at(1)?.length ?? 0),
+);
+
 function increment() {
   const parsedValue = innerNumberValue.value;
   if (!isIncrementDisabled.value) {
@@ -159,7 +163,9 @@ function increment() {
     if (parsedValue === undefined) {
       nV = props.minValue ? props.minValue : 0;
     } else {
-      nV = (parsedValue || 0) + props.step;
+      nV = ((parsedValue || 0) * multiplier.value
+        + props.step * multiplier.value)
+      / multiplier.value;
     }
     modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;
   }
@@ -172,7 +178,9 @@ function decrement() {
     if (parsedValue === undefined) {
       nV = 0;
     } else {
-      nV = +(parsedValue || 0) - props.step;
+      nV = ((parsedValue || 0) * multiplier.value
+        - props.step * multiplier.value)
+      / multiplier.value;
     }
     modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;
   }

package/src/composition/computedCached.ts

@@ -0,0 +1,58 @@
+import { isJsonEqual } from '@milaboratories/helpers';
+import {
+  computed,
+  ref,
+  watch,
+  type ComputedGetter,
+  type ComputedSetter,
+  type ComputedRef,
+  type WritableComputedRef,
+} from 'vue';
+
+export function computedCached<T>(options: {
+  get: ComputedGetter<T>;
+  set: ComputedSetter<T>;
+  deep?: boolean;
+}): WritableComputedRef<T>;
+export function computedCached<T>(options: {
+  get: ComputedGetter<T>;
+  deep?: boolean;
+}): ComputedRef<T>;
+export function computedCached<T>(getter: ComputedGetter<T>): ComputedRef<T>;
+export function computedCached<T>(options: ComputedGetter<T> | {
+  get: ComputedGetter<T>;
+  set?: ComputedSetter<T>;
+  deep?: boolean;
+}) {
+  if (typeof options === 'function') {
+    options = {
+      get: options,
+    };
+  }
+  const { get: getter, set: setter, deep } = options;
+
+  const cachedValue = ref<T>(getter());
+  watch(
+    getter,
+    (newValue) => {
+      if (!isJsonEqual(newValue, cachedValue.value)) {
+        cachedValue.value = newValue;
+      }
+    },
+    { deep },
+  );
+
+  if (setter) {
+    return computed({
+      get: () => cachedValue.value,
+      set: (newValue) => {
+        if (!isJsonEqual(newValue, cachedValue.value)) {
+          cachedValue.value = newValue;
+          setter(newValue);
+        }
+      },
+    });
+  } else {
+    return computed(() => cachedValue.value);
+  }
+}

package/src/composition/watchCached.ts

@@ -0,0 +1,45 @@
+import { isJsonEqual } from '@milaboratories/helpers';
+import {
+  ref,
+  watch,
+  type WatchCallback,
+  type WatchHandle,
+  type WatchSource,
+} from 'vue';
+
+type MaybeUndefined<T, I> = I extends true ? T | undefined : T;
+export interface WatchCachedOptions<Immediate = boolean> {
+  immediate?: Immediate;
+  deep?: boolean;
+  // when `once` is needed, caching is useless, use plain watch instead
+}
+export function watchCached<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
+  options?: WatchCachedOptions<Immediate>,
+): WatchHandle {
+  const cachedValue = ref<T>();
+  const handle = watch(
+    source,
+    (newValue) => {
+      if (!isJsonEqual(newValue, cachedValue.value)) {
+        cachedValue.value = newValue;
+      }
+    },
+    {
+      deep: options?.deep,
+      immediate: true, // always initialize cachedValue
+    },
+  );
+  watch<T, Immediate>(
+    () => cachedValue.value as T, // `as T` is safe as we always initialize cachedValue
+    cb, // separate watch so that `onWatcherCleanup` would only be triggerred here
+    {
+      // standard vue `WatchOptions` conform to `WatchCachedOptions` interface,
+      // so construct new options to remove unsupported entries
+      deep: options?.deep,
+      immediate: options?.immediate,
+    },
+  );
+  return handle; // stopping first handle would effectively stop the second one
+}

package/src/index.ts

@@ -110,6 +110,8 @@ export { useQuery } from './composition/useQuery.ts';
 export { useDraggable } from './composition/useDraggable';
 export { useComponentProp } from './composition/useComponentProp';
 export * from './composition/useWatchFetch';
+export * from './composition/watchCached';
+export * from './composition/computedCached';
 
 /**
  * Utils/Partials

package/dist/generated/components/svg/images/SvgRequired.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue2.js","sources":["../../../../../src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":["_hoisted_1"],"mappings":";;;;AAOoC,MAAAA,IAAA;AAAA,EAAA,OAAA;AAAA;;;;;;"}