@tmagic/tdesign-vue-next-adapter 1.7.0-beta.3 → 1.7.0-beta.4

package/dist/tmagic-tdesign-vue-next-adapter.js

@@ -1,5 +1,130 @@
-import { defineComponent, ref, watch, createBlock, openBlock, unref, createSlots, withCtx, renderSlot, computed, createElementBlock, useTemplateRef, createVNode, createElementVNode, h } from 'vue';
-import { Checkbox, DateRangePicker, DatePicker, Dialog, Textarea, InputAdornment, Input, Pagination, Popconfirm, Radio, RadioButton, Table, Tabs, MessagePlugin, LoadingDirective, Upload, Tooltip, TimePicker, Tag, TabPanel, Switch, Steps, StepItem, Select, Row, RadioGroup, OptionGroup, Option, InputNumber, FormItem, Form, Dropdown, DropdownItem, Drawer, Divider, ColorPicker, CollapsePanel, Collapse, Col, CheckboxGroup, Cascader, Card, Button, Badge, DialogPlugin } from 'tdesign-vue-next';
+import { defineComponent, ref, onMounted, createBlock, openBlock, unref, createSlots, withCtx, renderSlot, watch, computed, createElementBlock, useTemplateRef, createVNode, createElementVNode, h } from 'vue';
+import { AutoComplete, Checkbox, DateRangePicker, DatePicker, Dialog, Textarea, InputAdornment, Input, Pagination, Popconfirm, Radio, RadioButton, Table, Tabs, MessagePlugin, LoadingDirective, Upload, Tooltip, TimePicker, Tag, TabPanel, Switch, Steps, StepItem, Select, Row, RadioGroup, OptionGroup, Option, InputNumber, FormItem, Form, Dropdown, DropdownItem, Drawer, Divider, ColorPicker, CollapsePanel, Collapse, Col, CheckboxGroup, Cascader, Card, Button, Badge, DialogPlugin } from 'tdesign-vue-next';
+
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TTDesignAdapterAutoComplete"
+  },
+  __name: "AutoComplete",
+  props: {
+    modelValue: {},
+    placeholder: {},
+    clearable: { type: Boolean },
+    disabled: { type: Boolean },
+    triggerOnFocus: { type: Boolean },
+    valueKey: {},
+    debounce: {},
+    size: {},
+    placement: {},
+    fetchSuggestions: { type: Function }
+  },
+  emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const options = ref([]);
+    onMounted(() => {
+      if (typeof props.fetchSuggestions === "function") {
+        props.fetchSuggestions("", (data) => {
+          options.value = data;
+        });
+      } else if (Array.isArray(props.fetchSuggestions)) {
+        options.value = props.fetchSuggestions;
+      }
+    });
+    const filterHandler = (keyword, _option) => {
+      if (typeof props.fetchSuggestions === "function") {
+        props.fetchSuggestions(keyword, (data) => {
+          options.value = data;
+        });
+      }
+      return true;
+    };
+    const changeHandler = (...args) => {
+      emit("change", ...args);
+    };
+    const inputHandler = (...args) => {
+      emit("input", ...args);
+    };
+    const blurHandler = (...args) => {
+      emit("blur", ...args);
+    };
+    const focusHandler = (...args) => {
+      emit("focus", ...args);
+    };
+    const clickHandler = (...args) => {
+      emit("click", ...args);
+    };
+    const updateModelValue = (...args) => {
+      emit("update:modelValue", ...args);
+    };
+    __expose({
+      blur: () => {
+      },
+      focus: () => {
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(AutoComplete), {
+        ref: "autocomplete",
+        "model-value": __props.modelValue,
+        options: options.value,
+        disabled: __props.disabled,
+        placeholder: __props.placeholder,
+        size: __props.size === "default" ? "medium" : __props.size,
+        popupProps: {
+          trigger: props.triggerOnFocus ? "focus" : "hover"
+        },
+        filter: filterHandler,
+        onKeypress: inputHandler,
+        onChange: changeHandler,
+        onBlur: blurHandler,
+        onFocus: focusHandler,
+        onClick: clickHandler,
+        "onUpdate:modelValue": updateModelValue
+      }, createSlots({
+        _: 2
+        /* DYNAMIC */
+      }, [
+        _ctx.$slots.default ? {
+          name: "option",
+          fn: withCtx(({ option }) => [
+            renderSlot(_ctx.$slots, "default", { item: option })
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.prepend ? {
+          name: "prepend",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "prepend")
+          ]),
+          key: "1"
+        } : void 0,
+        _ctx.$slots.append ? {
+          name: "append",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "append")
+          ]),
+          key: "2"
+        } : void 0,
+        _ctx.$slots.prefix ? {
+          name: "prefix",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "prefix")
+          ]),
+          key: "3"
+        } : void 0,
+        _ctx.$slots.suffix ? {
+          name: "suffix",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "suffix")
+          ]),
+          key: "4"
+        } : void 0
+      ]), 1032, ["model-value", "options", "disabled", "placeholder", "size", "popupProps"]);
+    };
+  }
+});
 
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
@@ -151,7 +276,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     fullscreen: { type: Boolean },
     closeOnClickModal: { type: Boolean },
     closeOnPressEscape: { type: Boolean },
