@wyfex/ivue 0.9.0 → 0.11.0

package/src/components/UseElTable/types.ts

@@ -0,0 +1,144 @@
+import type { Component, ExtractPropTypes } from 'vue'
+import type { EditAttrs, GlobalConfig, UseDict } from '@/types'
+import componentProps from './props'
+
+/**
+ * props类型
+ */
+export type Props = ExtractPropTypes<typeof componentProps>
+
+/**
+ * emits接口
+ */
+export interface Emits {
+  // dictKeys事件
+  (e: 'onDictKeys', value?: string[]): void
+  //  选中数据更新事件（支持 v-model:selectionData）
+  (e: 'update:selectionData', selectionData: any[] | any): void
+  // 当前行更新事件（支持 v-model:currentRow）
+  (e: 'update:currentRow', currentRow: any): void
+  // 当前页码更新事件（支持 v-model:currentPage）
+  (e: 'update:currentPage', currentPage: number): void
+  // 每页条数更新事件（支持 v-model:pageSize）
+  (e: 'update:pageSize', pageSize: number): void
+}
+
+/**
+ * EditableCell和SpanVue组件的props接口
+ */
+export interface EditableCellAndSpanVueProps {
+  row: Record<string, any>
+  item: TableColumn
+  mergedProps: Props
+  globalConfig: GlobalConfig
+}
+
+/**
+ * 表头配置接口
+ */
+export interface Header {
+  // 表头具名插槽 为true则在模板代码中添加`<template #prop-header="{ item }"></template>`即可，可传入string自定义具名插槽名称
+  slot?: boolean | string
+  // 表头是否必填，必填表头默认在表头名称前添加*号
+  required?: boolean
+  // 必填表头*号位置，默认为before
+  asteriskPosition?: 'before' | 'after'
+}
+
+/**
+ * 编辑配置接口
+ */
+export interface Edit {
+  component: Component
+  attrs?: EditAttrs
+}
+
+/**
+ * tableColumn的extConfig接口
+ */
+export interface TableColumnExtConfig {
+  // 表头配置
+  header?: Header
+  // 编辑配置
+  edit?: Edit
+  // 过滤器
+  formatter?: Function
+  // 类名
+  class?: string | string[]
+  // 样式
+  style?: string | Record<string, unknown>
+}
+
+/**
+ * tableColumn接口
+ */
+export interface TableColumn {
+  label?: string
+  prop?: string //多级表头的父级表头可不传
+  /**
+   * 使用字典
+   * 如为boolean则将label作为dictMap的key
+   * 如为string或dict.data为string则将dict或dict.data作为dictMap的key
+   */
+  useDict?: boolean | string | UseDict
+  /**
+   * 插槽
+   * 为true则在模板代码中添加`<template #prop="{ row }"></template>`即可，可传入string自定义具名插槽名称
+   */
+  slot?: boolean | string
+  width?: string | number
+  minWidth?: string | number
+  show?: boolean
+  align?: string
+  fixed?: boolean | string
+  sortable?: boolean
+  showOverflowTooltip?: boolean
+  extConfig?: TableColumnExtConfig
+  children?: TableColumn[]
+}
+
+/**
+ * 选择器配置项
+ */
+export interface Selection {
+  label?: string
+  type?: string
+  width?: number
+  key?: string
+  enableRowClick?: boolean
+  selectable?: Function
+  disabledConfig?:
+    | Record<string, string | number | string[] | number[]>
+    | Array<{ key: string; value: string | number | string[] | number[] }>
+  align?: string
+  fixed?: boolean
+}
+
+/**
+ * UseElTable的extConfig接口
+ */
+export interface ExtConfig {
+  // 额外表头配置项
+  extraHeader?: {
+    class?: string
+    style?: { padding?: string; borderBottom?: string }
+  }
+  // 选择器配置项
+  selection?: Selection
+  // 序号列配置项
+  index?: { label?: string; width?: number; align?: string; fixed?: boolean }
+  // 展开列配置项
+  expand?: { show?: boolean; width?: number }
+  // 操作列配置项
+  operation?: { label?: string; width?: number; fixed?: string }
+  // 分页器配置项
+  pagination?: {
+    total?: number
+    marginTop?: number
+    position?: string
+    pageSizes?: number[]
+    background?: boolean
+    layout?: string
+    func?: Function
+  }
+}

package/src/components/UseSvgIcon/props.ts

@@ -0,0 +1,59 @@
+import type { PropType } from 'vue'
+import { isArray } from '@wyfex/iutils'
+import { parseUnit, isValidUnit } from '@/utils'
+
+/**
+ * 组件props
+ */
+export default {
+  /**
+   * 图标名称 必传
+   */
+  name: {
+    type: String,
+    required: true
+  },
+  /**
+   * 图标大小 默认类型为数字（单位为px）；可传带单位的字符串，如：20px、0.2rem
+   */
+  size: {
+    type: [Number, String],
+    default: 28,
+    validator(val: any) {
+      if (typeof val === 'number') return val
+      return isValidUnit(parseUnit(val)) && val
+    }
+  },
+  /**
+   * 图标颜色 可传String或Array
+   * 若传Array，只能传两项 第一项为默认图标颜色 第二项为暗黑模式下图标颜色
+   */
+  color: {
+    type: [String, Array] as PropType<string | Record<string, any>[]>,
+    validator(val: any) {
+      if (!isArray(val)) return val
+      if (!val.length) throw new Error(`color类型为Array时length不能为0`)
+      if (val.length > 2) throw new Error(`color类型为Array时length最大为2`)
+      return val
+    }
+  },
+  /**
+   * 图标的margin外边距 同css的margin规则
+   */
+  margin: {
+    type: String
+  },
+  /**
+   * 是否可点击
+   */
+  clickable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * hover类名
+   */
+  hoverClass: {
+    type: String
+  }
+}

package/src/types/index.ts

@@ -48,20 +48,19 @@ export interface DictProps {
  */
 export interface DictMap {
   // 形如：{ 性别: [{ label: '男', value: 1 },{ label: '女', value: 2 }] }
-  [key: string]: Array<{ label: string; value: string | number | boolean }>
+  [key: string]: Record<DictProps['label'] | DictProps['value'], unknown>[]
 }
+// export interface DictMap {
+//   // 形如：{ 性别: [{ label: '男', value: 1 },{ label: '女', value: 2 }] }
+//   [key: string]: Array<{ label: string; value: string | number | boolean }>
+// }
 
 /**
  * 使用字典接口
  */
 export interface UseDict {
-  // 字典数据 可为字符串、对象、字符串数组、数字数组、对象数组，如为string则为dictMap的key
-  data?:
-    | string
-    | Record<string, any>
-    | string[]
-    | number[]
-    | Record<string, any>[]
+  // 字典key 即dictMap的key，如为boolean则以label作为dictMap的key
+  key?: string | boolean
   // 字典属性
   props?: DictProps
   // 字典类名
@@ -95,14 +94,10 @@ export interface UploadConfig {
 export interface GlobalConfig {
   // 最终语言
   finalLanguage: string
-  // 最终主题模式
-  finalThemeMode: string
   // 最终字典属性
   finalDictProps: DictProps
-  // 最终字典分割符
-  finalDictDataSeparator?: string
-  // 最终表格额外高度
-  finalTableExtraHeight: number
+  // 最终字典映射
+  finalDictMap: DictMap
   // 最终上传配置
   finalUploadConfig: UploadConfig
 }