Tairo Panels

Tairo panels allow to display additional data and details in animated left or right drawers.

Usage

Create a panel component

To create a panel component, you only need to register close event. You can also define props to pass data to the panel or add custom data to close event to get back when opening the panel.

vue

<script setup lang="ts">
interface Project {
  name: string
}

// Props are optional, you will be able to pass them when opening the panel
const props = withDefaults(
  defineProps<{
    color?: 'default' | 'primary' | 'secondary'
    projects?: Project[]
  }>(),
  {
    color: 'default',
    projects: () => [],
  },
)

// Define close event, you will be able to get back the selected data from the panel
const emits = defineEmits<{
  close: [selected?: Project]
}>()
</script>

<template>
  <div>
    <BaseButton
      @click="() => emits('close', {
        selected: props.projects[0],
      })"
    >
      Select project
    </BaseButton>
    <BaseButton @click="() => emits('close')">
      Cancel
    </BaseButton>
  </div>
</template>

Open a panel

Once you have created your panel component, you can open it using the open function from the usePanels composable.

vue

<script setup lang="ts">
import { PanelComponent } from '#components'

const { open, close } = usePanels()

function onSomeEvent() {
  // open a panel and wait for close event
  const [selected] = await open(
    // component to open
    PanelComponent,
    // panel component props
    {
      color: 'secondary',
      projects: [
        { name: 'Project 1' },
        { name: 'Project 2' },
        { name: 'Project 3' },
        { name: 'Project 4' },
      ],
    },
    // panel options
    {
      position: 'left',
      size: 'md',
      overlay: true,
    }
  )

  console.log(selected)
}
</script>

Example

Language panel

Show code

vue

<script setup lang="ts">
import { DemoPanelLanguage } from '#components'

const { open } = usePanels()
</script>

<template>
  <div>
    <BaseButton @click="open(DemoPanelLanguage)">
      Open Panel
    </BaseButton>
  </div>
</template>

Activity panel

Show code

vue

<script setup lang="ts">
import { DemoPanelActivity } from '#components'

const { open } = usePanels()
</script>

<template>
  <div>
    <BaseButton @click="open(DemoPanelActivity, {}, { position: 'left', size: 'sm' })">
      Open Panel
    </BaseButton>
  </div>
</template>

Search panel

Show code

vue

<script setup lang="ts">
import { DemoPanelSearch } from '#components'

const { open } = usePanels()
</script>

<template>
  <div>
    <BaseButton @click="() => open(DemoPanelSearch)">
      Open Panel
    </BaseButton>
  </div>
</template>

Task panel

Show code

vue

<script setup lang="ts">
import { DemoPanelTask } from '#components'

const { open } = usePanels()

const task = {
  id: 0,
  name: 'Create a new figma design for the new homepage elements',
  description:
    'We should have a collection of the most basic UI elements like buttons, badges and form elements. Then we should use these to create reusable section blocks that we can also use in other pages of the project.',
  completion: 100,
  status: 5,
  created: '2 days ago',
  assignee: {
    id: 27,
    src: '/img/avatars/24.svg',
    badge: '/img/stacks/illustrator.svg',
    role: 'UI/UX Designer',
    bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.',
    tooltip: 'Carmen E.',
    text: 'CE',
  },
  files: [
    {
      id: 0,
      name: 'company-ux-guide.pdf',
      icon: '/img/icons/files/pdf.svg',
      size: '4.7MB',
      version: '1.5.2',
      uploaded: '2 weeks ago',
      author: {
        name: 'Hermann M.',
        picture: '/img/avatars/16.svg',
      },
    },
    {
      id: 1,
      name: 'project_sketches.ai',
      icon: '/img/icons/files/ai.svg',
      size: '8.9MB',
      version: '1.1.3',
      uploaded: 'a week ago',
      author: {
        name: 'Clarissa M.',
        picture: '/img/avatars/5.svg',
      },
    },
  ],
  checklist: [
    {
      text: 'Create a set of button elements',
      done: true,
    },
    {
      text: 'Create a set of badge elements',
      done: true,
    },
    {
      text: 'Create a set of input elements',
      done: true,
    },
    {
      text: 'Create a set of checkbox elements',
      done: true,
    },
    {
      text: 'Create a set of card elements',
      done: true,
    },
  ],
  comments: [
    {
      text: 'I think buttons corners should be a little more rounded.',
      author: {
        name: 'Marjory L.',
        picture: '/img/avatars/12.svg',
        posted: '2 days ago',
      },
    },
    {
      text: 'Are you planning to add this as a global setting in the configuration file?',
      author: {
        name: 'Kendra W.',
        picture: '/img/avatars/10.svg',
        posted: '2 days ago',
      },
    },
    {
      text: 'Not sure about it yet. Still need to check this out with the engineering team',
      author: {
        name: 'Marjory L.',
        picture: '/img/avatars/12.svg',
        posted: '2 days ago',
      },
    },
  ],
}
</script>

<template>
  <div>
    <BaseButton @click="open(DemoPanelTask, { task })">
      Open Panel
    </BaseButton>
  </div>
</template>