From f85d3a5c1c9829271d679b9d5721a28e6f9ce544 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Jul 2024 12:18:05 +0300
Subject: [PATCH] Add asChild demo

---
 apps/showcase/doc/button/HeadlessDoc.vue | 71 ++++++++++++++++++++++++
 apps/showcase/doc/button/IconsDoc.vue    | 22 ++++----
 apps/showcase/doc/button/LinkDoc.vue     | 34 +++---------
 apps/showcase/pages/button/index.vue     | 16 ++++--
 4 files changed, 102 insertions(+), 41 deletions(-)
 create mode 100644 apps/showcase/doc/button/HeadlessDoc.vue

diff --git a/apps/showcase/doc/button/HeadlessDoc.vue b/apps/showcase/doc/button/HeadlessDoc.vue
new file mode 100644
index 000000000..41c52dca7
--- /dev/null
+++ b/apps/showcase/doc/button/HeadlessDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button v-slot="slotProps" asChild>
+    <button
+        v-bind="slotProps.a11yAttrs"
+        class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+    >
+        SIGN UP
+    </button>
+</Button>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/button/IconsDoc.vue b/apps/showcase/doc/button/IconsDoc.vue
index 4c427d265..e014e487a 100644
--- a/apps/showcase/doc/button/IconsDoc.vue
+++ b/apps/showcase/doc/button/IconsDoc.vue
@@ -2,15 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
     </DocSectionText>
-    <div class="card flex items-center gap-4 justify-center">
+    <div class="card flex flex-col items-center gap-4">
         <div class="flex flex-wrap gap-4 justify-center">
             <Button icon="pi pi-home" aria-label="Save" />
             <Button label="Profile" icon="pi pi-user" />
             <Button label="Save" icon="pi pi-check" iconPos="right" />
         </div>
         <div class="flex flex-wrap gap-4 justify-center">
-            <Button label="Search" icon="pi pi-search" iconPos="top" text />
-            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -25,20 +25,20 @@ export default {
 <Button icon="pi pi-home" aria-label="Save" />
 <Button label="Profile" icon="pi pi-user" />
 <Button label="Save" icon="pi pi-check" iconPos="right" />
-<Button label="Search" icon="pi pi-search" iconPos="top" text />
-<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
+<Button label="Search" icon="pi pi-search" iconPos="top" />
+<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
 `,
                 options: `
 <template>
-    <div class="card flex items-center gap-4 justify-center">
+    <div class="card flex flex-col items-center gap-4">
         <div class="flex flex-wrap gap-4 justify-center">
             <Button icon="pi pi-home" aria-label="Save" />
             <Button label="Profile" icon="pi pi-user" />
             <Button label="Save" icon="pi pi-check" iconPos="right" />
         </div>
         <div class="flex flex-wrap gap-4 justify-center">
-            <Button label="Search" icon="pi pi-search" iconPos="top" text />
-            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
         </div>
     </div>
 </template>
@@ -48,15 +48,15 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex items-center gap-4 justify-center">
+    <div class="card flex flex-col items-center gap-4">
         <div class="flex flex-wrap gap-4 justify-center">
             <Button icon="pi pi-home" aria-label="Save" />
             <Button label="Profile" icon="pi pi-user" />
             <Button label="Save" icon="pi pi-check" iconPos="right" />
         </div>
         <div class="flex flex-wrap gap-4 justify-center">
-            <Button label="Search" icon="pi pi-search" iconPos="top" text />
-            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/button/LinkDoc.vue b/apps/showcase/doc/button/LinkDoc.vue
index 03d05c4f8..e825b2054 100644
--- a/apps/showcase/doc/button/LinkDoc.vue
+++ b/apps/showcase/doc/button/LinkDoc.vue
@@ -1,15 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>A button can be displayed as a link element when the <i>link</i> property is present. If you need to use buttons for navigation, wrap the button inside a component like <i>NuxtLink</i> or <i>router-link</i> depending on your router.</p>
+        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
     </DocSectionText>
     <div class="card flex justify-center gap-4">
         <Button label="Link" link />
-        <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener" tabindex="-1">
-            <Button label="External" />
-        </NuxtLink>
-        <router-link to="/" target="_blank" rel="noopener" tabindex="-1">
-            <Button label="Router" />
-        </router-link>
+        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+        <Button as="router-link" label="Router" to="/" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,23 +17,15 @@ export default {
             code: {
                 basic: `
 <Button label="Link" link />
-<NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
-    <Button label="External" />
-</NuxtLink>
-<router-link to="/" target="_blank" rel="noopener">
-    <Button label="Router" />
-</router-link>
+<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+<Button as="router-link" label="Router" to="/" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center gap-4">
         <Button label="Link" link />
-        <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
-            <Button label="External" />
-        </NuxtLink>
-        <router-link to="/" target="_blank" rel="noopener">
-            <Button label="Router" />
-        </router-link>
+        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+        <Button as="router-link" label="Router" to="/" />
     </div>
 </template>
 
@@ -48,12 +36,8 @@ export default {
 <template>
     <div class="card flex justify-center gap-4">
         <Button label="Link" link />
-        <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
-            <Button label="External" />
-        </NuxtLink>
-        <router-link to="/" target="_blank" rel="noopener">
-            <Button label="Router" />
-        </router-link>
+        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+        <Button as="router-link" label="Router" to="/" />
     </div>
 </template>
 
diff --git a/apps/showcase/pages/button/index.vue b/apps/showcase/pages/button/index.vue
index 93a778875..614238b75 100755
--- a/apps/showcase/pages/button/index.vue
+++ b/apps/showcase/pages/button/index.vue
@@ -16,6 +16,7 @@ import BadgeDoc from '@/doc/button/BadgeDoc.vue';
 import BasicDoc from '@/doc/button/BasicDoc.vue';
 import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
 import DisabledDoc from '@/doc/button/DisabledDoc.vue';
+import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
 import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
 import IconsDoc from '@/doc/button/IconsDoc.vue';
 import ImportDoc from '@/doc/button/ImportDoc.vue';
@@ -46,11 +47,6 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'link',
-                    label: 'Link',
-                    component: LinkDoc
-                },
                 {
                     id: 'icons',
                     label: 'Icons',
@@ -61,6 +57,11 @@ export default {
                     label: 'Loading',
                     component: LoadingDoc
                 },
+                {
+                    id: 'link',
+                    label: 'Link',
+                    component: LinkDoc
+                },
                 {
                     id: 'severity',
                     label: 'Severity',
@@ -121,6 +122,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',