@milaboratories/milaboratories.ui-examples.ui 1.3.23 → 1.3.24

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 (16) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/CHANGELOG.md +8 -0
  3. package/dist/assets/{index-BJn31dUr.js → index-BnY_HQaE.js} +187 -187
  4. package/dist/assets/{index-BJn31dUr.js.map → index-BnY_HQaE.js.map} +1 -1
  5. package/dist/assets/{index-DmxTERuE.css → index-CSH2gGW0.css} +1 -1
  6. package/dist/index.html +2 -2
  7. package/package.json +4 -4
  8. package/src/app.ts +3 -5
  9. package/src/pages/{DropdownsPage.vue → FormComponentsPage/Dropdowns.vue} +55 -52
  10. package/src/pages/FormComponentsPage/FormComponentsPage.vue +59 -0
  11. package/src/pages/FormComponentsPage/Main.vue +105 -0
  12. package/src/pages/FormComponentsPage/WithTooltips.vue +141 -0
  13. package/src/pages/FormComponentsPage/index.ts +1 -0
  14. package/src/pages/HistogramPage/index.ts +1 -0
  15. package/src/pages/StackedBarPage/index.ts +1 -0
  16. package/src/pages/FormComponentsPage.vue +0 -109
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-BJn31dUr.js"></script>
8
- <link rel="stylesheet" crossorigin href="./assets/index-DmxTERuE.css">
7
+ <script type="module" crossorigin src="./assets/index-BnY_HQaE.js"></script>
8
+ <link rel="stylesheet" crossorigin href="./assets/index-CSH2gGW0.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="app"></div>
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@milaboratories/milaboratories.ui-examples.ui",
3
- "version": "1.3.23",
3
+ "version": "1.3.24",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "vue": "^3.5.13",
7
- "@milaboratories/milaboratories.ui-examples.model": "1.1.12",
7
+ "@milaboratories/milaboratories.ui-examples.model": "1.1.13",
8
8
  "@platforma-sdk/model": "^1.21.20"
9
9
  },
10
10
  "devDependencies": {
@@ -17,8 +17,8 @@
17
17
  "ag-grid-enterprise": "^33.0.3",
18
18
  "ag-grid-vue3": "^33.0.3",
19
19
  "rollup-plugin-sourcemaps": "^0.6.3",
20
- "@platforma-sdk/ui-vue": "^1.21.25",
21
- "@milaboratories/helpers": "^1.6.11"
20
+ "@milaboratories/helpers": "^1.6.11",
21
+ "@platforma-sdk/ui-vue": "^1.21.29"
22
22
  },
