@antify/ui 2.2.1 → 2.2.4

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 (147) hide show
  1. package/dist/components/AntAccordion.vue +25 -12
  2. package/dist/components/AntAccordionItem.vue +28 -13
  3. package/dist/components/AntAlert.vue +25 -15
  4. package/dist/components/AntCard.vue +26 -14
  5. package/dist/components/AntContent.vue +4 -4
  6. package/dist/components/AntDropdown.vue +41 -23
  7. package/dist/components/AntIcon.vue +18 -6
  8. package/dist/components/AntKeycap.vue +31 -16
  9. package/dist/components/AntListGroup.vue +13 -11
  10. package/dist/components/AntListGroupItem.vue +19 -9
  11. package/dist/components/AntModal.vue +26 -15
  12. package/dist/components/AntPagination.vue +28 -15
  13. package/dist/components/AntPopover.vue +74 -51
  14. package/dist/components/AntSkeleton.vue +8 -4
  15. package/dist/components/AntSpinner.vue +14 -6
  16. package/dist/components/AntTag.vue +25 -13
  17. package/dist/components/AntToast.vue +19 -11
  18. package/dist/components/AntToaster.vue +13 -5
  19. package/dist/components/AntTooltip.vue +78 -54
  20. package/dist/components/__stories/AntAccordion.stories.js +4 -4
  21. package/dist/components/__stories/AntAccordion.stories.mjs +50 -17
  22. package/dist/components/__stories/AntAlert.stories.mjs +18 -5
  23. package/dist/components/__stories/AntCard.stories.mjs +36 -10
  24. package/dist/components/__stories/AntContent.stories.mjs +14 -4
  25. package/dist/components/__stories/AntDropdown.stories.mjs +20 -4
  26. package/dist/components/__stories/AntIcon.stories.mjs +38 -12
  27. package/dist/components/__stories/AntKeycap.stories.mjs +35 -10
  28. package/dist/components/__stories/AntListGroup.stories.d.ts +1 -1
  29. package/dist/components/__stories/AntListGroup.stories.mjs +22 -4
  30. package/dist/components/__stories/AntListGroupItem.stories.mjs +27 -8
  31. package/dist/components/__stories/AntModal.stories.mjs +17 -4
  32. package/dist/components/__stories/AntPagination.stories.mjs +21 -6
  33. package/dist/components/__stories/AntPopover.stories.mjs +20 -4
  34. package/dist/components/__stories/AntSkeleton.stories.mjs +17 -5
  35. package/dist/components/__stories/AntSpinner.stories.mjs +33 -9
  36. package/dist/components/__stories/AntTag.stories.mjs +28 -8
  37. package/dist/components/__stories/AntToast.stories.mjs +19 -5
  38. package/dist/components/__stories/AntToaster.stories.d.ts +1 -1
  39. package/dist/components/__stories/AntToaster.stories.mjs +35 -9
  40. package/dist/components/__stories/AntTooltip.stories.js +1 -1
  41. package/dist/components/__stories/AntTooltip.stories.mjs +44 -13
  42. package/dist/components/buttons/AntActionButton.vue +38 -29
  43. package/dist/components/buttons/AntButton.vue +34 -13
  44. package/dist/components/buttons/AntCreateButton.vue +11 -4
  45. package/dist/components/buttons/AntDeleteButton.vue +11 -4
  46. package/dist/components/buttons/AntDuplicateButton.vue +11 -4
  47. package/dist/components/buttons/AntEditButton.vue +11 -4
  48. package/dist/components/buttons/AntSaveAndNewButton.vue +11 -4
  49. package/dist/components/buttons/AntSaveButton.vue +11 -4
  50. package/dist/components/buttons/__stories/AntActionButton.stories.mjs +35 -10
  51. package/dist/components/buttons/__stories/AntButton.stories.mjs +77 -23
  52. package/dist/components/buttons/__stories/AntCreateButton.stories.mjs +25 -7
  53. package/dist/components/buttons/__stories/AntDeleteButton.stories.mjs +25 -7
  54. package/dist/components/buttons/__stories/AntDuplicateButton.stories.mjs +25 -7
  55. package/dist/components/buttons/__stories/AntEditButton.stories.mjs +25 -7
  56. package/dist/components/buttons/__stories/AntSaveAndNewButton.stories.mjs +25 -7
  57. package/dist/components/buttons/__stories/AntSaveButton.stories.mjs +25 -7
  58. package/dist/components/crud/AntCrud.vue +6 -6
  59. package/dist/components/crud/AntCrudDetail.vue +8 -5
  60. package/dist/components/crud/AntCrudDetailActions.vue +14 -8
  61. package/dist/components/crud/AntCrudDetailNav.vue +21 -13
  62. package/dist/components/crud/AntCrudTableFilter.vue +29 -17
  63. package/dist/components/crud/AntCrudTableNav.vue +36 -22
  64. package/dist/components/crud/__stories/AntCrud.stories.mjs +17 -5
  65. package/dist/components/crud/__stories/AntCrudDetail.stories.mjs +11 -3
  66. package/dist/components/crud/__stories/AntCrudDetailActions.stories.mjs +10 -2
  67. package/dist/components/crud/__stories/AntCrudDetailNav.stories.mjs +11 -3
  68. package/dist/components/crud/__stories/AntCrudTableFilter.stories.mjs +17 -5
  69. package/dist/components/crud/__stories/AntCrudTableNav.stories.mjs +23 -7
  70. package/dist/components/dialogs/AntDeleteDialog.vue +13 -5
  71. package/dist/components/dialogs/AntDialog.vue +23 -13
  72. package/dist/components/dialogs/__stories/AndDeleteDialog.stories.mjs +12 -3
  73. package/dist/components/dialogs/__stories/AntDialog.stories.mjs +28 -7
  74. package/dist/components/forms/AntField.vue +18 -7
  75. package/dist/components/forms/AntFormGroup.vue +9 -5
  76. package/dist/components/forms/AntFormGroupLabel.vue +1 -1
  77. package/dist/components/forms/__stories/AntField.stories.mjs +37 -9
  78. package/dist/components/forms/__stories/AntFormGroup.stories.mjs +20 -5
  79. package/dist/components/forms/__stories/AntFormGroupLabel.stories.mjs +11 -3
  80. package/dist/components/index.d.ts +1 -1
  81. package/dist/components/inputs/AntCheckbox.vue +60 -36
  82. package/dist/components/inputs/AntCheckboxGroup.vue +39 -15
  83. package/dist/components/inputs/AntDateInput.vue +35 -12
  84. package/dist/components/inputs/AntNumberInput.vue +33 -12
  85. package/dist/components/inputs/AntPasswordInput.vue +32 -11
  86. package/dist/components/inputs/AntRadio.vue +57 -34
  87. package/dist/components/inputs/AntRadioGroup.vue +60 -35
  88. package/dist/components/inputs/AntRangeSlider.vue +31 -12
  89. package/dist/components/inputs/AntSearch.vue +19 -7
  90. package/dist/components/inputs/AntSelect.vue +107 -83
  91. package/dist/components/inputs/AntSwitch.vue +35 -18
  92. package/dist/components/inputs/AntSwitcher.vue +30 -15
  93. package/dist/components/inputs/AntTagInput.vue +91 -61
  94. package/dist/components/inputs/AntTextInput.vue +31 -11
  95. package/dist/components/inputs/AntTextarea.vue +53 -25
  96. package/dist/components/inputs/AntUnitInput.vue +33 -12
  97. package/dist/components/inputs/Elements/AntBaseInput.vue +47 -18
  98. package/dist/components/inputs/Elements/AntInputDescription.vue +16 -8
  99. package/dist/components/inputs/Elements/AntInputLabel.vue +13 -5
  100. package/dist/components/inputs/Elements/AntInputLimiter.vue +13 -5
  101. package/dist/components/inputs/Elements/AntSelectMenu.vue +65 -41
  102. package/dist/components/inputs/Elements/__stories/AntBaseInput.stories.mjs +104 -27
  103. package/dist/components/inputs/Elements/__stories/AntInputDescription.stories.mjs +33 -9
  104. package/dist/components/inputs/Elements/__stories/AntInputLabel.stories.mjs +34 -9
  105. package/dist/components/inputs/Elements/__stories/AntInputLimiter.stories.mjs +33 -9
  106. package/dist/components/inputs/Elements/index.d.ts +1 -1
  107. package/dist/components/inputs/__stories/AntCheckbox.stories.mjs +34 -9
  108. package/dist/components/inputs/__stories/AntCheckboxGroup.stories.mjs +45 -21
  109. package/dist/components/inputs/__stories/AntDateInput.stories.mjs +52 -14
  110. package/dist/components/inputs/__stories/AntNumberInput.stories.mjs +66 -17
  111. package/dist/components/inputs/__stories/AntPasswordInput.stories.mjs +51 -13
  112. package/dist/components/inputs/__stories/AntRadioGroup.stories.mjs +45 -12
  113. package/dist/components/inputs/__stories/AntRangeSlider.stories.mjs +16 -5
  114. package/dist/components/inputs/__stories/AntSearch.stories.mjs +41 -10
  115. package/dist/components/inputs/__stories/AntSelect.stories.mjs +59 -15
  116. package/dist/components/inputs/__stories/AntSwitch.stories.js +126 -102
  117. package/dist/components/inputs/__stories/AntSwitch.stories.mjs +162 -112
  118. package/dist/components/inputs/__stories/AntSwitcher.stories.mjs +38 -10
  119. package/dist/components/inputs/__stories/AntTagInput.stories.mjs +46 -12
  120. package/dist/components/inputs/__stories/AntTextInput.stories.mjs +59 -16
  121. package/dist/components/inputs/__stories/AntTextarea.stories.mjs +47 -13
  122. package/dist/components/inputs/__stories/AntUnitInput.stories.mjs +46 -12
  123. package/dist/components/layouts/AntNavLeftLayout.vue +12 -6
  124. package/dist/components/layouts/__stories/AntNavLeftLayout.stories.mjs +10 -2
  125. package/dist/components/navbar/AntNavbar.vue +7 -3
  126. package/dist/components/navbar/AntNavbarItem.vue +12 -6
  127. package/dist/components/navbar/__stories/AntNavbar.stories.mjs +59 -37
  128. package/dist/components/table/AntCollapsibleTableRowContent.vue +7 -5
  129. package/dist/components/table/AntTable.vue +210 -165
  130. package/dist/components/table/AntTableSkeleton.vue +126 -0
  131. package/dist/components/table/AntTableSortButton.vue +22 -13
  132. package/dist/components/table/AntTd.vue +21 -17
  133. package/dist/components/table/AntTh.vue +19 -12
  134. package/dist/components/table/__stories/AntTable.stories.js +1 -1
  135. package/dist/components/table/__stories/AntTable.stories.mjs +190 -62
  136. package/dist/components/tabs/AntTabItem.vue +20 -8
  137. package/dist/components/tabs/AntTabs.vue +35 -21
  138. package/dist/components/tabs/__stories/AntTabItem.stories.mjs +23 -7
  139. package/dist/components/tabs/__stories/AntTabs.stories.mjs +45 -13
  140. package/dist/components/transitions/AntTransitionCollapseHeight.vue +1 -1
  141. package/dist/composables/useToaster.mjs +25 -7
  142. package/dist/index.css +1 -0
  143. package/dist/utils.mjs +3 -1
  144. package/package.json +23 -16
  145. package/dist/tailwind.config.d.ts +0 -3
  146. package/dist/tailwind.config.js +0 -198
  147. package/dist/tailwind.config.mjs +0 -189
