@milaboratories/uikit 2.2.64 → 2.2.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.64",
+  "version": "2.2.66",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -35,8 +35,8 @@
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
     "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.27.10"
+    "@platforma-sdk/model": "^1.28.1",
+    "@milaboratories/helpers": "^1.6.11"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/icons/icon-assets/24_monetization.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M19 4C20.6569 4 22 5.34315 22 7V17C22 18.6569 20.6569 20 19 20H5C3.34315 20 2 18.6569 2 17V7C2 5.34315 3.34315 4 5 4H19ZM19 5.5H5C4.17157 5.5 3.5 6.17157 3.5 7V9.25H16H20.5V7C20.5 6.17157 19.8284 5.5 19 5.5ZM20.5 10.75H16H3.5L3.5 17C3.5 17.8284 4.17157 18.5 5 18.5H19C19.8284 18.5 20.5 17.8284 20.5 17V10.75ZM6 15.75H10V14.25H6V15.75Z" fill="#110529"/>
+</svg>

package/src/assets/icons/icon-assets-min/24_monetization.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#110529" fill-rule="evenodd" d="M19 4a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zm0 1.5H5A1.5 1.5 0 0 0 3.5 7v2.25h17V7A1.5 1.5 0 0 0 19 5.5m1.5 5.25h-17V17A1.5 1.5 0 0 0 5 18.5h14a1.5 1.5 0 0 0 1.5-1.5zm-14.5 5h4v-1.5H6z" clip-rule="evenodd"/></svg>

package/src/assets/icons/icons-24-generated.json

@@ -129,6 +129,7 @@
   "menu": "menu.svg",
   "minimize": "minimize.svg",
   "minus": "minus.svg",
+  "monetization": "monetization.svg",
   "more": "more.svg",
   "paper-clip": "paper-clip.svg",
   "pause": "pause.svg",

package/src/assets/icons/icons-24-generated.scss

@@ -129,6 +129,7 @@ $icons24: (
   menu: 'menu.svg',
   minimize: 'minimize.svg',
   minus: 'minus.svg',
+  monetization: 'monetization.svg',
   more: 'more.svg',
   paper-clip: 'paper-clip.svg',
   pause: 'pause.svg',

package/src/composition/useWatchFetch.ts

@@ -0,0 +1,68 @@
+import type { WatchSource, WatchOptions } from 'vue';
+import { reactive, watch, ref, computed } from 'vue';
+import { exclusiveRequest } from '@milaboratories/helpers';
+
+export type FetchResult<V, E = unknown> = {
+  loading: boolean;
+  value: V | undefined;
+  error: E;
+};
+
+// TODO Should we keep the old value while fetching the new value?
+
+/**
+ * Watch any reactive source and perform an asynchronous operation
+ *
+ * @example
+ * ```ts
+ * const v = useWatchFetch(
+ *   watchSource,
+ *   async (sourceValue) => {
+ *     return await fetchDataFromApi(sourceValue);
+ *   }
+ * );
+ *
+ * // Usage in a template
+ * <template>
+ *   <div v-if="v.loading">Loading...</div>
+ *   <div v-else-if="v.error">Error: {{ v.error.message }}</div>
+ *   <div v-else>Data: {{ v.value }}</div>
+ * </template>
+ * ```
+ */
+export function useWatchFetch<S, V>(watchSource: WatchSource<S>, doFetch: (s: S) => Promise<V>, watchOptions?: WatchOptions): FetchResult<V> {
+  const loadingRef = ref(0);
+
+  const data = reactive({
+    loading: computed(() => loadingRef.value > 0),
+    loadingRef,
+    value: undefined as V,
+    error: undefined,
+  }) as FetchResult<V>;
+
+  const exclusive = exclusiveRequest(doFetch);
+
+  watch(
+    watchSource,
+    async (s) => {
+      data.error = undefined;
+      loadingRef.value++;
+      exclusive(s)
+        .then((res) => {
+          if (res.ok) {
+            data.value = res.value;
+          }
+        })
+        .catch((err) => {
+          data.value = undefined;
+          data.error = err;
+        })
+        .finally(() => {
+          loadingRef.value--;
+        });
+    },
+    Object.assign({ immediate: true, deep: true }, watchOptions ?? {}),
+  );
+
+  return data;
+}

package/src/generated/icons-24.ts

@@ -129,6 +129,7 @@ export const maskIcons24 = [
   'menu',
   'minimize',
   'minus',
+  'monetization',
   'more',
   'paper-clip',
   'pause',

package/src/index.ts

@@ -96,6 +96,7 @@ export { useFormState } from './composition/useFormState';
 export { useQuery } from './composition/useQuery.ts';
 export { useDraggable } from './composition/useDraggable';
 export { useComponentProp } from './composition/useComponentProp';
+export * from './composition/useWatchFetch';
 
 /**
  * Utils/Partials