# Vue Input Components

A collection of reusable Vue 3 input components with consistent styling and behavior.

## Documentation

For detailed documentation, please visit our [documentation site](docs/index.md).

## Features

- 🚀 Built with Vue 3 and TypeScript
- 🎨 Customizable styling with CSS variables
- 📦 Tree-shakeable components
- 🎯 Fully typed with TypeScript
- 🎨 Beautiful and consistent design
- 🔍 Accessible by default
- 📱 Responsive and mobile-friendly

## Components

### [Text Input](docs/components/TextInput.md)

A versatile text input component that supports icons, validation, and custom styling.

### [File Upload](docs/components/FileUpload.md)

A file upload component with drag and drop support, file validation, and preview capabilities.

### [Action](docs/components/Action.md)

A flexible action component that can be used as a button, link, or icon button with various styles.

### [Navigation](docs/components/Navigation.md)

A navigation component with multiple styles, icons support, and responsive design.

### [Dropdown](docs/components/Dropdown.md)

A dropdown component that supports single/multiple selection, filtering, and custom styling.

### [Checkbox](docs/components/Checkbox.md)

A checkbox component with support for single/multiple selection and various presentation modes.

### [List](docs/components/List.md)

A flexible and customizable list component that supports sorting, filtering, header tooltips, fixed rows, and different presentation styles.

## Quick Installation

```bash
npm install @a-vision/vue-input-components --registry=https://npm.pkg.github.com
```

### Declare global types

Add the global types to your `tsconfig.app.json`

```
{
  ...
 "compilerOptions": {
    ...
    "types": ["@a-vision/vue-input-components/global"],
  }
}
```

## Quick Start

```vue
<template>
  <TextInput v-model="text" placeholder="Enter text" icon="user" />
  <FileUpload v-model="files" accept="image/*" />
  <Action type="button" label="Click me" icon="check" />
  <Navigation :items="navigationItems" type="tiles" />
  <Dropdown v-model="selected" :options="options" />
  <Checkbox v-model="selected" :options="options" />
</template>

<script setup lang="ts">
import {
  TextInput,
  FileUpload,
  Action,
  Navigation,
  Dropdown,
  Checkbox,
} from '@a-vision/vue-input-components'
</script>
```

## Publish To GitHub Packages

```bash
# 1) Authenticate with a token that has write:packages (and repo if needed)
export NODE_AUTH_TOKEN=YOUR_GITHUB_TOKEN

# 2) Build the package
npm run build

# 3) Publish to GitHub Packages
npm run publish:github
```

The package is published to `https://npm.pkg.github.com` under the `@a-vision` scope.

## Styling

All components support custom styling through CSS variables and props:

```css
:root {
  --primary: #4a90e2;
  --text-primary: rgba(0, 0, 0, 0.8);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-disabled: rgba(0, 0, 0, 0.4);
}
```

## Development

### Setup

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test
```

## License

MIT