23
23
  "scripts": {
24
24
  "dev": "vite",
package/src/app.ts CHANGED
@@ -4,9 +4,7 @@ import { computed, reactive, ref } from 'vue';
4
4
  import LogViewPage from './pages/LogViewPage.vue';
5
5
  import ModalsPage from './pages/ModalsPage.vue';
6
6
  import InjectEnvPage from './pages/InjectEnvPage.vue';
7
- import DropdownsPage from './pages/DropdownsPage.vue';
8
7
  import UseWatchFetchPage from './pages/UseWatchFetchPage.vue';
9
- import FormComponentsPage from './pages/FormComponentsPage.vue';
10
8
  import TypographyPage from './pages/TypographyPage.vue';
11
9
  import AgGridVuePage from './pages/AgGridVuePage.vue';
12
10
  import SelectFilesPage from './pages/SelectFilesPage.vue';
@@ -19,12 +17,13 @@ import DraftsPage from './pages/DraftsPage.vue';
19
17
  import LayoutPage from './pages/LayoutPage.vue';
20
18
  import ButtonsPage from './pages/ButtonsPage.vue';
21
19
  import NotificationsPage from './pages/NotificationsPage.vue';
22
- import StackedBarPage from './pages/StackedBarPage/StackedBarPage.vue';
23
20
  import LoadersPage from './pages/LoadersPage.vue';
24
21
  import AddSectionPage from './pages/AddSectionPage.vue';
25
22
  import { uniqueId } from '@milaboratories/helpers';
26
23
  import SectionPage from './pages/SectionPage.vue';
27
- import HistogramPage from './pages/HistogramPage/HistogramPage.vue';
24
+ import { FormComponentsPage } from './pages/FormComponentsPage';
25
+ import { HistogramPage } from './pages/HistogramPage';
26
+ import { StackedBarPage } from './pages/StackedBarPage';
28
27
 
29
28
  export const sdkPlugin = defineApp(platforma, (app) => {
30
29
  // Additional data
@@ -81,7 +80,6 @@ export const sdkPlugin = defineApp(platforma, (app) => {
81
80
  '/log-view': () => LogViewPage,
82
81
  '/modals': () => ModalsPage,
83
82
  '/inject-env': () => InjectEnvPage,
84
- '/dropdowns': () => DropdownsPage,
85
83
  '/use-watch-fetch': () => UseWatchFetchPage,
86
84
  '/form-components': () => FormComponentsPage,
87
85
  '/typography': () => TypographyPage,
package/src/pages/{DropdownsPage.vue → FormComponentsPage/Dropdowns.vue} RENAMED
@@ -1,7 +1,6 @@
1
1
  <script setup lang="ts">
2
2
  import { undef } from '@milaboratories/helpers';
3
3
  import {
4
- PlBlockPage,
5
4
  PlBtnPrimary,
6
5
  PlCheckbox,
7
6
  PlContainer,
@@ -109,65 +108,69 @@ const showOptionsLoading = () => {
109
108
  </script>
110
109
 
111
110
  <template>
112
- <PlBlockPage style="max-width: 100%">
111
+ <PlContainer>
113
112
  <PlRow>
114
113
  <PlCheckbox v-model="data.disabled">Disabled</PlCheckbox>
115
114
  <PlCheckbox v-model="data.clearable">Clearable</PlCheckbox>
116
115
  <PlBtnPrimary @click="showOptionsLoading">Show options loading</PlBtnPrimary>
117
116
  </PlRow>
118
- <PlContainer width="400px">
119
- <PlDropdown
120
- v-model="data.model"
121
- :disabled="data.disabled"
122
- :clearable="data.clearable"
123
- label="PlDropdown"
124
- :options="simpleOptions"
125
- />
126
- <PlDropdown
127
- v-model="data.model"
128
- :disabled="data.disabled"
129
- :clearable="data.clearable"
130
- label="PlDropdown"
131
- :options="simpleOptions"
132
- />
133
- <PlDropdownRef
134
- v-model="data.ref"
135
- :disabled="data.disabled"
136
- :clearable="data.clearable"
137
- label="PlDropdownRef"
138
- :options="refOptions"
139
- />
117
+ <PlRow>
118
+ <PlContainer width="400px">
119
+ <PlDropdown
120
+ v-model="data.model"
121
+ :disabled="data.disabled"
122
+ :clearable="data.clearable"
123
+ label="PlDropdown"
124
+ :options="simpleOptions"
125
+ />
126
+ <PlDropdown
127
+ v-model="data.model"
128
+ :disabled="data.disabled"
129
+ :clearable="data.clearable"
130
+ label="PlDropdown"
131
+ :options="simpleOptions"
132
+ />
133
+ <PlDropdownRef
134
+ v-model="data.ref"
135
+ :disabled="data.disabled"
136
+ :clearable="data.clearable"
137
+ label="PlDropdownRef"
138
+ :options="refOptions"
139
+ />
140
140
 
141
- <PlDropdownMulti
142
- v-model="data.multi"
143
- :disabled="data.disabled"
144
- :options="simpleOptions ?? []"
145
- label="PlDropdownMulti"
146
- />
141
+ <PlDropdownMulti
142
+ v-model="data.multi"
143
+ :disabled="data.disabled"
144
+ :options="simpleOptions ?? []"
145
+ label="PlDropdownMulti"
146
+ />
147
147
 
148
- <PlDropdownMultiRef
149
- v-model="data.multiRefSelected"
150
- :disabled="data.disabled"
151
- :options="refOptionsMulti ?? []"
152
- label="PlDropdownMultiRef"
153
- />
148
+ <PlDropdownMultiRef
149
+ v-model="data.multiRefSelected"
150
+ :disabled="data.disabled"
151
+ :options="refOptionsMulti ?? []"
152
+ label="PlDropdownMultiRef"
153
+ />
154
154
 
155
- <PlDropdownMulti
156
- v-model="data.multi"
157
- :disabled="data.disabled"
158
- :options="undefined"
159
- label="PlDropdownMulti"
160
- />
155
+ <PlDropdownMulti
156
+ v-model="data.multi"
157
+ :disabled="data.disabled"
158
+ :options="undefined"
159
+ label="PlDropdownMulti"
160
+ />
161
161
 
162
- <PlDropdownMultiRef
163
- v-model="data.multi"
164
- :disabled="data.disabled"
165
- :options="undefined"
166
- label="PlDropdownMultiRef"
167
- />
162
+ <PlDropdownMultiRef
163
+ v-model="data.multi"
164
+ :disabled="data.disabled"
165
+ :options="undefined"
166
+ label="PlDropdownMultiRef"
167
+ />
168
168
 
169
- <div v-if="false" style="height: 1200px; background-color: green; width: 50px"/>
170
- </PlContainer>
171
- <pre>{{ data }}</pre>
172
- </PlBlockPage>
169
+ <div v-if="false" style="height: 1200px; background-color: green; width: 50px"/>
170
+ </PlContainer>
171
+ </PlRow>
172
+ <PlRow>
173
+ <pre>{{ data }}</pre>
174
+ </PlRow>
175
+ </PlContainer>
173
176
  </template>
package/src/pages/FormComponentsPage/FormComponentsPage.vue ADDED
@@ -0,0 +1,59 @@
1
+ <script setup lang="ts">
2
+ import {
3
+ PlBlockPage,
4
+ PlRow,
5
+ PlBtnGroup,
6
+ PlContainer,
7
+ } from '@platforma-sdk/ui-vue';
8
+ import type { Component } from 'vue';
9
+ import { shallowRef } from 'vue';
10
+ import WithTooltips from './WithTooltips.vue';
11
+ import Main from './Main.vue';
12
+ import Dropdowns from './Dropdowns.vue';
13
+
14
+ const current = shallowRef<Component>(Main);
15
+
16
+ const options = [{
17
+ label: 'Main',
18
+ value: Main,
19
+ }, {
20
+ label: 'Tooltips',
21
+ value: WithTooltips,
22
+ }, {
23
+ label: 'Dropdown Examples',
24
+ value: Dropdowns,
25
+ }];
26
+ </script>
27
+
28
+ <template>
29
+ <PlBlockPage :class="$style.components">
30
+ <template #title>Form components</template>
31
+ <PlRow>
32
+ <PlContainer>
33
+ <PlBtnGroup v-model="current" :options="options" />
34
+ </PlContainer>
35
+ </PlRow>
36
+ <PlRow>
37
+ <component :is="current" />
38
+ </PlRow>
39
+ </PlBlockPage>
40
+ </template>
41
+
42
+ <style module>
43
+ /* :global(.pl-container) {
44
+ outline: 1px dotted #eee;
45
+ }
46
+
47
+ :global(.pl-section-separator) {
48
+ outline: 1px dashed #eee;
49
+ } */
50
+
51
+ .components pre {
52
+ border: 1px solid var(--txt-01);
53
+ padding: 12px;
54
+ font-weight: bolder;
55
+ overflow: auto;
56
+ max-width: 50vw;
57
+ background-color: #eeeeee55;
58
+ }
59
+ </style>
package/src/pages/FormComponentsPage/Main.vue ADDED
@@ -0,0 +1,105 @@
1
+ <script setup lang="ts">
2
+ import {
3
+ PlRow,
4
+ PlContainer,
5
+ PlBtnGroup,
6
+ PlCheckboxGroup,
7
+ PlCheckbox,
8
+ PlTextField,
9
+ PlSectionSeparator,
10
+ PlDropdown,
11
+ listToOptions,
12
+ PlMaskIcon16,
13
+ PlAccordion,
14
+ PlAccordionSection,
15
+ PlDropdownMulti,
16
+ } from '@platforma-sdk/ui-vue';
17
+ import { reactive } from 'vue';
18
+
19
+ const data = reactive({
20
+ text: 'some text',
21
+ single: 'A',
22
+ multiple: ['A', 'B'],
23
+ importHandles: [] as unknown[],
24
+ currentTab: 'one',
25
+ compactBtnGroup: false,
26
+ multipleAccordion: false,
27
+ });
28
+
29
+ const shortOptions = listToOptions(['A', 'B', 'C', 'D']);
30
+ const options = listToOptions(['A', 'B', 'C', 'D', 'Lorem ipsum', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.']);
31
+
32
+ </script>
33
+
34
+ <template>
35
+ <PlRow no-gap>
36
+ <PlContainer width="400px">
37
+ <PlBtnGroup
38
+ v-model="data.single"
39
+ label="PlBtnGroup"
40
+ :options="shortOptions"
41
+ :compact="data.compactBtnGroup"
42
+ />
43
+ <PlCheckbox v-model="data.compactBtnGroup">Compact btn group component</PlCheckbox>
44
+ <PlTextField v-model="data.text" label="PlTextField" clearable />
45
+ <PlTextField v-model="data.text" label="PlTextField (password)" type="password" clearable />
46
+ <PlDropdown v-model="data.single" label="PlDropdown" :options="options" />
47
+ <PlDropdownMulti v-model="data.multiple" label="PlDropdownMulti" :options="options" />
48
+ <PlSectionSeparator>Group name</PlSectionSeparator>
49
+ <PlTextField v-model="data.text" label="PlTextField" />
50
+ <PlDropdown v-model="data.single" label="PlDropdown" :options="options" />
51
+ <PlCheckboxGroup v-model="data.multiple" label="PlCheckboxGroup" :options="options" />
52
+ <PlSectionSeparator>
53
+ <PlMaskIcon16 name="chevron-right" />Slot usage<PlMaskIcon16 name="chevron-left" />
54
+ </PlSectionSeparator>
55
+ </PlContainer>
56
+ <div style="width: 1px; background-color: var(--border-color-div-grey)" />
57
+ <PlContainer width="400px" style="margin: 0 24px 0 24px">
58
+ <PlAccordionSection label="Section 1">
59
+ <span>Section content</span>
60
+ </PlAccordionSection>
61
+ <PlAccordionSection label="Section 2">
62
+ <PlTextField v-model="data.text" label="Additional text field" clearable />
63
+ <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
64
+ </PlAccordionSection>
65
+ <PlAccordionSection label="Section 3">
66
+ <PlTextField v-model="data.text" label="Additional text field" clearable />
67
+ <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
68
+ </PlAccordionSection>
69
+
70
+ <PlCheckbox v-model="data.multipleAccordion">
71
+ Allow multiple accordion sections to be opened at the same time
72
+ </PlCheckbox>
73
+ <PlSectionSeparator>Accordion group</PlSectionSeparator>
74
+ <PlAccordion :multiple="data.multipleAccordion">
75
+ <PlAccordionSection label="Section 1">
76
+ <PlTextField v-model="data.text" label="Additional text field" clearable />
77
+ <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
78
+ </PlAccordionSection>
79
+ <PlAccordionSection label="Section 2">
80
+ <PlTextField v-model="data.text" label="Additional text field" clearable />
81
+ <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
82
+ </PlAccordionSection>
83
+ </PlAccordion>
84
+ </PlContainer>
85
+ </PlRow>
86
+ </template>
87
+
88
+ <style module>
89
+ /* :global(.pl-container) {
90
+ outline: 1px dotted #eee;
91
+ }
92
+
93
+ :global(.pl-section-separator) {
94
+ outline: 1px dashed #eee;
95
+ } */
96
+
97
+ .components pre {
98
+ border: 1px solid var(--txt-01);
99
+ padding: 12px;
100
+ font-weight: bolder;
101
+ overflow: auto;
102
+ max-width: 50vw;
103
+ background-color: #eeeeee55;
104
+ }
105
+ </style>
package/src/pages/FormComponentsPage/WithTooltips.vue ADDED
@@ -0,0 +1,141 @@
1
+ <script setup lang="ts">
2
+ import { undef } from '@milaboratories/helpers';
3
+ import {
4
+ PlContainer,
5
+ PlBtnGroup,
6
+ PlCheckboxGroup,
7
+ PlTextField,
8
+ PlDropdown,
9
+ listToOptions,
10
+ PlDropdownMulti,
11
+ PlDropdownRef,
12
+ PlDropdownMultiRef,
13
+ PlNumberField,
14
+ PlLogView,
15
+ PlTextArea,
16
+ } from '@platforma-sdk/ui-vue';
17
+ import { reactive, ref } from 'vue';
18
+
19
+ const data = reactive({
20
+ text: 'some text',
21
+ number: 0,
22
+ single: 'A',
23
+ multiple: ['A', 'B'],
24
+ importHandles: [] as unknown[],
25
+ currentTab: 'one',
26
+ ref: undefined,
27
+ multiRef: [],
28
+ });
29
+
30
+ const shortOptions = listToOptions(['A', 'B', 'C', 'D']);
31
+ const options = listToOptions(['A', 'B', 'C', 'D']);
32
+ const refOptions = ref(
33
+ undef([
34
+ {
35
+ label: 'Block 1 label',
36
+ ref: {
37
+ __isRef: true as const,
38
+ blockId: '1',
39
+ name: 'Block 1',
40
+ },
41
+ },
42
+ {
43
+ label: 'Block 2 label',
44
+ ref: {
45
+ __isRef: true as const,
46
+ blockId: '2',
47
+ name: 'Block 2',
48
+ },
49
+ },
50
+ ]),
51
+ );
52
+ const refOptionsMulti = ref(
53
+ undef([
54
+ {
55
+ label: 'Block 1 label Ref',
56
+ ref: {
57
+ __isRef: true as const,
58
+ blockId: '1',
59
+ name: 'Block 1 Ref',
60
+ },
61
+ },
62
+ {
63
+ label: 'Block 2 label Ref',
64
+ ref: {
65
+ __isRef: true as const,
66
+ blockId: '2',
67
+ name: 'Block 2 Ref',
68
+ },
69
+ },
70
+ ]),
71
+ );
72
+ </script>
73
+
74
+ <template>
75
+ <PlContainer width="400px">
76
+ <PlBtnGroup
77
+ v-model="data.single"
78
+ label="PlBtnGroup"
79
+ :options="shortOptions"
80
+ >
81
+ <template #tooltip>
82
+ Tooltip content
83
+ </template>
84
+ </PlBtnGroup>
85
+ <PlTextField v-model="data.text" label="PlTextField" clearable >
86
+ <template #tooltip>
87
+ Tooltip content
88
+ </template>
89
+ </PlTextField>
90
+ <PlNumberField v-model="data.number" label="PlNumberField" clearable>
91
+ <template #tooltip>
92
+ Tooltip content
93
+ </template>
94
+ </PlNumberField>
95
+ <PlDropdown v-model="data.single" label="PlDropdown" :options="options" >
96
+ <template #tooltip>
97
+ Tooltip content
98
+ </template>
99
+ </PlDropdown>
100
+ <PlDropdownRef
101
+ v-model="data.ref"
102
+ label="PlDropdownRef"
103
+ :options="refOptions"
104
+ >
105
+ <template #tooltip>
106
+ Tooltip content
107
+ </template>
108
+ </PlDropdownRef>
109
+ <PlDropdownMultiRef
110
+ v-model="data.multiRef"
111
+ :options="refOptionsMulti ?? []"
112
+ label="PlDropdownMultiRef"
113
+ >
114
+ <template #tooltip>
115
+ Tooltip content
116
+ </template>
117
+ </PlDropdownMultiRef>
118
+ <PlDropdownMulti v-model="data.multiple" label="PlDropdownMulti" :options="options" >
119
+ <template #tooltip>
120
+ Tooltip content
121
+ </template>
122
+ </PlDropdownMulti>
123
+ <PlCheckboxGroup v-model="data.multiple" label="PlCheckboxGroup" :options="options" >
124
+ <template #tooltip>
125
+ Tooltip content
126
+ </template>
127
+ </PlCheckboxGroup>
128
+ </PlContainer>
129
+ <PlContainer width="400px" style="margin: 0 24px 0 24px">
130
+ <PlTextArea label="PlTextArea">
131
+ <template #tooltip>
132
+ Tooltip content
133
+ </template>
134
+ </PlTextArea>
135
+ <PlLogView label="PlLogView" value="logs content">
136
+ <template #tooltip>
137
+ Tooltip content
138
+ </template>
139
+ </PlLogView>
140
+ </PlContainer>
141
+ </template>
package/src/pages/FormComponentsPage/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as FormComponentsPage } from './FormComponentsPage.vue';
package/src/pages/HistogramPage/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as HistogramPage } from './HistogramPage.vue';
package/src/pages/StackedBarPage/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as StackedBarPage } from './StackedBarPage.vue';
package/src/pages/FormComponentsPage.vue DELETED
@@ -1,109 +0,0 @@
1
- <script setup lang="ts">
2
- import {
3
- PlBlockPage,
4
- PlRow,
5
- PlContainer,
6
- PlBtnGroup,
7
- PlCheckboxGroup,
8
- PlCheckbox,
9
- PlTextField,
10
- PlSectionSeparator,
11
- PlDropdown,
12
- listToOptions,
13
- PlMaskIcon16,
14
- PlAccordion,
15
- PlAccordionSection,
16
- PlDropdownMulti,
17
- } from '@platforma-sdk/ui-vue';
18
- import { reactive } from 'vue';
19
-
20
- const data = reactive({
21
- text: 'some text',
22
- single: 'A',
23
- multiple: ['A', 'B'],
24
- importHandles: [] as unknown[],
25
- currentTab: 'one',
26
- compactBtnGroup: false,
27
- multipleAccordion: false,
28
- });
29
-
30
- const shortOptions = listToOptions(['A', 'B', 'C', 'D']);
31
- const options = listToOptions(['A', 'B', 'C', 'D', 'Lorem ipsum', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.']);
32
- </script>
33
-
34
- <template>
35
- <PlBlockPage :class="$style.components" no-body-gutters>
36
- <template #title>Form components</template>
37
- <PlRow no-gap>
38
- <PlContainer width="400px" style="margin: 0 24px 0 24px">
39
- <PlBtnGroup
40
- v-model="data.single"
41
- label="PlBtnGroup"
42
- :options="shortOptions"
43
- :compact="data.compactBtnGroup"
44
- />
45
- <PlCheckbox v-model="data.compactBtnGroup">Compact btn group component</PlCheckbox>
46
- <PlTextField v-model="data.text" label="PlTextField" clearable />
47
- <PlTextField v-model="data.text" label="PlTextField (password)" type="password" clearable />
48
- <PlDropdown v-model="data.single" label="PlDropdown" :options="options" />
49
- <PlDropdownMulti v-model="data.multiple" label="PlDropdownMulti" :options="options" />
50
- <PlSectionSeparator>Group name</PlSectionSeparator>
51
- <PlTextField v-model="data.text" label="PlTextField" />
52
- <PlDropdown v-model="data.single" label="PlDropdown" :options="options" />
53
- <PlCheckboxGroup v-model="data.multiple" label="PlCheckboxGroup" :options="options" />
54
- <PlSectionSeparator>
55
- <PlMaskIcon16 name="chevron-right" />Slot usage<PlMaskIcon16 name="chevron-left" />
56
- </PlSectionSeparator>
57
- </PlContainer>
58
- <div style="width: 1px; background-color: var(--border-color-div-grey)" />
59
- <PlContainer width="400px" style="margin: 0 24px 0 24px">
60
- <PlAccordionSection label="Section 1">
61
- <PlTextField v-model="data.text" label="Additional text field" clearable />
62
- <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
63
- </PlAccordionSection>
64
- <PlAccordionSection label="Section 2">
65
- <PlTextField v-model="data.text" label="Additional text field" clearable />
66
- <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
67
- </PlAccordionSection>
68
- <PlAccordionSection label="Section 3">
69
- <PlTextField v-model="data.text" label="Additional text field" clearable />
70
- <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
71
- </PlAccordionSection>
72
-
73
- <PlCheckbox v-model="data.multipleAccordion">
74
- Allow multiple accordion sections to be opened at the same time
75
- </PlCheckbox>
76
- <PlSectionSeparator>Accordion group</PlSectionSeparator>
77
- <PlAccordion :multiple="data.multipleAccordion">
78
- <PlAccordionSection label="Section 1">
79
- <PlTextField v-model="data.text" label="Additional text field" clearable />
80
- <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
81
- </PlAccordionSection>
82
- <PlAccordionSection label="Section 2">
83
- <PlTextField v-model="data.text" label="Additional text field" clearable />
84
- <PlDropdown v-model="data.single" label="Additional PlDropdown" :options="options" />
85
- </PlAccordionSection>
86
- </PlAccordion>
87
- </PlContainer>
88
- </PlRow>
89
- </PlBlockPage>
90
- </template>
91
-
92
- <style module>
93
- /* :global(.pl-container) {
94
- outline: 1px dotted #eee;
95
- }
96
-
97
- :global(.pl-section-separator) {
98
- outline: 1px dashed #eee;
99
- } */
100
-
101
- .components pre {
102
- border: 1px solid var(--txt-01);
103
- padding: 12px;
104
- font-weight: bolder;
105
- overflow: auto;
106
- max-width: 50vw;
107
- background-color: #eeeeee55;
108
- }
109
- </style>