@tmagic/tdesign-vue-next-adapter 1.7.0-beta.0 → 1.7.0-beta.2

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

@@ -1,7 +1,7 @@
-import { defineComponent, ref, watch, createBlock, openBlock, unref, createSlots, withCtx, renderSlot, computed, createElementBlock, createVNode, createElementVNode, useTemplateRef, h } from 'vue';
-import { Checkbox, DateRangePicker, DatePicker, Dialog, Textarea, InputAdornment, Input, Popconfirm, Radio, RadioButton, Table, Tabs, LoadingDirective, Upload, Tooltip, TimePicker, Tag, TabPanel, Switch, Steps, StepItem, Select, Row, RadioGroup, Pagination, OptionGroup, Option, InputNumber, FormItem, Form, Dropdown, DropdownItem, Drawer, Divider, ColorPicker, CollapsePanel, Collapse, Col, CheckboxGroup, Cascader, Card, Button, Badge, MessagePlugin, DialogPlugin } from 'tdesign-vue-next';
+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';
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "TTDesignAdapterCheckbox"
   },
@@ -65,7 +65,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     type: { default: "date" },
@@ -106,6 +106,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return __props.type.endsWith("range") ? (openBlock(), createBlock(unref(DateRangePicker), {
         key: 0,
+        "allow-input": "",
+        clearable: "",
+        "enable-time-picker": "",
         modelValue: __props.modelValue,
         mode: mode.value,
         placeholder: [__props.startPlaceholder || "", __props.endPlaceholder || ""],
@@ -118,6 +121,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": updateModelValue
       }, null, 8, ["modelValue", "mode", "placeholder", "disabled", "size", "separator", "format", "valueType"])) : (openBlock(), createBlock(unref(DatePicker), {
         key: 1,
+        clearable: "",
         modelValue: __props.modelValue,
         mode: mode.value,
         placeholder: __props.placeholder,
@@ -133,7 +137,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "TTDesignAdapterDialog"
   },
@@ -186,7 +190,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$1 = { class: "t-t-design-adapter-icon t-icon" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "TTDesignAdapterIcon"
   },
@@ -200,7 +204,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{
     name: "TTDesignAdapterInput"
   },
@@ -212,32 +216,55 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     placeholder: {},
     rows: {},
     type: {},
-    size: {},
-    row: {}
+    size: {}
   },
-  emits: ["change", "input", "update:modelValue"],
+  emits: ["change", "input", "blur", "focus", "update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
+    const textareaRef = useTemplateRef("textarea");
+    watch(
+      [textareaRef, () => props.rows],
+      ([val, rows]) => {
+        if (val && rows) {
+          const el = val.$el.querySelector("textarea");
+          if (el) {
+            el.rows = rows;
+          }
+        }
+      },
+      { immediate: 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 updateModelValue = (...args) => {
       emit("update:modelValue", ...args);
     };
     return (_ctx, _cache) => {
       return __props.type === "textarea" ? (openBlock(), createBlock(unref(Textarea), {
         key: 0,
+        ref: "textarea",
         modelValue: __props.modelValue,
         size: __props.size === "default" ? "medium" : __props.size,
         disabled: __props.disabled,
         placeholder: __props.placeholder,
-        row: __props.row,
+        rows: __props.rows,
         onKeypress: inputHandler,
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "disabled", "placeholder", "row"])) : (openBlock(), createBlock(
+        onChange: changeHandler,
+        onBlur: blurHandler,
+        onFocus: focusHandler,
+        "onUpdate:modelValue": updateModelValue
+      }, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows"])) : (openBlock(), createBlock(
         unref(InputAdornment),
         { key: 1 },
         createSlots({
@@ -250,6 +277,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               placeholder: __props.placeholder,
               onKeypress: inputHandler,
               onChange: changeHandler,
+              onBlur: blurHandler,
+              onFocus: focusHandler,
               "onUpdate:modelValue": updateModelValue
             }, createSlots({
               _: 2
@@ -296,6 +325,51 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TTDesignAdapterPagination"
+  },
+  __name: "Pagination",
+  props: {
+    layout: {},
+    hideOnSinglePage: { type: Boolean },
+    curPage: {},
+    pageSizes: {},
+    pageSize: {},
+    total: {},
+    size: {}
+  },
+  emits: ["size-change", "current-change", "update:current-page", "update:page-size"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleCurrentChange = (...args) => {
+      emit("current-change", ...args);
+    };
+    const handleSizeChange = (...args) => {
+      emit("size-change", ...args);
+    };
+    const updateCurrentPage = (...args) => {
+      emit("update:current-page", ...args);
+    };
+    const updatePageSize = (...args) => {
+      emit("update:page-size", ...args);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Pagination), {
+        total: __props.total,
+        current: __props.curPage,
+        size: __props.size === "small" ? "small" : "medium",
+        "page-size": __props.pageSize,
+        "page-size-options": __props.pageSizes,
+        onCurrentChange: handleCurrentChange,
+        onPageSizeChange: handleSizeChange,
+        "onUpdate:current": updateCurrentPage,
+        "onUpdate:pageSize": updatePageSize
+      }, null, 8, ["total", "current", "size", "page-size", "page-size-options"]);
+    };
+  }
+});
+
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
     name: "TTDesignAdapterPopconfirm"
@@ -602,8 +676,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
+const messageBox = (options) => MessagePlugin(options.type || "info", {
+  duration: options.duration || 3e3,
+  content: options.message
+});
+messageBox.success = MessagePlugin.success;
+messageBox.error = MessagePlugin.error;
+messageBox.warning = MessagePlugin.warning;
+messageBox.info = MessagePlugin.info;
+const zIndex = ref(0);
+const DEFAULT_INITIAL_Z_INDEX = 2500;
+const useZIndex = (zIndexOverrides) => {
+  const zIndexInjection = zIndexOverrides;
+  const initialZIndex = computed(() => {
+    const zIndexFromInjection = unref(zIndexInjection);
+    return zIndexFromInjection ?? DEFAULT_INITIAL_Z_INDEX;
+  });
+  const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
+  const nextZIndex = () => {
+    zIndex.value += 1;
+    return currentZIndex.value;
+  };
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex
+  };
+};
 const adapter = {
-  message: MessagePlugin,
+  adapterType: "tdesign-vue-next",
+  message: messageBox,
   messageBox: {
     alert: (msg, title) => {
       return new Promise((resolve, reject) => {
@@ -655,7 +757,7 @@ const adapter = {
       props: (props) => ({
         theme: props.type,
         size: props.size === "default" ? "medium" : props.size,
-        icon: props.icon ? () => h(_sfc_main$7, null, { default: () => h(props.icon) }) : void 0,
+        icon: props.icon ? () => h(_sfc_main$8, null, { default: () => h(props.icon) }) : void 0,
         variant: props.link || props.text ? "text" : props.variant || "base",
         shape: props.circle ? "circle" : "rectangle"
       })
@@ -688,7 +790,7 @@ const adapter = {
       })
     },
     checkbox: {
-      component: _sfc_main$a,
+      component: _sfc_main$b,
       props: (props) => props
     },
     checkboxGroup: {
@@ -731,11 +833,11 @@ const adapter = {
       })
     },
     datePicker: {
-      component: _sfc_main$9,
+      component: _sfc_main$a,
       props: (props) => props
     },
     dialog: {
-      component: _sfc_main$8,
+      component: _sfc_main$9,
       props: (props) => props
     },
     divider: {
@@ -808,11 +910,11 @@ const adapter = {
       })
     },
     icon: {
-      component: _sfc_main$7,
+      component: _sfc_main$8,
       props: (props) => props
     },
     input: {
-      component: _sfc_main$6,
+      component: _sfc_main$7,
       props: (props) => props
     },
     inputNumber: {
@@ -841,13 +943,8 @@ const adapter = {
       props: (props) => props
     },
     pagination: {
-      component: Pagination,
-      props: (props) => ({
-        current: props.curPage,
-        pageSizeOptions: props.pageSizes,
-        pageSize: props.pagesize,
-        total: props.total
-      })
+      component: _sfc_main$6,
+      props: (props) => props
     },
     radio: {
       component: _sfc_main$4,
@@ -963,7 +1060,8 @@ const adapter = {
       props: (props) => props
     }
   },
-  loading: LoadingDirective
+  loading: LoadingDirective,
+  useZIndex
 };
 
 export { adapter as default };

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

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.TMagicTdesignVueNextAdapter = factory(global.Vue, global.tdesignVueNext));
 })(this, (function (vue, tdesignVueNext) { 'use strict';
 
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "TTDesignAdapterCheckbox"
     },
@@ -68,7 +68,7 @@
     }
   });
 
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "DatePicker",
     props: {
       type: { default: "date" },
@@ -109,6 +109,9 @@
       return (_ctx, _cache) => {
         return __props.type.endsWith("range") ? (vue.openBlock(), vue.createBlock(vue.unref(tdesignVueNext.DateRangePicker), {
           key: 0,
+          "allow-input": "",
+          clearable: "",
+          "enable-time-picker": "",
           modelValue: __props.modelValue,
           mode: mode.value,
           placeholder: [__props.startPlaceholder || "", __props.endPlaceholder || ""],
@@ -121,6 +124,7 @@
           "onUpdate:modelValue": updateModelValue
         }, null, 8, ["modelValue", "mode", "placeholder", "disabled", "size", "separator", "format", "valueType"])) : (vue.openBlock(), vue.createBlock(vue.unref(tdesignVueNext.DatePicker), {
           key: 1,
+          clearable: "",
           modelValue: __props.modelValue,
           mode: mode.value,
           placeholder: __props.placeholder,
@@ -136,7 +140,7 @@
     }
   });
 
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "TTDesignAdapterDialog"
     },
@@ -189,7 +193,7 @@
   });
 
   const _hoisted_1$1 = { class: "t-t-design-adapter-icon t-icon" };
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "TTDesignAdapterIcon"
     },
