@antify/ui 4.2.0 → 4.2.2

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.
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.summary = exports.default = exports.Docs = void 0;
6
+ exports.summary = exports.default = exports.TabVariant = exports.Docs = exports.BlockVariant = void 0;
7
7
  var _vue = require("vue");
8
8
  var _AntRadioGroup = _interopRequireDefault(require("../AntRadioGroup.vue"));
9
9
  var _enums = require("../../../enums");
@@ -67,6 +67,12 @@ const meta = {
67
67
  type: "select"
68
68
  },
69
69
  options: Object.values(_enums.Size)
70
+ },
71
+ layoutVariant: {
72
+ control: {
73
+ type: "select"
74
+ },
75
+ options: Object.values(_enums.LayoutVariant)
70
76
  }
71
77
  }
72
78
  };
@@ -101,14 +107,28 @@ const Docs = exports.Docs = {
101
107
  };
102
108
  },
103
109
  template: `
104
- <AntRadioGroup v-bind="args" v-model="value"/>
105
- <span class="text-xs text-gray-500">Reactive value: {{ value }}</span>
110
+ <AntRadioGroup v-bind="args" v-model="value"/>
111
+ <span class="text-xs text-gray-500">Reactive value: {{ value }}</span>
106
112
  `
107
113
  }),
108
114
  args: {
109
115
  radioButtons: simpleButtons
110
116
  }
111
117
  };
