@antify/ui 2.5.7 → 3.0.0

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 (37) hide show
  1. package/dist/components/AntAccordion.vue +5 -6
  2. package/dist/components/AntAccordionItem.vue +5 -7
  3. package/dist/components/AntAlert.vue +53 -54
  4. package/dist/components/AntButton.vue +60 -62
  5. package/dist/components/AntCard.vue +10 -11
  6. package/dist/components/AntIcon.vue +8 -8
  7. package/dist/components/AntKeycap.vue +15 -15
  8. package/dist/components/AntListGroup.vue +10 -10
  9. package/dist/components/AntModal.vue +5 -5
  10. package/dist/components/AntPagination.vue +38 -40
  11. package/dist/components/AntSkeleton.vue +5 -25
  12. package/dist/components/__stories/AntListGroup.stories.js +6 -9
  13. package/dist/components/__stories/AntListGroup.stories.mjs +6 -9
  14. package/dist/components/__stories/AntListGroupItem.stories.js +1 -1
  15. package/dist/components/__stories/AntListGroupItem.stories.mjs +1 -1
  16. package/dist/components/inputs/AntCheckbox.vue +8 -9
  17. package/dist/components/inputs/AntColorInput/AntColorInput.vue +5 -10
  18. package/dist/components/inputs/AntImageInput.vue +34 -36
  19. package/dist/components/inputs/AntRadio.vue +8 -9
  20. package/dist/components/inputs/AntSelect.vue +64 -63
  21. package/dist/components/inputs/AntSwitch.vue +26 -27
  22. package/dist/components/inputs/AntSwitcher.vue +12 -11
  23. package/dist/components/inputs/AntTagInput.vue +6 -10
  24. package/dist/components/inputs/AntTextarea.vue +5 -9
  25. package/dist/components/inputs/Elements/AntBaseInput.vue +60 -60
  26. package/dist/components/inputs/__stories/AntCheckbox.stories.js +41 -14
  27. package/dist/components/inputs/__stories/AntCheckbox.stories.mjs +41 -14
  28. package/dist/components/table/AntTable.vue +11 -7
  29. package/dist/components/table/AntTableSkeleton.vue +5 -1
  30. package/dist/components/tabs/AntTabItem.vue +5 -7
  31. package/dist/composables/index.d.ts +1 -0
  32. package/dist/composables/index.js +11 -0
  33. package/dist/composables/index.mjs +1 -0
  34. package/dist/composables/useFlickerProtection.d.ts +22 -0
  35. package/dist/composables/useFlickerProtection.js +48 -0
  36. package/dist/composables/useFlickerProtection.mjs +48 -0
  37. package/package.json +1 -1