@@ -203,7 +207,7 @@
     }
   });
 
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "TTDesignAdapterInput"
     },
@@ -215,32 +219,55 @@
       placeholder: {},
       rows: {},
       type: {},
-      size: {},
-      row: {}
+      size: {}
     },
-    emits: ["change", "input", "update:modelValue"],
+    emits: ["change", "input", "blur", "focus", "update:modelValue"],
     setup(__props, { emit: __emit }) {
+      const props = __props;
       const emit = __emit;
+      const textareaRef = vue.useTemplateRef("textarea");
+      vue.watch(
+        [textareaRef, () => props.rows],
+        ([val, rows]) => {
+          if (val && rows) {
+            const el = val.$el.querySelector("textarea");
+            if (el) {
+              el.rows = rows;
+            }
+          }
+        },
+        { immediate: 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 updateModelValue = (...args) => {
         emit("update:modelValue", ...args);
       };
       return (_ctx, _cache) => {
         return __props.type === "textarea" ? (vue.openBlock(), vue.createBlock(vue.unref(tdesignVueNext.Textarea), {
           key: 0,
+          ref: "textarea",
           modelValue: __props.modelValue,
           size: __props.size === "default" ? "medium" : __props.size,
           disabled: __props.disabled,
           placeholder: __props.placeholder,
-          row: __props.row,
+          rows: __props.rows,
           onKeypress: inputHandler,
-          onChange: changeHandler
-        }, null, 8, ["modelValue", "size", "disabled", "placeholder", "row"])) : (vue.openBlock(), vue.createBlock(
+          onChange: changeHandler,
+          onBlur: blurHandler,
+          onFocus: focusHandler,
+          "onUpdate:modelValue": updateModelValue
+        }, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows"])) : (vue.openBlock(), vue.createBlock(
           vue.unref(tdesignVueNext.InputAdornment),
           { key: 1 },
           vue.createSlots({
@@ -253,6 +280,8 @@
                 placeholder: __props.placeholder,
                 onKeypress: inputHandler,
                 onChange: changeHandler,
+                onBlur: blurHandler,
+                onFocus: focusHandler,
                 "onUpdate:modelValue": updateModelValue
               }, vue.createSlots({
                 _: 2
@@ -299,6 +328,51 @@
     }
   });
 
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "TTDesignAdapterPagination"
+    },
+    __name: "Pagination",
+    props: {
+      layout: {},
+      hideOnSinglePage: { type: Boolean },
+      curPage: {},
+      pageSizes: {},
+      pageSize: {},
+      total: {},
+      size: {}
+    },
+    emits: ["size-change", "current-change", "update:current-page", "update:page-size"],
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      const handleCurrentChange = (...args) => {
+        emit("current-change", ...args);
+      };
+      const handleSizeChange = (...args) => {
+        emit("size-change", ...args);
+      };
+      const updateCurrentPage = (...args) => {
+        emit("update:current-page", ...args);
+      };
+      const updatePageSize = (...args) => {
+        emit("update:page-size", ...args);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(tdesignVueNext.Pagination), {
+          total: __props.total,
+          current: __props.curPage,
+          size: __props.size === "small" ? "small" : "medium",
+          "page-size": __props.pageSize,
+          "page-size-options": __props.pageSizes,
+          onCurrentChange: handleCurrentChange,
+          onPageSizeChange: handleSizeChange,
+          "onUpdate:current": updateCurrentPage,
+          "onUpdate:pageSize": updatePageSize
+        }, null, 8, ["total", "current", "size", "page-size", "page-size-options"]);
+      };
+    }
+  });
+
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "TTDesignAdapterPopconfirm"
@@ -605,8 +679,36 @@
     }
   });
 
