@dasidev/dasi-ui

@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

Create New Project

# 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

Requirements

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

📦 Usage

# 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

Import Reusable Components

You can now import both UI primitives and feature-level components directly from @dasidev/dasi-ui.

import {
  // UI primitives
  Button,
  Input,
  Dialog,
  DialogContent,
  Select,
  SelectItem,
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,

  // Feature-level components
  Header,
  Leftbar,
  LoginForm,
  DataTable,
  ConfirmDialog,

  // Existing aliases remain available
  DasiUIHeader,
  DasiUILogin,
  DasiUIDataTable,
} from '@dasidev/dasi-ui'

For Vueform, start from package defaults and extend safely:

import { defineConfig } from '@vueform/vueform'
import { vueformConfig } from '@dasidev/dasi-ui'
import MyCustomElement from './elements/MyCustomElement.vue'

export default defineConfig({
  ...vueformConfig,
  elements: [
    ...(vueformConfig.elements || []),
    MyCustomElement,
  ],
})

🏗️ Architecture Overview

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

📋 Configuration System

1. Application Configuration

Create your app configuration defaults in src/config/app.config.ts:

const appDefaultConfig = {
  name: "My Application",
  version: "1.0.2",
  api: {
    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
    timeout: 10000
  },
  branding: {
    companyName: "My Company",
    logo: "/logo.svg"
  }
}

At runtime, consumer projects can override config via createDasUI(...):

app.use(createDasUI({
  appName: "My App",
  apiUrl: import.meta.env.VITE_API_URL,
  apiEndpoints: {
    auth: {
      login: "/auth/sso/login",
      logout: "/auth/sso/logout"
    }
  },
  appConfig: {
    auth: {
      tokenKey: "myapp.user.token"
    }
  }
}))

2. Page Configuration

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

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

3. Form Schema

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

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

BaseSelector

A unified selector component that handles all selection needs:

// 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"
}

DateSelectorElement

A unified date picker supporting all date types:

// 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

Automatic Column Generation

The framework automatically generates table columns from your form schema:

// 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)

Cell Types

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

1. Create New Page

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

2. Add New Field

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. Custom Cell Rendering

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

🎨 Styling & Theming

Tailwind CSS

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

Component Styling

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

Branch Naming

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

Environment Variables

Create .env.local:

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!

Vite Configuration

See Vite Configuration Reference for advanced configuration options.

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