package/dist/components/inputs/__stories/AntSwitch.stories.js CHANGED
@@ -151,86 +151,96 @@ const Summary = exports.Summary = {
151
151
  </AntFormGroup>
152
152
  <AntFormGroupLabel>Sizes</AntFormGroupLabel>
153
153
  <AntFormGroup direction="row">
154
- <AntSwitch
155
- v-model="notValue"
156
- class="w-28"
157
- :size="Size.lg"
158
- label="Label"
159
- description="Lorem ipsum dolor sit amet"
160
- >Content
161
- </AntSwitch>
162
- <AntSwitch
163
- v-model="value"
164
- class="w-28"
165
- :size="Size.lg"
166
- label="Label"
167
- description="Lorem ipsum dolor sit amet"
168
- >Content
169
- </AntSwitch>
170
- <AntSwitch
171
- v-model="notValue"
172
- class="w-28"
173
- :size="Size.md"
174
- label="Label"
175
- description="Lorem ipsum dolor sit amet"
176
- >Content
177
- </AntSwitch>
178
- <AntSwitch
179
- v-model="value"
180
- class="w-28"
181
- :size="Size.md"
182
- label="Label"
183
- description="Lorem ipsum dolor sit amet"
184
- >Content
185
- </AntSwitch>
186
- <AntSwitch
187
- v-model="notValue"
188
- class="w-28"
189
- :size="Size.sm"
190
- label="Label"
191
- description="Lorem ipsum dolor sit amet"
192
- >Content
193
- </AntSwitch>
194
- <AntSwitch
195
- v-model="value"
196
- class="w-28"
197
- :size="Size.sm"
198
- label="Label"
199
- description="Lorem ipsum dolor sit amet"
200
- >Content
201
- </AntSwitch>
202
- <AntSwitch
203
- v-model="notValue"
204
- class="w-28"
205
- :size="Size.xs"
206
- label="Label"
207
- description="Lorem ipsum dolor sit amet"
208
- >Content
209
- </AntSwitch>
210
- <AntSwitch
211
- v-model="value"
212
- class="w-28"
213
- :size="Size.xs"
214
- label="Label"
215
- description="Lorem ipsum dolor sit amet"
216
- >Content
217
- </AntSwitch>
218
- <AntSwitch
219
- v-model="notValue"
220
- class="w-28"
221
- :size="Size.xs2"
222
- label="Label"
223
- description="Lorem ipsum dolor sit amet"
224
- >Content
225
- </AntSwitch>
226
- <AntSwitch
227
- v-model="value"
228
- class="w-28"
229
- :size="Size.xs2"
230
- label="Label"
231
- description="Lorem ipsum dolor sit amet"
232
- >Content
233
- </AntSwitch>
154
+ <div class="w-28">
155
+ <AntSwitch
156
+ v-model="notValue"
157
+ :size="Size.lg"
158
+ label="Label"
159
+ description="Lorem ipsum dolor sit amet"
160
+ >Content
161
+ </AntSwitch>
162
+ </div>
163
+ <div class="w-28">
164
+ <AntSwitch
165
+ v-model="value"
166
+ :size="Size.lg"
167
+ label="Label"
168
+ description="Lorem ipsum dolor sit amet"
169
+ >Content
170
+ </AntSwitch>
171
+ </div>
172
+ <div class="w-28">
173
+ <AntSwitch
174
+ v-model="notValue"
175
+ :size="Size.md"
176
+ label="Label"
177
+ description="Lorem ipsum dolor sit amet"
178
+ >Content
179
+ </AntSwitch>
180
+ </div>
181
+ <div class="w-28">
182
+ <AntSwitch
183
+ v-model="value"
184
+ :size="Size.md"
185
+ label="Label"
186
+ description="Lorem ipsum dolor sit amet"
187
+ >Content
188
+ </AntSwitch>
189
+ </div>
190
+ <div class="w-28">
191
+ <AntSwitch
192
+ v-model="notValue"
193
+ :size="Size.sm"
194
+ label="Label"
195
+ description="Lorem ipsum dolor sit amet"
196
+ >Content
197
+ </AntSwitch>
198
+ </div>
199
+ <div class="w-28">
200
+ <AntSwitch
201
+ v-model="value"
202
+ :size="Size.sm"
203
+ label="Label"
204
+ description="Lorem ipsum dolor sit amet"
205
+ >Content
206
+ </AntSwitch>
207
+ </div>
208
+ <div class="w-28">
209
+ <AntSwitch
210
+ v-model="notValue"
211
+ :size="Size.xs"
212
+ label="Label"
213
+ description="Lorem ipsum dolor sit amet"
214
+ >Content
215
+ </AntSwitch>
216
+ </div>
217
+ <div class="w-28">
218
+ <AntSwitch
219
+ v-model="value"
220
+ :size="Size.xs"
221
+ label="Label"
222
+ description="Lorem ipsum dolor sit amet"
223
+ >Content
224
+ </AntSwitch>
225
+ </div>
226
+ <div class="w-28">
227
+ <AntSwitch
228
+ v-model="notValue"
229
+ :size="Size.xs2"
230
+ label="Label"
231
+ description="Lorem ipsum dolor sit amet"
232
+ >Content
233
+ </AntSwitch>
234
+ </div>
235
+ <div class="w-28">
236
+ <AntSwitch
237
+ v-model="value"
238
+ :size="Size.xs2"
239
+ label="Label"
240
+ description="Lorem ipsum dolor sit amet"
241
+ >Content
242
+ </AntSwitch>
243
+ </div>
234
244
  </AntFormGroup>
235
245
  <AntFormGroup direction="row">
236
246
  <AntFormGroup>
@@ -303,31 +313,45 @@ const Summary = exports.Summary = {
303
313
  </AntFormGroup>
304
314
  <AntFormGroupLabel>Description & (Description & Content)</AntFormGroupLabel>
305
315
  <AntFormGroup direction="row">
306
- <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
307
- <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet"/>
308
- <AntSwitch
309
- v-model="notValue"
310
- class="w-28"
311
- description="Lorem ipsum dolor sit amet"
312
- >Content
313
- </AntSwitch>
314
- <AntSwitch
315
- v-model="value"
316
- class="w-28"
317
- description="Lorem ipsum dolor sit amet"
318
- >Content
319
- </AntSwitch>
316
+ <div class="w-28">
317
+ <AntSwitch v-model="notValue" description="Lorem ipsum dolor sit amet"/>
318
+ </div>
319
+ <div class="w-28">
320
+ <AntSwitch v-model="value" description="Lorem ipsum dolor sit amet"/>
321
+ </div>
322
+ <div class="w-28">
323
+ <AntSwitch
324
+ v-model="notValue"
325
+ description="Lorem ipsum dolor sit amet"
326
+ >Content
327
+ </AntSwitch>
328
+ </div>
329
+ <div class="w-28">
330
+ <AntSwitch
331
+ v-model="value"
332
+ description="Lorem ipsum dolor sit amet"
333
+ >Content
334
+ </AntSwitch>
335
+ </div>
320
336
  </AntFormGroup>
321
337
  <AntFormGroupLabel>Label & Description & (Label & Description & Content)</AntFormGroupLabel>
322
338
  <AntFormGroup direction="row">
323
- <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
324
- <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
325
- <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
326
- >Content
327
- </AntSwitch>
328
- <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
329
- >Content
330
- </AntSwitch>
339
+ <div class="w-28">
340
+ <AntSwitch v-model="notValue" description="Lorem ipsum dolor sit amet" label="Label"/>
341
+ </div>
342
+ <div class="w-28">
343
+ <AntSwitch v-model="value" description="Lorem ipsum dolor sit amet" label="Label"/>
344
+ </div>
345
+ <div class="w-28">
346
+ <AntSwitch v-model="notValue" description="Lorem ipsum dolor sit amet" label="Label"
347
+ >Content
348
+ </AntSwitch>
349
+ </div>
350
+ <div class="w-28">
351
+ <AntSwitch v-model="value" description="Lorem ipsum dolor sit amet" label="Label"
352
+ >Content
353
+ </AntSwitch>
354
+ </div>
331
355
  </AntFormGroup>
332
356
  </AntFormGroup>
333
357
  `
package/dist/components/inputs/__stories/AntSwitch.stories.mjs CHANGED
@@ -1,7 +1,13 @@
1
1
  import AntSwitch from "../AntSwitch.vue";
2
- import { ref } from "vue";
3
- import { InputState } from "../../../enums/index.mjs";
4
- import { Size } from "../../../enums/Size.enum.mjs";
2
+ import {
3
+ ref
4
+ } from "vue";
5
+ import {
6
+ InputState
7
+ } from "../../../enums/index.mjs";
8
+ import {
9
+ Size
10
+ } from "../../../enums/Size.enum.mjs";
5
11
  import AntFormGroup from "../../forms/AntFormGroup.vue";
6
12
  import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
7
13
  const meta = {
@@ -9,11 +15,15 @@ const meta = {
9
15
  component: AntSwitch,
10
16
  argTypes: {
11
17
  state: {
12
- control: { type: "select" },
18
+ control: {
19
+ type: "select"
20
+ },
13
21
  options: Object.values(InputState)
14
22
  },
15
23
  size: {
16
- control: { type: "select" },
24
+ control: {
25
+ type: "select"
26
+ },
17
27
  options: Object.values(Size)
18
28
  }
19
29
  }
@@ -21,9 +31,13 @@ const meta = {
21
31
  export default meta;
22
32
  export const Docs = {
23
33
  render: (args) => ({
24
- components: { AntSwitch },
34
+ components: {
35
+ AntSwitch
36
+ },
25
37
  setup() {
26
- return { args };
38
+ return {
39
+ args
40
+ };
27
41
  },
28
42
  template: `
29
43
  <AntSwitch v-bind="args"/>
@@ -35,14 +49,26 @@ export const Docs = {
35
49
  };
36
50
  export const Summary = {
37
51
  parameters: {
38
- chromatic: { disableSnapshot: false }
52
+ chromatic: {
53
+ disableSnapshot: false
54
+ }
39
55
  },
40
56
  render: (args) => ({
41
- components: { AntSwitch, AntFormGroup, AntFormGroupLabel },
57
+ components: {
58
+ AntSwitch,
59
+ AntFormGroup,
60
+ AntFormGroupLabel
61
+ },
42
62
  setup() {
43
63
  const value = ref(true);
44
64
  const notValue = ref(false);
45
- return { args, value, notValue, InputState, Size };
65
+ return {
66
+ args,
67
+ value,
68
+ notValue,
69
+ InputState,
70
+ Size
71
+ };
46
72
  },
47
73
  template: `
48
74
  <AntFormGroup>
@@ -124,86 +150,96 @@ export const Summary = {
124
150
  </AntFormGroup>
125
151
  <AntFormGroupLabel>Sizes</AntFormGroupLabel>
126
152
  <AntFormGroup direction="row">
127
- <AntSwitch
128
- v-model="notValue"
129
- class="w-28"
130
- :size="Size.lg"
131
- label="Label"
132
- description="Lorem ipsum dolor sit amet"
133
- >Content
134
- </AntSwitch>
135
- <AntSwitch
136
- v-model="value"
137
- class="w-28"
138
- :size="Size.lg"
139
- label="Label"
140
- description="Lorem ipsum dolor sit amet"
141
- >Content
142
- </AntSwitch>
143
- <AntSwitch
144
- v-model="notValue"
145
- class="w-28"
146
- :size="Size.md"
147
- label="Label"
148
- description="Lorem ipsum dolor sit amet"
149
- >Content
150
- </AntSwitch>
151
- <AntSwitch
152
- v-model="value"
153
- class="w-28"
154
- :size="Size.md"
155
- label="Label"
156
- description="Lorem ipsum dolor sit amet"
157
- >Content
158
- </AntSwitch>
159
- <AntSwitch
160
- v-model="notValue"
161
- class="w-28"
162
- :size="Size.sm"
163
- label="Label"
164
- description="Lorem ipsum dolor sit amet"
165
- >Content
166
- </AntSwitch>
167
- <AntSwitch
168
- v-model="value"
169
- class="w-28"
170
- :size="Size.sm"
171
- label="Label"
172
- description="Lorem ipsum dolor sit amet"
173
- >Content
174
- </AntSwitch>
175
- <AntSwitch
176
- v-model="notValue"
177
- class="w-28"
178
- :size="Size.xs"
179
- label="Label"
180
- description="Lorem ipsum dolor sit amet"
181
- >Content
182
- </AntSwitch>
183
- <AntSwitch
184
- v-model="value"
185
- class="w-28"
186
- :size="Size.xs"
187
- label="Label"
188
- description="Lorem ipsum dolor sit amet"
189
- >Content
190
- </AntSwitch>
191
- <AntSwitch
192
- v-model="notValue"
193
- class="w-28"
194
- :size="Size.xs2"
195
- label="Label"
196
- description="Lorem ipsum dolor sit amet"
197
- >Content
198
- </AntSwitch>
199
- <AntSwitch
200
- v-model="value"
201
- class="w-28"
202
- :size="Size.xs2"
203
- label="Label"
204
- description="Lorem ipsum dolor sit amet"
205
- >Content
206
- </AntSwitch>
153
+ <div class="w-28">
154
+ <AntSwitch
155
+ v-model="notValue"
156
+ :size="Size.lg"
157
+ label="Label"
158
+ description="Lorem ipsum dolor sit amet"
159
+ >Content
160
+ </AntSwitch>
161
+ </div>
162
+ <div class="w-28">
163
+ <AntSwitch
164
+ v-model="value"
165
+ :size="Size.lg"
166
+ label="Label"
167
+ description="Lorem ipsum dolor sit amet"
168
+ >Content
169
+ </AntSwitch>
170
+ </div>
171
+ <div class="w-28">
172
+ <AntSwitch
173
+ v-model="notValue"
174
+ :size="Size.md"
175
+ label="Label"
176
+ description="Lorem ipsum dolor sit amet"
177
+ >Content
178
+ </AntSwitch>
179
+ </div>
180
+ <div class="w-28">
181
+ <AntSwitch
182
+ v-model="value"
183
+ :size="Size.md"
184
+ label="Label"
185
+ description="Lorem ipsum dolor sit amet"
186
+ >Content
187
+ </AntSwitch>
188
+ </div>
189
+ <div class="w-28">
190
+ <AntSwitch
191
+ v-model="notValue"
192
+ :size="Size.sm"
193
+ label="Label"
194
+ description="Lorem ipsum dolor sit amet"
195
+ >Content
196
+ </AntSwitch>
197
+ </div>
198
+ <div class="w-28">
199
+ <AntSwitch
200
+ v-model="value"
201
+ :size="Size.sm"
202
+ label="Label"
203
+ description="Lorem ipsum dolor sit amet"
204
+ >Content
205
+ </AntSwitch>
206
+ </div>
207
+ <div class="w-28">
208
+ <AntSwitch
209
+ v-model="notValue"
210
+ :size="Size.xs"
211
+ label="Label"
212
+ description="Lorem ipsum dolor sit amet"
213
+ >Content
214
+ </AntSwitch>
215
+ </div>
216
+ <div class="w-28">
217
+ <AntSwitch
218
+ v-model="value"
219
+ :size="Size.xs"
220
+ label="Label"
221
+ description="Lorem ipsum dolor sit amet"
222
+ >Content
223
+ </AntSwitch>
224
+ </div>
225
+ <div class="w-28">
226
+ <AntSwitch
227
+ v-model="notValue"
228
+ :size="Size.xs2"
229
+ label="Label"
230
+ description="Lorem ipsum dolor sit amet"
231
+ >Content
232
+ </AntSwitch>
233
+ </div>
234
+ <div class="w-28">
235
+ <AntSwitch
236
+ v-model="value"
237
+ :size="Size.xs2"
238
+ label="Label"
239
+ description="Lorem ipsum dolor sit amet"
240
+ >Content
241
+ </AntSwitch>
242
+ </div>
207
243
  </AntFormGroup>
208
244
  <AntFormGroup direction="row">
209
245
  <AntFormGroup>
@@ -276,31 +312,45 @@ export const Summary = {
276
312
  </AntFormGroup>
277
313
  <AntFormGroupLabel>Description & (Description & Content)</AntFormGroupLabel>
278
314
  <AntFormGroup direction="row">
279
- <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
280
- <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet"/>
281
- <AntSwitch
282
- v-model="notValue"
283
- class="w-28"
284
- description="Lorem ipsum dolor sit amet"
285
- >Content
286
- </AntSwitch>
287
- <AntSwitch
288
- v-model="value"
289
- class="w-28"
290
- description="Lorem ipsum dolor sit amet"
291
- >Content
292
- </AntSwitch>
315
+ <div class="w-28">
316
+ <AntSwitch v-model="notValue" description="Lorem ipsum dolor sit amet"/>
317
+ </div>
318
+ <div class="w-28">
319
+ <AntSwitch v-model="value" description="Lorem ipsum dolor sit amet"/>
320
+ </div>
321
+ <div class="w-28">
322
+ <AntSwitch
323
+ v-model="notValue"
324
+ description="Lorem ipsum dolor sit amet"
325
+ >Content
326
+ </AntSwitch>
327
+ </div>
328
+ <div class="w-28">
329
+ <AntSwitch
330
+ v-model="value"
331
+ description="Lorem ipsum dolor sit amet"
332
+ >Content
333
+ </AntSwitch>
334
+ </div>
293
335
  </AntFormGroup>
294
336
  <AntFormGroupLabel>Label & Description & (Label & Description & Content)</AntFormGroupLabel>
295
337
  <AntFormGroup direction="row">
296
- <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
297
- <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
298
- <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
299
- >Content
300
- </AntSwitch>
301
- <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
302
- >Content
303
- </AntSwitch>
338
+ <div class="w-28">
339
+ <AntSwitch v-model="notValue" description="Lorem ipsum dolor sit amet" label="Label"/>
340
+ </div>
341
+ <div class="w-28">
342
+ <AntSwitch v-model="value" description="Lorem ipsum dolor sit amet" label="Label"/>
343
+ </div>
344
+ <div class="w-28">
345
+ <AntSwitch v-model="notValue" description="Lorem ipsum dolor sit amet" label="Label"
346
+ >Content
347
+ </AntSwitch>
348
+ </div>
349
+ <div class="w-28">
350
+ <AntSwitch v-model="value" description="Lorem ipsum dolor sit amet" label="Label"
351
+ >Content
352
+ </AntSwitch>
353
+ </div>
304
354
  </AntFormGroup>
305
355
  </AntFormGroup>
306
356
  `
package/dist/components/inputs/__stories/AntSwitcher.stories.mjs CHANGED
@@ -1,6 +1,13 @@
1
- import { computed, ref } from "vue";
2
- import { Size } from "../../../enums/index.mjs";
3
- import { InputState } from "../../../enums/index.mjs";
1
+ import {
2
+ computed,
3
+ ref
4
+ } from "vue";
5
+ import {
6
+ Size
7
+ } from "../../../enums/index.mjs";
8
+ import {
9
+ InputState
10
+ } from "../../../enums/index.mjs";
4
11
  import AntSwitcher from "../AntSwitcher.vue";
5
12
  import AntFormGroup from "../../forms/AntFormGroup.vue";
6
13
  import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
@@ -26,11 +33,15 @@ type SwitcherOption = {
26
33
  }
27
34
  },
28
35
  state: {
29
- control: { type: "select" },
36
+ control: {
37
+ type: "select"
38
+ },
30
39
  options: Object.values(InputState)
31
40
  },
32
41
  size: {
33
- control: { type: "select" },
42
+ control: {
43
+ type: "select"
44
+ },
34
45
  options: Object.values(Size)
35
46
  }
36
47
  }
@@ -38,7 +49,9 @@ type SwitcherOption = {
38
49
  export default meta;
39
50
  export const Docs = {
40
51
  render: (args) => ({
41
- components: { AntSwitcher },
52
+ components: {
53
+ AntSwitcher
54
+ },
42
55
  setup() {
43
56
  const modelValue = computed({
44
57
  // @ts-ignore
@@ -46,7 +59,10 @@ export const Docs = {
46
59
  // @ts-ignore
47
60
  set: (val) => args.modelValue = val
48
61
  });
49
- return { args, modelValue };
62
+ return {
63
+ args,
64
+ modelValue
65
+ };
50
66
  },
51
67
  template: `
52
68
  <AntSwitcher v-bind="args" v-model="modelValue"/>
@@ -76,10 +92,16 @@ export const Docs = {
76
92
  };
77
93
  export const Summary = {
78
94
  parameters: {
79
- chromatic: { disableSnapshot: false }
95
+ chromatic: {
96
+ disableSnapshot: false
97
+ }
80
98
  },
81
99
  render: (args) => ({
82
- components: { AntSwitcher, AntFormGroup, AntFormGroupLabel },
100
+ components: {
101
+ AntSwitcher,
102
+ AntFormGroup,
103
+ AntFormGroupLabel
104
+ },
83
105
  setup() {
84
106
  const modelValue = computed({
85
107
  // @ts-ignore
@@ -88,7 +110,13 @@ export const Summary = {
88
110
  set: (val) => args.modelValue = val
89
111
  });
90
112
  const skeleton = ref(true);
91
- return { args, modelValue, InputState, skeleton, Size };
113
+ return {
114
+ args,
115
+ modelValue,
116
+ InputState,
117
+ skeleton,
118
+ Size
119
+ };
92
120
  },
93
121
  template: `
94
122
  <AntFormGroup>