@dasidev/dasi-ui 1.0.20 → 1.0.22

package/README.md

@@ -1,402 +1,5 @@
-# @dasidev/dasi-ui
+# Vue 3 + TypeScript + Vite
 
-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.
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-## 🚀 Quick Start
-
-Make sure you guys use node v20 or above
-
-### Create New Project
-
-```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
-```
-
-### Install as Library
-
-```sh
-# Using npm
-npm install @dasidev/dasi-ui
-
-# Using yarn
-yarn add @dasidev/dasi-ui
-
-# Using pnpm
-pnpm add @dasidev/dasi-ui
-```
-
-### Requirements
-- 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
-```
-
-### As Component Library
-``` typescript
-<template>
-  <DasiApp>
-    <PageActivity endpoint="/users" />
-  </DasiApp>
-</template>
-
-<script setup>
-import { DasiApp, PageActivity } from '@dasidev/dasi-ui'
-import '@dasidev/dasi-ui/style.css'
-</script>
-```
-
-## 🏗️ Architecture Overview
-
-This framework follows a **configuration-driven architecture** where pages are defined through schemas and configurations, making it highly reusable and maintainable.
-
-### Core Flow
-
-```
-Route → PageActivity → Schema → Table → DataTableCell
-  ↓         ↓          ↓        ↓         ↓
-Config → PageConfig → Columns → Render → Display
-```
-
-### Key Components
-
-- **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
-
-### 1. Application Configuration
-
-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"
-  }
-}
-```
-
-### 2. Page Configuration
-
-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. Form Schema
-
-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
-
-### BaseSelector
-
-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"
-}
-```
-
-### DateSelectorElement
-
-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
-
-### Automatic Column Generation
-
-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)
-```
-
-### 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
-
-```typescript
-// 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`:
-
-```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!
-
-### Vite Configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/) for advanced configuration options.
-
----
-
-**Built with ❤️ using Vue 3, TypeScript, and modern web technologies.**
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/package.json

@@ -1,84 +1,99 @@
 {
   "name": "@dasidev/dasi-ui",
-  "version": "1.0.20",
-  "description": "Complete Vue 3 Admin Template Generator",
-  "private": false,
+  "version": "1.0.22",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/dasi-ui.umd.js",
+  "module": "./dist/dasi-ui.es.js",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/dasi-ui.es.js",
+      "require": "./dist/dasi-ui.umd.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/dasi-ui.css"
   },
-  "bin": {
-    "dasi-ui": "./bin/dasi-cli.cjs"
+  "scripts": {
+    "build": "vite build && cp src/index.d.ts dist/index.d.ts",
+    "build:type-check": "vite build && vue-tsc -p tsconfig.build.json",
+    "type-check": "vue-tsc -p tsconfig.build.json"
   },
   "files": [
-    "dist/",
-    "bin/",
-    "README.md"
+    "dist"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build-lib": "vite build --config vite.lib.config.ts",
-    "preview": "vite preview",
-    "test": "vitest",
-    "test:unit": "vitest",
-    "test:run": "vitest run",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write \"src/**/*.{vue,js,ts,jsx,tsx,json,md}\"",
-    "cli": "node bin/dasi-cli.cjs",
-    "release": "npm version patch && npm publish --access public"
+  "peerDependencies": {
+    "@vee-validate/zod": "^4.12.6",
+    "@vueuse/core": "^10.9.0",
+    "pinia": "^3.0.4",
+    "vee-validate": "^4.12.6",
+    "vue": "^3.4.0",
+    "vue-router": "^5.0.2"
   },
   "dependencies": {
-    "commander": "^14.0.2",
-    "inquirer": "^8.2.7",
-    "chalk": "^4.1.2",
-    "ora": "^5.4.1",
-    "fs-extra": "^11.3.3"
+    "@passwordless-id/webauthn": "^1.6.1",
+    "@radix-icons/vue": "^1.0.0",
+    "@vueform/plugin-mask": "^1.0.7",
+    "@vuepic/vue-datepicker": "^11.0.3",
+    "axios": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "curl-generator": "^0.4.1",
+    "date-fns": "^3.6.0",
+    "file-saver": "^2.0.5",
+    "flowbite": "^2.3.0",
+    "flowbite-vue": "^0.1.4",
+    "go-captcha-vue": "^2.0.6",
+    "highlight.js": "^11.9.0",
+    "jspdf": "^4.1.0",
+    "jspdf-autotable": "^5.0.2",
+    "lucide-vue-next": "^0.563.0",
+    "marked": "^13.0.3",
+    "moment": "^2.30.1",
+    "nanoid": "^5.0.9",
+    "pdfjs-dist": "^5.3.31",
+    "peerjs": "^1.5.2",
+    "radix-vue": "^1.5.1",
+    "sortablejs": "^1.15.6",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "v-calendar": "^3.1.2",
+    "v3-infinite-loading": "^1.3.1",
+    "vue-final-modal": "^4.5.4",
+    "vue-loading-overlay": "^6.0.4",
+    "vue-pdf-embed": "^2.1.0",
+    "vue-sonner": "^2.0.9",
+    "vue3-perfect-scrollbar": "^2.0.0",
+    "vuedraggable": "^4.1.0",
+    "xlsx": "^0.18.5",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
-    "@types/fs-extra": "^11.0.4",
-    "@types/inquirer": "^8.2.10",
+    "@types/file-saver": "^2.0.7",
+    "@types/jsdom": "^21.1.6",
+    "@types/jspdf": "^1.3.3",
     "@types/node": "^20.11.25",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^5.1.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.4",
-    "@vue/tsconfig": "^0.5.1",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.24",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.1",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.12",
     "sass": "^1.71.1",
-    "tailwindcss": "^3.4.1",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.2",
-    "vue-tsc": "^1.8.27"
-  },
-  "keywords": [
-    "vue3",
-    "admin",
-    "template",
-    "dashboard",
-    "typescript",
-    "tailwindcss",
-    "framework",
-    "enterprise",
-    "configuration-driven"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/dasi-developer/framework-web-app.git"
-  },
-  "author": "DASI Developer",
-  "license": "MIT"
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-raw-plugin": "^1.0.2",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.4"
+  }
 }