-    destroyOnClose: { type: Boolean }
+    destroyOnClose: { type: Boolean },
+    showClose: { type: Boolean }
   },
   emits: ["close", "update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -169,6 +295,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         header: __props.title,
         width: __props.width,
         mode: __props.fullscreen ? "full-screen" : "modal",
+        "close-btn": __props.showClose,
         "close-on-overlay-click": __props.closeOnClickModal,
         "close-on-esc-keydown": __props.closeOnPressEscape,
         "destroy-on-close": __props.destroyOnClose,
@@ -184,7 +311,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["visible", "attach", "header", "width", "mode", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
+      }, 8, ["visible", "attach", "header", "width", "mode", "close-btn", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
     };
   }
 });
@@ -219,7 +346,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     size: {},
     autosize: { type: [Boolean, Object] }
   },
-  emits: ["change", "input", "blur", "focus", "update:modelValue"],
+  emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -248,6 +375,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const focusHandler = (...args) => {
       emit("focus", ...args);
     };
+    const clickHandler = (...args) => {
+      emit("click", ...args);
+    };
     const updateModelValue = (...args) => {
       emit("update:modelValue", ...args);
     };
@@ -265,6 +395,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         onChange: changeHandler,
         onBlur: blurHandler,
         onFocus: focusHandler,
+        onClick: clickHandler,
         "onUpdate:modelValue": updateModelValue
       }, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows", "autosize"])) : (openBlock(), createBlock(
         unref(InputAdornment),
@@ -281,6 +412,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               onChange: changeHandler,
               onBlur: blurHandler,
               onFocus: focusHandler,
+              onClick: clickHandler,
               "onUpdate:modelValue": updateModelValue
             }, createSlots({
               _: 2
@@ -563,6 +695,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             return item.cell?.({ row, $index: rowIndex });
           };
         }
+        if (item.title) {
+          column.title = (h, data) => {
+            return item.title?.(data);
+          };
+        }
         columns.push(column);
       }
       return columns;
@@ -655,6 +792,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         addable: __props.editable,
         theme: __props.type === "card" ? "card" : "normal",
         placement: __props.tabPosition,
+        "scroll-position": "auto",
         onAdd: onTabAdd,
         onChange: tabClickHandler,
         onRemove: onTabRemove,
