Skip to content

Latest commit

 

History

History
193 lines (183 loc) · 3.48 KB

docs.md

File metadata and controls

193 lines (183 loc) · 3.48 KB

PvAlert

<PvAlert type="String"></PvAlert>

Alert is hidden when empty and shows when not empty

Attributes

Type

  • success (green)
  • info (blue)
  • warning (yellow)
  • danger (red)

PvDarkMode

<PvDarkMode persist="Switch"/>

PvDropdown

<PvDropdown
  v-model="Mixed"
  items="Array<String|Object>"
>
</PvDropdown>

Slots

Default label when unselected is Select one. Default value when selected is the selected value as is. You can override the

<PvDropdown>
  Select a thing!
  <template #selected="selected">{{ selected }}</template>
</PvDropdown>

Attributes

Items

const items = [
  'foo',
  'bar'
  { text: 'foo', value: 'bar' },
  { text: 'link text', href: 'https://link.to/something' },
]

PvModal

<PvModal
  v-model="Boolean"
  hide-close="Switch"
>
  ...
</PvModal>

Slots

<template #heading>
  <b>My Modal</b>
</template>

Controls

const toggle = ref(false)

toggle.value = true // open modal
toggle.value = false // close modal

PvMultiSelect

<PvMultiSelect
  v-model="Mixed"
  items="Array<String|Object>"
>
</PvMultiSelect>

Slots

Default label when no values are selected is Select one or more. Default value when selected is the selected values as is. You can override the formatting using the selected slot.

<PvMultiSelect v-model="selectedItems">
  Select some things!
  <template #selected>
    {{ selectedItems.join(', ') }}
  </template>
</PvMultiSelect>

Attributes

Items

const items = [
  'foo',
  'bar'
  { text: 'foo', value: 'bar' }
]

PvTable

<PvTable
  items="Array<Object>",
  fields="Array<Object|String>"
  filter="Switch"
  filter-opts="Object"
  sort="Switch"
  bordered="Switch"
  striped="Switch"
  busy="Switch"
/>

Attributes

Fields

const fields = [
  'property',
  { name: 'property', label: 'Foobar' },
  { name: 'property', align: 'left|center|right' },
]

Filter Options

Provide auto-suggest to the filter input fields by setting the datalist option:

const filterOpts = {
  datalist: {
    fieldName: ['value 1', 'value 2',]
  }
}

Slots

<template #property="{property,anotherProperty}">
  {{ property }} {{ anotherProperty }}
</template>

NOTE: If a property is in camelCase, the template name must use kebab-case to match properly

<template #some-prop="{someProp}">
  {{ someProp }}
</template>

PvTabs

<PvTabs persist="Switch">
  <PvTab title="String">
    ...
  </PvTab>
</PvTabs>

PvTags

<PvTags v-model="value"></PvTags>

PvToaster

<PvToaster
  id="String"
  position="String"
/>

Attributes

Position

  • top-left
  • top-center
  • top-right
  • bottom-left
  • bottom-center
  • bottom-right

Methods

appendToast

import { appendToast } from 'PvToaster.vue'
// or
const appendToast = inject('appendToast')
// or
const { appendToast } = PicoVue
// or
PicoVue.appendToast()

Constructor

appendToast(body: String, { type: String, stay: Boolean, dismissAfter: Number, id: String }: ?Object)

Options:

  • type: Default none (gray)
    • success (green)
    • info (blue)
    • warning (yellow)
    • danger (red)
  • id: Default pv-toaster
  • stay: Default false
  • dismissAfter: Default 5 seconds