pages._explore-components-structural-toolbar.title

pages._explore.sections.basic-usage.title

html

<Toolbar>
    <BaseButton 
        text="Save" 
        :color="BaseButtonColors.PRIMARY"
        icon="solar:diskette-bold"
    />
    <BaseButton 
        text="Cancel" 
        :color="BaseButtonColors.SURFACE_RAISED"
    />
</Toolbar>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
</script>

pages._explore.sections.complex-usage.title

Document Editor Toolbar

Data Table Toolbar

Media Gallery Toolbar

View:

Minimal Toolbar

Document.pdf

html

<div class="space-y-8">
    <!-- Document Editor Toolbar -->
    <div>
        <Text text="Document Editor Toolbar" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-4" />
        <div class="p-4 border rounded-lg">
            <Toolbar>
                <BaseButton 
                    icon="solar:diskette-bold" 
                    :color="BaseButtonColors.PRIMARY"
                    @triggered="fnSave"
                />
                <BaseButton 
                    icon="solar:printer-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnPrint"
                />
                <div class="h-6 w-px bg-gray-300"></div>
                <BaseButton 
                    icon="solar:undo-left-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnUndo"
                />
                <BaseButton 
                    icon="solar:undo-right-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnRedo"
                />
                <div class="h-6 w-px bg-gray-300"></div>
                <BaseButton 
                    icon="solar:text-bold-bold" 
                    :color="isFormatActive.bold ? BaseButtonColors.PRIMARY : BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnToggleFormat('bold')"
                />
                <BaseButton 
                    icon="solar:text-italic-bold" 
                    :color="isFormatActive.italic ? BaseButtonColors.PRIMARY : BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnToggleFormat('italic')"
                />
                <BaseButton 
                    icon="solar:text-underline-bold" 
                    :color="isFormatActive.underline ? BaseButtonColors.PRIMARY : BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnToggleFormat('underline')"
                />
                <div class="h-6 w-px bg-gray-300"></div>
                <SelectMenu 
                    v-model="selectedFont" 
                    :options="fontOptions"
                    placeholder="Font"
                    class="w-32"
                />
                <SelectMenu 
                    v-model="selectedSize" 
                    :options="sizeOptions"
                    placeholder="Size"
                    class="w-20"
                />
            </Toolbar>
        </div>
    </div>

    <!-- Data Table Toolbar -->
    <div>
        <Text text="Data Table Toolbar" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-4" />
        <div class="p-4 border rounded-lg">
            <Toolbar>
                <BaseButton 
                    text="Add Record" 
                    :color="BaseButtonColors.SUCCESS"
                    icon="solar:add-circle-bold"
                    @triggered="fnAddRecord"
                />
                <BaseButton 
                    :text="`Edit (${selectedRows.length})`" 
                    :color="BaseButtonColors.PRIMARY"
                    icon="solar:pen-bold"
                    :disabled="selectedRows.length === 0"
                    @triggered="fnEditRecords"
                />
                <BaseButton 
                    :text="`Delete (${selectedRows.length})`" 
                    :color="BaseButtonColors.ERROR"
                    icon="solar:trash-bin-trash-bold"
                    :disabled="selectedRows.length === 0"
                    @triggered="fnDeleteRecords"
                />
                <div class="h-6 w-px bg-gray-300"></div>
                <Input 
                    v-model="searchQuery" 
                    placeholder="Search records..." 
                    icon="solar:magnifer-bold"
                    class="w-64"
                />
                <SelectMenu 
                    v-model="filterStatus" 
                    :options="statusOptions"
                    placeholder="Filter by status"
                    class="w-40"
                />
                <div class="h-6 w-px bg-gray-300"></div>
                <BaseButton 
                    text="Export" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    icon="solar:download-bold"
                    @triggered="fnExport"
                />
                <BaseButton 
                    text="Import" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    icon="solar:upload-bold"
                    @triggered="fnImport"
                />
                <BaseButton 
                    icon="solar:refresh-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnRefresh"
                />
            </Toolbar>
        </div>
    </div>

    <!-- Media Gallery Toolbar -->
    <div>
        <Text text="Media Gallery Toolbar" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-4" />
        <div class="p-4 border rounded-lg">
            <Toolbar>
                <BaseButton 
                    text="Upload" 
                    :color="BaseButtonColors.PRIMARY"
                    icon="solar:upload-square-bold"
                    @triggered="fnUpload"
                />
                <BaseButton 
                    text="Create Folder" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    icon="solar:folder-plus-bold"
                    @triggered="fnCreateFolder"
                />
                <div class="h-6 w-px bg-gray-300"></div>
                <div class="flex items-center gap-2">
                    <Text text="View:" :size="TextSizes.SM" />
                    <BaseButton 
                        icon="solar:widget-2-bold" 
                        :color="viewMode === 'grid' ? BaseButtonColors.PRIMARY : BaseButtonColors.SURFACE_RAISED"
                        @triggered="viewMode = 'grid'"
                    />
                    <BaseButton 
                        icon="solar:list-bold" 
                        :color="viewMode === 'list' ? BaseButtonColors.PRIMARY : BaseButtonColors.SURFACE_RAISED"
                        @triggered="viewMode = 'list'"
                    />
                </div>
                <div class="h-6 w-px bg-gray-300"></div>
                <SelectMenu 
                    v-model="sortBy" 
                    :options="sortOptions"
                    placeholder="Sort by"
                    class="w-32"
                />
                <BaseButton 
                    :icon="sortOrder === 'asc' ? 'solar:sort-vertical-bold' : 'solar:sort-vertical-bold'"
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnToggleSortOrder"
                />
                <div class="h-6 w-px bg-gray-300"></div>
                <BaseButton 
                    :text="`Selected (${selectedFiles.length})`" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    :disabled="selectedFiles.length === 0"
                />
                <BaseButton 
                    icon="solar:download-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    :disabled="selectedFiles.length === 0"
                    @triggered="fnDownloadSelected"
                />
                <BaseButton 
                    icon="solar:trash-bin-trash-bold" 
                    :color="BaseButtonColors.ERROR"
                    :disabled="selectedFiles.length === 0"
                    @triggered="fnDeleteSelected"
                />
            </Toolbar>
        </div>
    </div>

    <!-- Minimal Toolbar -->
    <div>
        <Text text="Minimal Toolbar" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-4" />
        <div class="p-4 border rounded-lg">
            <Toolbar>
                <Text text="Document.pdf" :weight="TextWeights.MEDIUM" />
                <div class="flex-1"></div>
                <BaseButton 
                    icon="solar:share-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnShare"
                />
                <BaseButton 
                    icon="solar:download-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnDownload"
                />
                <BaseButton 
                    icon="solar:menu-dots-bold" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnShowMenu"
                />
            </Toolbar>
        </div>
    </div>
