@antify/ui 4.2.1 → 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.
@@ -1,11 +1,17 @@
1
1
  import AntCheckboxGroup from "../AntCheckboxGroup.vue";
2
2
  import {
3
3
  InputState,
4
+ LayoutVariant,
4
5
  Size
5
6
  } from "../../../enums/index.mjs";
6
7
  import {
7
8
  Direction
8
9
  } from "../../../enums/Direction.enum.mjs";
10
+ import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
11
+ import AntFormGroup from "../../forms/AntFormGroup.vue";
12
+ import {
13
+ ref
14
+ } from "vue";
9
15
  const meta = {
10
16
  title: "Inputs/Checkbox Group",
11
17
  component: AntCheckboxGroup,
@@ -38,10 +44,34 @@ const meta = {
38
44
  type: "select"
39
45
  },
40
46
  options: Object.values(Direction)
47
+ },
48
+ layoutVariant: {
49
+ control: {
50
+ type: "select"
51
+ },
52
+ options: Object.values(LayoutVariant)
41
53
  }
42
54
  }
43
55
  };
44
56
  export default meta;
57
+ const checkboxOptions = [
58
+ {
59
+ label: "Checkbox 1",
60
+ value: "checkbox-1"
61
+ },
62
+ {
63
+ label: "Checkbox 2",
64
+ value: "checkbox-2"
65
+ },
66
+ {
67
+ label: "Checkbox 3",
68
+ value: "checkbox-3"
69
+ },
70
+ {
71
+ label: "Checkbox 4",
72
+ value: "checkbox-4"
73
+ }
74
+ ];
45
75
  export const Docs = {
46
76
  render: (args) => ({
47
77
  components: {
@@ -53,29 +83,18 @@ export const Docs = {
53
83
  };
54
84
  },
55
85
  template: `
56
- <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
86
+ <div class="flex flex-col gap-2.5">
87
+ <div class="w-1/2">
88
+ <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
89
+ </div>
90
+ </div>
91
+
92
+ <span class="text-xs text-gray-500">Reactive value: {{ args.modelValue }}</span>
57
93
  `
58
94
  }),
59
95
  args: {
60
96
  modelValue: [],
61
- checkboxes: [
62
- {
63
- label: "Checkbox 1",
64
- value: "checkbox-1"
65
- },
66
- {
67
- label: "Checkbox 2",
68
- value: "checkbox-2"
69
- },
70
- {
71
- label: "Checkbox 3",
72
- value: "checkbox-3"
73
- },
74
- {
75
- label: "Checkbox 4",
76
- value: "checkbox-4"
77
- }
78
- ]
97
+ checkboxes: checkboxOptions
79
98
  }
80
99
  };
81
100
  export const WithLongContent = {
@@ -116,3 +135,334 @@ export const WithLongContent = {
116
135
  ]
117
136
  }
118
137
  };
