@@ -28,7 +28,7 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
2828<docs >
2929### Single action
3030
31- ```
31+ ```vue
3232<template>
3333 <NcActions>
3434 <NcActionButton @click="actionDelete">
@@ -57,7 +57,7 @@ export default {
5757
5858### Multiple actions
5959
60- ```
60+ ```vue
6161<template>
6262 <NcActions>
6363 <NcActionButton @click="showMessage('Edit')">
@@ -102,7 +102,7 @@ export default {
102102
103103### Multiple actions with 2 items inline
104104
105- ```
105+ ```vue
106106<template>
107107 <NcActions :inline="2">
108108 <NcActionButton @click="showMessage('Add')">
@@ -155,7 +155,7 @@ export default {
155155
156156### Multiple actions with custom icon
157157
158- ```
158+ ```vue
159159<template>
160160 <NcActions>
161161 <template #icon>
@@ -203,7 +203,7 @@ export default {
203203
204204### With menu title
205205
206- ```
206+ ```vue
207207<template>
208208 <NcActions menu-title="Object management">
209209 <template #icon>
@@ -253,7 +253,7 @@ export default {
253253```
254254
255255### Various icons styles
256- ```
256+ ```vue
257257<template>
258258 <NcActions :primary="true">
259259 <NcActionButton>
@@ -283,7 +283,7 @@ export default {
283283</script>
284284```
285285
286- ```
286+ ```vue
287287<template>
288288 <NcActions :primary="true" menu-title="Object management">
289289 <template #icon>
@@ -337,7 +337,7 @@ export default {
337337### Custom icon slot
338338To be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.
339339It can be used with one or multiple actions.
340- ```
340+ ```vue
341341<template>
342342 <div style="display: flex;align-items: center;">
343343 <NcButton @click="toggled = !toggled">Toggle multiple action</NcButton>
@@ -381,7 +381,7 @@ export default {
381381```
382382
383383### Custom icon slot in child elements
384- ```
384+ ```vue
385385<template>
386386 <NcActions :primary="true">
387387 <NcActionButton>
@@ -413,22 +413,22 @@ export default {
413413
414414### Type variants
415415
416- ```
416+ ```vue
417417<template>
418418 <div>
419419 <NcActions :type="current">
420420 <template #icon>
421421 <SelectColor :size="20" />
422422 </template>
423423
424- <NcActionButton v-if="current" close-after-click @click="define(undefined )">
424+ <NcActionButton v-if="current" close-after-click @click="define()">
425425 <template #icon>
426426 <Delete :size="20" />
427427 </template>
428428 Remove
429429 </NcActionButton>
430430
431- <NcActionButton close-after-click @click="define(row)" v-for="row in types " :key="`type-icon--${row}`">
431+ <NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-icon--${row}`">
432432 <template #icon>
433433 <CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
434434 <SelectColor v-else :size="20" />
@@ -438,14 +438,14 @@ export default {
438438 </NcActions>
439439
440440 <NcActions :type="current" menu-title="Choose a type">
441- <NcActionButton v-if="current" close-after-click @click="define(undefined )">
441+ <NcActionButton v-if="current" close-after-click @click="define()">
442442 <template #icon>
443443 <Delete :size="20" />
444444 </template>
445445 Remove
446446 </NcActionButton>
447447
448- <NcActionButton close-after-click @click="define(row)" v-for="row in types " :key="`type-text--${row}`">
448+ <NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-text--${row}`">
449449 <template #icon>
450450 <CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
451451 <SelectColor v-else :size="20" />
@@ -459,14 +459,14 @@ export default {
459459 <SelectColor :size="20" />
460460 </template>
461461
462- <NcActionButton v-if="current" close-after-click @click="define(undefined )">
462+ <NcActionButton v-if="current" close-after-click @click="define()">
463463 <template #icon>
464464 <Delete :size="20" />
465465 </template>
466466 Remove
467467 </NcActionButton>
468468
469- <NcActionButton close-after-click @click="define(row)" v-for="row in types " :key="`type-icon-text--${row}`">
469+ <NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-icon-text--${row}`">
470470 <template #icon>
471471 <CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
472472 <SelectColor v-else :size="20" />
@@ -504,7 +504,7 @@ export default {
504504 }
505505 },
506506 methods: {
507- define(row) {
507+ define(row = undefined ) {
508508 this.current = row
509509 }
510510 }
0 commit comments