+  const messageBox = (options) => tdesignVueNext.MessagePlugin(options.type || "info", {
+    duration: options.duration || 3e3,
+    content: options.message
+  });
+  messageBox.success = tdesignVueNext.MessagePlugin.success;
+  messageBox.error = tdesignVueNext.MessagePlugin.error;
+  messageBox.warning = tdesignVueNext.MessagePlugin.warning;
+  messageBox.info = tdesignVueNext.MessagePlugin.info;
+  const zIndex = vue.ref(0);
+  const DEFAULT_INITIAL_Z_INDEX = 2500;
+  const useZIndex = (zIndexOverrides) => {
+    const zIndexInjection = zIndexOverrides;
+    const initialZIndex = vue.computed(() => {
+      const zIndexFromInjection = vue.unref(zIndexInjection);
+      return zIndexFromInjection ?? DEFAULT_INITIAL_Z_INDEX;
+    });
+    const currentZIndex = vue.computed(() => initialZIndex.value + zIndex.value);
+    const nextZIndex = () => {
+      zIndex.value += 1;
+      return currentZIndex.value;
+    };
+    return {
+      initialZIndex,
+      currentZIndex,
+      nextZIndex
+    };
+  };
   const adapter = {
-    message: tdesignVueNext.MessagePlugin,
+    adapterType: "tdesign-vue-next",
+    message: messageBox,
     messageBox: {
       alert: (msg, title) => {
         return new Promise((resolve, reject) => {
@@ -658,7 +760,7 @@
         props: (props) => ({
           theme: props.type,
           size: props.size === "default" ? "medium" : props.size,
-          icon: props.icon ? () => vue.h(_sfc_main$7, null, { default: () => vue.h(props.icon) }) : void 0,
+          icon: props.icon ? () => vue.h(_sfc_main$8, null, { default: () => vue.h(props.icon) }) : void 0,
           variant: props.link || props.text ? "text" : props.variant || "base",
           shape: props.circle ? "circle" : "rectangle"
         })
@@ -691,7 +793,7 @@
         })
       },
       checkbox: {
-        component: _sfc_main$a,
+        component: _sfc_main$b,
         props: (props) => props
       },
       checkboxGroup: {
@@ -734,11 +836,11 @@
         })
       },
       datePicker: {
-        component: _sfc_main$9,
+        component: _sfc_main$a,
         props: (props) => props
       },
       dialog: {
-        component: _sfc_main$8,
+        component: _sfc_main$9,
         props: (props) => props
       },
       divider: {
@@ -811,11 +913,11 @@
         })
       },
       icon: {
-        component: _sfc_main$7,
+        component: _sfc_main$8,
         props: (props) => props
       },
       input: {
-        component: _sfc_main$6,
+        component: _sfc_main$7,
         props: (props) => props
       },
       inputNumber: {
@@ -844,13 +946,8 @@
         props: (props) => props
       },
       pagination: {
-        component: tdesignVueNext.Pagination,
-        props: (props) => ({
-          current: props.curPage,
-          pageSizeOptions: props.pageSizes,
-          pageSize: props.pagesize,
-          total: props.total
-        })
+        component: _sfc_main$6,
+        props: (props) => props
       },
       radio: {
         component: _sfc_main$4,
@@ -966,7 +1063,8 @@
         props: (props) => props
       }
     },
