@milaboratories/milaboratories.ui-examples.ui 1.5.6 → 1.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/CHANGELOG.md +17 -0
  3. package/dist/assets/{index-e62AQYWR.js → index-CkICcSfv.js} +107 -133
  4. package/dist/assets/{index-e62AQYWR.js.map → index-CkICcSfv.js.map} +1 -1
  5. package/dist/index.html +1 -1
  6. package/dist/pages/PlAgDataTableV2Page.vue.d.ts.map +1 -1
  7. package/package.json +5 -5
  8. package/src/pages/PlAgDataTableV2Page.vue +47 -17
package/dist/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob: data: 'unsafe-eval';">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <script type="module" crossorigin src="./assets/index-e62AQYWR.js"></script>
7
+ <script type="module" crossorigin src="./assets/index-CkICcSfv.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="./assets/index-DVTP_zd1.css">
9
9
  </head>
10
10
  <body>
package/dist/pages/PlAgDataTableV2Page.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlAgDataTableV2Page.vue.d.ts","sourceRoot":"","sources":["../../src/pages/PlAgDataTableV2Page.vue"],"names":[],"mappings":";AAkZA,wBAKG"}
1
+ {"version":3,"file":"PlAgDataTableV2Page.vue.d.ts","sourceRoot":"","sources":["../../src/pages/PlAgDataTableV2Page.vue"],"names":[],"mappings":";AAufA,wBAKG"}
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@milaboratories/milaboratories.ui-examples.ui",
3
- "version": "1.5.6",
3
+ "version": "1.5.8",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "vue": "^3.5.13",
7
- "@milaboratories/milaboratories.ui-examples.model": "1.2.5",
8
- "@platforma-sdk/model": "^1.39.18"
7
+ "@milaboratories/milaboratories.ui-examples.model": "1.2.7",
8
+ "@platforma-sdk/model": "^1.40.1"
9
9
  },
10
10
  "devDependencies": {
11
11
  "@vitejs/plugin-vue": "^5.2.3",
@@ -18,10 +18,10 @@
18
18
  "ag-grid-enterprise": "^33.3.2",
19
19
  "ag-grid-vue3": "^33.3.2",
20
20
  "rollup-plugin-sourcemaps2": "^0.5.2",
21
- "@platforma-sdk/ui-vue": "^1.39.18",
21
+ "@platforma-sdk/ui-vue": "^1.40.1",
22
+ "@milaboratories/uikit": "^2.3.11",
22
23
  "@milaboratories/helpers": "^1.6.17",
23
24
  "@milaboratories/build-configs": "1.0.4",
24
- "@milaboratories/uikit": "^2.3.8",
25
25
  "@milaboratories/ts-configs": "1.0.4"
26
26
  },
