@platforma-sdk/ui-vue 1.11.6 → 1.11.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.11.6",
+  "version": "1.11.8",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",

package/src/aggrid.ts

@@ -48,6 +48,10 @@ export const AgGridTheme: Theme = themeQuartz
     borderColor: '#E1E3EB',
     cellHorizontalPaddingScale: 1,
     checkboxBorderRadius: '3px',
+    checkboxCheckedBackgroundColor: '#110529',
+    checkboxCheckedBorderColor: '#110529',
+    checkboxIndeterminateBackgroundColor: '#110529',
+    checkboxIndeterminateBorderColor: '#110529',
     checkboxUncheckedBorderColor: '#CFD1DB',
     columnBorder: true,
     columnHoverColor: '#9BABCC16',

package/src/assets/block.scss

@@ -43,6 +43,45 @@
     padding: 0;
   }
 
+  &__loader {
+    height: 4px;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    overflow: hidden;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -50%;
+      height: 4px;
+      width: 33%;
+      background-color: var(--border-color-focus);
+      animation: loader-animation 1.3s linear infinite;
+    }
+  }
+
+  &__progress {
+    --progress-width: 0%;
+    height: 4px;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    overflow: hidden;
+    &:before {
+      content: "";
+      position: absolute;
+      left: 0;
+      height: 4px;
+      width: var(--progress-width);
+      background-color: var(--border-color-focus);
+      will-change: width;
+    }
+  }
+
   &__error {
     background: var(--txt-error);
     color: #fff;
@@ -69,4 +108,18 @@
       overflow: auto;
     }
   }
+
+  @keyframes loader-animation {
+    0% {
+      left: -40%;
+    }
+    50% {
+      left: 20%;
+      width: 38%;
+    }
+    100% {
+      left: 100%;
+      width: 50%;
+    }
+  }
 }

package/src/components/BlockLayout.vue

@@ -6,6 +6,7 @@ import { useSdkPlugin } from '../defineApp';
 import NotFound from './NotFound.vue';
 import LoaderPage from './LoaderPage.vue';
 import { PlAppErrorNotificationAlert } from './PlAppErrorNotificationAlert';
+import BlockLoader from './BlockLoader.vue';
 
 const sdk = useSdkPlugin();
 
@@ -35,10 +36,13 @@ const app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));
 const errors = computed(() => (app.value ? app.value.model.outputErrors : {}));
 
 const showErrorsNotification = computed(() => app.value?.showErrorsNotification ?? true);
+
+const progress = computed(() => app.value?.progress?.());
 </script>
 
 <template>
   <div class="block block__layout">
+    <BlockLoader :value="progress" />
     <div v-if="sdk.error">{{ sdk.error }}</div>
     <LoaderPage v-else-if="!sdk.loaded">Loading...</LoaderPage>
     <component :is="CurrentView" v-else-if="CurrentView" :key="href" />

package/src/components/BlockLoader.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps<{
+  value: boolean | number | undefined;
+}>();
+
+const isLoader = computed(() => typeof props.value === 'boolean' && props.value);
+
+const progressWidth = computed(() => {
+  const value = props.value;
+
+  if (typeof value === 'number') {
+    if (value >= 1) {
+      return undefined;
+    }
+
+    return (value * 100).toFixed(2) + '%';
+  }
+
+  return undefined;
+});
+</script>
+
+<template>
+  <div v-if="isLoader" class="block__loader" />
+  <div v-else-if="progressWidth !== undefined" class="block__progress" :style="{ '--progress-width': progressWidth }" />
+</template>

package/src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue

@@ -1,24 +1,57 @@
 <script lang="ts" setup>
