@milaboratories/milaboratories.ui-examples.ui 1.3.22 → 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.
- package/.turbo/turbo-build.log +7 -5
- package/CHANGELOG.md +14 -0
- package/dist/assets/{index-CgivL3td.js → index-BnY_HQaE.js} +187 -187
- package/dist/assets/{index-CgivL3td.js.map → index-BnY_HQaE.js.map} +1 -1
- package/dist/assets/{index-BAGoOWSb.css → index-CSH2gGW0.css} +1 -1
- package/dist/index.html +2 -2
- package/package.json +5 -4
- package/src/app.ts +3 -5
- package/src/pages/DraftsPage.vue +8 -0
- package/src/pages/{DropdownsPage.vue → FormComponentsPage/Dropdowns.vue} +55 -52
- package/src/pages/FormComponentsPage/FormComponentsPage.vue +59 -0
- package/src/pages/FormComponentsPage/Main.vue +105 -0
- package/src/pages/FormComponentsPage/WithTooltips.vue +141 -0
- package/src/pages/FormComponentsPage/index.ts +1 -0
- package/src/pages/HistogramPage/index.ts +1 -0
- package/src/pages/StackedBarPage/index.ts +1 -0
- package/tsconfig.node.json +0 -2
- package/vite.config.ts +4 -0
- package/src/pages/FormComponentsPage.vue +0 -109
|
@@ -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>
|