@appsbd/vue3-appsbd-ui 1.0.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@appsbd/vue3-appsbd-ui",
+  "version": "1.0.0",
+  "description": "Reusable Vue 3 component library",
+  "type": "module",
+  "main": "./dist/vue3-appsbd-ui.cjs.js",
+  "module": "./dist/vue3-appsbd-ui.es.js",
+  "style": "./dist/style.css",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/vue3-appsbd-ui.es.js",
+      "require": "./dist/vue3-appsbd-ui.cjs.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "readme.md",
+    "AI_REFERENCE.md",
+    ".ai"
+  ],
+  "scripts": {
+    "up": "npm run build && npm publish",
+    "dev": "vite --mode playground",
+    "lib": "vite",
+    "build": "vite build",
+    "build:playground": "vite build --mode playground",
+    "build:skins": "vite build --mode skins"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "component-library",
+    "vite"
+  ],
+  "author": "appsbd",
+  "license": "MIT",
+  "peerDependencies": {
+    "@appsbd/vue3-elite-grid": ">=2.0.4",
+    "@vee-validate/rules": ">=4.15.1",
+    "bootstrap": ">=5.3.7",
+    "lucide-vue-next": ">=0.575.0",
+    "vee-validate": ">=4.15.1",
+    "vue": ">=3.3.0",
+    "vue-router": ">=4.5.0",
+    "vue3-gettext": ">=2.4.0",
+    "tiny-emitter": ">=2.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "bootstrap": "^5.3.0",
+    "sass-embedded": "^1.97.3",
+    "vite": "^5.0.0",
+    "highlight.js": "^11.11.1"
+  },
+  "dependencies": {}
+}

package/readme.md

