# CustomDark

**Repository Path**: PanvanCode/custom-dark

## Basic Information

- **Project Name**: CustomDark
- **Description**: 使用AI创建的一套黑色主题的组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-26
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Custom Dark UI

A Vue 3 component library built with Composition API and Vite.

## Features

- 🚀 Built with Vue 3 Composition API
- 📦 Tree-shakable ES modules
- 🎨 Customizable theme with CSS variables
- 📝 TypeScript support
- 🔧 Easy to use and extend
- 🎯 Example documentation with live preview
- 🌙 Built with Tailwind CSS
- 🎨 Beautiful and responsive components

## Dependencies

### Runtime Dependencies
These dependencies are required for the component library to work:

```json
{
  "@iconify/vue": "^4.0.0",
  "@vueuse/core": "^11.0.0",
  "echarts": "^5.5.0",
  "vue": "^3.0.0"
}
```

### Development Dependencies
These dependencies are used for building and developing the library:

```json
{
  "@types/node": "^20.19.27",
  "@vitejs/plugin-vue": "^5.0.0",
  "autoprefixer": "^10.4.23",
  "postcss": "^8.5.6",
  "prismjs": "^1.29.0",
  "sass-embedded": "^1.97.2",
  "tailwindcss": "^4.1.18",
  "typescript": "^5.3.0",
  "vite": "^5.0.0",
  "vitepress": "^1.6.4",
  "vue-tsc": "^1.8.0"
}
```

**Key Dependencies Explanation:**

- **@iconify/vue**: Icon component library for consistent and beautiful icons
- **@vueuse/core**: Vue Composition utilities for common use cases
- **echarts**: Chart library for data visualization components
- **tailwindcss**: Utility-first CSS framework for styling components
- **vitepress**: Documentation generator for building docs

## Installation

### Global Registration

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import CustomDarkUI from 'custom-dark-ui'

const app = createApp(App)
app.use(CustomDarkUI)
app.mount('#app')
```

### Individual Component Registration

```javascript
import { Button, Input } from 'custom-dark-ui'

export default {
  components: {
    Button,
    Input
  }
}
```

### In-template Usage

```vue
<template>
  <Button type="primary" @click="handleClick">
    Click Me
  </Button>
  <Input v-model="value" placeholder="Enter text" />
</template>
```

## Development

### Project Structure

```
custom-dark-ui/
├── packages/           # Component library source code
│   ├── components/    # Vue components
│   ├── directives/    # Custom directives
│   ├── utils/         # Utility functions
│   ├── constants/     # Constants and configurations
│   ├── styles/        # Global styles and Tailwind CSS
│   └── install.ts     # Library installation
├── examples/           # Example application
│   ├── App.vue
│   └── main.ts
├── docs/              # VitePress documentation
│   ├── .vitepress/
│   ├── components/    # Component documentation
│   └── guide/         # User guides
├── dist/             # Built library output
├── index.html        # Demo entry
├── tailwind.config.js # Tailwind CSS configuration
└── postcss.config.js  # PostCSS configuration
```

### Development Commands

```bash
# Install dependencies
npm install
# or
pnpm install

# Start development server (demo app)
npm run dev

# Start documentation server
npm run docs:dev

# Build library for production
npm run build:lib

# Build documentation
npm run docs:build

# Preview built library
npm run preview

# Preview documentation
npm run docs:preview
```

### Building with Tailwind CSS

The project uses Tailwind CSS for styling. Make sure to install dependencies first:

```bash
npm install
```

Tailwind CSS is configured to:
- Scan all Vue, JS, and TS files in `packages/`, `examples/`, and `docs/`
- Extend the default theme with custom color palettes
- Disable preflight to avoid conflicts with existing styles

Configuration files:
- `tailwind.config.js` - Tailwind configuration
- `postcss.config.js` - PostCSS configuration with Tailwind and Autoprefixer
- `packages/styles/index.scss` - Main stylesheet with Tailwind imports

## Components

### Button

A versatile button component with multiple types, sizes, and states.

**Props:**
- `type`: 'primary' | 'success' | 'warning' | 'danger' | 'info' (default: 'primary')
- `size`: 'small' | 'medium' | 'large' (default: 'medium')
- `disabled`: boolean (default: false)
- `loading`: boolean (default: false)

**Events:**
- `click`: Emitted when button is clicked

### Input

A flexible input component with label, validation, and slots support.

**Props:**
- `modelValue`: string | number - Two-way binding
- `type`: 'text' | 'password' | 'email' | 'number' | 'tel' (default: 'text')
- `placeholder`: string
- `label`: string
- `disabled`: boolean (default: false)
- `readonly`: boolean (default: false)
- `errorMessage`: string
- `hint`: string

**Slots:**
- `prefix`: Content before input
- `suffix`: Content after input

**Events:**
- `update:modelValue`: Emitted when value changes
- `input`: Emitted on input
- `focus`: Emitted on focus
- `blur`: Emitted on blur

## Available Components

- **Button** - Versatile button with multiple variants
- **ButtonGroup** - Group related buttons together
- **Input** - Flexible input with validation
- **Select** - Dropdown selection component
- **Tag** - Label and categorization
- **Card** - Content container
- **ChartCard** - Card with chart integration
- **TypeCard** - Display type information
- **EChart** - ECharts wrapper component
- **Empty** - Empty state placeholder
- **Grid** - Responsive grid layout
- **Pagination** - Page navigation
- **Tabs** - Tab navigation
- **Tooltip** - Text tooltip

## Styling and Customization

### CSS Variables

The library uses CSS variables for easy theming:

```css
:root {
  --size-xs-height: 24px;
  --size-sm-height: 32px;
  --size-md-height: 40px;
  --size-lg-height: 48px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --color-primary: #3b82f6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
}
```

### Using Tailwind CSS Classes

Components include Tailwind CSS classes that you can override or extend:

```vue
<template>
  <Button class="px-8 py-3 rounded-full shadow-lg">
    Custom Styled Button
  </Button>
</template>
```

## Publishing to NPM

1. Build the library:
   ```bash
   npm run build:lib
   ```

2. Update version in package.json:
   ```bash
   npm version patch  # or minor/major
   ```

3. Publish to NPM:
   ```bash
   npm publish
   ```

## License

MIT