feat: support multiple abilities for components

README.md

@@ -292,6 +292,27 @@ Instead of:
 <button>Edit</button>
 ```
 
+#### Multiple abilities
+
+If you possess multiple abilities, you can provide an array of abilities to the components. The component will render only if **all** of the abilities **match** the specified requirements of the component.
+
+```vue
+<Can :ability="[editPost, deletePost]" :args="[[post], [post]]" />
+
+<Cannot :ability="[editPost, deletePost]" :args="[[post], [post]]" />
+
+<Bouncer :ability="[editPost, deletePost]" :args="[[post], [post]]">
+  <template #can>
+    <button>Edit</button>
+    <button>Delete</button>
+  </template>
+
+  <template #cannot>
+    <p>You're not allowed to edit or delete the post.</p>
+  </template>
+</Bouncer>
+```
+
 ## Contribution
 
 <details>

playground/app/app.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import type { Product } from '~~/shared/types/product'
-import { createProduct, editProduct, deleteProduct } from '~~/shared/abilities'
+import { createProduct, editProduct, deleteProduct, createCategory } from '~~/shared/abilities'
 
 const product = ref<Product>({
   id: 1,
   name: 'Product 1',
   price: 100,
   ownerId: 1,
 })
+
+const editableProduct = ref<Product>({
+  id: 2,
+  name: 'Product 2',
+  price: 200,
+  ownerId: 2,
+})
 </script>
 
 <template>
@@ -33,7 +40,16 @@ const product = ref<Product>({
     <Can
       :ability="createProduct"
     >
-      I can create a product.
+      <p>I can create a product.</p>
+    </Can>
+
+    <Can
+      :ability="[editProduct, createCategory]"
+      :args="[[editableProduct]]"
+      as="p"
+      data-attrs="create-and-edit-product"
+    >
+      I can edit a product and create a new category.
     </Can>
 
     <Cannot
@@ -63,11 +79,11 @@ const product = ref<Product>({
       :args="[product]"
     >
       <template #can>
-        I can delete a product.
+        <p>I can delete a product.</p>
       </template>
 
       <template #cannot>
-        I cannot delete a product.
+        <p>I cannot delete a product.</p>
       </template>
     </Bouncer>
   </div>

playground/shared/abilities.ts

@@ -12,3 +12,5 @@ export const editProduct = defineAbility((user: User, product: Product) => {
 export const deleteProduct = defineAbility((user: User, product: Product) => {
   return user.id === product.ownerId
 })
+
+export const createCategory = defineAbility(() => true)

src/runtime/components/Bouncer.vue

@@ -5,8 +5,8 @@ import { Primitive } from './Primitive'
 import { allows, ref, watchEffect } from '#imports'
 
 const props = defineProps<{
-  ability: Ability
-  args?: BouncerArgs<Ability>
+  ability: Ability | Ability[]
+  args?: BouncerArgs<Ability> | BouncerArgs<Ability>[]
   as?: string | Component
 }>()
 
@@ -18,6 +18,11 @@ watchEffect(async () => {
 })
 
 async function resolve() {
+  if (Array.isArray(props.ability)) {
+    const results = await Promise.all(props.ability.map((ability, index) => allows(ability, ...(props.args?.[index] ?? [] as any))))
+    return results.every(Boolean)
+  }
+
   return await allows(props.ability, ...(props.args ?? [] as any))
 }
 </script>

src/runtime/components/Can.vue

@@ -5,8 +5,8 @@ import { Primitive } from './Primitive'
 import { allows, ref, watchEffect } from '#imports'
 
 const props = defineProps<{
-  ability: Ability
-  args?: BouncerArgs<Ability>
+  ability: Ability | Ability[]
+  args?: BouncerArgs<Ability> | BouncerArgs<Ability>[]
   as?: string | Component
 }>()
 
@@ -18,6 +18,11 @@ watchEffect(async () => {
 })
 
 async function resolve() {
+  if (Array.isArray(props.ability)) {
+    const results = await Promise.all(props.ability.map((ability, index) => allows(ability, ...(props.args?.[index] ?? [] as any))))
+    return results.every(Boolean)
+  }
+
   return await allows(props.ability, ...(props.args ?? [] as any))
 }
 </script>

src/runtime/components/Cannot.vue

@@ -5,8 +5,8 @@ import { Primitive } from './Primitive'
 import { denies, ref, watchEffect } from '#imports'
 
 const props = defineProps<{
-  ability: Ability
-  args?: BouncerArgs<Ability>
+  ability: Ability | Ability[]
+  args?: BouncerArgs<Ability> | BouncerArgs<Ability>[]
   as?: string | Component
 }>()
 
@@ -18,6 +18,11 @@ watchEffect(async () => {
 })
 
 async function resolve() {
+  if (Array.isArray(props.ability)) {
+    const results = await Promise.all(props.ability.map((ability, index) => denies(ability, ...(props.args?.[index] ?? [] as any))))
+    return results.every(Boolean)
+  }
+
   return await denies(props.ability, ...(props.args ?? [] as any))
 }
 </script>

test/component.spec.ts

@@ -12,18 +12,23 @@ describe('Components', async () => {
 
     expect(await page.getByTestId('can-visible').isVisible()).toBeTruthy()
     expect(await page.getByTestId('can-invisible').isVisible()).toBeFalsy()
+    expect(await page.getByTestId('can-multiple-visible').isVisible()).toBeTruthy()
 
     expect(await page.getByTestId('as-can-visible').isVisible()).toBeTruthy()
 
     expect(await page.getByTestId('cannot-invisible').isVisible()).toBeFalsy()
     expect(await page.getByTestId('cannot-visible').isVisible()).toBeTruthy()
+    expect(await page.getByTestId('cannot-multiple-invisible').isVisible()).toBeFalsy()
 
     expect(await page.getByTestId('bouncer-can-visible').isVisible()).toBeTruthy()
     expect(await page.getByTestId('bouncer-cannot-invisible').isVisible()).toBeFalsy()
 
     expect(await page.getByTestId('bouncer-can-invisible').isVisible()).toBeFalsy()
     expect(await page.getByTestId('bouncer-cannot-visible').isVisible()).toBeTruthy()
 
+    expect(await page.getByTestId('bouncer-can-multiple-invisible').isVisible()).toBeFalsy()
+    expect(await page.getByTestId('bouncer-cannot-multiple-invisible').isVisible()).toBeFalsy()
+
     await page.close()
   })
 })

test/fixtures/components/app/app.vue

@@ -36,6 +36,14 @@ const cannot = defineAbility(() => {
       </div>
     </Can>
 
+    <Can
+      :ability="[can, can]"
+    >
+      <div data-testid="can-multiple-visible">
+        Can Multiple Visible
+      </div>
+    </Can>
+
     <Cannot
       :ability="can"
     >
@@ -52,6 +60,14 @@ const cannot = defineAbility(() => {
       </div>
     </Cannot>
 
+    <Cannot
+      :ability="[can, cannot]"
+    >
+      <div data-testid="cannot-multiple-invisible">
+        Cannot Multiple Visible
+      </div>
+    </Cannot>
+
     <Bouncer
       :ability="can"
     >
@@ -83,5 +99,21 @@ const cannot = defineAbility(() => {
         </div>
       </template>
     </Bouncer>
+
+    <Bouncer
+      :ability="[can, can]"
+    >
+      <template #can>
+        <div data-testid="bouncer-can-multiple-visible">
+          Bouncer Can Multiple Visible
+        </div>
+      </template>
+
+      <template #cannot>
+        <div data-testid="bouncer-cannot-multiple-invisible">
+          Bouncer Cannot Multiple Invisible
+        </div>
+      </template>
+    </Bouncer>
   </div>
 </template>