@platforma-sdk/ui-vue 1.47.4 → 1.48.0

package/src/components/PlAgDataTable/PlAgOverlayLoading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { PlSplash } from '@milaboratories/uikit';
-import { ref } from 'vue';
+import { PlPlaceholder } from '@milaboratories/uikit';
+import type { PlPlaceholderProps } from '@milaboratories/uikit';
+import { computed, ref } from 'vue';
 import style from './pl-ag-overlay-loading.module.scss';
 import type { PlAgOverlayLoadingParams } from './types';
 
@@ -13,6 +14,19 @@ const props = defineProps<{
 
 const params = ref(props.params);
 
+const placeholderTexts = computed<
+  Pick<PlPlaceholderProps, 'title' | 'subtitle'>
+>(() => {
+  const loadingText = params.value.loadingText;
+  if (!loadingText) {
+    return {};
+  }
+  if (typeof loadingText === 'string') {
+    return { title: loadingText };
+  }
+  return loadingText;
+});
+
 defineExpose({
   refresh: (newParams: PlAgOverlayLoadingParams) => {
     params.value = newParams;
@@ -21,15 +35,11 @@ defineExpose({
 </script>
 
 <template>
-  <PlSplash
-    :loading="!params.notReady"
-    :type="params.overlayType ?? 'table'"
-    :loading-text="params.loadingText ?? 'Loading'"
-    :class="style.container"
-  >
+  <div :class="style.container">
     <div v-if="params.notReady" :class="style.notReadyWrapper">
       <div :class="style.iconCatInBag" />
       <h3 :class="style.text">{{ params.notReadyText || 'No datasource' }}</h3>
     </div>
-  </PlSplash>
+    <PlPlaceholder v-else v-bind="placeholderTexts" variant="table" />
+  </div>
 </template>

package/src/components/PlAgDataTable/types.ts

@@ -215,15 +215,14 @@ export type PlAgOverlayLoadingParams = {
   /**
    * Prop to override default "Loading" text
    */
-  loadingText?: string;
+  loadingText?: string | {
+    title: string;
+    subtitle: string | string[];
+  };
   /**
    * Prop to override default "No datasource" text (So why props name is notReady? Good question)
    */
   notReadyText?: string;
-  /**
-   * Use "transparent" to make table headers visible below the loading layer
-   */
-  overlayType?: 'transparent';
 };
 
 export type PlAgOverlayNoRowsParams = {