</div>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
import { TextWeights, TextSizes } from '#core-types/components/presentational/text'

// Document Editor State
const isFormatActive = ref({
    bold: false,
    italic: false,
    underline: false
})

const selectedFont = ref('Arial')
const selectedSize = ref('14')

const fontOptions = ref([
    { value: 'Arial', label: 'Arial' },
    { value: 'Times New Roman', label: 'Times New Roman' },
    { value: 'Helvetica', label: 'Helvetica' },
    { value: 'Georgia', label: 'Georgia' }
])

const sizeOptions = ref([
    { value: '12', label: '12px' },
    { value: '14', label: '14px' },
    { value: '16', label: '16px' },
    { value: '18', label: '18px' },
    { value: '20', label: '20px' }
])

// Data Table State
const selectedRows = ref([1, 3])
const searchQuery = ref('')
const filterStatus = ref('')

const statusOptions = ref([
    { value: 'active', label: 'Active' },
    { value: 'inactive', label: 'Inactive' },
    { value: 'pending', label: 'Pending' }
])

// Media Gallery State
const viewMode = ref('grid')
const sortBy = ref('name')
const sortOrder = ref('asc')
const selectedFiles = ref([2, 4, 7])

const sortOptions = ref([
    { value: 'name', label: 'Name' },
    { value: 'date', label: 'Date' },
    { value: 'size', label: 'Size' },
    { value: 'type', label: 'Type' }
])

// Methods
const fnSave = () => console.log('Save document')
const fnPrint = () => console.log('Print document')
const fnUndo = () => console.log('Undo action')
const fnRedo = () => console.log('Redo action')

const fnToggleFormat = (format: string) => {
    isFormatActive.value[format] = !isFormatActive.value[format]
    console.log('Toggle format:', format, isFormatActive.value[format])
}

const fnAddRecord = () => console.log('Add new record')
const fnEditRecords = () => console.log('Edit selected records:', selectedRows.value)
const fnDeleteRecords = () => console.log('Delete selected records:', selectedRows.value)
const fnExport = () => console.log('Export data')
const fnImport = () => console.log('Import data')
const fnRefresh = () => console.log('Refresh data')

const fnUpload = () => console.log('Upload files')
const fnCreateFolder = () => console.log('Create new folder')
const fnToggleSortOrder = () => {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
    console.log('Sort order:', sortOrder.value)
}
const fnDownloadSelected = () => console.log('Download selected files:', selectedFiles.value)
const fnDeleteSelected = () => console.log('Delete selected files:', selectedFiles.value)

const fnShare = () => console.log('Share document')
const fnDownload = () => console.log('Download document')
const fnShowMenu = () => console.log('Show more options menu')
</script>

pages._explore.sections.types.title

Name	Type	Options
ToolbarProps	interface	Main props interface for Toolbar component (currently empty)

pages._explore.sections.slots.title

Slot	Type
default	Toolbar content - typically buttons, inputs, and other controls