@wx-design/components 2.0.0-alpha.10 → 2.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wx-design/components",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "description": "",
   "type": "module",
   "main": "./lib/index.js",
@@ -38,11 +38,11 @@
     "lodash": "^4.17.21",
     "number-precision": "^1.6.0",
     "vue": "^3.3.7",
-    "vxe-pc-ui": "4.10.6",
-    "vxe-table": "4.17.0"
+    "vxe-pc-ui": "4.14.16",
+    "vxe-table": "4.19.0-beta.14"
   },
   "peerDependencies": {
     "@element-plus/icons-vue": "2",
-    "element-plus": "^2.2"
+    "element-plus": "^2.6"
   }
 }

package/types/index.d.ts

@@ -1,31 +1,43 @@
-import { VxeTablePropTypes } from 'vxe-table'
-import { App, Plugin } from 'vue'
-import { SabTable, SabTableSet, SabDesignConfigProvider } from './table'
+import { VxeTablePropTypes } from "vxe-table";
+import { App, Plugin } from "vue";
+import { SabTable, SabTableSet, SabDesignConfigProvider } from "./table";
 
-import { SabSelect } from './select'
-import { SabModal } from './modal'
+import { SabSelect } from "./select";
+import { SabModal } from "./modal";
+import { SabInput } from "./input";
 
-export { SabTable, SabTableSet, SabDesignConfigProvider, SabSelect, SabModal }
+export {
+  SabTable,
+  SabTableSet,
+  SabDesignConfigProvider,
+  SabSelect,
+  SabModal,
+  SabInput,
+};
 
