Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,16 @@ export default defineNuxtConfig({
This renders both the banner and preferences dialog. You can also use `<C15tBanner>` and `<C15tDialog>` separately, or customise them via named slots:

```vue
<C15tConsentManager>
<template #banner="{ acceptAll, acceptNecessary, openPreferences }">
<!-- your custom banner -->
</template>
<template #dialog="{ displayedConsents, toggle, saveCustom, acceptAll, close }">
<!-- your custom dialog -->
</template>
</C15tConsentManager>
<template>
<C15tConsentManager>
<template #banner="{ acceptAll, acceptNecessary, openPreferences }">
<!-- your custom banner -->
</template>
<template #dialog="{ displayedConsents, toggle, saveCustom, acceptAll, close }">
<!-- your custom dialog -->
</template>
</C15tConsentManager>
</template>
```

4. Check consent anywhere
Expand Down
6 changes: 4 additions & 2 deletions docs/components/consent-manager.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ A convenience component that renders both the consent banner and preferences dia
This is equivalent to:

```vue
<C15tBanner />
<C15tDialog />
<template>
<C15tBanner />
<C15tDialog />
</template>
```

### Custom UI via Named Slots
Expand Down
4 changes: 3 additions & 1 deletion docs/components/dialog-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ Inline trigger that opens the consent preferences dialog. Use it in body copy, f
Renders a `<button>` by default. Use `as-anchor` to render an `<a>` instead:

```vue
<C15tDialogLink as-anchor>Cookie settings</C15tDialogLink>
<template>
<C15tDialogLink as-anchor>Cookie settings</C15tDialogLink>
</template>
```

## Props
Expand Down
8 changes: 5 additions & 3 deletions docs/components/dialog-trigger.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,11 @@ Mount once, typically in your `app.vue` alongside `<C15tBanner>` and `<C15tDialo
The default icon is a cookie-ish dotted circle. Override via the default slot:

```vue
<C15tDialogTrigger>
<Icon name="i-heroicons-cog-6-tooth" />
</C15tDialogTrigger>
<template>
<C15tDialogTrigger>
<Icon name="i-heroicons-cog-6-tooth" />
</C15tDialogTrigger>
</template>
```

## Dragging
Expand Down
30 changes: 16 additions & 14 deletions docs/components/widget.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,22 @@ Inline consent manager. Renders the same per-category toggles as `<C15tDialog>`
All state is exposed via the default slot, so you can render any layout:

```vue
<C15tWidget v-slot="{ displayedConsents, consents, toggle, saveCustom, acceptAll, rejectAll }">
<div v-for="ct in displayedConsents" :key="ct.name">
<input
type="checkbox"
:checked="consents[ct.name]"
:disabled="ct.disabled"
@change="toggle(ct.name, $event.target.checked)"
>
{{ ct.name }}
</div>
<button @click="rejectAll">Reject</button>
<button @click="saveCustom">Save</button>
<button @click="acceptAll">Accept all</button>
</C15tWidget>
<template>
<C15tWidget v-slot="{ displayedConsents, consents, toggle, saveCustom, acceptAll, rejectAll }">
<div v-for="ct in displayedConsents" :key="ct.name">
<input
type="checkbox"
:checked="consents[ct.name]"
:disabled="ct.disabled"
@change="toggle(ct.name, $event.target.checked)"
>
{{ ct.name }}
</div>
<button @click="rejectAll">Reject</button>
<button @click="saveCustom">Save</button>
<button @click="acceptAll">Accept all</button>
</C15tWidget>
</template>
```

## Slot props
Expand Down
14 changes: 8 additions & 6 deletions docs/guide/iframe-blocking.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,16 @@ See the [`<C15tIframe>` component reference](/components/iframe) for custom plac
Use any configured consent category:

```vue
<!-- Marketing: ads, social embeds, retargeting -->
<C15tIframe category="marketing" src="..." />
<template>
<!-- Marketing: ads, social embeds, retargeting -->
<C15tIframe category="marketing" src="..." />

<!-- Measurement: analytics embeds -->
<C15tIframe category="measurement" src="..." />
<!-- Measurement: analytics embeds -->
<C15tIframe category="measurement" src="..." />

<!-- Functionality: maps, chat widgets -->
<C15tIframe category="functionality" src="..." />
<!-- Functionality: maps, chat widgets -->
<C15tIframe category="functionality" src="..." />
</template>
```

## Automatic blocking of raw `<iframe>` elements
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
"dev": "npm run dev:prepare && nuxt dev playground",
"dev:build": "nuxt build playground",
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
"release": "pnpm run lint && pnpm run test && pnpm run prepack && changelogen --release --push",
"release:next": "pnpm run lint && pnpm run test && pnpm run prepack && changelogen --release --prerelease --push",
"release": "pnpm run lint && pnpm run test && pnpm run prepack && changelogen --release --push --no-github",
"release:next": "pnpm run lint && pnpm run test && pnpm run prepack && changelogen --release --prerelease --push --no-github",
"lint": "eslint .",
"test": "vitest run",
"test:watch": "vitest watch",
Expand Down
Loading