@platforma-sdk/ui-vue 1.11.2 → 1.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -37,7 +37,7 @@
     "@ag-grid-community/theming": "^32.3.3",
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
-    "@milaboratories/uikit": "^2.2.9",
+    "@milaboratories/uikit": "^2.2.10",
     "@platforma-sdk/model": "^1.10.12"
   },
   "devDependencies": {

package/src/aggrid.ts

@@ -44,7 +44,7 @@ const agGridOverrideStyles = createPart('headerBottomBorder').withCSS(OverrideCs
 export const AgGridTheme: Theme = themeQuartz
   .withParams({
     headerColumnResizeHandleColor: 'transparent',
-    accentColor: '#110529',
+    accentColor: '#49cc49',
     borderColor: '#E1E3EB',
     cellHorizontalPaddingScale: 1,
     checkboxBorderRadius: '3px',

package/src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { ICellRendererParams } 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 };
+}>();
+
+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);
+  } else {
+    console.warn(`Row with index ${props.params.node.rowIndex} not found.`);
+  }
+}
+</script>
+<template>
+  <div class="pl-ag-grid-open-cell d-flex">
+    <div class="pl-ag-grid-open-cell__value">
+      {{ 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' }}
+    </div>
+  </div>
+</template>

package/src/components/PlAgTextAndButtonCell/index.ts

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

package/src/components/PlAgTextAndButtonCell/pl-ag-text-and-button-cell.scss

@@ -0,0 +1,36 @@
+.pl-ag-grid-open-cell {
+    align-items: center;
+
+    &__activator {
+        position: absolute;
+        right: 8px;
+        border-radius: 4px;
+        border: 1px solid var(--border-color-div-grey);
+        padding: 4px 6px 4px 4px;
+        gap: 3px;
+        cursor: pointer;
+        display: none;
+        background-color: var(--ic-00);
+        opacity: 1;
+
+        &:hover {
+            background-color: #EFF2F7;
+
+        }
+
+        &:active {
+            background-color: #E7EBF3;
+        }
+    }
+
+    &__value {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+.ag-row-hover {
+    .pl-ag-grid-open-cell__activator {
+        display: flex;
+    }
+}

package/src/lib.ts

@@ -12,6 +12,8 @@ export * from './components/PlAgCellFile';
 
 export * from './components/PlAgDataTable/types';
 
+export * from './components/PlAgTextAndButtonCell';
+
 export * from './defineApp';
 
 export * from './createModel';