diff --git a/.agent/skills/frontend_design/SKILL.md b/.agent/skills/frontend_design/SKILL.md index dc0317a..58b1cb5 100644 --- a/.agent/skills/frontend_design/SKILL.md +++ b/.agent/skills/frontend_design/SKILL.md @@ -23,8 +23,8 @@ All standard UI elements must come from the internal component library. ```typescript // Import path -import { Card, Button, Icon } from '@codebridger/lib-vue-components/elements.ts'; -import { Modal } from '@codebridger/lib-vue-components/complex.ts'; +import { Card, Button, Icon } from 'pilotui/elements'; +import { Modal } from 'pilotui/complex'; ``` ### Key Components diff --git a/.agent/skills/frontend_design/lib-vue-components.md b/.agent/skills/frontend_design/lib-vue-components.md index 85b4767..e1cc367 100644 --- a/.agent/skills/frontend_design/lib-vue-components.md +++ b/.agent/skills/frontend_design/lib-vue-components.md @@ -1,52 +1,98 @@ -# Lib Vue Components Documentation +# PilotUI - LLM Documentation -Generated on: 2025-11-16T14:05:12.514Z +> Generated on: 4/11/2026, 2:42:59 PM + +## 🤖 LLM Instructions +This document is optimized for Large Language Models. It contains the complete documentation for **PilotUI**, a Vue 3 component library. + +### How to use this doc: +- **Component Search**: Use the Table of Contents below to find specific components. +- **Code Examples**: All component examples are provided in fenced code blocks with language identifiers. +- **Prop Tables**: Component properties, events, and slots are documented in Markdown tables. +- **Implementation**: When asked to implement a UI, refer to the available components and their usage patterns described here. + +--- + +## 📋 Table of Contents + +### Getting Started +- [Installation](#getting-started-installation) + +### Getting Started How To +- [Use](#getting-started-how-to-use) + +### Getting Started Global +- [Configuration](#getting-started-global-configuration) + +### Shell +- [Approot](#shell-approot) +- [Dashboardshell](#shell-dashboardshell) +- [Horizontalmenu](#shell-horizontalmenu) +- [Sidebarmenu](#shell-sidebarmenu) + +### Icons Alternative Icon +- [Packs](#icons-alternative-icon-packs) + +### Icons Icon +- [Gallery](#icons-icon-gallery) + +### Utilities +- [Toast](#utilities-toast) + +### Complex +- [Modal](#complex-modal) +- [Pagination](#complex-pagination) + +### Elements +- [Avatar](#elements-avatar) +- [Avatargroup](#elements-avatargroup) +- [Button](#elements-button) +- [Card](#elements-card) +- [Dropdown](#elements-dropdown) +- [Iconbutton](#elements-iconbutton) +- [Progress](#elements-progress) +- [Tabs](#elements-tabs) +- [Tooltip](#elements-tooltip) + +### Form +- [Checkboxinput](#form-checkboxinput) +- [Fileinputbutton](#form-fileinputbutton) +- [Fileinputcombo](#form-fileinputcombo) +- [Input](#form-input) +- [Inputgroup](#form-inputgroup) +- [Select](#form-select) +- [Switchball](#form-switchball) +- [Textarea](#form-textarea) --- + ## Getting Started / Installation +**Source URL**: http://localhost:6006/?path=/docs/getting-started-installation--docs + ### Installation Guide #### Prerequisites - A working Vue 3 or Nuxt 3 project -- GitHub account with package access - Node.js and npm/yarn installed #### Setup Steps -##### 1\. GitHub Authentication - -1. Create a GitHub personal access token: - - - Go to GitHub Settings → Developer Settings → Personal Access Tokens - - Generate a new token with `read:packages` permission - - Copy the generated token - - For detailed instructions, watch this guide -2. Create an `.npmrc` file in your project root: - - ``` - @codebridger:registry=https://npm.pkg.github.com - //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN - ``` - - Replace `YOUR_GITHUB_TOKEN` with the token you created. - - -##### 2\. Package Installation +##### 1\. Package Installation Install the package using npm or yarn: ``` # Using npm -npm install @codebridger/lib-vue-components +npm install pilotui # Using yarn -yarn add @codebridger/lib-vue-components +yarn add pilotui # install from dev branch -yarn add @codebridger/lib-vue-components@dev +yarn add pilotui@dev ``` ##### 3\. Integration @@ -55,8 +101,8 @@ yarn add @codebridger/lib-vue-components@dev ``` // Import components and Styles -import vueComponents from "@codebridger/lib-vue-components"; -import '@codebridger/lib-vue-components/style.css'; +import vueComponents from "pilotui"; +import 'pilotui/style.css'; // Configuration options const options = { @@ -78,10 +124,10 @@ vueApp.use(vueComponents, options); 1. Create a plugin file `plugins/component-library.client.ts`: ``` -import { defineNuxtPlugin as init } from '@codebridger/lib-vue-components/nuxt'; +import { defineNuxtPlugin as init } from 'pilotui/nuxt'; export default defineNuxtPlugin({ - name: '@codebridger/lib-vue-components', + name: 'pilotui', enforce: 'pre', async setup(nuxtApp) { const options = { @@ -102,12 +148,12 @@ export default defineNuxtPlugin({ export default defineNuxtConfig({ // Ensure components are transpiled during build build: { - transpile: ['@codebridger/lib-vue-components'], + transpile: ['pilotui'], }, css: [ // ... other CSS files - '@codebridger/lib-vue-components/style.css', + 'pilotui/style.css', ], // ... other Nuxt config @@ -138,8 +184,11 @@ After installation, you can start using the components in your application. Chec --- + ## Getting Started How To / Use +**Source URL**: http://localhost:6006/?path=/docs/getting-started-how-to-use--docs + ### Component library We are two indie developers who love to build things. We are building a component library for vue and nuxt projects. it inspired by `vristo` and powered by `tailwindcss`. @@ -162,7 +211,7 @@ All components should be wrapped with the main ancestor component called `AppRoo ``` // All Components -Import { Button, Input, App } form '@codebridger/lib-vue-components' +Import { Button, Input, App } form 'pilotui' // Or Import by category: @@ -173,22 +222,22 @@ import { ThemeCustomizer, SidebarMenu, HorizontalMenu, -} from "@codebridger/lib-vue-components/shell"; +} from "pilotui/shell"; // Element components -import { Button } from "@codebridger/lib-vue-components/elements"; +import { Button } from "pilotui/elements"; // Form components -import { Input } from "@codebridger/lib-vue-components/form"; +import { Input } from "pilotui/form"; // Complex components -import { Modal } from "@codebridger/lib-vue-components/complex"; +import { Modal } from "pilotui/complex"; // Type imports import type { SidebarItemType, HorizontalMenuItemType, -} from "@codebridger/lib-vue-components/types"; +} from "pilotui/types"; ``` #### Global Configuration @@ -196,7 +245,7 @@ import type { There is pinia store for global configuration. see full documentation here ``` -import { useAppStore } from "@codebridger/lib-vue-components/store.ts"; +import { useAppStore } from "pilotui/store"; const appStore = useAppStore(); appStore.setTheme("dark"); @@ -204,8 +253,11 @@ appStore.setTheme("dark"); --- + ## Getting Started Global / Configuration +**Source URL**: http://localhost:6006/?path=/docs/getting-started-global-configuration--docs + #### Using `useAppStore` Import and use the `useAppStore` in your components to access and modify the global state. @@ -213,7 +265,7 @@ Import and use the `useAppStore` in your components to access and modify the glo ##### Importing the Store ``` -import { useAppStore } from '@codebridger/lib-vue-components/store.ts'; +import { useAppStore } from 'pilotui/store'; ``` ##### Accessing State @@ -323,8 +375,11 @@ function toggleSidebar() { --- + ## Shell / Approot +**Source URL**: http://localhost:6006/?path=/docs/shell-approot--docs + ### AppRoot Top-level shell that wires global layout concerns: color scheme, direction (LTR/RTL), and layout style. Wrap your application to ensure consistent theming and structure. @@ -355,8 +410,11 @@ Use as the root wrapper for app pages/stories. Combine with DashboardShell for f --- + ## Shell / Dashboardshell +**Source URL**: http://localhost:6006/?path=/docs/shell-dashboardshell--docs + ### DashboardShell Composable page shell providing header, horizontal menu, sidebar, content, and footer slots. Supports vertical and horizontal navigation styles. @@ -425,8 +483,11 @@ Wrap application pages to provide consistent navigation and scaffolding. Fill sl --- + ## Shell / Horizontalmenu +**Source URL**: http://localhost:6006/?path=/docs/shell-horizontalmenu--docs + ### HorizontalMenu Responsive top navigation bar rendering a hierarchy of items with icons and labels. Integrates with the shell store to switch layout style. @@ -974,8 +1035,11 @@ const items = [ --- + ## Shell / Sidebarmenu +**Source URL**: http://localhost:6006/?path=/docs/shell-sidebarmenu--docs + ### SidebarMenu ### SidebarMenu @@ -1579,8 +1643,11 @@ const items = [ --- + ## Icons Alternative Icon / Packs +**Source URL**: http://localhost:6006/?path=/docs/icons-alternative-icon-packs--docs + ### Alternative Icon Packs Using Iconify as an Alternative Icon Pack with Tailwind CSS @@ -1600,7 +1667,7 @@ Add the official plugin and any icon sets you want to use as development depende ###### 2\. **Configure Tailwind to use the Iconify plugin:** -Open your tailwind.config.js and import the plugin. Then add it to the plugins array, specifying which icon sets (by their prefix) to include if using the static selectors. For example: +Open your tailwind.config.js and import the plugin. Then add it to the plugins array. For example: ``` // tailwind.config.js @@ -1627,22 +1694,25 @@ After setup, you can use Iconify icons in your Vue components just like using an ``` ``` -In the snippet above, the icon-\[mdi-light--home\] class inserts the mdi-light:home icon as an inline SVG. We also apply Tailwind utility classes for color and size. In this example, text-gray-600 sets the icon color (monotone icons inherit the text color), and w-6 h-6 gives it a fixed width and height. You can swap out the prefix and icon name to use any icon from Iconify’s library (just make sure you’ve installed the corresponding icon set). +In the snippet above, the iconify tabler--hand-stop class inserts the tabler:hand-stop icon. We also apply Tailwind utility classes for color and size. In this example, text-gray-600 sets the icon color (monotone icons inherit the text color), and w-6 h-6 gives it a fixed width and height. You can swap out the prefix and icon name to use any icon from Iconify’s library (just make sure you’ve installed the corresponding icon set). For more details on using Iconify with Tailwind (and other setup options like additional icon sets or dynamic mode), refer to the official Iconify Tailwind CSS documentation. --- + ## Icons Icon / Gallery +**Source URL**: http://localhost:6006/?path=/docs/icons-icon-gallery--docs + ### Icon Gallery To use icons listed in this page you need to import the `icon` component and provide a name from the list below. @@ -1653,7 +1723,7 @@ To use icons listed in this page you need to import the `icon` component and pro ``` @@ -1999,8 +2069,11 @@ IconStar --- + ## Utilities / Toast +**Source URL**: http://localhost:6006/?path=/docs/utilities-toast--docs + ### Toast Utility Functions The `toast.ts` file provides utility functions for displaying toast notifications using SweetAlert2. These functions allow you to show different types of toast messages with various configurations. @@ -2010,7 +2083,7 @@ The `toast.ts` file provides utility functions for displaying toast notification To show a basic toast message, use the `showToast` function: ``` -import { showToast, toastSuccess, toastError, toastWarning, toastInfo } from '@codebridger/lib-vue-components/toast.ts'; +import { showToast, toastSuccess, toastError, toastWarning, toastInfo } from 'pilotui/toast'; showToast({ message: 'This is a basic toast message', variant: 'success' }); @@ -2057,8 +2130,11 @@ toastInfo('This is an info toast message'); --- + ## Complex / Modal +**Source URL**: http://localhost:6006/?path=/docs/complex-modal--docs + ### Modal A flexible dialog for confirmations, forms, and rich content. Provides slots for trigger, title, default content, and footer; supports sizes, vertical alignment, and animations. @@ -2552,8 +2628,11 @@ Use for tasks that require focused attention. Keep content concise; avoid nestin --- + ## Complex / Pagination +**Source URL**: http://localhost:6006/?path=/docs/complex-pagination--docs + ### Pagination ``` @@ -2645,8 +2724,11 @@ Current Page: 1 --- + ## Elements / Avatar +**Source URL**: http://localhost:6006/?path=/docs/elements-avatar--docs + ### Avatar Displays a user image or placeholder with configurable size and rounding. Optional presence indicator conveys online/offline state. @@ -2843,8 +2925,11 @@ Use in lists, headers, and cards. Combine with AvatarGroup to show multiple part --- + ## Elements / Avatargroup +**Source URL**: http://localhost:6006/?path=/docs/elements-avatargroup--docs + ### AvatarGroup #### A container component for grouping multiple avatars @@ -3195,8 +3280,11 @@ Avatar group with RTL (Right-to-Left) layout support enabled. --- + ## Elements / Button +**Source URL**: http://localhost:6006/?path=/docs/elements-button--docs + ### Button A flexible, accessible button with rich visual variants and behaviors. Use it for primary and secondary actions, icon-only actions, links, and async/loading flows. @@ -3561,8 +3649,11 @@ Chip clicks: 0 --- + ## Elements / Card +**Source URL**: http://localhost:6006/?path=/docs/elements-card--docs + ### Card A versatile Card component that serves as a container for content with consistent styling. The component features: @@ -3997,8 +4088,11 @@ Option 1Option 2 --- + ## Elements / Dropdown +**Source URL**: http://localhost:6006/?path=/docs/elements-dropdown--docs + ### Dropdown Contextual menu/popover for secondary actions. Provides trigger slot and body slot, positioning via Popper, and rich interaction modes. @@ -4631,8 +4725,11 @@ Use for menus, quick filters, and small forms. Keep actions concise and avoid de --- + ## Elements / Iconbutton +**Source URL**: http://localhost:6006/?path=/docs/elements-iconbutton--docs + ### IconButton A compact, versatile button optimized for icons or avatars. Works as a clickable control by default and as a decorative badge when badge is true. @@ -4990,8 +5087,11 @@ Badge mode with labels in different colors - perfect for status indicators and t --- + ## Elements / Progress +**Source URL**: http://localhost:6006/?path=/docs/elements-progress--docs + ### Progress A versatile progress bar component with a clean, modern design. @@ -5286,8 +5386,11 @@ The component includes several interactive features: --- + ## Elements / Tabs +**Source URL**: http://localhost:6006/?path=/docs/elements-tabs--docs + ### Tabs ### Tabs Component @@ -5959,8 +6062,11 @@ This content won't be accessible because the tab is disabled. --- + ## Elements / Tooltip +**Source URL**: http://localhost:6006/?path=/docs/elements-tooltip--docs + ### Tooltip Wrap any element to show helpful text on hover or focus. Placement, delay, and color are configurable for consistent guidance. @@ -6057,8 +6163,11 @@ This is a much longer tooltip message that demonstrates how the tooltip handles --- + ## Form / Checkboxinput +**Source URL**: http://localhost:6006/?path=/docs/form-checkboxinput--docs + ### CheckboxInput A flexible single checkbox component that supports various visual variants, color schemes, and states. The component features: @@ -6699,8 +6808,11 @@ Selected: None --- + ## Form / Fileinputbutton +**Source URL**: http://localhost:6006/?path=/docs/form-fileinputbutton--docs + ### FileInputButton Accessible file picker that pairs a styled button with a native file input under the hood. Supports accept filters, capture hints, and multiple selection. @@ -6747,7 +6859,7 @@ Upload File | errorMessage | Error message to displaystring | "" | | | id | string | "" | | | capture | Capture method for file input (e.g., "user" or "environment")"user""environment"boolean | - | | -| size | Size attribute for the file inputnumber | 0 | | +| size | Size attribute for the file inputnumber | - | | | events | | | blur | Emitted when the input loses focusFocusEvent | - | - | | focus | Emitted when the input gains focusFocusEvent | - | - | @@ -6849,8 +6961,11 @@ Take Photo --- + ## Form / Fileinputcombo +**Source URL**: http://localhost:6006/?path=/docs/form-fileinputcombo--docs + ### FileInputCombo A versatile file upload component that supports both drag-and-drop and click-to-upload functionality. The component provides a modern interface with file previews, upload progress tracking, and comprehensive file management features. @@ -6875,7 +6990,7 @@ In this Storybook demo, the file upload process is simulated with progress updat ``` diff --git a/frontend/components/bundle/DetailCard.vue b/frontend/components/bundle/DetailCard.vue index 6c46ef5..cb61654 100644 --- a/frontend/components/bundle/DetailCard.vue +++ b/frontend/components/bundle/DetailCard.vue @@ -2,30 +2,18 @@
- - + +

{{ bundleDetail.title }}

{{ bundleDetail.desc }}

-