@teammodlr/ui-kit 2.0.20 → 2.0.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.
Files changed (182) hide show
  1. package/lib/__storybook__/argTypes.d.ts +40 -40
  2. package/lib/__storybook__/createStory.d.ts +8 -8
  3. package/lib/__storybook__/index.d.ts +2 -2
  4. package/lib/components/avatar/Avatar.vue.d.ts +56 -56
  5. package/lib/components/avatar/style/Avatar.css.d.ts +9 -9
  6. package/lib/components/avatar/style/index.d.ts +1 -1
  7. package/lib/components/avatargroup/AvatarGroup.vue.d.ts +49 -49
  8. package/lib/components/avatargroup/style/AvatarGroup.css.d.ts +2 -2
  9. package/lib/components/avatargroup/style/index.d.ts +1 -1
  10. package/lib/components/avatargroup/symbol.d.ts +13 -13
  11. package/lib/components/badge/Badge.vue.d.ts +30 -30
  12. package/lib/components/badge/style/Badge.css.d.ts +4 -4
  13. package/lib/components/badge/style/index.d.ts +1 -1
  14. package/lib/components/breadcrumb/Breadcrumb.vue.d.ts +34 -34
  15. package/lib/components/breadcrumb/BreadcrumbItem.vue.d.ts +29 -29
  16. package/lib/components/breadcrumb/style/Breadcrumb.css.d.ts +4 -4
  17. package/lib/components/breadcrumb/style/index.d.ts +1 -1
  18. package/lib/components/breadcrumb/symbol.d.ts +13 -13
  19. package/lib/components/button/Button.vue.d.ts +141 -141
  20. package/lib/components/button/style/Button.css.d.ts +25 -25
  21. package/lib/components/button/style/index.d.ts +1 -1
  22. package/lib/components/buttongroup/ButtonGroup.vue.d.ts +18 -18
  23. package/lib/components/buttongroup/style/ButtonGroup.css.d.ts +2 -2
  24. package/lib/components/buttongroup/style/index.d.ts +1 -1
  25. package/lib/components/buttongroup/symbol.d.ts +6 -6
  26. package/lib/components/checkbox/Checkbox.vue.d.ts +94 -94
  27. package/lib/components/checkbox/style/Checkbox.css.d.ts +16 -16
  28. package/lib/components/checkbox/style/index.d.ts +1 -1
  29. package/lib/components/colorpicker/ColorPicker.vue.d.ts +77 -77
  30. package/lib/components/colorpicker/style/ColorPicker.css.d.ts +10 -10
  31. package/lib/components/colorpicker/style/index.d.ts +1 -1
  32. package/lib/components/colorpicker/utils.d.ts +16 -16
  33. package/lib/components/dropdown/Dropdown.vue.d.ts +122 -115
  34. package/lib/components/dropdown/DropdownItem.vue.d.ts +78 -78
  35. package/lib/components/dropdown/DropdownList.vue.d.ts +5 -5
  36. package/lib/components/dropdown/DropdownSeperator.vue.d.ts +4 -4
  37. package/lib/components/dropdown/DropdownWrapper.vue.d.ts +2 -2
  38. package/lib/components/dropdown/hooks.d.ts +2 -2
  39. package/lib/components/dropdown/style/Dropdown.css.d.ts +6 -6
  40. package/lib/components/dropdown/style/index.d.ts +1 -1
  41. package/lib/components/dropdown/symbol.d.ts +6 -6
  42. package/lib/components/form/Form.vue.d.ts +75 -75
  43. package/lib/components/form/style/Form.css.d.ts +4 -4
  44. package/lib/components/form/style/index.d.ts +2 -2
  45. package/lib/components/form/symbol.d.ts +9 -9
  46. package/lib/components/image/Image.vue.d.ts +50 -50
  47. package/lib/components/index.d.ts +40 -39
  48. package/lib/components/input/Input.vue.d.ts +142 -142
  49. package/lib/components/input/style/Input.css.d.ts +23 -23
  50. package/lib/components/input/style/index.d.ts +1 -1
  51. package/lib/components/link/Link.vue.d.ts +51 -51
  52. package/lib/components/messageprovider/Message.vue.d.ts +73 -73
  53. package/lib/components/messageprovider/MessageProvider.vue.d.ts +52 -52
  54. package/lib/components/messageprovider/style/Message.css.d.ts +12 -12
  55. package/lib/components/messageprovider/style/index.d.ts +1 -1
  56. package/lib/components/messageprovider/types.d.ts +29 -29
  57. package/lib/components/messageprovider/useMessage.d.ts +2 -2
  58. package/lib/components/modal/Modal.vue.d.ts +52 -52
  59. package/lib/components/modal/style/Modal.css.d.ts +21 -21
  60. package/lib/components/modal/style/index.d.ts +1 -1
  61. package/lib/components/pagination/Pagination.vue.d.ts +75 -75
  62. package/lib/components/pagination/style/Pagination.css.d.ts +10 -10
  63. package/lib/components/pagination/style/index.d.ts +1 -1
  64. package/lib/components/radio/Radio.vue.d.ts +85 -85
  65. package/lib/components/radio/style/Checkbox.css.d.ts +16 -16
  66. package/lib/components/radio/style/index.d.ts +1 -1
  67. package/lib/components/radiobutton/RadioButton.vue.d.ts +98 -98
  68. package/lib/components/radiobutton/style/RadioButton.css.d.ts +14 -14
  69. package/lib/components/radiobutton/style/index.d.ts +1 -1
  70. package/lib/components/radiobuttongroup/RadioButtonGroup.vue.d.ts +48 -48
  71. package/lib/components/radiobuttongroup/style/RadioButtonGroup.css.d.ts +3 -3
  72. package/lib/components/radiobuttongroup/style/index.d.ts +1 -1
  73. package/lib/components/radiobuttongroup/symbol.d.ts +9 -9
  74. package/lib/components/select/Select.vue.d.ts +194 -194
  75. package/lib/components/select/style/Select.css.d.ts +31 -31
  76. package/lib/components/select/style/index.d.ts +1 -1
  77. package/lib/components/skeleton/Skeleton.vue.d.ts +33 -33
  78. package/lib/components/skeleton/style/Skeleton.css.d.ts +8 -8
  79. package/lib/components/skeleton/style/index.d.ts +2 -2
  80. package/lib/components/slider/Slider.vue.d.ts +32 -32
  81. package/lib/components/slider/style/Slider.css.d.ts +4 -4
  82. package/lib/components/slider/style/index.d.ts +1 -1
  83. package/lib/components/tab/Tab.vue.d.ts +41 -41
  84. package/lib/components/tab/TabGroup.vue.d.ts +43 -43
  85. package/lib/components/table/Table.vue.d.ts +62 -62
  86. package/lib/components/table/TableBody.vue.d.ts +2 -2
  87. package/lib/components/table/TableCell.vue.d.ts +2 -2
  88. package/lib/components/table/TableHead.vue.d.ts +30 -30
  89. package/lib/components/table/TableHeadRow.vue.d.ts +2 -2
  90. package/lib/components/table/TableRow.vue.d.ts +2 -2
  91. package/lib/components/table/style/Table.css.d.ts +4 -4
  92. package/lib/components/table/style/index.d.ts +1 -1
  93. package/lib/components/table/types/index.d.ts +6 -6
  94. package/lib/components/tag/Tag.vue.d.ts +44 -44
  95. package/lib/components/tag/style/Tag.css.d.ts +11 -11
  96. package/lib/components/tag/style/index.d.ts +1 -1
  97. package/lib/components/textarea/TextArea.vue.d.ts +137 -0
  98. package/lib/components/textarea/style/TextArea.css.d.ts +19 -0
  99. package/lib/components/textarea/style/index.d.ts +1 -0
  100. package/lib/components/tooltip/Tooltip.vue.d.ts +71 -71
  101. package/lib/components/tooltip/style/Tooltip.css.d.ts +10 -10
  102. package/lib/components/tooltip/style/index.d.ts +1 -1
  103. package/lib/components/transfer/Transfer.vue.d.ts +67 -67
  104. package/lib/components/transfer/style/Transfer.css.d.ts +7 -7
  105. package/lib/components/transfer/style/index.d.ts +1 -1
  106. package/lib/components/virtualscroll/VirtualScroll.vue.d.ts +73 -73
  107. package/lib/components/virtualscroll/style/VirtualScroll.css.d.ts +1 -1
  108. package/lib/components/virtualscroll/style/index.d.ts +1 -1
  109. package/lib/composables/element.d.ts +2 -2
  110. package/lib/composables/index.d.ts +3 -3
  111. package/lib/composables/useCachedUid.d.ts +13 -13
  112. package/lib/composables/useEventListener.d.ts +1 -1
  113. package/lib/composables/useInput.d.ts +36 -36
  114. package/lib/composables/useInteractive.d.ts +15 -15
  115. package/lib/composables/useIsServer.d.ts +1 -1
  116. package/lib/composables/useMount.d.ts +13 -13
  117. package/lib/composables/usePopper.d.ts +31 -31
  118. package/lib/composables/useZIndex.d.ts +8 -8
  119. package/lib/create.d.ts +9 -9
  120. package/lib/index.cjs.js +4 -4
  121. package/lib/index.d.ts +5 -5
  122. package/lib/index.es.js +2271 -2108
  123. package/lib/install.d.ts +4 -4
  124. package/lib/style.css +1 -1
  125. package/lib/styles/theme.css.d.ts +167 -167
  126. package/lib/styles/typography.css.d.ts +22 -22
  127. package/lib/types/props.d.ts +3 -3
  128. package/package.json +1 -1
  129. package/src/components/avatargroup/AvatarGroup.vue +71 -71
  130. package/src/components/avatargroup/symbol.ts +16 -16
  131. package/src/components/breadcrumb/BreadcrumbItem.vue +72 -72
  132. package/src/components/breadcrumb/style/Breadcrumb.css.ts +39 -39
  133. package/src/components/breadcrumb/symbol.ts +16 -16
  134. package/src/components/button/Button.vue +203 -203
  135. package/src/components/buttongroup/ButtonGroup.vue +36 -36
  136. package/src/components/buttongroup/symbol.ts +7 -7
  137. package/src/components/colorpicker/ColorPicker.vue +2 -2
  138. package/src/components/dropdown/Dropdown.vue +10 -5
  139. package/src/components/dropdown/DropdownItem.vue +134 -134
  140. package/src/components/dropdown/DropdownSeperator.vue +22 -22
  141. package/src/components/dropdown/symbol.ts +7 -7
  142. package/src/components/form/style/Form.css.ts +22 -22
  143. package/src/components/form/style/index.ts +1 -1
  144. package/src/components/form/symbol.ts +10 -10
  145. package/src/components/index.ts +2 -1
  146. package/src/components/modal/examples/index.ts +2 -2
  147. package/src/components/pagination/Pagination.vue +229 -229
  148. package/src/components/pagination/examples/basic.vue +17 -17
  149. package/src/components/pagination/examples/index.stories.ts +14 -14
  150. package/src/components/pagination/style/Pagination.css.ts +87 -87
  151. package/src/components/pagination/style/index.ts +1 -1
  152. package/src/components/radiobutton/RadioButton.vue +131 -131
  153. package/src/components/radiobutton/style/RadioButton.css.ts +183 -183
  154. package/src/components/radiobutton/style/index.ts +1 -1
  155. package/src/components/radiobuttongroup/RadioButtonGroup.vue +74 -74
  156. package/src/components/radiobuttongroup/style/RadioButtonGroup.css.ts +36 -36
  157. package/src/components/radiobuttongroup/symbol.ts +10 -10
  158. package/src/components/skeleton/Skeleton.vue +55 -55
  159. package/src/components/skeleton/style/Skeleton.css.ts +56 -56
  160. package/src/components/skeleton/style/index.ts +1 -1
  161. package/src/components/table/style/Table.css.ts +80 -80
  162. package/src/components/textarea/TextArea.css +173 -0
  163. package/src/components/textarea/TextArea.vue +181 -0
  164. package/src/components/textarea/examples/basic.vue +8 -0
  165. package/src/components/textarea/examples/index.stories.ts +18 -0
  166. package/src/components/textarea/examples/index.ts +1 -0
  167. package/src/components/textarea/style/TextArea.css.ts +190 -0
  168. package/src/components/textarea/style/index.ts +1 -0
  169. package/src/components/tooltip/style/Tooltip.css.ts +91 -91
  170. package/src/components/tooltip/style/index.ts +1 -1
  171. package/src/components/transfer/Transfer.vue +143 -143
  172. package/src/components/transfer/examples/basic.vue +20 -20
  173. package/src/components/transfer/examples/index.stories.ts +15 -15
  174. package/src/components/transfer/examples/index.ts +1 -1
  175. package/src/components/transfer/style/Transfer.css.ts +67 -67
  176. package/src/components/transfer/style/index.ts +1 -1
  177. package/src/composables/index.ts +2 -2
  178. package/src/composables/useInteractive.ts +19 -19
  179. package/src/composables/useZIndex.ts +30 -30
  180. package/src/examples/cards/cards.stories.ts +9 -9
  181. package/src/examples/cards/sidebar.vue +262 -262
  182. package/src/styles/theme.css.ts +170 -170
