@complex-suite/component-antd 4.10.12

package/history.md

@@ -0,0 +1,325 @@
+
+### Tips
+
+### ToDo
+- ListView的TableMenu实现级联
+- 通过antd实现基础主题色的设置:全局样式
+- table布局考虑计算准确性
+- SimpleTable的插槽和菜单逻辑同步
+- Import的complex属性适配，接收一个复杂对象实现，具体的名称和URL解析考虑单独参数或者额外包装
+- 统一的布局切换逻辑实现方案
+- - quick优化，参数优化配置细分
+
+### Doing
+- 简化SimpleTable，可自定义组件，通过此组件实现ListEdit
+
+### `4.10.12`
+- refactor: 将TypeScript类型导入语法升级为type关键字形式。
+
+### `4.10.11`
+- fix: 修正`QuickList`的`onEditSubmit`未自动关闭编辑弹窗的问题，并在浮动弹窗相关组件添加获取弹窗实例的函数。
+
+### `4.10.10`
+- feat: 适配`Date`相关的`complexDisabledDate` `rangeLimit`配置项，实现复杂日期禁止函数和时间范围限制相关功能。
+
+### `4.10.9`
+- feat: `QuickList` 的 `onEditSubmit` 函数添加自定义传参供外部特殊调用使用。
+
+### `4.10.8`
+- feat: MenuView和TableMenu适配MenuValue的事件修饰符。
+
+### `4.10.6` `4.10.7`
+- feat: 修正cascader级联选择器未适配filter的BUG。
+
+### `4.10.4` `4.10.5`
+- refactor: 迁移 `localIconProps` 类型定义至 `type.ts` 文件，解决循环依赖。
+- refactor: 调整 `dataConfig` 的导入方式，由 `antdConfig.dataConfig` 改为直接导入，解决循环依赖。
+
+### `4.10.3`
+- feat: 重构 `QuickList` 的编辑逻辑，新增 `startEdit` 函数以提高灵活性和可扩展性。
+- feat: 为 `QuickList` 的 `buildData` 方法调用增加 `originData` 参数，支持基于模板创建数据。
+
+### `4.10.1` `4.10.2`
+- feat: 搭建测试流程
+
+### `4.9.5`
+- feat: 输出AutoRender,ChoiceInfo,PaginationView,TableMenu模板组件
+
+### `4.9.4`
+- fix: 修正AutoText未正确接收attrs的BUG
+
+### `4.9.1` `4.9.2` `4.9.3`
+- feat: 修改模块加载逻辑为ES2020
+- feat: antdConfig等配置项更改为reactive对象
+
+### `4.8.17` - `4.8.20`
+- feat: config=>antdConfig,style迁移到dataConfig中
+
+### `4.8.15` `4.8.16`
+- feat: SelectText适配$color模式，此模式下取config.style.color的颜色动态赋值
+
+### `4.8.14`
+- feat: 输出AutoSpin组件
+
+### `4.8.12` `4.8.13`
+- chore: 升级依赖，适配新版SelectEdit
+- feat: QuickList的editThrottle=>editDebounce
+- feat: EmptyPic=>EmptyImage
+- feat: 添加ErrorImage
+- feat: ImageViewer添加图片加载失败判断逻辑
+
+### `4.8.11`
+- chore: 适配DefaultSelectEdit的filter函数
+
+### `4.8.8` `4.8.9` `4.8.10`
+- feat!: 重大变化：优化样式自动构建整体逻辑，为全局统一样式实现基础
+- feat: 添加SelectText组件，展示SelectValue
+
+### `4.8.7`
+- fix: 修正SimpleTable的行高与Antd的Table保持一致
+
+### `4.8.6`
+- chore: 基于AI优化代码
+
+### `4.8.5`
+- chore: 升级依赖
+- feat: 删除QuickTrack
+
+### `4.8.4`
+- feat: 添加FlexBox组件，实现基础大屏布局
+
+### `4.8.3`
+- fix: 修正config.showValue未正确解析数组的BUG
+
+### `4.8.1` `4.8.2`
+- chore: 升级依赖
+- chore: 优化Float相关功能
+- chore: 稳定版
+
+### `4.6.35` `4.6.36`
+- chore: 升级依赖
+- feat: 级联列表组件
+- chore: QuickList优化render模块功能
+- chore: 优化Float相关功能
+
+### `4.6.33`
+- chore: 升级依赖
+- chore: SimpleTable无数据样式同步antd
+
+### `4.6.31` `4.6.32`
+- chore: 升级data依赖,同步ChoiceData改动
+- feat: 适配SortData列表排序
+- feat: TableView添加事件['choice', 'sort']
+
+### `4.6.30`
+- chore: 升级data依赖,适配CustomEdit的model配置项优化
+
+### `4.6.29`
+- chore: ImageViewer的class优化，样式优化
+
+### `4.6.27` `4.6.28`
+- chore: 升级依赖
+- feat: ImportView的事件更改为change
+- refactor: ImportView使用组合式API重构，修正数据变更未触发校验的BUG
+
+### `4.6.26`
+- fix: 修正AutoText在text变更后直接计算宽度的BUG
+- feat: ModalView添加destroyOnClose配置项，默认为真，减少dom结构的同时保证默认情况下每次打开的加载存在，避免BUG
+
+### `4.6.24` `4.6.25`
+- fix: 修正TableMenu中间hidden后错误break的BUG
+- chore: ListEdit仅作为数据结构存在，不统一处理
+
+### `4.6.23`
+- chore: 初步视频优化FormEdit/ListEdit数据格式
+
+### `4.6.22`
+- chore: 全局优化Promise返回逻辑
+
+### `4.6.18` - `4.6.21`
+- chore: 全局优化width赋值
+- chore: 升级data依赖,适配ComplexData的常见方法去除$符
+
+### `4.6.16` `4.6.17`
+- chore: 优化iconDict构建逻辑
+- chore: 优化按钮icon与文字的间隔
+
+### `4.6.15`
+- chore: 升级data依赖,适配DefaultSimpleEdit.disabled更改为InterfaceValue结构
+- chore: 优化编辑的disabled传值逻辑
+- fix: 修正PaginationView的sizeSelect展示错误的BUG
+
+### `4.6.13`
+- feat: 适配File的isUrl配置项
+
+### `4.6.11` `4.6.12`
+- chore: 升级data依赖,优化refreshData调用
+- chore: 优化openEdit函数
+- chore: 优化SingleImport.renderContent
+
+### `4.6.8` `4.6.9` `4.6.10`
+- chore: 升级data依赖,同步icon变更
+- feat: 文件上传组件通过图片查看器实现图片的特殊处理
+
+### `4.6.7`
+- chore: 升级data依赖,Edit适配DefaultMod的hidden/frozen属性
+- chore: 开发环境添加observe检查
+
+### `4.6.5` `4.6.6`
+- chore: ImageViewer无图优化，添加localIcon
+
+### `4.6.3` `4.6.4`
+- fix: 修正widthCalculator
+
+### `4.6.2`
+- chore: 升级data依赖
+- feat: tablePayload.payload.target => tablePayload.payload.column
+- feat: 适配MenuValue.confirm/hidden
+- feat: 适配TableMenu.disabled
+- feat: 添加ImageViewer
+- feat: 删除SimpleTableContent
+- feat: 适配ListEdit:兼容问题暂不可用
+- feat: 添加EditTable
+
+### `4.6.1`
+- chore: 升级data依赖
+- chore: 升级plugin依赖
+
+### `4.4.10` `4.4.11`
+- chore: 升级data依赖
+- chore: 升级plugin依赖
+- feat: Edit/Info添加onInit函数，在加载后可对数据在特殊处理如排序等
+
+### `4.4.5` - `4.4.9`
+- chore: 升级data依赖
+- chore: 升级plugin依赖
+
+### `4.4.4`
+- chore: 升级data插件
+- feat: 添加基础的轨迹类
+
+### `4.4.2` `4.4.3`
+- feat: 适配SearchData的异步加载
+
+### `4.4.1`
+- feat: 适配生命周期优化
+
+### `4.3.35`
+- chore: 优化quick相关路径
+- feat: 实现基础的Float布局
+- fix: 修正AutoText在文本变化时未重新计算宽度的BUG
+- feat: 添加LayoutResizeObserver类，基于PluginLayout初步兼容ResizeObserver
+
+### `4.3.34`
+- chore: 升级data插件适配triggerMethod的节流参数，QuickList的节流参数默认值添加
+
+### `4.3.33`
+- chore: 升级data插件适配可能存在的depth数据
+
+### `4.3.32`
+- feat: 适配Vue3的插件加载模式，优化可配置项，优化PluginLayout的引用逻辑
+
+### `4.3.29` - `4.3.31`
+- feat: 适配DictionaryData/DefaultMod的collapse折叠判断值
+- chore: 优化PluginLayout的全局引用逻辑
+- chore: layout升级
+
+### `4.3.27` `4.2.28`
+- feat: 适配SelectEdit的search配置项
+
+### `4.3.26`
+- feat: SearchArea/EditArea/EditView添加enter属性，检索默认为真，为真则监控子组件input的回车事件，触发后QuickList检索默认触发，简化操作
+
+### `4.3.24` `4.3.25`
+- chore: 规范命名，tsx文件由之前的ts后缀修正为tsx后缀
+- chore: 优化未使用变量前缀
+
+### `4.3.23`
+- chore: 优化QuickList的页面结构，仅edit/info时不构建主div
+- chore: 优化编辑回调，非标准编辑全部默认走$editChange函数，通过此函数分流
+
+### `4.3.21` `4.3.22`
+- feat: 适配优化rule校验
+
+### `4.3.19` `4.3.20`
+- chore: 优化icon
+
+### `4.3.18`
+- feat: 适配custom的双向绑定加载
+
+### `4.3.17`
+- chore: 优化TableView的autoText的attrs设置
+
+### `4.3.16`
+- fix: 修正ButtonView的upload传参错误的BUG
+
+### `4.3.15`
+- chore: 优化undefined校验
+
+### `4.3.12` - `4.3.14`
+- feat: 拆分上传组件
+- chore: 优化上传组件类型
+- feat: 适配上传组件的complex属性
+
+### `4.3.11`
+- feat: QuickList的事件由menu拆分成search/table
+- chore: 升级依赖，适配时间范围限制
+
+### `4.3.8` `4.3.9` `4.3.10`
+- feat: 按钮适配防抖
+- chore: Cascader名称统一
+- fix: 修正ImportView的文件判断BUG
+
+### `4.3.5` `4.3.6` `4.3.7`
+- chore: 优化代码
+- feat: ImportView的文件下载逻辑实现
+
+### `4.3.1` - `4.3.4`
+- feat: 适配4.3版本data
+- feat: 删除无用输出
+
+### `4.2.10` `4.2.11`
+- feat: ListView => QuickList
+- feat: 添加QuickPanel
+- feat: 全局添加emits-持续优化中
+
+### `4.2.9`
+- fix: EditArea: data生成完成后再进行list赋值，避免list提前赋值导致的EditView提前加载导致的数据为空的加载
+
+### `4.2.6` `4.2.7` `4.2.8`
+- chore: 升级data依赖
+- fix: 修正class生成
+
+### `4.2.5`
+- feat: ListView添加reset/destory
+
+### `4.2.4`
+- chore: 升级data依赖,适配select
+
+### `4.2.3`
+- chore: 升级依赖，修正错误引用
+
+### `4.2.2`
+- chore: 优化layout传值逻辑，更新插件
+
+### `4.2.1`
+- feat: 适配新版data
+- feat: Table的滚动跟随列表而非检索和分页器
+- feat: 实现InfoView的展示，接收观察函数
+- feat: 实现InfoItem/EditItem两个组件，form中不交互的值通过InfoItem实现
+- fix: InfoItem的lable样式还原
+- chore: 简化Attrs调用
+
+### `4.1.4`
+- feat: Select的分页和插槽实现
+
+### `4.1.3`
+- chore: 升级data依赖,适配非编辑模块
+- fix: 修正样式和类型
+
+### `4.1.2`
+- chore: 升级plugin依赖,适配新版layout
+- chore: 优化ModalView的菜单属性
+
+### `4.1.1`
+- feat: 基于v4版本的ant-design和complex-component构建模板

