@milaboratories/milaboratories.ui-examples.ui 1.3.21 → 1.3.22
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/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +6 -0
- package/dist/assets/{index-Bf7C462b.css → index-BAGoOWSb.css} +1 -1
- package/dist/assets/{index-Ce8KzmCB.js → index-CgivL3td.js} +107 -107
- package/dist/assets/{index-Ce8KzmCB.js.map → index-CgivL3td.js.map} +1 -1
- package/dist/index.html +2 -2
- package/package.json +5 -5
- package/src/pages/ModalsPage.vue +27 -4
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<script type="module" crossorigin src="./assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="./assets/index-
|
|
7
|
+
<script type="module" crossorigin src="./assets/index-CgivL3td.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="./assets/index-BAGoOWSb.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="app"></div>
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milaboratories/milaboratories.ui-examples.ui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.22",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.13",
|
|
7
|
-
"@
|
|
8
|
-
"@
|
|
7
|
+
"@platforma-sdk/model": "^1.21.20",
|
|
8
|
+
"@milaboratories/milaboratories.ui-examples.model": "1.1.12"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
11
11
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"zod": "~3.23.8",
|
|
17
17
|
"ag-grid-enterprise": "^33.0.3",
|
|
18
18
|
"ag-grid-vue3": "^33.0.3",
|
|
19
|
-
"@
|
|
20
|
-
"@
|
|
19
|
+
"@milaboratories/helpers": "^1.6.11",
|
|
20
|
+
"@platforma-sdk/ui-vue": "^1.21.24"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
23
|
"dev": "vite",
|
package/src/pages/ModalsPage.vue
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { faker } from '@faker-js/faker';
|
|
3
3
|
import { listToOptions } from '@milaboratories/helpers';
|
|
4
|
+
import type {
|
|
5
|
+
Size } from '@platforma-sdk/ui-vue';
|
|
4
6
|
import {
|
|
5
7
|
PlBlockPage,
|
|
6
8
|
PlTextField,
|
|
@@ -27,7 +29,8 @@ const dialogData = reactive({
|
|
|
27
29
|
title: true,
|
|
28
30
|
actions: true,
|
|
29
31
|
actionsHasTopBorder: true,
|
|
30
|
-
|
|
32
|
+
size: undefined as Size | undefined,
|
|
33
|
+
dialogWidth: 448, // default,
|
|
31
34
|
maxHeight: 440,
|
|
32
35
|
contentHeight: 216,
|
|
33
36
|
closeOnOutsideClick: true,
|
|
@@ -65,6 +68,20 @@ for (const example of modalVariants) {
|
|
|
65
68
|
}
|
|
66
69
|
|
|
67
70
|
const lorem = faker.lorem.paragraph(100);
|
|
71
|
+
|
|
72
|
+
const sizeOptions = [{
|
|
73
|
+
label: 'Small',
|
|
74
|
+
value: 'small',
|
|
75
|
+
}, {
|
|
76
|
+
label: 'Medium',
|
|
77
|
+
value: 'medium',
|
|
78
|
+
}, {
|
|
79
|
+
label: 'Large',
|
|
80
|
+
value: 'large',
|
|
81
|
+
}, {
|
|
82
|
+
label: 'Unset',
|
|
83
|
+
value: undefined,
|
|
84
|
+
}];
|
|
68
85
|
</script>
|
|
69
86
|
|
|
70
87
|
<template>
|
|
@@ -77,6 +94,11 @@ const lorem = faker.lorem.paragraph(100);
|
|
|
77
94
|
Open PlDialogModal
|
|
78
95
|
</PlBtnPrimary>
|
|
79
96
|
</PlRow>
|
|
97
|
+
<PlDropdown v-model="dialogData.size" label="Size (Takes precedence over (min | max)(width | height) properties)" :options="sizeOptions" />
|
|
98
|
+
<PlNumberField
|
|
99
|
+
v-model="dialogData.dialogWidth"
|
|
100
|
+
label="Dialog width in px (without gutters)"
|
|
101
|
+
/>
|
|
80
102
|
<PlNumberField
|
|
81
103
|
v-model="dialogData.contentHeight"
|
|
82
104
|
label="Content height in px (without gutters)"
|
|
@@ -118,7 +140,8 @@ const lorem = faker.lorem.paragraph(100);
|
|
|
118
140
|
<!--Dialog modal-->
|
|
119
141
|
<PlDialogModal
|
|
120
142
|
v-model="dialogData.dialogModal"
|
|
121
|
-
:
|
|
143
|
+
:size="dialogData.size"
|
|
144
|
+
:width="`${dialogData.dialogWidth}px`"
|
|
122
145
|
:close-on-outside-click="dialogData.closeOnOutsideClick"
|
|
123
146
|
:actions-has-top-border="dialogData.actionsHasTopBorder"
|
|
124
147
|
:max-height="`${dialogData.maxHeight}px`"
|
|
@@ -139,7 +162,7 @@ const lorem = faker.lorem.paragraph(100);
|
|
|
139
162
|
<!--Examples-->
|
|
140
163
|
<PlDialogModal
|
|
141
164
|
v-model="append.newProject"
|
|
142
|
-
:width="dialogData.dialogWidth"
|
|
165
|
+
:width="`${dialogData.dialogWidth}px`"
|
|
143
166
|
:close-on-outside-click="dialogData.closeOnOutsideClick"
|
|
144
167
|
:actions-has-top-border="dialogData.actionsHasTopBorder"
|
|
145
168
|
>
|
|
@@ -153,7 +176,7 @@ const lorem = faker.lorem.paragraph(100);
|
|
|
153
176
|
|
|
154
177
|
<PlDialogModal
|
|
155
178
|
v-model="append.newProject2"
|
|
156
|
-
:width="dialogData.dialogWidth"
|
|
179
|
+
:width="`${dialogData.dialogWidth}px`"
|
|
157
180
|
:close-on-outside-click="dialogData.closeOnOutsideClick"
|
|
158
181
|
:actions-has-top-border="dialogData.actionsHasTopBorder"
|
|
159
182
|
>
|