118
+ const BlockVariant = exports.BlockVariant = {
119
+ render: Docs.render,
120
+ args: {
121
+ radioButtons: simpleButtons,
122
+ layoutVariant: _enums.LayoutVariant.block
123
+ }
124
+ };
125
+ const TabVariant = exports.TabVariant = {
126
+ render: Docs.render,
127
+ args: {
128
+ radioButtons: simpleButtons,
129
+ layoutVariant: _enums.LayoutVariant.tab
130
+ }
131
+ };
112
132
  const summary = exports.summary = {
113
133
  parameters: {
114
134
  chromatic: {
@@ -127,7 +147,8 @@ const summary = exports.summary = {
127
147
  args,
128
148
  value,
129
149
  InputState: _enums.InputState,
130
- Size: _enums.Size
150
+ Size: _enums.Size,
151
+ LayoutVariant: _enums.LayoutVariant
131
152
  };
132
153
  },
133
154
  template: `
@@ -175,6 +196,100 @@ const summary = exports.summary = {
175
196
  />
176
197
  </AntFormGroup>
177
198
 
199
+ <AntFormGroup direction="row">
200
+ <AntRadioGroup
201
+ v-bind="args"
202
+ v-model="value"
203
+ :state="InputState.base"
204
+ :layout-variant="LayoutVariant.block"
205
+ label="Label"
206
+ description="Lorem ipsum dolor sit amet"
207
+ />
208
+ <AntRadioGroup
209
+ v-bind="args"
210
+ v-model="value"
211
+ :state="InputState.info"
212
+ :layout-variant="LayoutVariant.block"
213
+ label="Label"
214
+ description="Lorem ipsum dolor sit amet"
215
+ :messages="['Message']"
216
+ />
217
+ <AntRadioGroup
218
+ v-bind="args"
219
+ v-model="value"
220
+ :state="InputState.success"
221
+ :layout-variant="LayoutVariant.block"
222
+ label="Label"
223
+ description="Lorem ipsum dolor sit amet"
224
+ :messages="['Message']"
225
+ />
226
+ <AntRadioGroup
227
+ v-bind="args"
228
+ v-model="value"
229
+ :state="InputState.warning"
230
+ :layout-variant="LayoutVariant.block"
231
+ label="Label"
232
+ description="Lorem ipsum dolor sit amet"
233
+ :messages="['Message']"
234
+ />
235
+ <AntRadioGroup
236
+ v-bind="args"
237
+ v-model="value"
238
+ :state="InputState.danger"
239
+ :layout-variant="LayoutVariant.block"
240
+ label="Label"
241
+ description="Lorem ipsum dolor sit amet"
242
+ :messages="['Message']"
243
+ />
244
+ </AntFormGroup>
245
+
246
+ <AntFormGroup direction="row">
247
+ <AntRadioGroup
248
+ v-bind="args"
249
+ v-model="value"
250
+ :state="InputState.base"
251
+ :layout-variant="LayoutVariant.tab"
252
+ label="Label"
253
+ description="Lorem ipsum dolor sit amet"
254
+ />
255
+ <AntRadioGroup
256
+ v-bind="args"
257
+ v-model="value"
258
+ :state="InputState.info"
259
+ :layout-variant="LayoutVariant.tab"
260
+ label="Label"
261
+ description="Lorem ipsum dolor sit amet"
262
+ :messages="['Message']"
263
+ />
264
+ <AntRadioGroup
265
+ v-bind="args"
266
+ v-model="value"
267
+ :state="InputState.success"
268
+ :layout-variant="LayoutVariant.tab"
269
+ label="Label"
270
+ description="Lorem ipsum dolor sit amet"
271
+ :messages="['Message']"
272
+ />
273
+ <AntRadioGroup
274
+ v-bind="args"
275
+ v-model="value"
276
+ :state="InputState.warning"
277
+ :layout-variant="LayoutVariant.tab"
278
+ label="Label"
279
+ description="Lorem ipsum dolor sit amet"
280
+ :messages="['Message']"
281
+ />
282
+ <AntRadioGroup
283
+ v-bind="args"
284
+ v-model="value"
285
+ :state="InputState.danger"
286
+ :layout-variant="LayoutVariant.tab"
287
+ label="Label"
288
+ description="Lorem ipsum dolor sit amet"
289
+ :messages="['Message']"
290
+ />
291
+ </AntFormGroup>
292
+
178
293
  <AntFormGroupLabel>Size</AntFormGroupLabel>
179
294
  <AntFormGroup direction="row">
180
295
  <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label"
@@ -190,40 +305,136 @@ const summary = exports.summary = {
190
305
  </AntFormGroup>
191
306
 
192
307
  <AntFormGroup direction="row">
193
- <AntFormGroup>
194
- <AntFormGroupLabel>Disabled</AntFormGroupLabel>
195
- <AntFormGroup direction="row">
308
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.block"
309
+ description="Lorem ipsum dolor sit amet"/>
310
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.block"
311
+ description="Lorem ipsum dolor sit amet"/>
312
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.block"
313
+ description="Lorem ipsum dolor sit amet"/>
314
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.block"
315
+ description="Lorem ipsum dolor sit amet"/>
316
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.block"
317
+ description="Lorem ipsum dolor sit amet"/>
318
+ </AntFormGroup>
319
+
320
+ <AntFormGroup direction="row">
321
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.tab"
322
+ description="Lorem ipsum dolor sit amet"/>
323
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.tab"
324
+ description="Lorem ipsum dolor sit amet"/>
325
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.tab"
326
+ description="Lorem ipsum dolor sit amet"/>
327
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.tab"
328
+ description="Lorem ipsum dolor sit amet"/>
329
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.tab"
330
+ description="Lorem ipsum dolor sit amet"/>
331
+ </AntFormGroup>
332
+
333
+ <AntFormGroup>
334
+ <AntFormGroupLabel>Disabled</AntFormGroupLabel>
335
+ <AntFormGroup direction="row">
336
+ <div>
196
337
  <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
197
338
  disabled/>
198
- </AntFormGroup>
339
+ </div>
340
+ <div>
341
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
342
+ disabled/>
343
+ </div>
344
+ <div>
345
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
346
+ disabled/>
347
+ </div>
199
348
  </AntFormGroup>
349
+ </AntFormGroup>
200
350
 
201
- <AntFormGroup>
202
- <AntFormGroupLabel>Readonly</AntFormGroupLabel>
203
- <AntFormGroup direction="row">
351
+ <AntFormGroup>
352
+ <AntFormGroupLabel>Readonly</AntFormGroupLabel>
353
+ <AntFormGroup direction="row">
354
+ <div>
204
355
  <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
205
356
  :readonly="true"/>
206
- </AntFormGroup>
357
+ </div>
358
+ <div>
359
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
360
+ :readonly="true"/>
361
+ </div>
362
+ <div>
363
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
364
+ :readonly="true"/>
365
+ </div>
207
366
  </AntFormGroup>
367
+ </AntFormGroup>
208
368
 
209
- <AntFormGroup>
210
- <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
211
- <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
212
- :skeleton="true"/>
369
+ <AntFormGroup>
370
+ <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
371
+ <AntFormGroup direction="row">
372
+ <div>
373
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
374
+ :skeleton="true"/>
375
+ </div>
376
+ <div>
377
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
378
+ :skeleton="true"/>
379
+ </div>
380
+ <div>
381
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
382
+ :skeleton="true"/>
383
+ </div>
213
384
  </AntFormGroup>
214
385
  </AntFormGroup>
215
386
 
216
387
  <AntFormGroupLabel>Plain</AntFormGroupLabel>
217
- <AntRadioGroup v-bind="args" v-model="value"/>
388
+ <AntFormGroup direction="row">
389
+ <div>
390
+ <AntRadioGroup v-bind="args" v-model="value"/>
391
+ </div>
392
+ <div>
393
+ <AntRadioGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.block"/>
394
+ </div>
395
+ <div>
396
+ <AntRadioGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.tab"/>
397
+ </div>
398
+ </AntFormGroup>
218
399
 
219
400
  <AntFormGroupLabel>With label</AntFormGroupLabel>
220
- <AntRadioGroup v-bind="args" v-model="value" label="Label"/>
401
+ <AntFormGroup direction="row">
402
+ <div>
403
+ <AntRadioGroup v-bind="args" v-model="value" label="Label"/>
404
+ </div>
405
+ <div>
406
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.block"/>
407
+ </div>
408
+ <div>
409
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.tab"/>
410
+ </div>
411
+ </AntFormGroup>
221
412
 
222
413
  <AntFormGroupLabel>With description</AntFormGroupLabel>
223
- <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet"/>
414
+ <AntFormGroup direction="row">
415
+ <div>
416
+ <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet"/>
417
+ </div>
418
+ <div>
419
+ <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
420
+ </div>
421
+ <div>
422
+ <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
423
+ </div>
424
+ </AntFormGroup>
224
425
 
225
426
  <AntFormGroupLabel>With label + description</AntFormGroupLabel>
226
- <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
427
+ <AntFormGroup direction="row">
428
+ <div>
429
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
430
+ </div>
431
+ <div>
432
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
433
+ </div>
434
+ <div>
435
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
436
+ </div>
437
+ </AntFormGroup>
227
438
  </AntFormGroup>
228
439
  `
229
440
  }),
