@platforma-sdk/ui-vue 1.7.30 → 1.7.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.7.30",
+  "version": "1.7.31",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -34,8 +34,8 @@
     "@ag-grid-enterprise/rich-select": "^32.3.0",
     "@ag-grid-enterprise/menu": "^32.3.0",
     "@ag-grid-enterprise/excel-export": "^32.3.0",
-    "@milaboratories/uikit": "^1.2.30",
-    "@platforma-sdk/model": "^1.7.20"
+    "@platforma-sdk/model": "^1.7.20",
+    "@milaboratories/uikit": "^2.0.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",

package/src/components/PlAgCellFile/PlAgCellFile.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { PlFileInput } from '@milaboratories/uikit';
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  // this component is intended to be used in ag-grid, params are the main object
+  // to communicate with the corresponding cell data
+  params: ICellRendererParams<unknown, ImportFileHandle> & {
+    extensions?: string[];
+    progress?: ImportProgress;
+    /**
+     * The resolveProgress function is an optional input parameter for the component
+     * that allows tracking the file upload progress in real-time.
+     * By passing resolveProgress, you can ensure that the component
+     * displays accurate progress values for each file as they upload.
+     * How to use it in AgGrid
+     * cellRendererParams: {
+     *  resolveProgress: (fileHandle: ImportFileHandle | undefined) => {
+     *    const progresses = app.progresses;
+     *    if (!fileHandle) return undefined;
+     *    else return progresses[fileHandle];
+     *  }
+     * }
+     */
+    resolveProgress?: (v: ImportFileHandle | undefined) => ImportProgress | undefined;
+  };
+}>();
+
+const extensions = computed(() => props.params.extensions);
+
+// extracting cell value and casting it to the type we expect
+const handle = computed(() => props.params.value as ImportFileHandle | undefined);
+
+/**
+ * When value changes in the file input this method forward the value to the ag-grid,
+ * which in tern forwards in to the valueSetter in corresponding column.
+ * */
+function onHandleUpdate(newHandle: ImportFileHandle | undefined) {
+  props.params.setValue!(newHandle);
+}
+
+const currentProgress = computed(() => {
+  return props.params.resolveProgress ? props.params.resolveProgress(handle.value) : undefined;
+});
+</script>
+
+<template>
+  <div style="height: 100%">
+    <PlFileInput
+      show-filename-only
+      clearable
+      cell-style
+      file-dialog-title="Select any file"
+      :placeholder="`Choose file ${extensions ? extensions[0] : ''}`"
+      :extensions="extensions"
+      :model-value="handle"
+      :progress="currentProgress"
+      @update:model-value="onHandleUpdate"
+    />
+  </div>
+</template>

package/src/components/PlAgCellFile/index.ts

@@ -0,0 +1 @@
+export { default as PlAgCellFile } from './PlAgCellFile.vue';

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -411,9 +411,9 @@ watch(
       </div>
     </Transition>
     <AgGridVue
+      :key="reloadKey"
       class="ap-ag-data-table-grid"
       :grid-options="gridOptions"
-      :key="reloadKey"
       @grid-ready="onGridReady"
       @state-updated="onStateUpdated"
       @grid-pre-destroyed="onGridPreDestroyed"

package/src/lib.ts

@@ -7,6 +7,8 @@ import ValueOrErrorsComponent from './components/ValueOrErrorsComponent.vue';
 
 export { BlockLayout, PlAgDataTable, PlAgOverlayLoading, PlAgOverlayNoRows, ValueOrErrorsComponent };
 
+export * from './components/PlAgCellFile';
+
 export * from './components/PlAgDataTable/types';
 
 export * from './defineApp';