fantasia-ui 0.1.32 → 0.2.3

package/README.en.md

@@ -1,103 +1,274 @@
-# Fantasia UI Component Library
+# Fantasia UI
 
-### Upload Component
+<p align="center">
+  <img src="https://img.shields.io/npm/v/fantasia-ui" alt="npm version">
+  <img src="https://img.shields.io/npm/dm/fantasia-ui" alt="npm downloads">
+  <img src="https://img.shields.io/npm/l/fantasia-ui" alt="license">
+  <img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg" alt="vue3">
+</p>
+
+<p align="center">
+  A modern UI component library based on Vue 3 + TypeScript
+</p>
+
+<p align="center">
+  English | <a href="./README.md">简体中文</a>
+</p>
+
+## ✨ Features
+
+- 🎨 **Modern Design** - Clean and elegant design style
+- 🔧 **TypeScript** - Full TypeScript support with type definitions
+- 📦 **Tree Shaking** - Support on-demand loading to reduce bundle size
+- ⚡ **Vue 3** - Built with Vue 3 Composition API
+- 🎯 **Out of the Box** - Rich components for daily development needs
+- 📱 **Responsive** - Mobile-friendly interaction experience
+
+## 📦 Installation
+
+```bash
+# npm
+npm install fantasia-ui
+
+# yarn
+yarn add fantasia-ui
+
+# pnpm
+pnpm add fantasia-ui
+```
+
+### Optional Dependencies
+
+If you need to use icon components, install additionally:
+
+```bash
+# Install icon library (optional)
+npm install @vicons/ionicons5
+
+# If using VueUse features (optional)
+npm install @vueuse/core
+```
+
+## 🔨 Quick Start
+
+### Global Registration
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import FantasiaUI, { install } from 'fantasia-ui'
+import 'fantasia-ui/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(install)
+app.mount('#app')
+```
+
+### Import on Demand
+
+```vue
+<script setup lang="ts">
+import { FButton, FInput } from 'fantasia-ui'
+import 'fantasia-ui/dist/index.css'
+</script>
+
+<template>
+  <FButton type="primary">Button</FButton>
+  <FInput v-model="value" placeholder="Please input" />
+</template>
+```
+
+## 📚 Component List
+
+### Basic Components
+- **FButton** - Button
+- **FIcon** - Icon
+- **FText** - Text
+- **FLink** - Link
+- **FTypography** - Typography
+
+### Layout Components
+- **FContainer** - Container
+- **FRow** - Row
+- **FCol** - Column
+- **FSpace** - Space
+- **FDivider** - Divider
+
+### Data Display
+- **FCard** - Card
+- **FImage** - Image
+- **FAvatar** - Avatar
+- **FBadge** - Badge
+- **FTag** - Tag
+- **FProgress** - Progress
+- **FRate** - Rate
+- **FBreadcrumb** - Breadcrumb
+
+### Form Components
+- **FInput** - Input
+- **FSelect** - Select
+- **FUpload** - Upload
+
+### Data Components
+- **FPagination** - Pagination
+- **FTabs** - Tabs
+
+### Feedback Components
+- **FLoading** - Loading
+- **FTooltip** - Tooltip
+- **FSliderCaptcha** - Slider Captcha
+
+### Others
+- **FDropdown** - Dropdown
+- **FAffix** - Affix
+
+## 📝 Usage Examples
+
+### Button Component
+
+```vue
+<script setup lang="ts">
+import { FButton } from 'fantasia-ui'
 