package/icon.ts

@@ -0,0 +1,65 @@
+import { Component, VNode, h, reactive } from 'vue'
+import { SearchOutlined, SettingOutlined, PlusOutlined, DeleteOutlined, ContainerOutlined, EditOutlined, ReloadOutlined, SyncOutlined, CloseOutlined, StopOutlined, DownloadOutlined, UploadOutlined, LinkOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
+import type { MenuValue } from '@complex-suite/data'
+import EmptyImage from "./src/icons/EmptyImage.vue"
+import ErrorImage from "./src/icons/ErrorImage.vue"
+import type { localIconProps } from './type'
+
+export const iconDict: Record<string, (props?: Record<PropertyKey, any>) => VNode> = reactive({
+  search: (props) => h(SearchOutlined, props),
+  setting: (props) => h(SettingOutlined, props),
+  build: (props) => h(PlusOutlined, props),
+  delete: (props) => h(DeleteOutlined, props),
+  info: (props) => h(ContainerOutlined, props),
+  edit: (props) => h(EditOutlined, props),
+  reset: (props) => h(ReloadOutlined, props),
+  refresh: (props) => h(SyncOutlined, props),
+  close: (props) => h(CloseOutlined, props),
+  stop: (props) => h(StopOutlined, props),
+  export: (props) => h(DownloadOutlined, props),
+  import: (props) => h(UploadOutlined, props),
+  link: (props) => h(LinkOutlined, props),
+  down: (props) => h(DownOutlined, props),
+  up: (props) => h(UpOutlined, props)
+})
+
+export const localIconDict: Record<string, Component> = {
+  emptyImage: EmptyImage,
+  errorImage: ErrorImage
+}
+
+const icon = reactive({
+  parse(name: MenuValue['icon']) {
+    if (name) {
+      if (typeof name === 'string') {
+        if (iconDict[name]) {
+          return iconDict[name]({
+            class: 'complex-icon'
+          })
+        } else {
+          console.error(`警告:${name}对应的icon未定义！`)
+          return name
+        }
+      } else {
+        return name() as VNode
+      }
+    } else {
+      return undefined
+    }
+  },
+  local(name: string, props: localIconProps = {}) {
+    if (name) {
+      if (localIconDict[name]) {
+        return h(localIconDict[name], props)
+      } else {
+        console.error(`警告:${name}对应的localIcon未定义！`)
+        return name
+      }
+    } else {
+      return undefined
+    }
+  }
+})
+
+export default icon
+

package/index.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest'
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(1 + 2).toBe(3)
+})