package/src/examples/cards/sidebar.vue CHANGED
@@ -1,263 +1,263 @@
1
- <template>
2
- <div class="bg">
3
- <div class="sidebar">
4
- <div class="item">
5
- <label class="label">
6
- Align
7
- </label>
8
- <MRadioButtonGroup name="align" v-model="form.align" block size="sm">
9
- <MRadioButton icon id="start">
10
- <svg
11
- width="24"
12
- height="24"
13
- viewBox="0 0 24 24"
14
- fill="none"
15
- xmlns="http://www.w3.org/2000/svg"
16
- >
17
- <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
18
- <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
19
- <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
20
- </svg>
21
- </MRadioButton>
22
- <MRadioButton icon id="center">
23
- <svg
24
- width="24"
25
- height="24"
26
- viewBox="0 0 24 24"
27
- fill="none"
28
- xmlns="http://www.w3.org/2000/svg"
29
- >
30
- <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
31
- <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
32
- </svg>
33
- </MRadioButton>
34
- <MRadioButton icon id="end">
35
- <svg
36
- width="24"
37
- height="24"
38
- viewBox="0 0 24 24"
39
- fill="none"
40
- xmlns="http://www.w3.org/2000/svg"
41
- >
42
- <path
43
- fill-rule="evenodd"
44
- clip-rule="evenodd"
45
- d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
46
- fill="currentColor"
47
- fill-opacity="0.5"
48
- />
49
- <path
50
- fill-rule="evenodd"
51
- clip-rule="evenodd"
52
- d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
53
- fill="currentColor"
54
- />
55
- <path
56
- fill-rule="evenodd"
57
- clip-rule="evenodd"
58
- d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
59
- fill="currentColor"
60
- />
61
- </svg>
62
- </MRadioButton>
63
- </MRadioButtonGroup>
64
- </div>
65
-
66
- <div class="item">
67
- <label class="label">
68
- Justify
69
- </label>
70
- <MRadioButtonGroup name="align" v-model="form.justify" block size="sm">
71
- <MRadioButton icon id="start">
72
- <svg
73
- width="24"
74
- height="24"
75
- viewBox="0 0 24 24"
76
- fill="none"
77
- xmlns="http://www.w3.org/2000/svg"
78
- >
79
- <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
80
- <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
81
- <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
82
- </svg>
83
- </MRadioButton>
84
- <MRadioButton icon id="center">
85
- <svg
86
- width="24"
87
- height="24"
88
- viewBox="0 0 24 24"
89
- fill="none"
90
- xmlns="http://www.w3.org/2000/svg"
91
- >
92
- <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
93
- <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
94
- </svg>
95
- </MRadioButton>
96
- <MRadioButton icon id="end">
97
- <svg
98
- width="24"
99
- height="24"
100
- viewBox="0 0 24 24"
101
- fill="none"
102
- xmlns="http://www.w3.org/2000/svg"
103
- >
104
- <path
105
- fill-rule="evenodd"
106
- clip-rule="evenodd"
107
- d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
108
- fill="currentColor"
109
- fill-opacity="0.5"
110
- />
111
- <path
112
- fill-rule="evenodd"
113
- clip-rule="evenodd"
114
- d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
115
- fill="currentColor"
116
- />
117
- <path
118
- fill-rule="evenodd"
119
- clip-rule="evenodd"
120
- d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
121
- fill="currentColor"
122
- />
123
- </svg>
124
- </MRadioButton>
125
- </MRadioButtonGroup>
126
- </div>
127
-
128
- <div class="grid">
129
- <div class="item">
130
- <label class="label">
131
- Width
132
- </label>
133
- <MInput type="text" v-model="form.width" size="sm" block>
134
- <template #icon-right>
135
- <span style="font-size: 11px">px</span>
136
- </template>
137
- </MInput>
138
- </div>
139
- <div class="item">
140
- <label class="label">
141
- Height
142
- </label>
143
- <MInput type="text" v-model="form.height" size="sm" block>
144
- <template #icon-right>
145
- <span style="font-size: 11px">px</span>
146
- </template>
147
- </MInput>
148
- </div>
149
-
150
- <div class="item">
151
- <label class="label">
152
- Min Width
153
- </label>
154
- <MInput type="text" v-model="form.minWidth" size="sm" block>
155
- <template #icon-right>
156
- <span style="font-size: 11px">px</span>
157
- </template>
158
- </MInput>
159
- </div>
160
-
161
- <div class="item">
162
- <label class="label">
163
- Min Height
164
- </label>
165
- <MInput type="text" v-model="form.minHeight" size="sm" block>
166
- <template #icon-right>
167
- <span style="font-size: 11px">px</span>
168
- </template>
169
- </MInput>
170
- </div>
171
- </div>
172
-
173
- <div class="item">
174
- <label class="label">
175
- Background
176
- </label>
177
- <MColorPicker v-model="form.backgroundColor"/>
178
- </div>
179
-
180
- <div class="item">
181
- <label class="label">
182
- Color
183
- </label>
184
- <MColorPicker v-model="form.color"/>
185
- </div>
186
- </div>
187
-
188
- <div style="padding: 10px">
189
- {{ form }}
190
- <div style="display: flex;" :style="computedStyle">
191
- Hi
192
- </div>
193
- </div>
194
- </div>
195
- </template>
196
-
197
- <script lang="ts" setup>
198
- import {computed, reactive} from "vue";
199
- import {MRadioButtonGroup} from "../../components";
200
- import MRadioButton from "@/components/radiobutton/RadioButton.vue";
201
- import MColorPicker from "@/components/colorpicker/ColorPicker.vue";
202
- import MInput from "@/components/input/Input.vue";
203
-
204
- const form = reactive({
205
- align: "start",
206
- justify: "start",
207
- width: 100,
208
- height: 100,
209
- minWidth: 0,
210
- minHeight: 0,
211
- color: "#000000",
212
- backgroundColor: "#FF0000"
213
- })
214
-
215
- const computedStyle = computed(() => {
216
- return {
217
- width: form.width ? `${form.width}px` : "auto",
218
- height: form.height ? `${form.height}px` : "auto",
219
- minWidth: form.minWidth ? `${form.minWidth}px` : "auto",
220
- minHeight: form.minHeight ? `${form.minHeight}px` : "auto",
221
- color: form.color,
222
- backgroundColor: form.backgroundColor,
223
- alignItems: form.align,
224
- justifyContent: form.justify
225
- }
226
- })
227
-
228
- </script>
229
-
230
- <style scoped>
231
- .bg {
232
- display: flex;
233
- }
234
-
235
- .sidebar {
236
- width: 350px;
237
- height: 500px;
238
- border-right: 1px solid #e5e5e5;
239
- padding: 5px 10px;
240
- flex-shrink: 0;
241
- }
242
-
243
- .item {
244
- display: grid;
245
- grid-template-columns: 70px 1fr;
246
- grid-gap: 10px;
247
- align-items: center;
248
- margin-bottom: 8px;
249
- }
250
-
251
- .grid {
252
- display: grid;
253
- grid-template-columns: 1fr 1fr;
254
- grid-gap: 5px 20px;
255
- align-items: center;
256
- margin-bottom: 8px;
257
- }
258
-
259
- .label {
260
- font-size: 13px;
261
- font-weight: 500;
262
- }
1
+ <template>
2
+ <div class="bg">
3
+ <div class="sidebar">
4
+ <div class="item">
5
+ <label class="label">
6
+ Align
7
+ </label>
8
+ <MRadioButtonGroup name="align" v-model="form.align" block size="sm">
9
+ <MRadioButton icon id="start">
10
+ <svg
11
+ width="24"
12
+ height="24"
13
+ viewBox="0 0 24 24"
14
+ fill="none"
15
+ xmlns="http://www.w3.org/2000/svg"
16
+ >
17
+ <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
18
+ <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
19
+ <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
20
+ </svg>
21
+ </MRadioButton>
22
+ <MRadioButton icon id="center">
23
+ <svg
24
+ width="24"
25
+ height="24"
26
+ viewBox="0 0 24 24"
27
+ fill="none"
28
+ xmlns="http://www.w3.org/2000/svg"
29
+ >
30
+ <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
31
+ <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
32
+ </svg>
33
+ </MRadioButton>
34
+ <MRadioButton icon id="end">
35
+ <svg
36
+ width="24"
37
+ height="24"
38
+ viewBox="0 0 24 24"
39
+ fill="none"
40
+ xmlns="http://www.w3.org/2000/svg"
41
+ >
42
+ <path
43
+ fill-rule="evenodd"
44
+ clip-rule="evenodd"
45
+ d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
46
+ fill="currentColor"
47
+ fill-opacity="0.5"
48
+ />
49
+ <path
50
+ fill-rule="evenodd"
51
+ clip-rule="evenodd"
52
+ d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
53
+ fill="currentColor"
54
+ />
55
+ <path
56
+ fill-rule="evenodd"
57
+ clip-rule="evenodd"
58
+ d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
59
+ fill="currentColor"
60
+ />
61
+ </svg>
62
+ </MRadioButton>
63
+ </MRadioButtonGroup>
64
+ </div>
65
+
66
+ <div class="item">
67
+ <label class="label">
68
+ Justify
69
+ </label>
70
+ <MRadioButtonGroup name="align" v-model="form.justify" block size="sm">
71
+ <MRadioButton icon id="start">
72
+ <svg
73
+ width="24"
74
+ height="24"
75
+ viewBox="0 0 24 24"
76
+ fill="none"
77
+ xmlns="http://www.w3.org/2000/svg"
78
+ >
79
+ <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
80
+ <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
81
+ <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
82
+ </svg>
83
+ </MRadioButton>
84
+ <MRadioButton icon id="center">
85
+ <svg
86
+ width="24"
87
+ height="24"
88
+ viewBox="0 0 24 24"
89
+ fill="none"
90
+ xmlns="http://www.w3.org/2000/svg"
91
+ >
92
+ <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
93
+ <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
94
+ </svg>
95
+ </MRadioButton>
96
+ <MRadioButton icon id="end">
97
+ <svg
98
+ width="24"
99
+ height="24"
100
+ viewBox="0 0 24 24"
101
+ fill="none"
102
+ xmlns="http://www.w3.org/2000/svg"
103
+ >
104
+ <path
105
+ fill-rule="evenodd"
106
+ clip-rule="evenodd"
107
+ d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
108
+ fill="currentColor"
109
+ fill-opacity="0.5"
110
+ />
111
+ <path
112
+ fill-rule="evenodd"
113
+ clip-rule="evenodd"
114
+ d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
115
+ fill="currentColor"
116
+ />
117
+ <path
118
+ fill-rule="evenodd"
119
+ clip-rule="evenodd"
120
+ d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
121
+ fill="currentColor"
122
+ />
123
+ </svg>
124
+ </MRadioButton>
125
+ </MRadioButtonGroup>
126
+ </div>
127
+
128
+ <div class="grid">
129
+ <div class="item">
130
+ <label class="label">
131
+ Width
132
+ </label>
133
+ <MInput type="text" v-model="form.width" size="sm" block>
134
+ <template #icon-right>
135
+ <span style="font-size: 11px">px</span>
136
+ </template>
137
+ </MInput>
138
+ </div>
139
+ <div class="item">
140
+ <label class="label">
141
+ Height
142
+ </label>
143
+ <MInput type="text" v-model="form.height" size="sm" block>
144
+ <template #icon-right>
145
+ <span style="font-size: 11px">px</span>
146
+ </template>
147
+ </MInput>
148
+ </div>
149
+
150
+ <div class="item">
151
+ <label class="label">
152
+ Min Width
153
+ </label>
154
+ <MInput type="text" v-model="form.minWidth" size="sm" block>
155
+ <template #icon-right>
156
+ <span style="font-size: 11px">px</span>
157
+ </template>
158
+ </MInput>
159
+ </div>
160
+
161
+ <div class="item">
162
+ <label class="label">
163
+ Min Height
164
+ </label>
165
+ <MInput type="text" v-model="form.minHeight" size="sm" block>
166
+ <template #icon-right>
167
+ <span style="font-size: 11px">px</span>
168
+ </template>
169
+ </MInput>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="item">
174
+ <label class="label">
175
+ Background
176
+ </label>
177
+ <MColorPicker v-model="form.backgroundColor"/>
178
+ </div>
179
+
180
+ <div class="item">
181
+ <label class="label">
182
+ Color
183
+ </label>
184
+ <MColorPicker v-model="form.color"/>
185
+ </div>
186
+ </div>
187
+
188
+ <div style="padding: 10px">
189
+ {{ form }}
190
+ <div style="display: flex;" :style="computedStyle">
191
+ Hi
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </template>
196
+
197
+ <script lang="ts" setup>
198
+ import {computed, reactive} from "vue";
199
+ import {MRadioButtonGroup} from "../../components";
200
+ import MRadioButton from "@/components/radiobutton/RadioButton.vue";
201
+ import MColorPicker from "@/components/colorpicker/ColorPicker.vue";
202
+ import MInput from "@/components/input/Input.vue";
203
+
204
+ const form = reactive({
205
+ align: "start",
206
+ justify: "start",
207
+ width: 100,
208
+ height: 100,
209
+ minWidth: 0,
210
+ minHeight: 0,
211
+ color: "#000000",
212
+ backgroundColor: "#FF0000"
213
+ })
214
+
215
+ const computedStyle = computed(() => {
216
+ return {
217
+ width: form.width ? `${form.width}px` : "auto",
218
+ height: form.height ? `${form.height}px` : "auto",
219
+ minWidth: form.minWidth ? `${form.minWidth}px` : "auto",
220
+ minHeight: form.minHeight ? `${form.minHeight}px` : "auto",
221
+ color: form.color,
222
+ backgroundColor: form.backgroundColor,
223
+ alignItems: form.align,
224
+ justifyContent: form.justify
225
+ }
226
+ })
227
+
228
+ </script>
229
+
230
+ <style scoped>
231
+ .bg {
232
+ display: flex;
233
+ }
234
+
235
+ .sidebar {
236
+ width: 350px;
237
+ height: 500px;
238
+ border-right: 1px solid #e5e5e5;
239
+ padding: 5px 10px;
240
+ flex-shrink: 0;
241
+ }
242
+
243
+ .item {
244
+ display: grid;
245
+ grid-template-columns: 70px 1fr;
246
+ grid-gap: 10px;
247
+ align-items: center;
248
+ margin-bottom: 8px;
249
+ }
250
+
251
+ .grid {
252
+ display: grid;
253
+ grid-template-columns: 1fr 1fr;
254
+ grid-gap: 5px 20px;
255
+ align-items: center;
256
+ margin-bottom: 8px;
257
+ }
258
+
259
+ .label {
260
+ font-size: 13px;
261
+ font-weight: 500;
262
+ }
263
263
  </style>