-*For detailed API usage, refer to [Secondary encapsulation based on el-upload to achieve multi-functional upload - CSDN Blog](https://blog.csdn.net/weixin_60818087/article/details/148193542?spm=1001.2014.3001.5502)*
+const handleClick = () => {
+  console.log('clicked!')
+}
+</script>
+
+<template>
+  <FButton type="primary" @click="handleClick">
+    Primary Button
+  </FButton>
+  <FButton type="success">Success Button</FButton>
+  <FButton type="warning">Warning Button</FButton>
+  <FButton type="danger">Danger Button</FButton>
+</template>
+```
 
-> Import styles in `main.ts`: `import 'fantasia-ui/dist/index.css'`
-> 
-> Missing icons? You need to install **Element-plus** icons for them to display.
+### Upload Component
 
 ```vue
-<script lang="ts">
-import { FUpload } from 'fantasia-ui';
-
-export default {
-    components: {
-        FUpload
-    },
-    methods: {
-        handleUpload: (file, done, error) => {
-            try {
-                console.log(file);
-                done();
-            } catch (err) {
-                error(err);
-            }
-        }
-    }
+<script setup lang="ts">
+import { FUpload } from 'fantasia-ui'
+
+const handleUpload = (file: File, done: () => void, error: (err: any) => void) => {
+  try {
+    // Upload logic
+    console.log('Upload file:', file)
+    done()
+  } catch (err) {
+    error(err)
+  }
 }
 </script>
 
 <template>
-    <FUpload crop mosaic @upload="handleUpload" />
+  <FUpload 
+    crop 
+    mosaic 
+    @upload="handleUpload" 
+  />
 </template>
 ```
 
-### Table Component
+### Pagination Component
 
 ```vue
-<script lang="ts" setup>
-import { FTable } from 'fantasia-ui';
-import type { Actions, Columns } from 'fantasia-ui/dist';
-import { reactive } from 'vue';
-
-const data = [
-    {
-        id: 1,
-        nickname: 'Test User'
-    }
-]
-
-const columns = reactive<Columns[]>([
-    {
-        prop: 'id',
-        label: 'ID'
-    },
-    {
-        prop: 'nickname',
-        label: 'Nickname'
-    }
-])
-
-const actions = reactive<Actions[]>([
-    {
-        action: 'switch',
-        event: 'change',
-        prop: 'change',
-        config: {
-            activeText: 'Enable',
-            inactiveText: 'Disable',
-            activeValue: 0,
-            inactiveValue: 1
-        }
-    },
-    {
-        action: 'button',
-        event: 'delete',
-        label: 'Delete',
-        type: 'danger',
-        icon: 'delete'
-    }
-])
-
-const handleAction = (row: any, event: string) => {
-    switch (event) {
-        case 'change':
-            console.log("Switched");
-            break;
-        case 'delete':
-            console.log("Deleted");
-            break;
-    }
+<script setup lang="ts">
+import { FPagination } from 'fantasia-ui'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(100)
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  console.log('Current page:', page)
 }
 </script>
 
 <template>
-    <FTable :data="data" :columns="columns" :actions="actions" @action="handleAction">
-        <template #id="{ row }">
-            <h1>{{ row }}</h1>
-        </template>
-    </FTable>
+  <FPagination
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :total="total"
+    @change="handlePageChange"
+  />
+</template>
+```
+
+### Layout Components
+
+```vue
+<script setup lang="ts">
+import { FRow, FCol, FSpace } from 'fantasia-ui'
+</script>
+
+<template>
+  <!-- Grid Layout -->
+  <FRow :gutter="20">
+    <FCol :span="12">Column 1</FCol>
+    <FCol :span="12">Column 2</FCol>
+  </FRow>
+
+  <!-- Space Layout -->
+  <FSpace direction="horizontal" :size="16">
+    <FButton>Button 1</FButton>
+    <FButton>Button 2</FButton>
+    <FButton>Button 3</FButton>
+  </FSpace>
 </template>
-```
+```
+
+## 🎨 Theme Customization
+
+The component library supports theme customization via CSS variables:
+
+```css
+:root {
+  --primary-color: #409eff;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --danger-color: #f56c6c;
+  --info-color: #909399;
+}
+```
+
+## 📖 TypeScript Support
+
+Fantasia UI provides complete TypeScript type definitions:
+
+```typescript
+import type { 
+  FButtonProps,
+  FInputProps,
+  FAvatarProps,
+  // ... other types
+} from 'fantasia-ui'
+
+// Use types
+const buttonProps: FButtonProps = {
+  type: 'primary',
+  size: 'large',
+  disabled: false
+}
+```
+
+## 🔗 Links
+
+- [Changelog](./CHANGELOG.md)
+- [Optimization Report](./OPTIMIZATION.md)
+- [Issues](https://github.com/shuster/fantasia-ui/issues)
+- [Contributing Guide](./CONTRIBUTING.md)
+
+## 📄 License
+
+[MIT](./LICENSE) License © 2024 Shuster
+
+## 🤝 Contributing
+
+Issues and Pull Requests are welcome!
+
+If this project helps you, please give it a ⭐️ Star!

package/README.md

@@ -1,103 +1,274 @@
-# Fantasia UI 组件库
+# Fantasia UI
 
-### Upload 组件
+<p align="center">
+  <img src="https://img.shields.io/npm/v/fantasia-ui" alt="npm version">
+  <img src="https://img.shields.io/npm/dm/fantasia-ui" alt="npm downloads">
+  <img src="https://img.shields.io/npm/l/fantasia-ui" alt="license">
+  <img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg" alt="vue3">
+</p>
 
-*详细Api使用方法参考 [基于 el-upload 二次封装，实现多功能上传-CSDN博客](https://blog.csdn.net/weixin_60818087/article/details/148193542?spm=1001.2014.3001.5502)*
+<p align="center">
+  一个基于 Vue 3 + TypeScript 的现代化 UI 组件库
+</p>
 
-> main.ts 引入样式  import 'fantasia-ui/dist/index.css'
-> 
-> 发现没有图标？需要安装 **Element-plus** 的 icon 才会显示图标
+<p align="center">
+  <a href="./README.en.md">English</a> | 简体中文
+</p>
+
+## ✨ 特性
+
+- 🎨 **现代化设计** - 简洁优雅的设计风格
+- 🔧 **TypeScript** - 完整的类型定义支持
+- 📦 **按需加载** - 支持 Tree Shaking，减小打包体积
+- ⚡ **Vue 3** - 基于 Vue 3 Composition API
+- 🎯 **开箱即用** - 丰富的组件，满足日常开发需求
+- 📱 **响应式** - 移动端友好的交互体验
+
+## 📦 安装
+
+```bash
+# npm
+npm install fantasia-ui
+
+# yarn
+yarn add fantasia-ui
+
+# pnpm
+pnpm add fantasia-ui
+```
+
+### 可选依赖
+
+如果你需要使用图标组件，需要额外安装：
+
+```bash
+# 安装图标库（可选）
+npm install @vicons/ionicons5
+
+# 如果使用了 VueUse 相关功能（可选）
+npm install @vueuse/core
+```
+
+## 🔨 快速开始
+
+### 全局注册
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import FantasiaUI, { install } from 'fantasia-ui'
+import 'fantasia-ui/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(install)
+app.mount('#app')
+```
+
+### 按需引入
 
 ```vue
-<script lang="ts">
-import { FUpload } from 'fantasia-ui';
-
-export default {
-  components: {
-    FUpload
-  },
-  methods: {
-    handleUpload: (file, done, error) => {
-      try {
-        console.log(file);
-        done();
-      } catch (err) {
-        error(err);
-      }
-    }
-  }
+<script setup lang="ts">
+import { FButton, FInput } from 'fantasia-ui'
+import 'fantasia-ui/dist/index.css'
+</script>
+
+<template>
+  <FButton type="primary">按钮</FButton>
+  <FInput v-model="value" placeholder="请输入" />
+</template>
+```
+
+## 📚 组件列表
+
+### 基础组件
+- **FButton** - 按钮
+- **FIcon** - 图标
+- **FText** - 文本
+- **FLink** - 链接
+- **FTypography** - 排版
+
+### 布局组件
+- **FContainer** - 容器
+- **FRow** - 行
+- **FCol** - 列
+- **FSpace** - 间距
+- **FDivider** - 分割线
+
+### 数据展示
+- **FCard** - 卡片
+- **FImage** - 图片
+- **FAvatar** - 头像
+- **FBadge** - 徽章
+- **FTag** - 标签
+- **FProgress** - 进度条
+- **FRate** - 评分
+- **FBreadcrumb** - 面包屑
+
+### 表单组件
+- **FInput** - 输入框
+- **FSelect** - 选择器
+- **FUpload** - 上传
+
+### 数据组件
+- **FPagination** - 分页
+- **FTabs** - 标签页
+
+### 反馈组件
+- **FLoading** - 加载
+- **FTooltip** - 提示
+- **FSliderCaptcha** - 滑块验证
+
+### 其他
+- **FDropdown** - 下拉菜单
+- **FAffix** - 固钉
+
+## 📝 使用示例
+
+### 按钮组件
+
+```vue
+<script setup lang="ts">
+import { FButton } from 'fantasia-ui'
+
+const handleClick = () => {
+  console.log('clicked!')
 }
 </script>
 
 <template>
-  <FUpload crop mosaic @upload="handleUplaod" />
+  <FButton type="primary" @click="handleClick">
+    主要按钮
+  </FButton>
+  <FButton type="success">成功按钮</FButton>
+  <FButton type="warning">警告按钮</FButton>
+  <FButton type="danger">危险按钮</FButton>
 </template>
 ```
 
-### Table 组件
+### 上传组件
 
 ```vue
-<script lang="ts" setup>
-import { FTable } from 'fantasia-ui';
-import type { Actions, Columns } from 'fantasia-ui/dist';
-import { reactive } from 'vue';
-
-const data = [
-  {
-    id: 1,
-    nickname: '测试用户'
-  }
-]
-
-const columns = reactive<Columns[]>([
-  {
-    prop: 'id',
-    label: 'ID'
-  },
-  {
-    prop: 'nickname',
-    label: '昵称'
-  }
-])
-
-const actions = reactive<Actions[]>([
-  {
-    action: 'switch',
-    event: 'change',
-    prop: 'change',
-    config: {
-      activeText: '启用',
-      inactiveText: '禁用',
-      activeValue: 0,
-      inactiveValue: 1
-    }
-  },
-  {
-    action: 'button',
-    event: 'delete',
-    label: '删除',
-    type: 'danger',
-    icon: 'delete'
-  }
-])
-
-const handleAction = (row: any, event: string) => {
-  switch (event) {
-    case 'change':
-      console.log("切换了");
-      break;
-    case 'delete':
-      console.log("删除了");
-      break;
+<script setup lang="ts">
+import { FUpload } from 'fantasia-ui'
+
+const handleUpload = (file: File, done: () => void, error: (err: any) => void) => {
+  try {
+    // 上传逻辑
+    console.log('上传文件:', file)
+    done()
+  } catch (err) {
+    error(err)
   }
 }
 </script>
 
 <template>
-  <FTable :data="data" :columns="columns" :actions="actions" @action="handleAction">
-    <template #id="{ row }">
-      <h1>{{ row }}</h1>
-    </template>
-  </FTable>
+  <FUpload 
+    crop 
+    mosaic 
+    @upload="handleUpload" 
+  />
+</template>
+```
+
+### 分页组件
+
+```vue
+<script setup lang="ts">
+import { FPagination } from 'fantasia-ui'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(100)
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  console.log('当前页:', page)
+}
+</script>
+
+<template>
+  <FPagination
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :total="total"
+    @change="handlePageChange"
+  />
+</template>
+```
+
+### 布局组件
+
+```vue
+<script setup lang="ts">
+import { FRow, FCol, FSpace } from 'fantasia-ui'
+</script>
+
+<template>
+  <!-- 栅格布局 -->
+  <FRow :gutter="20">
+    <FCol :span="12">列 1</FCol>
+    <FCol :span="12">列 2</FCol>
+  </FRow>
+
+  <!-- 间距布局 -->
+  <FSpace direction="horizontal" :size="16">
+    <FButton>按钮 1</FButton>
+    <FButton>按钮 2</FButton>
+    <FButton>按钮 3</FButton>
+  </FSpace>
 </template>
-```
+```
+
+## 🎨 主题定制
+
+组件库支持 CSS 变量自定义主题：
+
+```css
+:root {
+  --primary-color: #409eff;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --danger-color: #f56c6c;
+  --info-color: #909399;
+}
+```
+
+## 📖 TypeScript 支持
+
+Fantasia UI 提供完整的 TypeScript 类型定义：
+
+```typescript
+import type { 
+  FButtonProps,
+  FInputProps,
+  FAvatarProps,
+  // ... 其他类型
+} from 'fantasia-ui'
+
+// 使用类型
+const buttonProps: FButtonProps = {
+  type: 'primary',
+  size: 'large',
+  disabled: false
+}
+```
+
+## 🔗 相关链接
+
+- [更新日志（中文）](./CHANGELOG.zh-CN.md)
+- [更新日志（English）](./CHANGELOG.md)
+- [优化报告](./OPTIMIZATION.md)
+- [问题反馈](https://github.com/shuster/fantasia-ui/issues)
+
+## 📄 开源协议
+
+[MIT](./LICENSE) License © 2024 Shuster
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+如果这个项目对你有帮助，请给一个 ⭐️ Star 支持一下！