@milaboratories/milaboratories.ui-examples.ui 1.5.7 → 1.5.9

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-BncLxgwa.js → index-CoJnpWax.js} +106 -132
  4. package/dist/assets/{index-BncLxgwa.js.map → index-CoJnpWax.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 +7 -7
  8. package/src/pages/PlAgDataTableV2Page.vue +50 -21
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-BncLxgwa.js"></script>
7
+ <script type="module" crossorigin src="./assets/index-CoJnpWax.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":";AAofA,wBAKG"}
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@milaboratories/milaboratories.ui-examples.ui",
3
- "version": "1.5.7",
3
+ "version": "1.5.9",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "vue": "^3.5.13",
7
- "@milaboratories/milaboratories.ui-examples.model": "1.2.6",
8
- "@platforma-sdk/model": "^1.40.0"
7
+ "@platforma-sdk/model": "^1.40.1",
8
+ "@milaboratories/milaboratories.ui-examples.model": "1.2.8"
9
9
  },
10
10
  "devDependencies": {
11
11
  "@vitejs/plugin-vue": "^5.2.3",
@@ -18,11 +18,11 @@
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
- "@milaboratories/ts-configs": "1.0.4",
22
- "@platforma-sdk/ui-vue": "^1.40.0",
23
- "@milaboratories/helpers": "^1.6.17",
24
21
  "@milaboratories/build-configs": "1.0.4",
25
- "@milaboratories/uikit": "^2.3.10"
22
+ "@platforma-sdk/ui-vue": "^1.40.2",
23
+ "@milaboratories/ts-configs": "1.0.4",
24
+ "@milaboratories/uikit": "^2.3.11",
25
+ "@milaboratories/helpers": "^1.6.17"
26
26
  },
27
27
  "scripts": {
28
28
  "dev": "vite",
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,23 +21,24 @@ 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}`,
28
- value: `source_${i}`,
35
+ value: `source_${1 + i}`,
29
36
  };
30
37
  });
31
- const activeSource = ref(sources[0].value);
32
38
 
33
39
  const loading = ref(false);
34
-
35
40
  const tableSettings = usePlDataTableSettingsV2({
36
- sourceId: () => loading.value ? 'loading_source' : activeSource.value,
41
+ sourceId: () => loading.value ? 'loading_source' : app.model.ui.dataTableV2.sourceId,
37
42
  model: () => loading.value ? undefined : app.model.outputs.ptV2,
38
43
  sheets: () => app.model.outputs.ptV2Sheets,
39
44
  filtersConfig: ({ sourceId, column }) => {
@@ -53,14 +58,11 @@ const tableSettings = usePlDataTableSettingsV2({
53
58
  }
54
59
  }
55
60
  if (isJsonEqual(sourceId, sources[1].value)) {
56
- if (
57
- column.type === 'axis'
58
- && matchAxisId({ type: 'Int', name: 'index' }, column.id)
59
- ) {
61
+ if (column.id === 'labelColumn') {
60
62
  return {
61
63
  default: {
62
- type: 'number_lessThanOrEqualTo',
63
- reference: 10,
64
+ type: 'number_greaterThanOrEqualTo',
65
+ reference: 100000 - 10,
64
66
  },
65
67
  };
66
68
  }
@@ -70,7 +72,6 @@ const tableSettings = usePlDataTableSettingsV2({
70
72
  });
71
73
 
72
74
  const verbose = ref(false);
73
-
74
75
  const cellRendererSelector = computed(() => {
75
76
  if (!verbose.value) return;
76
77
  return (params: ICellRendererParams) => {
@@ -86,6 +87,19 @@ const selection = ref<PlSelectionModel>({
86
87
  axesSpec: [],
87
88
  selectedKeys: [],
88
89
  });
90
+ watch(
91
+ () => selection.value,
92
+ (selection) => console.log(`selection changed`, toValue(selection)),
93
+ );
94
+
95
+ const selectionLabeled = ref<PlTableLabeledSelectionModel>({
96
+ spec: [],
97
+ selectedLabeledKeys: [],
98
+ });
99
+ watch(
100
+ () => selectionLabeled.value,
101
+ (selection) => console.log(`selectionLabeled changed`, toValue(selection)),
102
+ );
89
103
 
90
104
  const reactiveText = ref(false);
91
105
 
@@ -115,32 +129,47 @@ watchEffect(() => {
115
129
  });
116
130
  });
117
131
 
132
+ const tableRef = useTemplateRef<PlAgDataTableV2Controller>('tableRef');
118
133
  watch(
119
- () => selection.value,
120
- (selection) => console.log(`selection changed`, toValue(selection)),
134
+ () => [tableRef.value, app.model.outputs.ptV2] as const,
135
+ ([table]) => {
136
+ if (!table) return;
137
+ if (selection.value.selectedKeys.length > 0) {
138
+ table.focusRow(selection.value.selectedKeys[0]);
139
+ }
140
+ },
121
141
  );
142
+
122
143
  </script>
123
144
 
124
145
  <template>
125
146
  <PlBlockPage>
126
147
  <template #title>PlAgDataTable V2</template>
148
+ <template #append>
149
+ <PlBtnGhost icon="settings" @click.exact.stop="() => (settingsOpen = true)">
150
+ Settings
151
+ </PlBtnGhost>
152
+ </template>
127
153
  <PlAgDataTableV2
128
- v-model="app.model.ui.dataTableStateV2"
154
+ ref="tableRef"
155
+ v-model="app.model.ui.dataTableV2.state"
129
156
  v-model:selection="selection"
157
+ v-model:selection-labeled="selectionLabeled"
130
158
  :settings="tableSettings"
131
159
  :cell-renderer-selector="cellRendererSelector"
132
160
  v-bind="reactiveTextProps"
133
161
  show-export-button
134
162
  >
135
163
  <template #before-sheets>
164
+ <PlDropdown v-model="app.model.ui.dataTableV2.sourceId" :options="sources" clearable />
136
165
  <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
- <PlDropdown v-model="activeSource" :options="sources" clearable />
143
166
  </template>
144
167
  </PlAgDataTableV2>
145
168
  </PlBlockPage>
169
+ <PlSlideModal v-model="settingsOpen" :close-on-outside-click="true">
170
+ <template #title>Settings</template>
171
+ <PlCheckbox v-model="verbose">Apply custom cell renderer for numbers</PlCheckbox>
172
+ <PlCheckbox v-model="loading">Display infinite loading</PlCheckbox>
173
+ <PlCheckbox v-model="reactiveText">Show reactive loading message</PlCheckbox>
174
+ </PlSlideModal>
146
175
  </template>