-declare module '@vue/runtime-core' {
+declare module "@vue/runtime-core" {
   export interface GlobalComponents {
     // 表格
-    SabTable: typeof SabTable
-    SabTableSet: typeof SabTableSet
+    SabTable: typeof SabTable;
+    SabTableSet: typeof SabTableSet;
 
     // 下拉选择器
-    SabSelect: typeof SabSelect
+    SabSelect: typeof SabSelect;
+
     // 弹窗
-    SabModal: typeof SabModal
+    SabModal: typeof SabModal;
+
+    // 输入框
+    SabInput: typeof SabInput;
 
     // 全局配置项
-    SabDesignConfigProvider: typeof SabDesignConfigProvider
+    SabDesignConfigProvider: typeof SabDesignConfigProvider;
   }
 }
 
 export namespace SABTable {
-  export * from './table'
-  export import SabTablePropTypes = VxeTablePropTypes
+  export * from "./table";
+  export import SabTablePropTypes = VxeTablePropTypes;
 }
 
-export const SabUI: Plugin
+export const SabUI: Plugin;

package/types/input/index.d.ts

@@ -0,0 +1,83 @@
+import type { SABComponent } from "../common";
+
+// 自定义插槽
+export interface SabInputSlots {
+  default?(): any;
+  prefix?(): any;
+  suffix?(): any;
+  prepend?(): any;
+  append?(): any;
+}
+
+// 事件
+export interface SabInputEvents {
+  onFocus?(event: FocusEvent): void;
+  onBlur?(event: FocusEvent): void;
+  onInput?(value: string): void;
+  onChange?(value: string): void;
+  onClear?(): void;
+  onEnter?(event: KeyboardEvent): void;
+}
+
+export type SabInputProps = {
+  // 浮动标签文本
+  label?: string;
+  // 占位符（可选，默认使用 label）
+  placeholder?: string;
+  // 绑定值
+  modelValue?: string | number;
+  // 禁用状态
+  disabled?: boolean;
+  // 是否可清空
+  clearable?: boolean;
+  // 显示密码切换按钮
+  showPassword?: boolean;
+  // 输入框类型
+  type?: "text" | "textarea" | "password" | "number" | "email" | "url" | "tel" | "search";
+  // 输入框尺寸
+  size?: "large" | "default" | "small";
+  // 最大长度
+  maxlength?: number;
+  // 最小长度
+  minlength?: number;
+  // 是否显示字数统计
+  showWordLimit?: boolean;
+  // 是否必填
+  required?: boolean;
+  // 是否显示必填标记
+  showRequiredMark?: boolean;
+  // 是否只读
+  readonly?: boolean;
+  // 自定义前缀图标
+  prefixIcon?: string | any;
+  // 自定义后缀图标
+  suffixIcon?: string | any;
+  // 前置内容
+  prepend?: string;
+  // 后置内容
+  append?: string;
+  // 最大值（type=number时有效）
+  max?: number;
+  // 最小值（type=number时有效）
+  min?: number;
+  // 步长（type=number时有效）
+  step?: number;
+  // 是否显示必填标记
+  validateEvent?: boolean;
+  // 输入框唯一标识
+  name?: string;
+  // 行数（type=textarea时有效）
+  rows?: number;
+  // 是否自适应内容高度（type=textarea时有效）
+  autosize?: boolean | { minRows?: number; maxRows?: number };
+  // 自动补全
+  autocomplete?: string;
+  // 输入框样式类名
+  class?: string;
+  // 输入框包裹器样式类名
+  wrapperClass?: string;
+  // 是否显示标签
+  showLabel?: boolean;
+};
+
+export const SabInput: SABComponent<SabInputProps, SabInputEvents, SabInputSlots>;

package/types/select/index.d.ts

@@ -44,6 +44,8 @@ export type SabSelectProps = {
   modelValue?: any;
   // 值是否包含整个 option
   labelInValue?: boolean;
+  // 当 labelInValue 为 true 时，从 modelValue 读取值的 key
+  modelValueKey?: string;
   // 选项列表
   options?: any[];
   // 多选

package/types/table/column.d.ts

@@ -121,6 +121,8 @@ export type SabCellSelectProps<D = VxeTableDataRow> = {
   disabledKey?: string;
   // select 变更时影响的 row.value 字段
   effectValueField?: string;
+  // select 变更时影响的 row.label 字段
+  effectLabelField?: string;
   // 远程搜索
   remote?: boolean;
   // 动态获取单元格选项
@@ -285,8 +287,6 @@ export type SabColumnProps<D = VxeTableDataRow> = VxeColumnProps<D> & {
   enableAutoWidth?: boolean;
 
   // 其他
-  // 参与批量操作, 如果单元格支持编辑的话，默认 true，否则false
-  enableBatchAction?: boolean;
   // 不参与动态表头控制
   noHeaderSet?: boolean;
   // 参与表格尾部汇总

package/types/table/table-set.d.ts

@@ -1,14 +1,6 @@
 import type { VxeTableInstance } from "vxe-table";
 import type { SabColumnProps } from "./column";
 
-type PureColumn = Pick<SabColumnProps, "field" | "title" | "visible" | "fixed" | "enableBatchAction"> & { __table__seq: number };
-
-// 表格配置项存储类型
-export type SabTableSetConfig = {
-  // 存储表头排序及显隐控制
-  columns?: PureColumn[]
-}
-
 export interface TableSetProps {
   // 表名key
   name: string;
@@ -20,16 +12,14 @@ export interface TableSetProps {
   getTableConfig?: (params: {
     // 表名
     name: string;
-  }) => SabTableSetConfig | Promise<SabTableSetConfig>;
+  }) => VxeTableDefines.CustomStoreData | Promise<VxeTableDefines.CustomStoreData>;
   // 设置表格配置的方法
   setTableConfig?: (params: {
     // 表名
     name: string;
     // 表格配置项
-    config: SabTableSetConfig;
+    config: VxeTableDefines.CustomStoreData;
   }) => any;
-  // 当设置完表格的时候触发
-  onSetTableConfig?:() => void
   // vxe-table 实例
   tableRef?: VxeTableInstance;
   size?: 'small' | 'large' | 'default'
@@ -37,13 +27,9 @@ export interface TableSetProps {
 
 // ColumnSet 表头设置配置
 export interface TableSetColumnsProps {
-  // 表格传入的 columns
-  columns?: SabColumnProps[]
-  // 初始列表配置
-  initColumns?: PureColumn[];
+  // 表名key
+  name: string;
   // vxe-table 实例
   tableRef?: VxeTableInstance;
-  // 展示批量操作列
-  showBatchActionColumn?: boolean
   size?: 'small' | 'large' | 'default'
 }

package/types/table/table.d.ts

@@ -90,6 +90,10 @@ export type SabTableProps<D = VxeTableDataRow> = VxeTableProps<D> & {
   };
   // 动态表头设置的时候是否采用销毁重新渲染的方式
   reloadWithDestroy?: boolean
+  customConfig?: VxeTablePropTypes.CustomConfig<D> & {
+    // 是否使用 sab 样式的自定义配置弹窗
+    useSabModal?: boolean;
+  }
 };
 
 // 表格插槽