package/index.ts

@@ -0,0 +1,55 @@
+import AutoSpin from "./src/AutoSpin.vue"
+import AutoText from "./src/AutoText.vue"
+import SelectText from "./src/SelectText.vue"
+import MenuView from "./src/MenuView"
+import ButtonView from "./src/ButtonView"
+import SimpleTable from "./src/SimpleTable"
+import TableView from "./src/TableView"
+import ModalView from "./src/ModalView"
+import InfoView from "./src/InfoView"
+import InfoArea from "./src/InfoArea"
+import EditView from "./src/EditView"
+import EditArea from "./src/EditArea"
+import SearchArea from "./src/SearchArea"
+import ImageViewer from "./src/ImageViewer"
+import FlexBox from "./src/FlexBox"
+import AutoRender from "./src/components/AutoRender"
+import ChoiceInfo from "./src/components/ChoiceInfo.vue"
+import PaginationView from "./src/components/PaginationView"
+import TableMenu from "./src/components/TableMenu"
+import QuickList from "./quick/QuickList"
+import QuickCascade from "./quick/QuickCascade"
+import QuickEdit from "./quick/QuickEdit"
+import QuickFloat from "./quick/QuickFloat"
+import plugin from "./plugin"
+import antdConfig from "./antdConfig"
+
+export const ComplexAutoSpin = AutoSpin
+export const ComplexAutoText = AutoText
+export const ComplexSelectText = SelectText
+export const ComplexMenuView = MenuView
+export const ComplexButtonView = ButtonView
+export const ComplexSimpleTable = SimpleTable
+export const ComplexTableView = TableView
+export const ComplexModalView = ModalView
+export const ComplexInfoView = InfoView
+export const ComplexInfoArea = InfoArea
+export const ComplexEditView = EditView
+export const ComplexEditArea = EditArea
+export const ComplexSearchArea = SearchArea
+export const ComplexImageViewer = ImageViewer
+export const ComplexFlexBox = FlexBox
+export const ComplexAutoRender = AutoRender
+export const ComplexChoiceInfo = ChoiceInfo
+export const ComplexPaginationView = PaginationView
+export const ComplexTableMenu = TableMenu
+export const ComplexQuickList = QuickList
+export const ComplexQuickCascade = QuickCascade
+export const ComplexQuickEdit = QuickEdit
+export const ComplexQuickFloat = QuickFloat
+
+export {
+  antdConfig
+}
+
+export default plugin

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@complex-suite/component-antd",
+  "version": "4.10.12",
+  "description": "a complex component by antd v4",
+  "type": "module",
+  "main": "index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MarAngle/complex-component-antd.git"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.2.6",
+    "dayjs": "^1.11.0",
+    "@complex-suite/utils": "2.10.5",
+    "@complex-suite/component": "4.10.4",
+    "@complex-suite/plugin": "4.10.2",
+    "@complex-suite/data": "4.10.9"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vitest": "^4.0.7",
+    "jsdom": "^27.1.0",
+    "@vitejs/plugin-vue": "^5.1.1",
+    "@vitejs/plugin-vue-jsx": "^4.0.0"
+  },
+  "keywords": [
+    "complex",
+    "component",
+    "antd"
+  ],
+  "author": "MarAngle",
+  "license": "ISC",
+  "scripts": {
+    "check": "tsc --noEmit",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "release": "npm publish --registry=https://registry.npmjs.org"
+  }
+}

