@milaboratories/uikit 2.3.10 → 2.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.3.10",
+  "version": "2.3.12",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -23,8 +23,8 @@
     "@vueuse/core": "^13.3.0",
     "d3": "^7.9.0",
     "resize-observer-polyfill": "^1.5.1",
-    "@milaboratories/helpers": "^1.6.17",
-    "@platforma-sdk/model": "^1.40.0"
+    "@platforma-sdk/model": "^1.40.1",
+    "@milaboratories/helpers": "^1.6.17"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
@@ -34,9 +34,9 @@
     "vue-tsc": "^2.2.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/ts-configs": "1.0.4",
+    "@milaboratories/eslint-config": "^1.0.4",
     "@milaboratories/build-configs": "1.0.4",
-    "@milaboratories/eslint-config": "^1.0.4"
+    "@milaboratories/ts-configs": "1.0.4"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlSvg/registry.ts

@@ -32,9 +32,12 @@ export function registerSvg(raw: string, name?: string): SvgMeta {
   if (!registeredRaw.has(raw)) {
     const id = `svg-${name ? `${name}-` : ''}${uniqueId(16)}`;
 
-    const widthMatch = raw.match(/width="(\d+)(px)?"/)?.[1];
-    const heightMatch = raw.match(/height="(\d+)(px)?"/)?.[1];
-    const viewBoxParts = raw.match(/viewBox="[-+]?\d*\.?\d+(?:e[-+]?\d+)?"/);
+    const openSvgTagMatch = raw.match(/^<svg[^>]*>/i)?.[0];
+    const fillMatch = openSvgTagMatch?.match(/fill\s*=\s*"(.*?)"/)?.[1];
+    const strokeMatch = openSvgTagMatch?.match(/stroke\s*=\s*"(.*?)"/)?.[1];
+    const widthMatch = openSvgTagMatch?.match(/width\s*=\s*"(\d+)(px)?"/)?.[1];
+    const heightMatch = openSvgTagMatch?.match(/height\s*=\s*"(\d+)(px)?"/)?.[1];
+    const viewBoxParts = openSvgTagMatch?.match(/viewBox\s*=\s*"[-+]?\d*\.?\d+(?:e[-+]?\d+)?"/);
     const viewBoxWidthMatch = viewBoxParts?.[2];
     const viewBoxHeightMatch = viewBoxParts?.[3];
     let width = Number(viewBoxWidthMatch ?? widthMatch ?? 16);
@@ -43,18 +46,13 @@ export function registerSvg(raw: string, name?: string): SvgMeta {
     height = isNaN(height) ? 16 : height;
     const viewBox = `0 0 ${width} ${height}`;
 
-    // Parse the original SVG tag and preserve all its attributes except id and viewBox
-    const svgTagMatch = raw.match(/^<svg([^>]*)>/i);
-    let svgAttributes = svgTagMatch ? svgTagMatch[1] : '';
-    // Remove any existing id or viewBox attributes
-    svgAttributes = svgAttributes
-      .replace(/\s*id\s*=\s*(['"])[^'"]*\1/gi, '')
-      .replace(/\s*viewBox\s*=\s*(['"])[^'"]*\1/gi, '');
-
     let fillIdx = 0;
     let strokeIdx = 0;
+    const fillAttr = fillMatch ? `fill="${fillMatch}"` : '';
+    const strokeAttr = strokeMatch ? `stroke="${strokeMatch}"` : '';
+
     const preparedSvg = raw
-      .replace(/^<svg[^>]*>/i, `<svg id="${id}" viewBox="${viewBox}" ${svgAttributes}>`)
+      .replace(/^<svg[^>]*>/i, `<svg id="${id}" viewBox="${viewBox}" ${fillAttr} ${strokeAttr}>`)
       .replace(/<\/svg>\s*$/, '</svg>')
       .replace(
         /\bfill\s*=\s*(['"])(.*?)\1/gi,

package/src/composition/computedCached.ts

@@ -1,4 +1,4 @@
-import { isJsonEqual } from '@milaboratories/helpers';
+import { deepClone, isJsonEqual } from '@milaboratories/helpers';
 import {
   computed,
   ref,
@@ -9,37 +9,39 @@ import {
   type WritableComputedRef,
 } from 'vue';
 
+/**
+ * Alternative to `computed`, but triggering only on actual data changes.
+ * Always `deep` as the plain `computed` is.
+ */
 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> | {
+export function computedCached<T>(arg: ComputedGetter<T> | {
   get: ComputedGetter<T>;
-  set?: ComputedSetter<T>;
-  deep?: boolean;
+  set: ComputedSetter<T>;
 }) {
-  if (typeof options === 'function') {
-    options = {
-      get: options,
-    };
+  let getter: ComputedGetter<T>;
+  let setter: ComputedSetter<T> | undefined = undefined;
+  if (typeof arg === 'function') {
+    getter = arg;
+  } else {
+    getter = arg.get;
+    setter = arg.set;
   }
-  const { get: getter, set: setter, deep } = options;
 
   const cachedValue = ref<T>(getter());
   watch(
     getter,
     (newValue) => {
       if (!isJsonEqual(newValue, cachedValue.value)) {
-        cachedValue.value = newValue;
+        // `deepClone` is needed because in case some fields are patched the deep would be triggered,
+        // but objects would be equal as the saved value was also patched
+        cachedValue.value = deepClone(newValue);
       }
     },
-    { deep },
+    { deep: true },
   );
 
   if (setter) {

package/src/composition/watchCached.ts

@@ -1,4 +1,4 @@
-import { isJsonEqual } from '@milaboratories/helpers';
+import { deepClone, isJsonEqual } from '@milaboratories/helpers';
 import {
   ref,
   watch,
@@ -10,9 +10,10 @@ import {
 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
+  // deep: true; - caching is useless when you are using the source as a `shallowRef`
+  // once: false; - caching is useless when you need a single shot, use plain watch instead
 }
+/** Alternative to `watch`, but triggering only on actual data changes */
 export function watchCached<T, Immediate extends Readonly<boolean> = false>(
   source: WatchSource<T>,
   cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
@@ -23,11 +24,13 @@ export function watchCached<T, Immediate extends Readonly<boolean> = false>(
     source,
     (newValue) => {
       if (!isJsonEqual(newValue, cachedValue.value)) {
-        cachedValue.value = newValue;
+        // `deepClone` is needed because in case some fields are patched the deep would be triggered,
+        // but objects would be equal as the saved value was also patched
+        cachedValue.value = deepClone(newValue);
       }
     },
     {
-      deep: options?.deep,
+      deep: true,
       immediate: true, // always initialize cachedValue
     },
   );
@@ -37,7 +40,7 @@ export function watchCached<T, Immediate extends Readonly<boolean> = false>(
     {
       // standard vue `WatchOptions` conform to `WatchCachedOptions` interface,
       // so construct new options to remove unsupported entries
-      deep: options?.deep,
+      deep: true,
       immediate: options?.immediate,
     },
   );

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

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue.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;;;;;;"}