diff --git a/packages/design/src/Button.vue b/packages/design/src/Button.vue
index 63146ad8..d2ede157 100644
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@@ -39,5 +39,9 @@ const clickHandler = (...args: any[]) => {
.t-button__text {
align-items: center;
}
+
+ + .tmagic-design-button {
+ margin-left: 12px;
+ }
}
diff --git a/packages/design/src/Input.vue b/packages/design/src/Input.vue
index b666d979..1aec4ce0 100644
--- a/packages/design/src/Input.vue
+++ b/packages/design/src/Input.vue
@@ -7,6 +7,7 @@
@change="changeHandler"
@input="inputHandler"
@update:modelValue="updateModelValue"
+ @blur="blurHandler"
>
@@ -41,7 +42,7 @@ const uiComponent = ui?.component || 'el-input';
const uiProps = computed(() => ui?.props(props) || props);
-const emit = defineEmits(['change', 'input', 'update:modelValue']);
+const emit = defineEmits(['change', 'input', 'blur', 'update:modelValue']);
const instance = ref();
@@ -57,13 +58,52 @@ const updateModelValue = (...args: any[]) => {
emit('update:modelValue', ...args);
};
+const blurHandler = (...args: any[]) => {
+ emit('blur', ...args);
+};
+
defineExpose({
instance,
getInput() {
- return instance.value.input;
+ if (instance.value.input) {
+ return instance.value.input;
+ }
+ return instance.value?.$el?.querySelector('input');
},
getTextarea() {
- return instance.value.textarea;
+ if (instance.value.textarea) {
+ return instance.value.textarea;
+ }
+ return instance.value?.$el?.querySelector('textarea');
},
});
+
+
diff --git a/packages/design/src/Tabs.vue b/packages/design/src/Tabs.vue
index 36688591..455777f1 100644
--- a/packages/design/src/Tabs.vue
+++ b/packages/design/src/Tabs.vue
@@ -8,6 +8,9 @@
@tab-remove="onTabRemove"
@update:model-value="updateModelName"
>
+
+
+
diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
index 6aa27c69..30732573 100644
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@@ -32,6 +32,7 @@ export interface ButtonProps {
text?: boolean;
circle?: boolean;
icon?: any;
+ variant?: string;
}
export interface CardProps {
@@ -193,6 +194,7 @@ export interface InputProps {
rows?: number;
type?: string;
size?: FieldSize;
+ row?: number;
}
export interface InputNumberProps {
@@ -354,7 +356,7 @@ export interface TabPaneProps {
export interface TabsProps {
type?: string;
editable?: boolean;
- tabPosition?: string;
+ tabPosition?: 'left' | 'right' | 'top' | 'bottom';
modelValue?: string | number;
}
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index d36c04f7..6d135dd2 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -167,7 +167,17 @@ watchEffect(() => {
const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items);
-const tabClickHandler = (tab: any) => tabClick(mForm, tab, props);
+const tabClickHandler = (tab: any) => {
+ if (typeof tab === 'object') {
+ tabClick(mForm, tab, props);
+ } else {
+ let item = tabs.value.find((tab: any) => tab.status === tab);
+ if (!item) {
+ item = tabs.value[tab];
+ }
+ tabClick(mForm, item, props);
+ }
+};
const onTabAdd = async () => {
if (!props.name) throw new Error('dynamic tab 必须配置name');
diff --git a/packages/form/src/theme/form.scss b/packages/form/src/theme/form.scss
index a456a44d..365357d4 100644
--- a/packages/form/src/theme/form.scss
+++ b/packages/form/src/theme/form.scss
@@ -48,4 +48,8 @@
margin-left: 0 !important;
}
}
+
+ &.t-form:not(.t-form-inline) .t-form__item:last-of-type {
+ margin-bottom: var(--td-comp-margin-xxl);
+ }
}
diff --git a/packages/tdesign-vue-next-adapter/src/Input.vue b/packages/tdesign-vue-next-adapter/src/Input.vue
index 742e6fe2..04b4edbe 100644
--- a/packages/tdesign-vue-next-adapter/src/Input.vue
+++ b/packages/tdesign-vue-next-adapter/src/Input.vue
@@ -5,34 +5,46 @@
:size="size === 'default' ? 'medium' : size"
:disabled="disabled"
:placeholder="placeholder"
+ :row="row"
@keypress="inputHandler"
@change="changeHandler"
>
-
-
-
+
+
+
-
-
+
+
-
+
+
+
+
+
+
+
+
+
diff --git a/packages/tdesign-vue-next-adapter/src/index.ts b/packages/tdesign-vue-next-adapter/src/index.ts
index 35ac2d06..6745a40e 100644
--- a/packages/tdesign-vue-next-adapter/src/index.ts
+++ b/packages/tdesign-vue-next-adapter/src/index.ts
@@ -17,6 +17,7 @@ import {
Form as TForm,
FormItem as TFormItem,
InputNumber as TInputNumber,
+ LoadingDirective,
MessagePlugin,
Option as TOption,
OptionGroup as TOptionGroup,
@@ -28,7 +29,6 @@ import {
Steps as TSteps,
Switch as TSwitch,
TabPanel as TTabPanel,
- Tabs as TTabs,
Tag as TTag,
TimePicker as TTimePicker,
Tooltip as TTooltip,
@@ -59,6 +59,7 @@ import type {
OptionGroupProps,
OptionProps,
PaginationProps,
+ PopconfirmProps,
RadioButtonProps,
RadioGroupProps,
RadioProps,
@@ -80,22 +81,46 @@ import DatePicker from './DatePicker.vue';
import Dialog from './Dialog.vue';
import Icon from './Icon.vue';
import Input from './Input.vue';
+import Popconfirm from './Popconfirm.vue';
import Radio from './Radio.vue';
import RadioButton from './RadioButton.vue';
import Scrollbar from './Scrollbar.vue';
import Table from './Table.vue';
+import Tabs from './Tabs.vue';
const adapter: any = {
message: MessagePlugin,
messageBox: {
- alert: (msg: string) => {
- DialogPlugin.alert({
- body: msg,
+ alert: (msg: string, title?: string) => {
+ return new Promise((resolve, reject) => {
+ const dia = DialogPlugin.alert({
+ header: title,
+ body: msg,
+ onConfirm: (e) => {
+ dia.hide();
+ resolve(e);
+ },
+ onClose: (e) => {
+ dia.hide();
+ reject(e);
+ },
+ });
});
},
- confirm: (msg: string) => {
- DialogPlugin.confirm({
- body: msg,
+ confirm: (msg: string, title?: string) => {
+ return new Promise((resolve, reject) => {
+ const dia = DialogPlugin.confirm({
+ header: title,
+ body: msg,
+ onConfirm: (e) => {
+ dia.hide();
+ resolve(e);
+ },
+ onClose: (e) => {
+ dia.hide();
+ reject(e);
+ },
+ });
});
},
close: (msg: string) => {
@@ -118,7 +143,7 @@ const adapter: any = {
theme: props.type,
size: props.size === 'default' ? 'medium' : props.size,
icon: props.icon ? () => h(Icon, null, { default: () => h(props.icon) }) : undefined,
- variant: props.link || props.text ? 'text' : 'base',
+ variant: props.link || props.text ? 'text' : props.variant || 'base',
shape: props.circle ? 'circle' : 'rectangle',
}),
},
@@ -129,6 +154,8 @@ const adapter: any = {
shadow: props.shadow !== 'never',
hoverShadow: props.shadow === 'hover',
header: props.header,
+ bodyStyle: props.bodyStyle,
+ headerBordered: true,
}),
},
@@ -419,13 +446,8 @@ const adapter: any = {
},
tabs: {
- component: TTabs,
- props: (props: TabsProps) => ({
- addable: props.editable,
- theme: props.type === 'card' ? 'card' : 'normal',
- placement: props.tabPosition,
- value: props.modelValue,
- }),
+ component: Tabs,
+ props: (props: TabsProps) => props,
},
tag: {
@@ -462,7 +484,13 @@ const adapter: any = {
autoUpload: props.autoUpload,
}),
},
+
+ popconfirm: {
+ component: Popconfirm,
+ props: (props: PopconfirmProps) => props,
+ },
},
+ loading: LoadingDirective,
};
export default adapter;