Advanced UI Components

Follow Vue3 Component Basics and Components in Depth guidelines as well as Vuetify Labs for new components.

In sections below see descriptions of component wrappers and usage examples for advanced UI components. The naming convention for new components will be v-bsb-*.

• Chart - Chart component based on ChartJs
• Editor - WYSIWYG editor, based on TipTap
• Form - Dynamic form builder
• Media - Audio and video recording and playback
• Map - Wrapper of Google Maps
• Pad - Drawing canvas, credits to vue-drawing-canvas
• Table - Responsive data table
• Share - Social sharing button set based on Vue Socials

Sandbox

Create sandbox item for each component. An example:

@/pages/sandbox/sandbox-chart.vue

<template>
  <v-bsb-chart
    bar
    clickable
    :chart-data="chartData1"
    :chart-options="chartOptions1"
    @elementClick="chartClick"
  />
  <v-bsb-chart pie :chart-data="chartData2" :chart-options="chartOptions2" />
</template>

<script setup lang="ts">
definePage({ meta: { role: 'restricted' } })
const chartData1 = ref({
  datasets: [
    {
      label: 'Bar Dataset -1',
      data: [10, 20, 30, 40],
    },
    {
      label: 'Bar Dataset -2',
      data: [10, 15, 30, 35],
    },
    {
      label: 'Line Dataset',
      data: [10, 30, 10, 20],
      type: 'line',
    },
  ],
  labels: ['January', 'February', 'March', 'April'],
})
const chartOptions1 = ref({
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
})

function chartClick(order: number, index: number, value: number) {
  console.log('Clicked data: ', order, index, value)
  // Do something with the clicked data
}

const chartData2 = ref({
  labels: ['A', 'B', 'C', 'D'],
  datasets: [
    {
      label: 'Pie data',
      type: 'doughnut',
      data: [10, 20, 30, 40],
      backgroundColor: ['#0123456', '#234567', '#345678', '#456789'],
    },
  ],
})

const chartOptions2 = ref({})
</script>

Add links in Sandbox page

@/pages/sandbox/index.vue

<template>
  <!-- ... -->
  <v-container fluid>
    <h1 class="mb-4">Components</h1>
    <v-row>
      <v-col cols="12" md="6" lg="4" v-for="comp in compontents" :key="comp.to">
        <v-card :to="comp.to">
          <v-card-title><v-icon :icon="comp.icon" />{{ comp.text }}</v-card-title>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
// ...
const compontents = ref([
  { icon: '$mdiChartLine', to: '/sandbox/sandbox-chart', text: 'Chart' },
  // ...
])
</script>