-import type { ICellRendererParams } from '@ag-grid-community/core';
+import type { ICellRendererParams, RowDoubleClickedEvent } from '@ag-grid-community/core';
 import type { MaskIconName16 } from '@milaboratories/uikit';
 import { PlMaskIcon16 } from '@milaboratories/uikit';
 import './pl-ag-text-and-button-cell.scss';
 
 const props = defineProps<{
-  params: ICellRendererParams & { plIcon?: MaskIconName16; plBtnLabel?: string };
+  params: ICellRendererParams & {
+    /**
+     * Button icon MaskIconName16
+     */
+    icon?: MaskIconName16;
+    /**
+     * Button label
+     */
+    btnLabel?: string;
+    /**
+     * If invokeRowsOnDoubleClick = true, clicking a button inside the row
+     * triggers the doubleClick event for the entire row. In this case,
+     * the handler passed to the component is not called, even if it is defined.
+     *
+     * If invokeRowsOnDoubleClick = false, the doubleClick event for the row
+     * is not triggered, but the provided handler will be called, receiving
+     * the ICellRendererParams as an argument.
+     */
+    invokeRowsOnDoubleClick?: boolean;
+    /**
+     * plHandler parameter is a click handler that is invoked when
+     * the invokeRowsOnDoubleClick property is set to false.
+     */
+    onClick?: (params: ICellRendererParams) => void;
+  };
 }>();
 
+console.log(props);
+
 function triggerRowDoubleClick() {
-  const rowElement = document.querySelector(`.ag-row[row-index="${props.params.node.rowIndex}"]`);
-  if (rowElement) {
-    const dblClickEvent = new MouseEvent('dblclick', {
-      bubbles: true,
-      cancelable: true,
-      view: window,
-    });
-    rowElement.dispatchEvent(dblClickEvent);
+  if (props.params.invokeRowsOnDoubleClick) {
+    const gridApi = props.params.api;
+
+    const event: RowDoubleClickedEvent = {
+      rowPinned: props.params.node.rowPinned,
+      api: gridApi,
+      rowIndex: props.params.node.rowIndex,
+      context: gridApi,
+      type: 'rowDoubleClicked',
+      node: props.params.node,
+      data: props.params.data,
+      event: null,
+    };
+
+    gridApi.dispatchEvent(event);
   } else {
-    console.warn(`Row with index ${props.params.node.rowIndex} not found.`);
+    props.params.onClick && props.params.onClick(props.params);
   }
 }
 </script>
@@ -28,8 +61,8 @@ function triggerRowDoubleClick() {
       {{ params.value }}
     </div>
     <div class="pl-ag-grid-open-cell__activator text-caps11 align-center" @click.stop="triggerRowDoubleClick">
-      <PlMaskIcon16 :name="params.plIcon ?? 'maximize'" />
-      {{ params.plBtnLabel ?? 'Open' }}
+      <PlMaskIcon16 :name="params.icon ?? 'maximize'" />
+      {{ params.btnLabel ?? 'Open' }}
     </div>
   </div>
 </template>

package/src/components/PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue

@@ -29,7 +29,7 @@ watch(
 </script>
 <template>
   <div class="pl-app-notification-alert">
-    <PlDialogModal v-model="isModalOpen" width="50%" style="max-height: 100vh">
+    <PlDialogModal v-model="isModalOpen" width="720px" style="max-height: 100vh">
       <template #title> Errors </template>
       <div class="pl-app-notification-alert__content">
         <template v-for="item in existingErrors" :key="item[0]">

package/src/types.ts

@@ -63,7 +63,24 @@ export type AppSettings = {
 };
 
 export type ExtendSettings<Href extends `/${string}` = `/${string}`> = {
+  /**
+   * Displays a loader on top of the block.
+   * - If `true`: Shows an infinite loader.
+   * - If a number (0 <= n < 1): Displays a progress bar representing completion percentage.
+   * - If a number (n > 1): Hides the progress bar.
+   * - If `undefined`: No loader is displayed.
+   */
+  progress?: () => number | boolean | undefined;
+  /**
+   * Enables or disables a notification box for error messages.
+   * - If `true`: A notification box appears when there are errors in the outputs.
+   * - If `false`: No notification box is shown.
+   */
   showErrorsNotification?: boolean;
+  /**
+   * Maps application routes to their respective components.
+   * TODO: Consider moving route initialization logic to a dedicated method.
+   */
   routes: Routes<Href>;
 };