@platforma-sdk/ui-vue 1.22.24 → 1.22.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.22.24",
+  "version": "1.22.29",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -23,7 +23,7 @@
     "canonicalize": "^2.0.0",
     "ag-grid-enterprise": "^33.0.4",
     "ag-grid-vue3": "^33.0.4",
-    "@milaboratories/uikit": "^2.2.56",
+    "@milaboratories/uikit": "^2.2.57",
     "@platforma-sdk/model": "^1.22.18"
   },
   "devDependencies": {
@@ -45,8 +45,8 @@
     "semver": "^7.6.3",
     "@types/semver": "^7.5.8",
     "rollup-plugin-sourcemaps2": "^0.4.3",
-    "@milaboratories/helpers": "^1.6.11",
-    "@milaboratories/eslint-config": "^1.0.1"
+    "@milaboratories/eslint-config": "^1.0.1",
+    "@milaboratories/helpers": "^1.6.11"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlAgDataTable/PlAgOverlayLoading.vue

@@ -10,21 +10,38 @@ defineProps<{
     /**
      * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.
      */
-    notReady: Readonly<boolean>;
+    notReady: boolean;
     /**
-     * Optional prop that provide custom text message under catInBag icon.
+     * Prop to override default "Loading" text
      */
-    message?: Readonly<string>;
+    loadingText?: string;
+    /**
+     * Prop to override default "No datasource" text (So why props name is notReady? Good question)
+     */
+    notReadyText?: string;
+    /**
+     * @deprecated
+     * Use notReadyText
+     */
+    message?: string;
+    /**
+     * Use "transparent" to make table headers visible below the loading layer
+     */
+    overlayType?: 'transparent';
   };
 }>();
 </script>
 
 <template>
-  <div :class="style.container">
-    <div v-if="params.notReady" :class="style.wrapper">
+  <PlSplash
+    :loading="!params.notReady"
+    :type="params.overlayType ?? 'table'"
+    :loading-text="params.loadingText ?? 'Loading'"
+    :class="style.container"
+  >
+    <div v-if="params.notReady" :class="style.notReadyWrapper">
       <div :class="style.iconCatInBag" />
-      <h3 :class="style.text">{{ params.message || 'No datasource' }}</h3>
+      <h3 :class="style.text">{{ params.notReadyText || params.message || 'No datasource' }}</h3>
     </div>
-    <PlSplash v-else size="48" text="Loading" />
-  </div>
+  </PlSplash>
 </template>

package/src/components/PlAgDataTable/PlAgOverlayNoRows.vue

@@ -14,6 +14,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  background-color: var(--bg-base-light);
 }
 .grid-icon-sad-cat {
   background-image: url(./assets/no-data-cat.png);

package/src/components/PlAgDataTable/index.ts

@@ -6,3 +6,4 @@ export * from './types';
 export * from './sources/row-number';
 export * from './sources/focus-row';
 export * from './sources/menu-items';
+export * from './useAgDataTableOptionsSimple';

package/src/components/PlAgDataTable/pl-ag-overlay-loading.module.scss

@@ -1,29 +1,32 @@
 .container {
-    height: calc(100% - 1px);
-    margin-top: 1px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--bg-base-light);
-    color: var(--txt-mask);
-  }
+  height: 100%;
+  margin-top: 1px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--txt-mask);
+}
   
-  .wrapper {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-  
-  .iconCatInBag {
-    background-image: url(./assets/loading-cat.png);
-    background-repeat: no-repeat;
-    height: 212px;
-    width: 400px;
-    background-size: contain;
-  }
-  
-  .text {
-    margin-top: 24px;
-    white-space: pre;
-  }
+.notReadyWrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--bg-base-light);
+}
+
+.iconCatInBag {
+  background-image: url(./assets/loading-cat.png);
+  background-repeat: no-repeat;
+  height: 212px;
+  width: 400px;
+  background-size: contain;
+}
+
+.text {
+  margin-top: 24px;
+  white-space: pre;
+}

package/src/components/PlAgDataTable/useAgDataTableOptionsSimple.ts

@@ -0,0 +1,56 @@
+import type { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-enterprise';
+import { computed, shallowRef, watch } from 'vue';
+import { AgGridTheme } from '../../aggrid';
+import PlAgOverlayLoading from './PlAgOverlayLoading.vue';
+import PlAgOverlayNoRows from './PlAgOverlayNoRows.vue';
+import { autoSizeRowNumberColumn } from './sources/row-number';
+
+/**
+ * Returns a set of Ag Grid options along with a reference to the Ag Grid API.
+ * (This is a fast prototype)
+ *
+ * @example
+ * ```ts
+ * const { gridOptions, gridApi } = useAgDataTableOptionsSimple(() => ({
+ *   // custom grid options here
+ * }));
+ *
+ * // Usage in a template (v-bind is required!)
+ * <template>
+ *   <AgGridVue :style="{ height: '100%' }" v-bind="gridOptions" />
+ * </template>
+ * ```
+ */
+export function useAgDataTableOptionsSimple<TData>(
+  factory: () => GridOptions<TData>,
+) {
+  const gridApi = shallowRef<GridApi>();
+
+  const gridOptions = computed<GridOptions>(() => {
+    const def: GridOptions<TData> = {
+      theme: AgGridTheme,
+      loadingOverlayComponent: PlAgOverlayLoading,
+      noRowsOverlayComponent: PlAgOverlayNoRows,
+      onGridReady: (e: GridReadyEvent) => {
+        gridApi.value = e.api;
+        autoSizeRowNumberColumn(e.api);
+      },
+    };
+
+    return Object.assign({}, def, factory());
+  });
+
+  watch(() => gridOptions.value.loadingOverlayComponentParams, (newParams) => {
+    // Hack to apply loadingOverlayComponentParams
+    gridApi.value?.updateGridOptions({
+      loading: !gridOptions.value.loading,
+    });
+
+    gridApi.value?.updateGridOptions({
+      loading: gridOptions.value.loading,
+      loadingOverlayComponentParams: newParams,
+    });
+  }, { deep: true });
+
+  return { gridOptions, gridApi };
+};

package/src/lib.ts

@@ -15,10 +15,7 @@ export * from './components/PlAgCellStatusTag';
 export * from './components/PlAgChartStackedBarCell';
 export * from './components/PlAgChartHistogramCell';
 
-export * from './components/PlAgDataTable/types';
-export * from './components/PlAgDataTable/sources/row-number';
-export * from './components/PlAgDataTable/sources/focus-row';
-export * from './components/PlAgDataTable/sources/menu-items';
+export * from './components/PlAgDataTable';
 
 export * from './components/PlAgCsvExporter';