-    loading: tdesignVueNext.LoadingDirective
+    loading: tdesignVueNext.LoadingDirective,
+    useZIndex
   };
 
   return adapter;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.0",
+  "version": "1.7.0-beta.2",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",
@@ -38,7 +38,7 @@
     "tdesign-vue-next": "^1.17.1",
     "vue": "^3.5.22",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.0-beta.0"
+    "@tmagic/design": "1.7.0-beta.2"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/DatePicker.vue

@@ -1,6 +1,9 @@
 <template>
   <TDateRangePicker
     v-if="type.endsWith('range')"
+    allow-input
+    clearable
+    enable-time-picker
     :modelValue="modelValue"
     :mode="mode"
     :placeholder="[startPlaceholder || '', endPlaceholder || '']"
@@ -14,6 +17,7 @@
   />
   <TDatePicker
     v-else
+    clearable
     :modelValue="modelValue"
     :mode="mode"
     :placeholder="placeholder"

package/src/Input.vue

@@ -1,13 +1,17 @@
 <template>
   <TTextarea
     v-if="type === 'textarea'"
+    ref="textarea"
     :modelValue="modelValue"
     :size="size === 'default' ? 'medium' : size"
     :disabled="disabled"
     :placeholder="placeholder"
-    :row="row"
+    :rows="rows"
     @keypress="inputHandler"
     @change="changeHandler"
