@milaboratories/milaboratories.ui-examples.ui 1.7.1 → 1.7.3

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.
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-BaCRzfnp.js"></script>
7
+ <script type="module" crossorigin src="./assets/index-Bjxx2_vu.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="./assets/index-CrE9XJ4f.css">
9
9
  </head>
10
10
  <body>
package/package.json CHANGED
@@ -1,30 +1,32 @@
1
1
  {
2
2
  "name": "@milaboratories/milaboratories.ui-examples.ui",
3
- "version": "1.7.1",
3
+ "version": "1.7.3",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "vue": "^3.5.24",
7
- "@platforma-sdk/model": "1.47.5",
8
- "@milaboratories/milaboratories.ui-examples.model": "1.3.9"
7
+ "@milaboratories/milaboratories.ui-examples.model": "1.3.10",
8
+ "@platforma-sdk/model": "1.47.5"
9
9
  },
10
10
  "devDependencies": {
11
- "typescript": "~5.6.3",
12
11
  "@faker-js/faker": "^9.2.0",
13
- "zod": "~3.23.8",
14
12
  "ag-grid-enterprise": "~34.1.2",
15
13
  "ag-grid-vue3": "~34.1.2",
16
- "@milaboratories/ts-configs": "1.0.6",
17
- "@platforma-sdk/ui-vue": "1.47.5",
18
- "@milaboratories/build-configs": "1.0.9",
19
- "@milaboratories/ts-builder": "1.0.6",
14
+ "eslint": "^9.25.1",
15
+ "typescript": "~5.6.3",
16
+ "zod": "~3.23.8",
17
+ "@milaboratories/ts-builder": "1.2.0",
18
+ "@milaboratories/build-configs": "1.2.0",
19
+ "@platforma-sdk/eslint-config": "1.2.0",
20
+ "@milaboratories/ts-configs": "1.2.0",
20
21
  "@milaboratories/helpers": "1.12.0",
21
- "@milaboratories/uikit": "2.7.3"
22
+ "@milaboratories/uikit": "2.8.0",
23
+ "@platforma-sdk/ui-vue": "1.48.0"
22
24
  },
23
25
  "scripts": {
24
- "dev": "ts-builder serve --target browser",
25
- "watch": "ts-builder build --target browser --watch",
26
- "build": "ts-builder build --target browser",
27
- "type-check": "ts-builder types --target browser",
26
+ "dev": "ts-builder serve --target block-ui",
27
+ "watch": "ts-builder build --target block-ui --watch",
28
+ "build": "ts-builder build --target block-ui",
29
+ "type-check": "ts-builder types --target block-ui",
28
30
  "lint": "eslint ."
29
31
  }
30
32
  }
@@ -71,8 +71,6 @@ const BlankComponent: Component = {
71
71
  },
72
72
  };
73
73
 
74
- const isOverlayTransparent = ref(false);
75
-
76
74
  const rowNumbers = ref(true);
77
75
 
78
76
  const loading = ref(false);
@@ -223,7 +221,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ column }) => {
223
221
  : undefined,
224
222
  loading: loading.value,
225
223
  loadingText: loadingText.value,
226
- loadingOverlayType: isOverlayTransparent.value ? 'transparent' : undefined,
227
224
  notReady: notReady.value,
228
225
  notReadyText: 'I am not ready(',
229
226
  noRowsText: 'No rows text (custom, default is "Empty")',
@@ -249,7 +246,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ column }) => {
249
246
 
250
247
  <PlRow wrap>
251
248
  <PlCheckbox v-model="rowNumbers">Show row numbers</PlCheckbox>
252
- <PlCheckbox v-model="isOverlayTransparent">Use transparent overlay</PlCheckbox>
253
249
  <PlCheckbox v-model="loading">Loading</PlCheckbox>
254
250
  <PlCheckbox v-model="notReady">Not Ready</PlCheckbox>
255
251
  <PlCheckbox v-model="hasRows">Has rows</PlCheckbox>
@@ -85,8 +85,6 @@ const BlankComponent: Component = {
85
85
  },
86
86
  };
87
87
 
88
- const isOverlayTransparent = ref(false);
89
-
90
88
  const rowNumbers = ref(true);
91
89
 
92
90
  const loading = ref(false);
