A reusable Vue 3 component library built and maintained by [AppsBD](https://appsbd.com), designed to simplify UI development with clean, modular, and customizable components.

---

## 📦 Installation

```bash
npm install @appsbd/vue3-appsbd-libs
# or
yarn add @appsbd/vue3-appsbd-libs
```

---

## 🔧 Usage

Register the plugin globally in your Vue app:

```js
// main.js or main.ts
import { createApp } from 'vue';
import App from './App.vue';
import AppsbdLibs from '@appsbd/vue3-appsbd-libs';

const app = createApp(App);
app.use(AppsbdLibs);
app.mount('#app');
```

Or import only what you need:

```js
import { Modal, ApbdDatePicker } from '@appsbd/vue3-appsbd-libs';
```

---

## 🧩 Available Components

| Component Name       | Description                                             |
| -------------------- |---------------------------------------------------------|
| `AndOrDivider`       | A logical divider between conditions (AND/OR).          |
| `ApbdAccordion`      | Accordion container for collapsible content.            |
| `ApbdAccordionItem`  | Individual item within an accordion.                    |
| `ApbdCheckBox`       | Custom styled checkbox input.                           |
| `ApbdConfirmPopover` | Confirmation popover for critical actions.              |
| `ApbdDatePicker`     | Date selector with custom styling.                      |
| `ApbdDropdown`       | Dropdown selector component.                            |
| `ApbdFilterPanel`    | Managing data filters in tables, lists, or grids.       |
| `ApbdRadioButton`    | Styled radio button input.                              |
| `ApbdSwitchButton`   | Toggle switch component.                                |
| `AppLoader`          | Central loading spinner/indicator.                      |
| `AppSkinColorPicker` | Allows users to select a skin/theme color.              |
| `CustomFields`       | Dynamic custom form fields (useful for settings forms). |
| `DateSVG`            | SVG icon/component related to date UI.                  |
| `FileUploader`       | File upload UI with preview/support.                    |
| `ImageRadioInput`    | Radio-style image selection input.                      |
| `ImageSelector`      | Select, preview, upload images.                         |
| `InputField`         | Flexible input for text, password, URL.                 |
| `Modal`              | Reusable modal/dialog box.                              |
| `QuestionSVG`        | SVG icon/component for help or tooltips.                |
| `ResponseMsg`        | Shows success/error/info messages in a unified style.   |
| `SettingsForm`       | Structured form for settings/configurations.            |

---

## 📘 Example

```vue
<template>
  <div>
    <InputField v-model="name" label="Your Name" />
    <ApbdDatePicker v-model="date" />
    <ApbdSwitchButton v-model="isActive" label="Active?" />
    <Modal v-if="showModal" @close="showModal = false">
      <p>Modal content goes here...</p>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  InputField,
  ApbdDatePicker,
  ApbdSwitchButton,
  Modal
} from '@appsbd/vue3-appsbd-libs';

const name = ref('');
const date = ref(null);
const isActive = ref(false);
const showModal = ref(true);
</script>
```

---

## ✅ Requirements

* Vue 3.x
* Vite or Vue CLI compatible
* Bootstrap 5+

---

## 🔮 Roadmap

* [x] Stable base UI components
* [ ] Add documentation site with live examples
* [ ] Add accessibility support (a11y)
* [ ] Add testing coverage (unit + visual)

---

## 📬 Contact

For support, custom components, or commercial usage:
**Email**: [hello@appsbd.com](mailto:hello@appsbd.com)
**Website**: [https://appsbd.com](https://appsbd.com)