package/plugin.ts

@@ -0,0 +1,95 @@
+import { App, reactive } from "vue"
+import type { FormInstance } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import type { Dayjs } from 'dayjs'
+import customParseFormat from "dayjs/plugin/customParseFormat"
+import { date } from '@complex-suite/plugin'
+import type { PluginLayout } from '@complex-suite/plugin'
+import { Data, FormValue, DefaultEdit, SimpleDateEdit } from "@complex-suite/data"
+import type { ruleOption } from "@complex-suite/data"
+import LayoutResizeObserver from "./LayoutResizeObserver"
+import './src/style/index.css'
+import antdConfig from "./antdConfig"
+
+export type ComplexComponentAntdOptions = {
+  reactive?: boolean
+  style?: boolean
+  pluginLayout?: PluginLayout
+}
+
+const defaultParseRule = function(ruleValue: ruleOption, form: Record<PropertyKey, any>) {
+  const currentRuleValue = { ...ruleValue } as any
+  if (currentRuleValue.validator) {
+    currentRuleValue.validator = function(rule: any, value: any, callback: any) {
+      const res = ruleValue.validator!(value, form, rule, callback)
+      if (typeof res === 'boolean') {
+        return res ? Promise.resolve() : Promise.reject()
+      } else {
+        return res
+      }
+    }
+  }
+  return currentRuleValue
+}
+
+const plugin = {
+  install: function(_app: App, options: ComplexComponentAntdOptions = {}) {
+    // dayjs扩展插件
+    dayjs.extend(customParseFormat)
+
+    if (options.reactive !== false) {
+      Data.$format = function(data, formatConfig) {
+        if (formatConfig && formatConfig.recommend) {
+          return reactive(data) as Data
+        } else {
+          return data
+        }
+      }
+    }
+    if (options.style !== false) {
+      antdConfig.initStyle()
+    }
+    if (options && options.pluginLayout) {
+      antdConfig.pluginLayout = options.pluginLayout
+      LayoutResizeObserver.init(options.pluginLayout)
+    }
+    FormValue.clearValidate = function(formValue, ...args: Parameters<FormInstance['clearValidate']>) {
+      if (formValue.ref) {
+        (formValue.ref as FormInstance).clearValidate(...args)
+      }
+    }
+    FormValue.validate = function(formValue, ...args: Parameters<FormInstance['validate']>) {
+      if (formValue.ref) {
+        return (formValue.ref as FormInstance).validate(...args)
+      } else {
+        return Promise.reject({ status: 'fail', code: 'no ref' })
+      }
+    }
+
+    DefaultEdit.$parseRule = defaultParseRule
+
+    date.pushParse('dayjs', value => dayjs(value))
+  
+    SimpleDateEdit.$parseDate = function(dateValue) {
+      if (typeof dateValue.value === 'string') {
+        return date.getData('dayjs', dateValue.value)
+      } else {
+        return dateValue.value
+      }
+    }
+  
+    SimpleDateEdit.$compareDate = function(target, other) {
+      return (other as Dayjs).valueOf() - (target as Dayjs).valueOf()
+    }
+  
+    SimpleDateEdit.$parse = function(value, format) {
+      return value != undefined ? dayjs(value, format) : value
+    }
+  
+    SimpleDateEdit.$collect = function(value, format) {
+      return value != undefined ? (value as Dayjs).format(format) : value
+    }
+  }
+}
+
+export default plugin