@@ -122,7 +120,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ builder }) => {
122
120
  .setNotReadyText('Not ready text (custom, default is "Not ready"')
123
121
  .setRowData(hasRows.value ? result.value : [])
124
122
  .setNoRowsText('No rows text (custom, default is "Empty")')
125
- .setLoadingOverlayType(isOverlayTransparent.value ? 'transparent' : undefined)
126
123
  .columnRowNumbers(rowNumbers.value)
127
124
  .column({
128
125
  field: 'id',
@@ -268,7 +265,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ builder }) => {
268
265
 
269
266
  <PlRow wrap>
270
267
  <PlCheckbox v-model="rowNumbers">Show row numbers</PlCheckbox>
271
- <PlCheckbox v-model="isOverlayTransparent">Use transparent overlay</PlCheckbox>
272
268
  <PlCheckbox v-model="loading">Loading</PlCheckbox>
273
269
  <PlCheckbox v-model="notReady">Not Ready</PlCheckbox>
274
270
  <PlCheckbox v-model="hasRows">Has rows</PlCheckbox>
@@ -1,8 +1,18 @@
1
1
  <script setup lang="ts">
2
2
  import { faker } from '@faker-js/faker';
3
- import { PlBlockPage, PlBtnPrimary, PlCheckbox, PlContainer, PlRow, PlSplash, PlTextField } from '@platforma-sdk/ui-vue';
3
+ import {
4
+ PlBlockPage,
5
+ PlBtnGroup,
6
+ PlBtnPrimary,
7
+ PlCheckbox,
8
+ PlContainer,
9
+ PlNumberField,
10
+ PlRow,
11
+ PlSplash,
12
+ PlTextField,
13
+ } from '@platforma-sdk/ui-vue';
4
14
  import type { Ref } from 'vue';
5
- import { reactive, ref } from 'vue';
15
+ import { computed, reactive, ref } from 'vue';
6
16
 
7
17
  const lorem1 = faker.lorem.paragraph(5);
8
18
  const lorem2 = faker.lorem.paragraph(5);
@@ -15,11 +25,22 @@ const form = reactive({
15
25
  });
16
26
 
17
27
  const isBodyLoading = ref(false);
28
+ const isDefaultLoadingText = ref(true);
29
+
30
+ const loadingPlaceholderOptions = [
31
+ { label: 'Table', value: 'table' },
32
+ { label: 'Graph', value: 'graph' },
33
+ ] as const;
34
+ const bodyLoadingPlaceholderVariant = ref<
35
+ typeof loadingPlaceholderOptions[number]['value']
36
+ >('table');
18
37
 
19
38
  const isFormLoading = ref(false);
20
39
 
21
40
  const isParagraphLoading = ref(false);
22
41
 
42
+ const loadingDuration = ref(3);
43
+
23
44
  const useFakeLoading = (isLoading: Ref<boolean>) => {
24
45
  return () => {
25
46
  if (isLoading.value) {
@@ -29,20 +50,45 @@ const useFakeLoading = (isLoading: Ref<boolean>) => {
29
50
  isLoading.value = true;
30
51
  setTimeout(() => {
31
52
  isLoading.value = false;
32
- }, 3000);
53
+ }, loadingDuration.value * 1000);
33
54
  };
34
55
  };
35
56
 
36
57
  const onReloadBody = useFakeLoading(isBodyLoading);
37
58
  const onReloadForm = useFakeLoading(isFormLoading);
38
59
  const onReloadParagraph = useFakeLoading(isParagraphLoading);
60
+
61
+ const bodyLoading = computed(() => {
62
+ if (!isBodyLoading.value) {
63
+ return;
64
+ }
65
+ if (isDefaultLoadingText.value) {
66
+ return bodyLoadingPlaceholderVariant.value;
67
+ }
68
+ return {
69
+ variant: bodyLoadingPlaceholderVariant.value,
70
+ title: 'Loading Title',
71
+ subtitle: Array.from(
72
+ { length: 3 },
73
+ (_, i) => `Loading Subtitle ${i}`,
74
+ ),
75
+ };
76
+ });
39
77
  </script>
40
78
 
41
79
  <template>
42
- <PlBlockPage :body-loading="isBodyLoading" body-loading-text="Page Loading">
80
+ <PlBlockPage :body-loading>
43
81
  <template #title>PlSplash Component</template>
44
82
  <template #append>
83
+ <PlBtnGroup
84
+ v-model="bodyLoadingPlaceholderVariant"
85
+ :options="loadingPlaceholderOptions"
86
+ />
87
+ <PlNumberField v-model="loadingDuration" label="Loading Duration" />
45
88
  <PlBtnPrimary @click="onReloadBody">Reload page body</PlBtnPrimary>
89
+ <PlCheckbox v-model="isDefaultLoadingText">
90
+ Default loading text
91
+ </PlCheckbox>
46
92
  </template>
47
93
  <PlRow>
48
94
  <PlContainer width="50%">
package/tsconfig.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "extends": "@milaboratories/ts-configs/tsconfig.browser.json",
2
+ "extends": "@milaboratories/ts-configs/block/ui",
3
3
  "compilerOptions": {
4
4
  "outDir": "./dist",
5
5
  "rootDir": "./src"