@@ -746,6 +884,10 @@ const adapter = {
     }
   },
   components: {
+    autocomplete: {
+      component: _sfc_main$c,
+      props: (props) => props
+    },
     badge: {
       component: Badge,
       props: (props) => ({
@@ -908,7 +1050,8 @@ const adapter = {
         labelWidth: props.labelWidth,
         name: props.prop,
         rules: props.rules,
-        help: props.extra
+        help: () => h("div", { innerHTML: props.extra }),
+        labelAlign: props.labelPosition
       })
     },
     icon: {
@@ -982,6 +1125,7 @@ const adapter = {
         multiple: props.multiple,
         valueType: props.valueKey,
         remoteMethod: props.onSearch,
+        creatable: props.allowCreate,
         size: props.size === "default" ? "medium" : props.size,
         popupProps: {
           overlayClassName: props.popperClass

package/dist/tmagic-tdesign-vue-next-adapter.umd.cjs

@@ -4,6 +4,131 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.TMagicTdesignVueNextAdapter = factory(global.Vue, global.tdesignVueNext));
 })(this, (function (vue, tdesignVueNext) { 'use strict';
 
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "TTDesignAdapterAutoComplete"
+    },
+    __name: "AutoComplete",
+    props: {
+      modelValue: {},
+      placeholder: {},
+      clearable: { type: Boolean },
+      disabled: { type: Boolean },
+      triggerOnFocus: { type: Boolean },
+      valueKey: {},
+      debounce: {},
+      size: {},
+      placement: {},
+      fetchSuggestions: { type: Function }
+    },
+    emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const emit = __emit;
+      const props = __props;
+      const options = vue.ref([]);
+      vue.onMounted(() => {
+        if (typeof props.fetchSuggestions === "function") {
+          props.fetchSuggestions("", (data) => {
+            options.value = data;
+          });
+        } else if (Array.isArray(props.fetchSuggestions)) {
+          options.value = props.fetchSuggestions;
+        }
+      });
+      const filterHandler = (keyword, _option) => {
+        if (typeof props.fetchSuggestions === "function") {
+          props.fetchSuggestions(keyword, (data) => {
+            options.value = data;
+          });
+        }
+        return true;
+      };
+      const changeHandler = (...args) => {
+        emit("change", ...args);
+      };
+      const inputHandler = (...args) => {
+        emit("input", ...args);
+      };
+      const blurHandler = (...args) => {
+        emit("blur", ...args);
+      };
+      const focusHandler = (...args) => {
+        emit("focus", ...args);
+      };
+      const clickHandler = (...args) => {
+        emit("click", ...args);
+      };
+      const updateModelValue = (...args) => {
+        emit("update:modelValue", ...args);
+      };
+      __expose({
+        blur: () => {
+        },
+        focus: () => {
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(tdesignVueNext.AutoComplete), {
+          ref: "autocomplete",
+          "model-value": __props.modelValue,
+          options: options.value,
+          disabled: __props.disabled,
+          placeholder: __props.placeholder,
+          size: __props.size === "default" ? "medium" : __props.size,
+          popupProps: {
+            trigger: props.triggerOnFocus ? "focus" : "hover"
+          },
+          filter: filterHandler,
+          onKeypress: inputHandler,
+          onChange: changeHandler,
+          onBlur: blurHandler,
+          onFocus: focusHandler,
+          onClick: clickHandler,
+          "onUpdate:modelValue": updateModelValue
+        }, vue.createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
+          _ctx.$slots.default ? {
+            name: "option",
+            fn: vue.withCtx(({ option }) => [
+              vue.renderSlot(_ctx.$slots, "default", { item: option })
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.prepend ? {
+            name: "prepend",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "prepend")
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.append ? {
+            name: "append",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "append")
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.prefix ? {
+            name: "prefix",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "prefix")
+            ]),
+            key: "3"
+          } : void 0,
+          _ctx.$slots.suffix ? {
+            name: "suffix",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "suffix")
+            ]),
+            key: "4"
+          } : void 0
+        ]), 1032, ["model-value", "options", "disabled", "placeholder", "size", "popupProps"]);
+      };
+    }
+  });
+
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "TTDesignAdapterCheckbox"
@@ -154,7 +279,8 @@
       fullscreen: { type: Boolean },
       closeOnClickModal: { type: Boolean },
       closeOnPressEscape: { type: Boolean },
-      destroyOnClose: { type: Boolean }
+      destroyOnClose: { type: Boolean },
+      showClose: { type: Boolean }
     },
     emits: ["close", "update:modelValue"],
     setup(__props, { emit: __emit }) {
@@ -172,6 +298,7 @@
           header: __props.title,
           width: __props.width,
           mode: __props.fullscreen ? "full-screen" : "modal",
+          "close-btn": __props.showClose,
           "close-on-overlay-click": __props.closeOnClickModal,
           "close-on-esc-keydown": __props.closeOnPressEscape,
           "destroy-on-close": __props.destroyOnClose,
@@ -187,7 +314,7 @@
           ]),
           _: 3
           /* FORWARDED */
-        }, 8, ["visible", "attach", "header", "width", "mode", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
+        }, 8, ["visible", "attach", "header", "width", "mode", "close-btn", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
       };
     }
   });
@@ -222,7 +349,7 @@
       size: {},
       autosize: { type: [Boolean, Object] }
     },
-    emits: ["change", "input", "blur", "focus", "update:modelValue"],
+    emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -251,6 +378,9 @@
       const focusHandler = (...args) => {
         emit("focus", ...args);
       };