138
+ export const BlockVariant = {
139
+ render: Docs.render,
140
+ args: {
141
+ modelValue: [],
142
+ checkboxes: checkboxOptions,
143
+ layoutVariant: LayoutVariant.block
144
+ }
145
+ };
146
+ export const TabVariant = {
147
+ render: Docs.render,
148
+ args: {
149
+ modelValue: [],
150
+ checkboxes: checkboxOptions,
151
+ layoutVariant: LayoutVariant.tab
152
+ }
153
+ };
154
+ export const summary = {
155
+ parameters: {
156
+ chromatic: {
157
+ disableSnapshot: false
158
+ }
159
+ },
160
+ render: (args) => ({
161
+ components: {
162
+ AntCheckboxGroup,
163
+ AntFormGroupLabel,
164
+ AntFormGroup
165
+ },
166
+ setup() {
167
+ const value = ref([
168
+ "checkbox-3"
169
+ ]);
170
+ return {
171
+ args,
172
+ value,
173
+ InputState,
174
+ Size,
175
+ LayoutVariant
176
+ };
177
+ },
178
+ template: `
179
+ <AntFormGroup>
180
+ <AntFormGroupLabel>State</AntFormGroupLabel>
181
+ <AntFormGroup direction="row">
182
+ <AntCheckboxGroup
183
+ v-bind="args"
184
+ v-model="value"
185
+ :state="InputState.base"
186
+ label="Label"
187
+ description="Lorem ipsum dolor sit amet"
188
+ />
189
+ <AntCheckboxGroup
190
+ v-bind="args"
191
+ v-model="value"
192
+ :state="InputState.info"
193
+ label="Label"
194
+ description="Lorem ipsum dolor sit amet"
195
+ :messages="['Message']"
196
+ />
197
+ <AntCheckboxGroup
198
+ v-bind="args"
199
+ v-model="value"
200
+ :state="InputState.success"
201
+ label="Label"
202
+ description="Lorem ipsum dolor sit amet"
203
+ :messages="['Message']"
204
+ />
205
+ <AntCheckboxGroup
206
+ v-bind="args"
207
+ v-model="value"
208
+ :state="InputState.warning"
209
+ label="Label"
210
+ description="Lorem ipsum dolor sit amet"
211
+ :messages="['Message']"
212
+ />
213
+ <AntCheckboxGroup
214
+ v-bind="args"
215
+ v-model="value"
216
+ :state="InputState.danger"
217
+ label="Label"
218
+ description="Lorem ipsum dolor sit amet"
219
+ :messages="['Message']"
220
+ />
221
+ </AntFormGroup>
222
+
223
+ <AntFormGroup direction="row">
224
+ <AntCheckboxGroup
225
+ v-bind="args"
226
+ v-model="value"
227
+ :state="InputState.base"
228
+ :layout-variant="LayoutVariant.block"
229
+ label="Label"
230
+ description="Lorem ipsum dolor sit amet"
231
+ />
232
+ <AntCheckboxGroup
233
+ v-bind="args"
234
+ v-model="value"
235
+ :state="InputState.info"
236
+ :layout-variant="LayoutVariant.block"
237
+ label="Label"
238
+ description="Lorem ipsum dolor sit amet"
239
+ :messages="['Message']"
240
+ />
241
+ <AntCheckboxGroup
242
+ v-bind="args"
243
+ v-model="value"
244
+ :state="InputState.success"
245
+ :layout-variant="LayoutVariant.block"
246
+ label="Label"
247
+ description="Lorem ipsum dolor sit amet"
248
+ :messages="['Message']"
249
+ />
250
+ <AntCheckboxGroup
251
+ v-bind="args"
252
+ v-model="value"
253
+ :state="InputState.warning"
254
+ :layout-variant="LayoutVariant.block"
255
+ label="Label"
256
+ description="Lorem ipsum dolor sit amet"
257
+ :messages="['Message']"
258
+ />
259
+ <AntCheckboxGroup
260
+ v-bind="args"
261
+ v-model="value"
262
+ :state="InputState.danger"
263
+ :layout-variant="LayoutVariant.block"
264
+ label="Label"
265
+ description="Lorem ipsum dolor sit amet"
266
+ :messages="['Message']"
267
+ />
268
+ </AntFormGroup>
269
+
270
+ <AntFormGroup direction="row">
271
+ <AntCheckboxGroup
272
+ v-bind="args"
273
+ v-model="value"
274
+ :state="InputState.base"
275
+ :layout-variant="LayoutVariant.tab"
276
+ label="Label"
277
+ description="Lorem ipsum dolor sit amet"
278
+ />
279
+ <AntCheckboxGroup
280
+ v-bind="args"
281
+ v-model="value"
282
+ :state="InputState.info"
283
+ :layout-variant="LayoutVariant.tab"
284
+ label="Label"
285
+ description="Lorem ipsum dolor sit amet"
286
+ :messages="['Message']"
287
+ />
288
+ <AntCheckboxGroup
289
+ v-bind="args"
290
+ v-model="value"
291
+ :state="InputState.success"
292
+ :layout-variant="LayoutVariant.tab"
293
+ label="Label"
294
+ description="Lorem ipsum dolor sit amet"
295
+ :messages="['Message']"
296
+ />
297
+ <AntCheckboxGroup
298
+ v-bind="args"
299
+ v-model="value"
300
+ :state="InputState.warning"
301
+ :layout-variant="LayoutVariant.tab"
302
+ label="Label"
303
+ description="Lorem ipsum dolor sit amet"
304
+ :messages="['Message']"
305
+ />
306
+ <AntCheckboxGroup
307
+ v-bind="args"
308
+ v-model="value"
309
+ :state="InputState.danger"
310
+ :layout-variant="LayoutVariant.tab"
311
+ label="Label"
312
+ description="Lorem ipsum dolor sit amet"
313
+ :messages="['Message']"
314
+ />
315
+ </AntFormGroup>
316
+
317
+ <AntFormGroupLabel>Size</AntFormGroupLabel>
318
+ <AntFormGroup direction="row">
319
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.lg" label="Label"
320
+ description="Lorem ipsum dolor sit amet"/>
321
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.md" label="Label"
322
+ description="Lorem ipsum dolor sit amet"/>
323
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.sm" label="Label"
324
+ description="Lorem ipsum dolor sit amet"/>
325
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs" label="Label"
326
+ description="Lorem ipsum dolor sit amet"/>
327
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label"
328
+ description="Lorem ipsum dolor sit amet"/>
329
+ </AntFormGroup>
330
+
331
+ <AntFormGroup direction="row">
332
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.block"
333
+ description="Lorem ipsum dolor sit amet"/>
334
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.block"
335
+ description="Lorem ipsum dolor sit amet"/>
336
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.block"
337
+ description="Lorem ipsum dolor sit amet"/>
338
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.block"
339
+ description="Lorem ipsum dolor sit amet"/>
340
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.block"
341
+ description="Lorem ipsum dolor sit amet"/>
342
+ </AntFormGroup>
343
+
344
+ <AntFormGroup direction="row">
345
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.tab"
346
+ description="Lorem ipsum dolor sit amet"/>
347
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.tab"
348
+ description="Lorem ipsum dolor sit amet"/>
349
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.tab"
350
+ description="Lorem ipsum dolor sit amet"/>
351
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.tab"
352
+ description="Lorem ipsum dolor sit amet"/>
353
+ <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.tab"
354
+ description="Lorem ipsum dolor sit amet"/>
355
+ </AntFormGroup>
356
+
357
+ <AntFormGroup>
358
+ <AntFormGroupLabel>Disabled</AntFormGroupLabel>
359
+ <AntFormGroup direction="row">
360
+ <div>
361
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
362
+ disabled/>
363
+ </div>
364
+ <div>
365
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
366
+ disabled/>
367
+ </div>
368
+ <div>
369
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
370
+ disabled/>
371
+ </div>
372
+ </AntFormGroup>
373
+ </AntFormGroup>
374
+
375
+ <AntFormGroup>
376
+ <AntFormGroupLabel>Readonly</AntFormGroupLabel>
377
+ <AntFormGroup direction="row">
378
+ <div>
379
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
380
+ :readonly="true"/>
381
+ </div>
382
+ <div>
383
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
384
+ :readonly="true"/>
385
+ </div>
386
+ <div>
387
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
388
+ :readonly="true"/>
389
+ </div>
390
+ </AntFormGroup>
391
+ </AntFormGroup>
392
+
393
+ <AntFormGroup>
394
+ <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
395
+ <AntFormGroup direction="row">
396
+ <div>
397
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
398
+ :skeleton="true"/>
399
+ </div>
400
+ <div>
401
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
402
+ :skeleton="true"/>
403
+ </div>
404
+ <div>
405
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
406
+ :skeleton="true"/>
407
+ </div>
408
+ </AntFormGroup>
409
+ </AntFormGroup>
410
+
411
+ <AntFormGroupLabel>Plain</AntFormGroupLabel>
412
+ <AntFormGroup direction="row">
413
+ <div>
414
+ <AntCheckboxGroup v-bind="args" v-model="value"/>
415
+ </div>
416
+ <div>
417
+ <AntCheckboxGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.block"/>
418
+ </div>
419
+ <div>
420
+ <AntCheckboxGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.tab"/>
421
+ </div>
422
+ </AntFormGroup>
423
+
424
+ <AntFormGroupLabel>With label</AntFormGroupLabel>
425
+ <AntFormGroup direction="row">
426
+ <div>
427
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label"/>
428
+ </div>
429
+ <div>
430
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.block"/>
431
+ </div>
432
+ <div>
433
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.tab"/>
434
+ </div>
435
+ </AntFormGroup>
436
+
437
+ <AntFormGroupLabel>With description</AntFormGroupLabel>
438
+ <AntFormGroup direction="row">
439
+ <div>
440
+ <AntCheckboxGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet"/>
441
+ </div>
442
+ <div>
443
+ <AntCheckboxGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
444
+ </div>
445
+ <div>
446
+ <AntCheckboxGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
447
+ </div>
448
+ </AntFormGroup>
449
+
450
+ <AntFormGroupLabel>With label + description</AntFormGroupLabel>
451
+ <AntFormGroup direction="row">
452
+ <div>
453
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
454
+ </div>
455
+ <div>
456
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
457
+ </div>
458
+ <div>
459
+ <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
460
+ </div>
461
+ </AntFormGroup>
462
+ </AntFormGroup>
463
+ `
464
+ }),
465
+ args: {
466
+ ...Docs.args
467
+ }
468
+ };
@@ -4,4 +4,6 @@ declare const meta: Meta<typeof AntRadioGroup>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof AntRadioGroup>;
6
6
  export declare const Docs: Story;
7
+ export declare const BlockVariant: Story;
8
+ export declare const TabVariant: Story;
7
9
  export declare const summary: Story;