@dasidev/dasi-ui

A starter Vue 3 + TypeScript framework for building configurable, enterprise-ready web apps. It ships with a configuration-driven architecture, unified components, and type-safe development. Forms are powered by Vueform, which serves as the built-in form builder across the project.

🚀 Quick Start

Make sure you guys use node v20 or above

$3

``sh

Using npm (recommended)

npx @dasidev/dasi-ui create my-admin-app

Using yarn

yarn create @dasidev/dasi-ui my-admin-app

Using pnpm

pnpm create @dasidev/dasi-ui my-admin-app
`

$3

`sh

Using npm

npm install @dasidev/dasi-ui

Using yarn

yarn add @dasidev/dasi-ui

Using pnpm

pnpm add @dasidev/dasi-ui
`

$3

- Node.js: v20 or above
-Package Manager: npm v10+, yarn, or pnpm

📦 Usage

`sh

Create new project with interactive setup

npx @dasidev/dasi-ui create my-admin-app

Follow the prompts to configure:

- Project title and description

- Template (default/minimal/full)

- Features (auth, charts, maps, forms)

- Package manager

- TypeScript support

- API configuration

- Dark mode

Navigate to project directory

cd my-admin-app

Install dependencies

npm install

Run development server

npm run dev
`

$3

` typescript



`

🏗️ Architecture Overview

This framework follows a configuration-driven architecture where pages are defined through schemas and configurations, making it highly reusable and maintainable.

$3

`
Route → PageActivity → Schema → Table → DataTableCell
↓ ↓ ↓ ↓ ↓
Config → PageConfig → Columns → Render → Display
`

$3

- PageActivity.vue - Main page container
- DataTable.vue - Unified table component
- DataTableCell.vue - Smart cell renderer
- BaseSelector.vue - Unified selector component
- DateSelectorElement.vue - Unified date picker

📋 Configuration System

$3

Create your app configuration in src/config/my-app.config.ts:

`typescript
export default {
app: {
name: "My Application",
version: "1.0.2"
},
api: {
baseUrl: process.env.VITE_API_URL || "http://localhost:3000/api",
timeout: 10000
},
branding: {
companyName: "My Company",
logo: "/logo.svg"
}
}
`

$3

Create page-specific configs in src/vueform/config/{endpoint}.ts:

`typescript
export default {
endpoint: "/users",
title: "User Management",
columns: [
{ key: "name", header: "Name", visible: true },
{ key: "email", header: "Email", visible: true }
]
}
`

$3

Define your form schemas in src/vueform/schemas/{pageCode}/{schema}.ts:

`typescript
export default {
schema: {
name: {
type: "text",
label: "Full Name",
rules: ["required"],
showInTable: true
},
organizationId: {
type: "selector",
endpoint: "/organizations",
label: "Organization",
showAvatar: true,
condition: { levels: "admin" },
showInTable: true
},
birthDate: {
type: "date_selector",
label: "Birth Date",
pickerType: "date",
showInTable: true
}
}
}
`

🎯 Unified Components

$3

A unified selector component that handles all selection needs:

`typescript
// Single selection
{
type: "selector",
endpoint: "/users",
showAvatar: true,
nameField: "name"
}

// Multiple selection
{
type: "selector",
endpoint: "/users",
multiple: true,
showAvatar: true,
returnObject: true
}

// With conditions and sorting
{
type: "selector",
endpoint: "/organizations",
condition: { levels: "admin" },
orderBy: "name",
sort: "asc"
}
`

$3

A unified date picker supporting all date types:

`typescript
// Single date
{
type: "date_selector",
pickerType: "date",
label: "Select Date"
}

// Date range
{
type: "date_selector",
pickerType: "date",
range: true,
label: "Select Date Range"
}

// DateTime with time picker
{
type: "date_selector",
pickerType: "datetime",
enableTimePicker: true,
label: "Select Date & Time"
}

// Month picker
{
type: "date_selector",
pickerType: "month",
label: "Select Month"
}

// Year picker
{
type: "date_selector",
pickerType: "year",
yearRange: [2020, 2030],
label: "Select Year"
}
`

📊 Table System

$3

The framework automatically generates table columns from your form schema:

`typescript
// Schema definition
{
name: {
type: "text",
label: "Name",
showInTable: true,
textAlign: "left"
},
organizationId: {
type: "selector",
endpoint: "/organizations",
showAvatar: true,
showInTable: true
}
}

// Automatically becomes table columns
// - Name (text column)
// - Organization (selector with avatar)
`

$3

The DataTableCell.vue component automatically handles different cell types:

- text - Plain text display
- selector - Selector with avatar support
- date_selector - Date picker with all variants
- toggle - Boolean toggle display
- checkboxgroup - Checkbox group display
- radiogroup - Radio group display
- select - Select dropdown display

🔧 Development Workflow

$3

1. Add Route: Define route in src/router/index.ts
2. Create Schema: Add schema in src/vueform/schemas/{pageCode}/
3. Create Config: Add page config in src/vueform/config/
4. Test: The page will automatically work with the framework

$3

1. Define in Schema: Add field to your form schema
2. Set Properties: Configure showInTable, cellType, etc.
3. Test: Field automatically appears in both form and table

$3

`typescript
// Custom cell renderer
{
name: {
type: "text",
cellRender: (i: number, row: any) => {
return ${row.name};
}
}
}
`

🎨 Styling & Theming

$3

The framework uses Tailwind CSS with custom configuration:

- Dark Mode: Automatic dark mode support
- Custom Colors: Brand-specific color schemes
- Responsive: Mobile-first responsive design

$3

Components are styled with Tailwind classes and support:

- Hover States: Interactive hover effects
- Focus States: Keyboard navigation support
- Disabled States: Proper disabled styling
- Loading States: Loading indicators

🎯 CLI Features

The CLI provides interactive setup with:
- Template Selection: Default, Minimal, or Full-featured
- Feature Toggles: Authentication, Charts, Maps, Forms
- Package Manager: npm, yarn, or pnpm
- TypeScript: Optional TypeScript support
- API Configuration: Custom API endpoints
- Theming: Dark mode support

Available Templates
- Default - Complete admin dashboard with all core features
- Minimal - Basic admin setup with essential components
- Full - All features including charts, maps, and advanced forms

📚 Key Libraries

- Vue 3 - Main framework with Composition API
- TypeScript - Type safety and better DX
- Tailwind CSS - Utility-first CSS framework
- Shadcn-vue - Component library
- Lucide Vue - Icon library
- Vueform - Form handling
- Pinia - State management
- Vue Router - Client-side routing
- Axios - HTTP client
- Moment.js - Date manipulation

🤝 Contribution

1. Clone the repository
2. Create a new branch for your feature: git checkout -b feature-name
3. Develop your feature following the framework patterns
4. Test your changes thoroughly
5. Create a pull request to the dev branch

$3

Use descriptive branch names:
- feature/user-management
- fix/date-picker-bug
- enhancement/table-performance

📖 Documentation

- Framework Guide: See FRAMEWORK_GUIDE.md for detailed documentation
- Quick Start: See QUICK_START.md for getting started
- API Reference: Check component documentation in code

🔧 Customization

$3

Create .env.local:

`env
VITE_API_URL=http://localhost:3000/api
VITE_APP_NAME=My Application
VITE_COMPANY_NAME=My Company
``

🚀 Ready to build your next admin dashboard? Start with npx @dasidev/dasi-ui create my-app!

$3

See Vite Configuration Reference for advanced configuration options.

---

Built with ❤️ using Vue 3, TypeScript, and modern web technologies.