27
27
  "scripts": {
package/src/pages/PlAgDataTableV2Page.vue CHANGED
@@ -1,13 +1,17 @@
1
1
  <script setup lang="ts">
2
2
  import { isJsonEqual } from '@milaboratories/helpers';
3
- import { matchAxisId, type PlSelectionModel } from '@platforma-sdk/model';
3
+ import { type PlSelectionModel } from '@platforma-sdk/model';
4
4
  import {
5
5
  PlAgDataTableV2,
6
6
  PlBlockPage,
7
7
  PlCheckbox,
8
8
  PlDropdown,
9
9
  PlNumberField,
10
+ PlBtnGhost,
11
+ PlSlideModal,
10
12
  usePlDataTableSettingsV2,
13
+ type PlTableLabeledSelectionModel,
14
+ type PlAgDataTableV2Controller,
11
15
  } from '@platforma-sdk/ui-vue';
12
16
  import type { ICellRendererParams } from 'ag-grid-enterprise';
13
17
  import {
@@ -17,11 +21,14 @@ import {
17
21
  toValue,
18
22
  watch,
19
23
  watchEffect,
24
+ useTemplateRef,
20
25
  } from 'vue';
21
26
  import { useApp } from '../app';
22
27
 
23
28
  const app = useApp();
24
29
 
30
+ const settingsOpen = ref(false);
31
+
25
32
  const sources = [...new Array(10)].map((_, i) => {
26
33
  return {
27
34
  label: `Source ${1 + i}`,
@@ -31,7 +38,6 @@ const sources = [...new Array(10)].map((_, i) => {
31
38
  const activeSource = ref(sources[0].value);
32
39
 
33
40
  const loading = ref(false);
34
-
35
41
  const tableSettings = usePlDataTableSettingsV2({
36
42
  sourceId: () => loading.value ? 'loading_source' : activeSource.value,
37
43
  model: () => loading.value ? undefined : app.model.outputs.ptV2,
@@ -53,14 +59,11 @@ const tableSettings = usePlDataTableSettingsV2({
53
59
  }
54
60
  }
55
61
  if (isJsonEqual(sourceId, sources[1].value)) {
56
- if (
57
- column.type === 'axis'
58
- && matchAxisId({ type: 'Int', name: 'index' }, column.id)
59
- ) {
62
+ if (column.id === 'labelColumn') {
60
63
  return {
61
64
  default: {
62
- type: 'number_lessThanOrEqualTo',
63
- reference: 10,
65
+ type: 'number_greaterThanOrEqualTo',
66
+ reference: 100000 - 10,
64
67
  },
65
68
  };
66
69
  }
@@ -70,7 +73,6 @@ const tableSettings = usePlDataTableSettingsV2({
70
73
  });
71
74
 
72
75
  const verbose = ref(false);
73
-
74
76
  const cellRendererSelector = computed(() => {
75
77
  if (!verbose.value) return;
76
78
  return (params: ICellRendererParams) => {
@@ -86,6 +88,19 @@ const selection = ref<PlSelectionModel>({
86
88
  axesSpec: [],
87
89
  selectedKeys: [],
88
90
  });
91
+ watch(
92
+ () => selection.value,
93
+ (selection) => console.log(`selection changed`, toValue(selection)),
94
+ );
95
+
96
+ const selectionLabeled = ref<PlTableLabeledSelectionModel>({
97
+ spec: [],
98
+ selectedLabeledKeys: [],
99
+ });
100
+ watch(
101
+ () => selectionLabeled.value,
102
+ (selection) => console.log(`selectionLabeled changed`, toValue(selection)),
103
+ );
89
104
 
90
105
  const reactiveText = ref(false);
91
106
 
@@ -115,32 +130,47 @@ watchEffect(() => {
115
130
  });
116
131
  });
117
132
 
133
+ const tableRef = useTemplateRef<PlAgDataTableV2Controller>('tableRef');
118
134
  watch(
119
- () => selection.value,
120
- (selection) => console.log(`selection changed`, toValue(selection)),
135
+ () => [tableRef.value, app.model.outputs.ptV2] as const,
136
+ ([table]) => {
137
+ if (!table) return;
138
+ if (selection.value.selectedKeys.length > 0) {
139
+ table.focusRow(selection.value.selectedKeys[0]);
140
+ }
141
+ },
121
142
  );
143
+
122
144
  </script>
123
145
 
124
146
  <template>
125
147
  <PlBlockPage>
126
148
  <template #title>PlAgDataTable V2</template>
149
+ <template #append>
150
+ <PlBtnGhost icon="settings" @click.exact.stop="() => (settingsOpen = true)">
151
+ Settings
152
+ </PlBtnGhost>
153
+ </template>
127
154
  <PlAgDataTableV2
155
+ ref="tableRef"
128
156
  v-model="app.model.ui.dataTableStateV2"
129
157
  v-model:selection="selection"
158
+ v-model:selection-labeled="selectionLabeled"
130
159
  :settings="tableSettings"
131
160
  :cell-renderer-selector="cellRendererSelector"
132
161
  v-bind="reactiveTextProps"
133
162
  show-export-button
134
163
  >
135
164
  <template #before-sheets>
136
- <PlNumberField v-model="app.model.args.tableNumRows" />
137
- <PlCheckbox v-model="verbose">
138
- Use custom cell renderer for numbers
139
- </PlCheckbox>
140
- <PlCheckbox v-model="loading">Infinite loading</PlCheckbox>
141
- <PlCheckbox v-model="reactiveText">Reactive text</PlCheckbox>
142
165
  <PlDropdown v-model="activeSource" :options="sources" clearable />
166
+ <PlNumberField v-model="app.model.args.tableNumRows" />
143
167
  </template>
144
168
  </PlAgDataTableV2>
145
169
  </PlBlockPage>
170
+ <PlSlideModal v-model="settingsOpen" :close-on-outside-click="true">
171
+ <template #title>Settings</template>
172
+ <PlCheckbox v-model="verbose">Apply custom cell renderer for numbers</PlCheckbox>
173
+ <PlCheckbox v-model="loading">Display infinite loading</PlCheckbox>
174
+ <PlCheckbox v-model="reactiveText">Show reactive loading message</PlCheckbox>
175
+ </PlSlideModal>
146
176
  </template>