Initiate button base

apps/volt/assets/data/menu.json

@@ -26,6 +26,10 @@
                     "name": "Avatar",
                     "to": "/avatar"
                 },
+                {
+                    "name": "Button",
+                    "to": "/button"
+                },
                 {
                     "name": "Card",
                     "to": "/card"

apps/volt/components/doc/DocComponent.vue

@@ -28,21 +28,21 @@
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                             <a
                                 :href="`https://primevue.org${originPath}/#pt`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                             <a
                                 :href="`https://primevue.org${originPath}/#accessibility`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                         </div>
                     </div>
@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 defineProps({
     title: String,

apps/volt/doc/avatar/AvatarGroupDoc.vue

@@ -18,6 +18,7 @@
 <script setup>
 import Avatar from '@/volt/avatar';
 import AvatarGroup from '@/volt/avatargroup';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>

apps/volt/doc/avatar/IconDoc.vue

@@ -31,6 +31,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>

apps/volt/doc/avatar/ImageDoc.vue

@@ -29,6 +29,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>

apps/volt/doc/avatar/LabelDoc.vue

@@ -31,6 +31,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>

apps/volt/doc/button/BadgeDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/BasicDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/ButtonGroupDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/DisabledDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/HeadlessDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/IconOnlyDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/IconsDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/ImportDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/LinkDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/LoadingDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/OutlinedDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/RaisedDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/RaisedTextDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/RoundedDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/SeverityDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/SizesDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/TemplateDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/TextDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/card/AdvancedDoc.vue

@@ -29,6 +29,7 @@
 <script setup>
 import Button from '@/volt/button';
 import Card from '@/volt/card';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>

apps/volt/doc/card/BasicDoc.vue

@@ -18,6 +18,7 @@
 
 <script setup>
 import Card from '@/volt/card';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>

apps/volt/doc/textarea/HelpTextDoc.vue

@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputText from '@/volt/inputtext';
-import { ref } from 'vue';
-
-const value = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" />
-    </div>
-</template>
-
-<script setup>
-import InputText from '@/volt/inputtext';
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`);
-</script>

apps/volt/pages/button/index.vue

@@ -0,0 +1,121 @@
+<template>
+    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" />
+</template>
+
+<script setup>
+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';
+import LinkDoc from '@/doc/button/LinkDoc.vue';
+import LoadingDoc from '@/doc/button/LoadingDoc.vue';
+import OutlinedDoc from '@/doc/button/OutlinedDoc.vue';
+import RaisedDoc from '@/doc/button/RaisedDoc.vue';
+import RaisedTextDoc from '@/doc/button/RaisedTextDoc.vue';
+import RoundedDoc from '@/doc/button/RoundedDoc.vue';
+import SeverityDoc from '@/doc/button/SeverityDoc.vue';
+import SizesDoc from '@/doc/button/SizesDoc.vue';
+import TemplateDoc from '@/doc/button/TemplateDoc.vue';
+import TextDoc from '@/doc/button/TextDoc.vue';
+
+import { ref } from 'vue';
+
+const docs = ref([
+    [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'icons',
+            label: 'Icons',
+            component: IconsDoc
+        },
+        {
+            id: 'loading',
+            label: 'Loading',
+            component: LoadingDoc
+        },
+        {
+            id: 'link',
+            label: 'Link',
+            component: LinkDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'raised',
+            label: 'Raised',
+            component: RaisedDoc
+        },
+        {
+            id: 'rounded',
+            label: 'Rounded',
+            component: RoundedDoc
+        },
+        {
+            id: 'text',
+            label: 'Text',
+            component: TextDoc
+        },
+        {
+            id: 'raisedtext',
+            label: 'Raised Text',
+            component: RaisedTextDoc
+        },
+        {
+            id: 'outlined',
+            label: 'Outlined',
+            component: OutlinedDoc
+        },
+        {
+            id: 'icononly',
+            label: 'Icon Only',
+            component: IconOnlyDoc
+        },
+        {
+            id: 'badge',
+            label: 'Badge',
+            component: BadgeDoc
+        },
+        {
+            id: 'buttongroup',
+            label: 'Button Group',
+            component: ButtonGroupDoc
+        },
+        {
+            id: 'sizes',
+            label: 'Sizes',
+            component: SizesDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        }
+    ]
+]);
+</script>