package/dist/components/inputs/__stories/AntCheckbox.stories.js CHANGED
@@ -90,6 +90,7 @@ const Summary = exports.Summary = {
90
90
  <AntFormGroup direction="row">
91
91
  <AntCheckbox
92
92
  v-model="offValue"
93
+ v-bind="args"
93
94
  class="w-28"
94
95
  :state="InputState.base"
95
96
  label="Label"
@@ -98,6 +99,7 @@ const Summary = exports.Summary = {
98
99
  />
99
100
  <AntCheckbox
100
101
  v-model="offValue"
102
+ v-bind="args"
101
103
  class="w-28"
102
104
  :state="InputState.info"
103
105
  label="Label"
@@ -106,6 +108,7 @@ const Summary = exports.Summary = {
106
108
  />
107
109
  <AntCheckbox
108
110
  v-model="offValue"
111
+ v-bind="args"
109
112
  class="w-28"
110
113
  :state="InputState.success"
111
114
  label="Label"
@@ -114,6 +117,7 @@ const Summary = exports.Summary = {
114
117
  />
115
118
  <AntCheckbox
116
119
  v-model="offValue"
120
+ v-bind="args"
117
121
  class="w-28"
118
122
  :state="InputState.warning"
119
123
  label="Label"
@@ -122,6 +126,7 @@ const Summary = exports.Summary = {
122
126
  />
123
127
  <AntCheckbox
124
128
  v-model="offValue"
129
+ v-bind="args"
125
130
  class="w-28"
126
131
  :state="InputState.danger"
127
132
  label="Label"
@@ -134,6 +139,7 @@ const Summary = exports.Summary = {
134
139
  <AntFormGroup direction="row">
135
140
  <AntCheckbox
136
141
  v-model="onValue"
142
+ v-bind="args"
137
143
  class="w-28"
138
144
  :state="InputState.base"
139
145
  label="Label"
@@ -142,6 +148,7 @@ const Summary = exports.Summary = {
142
148
  />
143
149
  <AntCheckbox
144
150
  v-model="onValue"
151
+ v-bind="args"
145
152
  class="w-28"
146
153
  :state="InputState.info"
147
154
  label="Label"
@@ -150,6 +157,7 @@ const Summary = exports.Summary = {
150
157
  />
151
158
  <AntCheckbox
152
159
  v-model="onValue"
160
+ v-bind="args"
153
161
  class="w-28"
154
162
  :state="InputState.success"
155
163
  label="Label"
@@ -158,6 +166,7 @@ const Summary = exports.Summary = {
158
166
  />
159
167
  <AntCheckbox
160
168
  v-model="onValue"
169
+ v-bind="args"
161
170
  class="w-28"
162
171
  :state="InputState.warning"
163
172
  label="Label"
@@ -166,6 +175,7 @@ const Summary = exports.Summary = {
166
175
  />
167
176
  <AntCheckbox
168
177
  v-model="onValue"
178
+ v-bind="args"
169
179
  class="w-28"
170
180
  :state="InputState.danger"
171
181
  label="Label"
@@ -178,6 +188,7 @@ const Summary = exports.Summary = {
178
188
  <AntFormGroup direction="row">
179
189
  <AntCheckbox
180
190
  v-model="offValue"
191
+ v-bind="args"
181
192
  class="w-28"
182
193
  :size="Size.lg"
183
194
  label="Label"
@@ -185,6 +196,7 @@ const Summary = exports.Summary = {
185
196
  />
186
197
  <AntCheckbox
187
198
  v-model="onValue"
199
+ v-bind="args"
188
200
  class="w-28"
189
201
  :size="Size.lg"
190
202
  label="Label"
@@ -192,6 +204,7 @@ const Summary = exports.Summary = {
192
204
  />
193
205
  <AntCheckbox
194
206
  v-model="offValue"
207
+ v-bind="args"
195
208
  class="w-28"
196
209
  :size="Size.md"
197
210
  label="Label"
@@ -199,6 +212,7 @@ const Summary = exports.Summary = {
199
212
  />
200
213
  <AntCheckbox
201
214
  v-model="onValue"
215
+ v-bind="args"
202
216
  class="w-28"
203
217
  :size="Size.md"
204
218
  label="Label"
@@ -206,6 +220,7 @@ const Summary = exports.Summary = {
206
220
  />
207
221
  <AntCheckbox
208
222
  v-model="offValue"
223
+ v-bind="args"
209
224
  class="w-28"
210
225
  :size="Size.sm"
211
226
  label="Label"
@@ -213,6 +228,7 @@ const Summary = exports.Summary = {
213
228
  />
214
229
  <AntCheckbox
215
230
  v-model="onValue"
231
+ v-bind="args"
216
232
  class="w-28"
217
233
  :size="Size.sm"
218
234
  label="Label"
@@ -220,6 +236,7 @@ const Summary = exports.Summary = {
220
236
  />
221
237
  <AntCheckbox
222
238
  v-model="offValue"
239
+ v-bind="args"
223
240
  class="w-28"
224
241
  :size="Size.xs"
225
242
  label="Label"
@@ -227,6 +244,7 @@ const Summary = exports.Summary = {
227
244
  />
228
245
  <AntCheckbox
229
246
  v-model="onValue"
247
+ v-bind="args"
230
248
  class="w-28"
231
249
  :size="Size.xs"
232
250
  label="Label"
@@ -234,6 +252,7 @@ const Summary = exports.Summary = {
234
252
  />
235
253
  <AntCheckbox
236
254
  v-model="offValue"
255
+ v-bind="args"
237
256
  class="w-28"
238
257
  :size="Size.xs2"
239
258
  label="Label"
@@ -241,6 +260,7 @@ const Summary = exports.Summary = {
241
260
  />
242
261
  <AntCheckbox
243
262
  v-model="onValue"
263
+ v-bind="args"
244
264
  class="w-28"
245
265
  :size="Size.xs"
246
266
  label="Label"
@@ -253,6 +273,7 @@ const Summary = exports.Summary = {
253
273
  <AntFormGroup direction="row">
254
274
  <AntCheckbox
255
275
  v-model="offValue"
276
+ v-bind="args"
256
277
  class="w-28"
257
278
  label="Label"
258
279
  description="Lorem ipsum dolor sit amet."
@@ -262,6 +283,7 @@ const Summary = exports.Summary = {
262
283
  </AntCheckbox>
263
284
  <AntCheckbox
264
285
  v-model="onValue"
286
+ v-bind="args"
265
287
  class="w-28"
266
288
  label="Label"
267
289
  description="Lorem ipsum dolor sit amet."
@@ -276,6 +298,7 @@ const Summary = exports.Summary = {
276
298
  <AntFormGroup direction="row">
277
299
  <AntCheckbox
278
300
  v-model="offValue"
301
+ v-bind="args"
279
302
  :readonly="true"
280
303
  class="w-28"
281
304
  label="Label"
@@ -285,6 +308,7 @@ const Summary = exports.Summary = {
285
308
  </AntCheckbox>
286
309
  <AntCheckbox
287
310
  v-model="onValue"
311
+ v-bind="args"
288
312
  :readonly="true"
289
313
  class="w-28"
290
314
  label="Label"
@@ -298,6 +322,7 @@ const Summary = exports.Summary = {
298
322
  <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
299
323
  <AntCheckbox
300
324
  v-model="offValue"
325
+ v-bind="args"
301
326
  class="w-28"
302
327
  label="Label"
303
328
  description="Lorem ipsum dolor sit amet."
@@ -309,49 +334,50 @@ const Summary = exports.Summary = {
309
334
  </AntFormGroup>
310
335
  <AntFormGroupLabel>Plain</AntFormGroupLabel>
311
336
  <AntFormGroup direction="row">
312
- <AntCheckbox v-model="offValue"/>
313
- <AntCheckbox v-model="onValue"/>
337
+ <AntCheckbox v-model="offValue" v-bind="args" />
338
+ <AntCheckbox v-model="onValue" v-bind="args" />
314
339
  </AntFormGroup>
315
340
  <AntFormGroupLabel>Label & label + value</AntFormGroupLabel>
316
341
  <AntFormGroup direction="row">
317
- <AntCheckbox v-model="offValue" label="Label"/>
318
- <AntCheckbox v-model="onValue" label="Label"/>
319
- <AntCheckbox v-model="offValue" label="Label">
342
+ <AntCheckbox v-model="offValue" v-bind="args" label="Label"/>
343
+ <AntCheckbox v-model="onValue" v-bind="args" label="Label"/>
344
+ <AntCheckbox v-model="offValue" v-bind="args" label="Label">
320
345
  Value
321
346
  </AntCheckbox>
322
- <AntCheckbox v-model="onValue" label="Label">
347
+ <AntCheckbox v-model="onValue" v-bind="args" label="Label">
323
348
  Value
324
349
  </AntCheckbox>
325
350
  </AntFormGroup>
326
351
  <AntFormGroupLabel>Description & description + value</AntFormGroupLabel>
327
352
  <AntFormGroup direction="row">
328
- <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
329
- <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
330
- <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet">
353
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
354
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
355
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
331
356
  Value
332
357
  </AntCheckbox>
333
- <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet">
358
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
334
359
  Value
335
360
  </AntCheckbox>
336
361
  </AntFormGroup>
337
362
  <AntFormGroupLabel>Content</AntFormGroupLabel>
338
363
  <AntFormGroup direction="row">
339
- <AntCheckbox v-model="offValue" class="w-28">
364
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28">
340
365
  Value
341
366
  </AntCheckbox>
342
- <AntCheckbox v-model="onValue" class="w-28">
367
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28">
343
368
  Value
344
369
  </AntCheckbox>
345
370
  </AntFormGroup>
346
371
  <AntFormGroupLabel>Label & Description</AntFormGroupLabel>
347
372
  <AntFormGroup direction="row">
348
- <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
349
- <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
373
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
374
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
350
375
  </AntFormGroup>
351
376
  <AntFormGroupLabel>Label & Description & Content</AntFormGroupLabel>
352
377
  <AntFormGroup direction="row">
353
378
  <AntCheckbox
354
379
  v-model="offValue"
380
+ v-bind="args"
355
381
  class="w-28"
356
382
  description="Lorem ipsum dolor sit amet"
357
383
  label="Label"
@@ -360,6 +386,7 @@ const Summary = exports.Summary = {
360
386
  </AntCheckbox>
361
387
  <AntCheckbox
362
388
  v-model="onValue"
389
+ v-bind="args"
363
390
  class="w-28"
364
391
  description="Lorem ipsum dolor sit amet"
365
392
  label="Label"
package/dist/components/inputs/__stories/AntCheckbox.stories.mjs CHANGED
@@ -89,6 +89,7 @@ export const Summary = {
89
89
  <AntFormGroup direction="row">
90
90
  <AntCheckbox
91
91
  v-model="offValue"
92
+ v-bind="args"
92
93
  class="w-28"
93
94
  :state="InputState.base"
94
95
  label="Label"
@@ -97,6 +98,7 @@ export const Summary = {
97
98
  />
98
99
  <AntCheckbox
99
100
  v-model="offValue"
101
+ v-bind="args"
100
102
  class="w-28"
101
103
  :state="InputState.info"
102
104
  label="Label"
@@ -105,6 +107,7 @@ export const Summary = {
105
107
  />
106
108
  <AntCheckbox
107
109
  v-model="offValue"
110
+ v-bind="args"
108
111
  class="w-28"
109
112
  :state="InputState.success"
110
113
  label="Label"
@@ -113,6 +116,7 @@ export const Summary = {
113
116
  />
114
117
  <AntCheckbox
115
118
  v-model="offValue"
119
+ v-bind="args"
116
120
  class="w-28"
117
121
  :state="InputState.warning"
118
122
  label="Label"
@@ -121,6 +125,7 @@ export const Summary = {
121
125
  />
122
126
  <AntCheckbox
123
127
  v-model="offValue"
128
+ v-bind="args"
124
129
  class="w-28"
125
130
  :state="InputState.danger"
126
131
  label="Label"
@@ -133,6 +138,7 @@ export const Summary = {
133
138
  <AntFormGroup direction="row">
134
139
  <AntCheckbox
135
140
  v-model="onValue"
141
+ v-bind="args"
136
142
  class="w-28"
137
143
  :state="InputState.base"
138
144
  label="Label"
@@ -141,6 +147,7 @@ export const Summary = {
141
147
  />
142
148
  <AntCheckbox
143
149
  v-model="onValue"
150
+ v-bind="args"
144
151
  class="w-28"
145
152
  :state="InputState.info"
146
153
  label="Label"
@@ -149,6 +156,7 @@ export const Summary = {
149
156
  />
150
157
  <AntCheckbox
151
158
  v-model="onValue"
159
+ v-bind="args"
152
160
  class="w-28"
153
161
  :state="InputState.success"
154
162
  label="Label"
@@ -157,6 +165,7 @@ export const Summary = {
157
165
  />
158
166
  <AntCheckbox
159
167
  v-model="onValue"
168
+ v-bind="args"
160
169
  class="w-28"
161
170
  :state="InputState.warning"
162
171
  label="Label"
@@ -165,6 +174,7 @@ export const Summary = {
165
174
  />
166
175
  <AntCheckbox
167
176
  v-model="onValue"
177
+ v-bind="args"
168
178
  class="w-28"
169
179
  :state="InputState.danger"
170
180
  label="Label"
@@ -177,6 +187,7 @@ export const Summary = {
177
187
  <AntFormGroup direction="row">
178
188
  <AntCheckbox
179
189
  v-model="offValue"
190
+ v-bind="args"
180
191
  class="w-28"
181
192
  :size="Size.lg"
182
193
  label="Label"
@@ -184,6 +195,7 @@ export const Summary = {
184
195
  />
185
196
  <AntCheckbox
186
197
  v-model="onValue"
198
+ v-bind="args"
187
199
  class="w-28"
188
200
  :size="Size.lg"
189
201
  label="Label"
@@ -191,6 +203,7 @@ export const Summary = {
191
203
  />
192
204
  <AntCheckbox
193
205
  v-model="offValue"
206
+ v-bind="args"
194
207
  class="w-28"
195
208
  :size="Size.md"
196
209
  label="Label"
@@ -198,6 +211,7 @@ export const Summary = {
198
211
  />
199
212
  <AntCheckbox
200
213
  v-model="onValue"
214
+ v-bind="args"
201
215
  class="w-28"
202
216
  :size="Size.md"
203
217
  label="Label"
@@ -205,6 +219,7 @@ export const Summary = {
205
219
  />
206
220
  <AntCheckbox
207
221
  v-model="offValue"
222
+ v-bind="args"
208
223
  class="w-28"
209
224
  :size="Size.sm"
210
225
  label="Label"
@@ -212,6 +227,7 @@ export const Summary = {
212
227
  />
213
228
  <AntCheckbox
214
229
  v-model="onValue"
230
+ v-bind="args"
215
231
  class="w-28"
216
232
  :size="Size.sm"
217
233
  label="Label"
@@ -219,6 +235,7 @@ export const Summary = {
219
235
  />
220
236
  <AntCheckbox
221
237
  v-model="offValue"
238
+ v-bind="args"
222
239
  class="w-28"
223
240
  :size="Size.xs"
224
241
  label="Label"
@@ -226,6 +243,7 @@ export const Summary = {
226
243
  />
227
244
  <AntCheckbox
228
245
  v-model="onValue"
246
+ v-bind="args"
229
247
  class="w-28"
230
248
  :size="Size.xs"
231
249
  label="Label"
@@ -233,6 +251,7 @@ export const Summary = {
233
251
  />
234
252
  <AntCheckbox
235
253
  v-model="offValue"
254
+ v-bind="args"
236
255
  class="w-28"
237
256
  :size="Size.xs2"
238
257
  label="Label"
@@ -240,6 +259,7 @@ export const Summary = {
240
259
  />
241
260
  <AntCheckbox
242
261
  v-model="onValue"
262
+ v-bind="args"
243
263
  class="w-28"
244
264
  :size="Size.xs"
245
265
  label="Label"
@@ -252,6 +272,7 @@ export const Summary = {
252
272
  <AntFormGroup direction="row">
253
273
  <AntCheckbox
254
274
  v-model="offValue"
275
+ v-bind="args"
255
276
  class="w-28"
256
277
  label="Label"
257
278
  description="Lorem ipsum dolor sit amet."
@@ -261,6 +282,7 @@ export const Summary = {
261
282
  </AntCheckbox>
262
283
  <AntCheckbox
263
284
  v-model="onValue"
285
+ v-bind="args"
264
286
  class="w-28"
265
287
  label="Label"
266
288
  description="Lorem ipsum dolor sit amet."
@@ -275,6 +297,7 @@ export const Summary = {
275
297
  <AntFormGroup direction="row">
276
298
  <AntCheckbox
277
299
  v-model="offValue"
300
+ v-bind="args"
278
301
  :readonly="true"
279
302
  class="w-28"
280
303
  label="Label"
@@ -284,6 +307,7 @@ export const Summary = {
284
307
  </AntCheckbox>
285
308
  <AntCheckbox
286
309
  v-model="onValue"
310
+ v-bind="args"
287
311
  :readonly="true"
288
312
  class="w-28"
289
313
  label="Label"
@@ -297,6 +321,7 @@ export const Summary = {
297
321
  <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
298
322
  <AntCheckbox
299
323
  v-model="offValue"
324
+ v-bind="args"
300
325
  class="w-28"
301
326
  label="Label"
302
327
  description="Lorem ipsum dolor sit amet."
@@ -308,49 +333,50 @@ export const Summary = {
308
333
  </AntFormGroup>
309
334
  <AntFormGroupLabel>Plain</AntFormGroupLabel>
310
335
  <AntFormGroup direction="row">
311
- <AntCheckbox v-model="offValue"/>
312
- <AntCheckbox v-model="onValue"/>
336
+ <AntCheckbox v-model="offValue" v-bind="args" />
337
+ <AntCheckbox v-model="onValue" v-bind="args" />
313
338
  </AntFormGroup>
314
339
  <AntFormGroupLabel>Label & label + value</AntFormGroupLabel>
315
340
  <AntFormGroup direction="row">
316
- <AntCheckbox v-model="offValue" label="Label"/>
317
- <AntCheckbox v-model="onValue" label="Label"/>
318
- <AntCheckbox v-model="offValue" label="Label">
341
+ <AntCheckbox v-model="offValue" v-bind="args" label="Label"/>
342
+ <AntCheckbox v-model="onValue" v-bind="args" label="Label"/>
343
+ <AntCheckbox v-model="offValue" v-bind="args" label="Label">
319
344
  Value
320
345
  </AntCheckbox>
321
- <AntCheckbox v-model="onValue" label="Label">
346
+ <AntCheckbox v-model="onValue" v-bind="args" label="Label">
322
347
  Value
323
348
  </AntCheckbox>
324
349
  </AntFormGroup>
325
350
  <AntFormGroupLabel>Description & description + value</AntFormGroupLabel>
326
351
  <AntFormGroup direction="row">
327
- <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
328
- <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
329
- <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet">
352
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
353
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
354
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
330
355
  Value
331
356
  </AntCheckbox>
332
- <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet">
357
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
333
358
  Value
334
359
  </AntCheckbox>
335
360
  </AntFormGroup>
336
361
  <AntFormGroupLabel>Content</AntFormGroupLabel>
337
362
  <AntFormGroup direction="row">
338
- <AntCheckbox v-model="offValue" class="w-28">
363
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28">
339
364
  Value
340
365
  </AntCheckbox>
341
- <AntCheckbox v-model="onValue" class="w-28">
366
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28">
342
367
  Value
343
368
  </AntCheckbox>
344
369
  </AntFormGroup>
345
370
  <AntFormGroupLabel>Label & Description</AntFormGroupLabel>
346
371
  <AntFormGroup direction="row">
347
- <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
348
- <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
372
+ <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
373
+ <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
349
374
  </AntFormGroup>
350
375
  <AntFormGroupLabel>Label & Description & Content</AntFormGroupLabel>
351
376
  <AntFormGroup direction="row">
352
377
  <AntCheckbox
353
378
  v-model="offValue"
379
+ v-bind="args"
354
380
  class="w-28"
355
381
  description="Lorem ipsum dolor sit amet"
356
382
  label="Label"
@@ -359,6 +385,7 @@ export const Summary = {
359
385
  </AntCheckbox>
360
386
  <AntCheckbox
361
387
  v-model="onValue"
388
+ v-bind="args"
362
389
  class="w-28"
363
390
  description="Lorem ipsum dolor sit amet"
364
391
  label="Label"
package/dist/components/table/AntTable.vue CHANGED
@@ -27,6 +27,9 @@ import {
27
27
  import AntButton from '../AntButton.vue';
28
28
  import AntIcon from '../AntIcon.vue';
29
29
  import AntTableSkeleton from './AntTableSkeleton.vue';
30
+ import {
31
+ useFlickerProtection,
32
+ } from '../../composables/useFlickerProtection';
30
33
 
31
34
  defineOptions({
32
35
  inheritAttrs: false,
@@ -34,7 +37,6 @@ defineOptions({
34
37
 
35
38
  const emits = defineEmits([
36
39
  'update:modelValue',
37
- 'update:skeleton',
38
40
  'update:selectedRow',
39
41
  'rowClick',
40
42
  'updateSort',
@@ -53,6 +55,7 @@ const props = withDefaults(defineProps<{
53
55
  emptyStateText?: string;
54
56
  collapseStrategy?: CollapseStrategy;
55
57
  expandedRows?: boolean;
58
+ skeleton?: boolean;
56
59
  }>(), {
57
60
  rowKey: 'id',
58
61
  loading: false,
@@ -63,11 +66,11 @@ const props = withDefaults(defineProps<{
63
66
  emptyStateText: 'We couldn\'t find any entry',
64
67
  collapseStrategy: CollapseStrategy.single,
65
68
  expandedRows: false,
69
+ skeleton: false,
66
70
  });
67
71
  const slots = defineSlots();
68
72
  const openItems = ref<number[]>([]);
69
73
  const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
70
- const _loading: Ref<boolean> = useVModel(props, 'loading', emits);
71
74
  const _showLightVersion = ref(props.showLightVersion);
72
75
  const _headers = computed(() => {
73
76
  // if (_showLightVersion.value) {
@@ -78,9 +81,10 @@ const _headers = computed(() => {
78
81
 
79
82
  return props.headers;
80
83
  });
84
+ const _skeleton = useFlickerProtection(computed(() => props.skeleton));
85
+ const _loading = useFlickerProtection(computed(() => props.loading));
81
86
 
82
87
  const maxColSpan = computed(() => _headers.value.length + (hasSlotContent(slots['rowFirstCell']) ? 1 : 0) + (hasSlotContent(slots['rowLastCell']) ? 1 : 0));
83
- const skeleton = computed(() => !props.data || props.data.length === 0 && _loading.value);
84
88
 
85
89
  function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
86
90
  // TODO:: Sorting is always done externally, here should only be a emit sort with header and direction.
@@ -180,7 +184,7 @@ onMounted(() => {
180
184
  data-e2e="table"
181
185
  >
182
186
  <div
183
- v-if="!skeleton"
187
+ v-if="!_skeleton"
184
188
  class="overflow-hidden h-full overflow-x-auto overflow-y-auto"
185
189
  >
186
190
  <table
@@ -307,7 +311,7 @@ onMounted(() => {
307
311
  </template>
308
312
  </template>
309
313
 
310
- <tr v-if="data.length === 0 && !_loading">
314
+ <tr v-if="data.length === 0">
311
315
  <td
312
316
  colspan="100"
313
317
  class="w-full h-full py-2 text-center text-for-white-bg-font text-lg"
@@ -324,7 +328,7 @@ onMounted(() => {
324
328
  </div>
325
329
 
326
330
  <div
327
- v-if="data.length > 0 && _loading"
331
+ v-if="_loading"
328
332
  class="absolute w-full top-0 bottom-0 bg-base-300/50 flex items-center justify-center z-10"
329
333
  >
330
334
  <AntSpinner
@@ -334,7 +338,7 @@ onMounted(() => {
334
338
  </div>
335
339
 
336
340
  <AntTableSkeleton
337
- v-if="skeleton"
341
+ :visible="_skeleton"
338
342
  :headers="_headers"
339
343
  :size="size"
340
344
  :get-row-classes="getRowClasses"
package/dist/components/table/AntTableSkeleton.vue CHANGED
@@ -7,6 +7,7 @@ import AntTh from './AntTh.vue';
7
7
  import AntSkeleton from '../AntSkeleton.vue';
8
8
 
9
9
  withDefaults(defineProps<{
10
+ visible: boolean;
10
11
  headers: TableHeader[];
11
12
  getRowClasses: (element: Record<string, unknown>, rowIndex: number) => {};
12
13
  size?: AntTableSize;
@@ -20,7 +21,10 @@ withDefaults(defineProps<{
20
21
  </script>
21
22
 
22
23
  <template>
23
- <div class="overflow-hidden h-full overflow-x-auto overflow-y-auto">
24
+ <div
25
+ v-if="visible"
26
+ class="overflow-hidden h-full overflow-x-auto overflow-y-auto"
27
+ >
24
28
  <table
25
29
  class="min-w-full max-h-full relative"
26
30
  >
package/dist/components/tabs/AntTabItem.vue CHANGED
@@ -122,14 +122,12 @@ const iconColor = computed(() => {
122
122
  />
123
123
  </slot>
124
124
 
125
- <div class="relative">
125
+ <AntSkeleton
126
+ :visible="skeleton"
127
+ rounded
128
+ >
126
129
  <slot>{{ label }}</slot>
127
- <AntSkeleton
128
- v-if="skeleton"
129
- rounded
130
- absolute
131
- />
132
- </div>
130
+ </AntSkeleton>
133
131
 
134
132
  <AntIcon
135
133
  v-if="iconRight && showIcon"
package/dist/composables/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from './useToaster';
2
+ export * from './useFlickerProtection';
package/dist/composables/index.js CHANGED
@@ -13,4 +13,15 @@ Object.keys(_useToaster).forEach(function (key) {
13
13
  return _useToaster[key];
14
14
  }
15
15
  });
16
+ });
17
+ var _useFlickerProtection = require("./useFlickerProtection");
18
+ Object.keys(_useFlickerProtection).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _useFlickerProtection[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _useFlickerProtection[key];
25
+ }
26
+ });
16
27
  });
package/dist/composables/index.mjs CHANGED
@@ -1 +1,2 @@
1
1
  export * from "./useToaster.mjs";
2
+ export * from "./useFlickerProtection.mjs";