Merge branch 'feat/combolist'

packages/ui-vue/components/combo-list/src/combo-list.component.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, SetupContext } from 'vue';
 import { comboListProps, ComboListProps } from './combo-list.props';
+import { ButtonEdit } from '../../button-edit';
 export default defineComponent({
   name: 'FComboList',
   props: comboListProps,
@@ -7,7 +8,9 @@ export default defineComponent({
   setup(props: ComboListProps, context: SetupContext) {
     return () => {
       return (
-        <div id={props.id}>combo-list</div>
+        <>
+          <ButtonEdit id={props.id} />
+        </>
       );
     };
   }

packages/ui-vue/components/combo-list/src/combo-list.props.ts

@@ -1,55 +1,99 @@
 import { ExtractPropTypes } from "vue";
-import { ViewType, EnumTypeProp } from './types';
+import { ViewType, EnumType, Type } from './types';
 
+/**
+ * 下拉列表属性
+ */
 export const comboListProps = {
   /**
    * 组件标识
    */
-  id: String,
+  id: Type(String),
   /**
    * 可选，是否禁用
-   * 默认为false
+   * 默认为`false`
    */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
+  disabled: Type({ default: false, type: Boolean }),
   /**
    * 可选，是否只读
-   * 默认为false
+   * 默认为`false`
    */
-  readonly: {
-    type: Boolean,
-    default: false
-  },
+  readonly: Type({ default: false, type: Boolean }),
   /**
    * 最大输入长度
    */
-  maxLength: Number,
+  maxLength: Type(Number),
   /**
    * 占位符
    */
-  placeholder: String,
+  placeholder: Type(String),
   /**
    * 可选，是否启用清空
    * 默认启用
    */
-  enableClear: {
-    type: Boolean,
-    default: true
-  },
+  enableClear: Type({ default: true, type: Boolean }),
   /**
    * 可选，鼠标悬停时是否显示控件值
    * 默认显示
    */
-  enableTitle: {
-    type: Boolean,
-    default: true
-  },
+  enableTitle: Type({ default: true, type: Boolean }),
   /**
    * 可选，下拉列表值展示方式
-   * 支持text | tag，即文本或标签，默认为ViewType.Text，即文本方式
+   * 支持text | tag，即文本或标签，默认为`ViewType.Text`，即文本方式`text`
    */
-  viewType: EnumTypeProp(ViewType.Text, ViewType),
+  viewType: EnumType(ViewType.Text, ViewType),
+  /**
+   * 可选，字段映射
+   */
+  mapFields: Type(Object),
+  /**
+   * 下拉数据源
+   */
+  data: Type(Array),
+  /**
+   * 可选，数据源id字段
+   * 默认为`id`
+   */
+  idField: Type({ default: 'id', type: String }),
+  /**
+   * 可选，数据源值字段
+   * 默认为`id`
+   */
+  valueField: Type({ default: 'id', type: String }),
+  /**
+   * 可选，数据源显示字段
+   * 默认为`label`
+   */
+  textField: Type({ default: 'label', type: String }),
+  /**
+   * 可选，是否支持多选
+   * 默认`false`
+   */
+  multiSelect: Type({default: false, type: Boolean}),
+  /**
+   * 数据源地址
+   */
+  uri: Type(String),
+  /**
+   * 可选，最大高度
+   * 默认`200`
+   */
+  maxHeight: Type({default: 200, type: Number}),
+  /**
+   * 可选，是否支持远端过滤
+   * 默认`false`
+   */
+  remoteSearch: Type({default: false, type: Boolean}),
+  /**
+   * 可选，清空值时隐藏面板
+   * 默认`true`
+   */
+  hidePanelOnClear: Type({default: true, type: Boolean}),
+  /**
+   * 可选，分隔符
+   * 默认`,`
+   */
+  separator: Type({default: ',', type: String}),
+
 };
 export type ComboListProps = ExtractPropTypes<typeof comboListProps>;

packages/ui-vue/components/combo-list/src/types.ts

@@ -1,3 +1,4 @@
+import { Prop } from 'vue';
 /**
  * 下拉列表展现方式
  */
@@ -6,12 +7,20 @@ export enum ViewType {
   Tag = 'tag'
 };
 /**
- * 枚举类型属性描述
+ * 原始类型
+ * @param options options
+ * @returns 
+ */
+export function Type<T, D>(options: Prop<T, D>) {
+  return options;
+}
+/**
+ * 枚举类型
  * @param defaultValue 默认值
  * @param enumType 枚举类型
  * @returns 
  */
-export function EnumTypeProp<T extends string | number>(defaultValue: T, enumType: Record<symbol, T>) {
+export function EnumType<T extends string | number>(defaultValue: T, enumType: Record<symbol, T>) {
   return {
     default: defaultValue,
     validator: (value: T) => Object.values(enumType).includes(value)