@prebid/ui-components

A collection of reusable Vue 3 UI components and styling extracted from the Prebid Reporting application. Built with Tailwind CSS for modern, responsive design.

Installation

npm install @prebid/ui-components

Usage

Global Installation (Recommended)

import { createApp } from 'vue'
import PrebidUIComponents from '@prebid/ui-components'
import '@prebid/ui-components/styles'

const app = createApp(App)
app.use(PrebidUIComponents)
app.mount('#app')

Individual Component Import

import { SearchableSelect, Button, Modal } from '@prebid/ui-components'
import '@prebid/ui-components/styles'

export default {
  components: {
    SearchableSelect,
    Button,
    Modal
  }
}

Styling Only

If you only want to use the styling:

import '@prebid/ui-components/styles'

Components

SearchableSelect

A dropdown component with search functionality and keyboard navigation.

<template>
  <SearchableSelect 
    v-model="selectedValue"
    :options="options"
    placeholder="Choose an option"
    :show-all-option="true"
    all-option-text="All Items"
  />
</template>

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

const selectedValue = ref('')
const options = ref([
  { id: 1, name: 'Option 1' },
  { id: 2, name: 'Option 2' },
  { id: 3, name: 'Option 3' }
])
</script>

Modal

A flexible modal component with customizable size and behavior.

<template>
  <Modal 
    v-model:is-open="showModal"
    title="My Modal"
    size="lg"
    :close-on-backdrop="true"
  >
    <p>Modal content goes here</p>
    
    <template #footer>
      <Button @click="showModal = false">Close</Button>
    </template>
  </Modal>
</template>

Button

A versatile button component with multiple variants and states.

<template>
  <Button 
    variant="primary"
    size="md"
    :loading="isLoading"
    :disabled="isDisabled"
    @click="handleClick"
  >
    Click Me
  </Button>
</template>

FormField

An input field component with validation and helper text support.

<template>
  <FormField
    v-model="username"
    label="Username"
    type="text"
    placeholder="Enter your username"
    :required="true"
    :error="usernameError"
    helper-text="Username must be at least 3 characters"
  />
</template>

LoadingSpinner

A customizable loading spinner component.

<template>
  <LoadingSpinner 
    size="lg"
    color="blue"
    text="Loading..."
    :centered="true"
  />
</template>

Card

A card container component with header and footer slots.

<template>
  <Card title="Card Title" variant="elevated" hoverable>
    <p>Card content</p>
    
    <template #footer>
      <Button size="sm">Action</Button>
    </template>
  </Card>
</template>

Tailwind CSS Integration

This package includes a Tailwind CSS configuration that you can extend in your project:

// tailwind.config.js
const prebidConfig = require('@prebid/ui-components/tailwind.config')

module.exports = {
  ...prebidConfig,
  content: [
    ...prebidConfig.content,
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      ...prebidConfig.theme.extend,
      // Your custom extensions
    }
  }
}

Component Props

SearchableSelect Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | String/Number | '' | Selected value | | options | Array | [] | Array of {id, name} objects | | placeholder | String | 'Select an option' | Placeholder text | | showAllOption | Boolean | true | Show "All" option | | allOptionText | String | 'All' | Text for "All" option | | maxHeight | String | null | Maximum dropdown height |

Modal Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | Boolean | false | Modal visibility | | title | String | '' | Modal title | | size | String | 'md' | Modal size (sm, md, lg, xl, full) | | showHeader | Boolean | true | Show header section | | showCloseButton | Boolean | true | Show close button | | closeOnBackdrop | Boolean | true | Close on backdrop click |

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | String | 'primary' | Button style variant | | size | String | 'md' | Button size (sm, md, lg) | | type | String | 'button' | HTML button type | | disabled | Boolean | false | Disabled state | | loading | Boolean | false | Loading state | | text | String | '' | Button text | | loadingText | String | '' | Text during loading | | fullWidth | Boolean | false | Full width button |

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch for changes
npm run dev

# Generate types
npm run build:types

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request