@milaboratories/milaboratories.ui-examples.ui 1.3.66 → 1.3.68

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 (10) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +16 -0
  3. package/dist/assets/{index-BrPfqVTU.js → index-Bv15o_Z5.js} +187 -187
  4. package/dist/assets/{index-BrPfqVTU.js.map → index-Bv15o_Z5.js.map} +1 -1
  5. package/dist/assets/index-X3iNYdP8.css +1 -0
  6. package/dist/index.html +2 -2
  7. package/package.json +5 -5
  8. package/src/app.ts +2 -0
  9. package/src/pages/RadioPage.vue +105 -0
  10. package/dist/assets/index-BFj2kmxE.css +0 -1
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-BrPfqVTU.js"></script>
8
- <link rel="stylesheet" crossorigin href="./assets/index-BFj2kmxE.css">
7
+ <script type="module" crossorigin src="./assets/index-Bv15o_Z5.js"></script>
8
+ <link rel="stylesheet" crossorigin href="./assets/index-X3iNYdP8.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.66",
3
+ "version": "1.3.68",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "vue": "^3.5.13",
7
- "@milaboratories/milaboratories.ui-examples.model": "1.1.46",
8
- "@platforma-sdk/model": "^1.29.14"
7
+ "@milaboratories/milaboratories.ui-examples.model": "1.1.48",
8
+ "@platforma-sdk/model": "^1.29.16"
9
9
  },
10
10
  "devDependencies": {
11
11
  "@vitejs/plugin-vue": "^5.2.3",
@@ -17,8 +17,8 @@
17
17
  "ag-grid-enterprise": "^33.0.4",
18
18
  "ag-grid-vue3": "^33.0.4",
19
19
  "rollup-plugin-sourcemaps2": "^0.5.0",
20
- "@platforma-sdk/ui-vue": "^1.29.14",
21
- "@milaboratories/helpers": "^1.6.11"
20
+ "@milaboratories/helpers": "^1.6.11",
21
+ "@platforma-sdk/ui-vue": "^1.29.16"
22
22
  },
23
23
  "scripts": {
24
24
  "dev": "vite",
package/src/app.ts CHANGED
@@ -26,6 +26,7 @@ import { HistogramPage } from './pages/HistogramPage';
26
26
  import { StackedBarPage } from './pages/StackedBarPage';
27
27
  import PlSplashPage from './pages/PlSplashPage.vue';
28
28
  import PlAutocompletePage from './pages/PlAutocompletePage.vue';
29
+ import RadioPage from './pages/RadioPage.vue';
29
30
 
30
31
  export const sdkPlugin = defineApp(platforma, (app) => {
31
32
  // Additional data
@@ -102,6 +103,7 @@ export const sdkPlugin = defineApp(platforma, (app) => {
102
103
  '/loaders': () => LoadersPage,
103
104
  '/add-section': () => AddSectionPage,
104
105
  '/section': () => SectionPage,
106
+ '/radio': () => RadioPage,
105
107
  },
106
108
  };
107
109
  }, {
package/src/pages/RadioPage.vue ADDED
@@ -0,0 +1,105 @@
1
+ <script setup lang="ts">
2
+ import { faker } from '@faker-js/faker';
3
+ import { PlBlockPage, PlRadio, PlRadioGroup, PlRow, randomString } from '@platforma-sdk/ui-vue';
4
+ import { ref } from 'vue';
5
+
6
+ function generateOption() {
7
+ const id = randomString(8);
8
+ const sex = faker.person.sexType();
9
+ const firstName = faker.person.firstName(sex);
10
+ const lastName = faker.person.lastName(sex);
11
+ return { id, firstName, lastName, sex };
12
+ }
13
+
14
+ type Option = ReturnType<typeof generateOption>;
15
+
16
+ const options = Array.from({ length: 6 }, () => {
17
+ const person = generateOption();
18
+ return {
19
+ label: faker.person.fullName(person),
20
+ value: person,
21
+ disabled: faker.datatype.boolean(1 / 4),
22
+ };
23
+ });
24
+
25
+ const standaloneValue = ref<Option>();
26
+ const groupValue = ref<Option>();
27
+ const groupWithOptionsValue = ref<Option>(options[1].value);
28
+
29
+ function prettifyValue<T>(value: T) {
30
+ return value ? JSON.stringify(value, null, 2) : '<unset>';
31
+ }
32
+ </script>
33
+
34
+ <template>
35
+ <PlBlockPage>
36
+ <template #title>Tabs</template>
37
+ <PlRow>
38
+ <div :class="$style.container">
39
+ <h1>Standalone</h1>
40
+ <PlRadio
41
+ v-for="option in options"
42
+ :key="option.value.id"
43
+ v-model="standaloneValue"
44
+ :value="option.value"
45
+ :disabled="option.disabled"
46
+ >
47
+ {{ option.label }}
48
+ </PlRadio>
49
+ <output>Current value:
50
+ <pre>{{ prettifyValue(standaloneValue) }}</pre>
51
+ </output>
52
+ </div>
53
+ </PlRow>
54
+ <PlRow>
55
+ <div :class="$style.container">
56
+ <h1>Grouped</h1>
57
+ <PlRadioGroup v-model="groupValue">
58
+ <template #label>Group Label</template>
59
+ <PlRadio
60
+ v-for="option in options"
61
+ :key="option.value.id"
62
+ v-model="groupValue"
63
+ :value="option.value"
64
+ :disabled="option.disabled"
65
+ >
66
+ {{ option.label }}
67
+ </PlRadio>
68
+ </PlRadioGroup>
69
+ <output>Current value:
70
+ <pre>{{ prettifyValue(groupValue) }}</pre>
71
+ </output>
72
+ </div>
73
+ </PlRow>
74
+ <PlRow>
75
+ <div :class="$style.container">
76
+ <h1>Grouped, with <code :style="{ fontSize: 'inherit' }">options</code> prop</h1>
77
+ <PlRadioGroup
78
+ v-model="groupWithOptionsValue"
79
+ :options="options"
80
+ >
81
+ <template #label>Group Label</template>
82
+ </PlRadioGroup>
83
+ <output>Current value:
84
+ <pre>{{ prettifyValue(groupWithOptionsValue) }}</pre>
85
+ </output>
86
+ </div>
87
+ </PlRow>
88
+ </PlBlockPage>
89
+ </template>
90
+
91
+ <style module>
92
+ .container {
93
+ display: flex;
94
+ flex-direction: column;
95
+ gap: 8px;
96
+ h1 {
97
+ font-size: 2rem;
98
+ line-height: 1.5;
99
+ margin-block-end: 16px;
100
+ }
101
+ output {
102
+ margin-block-start: 12px;
103
+ }
104
+ }
105
+ </style>