Skip to content

Components

Components

All components in @perido/vue-components are documented here. Each page includes supported props, events, and slots. Components are Vue 2 SFCs and expect the Perido Tailwind preset.

Common usage patterns

<template>
  <PForm @valid="isValid = $event">
    <PText v-model="form.name" required>Name</PText>
    <PEmail v-model="form.email" required>Email</PEmail>
    <PSelect v-model="form.role" :items="roles">Role</PSelect>
    <PTextarea v-model="form.notes" help-text="Optional details">
      Notes
    </PTextarea>
    <div class="mt-4 flex gap-2">
      <PButton :validate-form="true">Submit</PButton>
      <PButton purpose="tertiary" @click="reset">Cancel</PButton>
    </div>
  </PForm>
</template>

<PTable
  :columns="columns"
  :data="rows"
  :counts="[10, 25, 50]"
  :count="10"
  :pages="pages"
  :current-page="page"
  :total="total"
  @change="handleTableChange"
/>

<PModal @close="showModal = false">
  <template #header>Confirm update</template>
  <template #body>We will apply the new settings immediately.</template>
  <template #footer>
    <PButton purpose="tertiary" @click="showModal = false">Close</PButton>
    <PButton type="success" @click="apply">Apply</PButton>
  </template>
</PModal>

Form inputs

Feedback & overlays

Data display