# How to use the components

# Button

A button component has three attributess: size, type and purpose. The text of the button label is uppercase by default.

# Example

Code snippet of a button with size sm, type info, purpose secondary:

<pq-button 
    type="info" 
    size="sm" 
    purpose="secondary"
>
    info
</pq-button>

All the different combination of size, purpose and type can be seen here

# Attributes of pq-button

# Size

The size attribute takes a string and lets you specify size of the button.

Size defaults to md if no prop is given

There are four sizes to choose from:

• xs
• sm
• md
• lg

# Type

The type attribute takes a string, and lets you specify the color of the button and what type the button is, for instance, a button that deletes something should use the type danger.

Type defaults to main if no prop is given.

There are six types to choose from:

• main
• complementary,
• success
• danger
• warning
• info

# Purpose

The purpose attribute takes a string and lets you specify the purpose of the button.

Purpose defaults to primary if no prop is given

There are three purposes to choose from:

• primary
• secondary
• tertiary

# Modal

pq-modal has one attribute type which specifies the color and type of modal.

A modal component is a window that appears in front of the app. The modal window will disable all other app functionality when they appear and will remain on screen until dismissed or required action has been taken.

To dismiss the modal window either use the close button or click outside the modal body.

# Example

<pq-button type="info" @click="showModal = true">info modal</pq-button>
<pq-modal
    type="info"
    v-if="showModal"
    @close="showModal = false"
>
    <template v-slot:header>Info modal example</template>
    <template v-slot:body>
        Some very very important info, very usefull!
    </template>
</pq-modal>

# Attributes of pq-modal

The modal compnent has a one attribute: type.

#

# Type

Type defaults to main if no prop is given.

The type attribute takes a string, and specifies the accent color of the header. There are six types to choose from:

• main
• complementary,
• success
• danger
• warning
• info

# Slots for pq-modal

A modal component takes three slots header, body, footer.

• header slot is used for titles. The text is uppercase by default.

• body slot is used to contain the text or functionality of the modal.

• footer slot is used to pass in extra buttons.

# Toast

A toast appears temporarily and shouldn't interrupt the user experience, they dont require user input to dissappear.

# Attributes of pq-toast

# Message

Message takes a string and displays the text on the toast

# Type

Type defaults to info if no attribute is given.

There are six types to choose from:

• info
• main
• complementary
• success
• danger
• warning

# Switch

A switch toggles the state of a single setting on or off. A switch is successfully toggled when the user clicks the text label or clicks on the switch.

# Example

An example on hot to create a switch

<pq-switch
    v-model="showCol.test"
    class="w-1/4"
>
    toggle
</pq-switch>

# Confirm

The Confirm component gives the user a choice to confirm or cancel an action.

A Confirm component is a modal with a required title, optional message(body) and a footer with two buttons, "ja"/"nej". The buttons emits an event 'result' and a boolean value.

# Attributes of pq-confirm

The confirm component has two attributes:

# Attribute: title

The title attribute is a string and is required. Use a clear question or statement with an explanation in the message area, such as title="Remove candidate?"

# Attribute: message

The message attribute is a string and defaults to an empty string if none is provided

# Example

<div>
    <pq-button @click="showConfirm = true">confirm</pq-button>
    <pq-confirm 
        v-if="showConfirm" 
        @result="onResult" 
        title = "Maybe a yes/no question as title" 
        message = "Possibly a small explenation of the consequences of action"
    />
</div>

# Alert

Alert component is a modal and provides information that requires a specific user acknowledgement.

# Attributes of pq-alert

The confirm component has two attributes:

# Attribute: title

The title attribute is a string and is required. Use a clear statement with an explanation in the message area.

# Attribute: message

The message attribute is a string and defaults to an empty string if none is provided. Message should contain a brief, clear statement.

# Example

<div>
    <pq-button @click="showAlert = true">Alert</pq-button>
    <pq-alert 
        v-if="showAlert" 
        @close="showAlert = false" 
        title= "Alert!" 
        message ="Nu har du gjort en grej"
    />
</div>

# Table

A table component

# Attributes of pq-table

Attributes of table component:

# Example

# Card

Cards are surfaces that display content and actions on a topic

They should be easy to scan for relevant and actionable information.

# Attributes of pq-card

The card compnent has a one attribute: type.

# Attribute: type

The type attribute takes a string, and lets you specify what type of card it is with different coloured headers, the type attribute defaults to main. There are six types to choose from:

• main
• complementary,
• success
• danger
• warning
• info

# Slots for card

A card component takes three slots header, body, footer.

• header slot is a named slot and is used for titles with bold text applied automatically

• body slot is used to contain the text or functionality of the card

• footer slot is a named slot and is mainly used to pass in buttons. The footer uses the justify-end property.

# Example

<div>
    <pq-card
        class="w-full"
        type="complementary"
    >  
    <template v-slot:header>
        An example card
    </template>
    <div>
        Content, text, functionality etc...
    </div>
    <template v-slot:footer>
        <pq-button
            type="danger"
        >
            A button
        </pq-button>
    </template>
    </pq-card>
</div>