What do you think about exposing a buttons slot?

[Dari4sho]

I need to have a little bit more control over the buttons, I need to have the first 2 ones wrapped for easier mobile styling:

Here is the adjustment to CookieControl.vue I would propose:

• Creating a new named slot "button"
• Introduce setIsModalActive function for slot props
• Exposing all necessary slot props for usage inside template

diff --git a/node_modules/@dargmuesli/nuxt-cookie-control/dist/runtime/components/CookieControl.vue b/node_modules/@dargmuesli/nuxt-cookie-control/dist/runtime/components/CookieControl.vue
index d4f5345..597b9d0 100644
--- a/node_modules/@dargmuesli/nuxt-cookie-control/dist/runtime/components/CookieControl.vue
+++ b/node_modules/@dargmuesli/nuxt-cookie-control/dist/runtime/components/CookieControl.vue
@@ -14,16 +14,29 @@
               </slot>
             </div>
             <div class="cookieControl__BarButtons">
-              <button @click="accept()" v-text="localeStrings?.accept" />
-              <button
-                v-if="moduleOptions.isAcceptNecessaryButtonEnabled"
-                @click="decline()"
-                v-text="localeStrings?.decline"
-              />
-              <button
-                @click="isModalActive = true"
-                v-text="localeStrings?.manageCookies"
-              />
+              <slot
+                  name="buttons"
+                  v-bind="{
+                    accept,
+                    decline,
+                    acceptText: localeStrings?.accept,
+                    declineText: localeStrings?.decline,
+                    isAcceptNecessaryButtonEnabled: moduleOptions.isAcceptNecessaryButtonEnabled,
+                    setIsModalActive,
+                    manageCookiesText: localeStrings?.manageCookies,
+                  }"
+              >
+                <button @click="accept()" v-text="localeStrings?.accept"/>
+                <button
+                  v-if="moduleOptions.isAcceptNecessaryButtonEnabled"
+                  @click="decline()"
+                  v-text="localeStrings?.decline"
+                />
+                <button
+                  @click="setIsModalActive(true)"
+                  v-text="localeStrings?.manageCookies"
+                />
+              </slot>
             </div>
           </div>
         </div>
@@ -281,6 +293,9 @@ const declineAll = () => {
     cookiesOptionalEnabled: [],
   })
 }
+const setIsModalActive = (value: boolean) => {
+  isModalActive.value = value
+}
 const getDescription = (description: Translatable) =>
   `${
     moduleOptions.isDashInDescriptionEnabled === false ? '' : '-'

Usage in component:

<template
      #buttons="{
        accept,
        decline,
        setIsModalActive,
        acceptText,
        declineText,
        manageCookiesText,
        isAcceptNecessaryButtonEnabled,
      }"
    >
      <div class="flex gap-[10px] md:gap-0 mb-[10px] md:mb-[0px] md:mr-[10px]">
        <button @click="accept()" v-text="acceptText" />
        <button v-if="isAcceptNecessaryButtonEnabled" @click="decline()" v-text="declineText" />
      </div>
      <button @click="setIsModalActive(true)" v-text="manageCookiesText" />
    </template>

Sorry for the loose format, before I propose a PR I just wanted to throw it in the ring. Happy holidays!

[dargmuesli]

I have nothing against that idea right away. Feel free to create a PR and I will take a closer look! 🎉