@deppon/deppon-template 2.2.1 → 2.2.3

package/README.md

@@ -1,330 +1,330 @@
-# `@deppon/deppon-template`
-
-业务组件库（Vue 3）
-
-## 安装
-
-```bash
-npm install @deppon/deppon-template
-```
-
-## 配置
-
-由于组件库使用 Less 编写样式，你需要在项目中配置 Less 支持。
-
-> 📖 **详细使用指南：**
->
-> -   [Vite 项目使用指南](./VITE_USAGE.md) - 完整的 Vite + Vue 3 使用示例
-> -   [通用使用示例](./USAGE.md) - 包含常见问题和解决方案
-
-### Vite 项目
-
-Vite 默认支持 Less，无需额外配置。如果遇到问题，确保已安装 `less`：
-
-```bash
-npm install -D less
-```
-
-**快速开始：**
-
-```vue
-<template>
-    <ProLayout :menu-items="menuItems" :active-menu="activeMenu" title="我的应用">
-        <router-view />
-    </ProLayout>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { ProLayout } from '@deppon/deppon-template';
-// ✅ Less 文件会自动导入并编译
-
-const activeMenu = ref('/home');
-const menuItems = ref([
-    { path: '/home', title: '首页' },
-    { path: '/about', title: '关于' },
-]);
-</script>
-```
-
-查看 [VITE_USAGE.md](./VITE_USAGE.md) 获取完整示例。
-
-### Webpack 项目
-
-需要安装并配置 Less 加载器：
-
-```bash
-npm install -D less less-loader
-```
-
-在 `webpack.config.js` 或 `vue.config.js` 中配置：
-
-```javascript
-module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.less$/,
-                use: ['style-loader', 'css-loader', 'less-loader'],
-            },
-        ],
-    },
-};
-```
-
-## 使用
-
-### 完整引入
-
-```vue
-<template>
-    <ProLayout :menu-items="menuItems" :active-menu="activeMenu" title="我的应用">
-        <router-view />
-    </ProLayout>
-</template>
-
-<script setup>
-import { ProLayout } from '@deppon/deppon-template';
-// 样式会自动导入（Less 文件会被自动处理）
-
-const menuItems = [
-    {
-        path: '/home',
-        title: '首页',
-        icon: HomeFilled,
-    },
-    {
-        path: '/about',
-        title: '关于',
-        icon: Document,
-    },
-];
-
-const activeMenu = '/home';
-</script>
-```
-
-### 按需引入
-
-```vue
-<template>
-    <div>
-        <ProLayout :menu-items="menuItems" />
-        <ProForm :form-items="formItems" />
-        <ProTable :columns="columns" :data="tableData" />
-    </div>
-</template>
-
-<script setup>
-// 按需导入组件，样式会自动导入
-import { ProLayout, ProForm, ProTable } from '@deppon/deppon-template';
-
-const menuItems = [];
-const formItems = [];
-const columns = [];
-const tableData = [];
-</script>
-```
-
-### 单独导入组件
-
-```vue
-<template>
-    <ProLayout :menu-items="menuItems" />
-</template>
-
-<script setup>
-// 从子路径导入，样式会自动导入
-import ProLayout from '@deppon/deppon-template/pro-layout';
-// 或者
-import { ProLayout } from '@deppon/deppon-template';
-</script>
-```
-
-### 样式说明
-
--   **自动导入**：当你导入组件时，对应的 Less 文件会自动被导入
--   **Less 编译**：Less 文件会被你的构建工具（Vite/Webpack）自动编译为 CSS
--   **:deep() 支持**：Less 文件中的 `:deep()` 语法会被正确处理
--   **无需手动导入样式**：不需要手动 `import '@deppon/deppon-template/es/pro-layout/ProLayout.vue.less'`
-
-### 完整示例（Vite + Vue 3）
-
-```vue
-<!-- App.vue -->
-<template>
-    <ProLayout
-        :menu-items="menuItems"
-        :active-menu="activeMenu"
-        title="管理系统"
-        :show-logo="true"
-        :show-header="true"
-        :fixed-header="true"
-        @collapse-change="handleCollapseChange"
-    >
-        <template #header-right>
-            <el-button>用户中心</el-button>
-        </template>
-
-        <router-view />
-    </ProLayout>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { ProLayout } from '@deppon/deppon-template';
-import { HomeFilled, Document, Setting } from '@deppon/deppon-ui/icons-vue';
-
-const activeMenu = ref('/home');
-const collapsed = ref(false);
-
-const menuItems = ref([
-    {
-        path: '/home',
-        title: '首页',
-        icon: HomeFilled,
-    },
-    {
-        path: '/documents',
-        title: '文档',
-        icon: Document,
-        children: [
-            {
-                path: '/documents/list',
-                title: '文档列表',
-            },
-        ],
-    },
-    {
-        path: '/settings',
-        title: '设置',
-        icon: Setting,
-    },
-]);
-
-const handleCollapseChange = val => {
-    console.log('侧边栏折叠状态:', val);
-};
-</script>
-```
-
-### 完整示例（Webpack + Vue 3）
-
-```vue
-<!-- App.vue -->
-<template>
-    <ProLayout :menu-items="menuItems" :active-menu="activeMenu">
-        <router-view />
-    </ProLayout>
-</template>
-
-<script>
-import { ref } from 'vue';
-import { ProLayout } from '@deppon/deppon-template';
-
-export default {
-    name: 'App',
-    components: {
-        ProLayout,
-    },
-    setup() {
-        const activeMenu = ref('/home');
-        const menuItems = ref([
-            { path: '/home', title: '首页' },
-            { path: '/about', title: '关于' },
-        ]);
-
-        return {
-            activeMenu,
-            menuItems,
-        };
-    },
-};
-</script>
-```
-
-## 使用
-
-### useScrollEnd Composable
-
-监听滚动到底部的事件。
-
-```vue
-<template>
-    <div class="scroll-container" ref="scrollContainer">
-        <!-- 内容 -->
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useScrollEnd } from '@deppon/deppon-template';
-
-const scrollContainer = ref(null);
-
-// 监听滚动到底部
-useScrollEnd(
-    () => {
-        console.log('滚动到底部了');
-        // 加载更多数据
-        loadMore();
-    },
-    50, // 距离底部的阈值（像素）
-    '.scroll-container', // 滚动容器的选择器，可选
-);
-
-const loadMore = () => {
-    // 加载更多逻辑
-};
-</script>
-```
-
-#### 参数
-
-| 参数                  | 说明                       | 类型       | 默认值                                   |
-| --------------------- | -------------------------- | ---------- | ---------------------------------------- |
-| callback              | 滚动到底部时触发的回调函数 | `function` | 必填                                     |
-| thresholds            | 距离底部的阈值（像素）     | `number`   | `0`                                      |
-| scrollElementSelector | 滚动容器的选择器           | `string`   | `null`（使用 document.scrollingElement） |
-
-### Events
-
-事件总线，用于组件间通信。基于 [mitt](https://github.com/developit/mitt) 实现，轻量级且专为浏览器设计。
-
-```vue
-<script setup>
-import { events } from '@deppon/deppon-template';
-
-// 监听事件
-events.on('some-event', data => {
-    console.log('收到事件:', data);
-});
-
-// 触发事件
-events.emit('some-event', { key: 'value' });
-
-// 移除监听
-events.off('some-event');
-</script>
-```
-
-### Track
-
-埋点工具函数。
-
-```vue
-<script setup>
-import { gt } from '@deppon/deppon-template';
-
-// 使用埋点
-const handleClick = () => {
-    const trackData = gt('gbdetail_buy_nk_pv');
-    // trackData 包含埋点所需的数据
-    console.log(trackData);
-};
-</script>
-```
-
-## License
-
-MIT
+# `@deppon/deppon-template`
+
+业务组件库（Vue 3）
+
+## 安装
+
+```bash
+npm install @deppon/deppon-template
+```
+
+## 配置
+
+由于组件库使用 Less 编写样式，你需要在项目中配置 Less 支持。
+
+> 📖 **详细使用指南：**
+>
+> -   [Vite 项目使用指南](./VITE_USAGE.md) - 完整的 Vite + Vue 3 使用示例
+> -   [通用使用示例](./USAGE.md) - 包含常见问题和解决方案
+
+### Vite 项目
+
+Vite 默认支持 Less，无需额外配置。如果遇到问题，确保已安装 `less`：
+
+```bash
+npm install -D less
+```
+
+**快速开始：**
+
+```vue
+<template>
+    <ProLayout :menu-items="menuItems" :active-menu="activeMenu" title="我的应用">
+        <router-view />
+    </ProLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ProLayout } from '@deppon/deppon-template';
+// ✅ Less 文件会自动导入并编译
+
+const activeMenu = ref('/home');
+const menuItems = ref([
+    { path: '/home', title: '首页' },
+    { path: '/about', title: '关于' },
+]);
+</script>
+```
+
+查看 [VITE_USAGE.md](./VITE_USAGE.md) 获取完整示例。
+
+### Webpack 项目
+
+需要安装并配置 Less 加载器：
+
+```bash
+npm install -D less less-loader
+```
+
+在 `webpack.config.js` 或 `vue.config.js` 中配置：
+
+```javascript
+module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.less$/,
+                use: ['style-loader', 'css-loader', 'less-loader'],
+            },
+        ],
+    },
+};
+```
+
+## 使用
+
+### 完整引入
+
+```vue
+<template>
+    <ProLayout :menu-items="menuItems" :active-menu="activeMenu" title="我的应用">
+        <router-view />
+    </ProLayout>
+</template>
+
+<script setup>
+import { ProLayout } from '@deppon/deppon-template';
+// 样式会自动导入（Less 文件会被自动处理）
+
+const menuItems = [
+    {
+        path: '/home',
+        title: '首页',
+        icon: HomeFilled,
+    },
+    {
+        path: '/about',
+        title: '关于',
+        icon: Document,
+    },
+];
+
+const activeMenu = '/home';
+</script>
+```
+
+### 按需引入
+
+```vue
+<template>
+    <div>
+        <ProLayout :menu-items="menuItems" />
+        <ProForm :form-items="formItems" />
+        <ProTable :columns="columns" :data="tableData" />
+    </div>
+</template>
+
+<script setup>
+// 按需导入组件，样式会自动导入
+import { ProLayout, ProForm, ProTable } from '@deppon/deppon-template';
+
+const menuItems = [];
+const formItems = [];
+const columns = [];
+const tableData = [];
+</script>
+```
+
+### 单独导入组件
+
+```vue
+<template>
+    <ProLayout :menu-items="menuItems" />
+</template>
+
+<script setup>
+// 从子路径导入，样式会自动导入
+import ProLayout from '@deppon/deppon-template/pro-layout';
+// 或者
+import { ProLayout } from '@deppon/deppon-template';
+</script>
+```
+
+### 样式说明
+
+-   **自动导入**：当你导入组件时，对应的 Less 文件会自动被导入
+-   **Less 编译**：Less 文件会被你的构建工具（Vite/Webpack）自动编译为 CSS
+-   **:deep() 支持**：Less 文件中的 `:deep()` 语法会被正确处理
+-   **无需手动导入样式**：不需要手动 `import '@deppon/deppon-template/es/pro-layout/ProLayout.vue.less'`
+
+### 完整示例（Vite + Vue 3）
+
+```vue
+<!-- App.vue -->
+<template>
+    <ProLayout
+        :menu-items="menuItems"
+        :active-menu="activeMenu"
+        title="管理系统"
+        :show-logo="true"
+        :show-header="true"
+        :fixed-header="true"
+        @collapse-change="handleCollapseChange"
+    >
+        <template #header-right>
+            <el-button>用户中心</el-button>
+        </template>
+
+        <router-view />
+    </ProLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ProLayout } from '@deppon/deppon-template';
+import { HomeFilled, Document, Setting } from '@deppon/deppon-ui/icons-vue';
+
+const activeMenu = ref('/home');
+const collapsed = ref(false);
+
+const menuItems = ref([
+    {
+        path: '/home',
+        title: '首页',
+        icon: HomeFilled,
+    },
+    {
+        path: '/documents',
+        title: '文档',
+        icon: Document,
+        children: [
+            {
+                path: '/documents/list',
+                title: '文档列表',
+            },
+        ],
+    },
+    {
+        path: '/settings',
+        title: '设置',
+        icon: Setting,
+    },
+]);
+
+const handleCollapseChange = val => {
+    console.log('侧边栏折叠状态:', val);
+};
+</script>
+```
+
+### 完整示例（Webpack + Vue 3）
+
+```vue
+<!-- App.vue -->
+<template>
+    <ProLayout :menu-items="menuItems" :active-menu="activeMenu">
+        <router-view />
+    </ProLayout>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { ProLayout } from '@deppon/deppon-template';
+
+export default {
+    name: 'App',
+    components: {
+        ProLayout,
+    },
+    setup() {
+        const activeMenu = ref('/home');
+        const menuItems = ref([
+            { path: '/home', title: '首页' },
+            { path: '/about', title: '关于' },
+        ]);
+
+        return {
+            activeMenu,
+            menuItems,
+        };
+    },
+};
+</script>
+```
+
+## 使用
+
+### useScrollEnd Composable
+
+监听滚动到底部的事件。
+
+```vue
+<template>
+    <div class="scroll-container" ref="scrollContainer">
+        <!-- 内容 -->
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useScrollEnd } from '@deppon/deppon-template';
+
+const scrollContainer = ref(null);
+
+// 监听滚动到底部
+useScrollEnd(
+    () => {
+        console.log('滚动到底部了');
+        // 加载更多数据
+        loadMore();
+    },
+    50, // 距离底部的阈值（像素）
+    '.scroll-container', // 滚动容器的选择器，可选
+);
+
+const loadMore = () => {
+    // 加载更多逻辑
+};
+</script>
+```
+
+#### 参数
+
+| 参数                  | 说明                       | 类型       | 默认值                                   |
+| --------------------- | -------------------------- | ---------- | ---------------------------------------- |
+| callback              | 滚动到底部时触发的回调函数 | `function` | 必填                                     |
+| thresholds            | 距离底部的阈值（像素）     | `number`   | `0`                                      |
+| scrollElementSelector | 滚动容器的选择器           | `string`   | `null`（使用 document.scrollingElement） |
+
+### Events
+
+事件总线，用于组件间通信。基于 [mitt](https://github.com/developit/mitt) 实现，轻量级且专为浏览器设计。
+
+```vue
+<script setup>
+import { events } from '@deppon/deppon-template';
+
+// 监听事件
+events.on('some-event', data => {
+    console.log('收到事件:', data);
+});
+
+// 触发事件
+events.emit('some-event', { key: 'value' });
+
+// 移除监听
+events.off('some-event');
+</script>
+```
+
+### Track
+
+埋点工具函数。
+
+```vue
+<script setup>
+import { gt } from '@deppon/deppon-template';
+
+// 使用埋点
+const handleClick = () => {
+    const trackData = gt('gbdetail_buy_nk_pv');
+    // trackData 包含埋点所需的数据
+    console.log(trackData);
+};
+</script>
+```
+
+## License
+
+MIT

package/es/index.d.ts

@@ -1,5 +1,5 @@
-export { ProField, ProFieldText, ProFieldSelect, ProFieldDatePicker } from './pro-field';
-export { default as ProForm } from './pro-form';
-export { default as ProTable } from './pro-table';
-export { default as ProLayout } from './pro-layout';
-export { default as ProDialog } from './pro-dialog';
+export { ProField, ProFieldText, ProFieldSelect, ProFieldDatePicker } from './pro-field';
+export { default as ProForm } from './pro-form';
+export { default as ProTable } from './pro-table';
+export { default as ProLayout } from './pro-layout';
+export { default as ProDialog } from './pro-dialog';

package/es/pro-dialog/index.d.ts

@@ -1,5 +1,5 @@
-import type { DefineComponent } from 'vue';
-
-declare const ProDialog: DefineComponent<Record<string, never>, Record<string, never>, any>;
-export { ProDialog };
-export default ProDialog;
+import type { DefineComponent } from 'vue';
+
+declare const ProDialog: DefineComponent<Record<string, never>, Record<string, never>, any>;
+export { ProDialog };
+export default ProDialog;