Tav-ui NPM | npm.io

tav-ui

tav-ui 是基于 Vue 3 + Typescript + Vite 技术开发的前端 Vue 组件库。该项目采用pnpm+monorepo进行包管理,使用gulp控制打包流程,rollup进行打包。

环境依赖 node16 pnpm7

tips

文件中用到的自定义类型必须手动复制粘贴过去
组件 prop 提出来放在同层的 types 中导入使用
通过 pnpm plop:cmp 创建组件
每个组件必须只有一个导出，可以把之前的复合组件拆开，参考 basic-*
每次迁移组件结束后打一次包查看 dist 下是否生成 type 文件夹
utils/hooks/components 中如果用到 utils/hooks/components 的情况，不能直接通过入口导入，要找到确定的文件再导入，避免循环依赖
组件必须有 name，格式：TaXx 驼峰命名
script setup 添加 name 的方式:

defineOptions({
  name: 'TaDropDown',
})

禁止在 vue sfc 中出现 script lang="tsx" 的写法，rollup 解析不完整可能会报错。建议：只有用到了 template 或 style 才写 Vue SFC，否则直接写 ts、tsx 文件即可
refactor(build): element-plus kevin fixed up =>

theme-chalk/gulpfile.ts error, downgrade chalk5.0 to chalk4.1.2; 2. not file or dir .vue?xxxx&lang.tsx, change lang=tsx to .tsx or .ts

打包发布

需要先

git tag v0.0.1
git push --tag

等待 github action 自动发布即可，发布进度在 github 仓库中的 actions 下查看

本地调试

pnpm build 打出 dist
修改自己项目中的 package.json tav-ui 路径为 "tav-ui": "file:/Users/i7eo/Documents/Company/XA-Castianta/tav-ui/dist/tav-ui"
重新 yarn install 即可查看

TalePro

所有对象配置均改为 xxxconfig 和 vxetable 风格一致，例如: filter => filterFormConfig，使用前请先查看 vxegrid api 和 tablepro 下的 types
ifShow 均改为 enable 和 vxetable 保持一致
按钮权限打散到每个按钮中

tav-ui v8.0.0+ 改动：全局注入属性，需要添加 appId、userInfo。每个项目都需要加，appId、userInfo 与 components 属性同层级。

表格列配置使用方法：

项目入口 app.vue 中注入 columnsGetApi, columnsSetApi
具体页面使用时，引入 useRouter getTableProId，如下：

import { useRouter } from 'vue-router'
import { getTableProId } from 'tav-ui'

手动生成唯一 id，传递给 tablepro，如下：

const router = useRouter()
const tableProId = ref < string > ''
tableProId.value = getTableProId(router, 'all')

然后在 tablepro 的 customactionconfig 中设置 column 为 true 即可。

需要注意的是：

持久化过程中需要给每个 table 生成唯一 id，目前 getTableProId 逻辑的实现是取当前页面的 router name，与传入的字符串组合，所以必须要保证每个 router 都有唯一的英文 name。
表格 column 要使用右侧的列设置,field 中不能含有下划线_,会影响到 key 的取值

//错误示例
columns: [
  {
    field: 'group_1',
    title: '分组1',

    children: [
      {
        field: 'group_1_1',
        title: '分组1-1',
        customRender: () => {
          return 'sssss'
        },
      },
      {
        field: 'group_1_2',
        title: '分组1-2',
      },
    ],
  },
]
//正确示例
columns: [
  {
    field: 'group1',
    title: '分组1',

    children: [
      {
        field: 'group11',
        title: '分组1-1',
        customRender: () => {
          return 'sssss'
        },
      },
      {
        field: 'group12',
        title: '分组1-2',
      },
    ],
  },
]

持久化过程中需要给每个table生成唯一id，目前getTableProId逻辑的实现是取当前页面的router name，与传入的字符串组合，所以必须要保证每个router都有唯一的英文name。
如果表头有层级则每一层必须加field,field也要保持唯一

monorepo vue3 ant-design-vue

@ant-design/colors @ant-design/icons-vue @floating-ui/dom @iconify/iconify @purge-icons/generated @vueuse/core @vueuse/shared @zxcvbn-ts/core ant-design-vue exceljs js-pinyin lodash-es qrcode resize-observer-polyfill sortablejs vue-types vxe-table xe-utils

@infinitebrahmanuniverse/nolb-tav @everything-registry/sub-chunk-2880

2 days ago

2 days ago

2 days ago

2 days ago

2 days ago

2 days ago

6 days ago

5 days ago

5 days ago

13 days ago

14 days ago

17 days ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

11 months ago

11 months ago

11 months ago

9 months ago

9 months ago

9 months ago

10 months ago

8 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago