{"_id":"@dasidev/dasui-pro","_rev":"2-02b7cdbc972d8fac2676e47f1e99688b","name":"@dasidev/dasui-pro","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@dasidev/dasui-pro","version":"1.0.0","keywords":["vue3","admin","template","dasi","dasidev","dasi-ui","dashboard","typescript","tailwindcss","framework","enterprise","configuration-driven"],"author":{"name":"DASI Developer"},"license":"MIT","_id":"@dasidev/dasui-pro@1.0.0","maintainers":[{"name":"taufikamf","email":"taufikabdul354@gmail.com"},{"name":"dittmptrr27","email":"dittmptrr27th@gmail.com"},{"name":"dasi-developer","email":"malik@dasi.co.id"}],"homepage":"https://github.com/dasi-developer/dasi-ui-internal#readme","bugs":{"url":"https://github.com/dasi-developer/dasi-ui-internal/issues"},"bin":{"dasi-ui":"bin/cli.js"},"dist":{"shasum":"d5e56f62848b28a3a3a474c57ea3ce0896c221ff","tarball":"https://registry.npmjs.org/@dasidev/dasui-pro/-/dasui-pro-1.0.0.tgz","fileCount":57,"integrity":"sha512-Jxfs+NJ9F20l3VuCQVguYjCIArcuNhedPD0KrDnwnOjKd5vu78b3xN76zUwA74HbD9JuzPuqBHmwET7hQCITyQ==","signatures":[{"sig":"MEYCIQCZx4LNX5S4p/7nmY1xhdzJ4Q3xlKJlTS0UVytLVUbwzgIhAJKft0YJ2zzTdqdYORR6fJ3/TBoBIWWb9LZRRdeqm2V4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67451857},"main":"./dist/dasi-ui.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/dasi-ui.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/dasi-ui.es.js","require":"./dist/dasi-ui.umd.js"},"./style.css":"./dist/dasi-ui.css"},"gitHead":"c6b8738c9452d374cf3e26e84782dfc586d5f39d","scripts":{"cli":"node bin/cli.js","build":"vite build","release":"npm run build:all && npm version patch && npm publish --access public","build:all":"npm run build && npm run build:cli","build:cli":"tsc -p tsconfig.cli.json","type-check":"vue-tsc -p tsconfig.build.json","release:beta":"npm run build:all && npm version prerelease --preid=beta && npm publish --access public","build:type-check":"npm run build && vue-tsc -p tsconfig.build.json"},"_npmUser":{"name":"dittmptrr27","email":"dittmptrr27th@gmail.com"},"repository":{"url":"git+https://github.com/dasi-developer/dasi-ui-internal.git","type":"git"},"_npmVersion":"11.10.0","description":"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 ","directories":{},"_nodeVersion":"24.12.0","dependencies":{"ora":"^9.3.0","zod":"^3.22.4","clsx":"^2.1.1","xlsx":"^0.18.5","axios":"^1.6.0","chalk":"^5.6.2","execa":"^9.6.1","jspdf":"^4.1.0","marked":"^13.0.3","moment":"^2.30.1","nanoid":"^5.0.9","peerjs":"^1.5.2","reka-ui":"^2.8.2","date-fns":"^3.6.0","flowbite":"^2.3.0","fs-extra":"^11.3.3","inquirer":"^13.3.0","commander":"^14.0.3","radix-vue":"^1.5.1","@unovis/ts":"^1.6.4","file-saver":"^2.0.5","pdfjs-dist":"^5.3.31","sortablejs":"^1.15.6","v-calendar":"^3.1.2","@unovis/vue":"^1.6.4","flowbite-vue":"^0.1.4","highlight.js":"^11.9.0","vuedraggable":"^4.1.0","vue-pdf-embed":"^2.1.0","curl-generator":"^0.4.1","go-captcha-vue":"^2.0.6","tailwind-merge":"^2.6.1","jspdf-autotable":"^5.0.2","vue-final-modal":"^4.5.4","@radix-icons/vue":"^1.0.0","v3-infinite-loading":"^1.3.1","vue-loading-overlay":"^6.0.4","@vueform/plugin-mask":"^1.0.7","@vuepic/vue-datepicker":"^11.0.3","vue3-perfect-scrollbar":"^2.0.0","class-variance-authority":"^0.7.1","@passwordless-id/webauthn":"^1.6.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.71.1","vite":"^6.4.1","jsdom":"^24.0.0","eslint":"^8.49.0","vitest":"^4.0.18","vue-tsc":"^3.2.4","prettier":"^3.2.5","typescript":"^5.9.3","@types/node":"^20.19.39","tailwindcss":"^3.4.19","@types/jsdom":"^21.1.6","@types/jspdf":"^1.3.3","autoprefixer":"^10.4.24","npm-run-all2":"^6.1.1","@vue/tsconfig":"^0.8.1","@types/fs-extra":"^11.0.4","@vue/test-utils":"^2.4.4","vite-plugin-dts":"^4.5.4","vite-raw-plugin":"^1.0.2","@tsconfig/node20":"^20.1.2","@types/file-saver":"^2.0.7","eslint-plugin-vue":"^9.17.0","@vitejs/plugin-vue":"^5.2.4","tailwindcss-animate":"^1.0.7","@vitejs/plugin-vue-jsx":"^5.1.4","@rushstack/eslint-patch":"^1.3.3","@microsoft/api-extractor":"^7.57.6","@vue/eslint-config-prettier":"^8.0.0","prettier-plugin-tailwindcss":"^0.5.12","@vue/eslint-config-typescript":"^12.0.0","@microsoft/api-extractor-model":"^7.33.4"},"peerDependencies":{"vue":"^3.5.29","pinia":"^3.0.4","vue-router":"^5.0.2","vue-sonner":"^2.0.9","@vueuse/core":"^14.2.1","vee-validate":"^4.12.6","lucide-vue-next":"^0.575.0","@vueform/vueform":"^1.13.10","@vee-validate/zod":"^4.12.6"},"_npmOperationalInternal":{"tmp":"tmp/dasui-pro_1.0.0_1775805426245_0.7145734389798997","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dasidev/dasui-pro","version":"1.0.1","keywords":["vue3","admin","template","dasi","dasidev","dasi-ui","dashboard","typescript","tailwindcss","framework","enterprise","configuration-driven"],"repository":{"type":"git","url":"git+https://github.com/dasi-developer/dasi-ui-internal.git"},"author":{"name":"DASI Developer"},"license":"MIT","type":"module","types":"./dist/index.d.ts","main":"./dist/dasi-ui.umd.js","module":"./dist/dasi-ui.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/dasi-ui.es.js","require":"./dist/dasi-ui.umd.js"},"./style.css":"./dist/dasi-ui.css"},"scripts":{"build":"vite build","build:cli":"tsc -p tsconfig.cli.json","build:all":"npm run build && npm run build:cli","build:type-check":"npm run build && vue-tsc -p tsconfig.build.json","type-check":"vue-tsc -p tsconfig.build.json","cli":"node bin/cli.js","release":"npm run build:all && npm version patch && npm publish --access public","release:beta":"npm run build:all && npm version prerelease --preid=beta && npm publish --access public"},"bin":{"dasi-ui":"bin/cli.js"},"peerDependencies":{"@vee-validate/zod":"^4.12.6","@vueform/vueform":"^1.13.10","@vueuse/core":"^14.2.1","lucide-vue-next":"^0.575.0","pinia":"^3.0.4","vee-validate":"^4.12.6","vue":"^3.5.29","vue-router":"^5.0.2","vue-sonner":"^2.0.9"},"dependencies":{"@passwordless-id/webauthn":"^1.6.1","@radix-icons/vue":"^1.0.0","@unovis/ts":"^1.6.4","@unovis/vue":"^1.6.4","@vueform/plugin-mask":"^1.0.7","@vuepic/vue-datepicker":"^11.0.3","axios":"^1.6.0","chalk":"^5.6.2","class-variance-authority":"^0.7.1","clsx":"^2.1.1","commander":"^14.0.3","curl-generator":"^0.4.1","date-fns":"^3.6.0","execa":"^9.6.1","file-saver":"^2.0.5","flowbite":"^2.3.0","flowbite-vue":"^0.1.4","fs-extra":"^11.3.3","go-captcha-vue":"^2.0.6","highlight.js":"^11.9.0","inquirer":"^13.3.0","jspdf":"^4.1.0","jspdf-autotable":"^5.0.2","marked":"^13.0.3","moment":"^2.30.1","nanoid":"^5.0.9","ora":"^9.3.0","pdfjs-dist":"^5.3.31","peerjs":"^1.5.2","radix-vue":"^1.5.1","reka-ui":"^2.8.2","sortablejs":"^1.15.6","tailwind-merge":"^2.6.1","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","vue3-perfect-scrollbar":"^2.0.0","vuedraggable":"^4.1.0","xlsx":"^0.18.5","zod":"^3.22.4"},"devDependencies":{"@microsoft/api-extractor":"^7.57.6","@microsoft/api-extractor-model":"^7.33.4","@rushstack/eslint-patch":"^1.3.3","@tsconfig/node20":"^20.1.2","@types/file-saver":"^2.0.7","@types/fs-extra":"^11.0.4","@types/jsdom":"^21.1.6","@types/jspdf":"^1.3.3","@types/node":"^20.19.39","@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.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.19","tailwindcss-animate":"^1.0.7","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"},"gitHead":"f6ac25541be16dd61aa2f90c8bb9c38337d2276d","_id":"@dasidev/dasui-pro@1.0.1","description":"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 ","bugs":{"url":"https://github.com/dasi-developer/dasi-ui-internal/issues"},"homepage":"https://github.com/dasi-developer/dasi-ui-internal#readme","_nodeVersion":"24.12.0","_npmVersion":"11.10.0","dist":{"integrity":"sha512-k9lEY6ByMEaDvknYgjiKZdLqdsPnEfu6oTtjc0GBBlKvjZUHTDNfzT4FdXKIf54KImPdGpTxztcrfqkzG17Byw==","shasum":"08ef7527042fa49ef64ab464976df4edbdb09132","tarball":"https://registry.npmjs.org/@dasidev/dasui-pro/-/dasui-pro-1.0.1.tgz","fileCount":57,"unpackedSize":67451857,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBaPpPPrcEDo2CoUVZ/ArEqjcXZS2dUMS6zBD+asRKyzAiAI5ezh2JtxdkaReri3Qdj7hOzfGMXaP0UoA45h67yemQ=="}]},"_npmUser":{"name":"dittmptrr27","email":"dittmptrr27th@gmail.com"},"directories":{},"maintainers":[{"name":"taufikamf","email":"taufikabdul354@gmail.com"},{"name":"dittmptrr27","email":"dittmptrr27th@gmail.com"},{"name":"dasi-developer","email":"malik@dasi.co.id"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dasui-pro_1.0.1_1775805628592_0.3860293197760596"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T07:17:05.856Z","modified":"2026-04-10T07:20:29.950Z","1.0.0":"2026-04-10T07:17:07.355Z","1.0.1":"2026-04-10T07:20:29.747Z"},"bugs":{"url":"https://github.com/dasi-developer/dasi-ui-internal/issues"},"author":{"name":"DASI Developer"},"license":"MIT","homepage":"https://github.com/dasi-developer/dasi-ui-internal#readme","keywords":["vue3","admin","template","dasi","dasidev","dasi-ui","dashboard","typescript","tailwindcss","framework","enterprise","configuration-driven"],"repository":{"type":"git","url":"git+https://github.com/dasi-developer/dasi-ui-internal.git"},"description":"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 ","maintainers":[{"name":"taufikamf","email":"taufikabdul354@gmail.com"},{"name":"dittmptrr27","email":"dittmptrr27th@gmail.com"},{"name":"dasi-developer","email":"malik@dasi.co.id"}],"readme":"# @dasidev/dasi-ui\r\n\r\nA 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.\r\n\r\n## 🚀 Quick Start\r\n\r\nMake sure you guys use node v20 or above\r\n\r\n### Create New Project\r\n\r\n```sh\r\n# Using npm (recommended)\r\nnpx @dasidev/dasi-ui create my-admin-app\r\n\r\n# Using yarn\r\nyarn create @dasidev/dasi-ui my-admin-app\r\n\r\n# Using pnpm\r\npnpm create @dasidev/dasi-ui my-admin-app\r\n```\r\n<!-- \r\n### Install as Library\r\n\r\n```sh\r\n# Using npm\r\nnpm install @dasidev/dasi-ui\r\n\r\n# Using yarn\r\nyarn add @dasidev/dasi-ui\r\n\r\n# Using pnpm\r\npnpm add @dasidev/dasi-ui\r\n``` -->\r\n\r\n### Requirements\r\n- Node.js: v20 or above\r\n-Package Manager: npm v10+, yarn, or pnpm\r\n\r\n## 📦 Usage\r\n\r\n```sh\r\n# Create new project with interactive setup\r\nnpx @dasidev/dasi-ui create my-admin-app\r\n\r\n# Follow the prompts to configure:\r\n# - Project title and description\r\n# - Template (default/minimal/full)\r\n# - Features (auth, charts, maps, forms)\r\n# - Package manager\r\n# - TypeScript support\r\n# - API configuration\r\n# - Dark mode\r\n\r\n# Navigate to project directory\r\ncd my-admin-app\r\n\r\n# Install dependencies\r\nnpm install\r\n\r\n# Run development server\r\nnpm run dev\r\n```\r\n\r\n### Import Reusable Components\r\n\r\nYou can now import both UI primitives and feature-level components directly from `@dasidev/dasi-ui`.\r\n\r\n```typescript\r\nimport {\r\n  // UI primitives\r\n  Button,\r\n  Input,\r\n  Dialog,\r\n  DialogContent,\r\n  Select,\r\n  SelectItem,\r\n  Tabs,\r\n  TabsList,\r\n  TabsTrigger,\r\n  TabsContent,\r\n\r\n  // Feature-level components\r\n  Header,\r\n  Leftbar,\r\n  LoginForm,\r\n  DataTable,\r\n  ConfirmDialog,\r\n\r\n  // Existing aliases remain available\r\n  DasiUIHeader,\r\n  DasiUILogin,\r\n  DasiUIDataTable,\r\n} from '@dasidev/dasi-ui'\r\n```\r\n\r\nFor Vueform, start from package defaults and extend safely:\r\n\r\n```typescript\r\nimport { defineConfig } from '@vueform/vueform'\r\nimport { vueformConfig } from '@dasidev/dasi-ui'\r\nimport MyCustomElement from './elements/MyCustomElement.vue'\r\n\r\nexport default defineConfig({\r\n  ...vueformConfig,\r\n  elements: [\r\n    ...(vueformConfig.elements || []),\r\n    MyCustomElement,\r\n  ],\r\n})\r\n```\r\n<!-- \r\n### As Component Library\r\n``` typescript\r\n<template>\r\n  <DasiApp>\r\n    <PageActivity endpoint=\"/users\" />\r\n  </DasiApp>\r\n</template>\r\n\r\n<script setup>\r\nimport { DasiApp, PageActivity } from '@dasidev/dasi-ui'\r\nimport '@dasidev/dasi-ui/style.css'\r\n</script>\r\n``` -->\r\n\r\n## 🏗️ Architecture Overview\r\n\r\nThis framework follows a **configuration-driven architecture** where pages are defined through schemas and configurations, making it highly reusable and maintainable.\r\n\r\n<!-- ### Core Flow\r\n\r\n```\r\nRoute → PageActivity → Schema → Table → DataTableCell\r\n  ↓         ↓          ↓        ↓         ↓\r\nConfig → PageConfig → Columns → Render → Display\r\n```\r\n\r\n### Key Components\r\n\r\n- **PageActivity.vue** - Main page container\r\n- **DataTable.vue** - Unified table component\r\n- **DataTableCell.vue** - Smart cell renderer\r\n- **BaseSelector.vue** - Unified selector component\r\n- **DateSelectorElement.vue** - Unified date picker -->\r\n\r\n## 📋 Configuration System\r\n\r\n### 1. Application Configuration\r\n\r\nCreate your app configuration defaults in `src/config/app.config.ts`:\r\n\r\n```typescript\r\nconst appDefaultConfig = {\r\n  name: \"My Application\",\r\n  version: \"1.0.2\",\r\n  api: {\r\n    baseUrl: import.meta.env.VITE_API_URL || \"http://localhost:3000/api\",\r\n    timeout: 10000\r\n  },\r\n  branding: {\r\n    companyName: \"My Company\",\r\n    logo: \"/logo.svg\"\r\n  }\r\n}\r\n```\r\n\r\nAt runtime, consumer projects can override config via `createDasUI(...)`:\r\n\r\n```typescript\r\napp.use(createDasUI({\r\n  appName: \"My App\",\r\n  apiUrl: import.meta.env.VITE_API_URL,\r\n  apiEndpoints: {\r\n    auth: {\r\n      login: \"/auth/sso/login\",\r\n      logout: \"/auth/sso/logout\"\r\n    }\r\n  },\r\n  appConfig: {\r\n    auth: {\r\n      tokenKey: \"myapp.user.token\"\r\n    }\r\n  }\r\n}))\r\n```\r\n\r\n### 2. Page Configuration\r\n\r\nCreate page-specific configs in `src/vueform/config/{endpoint}.ts`:\r\n\r\n```typescript\r\nexport default {\r\n  endpoint: \"/users\",\r\n  title: \"User Management\",\r\n  columns: [\r\n    { key: \"name\", header: \"Name\", visible: true },\r\n    { key: \"email\", header: \"Email\", visible: true }\r\n  ]\r\n}\r\n```\r\n\r\n### 3. Form Schema\r\n\r\nDefine your form schemas in `src/vueform/schemas/{pageCode}/{schema}.ts`:\r\n\r\n```typescript\r\nexport default {\r\n  schema: {\r\n    name: {\r\n      type: \"text\",\r\n      label: \"Full Name\",\r\n      rules: [\"required\"],\r\n      showInTable: true\r\n    },\r\n    organizationId: {\r\n      type: \"selector\",\r\n      endpoint: \"/organizations\",\r\n      label: \"Organization\",\r\n      showAvatar: true,\r\n      condition: { levels: \"admin\" },\r\n      showInTable: true\r\n    },\r\n    birthDate: {\r\n      type: \"date_selector\",\r\n      label: \"Birth Date\",\r\n      pickerType: \"date\",\r\n      showInTable: true\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## 🎯 Unified Components\r\n\r\n### BaseSelector\r\n\r\nA unified selector component that handles all selection needs:\r\n\r\n```typescript\r\n// Single selection\r\n{\r\n  type: \"selector\",\r\n  endpoint: \"/users\",\r\n  showAvatar: true,\r\n  nameField: \"name\"\r\n}\r\n\r\n// Multiple selection\r\n{\r\n  type: \"selector\",\r\n  endpoint: \"/users\",\r\n  multiple: true,\r\n  showAvatar: true,\r\n  returnObject: true\r\n}\r\n\r\n// With conditions and sorting\r\n{\r\n  type: \"selector\",\r\n  endpoint: \"/organizations\",\r\n  condition: { levels: \"admin\" },\r\n  orderBy: \"name\",\r\n  sort: \"asc\"\r\n}\r\n```\r\n\r\n### DateSelectorElement\r\n\r\nA unified date picker supporting all date types:\r\n\r\n```typescript\r\n// Single date\r\n{\r\n  type: \"date_selector\",\r\n  pickerType: \"date\",\r\n  label: \"Select Date\"\r\n}\r\n\r\n// Date range\r\n{\r\n  type: \"date_selector\",\r\n  pickerType: \"date\",\r\n  range: true,\r\n  label: \"Select Date Range\"\r\n}\r\n\r\n// DateTime with time picker\r\n{\r\n  type: \"date_selector\",\r\n  pickerType: \"datetime\",\r\n  enableTimePicker: true,\r\n  label: \"Select Date & Time\"\r\n}\r\n\r\n// Month picker\r\n{\r\n  type: \"date_selector\",\r\n  pickerType: \"month\",\r\n  label: \"Select Month\"\r\n}\r\n\r\n// Year picker\r\n{\r\n  type: \"date_selector\",\r\n  pickerType: \"year\",\r\n  yearRange: [2020, 2030],\r\n  label: \"Select Year\"\r\n}\r\n```\r\n\r\n## 📊 Table System\r\n\r\n### Automatic Column Generation\r\n\r\nThe framework automatically generates table columns from your form schema:\r\n\r\n```typescript\r\n// Schema definition\r\n{\r\n  name: {\r\n    type: \"text\",\r\n    label: \"Name\",\r\n    showInTable: true,\r\n    textAlign: \"left\"\r\n  },\r\n  organizationId: {\r\n    type: \"selector\",\r\n    endpoint: \"/organizations\",\r\n    showAvatar: true,\r\n    showInTable: true\r\n  }\r\n}\r\n\r\n// Automatically becomes table columns\r\n// - Name (text column)\r\n// - Organization (selector with avatar)\r\n```\r\n\r\n### Cell Types\r\n\r\nThe `DataTableCell.vue` component automatically handles different cell types:\r\n\r\n- **`text`** - Plain text display\r\n- **`selector`** - Selector with avatar support\r\n- **`date_selector`** - Date picker with all variants\r\n- **`toggle`** - Boolean toggle display\r\n- **`checkboxgroup`** - Checkbox group display\r\n- **`radiogroup`** - Radio group display\r\n- **`select`** - Select dropdown display\r\n\r\n## 🔧 Development Workflow\r\n\r\n### 1. Create New Page\r\n\r\n1. **Add Route**: Define route in `src/router/index.ts`\r\n2. **Create Schema**: Add schema in `src/vueform/schemas/{pageCode}/`\r\n3. **Create Config**: Add page config in `src/vueform/config/`\r\n4. **Test**: The page will automatically work with the framework\r\n\r\n### 2. Add New Field\r\n\r\n1. **Define in Schema**: Add field to your form schema\r\n2. **Set Properties**: Configure `showInTable`, `cellType`, etc.\r\n3. **Test**: Field automatically appears in both form and table\r\n\r\n### 3. Custom Cell Rendering\r\n\r\n```typescript\r\n// Custom cell renderer\r\n{\r\n  name: {\r\n    type: \"text\",\r\n    cellRender: (i: number, row: any) => {\r\n      return `<strong>${row.name}</strong>`;\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## 🎨 Styling & Theming\r\n\r\n### Tailwind CSS\r\n\r\nThe framework uses Tailwind CSS with custom configuration:\r\n\r\n- **Dark Mode**: Automatic dark mode support\r\n- **Custom Colors**: Brand-specific color schemes\r\n- **Responsive**: Mobile-first responsive design\r\n\r\n### Component Styling\r\n\r\nComponents are styled with Tailwind classes and support:\r\n\r\n- **Hover States**: Interactive hover effects\r\n- **Focus States**: Keyboard navigation support\r\n- **Disabled States**: Proper disabled styling\r\n- **Loading States**: Loading indicators\r\n\r\n## 🎯 CLI Features\r\n\r\nThe CLI provides interactive setup with:\r\n- Template Selection: Default, Minimal, or Full-featured\r\n- Feature Toggles: Authentication, Charts, Maps, Forms\r\n- Package Manager: npm, yarn, or pnpm\r\n- TypeScript: Optional TypeScript support\r\n- API Configuration: Custom API endpoints\r\n- Theming: Dark mode support\r\n\r\nAvailable Templates\r\n- Default - Complete admin dashboard with all core features\r\n- Minimal - Basic admin setup with essential components\r\n- Full - All features including charts, maps, and advanced forms\r\n\r\n## 📚 Key Libraries\r\n\r\n- **Vue 3** - Main framework with Composition API\r\n- **TypeScript** - Type safety and better DX\r\n- **Tailwind CSS** - Utility-first CSS framework\r\n- **Shadcn-vue** - Component library\r\n- **Lucide Vue** - Icon library\r\n- **Vueform** - Form handling\r\n- **Pinia** - State management\r\n- **Vue Router** - Client-side routing\r\n- **Axios** - HTTP client\r\n- **Moment.js** - Date manipulation\r\n\r\n## 🤝 Contribution\r\n\r\n1. **Clone** the repository\r\n2. **Create** a new branch for your feature: `git checkout -b feature-name`\r\n3. **Develop** your feature following the framework patterns\r\n4. **Test** your changes thoroughly\r\n5. **Create** a pull request to the `dev` branch\r\n\r\n### Branch Naming\r\n\r\nUse descriptive branch names:\r\n- `feature/user-management`\r\n- `fix/date-picker-bug`\r\n- `enhancement/table-performance`\r\n\r\n## 📖 Documentation\r\n\r\n- **Framework Guide**: See `FRAMEWORK_GUIDE.md` for detailed documentation\r\n- **Quick Start**: See `QUICK_START.md` for getting started\r\n- **API Reference**: Check component documentation in code\r\n\r\n## 🔧 Customization\r\n\r\n### Environment Variables\r\n\r\nCreate `.env.local`:\r\n\r\n```env\r\nVITE_API_URL=http://localhost:3000/api\r\nVITE_APP_NAME=My Application\r\nVITE_COMPANY_NAME=My Company\r\n```\r\n\r\n🚀 Ready to build your next admin dashboard? Start with npx @dasidev/dasi-ui create my-app!\r\n\r\n### Vite Configuration\r\n\r\nSee [Vite Configuration Reference](https://vitejs.dev/config/) for advanced configuration options.\r\n\r\n---\r\n\r\n**Built with ❤️ using Vue 3, TypeScript, and modern web technologies.**\r\n","readmeFilename":"README.md"}