@@ -0,0 +1,136 @@
+# Vue 3 Appsbd UI Library
+
+A premium, reusable Vue 3 component library built for high-performance enterprise applications. Leverages **Vite**, **SCSS**, and **Bootstrap 5** to provide a rich set of UI components with built-in Dark Mode and RTL support.
+
+## 🚀 Key Features
+
+- **Vue 3 Composition API**: Optimized for performance and flexibility.
+- **Dynamic Theming**: Full dark mode support using Bootstrap's `data-bs-theme`.
+- **RTL Ready**: Built with CSS logical properties for global accessibility.
+- **Plugin System**: custom-built global systems for Toasts and Alerts.
+- **Enterprise Ready**: Includes complex components like MultiSelect, DatePicker, Wizard, Pricing Tables, and Filter Panels.
+- **Themable Skins**: 10 prebuilt color skins (default, green, red, cyan, purple, violet, pink, orange, gray, black) shipped as standalone CSS under `dist/skins/`.
+
+## 📦 Installation
+
+```bash
+npm install @appsbd/vue3-appsbd-ui
+```
+
+### Peer Dependencies
+
+Ensure you have the following installed in your project:
+
+```bash
+npm install bootstrap bootstrap-icons vee-validate @vee-validate/rules vue-router vue3-gettext lucide-vue-next tiny-emitter @appsbd/vue3-elite-grid
+```
+
+## 🤖 AI Assistant Integration
+
+If you are generating code in a project that consumes this library, provide your AI with the `AI_REFERENCE.md` file for immediate context on component existence, prop signatures, and usage patterns.
+
+## 🛠️ Setup
+
+Register the library and its styles in your main entry file (e.g., `main.js`):
+
+```javascript
+import { createApp } from "vue";
+import AppsbdUI from "@appsbd/vue3-appsbd-ui";
+import "@appsbd/vue3-appsbd-ui/style.css";
+
+const app = createApp(App);
+app.use(AppsbdUI);
+app.mount("#app");
+```
+
+### Applying a Theme Skin (optional)
+
+```javascript
+// Default skin
+import "@appsbd/vue3-appsbd-ui/dist/skins/default.css";
+
+// Or any other prebuilt skin
+import "@appsbd/vue3-appsbd-ui/dist/skins/purple.css";
+```
+
+## 🧩 Core Components & Composables
+
+### Toast Notifications
+
+The library includes a robust custom toast system with pause-on-hover and pause-on-focus-loss features.
+
+```javascript
+import { useToast } from "@appsbd/vue3-appsbd-ui";
+const { toast } = useToast();
+
+toast.success("Changes saved!", { timeout: 3000 });
+toast.error("An error occurred", { position: "top-center" });
+```
+
+### Global Alerts
+
+Integrated SweetAlert2 system focused on aesthetic consistency.
+
+```javascript
+import { useAlert } from "@appsbd/vue3-appsbd-ui";
+const { alert } = useAlert();
+
+alert.success("Success!", "Your profile has been updated.");
+```
+
+### Theme Management
+
+Easily toggle between light and dark modes.
+
+```javascript
+import { useTheme } from "@appsbd/vue3-appsbd-ui";
+const { isDark, toggleTheme } = useTheme();
+```
+
+## 📚 Component Reference
+
+| Component                                                 | Description                                                                                       |
+| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `AbAvatar`                                                | Profile imagery with status indicators and size variants.                                         |
+| `AbBadge`                                                 | Labeling component for status and counts.                                                         |
+| `AbButton`                                                | Highly customizable button with loading states.                                                   |
+| `AbCard`                                                  | Flexible container for grouped content (supports tile / item / insight variants via CSS classes). |
+| `AbCarousel`                                              | Responsive carousel / slider.                                                                     |
+| `AbColorPicker`                                           | Visual color selection interface.                                                                 |
+| `AbConfirmPopover`                                        | Multi-step interactive popover for confirmations and async flows.                                 |
+| `AbCustomField`                                           | Base wrapper for creating custom form inputs.                                                     |
+| `AbDarkModeToggler`                                       | One-click light/dark theme toggle.                                                                |
+| `AbDateTimePicker`                                        | Full-featured date and time selection (powered by v-calendar).                                    |
+| `AbDropdown`                                              | Custom styled dropdown menus.                                                                     |
+| `AbEasyModal`                                             | Lightweight modal for simple dialogs.                                                             |
+| `AbField`                                                 | Generic form field wrapper with label / help / error slots.                                       |
+| `AbFileUploader`                                          | Drag-and-drop file upload interface.                                                              |
+| `AbFilterPanel`                                           | Comprehensive filtering UI for data-heavy views.                                                  |
+| `AbFormCheck` / `AbRadioInput`                            | Standardized checkbox / radio controls.                                                           |
+| `AbImageRadioInput`                                       | Radio group rendered as selectable image tiles.                                                   |
+| `AbInputField`                                            | High-quality text input with validation/feedback.                                                 |
+| `AbInputTag`                                              | Tagging / multiple-value input field.                                                             |
+| `AbKbd` / `AbKbdGroup`                                    | Keyboard shortcut display primitives.                                                             |
+| `AbModal`                                                 | Sophisticated dialog system with transitions.                                                     |
+| `AbMultiSelect`                                           | Advanced searchable multi-selection dropdown (built-in, replaces `@vueform/multiselect`).         |
+| `AbNavLink`                                               | Navigation link for sidebars and menus.                                                           |
+| `AbNumberField`                                           | Numeric input with step controls.                                                                 |
+| `AbPinInput`                                              | Segmented OTP / PIN entry input.                                                                  |
+| `AbPopover`                                               | Floating popover powered by floating-vue.                                                         |
+| `AbPricingCard` / `AbPricingContainer` / `AbPricingTable` | Composable pricing-plan building blocks.                                                          |
+| `AbProgressbar`                                           | Smooth, animated progress tracking.                                                               |
+| `AbScrollbar`                                             | Styled custom scroll container.                                                                   |
+| `AbSettingsForm`                                          | Opinionated settings / preferences form layout.                                                   |
+| `AbSidebar` / `AbSideMenuItem`                            | Dynamic sidebar navigation components.                                                            |
+| `AbSkeleton`                                              | Loading-state skeleton placeholders.                                                              |
+| `AbSlider`                                                | Range selection slider for numerical values.                                                      |
+| `AbTable`                                                 | Data table with the project's default styling.                                                    |
+| `AbTabs` / `AbTab`                                        | Responsive tabbed interface.                                                                      |
+| `AbToast`                                                 | High-performance notification system.                                                             |
+| `AbToggle`                                                | Accessible switch/toggle component.                                                               |
+| `AbTooltip`                                               | Floating tooltip powered by floating-vue.                                                         |
+| `AbWizard` / `AbWizardStep`                               | Multi-step wizard flow.                                                                           |
+
+## 📄 License
+
+MIT