Implemented Toolbar for Volt

apps/volt/assets/data/menu.json

@@ -133,6 +133,10 @@
                 {
                     "name": "ToggleSwitch",
                     "to": "/toggleswitch"
+                },
+                {
+                    "name": "Toolbar",
+                    "to": "/toolbar"
                 }
             ]
         },

apps/volt/doc/toolbar/BasicDoc.vue

@@ -0,0 +1,58 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> properties to place content at these sections.</p>
+    </DocSectionText>
+    <div class="card">
+        <Toolbar>
+            <template #start>
+                <SecondaryButton icon="pi pi-plus" class="mr-2" text />
+                <SecondaryButton icon="pi pi-print" class="mr-2" text />
+                <SecondaryButton icon="pi pi-upload" severity="secondary" text />
+            </template>
+
+            <template #center>
+                <InputText placeholder="Search" />
+            </template>
+
+            <template #end>
+                <Button label="Save" />
+            </template>
+        </Toolbar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import SecondaryButton from '@/volt/button/secondary';
+import InputText from '@/volt/inputtext';
+import Toolbar from '@/volt/toolbar';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <Toolbar>
+        <template #start>
+            <SecondaryButton icon="pi pi-plus" class="mr-2" text />
+            <SecondaryButton icon="pi pi-print" class="mr-2" text />
+            <SecondaryButton icon="pi pi-upload" severity="secondary" text />
+        </template>
+
+        <template #center>
+            <InputText placeholder="Search" />
+        </template>
+
+        <template #end> 
+            <Button icon="pi pi-check" />
+        </template>
+    </Toolbar>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import SecondaryButton from '@/volt/button/secondary';
+import InputText from '@/volt/inputtext';
+import Toolbar from '@/volt/toolbar';
+<\/script>
+`);
+</script>

apps/volt/doc/toolbar/CustomDoc.vue

@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A customized toolbar with navigation bar functionality.</p>
+    </DocSectionText>
+    <div class="card">
+        <Toolbar pt:root="rounded-full p-4">
+            <template #start>
+                <div class="flex items-center gap-2">
+                    <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8 ms-4">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-text-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="transparent"
+                        />
+                    </svg>
+                    <SecondaryButton label="Files" text />
+                    <SecondaryButton label="Edit" text />
+                    <SecondaryButton label="View" text />
+                </div>
+            </template>
+
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <ContrastButton label="Share" size="small" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                </div>
+            </template>
+        </Toolbar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import ContrastButton from '@/volt/button/contrast';
+import SecondaryButton from '@/volt/button/secondary';
+import Toolbar from '@/volt/toolbar';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <Toolbar pt:root="rounded-full p-4">
+        <template #start>
+            <div class="flex items-center gap-2">
+                <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8 ms-4">
+                    ...
+                </svg>
+                <SecondaryButton label="Files" text />
+                <SecondaryButton label="Edit" text />
+                <SecondaryButton label="View" text />
+            </div>
+        </template>
+
+        <template #end>
+            <div class="flex items-center gap-2">
+                <ContrastButton label="Share" size="small" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+            </div>
+        </template>
+    </Toolbar>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import ContrastButton from '@/volt/button/contrast';
+import SecondaryButton from '@/volt/button/secondary';
+import Toolbar from '@/volt/toolbar';
+<\/script>
+`);
+</script>

apps/volt/doc/toolbar/ImportDoc.vue

@@ -0,0 +1,11 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Toolbar from '@/volt/toolbar';
+`);
+</script>

apps/volt/pages/toolbar/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" />
+</template>
+<script>
+import BasicDoc from '@/doc/toolbar/BasicDoc.vue';
+import CustomDoc from '@/doc/toolbar/CustomDoc.vue';
+import ImportDoc from '@/doc/toolbar/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'custom',
+                    label: 'Custom',
+                    component: CustomDoc
+                }
+            ]
+        };
+    }
+};
+</script>

apps/volt/volt/toolbar/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <Toolbar
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Toolbar>
+</template>
+
+<script setup>
+import Toolbar from 'primevue/toolbar';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `flex items-center justify-between flex-wrap p-3 gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700 rounded-md`,
+    start: `flex items-center`,
+    center: `flex items-center`,
+    end: `flex items-center`
+});
+</script>