package/quick/QuickCascade.tsx

@@ -0,0 +1,107 @@
+import { defineComponent, h, PropType, VNode } from "vue"
+import type { AutoItemPayloadType } from "../src/dictionary/AutoItem"
+import type { tablePayload } from "../src/TableView"
+import ModalView from "../src/ModalView"
+import type { ModalViewProps } from "../src/ModalView"
+import QuickList from "./QuickList"
+import type { QuickListProps } from "./QuickList"
+
+export interface QuickCascadeProps {
+  list: QuickListProps
+  sublist: {
+    name: string
+    props: QuickListProps
+    show?: (payload: tablePayload) => void
+    modal?: Partial<ModalViewProps> // 子列表弹窗配置
+    render?: (props: QuickListProps) => VNode
+  }
+}
+
+export default defineComponent({
+  name: 'QuickCascade',
+  emits: {
+    search: (prop: string, _payload: AutoItemPayloadType<'edit'>)  => {
+      return !!prop
+    },
+    table: (prop: string, _payload: tablePayload)  => {
+      return !!prop
+    },
+    subSearch: (prop: string, _payload: AutoItemPayloadType<'edit'>)  => {
+      return !!prop
+    },
+    subTable: (prop: string, _payload: tablePayload)  => {
+      return !!prop
+    },
+  },
+  props: {
+    list: {
+      type: Object as PropType<QuickCascadeProps['list']>,
+      required: true
+    },
+    sublist: {
+      type: Object as PropType<QuickCascadeProps['sublist']>,
+      required: true
+    }
+  },
+  methods: {
+    renderList() {
+      return h(QuickList, {
+        ref: 'list',
+        onSearch: (prop, payload) => {
+          this.$emit('search', prop, payload)
+        },
+        onTable: (prop, payload) => {
+          this.$emit('table', prop, payload)
+          if (prop === '$sublist') {
+            this.openSublist(payload)
+          }
+        },
+        ...this.list
+      })
+    },
+    renderSublist() {
+      return h(
+        ModalView,
+        {
+          ref: 'sublist-modal',
+          menu: ['close'],
+          ...this.sublist.modal
+        },
+        {
+          default: () => this.$renderSublist()
+        }
+      )
+    },
+    $renderSublist() {
+      if (!this.sublist.render) {
+        return h(QuickList, {
+          ref: 'sublist',
+          onSearch: (prop, payload) => {
+            this.$emit('subSearch', prop, payload)
+          },
+          onTable: (prop, payload) => {
+            this.$emit('subTable', prop, payload)
+          },
+          ...this.sublist.props
+        })
+      } else {
+        return this.sublist.render(this.sublist.props)
+      }
+    },
+    openSublist(payload: tablePayload) {
+      (this.$refs['sublist-modal'] as InstanceType<typeof ModalView>).show(this.sublist.name)
+      if (this.sublist.show) {
+        this.sublist.show(payload)
+      }
+    },
+  },
+
+  /**
+   * 主要模板
+
+   * @returns {VNode}
+   */
+  render() {
+    return [this.renderList(), this.renderSublist()]
+  }
+})