+    @blur="blurHandler"
+    @focus="focusHandler"
+    @update:modelValue="updateModelValue"
   ></TTextarea>
   <TInputAdornment v-else>
     <template #prepend v-if="$slots.prepend">
@@ -24,6 +28,8 @@
       :placeholder="placeholder"
       @keypress="inputHandler"
       @change="changeHandler"
+      @blur="blurHandler"
+      @focus="focusHandler"
       @update:modelValue="updateModelValue"
     >
       <template #prefix-icon v-if="$slots.prefix">
@@ -37,6 +43,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useTemplateRef, watch } from 'vue';
 import { Input as TInput, InputAdornment as TInputAdornment, Textarea as TTextarea } from 'tdesign-vue-next';
 
 import type { InputProps } from '@tmagic/design';
@@ -45,13 +52,28 @@ defineOptions({
   name: 'TTDesignAdapterInput',
 });
 
-defineProps<
+const props = defineProps<
   InputProps & {
     modelValue: string;
   }
 >();
 
-const emit = defineEmits(['change', 'input', 'update:modelValue']);
+const emit = defineEmits(['change', 'input', 'blur', 'focus', 'update:modelValue']);
+
+const textareaRef = useTemplateRef('textarea');
+
+watch(
+  [textareaRef, () => props.rows],
+  ([val, rows]) => {
+    if (val && rows) {
+      const el = val.$el.querySelector('textarea');
+      if (el) {
+        el.rows = rows;
+      }
+    }
+  },
+  { immediate: true },
+);
 
 const changeHandler = (...args: any[]) => {
   emit('change', ...args);
@@ -61,6 +83,14 @@ const inputHandler = (...args: any[]) => {
   emit('input', ...args);
 };
 
+const blurHandler = (...args: any[]) => {
+  emit('blur', ...args);
+};
+
+const focusHandler = (...args: any[]) => {
+  emit('focus', ...args);
+};
+
 const updateModelValue = (...args: any[]) => {
   emit('update:modelValue', ...args);
 };

package/src/Pagination.vue

@@ -0,0 +1,43 @@
+<template>
+  <TPagination
+    :total="total"
+    :current="curPage"
+    :size="size === 'small' ? 'small' : 'medium'"
+    :page-size="pageSize"
+    :page-size-options="pageSizes"
+    @current-change="handleCurrentChange"
+    @page-size-change="handleSizeChange"
+    @update:current="updateCurrentPage"
+    @update:page-size="updatePageSize"
+  ></TPagination>
+</template>
+
+<script setup lang="ts">
+import { Pagination as TPagination } from 'tdesign-vue-next';
+
+import type { PaginationProps } from '@tmagic/design';
+
+defineOptions({
+  name: 'TTDesignAdapterPagination',
+});
+
+defineProps<PaginationProps>();
+
+const emit = defineEmits(['size-change', 'current-change', 'update:current-page', 'update:page-size']);
+
+const handleCurrentChange = (...args: any[]) => {
+  emit('current-change', ...args);
+};
+
+const handleSizeChange = (...args: any[]) => {
+  emit('size-change', ...args);
+};
+
+const updateCurrentPage = (...args: any[]) => {
+  emit('update:current-page', ...args);
+};
+
+const updatePageSize = (...args: any[]) => {
+  emit('update:page-size', ...args);
+};
+</script>

package/src/index.ts

@@ -1,4 +1,4 @@
-import { h } from 'vue';
+import { computed, h, Ref, ref, unref } from 'vue';
 import {
   Badge as TBadge,
   Button as TButton,
@@ -21,7 +21,6 @@ import {
   MessagePlugin,
   Option as TOption,
   OptionGroup as TOptionGroup,
-  Pagination as TPagination,
   RadioGroup as TRadioGroup,
   Row as TRow,
   Select as TSelect,
@@ -81,6 +80,7 @@ import DatePicker from './DatePicker.vue';
 import Dialog from './Dialog.vue';
 import Icon from './Icon.vue';
 import Input from './Input.vue';
+import Pagination from './Pagination.vue';
 import Popconfirm from './Popconfirm.vue';
 import Radio from './Radio.vue';
 import RadioButton from './RadioButton.vue';
@@ -88,8 +88,48 @@ import Scrollbar from './Scrollbar.vue';
 import Table from './Table.vue';
 import Tabs from './Tabs.vue';
 
+const messageBox = (options: {
+  type?: 'info' | 'success' | 'warning' | 'error';
+  message?: string;
+  dangerouslyUseHTMLString?: boolean;
+  duration?: number;
+}) =>
+  MessagePlugin(options.type || 'info', {
+    duration: options.duration || 3000,
+    content: options.message,
+  });
+
+messageBox.success = MessagePlugin.success;
+messageBox.error = MessagePlugin.error;
+messageBox.warning = MessagePlugin.warning;
+messageBox.info = MessagePlugin.info;
+
+const zIndex = ref(0);
+const DEFAULT_INITIAL_Z_INDEX = 2500;
+
+const useZIndex = (zIndexOverrides?: Ref<number>) => {
+  const zIndexInjection = zIndexOverrides;
+  const initialZIndex = computed(() => {
+    const zIndexFromInjection = unref(zIndexInjection);
+    return zIndexFromInjection ?? DEFAULT_INITIAL_Z_INDEX;
+  });
+  const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
+
+  const nextZIndex = () => {
+    zIndex.value += 1;
+    return currentZIndex.value;
+  };
+
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex,
+  };
+};
+
 const adapter: any = {
-  message: MessagePlugin,
+  adapterType: 'tdesign-vue-next',
+  message: messageBox,
   messageBox: {
     alert: (msg: string, title?: string) => {
       return new Promise((resolve, reject) => {
@@ -351,13 +391,8 @@ const adapter: any = {
     },
 
     pagination: {
-      component: TPagination,
-      props: (props: PaginationProps) => ({
-        current: props.curPage,
-        pageSizeOptions: props.pageSizes,
-        pageSize: props.pagesize,
-        total: props.total,
-      }),
+      component: Pagination,
+      props: (props: PaginationProps) => props,
     },
 
     radio: {
@@ -491,6 +526,7 @@ const adapter: any = {
     },
   },
   loading: LoadingDirective,
+  useZIndex,
 };
 
 export default adapter;