+      const clickHandler = (...args) => {
+        emit("click", ...args);
+      };
       const updateModelValue = (...args) => {
         emit("update:modelValue", ...args);
       };
@@ -268,6 +398,7 @@
           onChange: changeHandler,
           onBlur: blurHandler,
           onFocus: focusHandler,
+          onClick: clickHandler,
           "onUpdate:modelValue": updateModelValue
         }, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows", "autosize"])) : (vue.openBlock(), vue.createBlock(
           vue.unref(tdesignVueNext.InputAdornment),
@@ -284,6 +415,7 @@
                 onChange: changeHandler,
                 onBlur: blurHandler,
                 onFocus: focusHandler,
+                onClick: clickHandler,
                 "onUpdate:modelValue": updateModelValue
               }, vue.createSlots({
                 _: 2
@@ -566,6 +698,11 @@
               return item.cell?.({ row, $index: rowIndex });
             };
           }
+          if (item.title) {
+            column.title = (h, data) => {
+              return item.title?.(data);
+            };
+          }
           columns.push(column);
         }
         return columns;
@@ -658,6 +795,7 @@
           addable: __props.editable,
           theme: __props.type === "card" ? "card" : "normal",
           placement: __props.tabPosition,
+          "scroll-position": "auto",
           onAdd: onTabAdd,
           onChange: tabClickHandler,
           onRemove: onTabRemove,
@@ -749,6 +887,10 @@
       }
     },
     components: {
+      autocomplete: {
+        component: _sfc_main$c,
+        props: (props) => props
+      },
       badge: {
         component: tdesignVueNext.Badge,
         props: (props) => ({
@@ -911,7 +1053,8 @@
           labelWidth: props.labelWidth,
           name: props.prop,
           rules: props.rules,
-          help: props.extra
+          help: () => vue.h("div", { innerHTML: props.extra }),
+          labelAlign: props.labelPosition
         })
       },
       icon: {
@@ -985,6 +1128,7 @@
           multiple: props.multiple,
           valueType: props.valueKey,
           remoteMethod: props.onSearch,
+          creatable: props.allowCreate,
           size: props.size === "default" ? "medium" : props.size,
           popupProps: {
             overlayClassName: props.popperClass

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.3",
+  "version": "1.7.0-beta.4",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",
@@ -36,9 +36,9 @@
   ],
   "peerDependencies": {
     "tdesign-vue-next": "^1.17.1",
-    "vue": "^3.5.22",
+    "vue": "^3.5.24",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.0-beta.3"
+    "@tmagic/design": "1.7.0-beta.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/AutoComplete.vue

@@ -0,0 +1,102 @@
+<template>
+  <TAutoComplete
+    ref="autocomplete"
+    :model-value="modelValue"
+    :options="options"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :size="size === 'default' ? 'medium' : size"
+    :popupProps="{
+      trigger: props.triggerOnFocus ? 'focus' : 'hover',
+    }"
+    :filter="filterHandler"
+    @keypress="inputHandler"
+    @change="changeHandler"
+    @blur="blurHandler"
+    @focus="focusHandler"
+    @click="clickHandler"
+    @update:modelValue="updateModelValue"
+  >
+    <template #option="{ option }" v-if="$slots.default">
+      <slot name="default" :item="option"></slot>
+    </template>
+    <template #prepend v-if="$slots.prepend">
+      <slot name="prepend"></slot>
+    </template>
+    <template #append v-if="$slots.append">
+      <slot name="append"></slot>
+    </template>
+    <template #prefix v-if="$slots.prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <template #suffix v-if="$slots.suffix">
+      <slot name="suffix"></slot>
+    </template>
+  </TAutoComplete>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { AutoComplete as TAutoComplete, type AutoCompleteOption } from 'tdesign-vue-next';
+
+import type { AutocompleteProps } from '@tmagic/design';
+
+defineOptions({
+  name: 'TTDesignAdapterAutoComplete',
+});
+
+const emit = defineEmits(['change', 'input', 'blur', 'focus', 'click', 'update:modelValue']);
+
+const props = defineProps<AutocompleteProps>();
+
+const options = ref<any[]>([]);
+
+onMounted(() => {
+  if (typeof props.fetchSuggestions === 'function') {
+    props.fetchSuggestions('', (data: any[]) => {
+      options.value = data;
+    });
+  } else if (Array.isArray(props.fetchSuggestions)) {
+    options.value = props.fetchSuggestions;
+  }
+});
+
+const filterHandler = (keyword: string, _option: AutoCompleteOption) => {
+  if (typeof props.fetchSuggestions === 'function') {
+    props.fetchSuggestions(keyword, (data: any[]) => {
+      options.value = data;
+    });
+  }
+
+  return true;
+};
+
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
+};
+
+const inputHandler = (...args: any[]) => {
+  emit('input', ...args);
+};
+
+const blurHandler = (...args: any[]) => {
+  emit('blur', ...args);
+};
+
+const focusHandler = (...args: any[]) => {
+  emit('focus', ...args);
+};
+
+const clickHandler = (...args: any[]) => {
+  emit('click', ...args);
+};
+
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
+};
+
+defineExpose({
+  blur: () => {},
+  focus: () => {},
+});
+</script>

