Usage

Learn how to effectively use PayAdvantage UI Components in your Vue 3 applications.

Basic Component Usage

All PayAdvantage components follow a consistent naming convention with the pa- prefix:

<template>
  <div>
    <!-- Basic button -->
    <pa-button>Default Button</pa-button>
    
    <!-- Button with variant -->
    <pa-button variant="primary">Primary Button</pa-button>
    
    <!-- Input field -->
    <pa-input 
      v-model="inputValue" 
      label="Your Name" 
      placeholder="Enter your name"
    />
    
    <!-- Checkbox -->
    <pa-checkbox v-model="isChecked" label="I agree to terms" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const isChecked = ref(false)
</script>

Props and Events

Components support standard Vue props and emit events for interaction:

<template>
  <pa-button 
    variant="primary"
    size="large"
    :disabled="isLoading"
    @click="handleClick"
  >
    {{ isLoading ? 'Loading...' : 'Submit' }}
  </pa-button>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(false)

const handleClick = async () => {
  isLoading.value = true
  // Perform async operation
  await new Promise(resolve => setTimeout(resolve, 2000))
  isLoading.value = false
}
</script>

Form Components

Form components integrate seamlessly with Vue's reactivity system:

<template>
  <form @submit.prevent="handleSubmit">
    <pa-input 
      v-model="form.email"
      label="Email"
      type="email"
      required
    />
    
    <pa-input 
      v-model="form.password"
      label="Password"
      type="password"
      required
    />
    
    <pa-checkbox 
      v-model="form.rememberMe"
      label="Remember me"
    />
    
    <pa-button type="submit" variant="primary">
      Sign In
    </pa-button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
})

const handleSubmit = () => {
  console.log('Form submitted:', form)
}
</script>

Styling and Variants

Most components support different variants and sizes:

<template>
  <div>
    <!-- Button variants -->
    <pa-button variant="primary">Primary</pa-button>
    <pa-button variant="secondary">Secondary</pa-button>
    <pa-button variant="success">Success</pa-button>
    <pa-button variant="danger">Danger</pa-button>
    
    <!-- Button sizes -->
    <pa-button size="small">Small</pa-button>
    <pa-button size="medium">Medium</pa-button>
    <pa-button size="large">Large</pa-button>
  </div>
</template>

Component Composition

Components can be composed together to create complex UI patterns:

<template>
  <pa-container>
    <pa-hero title="Welcome" subtitle="Get started with our platform" />
    
    <pa-form @submit="handleSubmit">
      <pa-input v-model="name" label="Full Name" />
      <pa-input v-model="email" label="Email" type="email" />
      
      <pa-button-group>
        <pa-button type="submit" variant="primary">Submit</pa-button>
        <pa-button type="button" @click="reset">Reset</pa-button>
      </pa-button-group>
    </pa-form>
  </pa-container>
</template>

Next Steps

• Explore individual component documentation
• Check out our Getting Started Guide for project setup