@@ -4,7 +4,8 @@ import {
4
4
  import AntRadioGroup from "../AntRadioGroup.vue";
5
5
  import {
6
6
  InputState,
7
- Size
7
+ Size,
8
+ LayoutVariant
8
9
  } from "../../../enums/index.mjs";
9
10
  import {
10
11
  Direction
@@ -67,6 +68,12 @@ const meta = {
67
68
  type: "select"
68
69
  },
69
70
  options: Object.values(Size)
71
+ },
72
+ layoutVariant: {
73
+ control: {
74
+ type: "select"
75
+ },
76
+ options: Object.values(LayoutVariant)
70
77
  }
71
78
  }
72
79
  };
@@ -106,14 +113,28 @@ export const Docs = {
106
113
  };
107
114
  },
108
115
  template: `
109
- <AntRadioGroup v-bind="args" v-model="value"/>
110
- <span class="text-xs text-gray-500">Reactive value: {{ value }}</span>
116
+ <AntRadioGroup v-bind="args" v-model="value"/>
117
+ <span class="text-xs text-gray-500">Reactive value: {{ value }}</span>
111
118
  `
112
119
  }),
113
120
  args: {
114
121
  radioButtons: simpleButtons
115
122
  }
116
123
  };
124
+ export const BlockVariant = {
125
+ render: Docs.render,
126
+ args: {
127
+ radioButtons: simpleButtons,
128
+ layoutVariant: LayoutVariant.block
129
+ }
130
+ };
131
+ export const TabVariant = {
132
+ render: Docs.render,
133
+ args: {
134
+ radioButtons: simpleButtons,
135
+ layoutVariant: LayoutVariant.tab
136
+ }
137
+ };
117
138
  export const summary = {
118
139
  parameters: {
119
140
  chromatic: {
@@ -132,7 +153,8 @@ export const summary = {
132
153
  args,
133
154
  value,
134
155
  InputState,
135
- Size
156
+ Size,
157
+ LayoutVariant
136
158
  };
137
159
  },
138
160
  template: `
@@ -180,6 +202,100 @@ export const summary = {
180
202
  />
181
203
  </AntFormGroup>
182
204
 
205
+ <AntFormGroup direction="row">
206
+ <AntRadioGroup
207
+ v-bind="args"
208
+ v-model="value"
209
+ :state="InputState.base"
210
+ :layout-variant="LayoutVariant.block"
211
+ label="Label"
212
+ description="Lorem ipsum dolor sit amet"
213
+ />
214
+ <AntRadioGroup
215
+ v-bind="args"
216
+ v-model="value"
217
+ :state="InputState.info"
218
+ :layout-variant="LayoutVariant.block"
219
+ label="Label"
220
+ description="Lorem ipsum dolor sit amet"
221
+ :messages="['Message']"
222
+ />
223
+ <AntRadioGroup
224
+ v-bind="args"
225
+ v-model="value"
226
+ :state="InputState.success"
227
+ :layout-variant="LayoutVariant.block"
228
+ label="Label"
229
+ description="Lorem ipsum dolor sit amet"
230
+ :messages="['Message']"
231
+ />
232
+ <AntRadioGroup
233
+ v-bind="args"
234
+ v-model="value"
235
+ :state="InputState.warning"
236
+ :layout-variant="LayoutVariant.block"
237
+ label="Label"
238
+ description="Lorem ipsum dolor sit amet"
239
+ :messages="['Message']"
240
+ />
241
+ <AntRadioGroup
242
+ v-bind="args"
243
+ v-model="value"
244
+ :state="InputState.danger"
245
+ :layout-variant="LayoutVariant.block"
246
+ label="Label"
247
+ description="Lorem ipsum dolor sit amet"
248
+ :messages="['Message']"
249
+ />
250
+ </AntFormGroup>
251
+
252
+ <AntFormGroup direction="row">
253
+ <AntRadioGroup
254
+ v-bind="args"
255
+ v-model="value"
256
+ :state="InputState.base"
257
+ :layout-variant="LayoutVariant.tab"
258
+ label="Label"
259
+ description="Lorem ipsum dolor sit amet"
260
+ />
261
+ <AntRadioGroup
262
+ v-bind="args"
263
+ v-model="value"
264
+ :state="InputState.info"
265
+ :layout-variant="LayoutVariant.tab"
266
+ label="Label"
267
+ description="Lorem ipsum dolor sit amet"
268
+ :messages="['Message']"
269
+ />
270
+ <AntRadioGroup
271
+ v-bind="args"
272
+ v-model="value"
273
+ :state="InputState.success"
274
+ :layout-variant="LayoutVariant.tab"
275
+ label="Label"
276
+ description="Lorem ipsum dolor sit amet"
277
+ :messages="['Message']"
278
+ />
279
+ <AntRadioGroup
280
+ v-bind="args"
281
+ v-model="value"
282
+ :state="InputState.warning"
283
+ :layout-variant="LayoutVariant.tab"
284
+ label="Label"
285
+ description="Lorem ipsum dolor sit amet"
286
+ :messages="['Message']"
287
+ />
288
+ <AntRadioGroup
289
+ v-bind="args"
290
+ v-model="value"
291
+ :state="InputState.danger"
292
+ :layout-variant="LayoutVariant.tab"
293
+ label="Label"
294
+ description="Lorem ipsum dolor sit amet"
295
+ :messages="['Message']"
296
+ />
297
+ </AntFormGroup>
298
+
183
299
  <AntFormGroupLabel>Size</AntFormGroupLabel>
184
300
  <AntFormGroup direction="row">
185
301
  <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label"
@@ -195,40 +311,136 @@ export const summary = {
195
311
  </AntFormGroup>
196
312
 
197
313
  <AntFormGroup direction="row">
198
- <AntFormGroup>
199
- <AntFormGroupLabel>Disabled</AntFormGroupLabel>
200
- <AntFormGroup direction="row">
314
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.block"
315
+ description="Lorem ipsum dolor sit amet"/>
316
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.block"
317
+ description="Lorem ipsum dolor sit amet"/>
318
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.block"
319
+ description="Lorem ipsum dolor sit amet"/>
320
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.block"
321
+ description="Lorem ipsum dolor sit amet"/>
322
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.block"
323
+ description="Lorem ipsum dolor sit amet"/>
324
+ </AntFormGroup>
325
+
326
+ <AntFormGroup direction="row">
327
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.tab"
328
+ description="Lorem ipsum dolor sit amet"/>
329
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.tab"
330
+ description="Lorem ipsum dolor sit amet"/>
331
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.tab"
332
+ description="Lorem ipsum dolor sit amet"/>
333
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.tab"
334
+ description="Lorem ipsum dolor sit amet"/>
335
+ <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.tab"
336
+ description="Lorem ipsum dolor sit amet"/>
337
+ </AntFormGroup>
338
+
339
+ <AntFormGroup>
340
+ <AntFormGroupLabel>Disabled</AntFormGroupLabel>
341
+ <AntFormGroup direction="row">
342
+ <div>
201
343
  <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
202
344
  disabled/>
203
- </AntFormGroup>
345
+ </div>
346
+ <div>
347
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
348
+ disabled/>
349
+ </div>
350
+ <div>
351
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
352
+ disabled/>
353
+ </div>
204
354
  </AntFormGroup>
355
+ </AntFormGroup>
205
356
 
206
- <AntFormGroup>
207
- <AntFormGroupLabel>Readonly</AntFormGroupLabel>
208
- <AntFormGroup direction="row">
357
+ <AntFormGroup>
358
+ <AntFormGroupLabel>Readonly</AntFormGroupLabel>
359
+ <AntFormGroup direction="row">
360
+ <div>
209
361
  <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
210
362
  :readonly="true"/>
211
- </AntFormGroup>
363
+ </div>
364
+ <div>
365
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
366
+ :readonly="true"/>
367
+ </div>
368
+ <div>
369
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
370
+ :readonly="true"/>
371
+ </div>
212
372
  </AntFormGroup>
373
+ </AntFormGroup>
213
374
 
214
- <AntFormGroup>
215
- <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
216
- <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
217
- :skeleton="true"/>
375
+ <AntFormGroup>
376
+ <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
377
+ <AntFormGroup direction="row">
378
+ <div>
379
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
380
+ :skeleton="true"/>
381
+ </div>
382
+ <div>
383
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
384
+ :skeleton="true"/>
385
+ </div>
386
+ <div>
387
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
388
+ :skeleton="true"/>
389
+ </div>
218
390
  </AntFormGroup>
219
391
  </AntFormGroup>
220
392
 
221
393
  <AntFormGroupLabel>Plain</AntFormGroupLabel>
222
- <AntRadioGroup v-bind="args" v-model="value"/>
394
+ <AntFormGroup direction="row">
395
+ <div>
396
+ <AntRadioGroup v-bind="args" v-model="value"/>
397
+ </div>
398
+ <div>
399
+ <AntRadioGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.block"/>
400
+ </div>
401
+ <div>
402
+ <AntRadioGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.tab"/>
403
+ </div>
404
+ </AntFormGroup>
223
405
 
224
406
  <AntFormGroupLabel>With label</AntFormGroupLabel>
225
- <AntRadioGroup v-bind="args" v-model="value" label="Label"/>
407
+ <AntFormGroup direction="row">
408
+ <div>
409
+ <AntRadioGroup v-bind="args" v-model="value" label="Label"/>
410
+ </div>
411
+ <div>
412
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.block"/>
413
+ </div>
414
+ <div>
415
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.tab"/>
416
+ </div>
417
+ </AntFormGroup>
226
418
 
227
419
  <AntFormGroupLabel>With description</AntFormGroupLabel>
228
- <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet"/>
420
+ <AntFormGroup direction="row">
421
+ <div>
422
+ <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet"/>
423
+ </div>
424
+ <div>
425
+ <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
426
+ </div>
427
+ <div>
428
+ <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
429
+ </div>
430
+ </AntFormGroup>
229
431
 
230
432
  <AntFormGroupLabel>With label + description</AntFormGroupLabel>
231
- <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
433
+ <AntFormGroup direction="row">
434
+ <div>
435
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
436
+ </div>
437
+ <div>
438
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
439
+ </div>
440
+ <div>
441
+ <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
442
+ </div>
443
+ </AntFormGroup>
232
444
  </AntFormGroup>
233
445
  `
234
446
  }),
@@ -0,0 +1,5 @@
1
+ export declare enum LayoutVariant {
2
+ default = "default",
3
+ block = "block",
4
+ tab = "tab"
5
+ }
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.LayoutVariant = void 0;
7
+ var LayoutVariant = exports.LayoutVariant = /* @__PURE__ */(LayoutVariant2 => {
8
+ LayoutVariant2["default"] = "default";
9
+ LayoutVariant2["block"] = "block";
10
+ LayoutVariant2["tab"] = "tab";
11
+ return LayoutVariant2;
12
+ })(LayoutVariant || {});
@@ -0,0 +1,6 @@
1
+ export var LayoutVariant = /* @__PURE__ */ ((LayoutVariant2) => {
2
+ LayoutVariant2["default"] = "default";
3
+ LayoutVariant2["block"] = "block";
4
+ LayoutVariant2["tab"] = "tab";
5
+ return LayoutVariant2;
6
+ })(LayoutVariant || {});
@@ -3,3 +3,4 @@ export * from './Grouped.enum';
3
3
  export * from './Position.enum';
4
4
  export * from './Size.enum';
5
5
  export * from './State.enum';
6
+ export * from './LayoutVariant.enum';