package/src/Dialog.vue

@@ -5,6 +5,7 @@
     :header="title"
     :width="width"
     :mode="fullscreen ? 'full-screen' : 'modal'"
+    :close-btn="showClose"
     :close-on-overlay-click="closeOnClickModal"
     :close-on-esc-keydown="closeOnPressEscape"
     :destroy-on-close="destroyOnClose"

package/src/Input.vue

@@ -12,6 +12,7 @@
     @change="changeHandler"
     @blur="blurHandler"
     @focus="focusHandler"
+    @click="clickHandler"
     @update:modelValue="updateModelValue"
   ></TTextarea>
   <TInputAdornment v-else>
@@ -31,6 +32,7 @@
       @change="changeHandler"
       @blur="blurHandler"
       @focus="focusHandler"
+      @click="clickHandler"
       @update:modelValue="updateModelValue"
     >
       <template #prefix-icon v-if="$slots.prefix">
@@ -59,7 +61,7 @@ const props = defineProps<
   }
 >();
 
-const emit = defineEmits(['change', 'input', 'blur', 'focus', 'update:modelValue']);
+const emit = defineEmits(['change', 'input', 'blur', 'focus', 'click', 'update:modelValue']);
 
 const textareaRef = useTemplateRef('textarea');
 
@@ -92,6 +94,10 @@ const focusHandler = (...args: any[]) => {
   emit('focus', ...args);
 };
 
+const clickHandler = (...args: any[]) => {
+  emit('click', ...args);
+};
+
 const updateModelValue = (...args: any[]) => {
   emit('update:modelValue', ...args);
 };

package/src/Table.vue

@@ -67,6 +67,12 @@ const tableColumns = computed(() => {
       };
     }
 
+    if (item.title) {
+      column.title = (h: any, data: any) => {
+        return item.title?.(data);
+      };
+    }
+
     columns.push(column);
   }
 

package/src/Tabs.vue

@@ -4,6 +4,7 @@
     :addable="editable"
     :theme="type === 'card' ? 'card' : 'normal'"
     :placement="tabPosition"
+    scroll-position="auto"
     @add="onTabAdd"
     @change="tabClickHandler"
     @remove="onTabRemove"

package/src/index.ts

@@ -35,6 +35,7 @@ import {
 } from 'tdesign-vue-next';
 
 import type {
+  AutocompleteProps,
   BadgeProps,
   ButtonProps,
   CardProps,
@@ -75,6 +76,7 @@ import type {
   UploadProps,
 } from '@tmagic/design';
 
+import AutoComplete from './AutoComplete.vue';
 import Checkbox from './Checkbox.vue';
 import DatePicker from './DatePicker.vue';
 import Dialog from './Dialog.vue';
@@ -168,6 +170,10 @@ const adapter: any = {
     },
   },
   components: {
+    autocomplete: {
+      component: AutoComplete,
+      props: (props: AutocompleteProps) => props,
+    },
     badge: {
       component: TBadge,
       props: (props: BadgeProps) => ({
@@ -348,7 +354,8 @@ const adapter: any = {
         labelWidth: props.labelWidth,
         name: props.prop,
         rules: props.rules,
-        help: props.extra,
+        help: () => h('div', { innerHTML: props.extra }),
+        labelAlign: props.labelPosition,
       }),
     },
 
@@ -434,6 +441,7 @@ const adapter: any = {
         multiple: props.multiple,
         valueType: props.valueKey,
         remoteMethod: props.onSearch,
+        creatable: props.allowCreate,
         size: props.size === 'default' ? 'medium' : props.size,
         popupProps: {
           overlayClassName: props.popperClass,