@tmagic/tdesign-vue-next-adapter 1.7.0-beta.2 → 1.7.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tmagic-tdesign-vue-next-adapter.js +155 -9
- package/dist/tmagic-tdesign-vue-next-adapter.umd.cjs +153 -7
- package/package.json +3 -3
- package/src/AutoComplete.vue +102 -0
- package/src/Dialog.vue +1 -0
- package/src/Input.vue +8 -1
- package/src/Table.vue +6 -0
- package/src/Tabs.vue +1 -0
- package/src/index.ts +10 -2
|
@@ -1,5 +1,130 @@
|
|
|
1
|
-
import { defineComponent, ref,
|
|
2
|
-
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';
|
|
1
|
+
import { defineComponent, ref, onMounted, createBlock, openBlock, unref, createSlots, withCtx, renderSlot, watch, computed, createElementBlock, useTemplateRef, createVNode, createElementVNode, h } from 'vue';
|
|
2
|
+
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';
|
|
3
|
+
|
|
4
|
+
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
5
|
+
...{
|
|
6
|
+
name: "TTDesignAdapterAutoComplete"
|
|
7
|
+
},
|
|
8
|
+
__name: "AutoComplete",
|
|
9
|
+
props: {
|
|
10
|
+
modelValue: {},
|
|
11
|
+
placeholder: {},
|
|
12
|
+
clearable: { type: Boolean },
|
|
13
|
+
disabled: { type: Boolean },
|
|
14
|
+
triggerOnFocus: { type: Boolean },
|
|
15
|
+
valueKey: {},
|
|
16
|
+
debounce: {},
|
|
17
|
+
size: {},
|
|
18
|
+
placement: {},
|
|
19
|
+
fetchSuggestions: { type: Function }
|
|
20
|
+
},
|
|
21
|
+
emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
|
|
22
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
23
|
+
const emit = __emit;
|
|
24
|
+
const props = __props;
|
|
25
|
+
const options = ref([]);
|
|
26
|
+
onMounted(() => {
|
|
27
|
+
if (typeof props.fetchSuggestions === "function") {
|
|
28
|
+
props.fetchSuggestions("", (data) => {
|
|
29
|
+
options.value = data;
|
|
30
|
+
});
|
|
31
|
+
} else if (Array.isArray(props.fetchSuggestions)) {
|
|
32
|
+
options.value = props.fetchSuggestions;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
const filterHandler = (keyword, _option) => {
|
|
36
|
+
if (typeof props.fetchSuggestions === "function") {
|
|
37
|
+
props.fetchSuggestions(keyword, (data) => {
|
|
38
|
+
options.value = data;
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
return true;
|
|
42
|
+
};
|
|
43
|
+
const changeHandler = (...args) => {
|
|
44
|
+
emit("change", ...args);
|
|
45
|
+
};
|
|
46
|
+
const inputHandler = (...args) => {
|
|
47
|
+
emit("input", ...args);
|
|
48
|
+
};
|
|
49
|
+
const blurHandler = (...args) => {
|
|
50
|
+
emit("blur", ...args);
|
|
51
|
+
};
|
|
52
|
+
const focusHandler = (...args) => {
|
|
53
|
+
emit("focus", ...args);
|
|
54
|
+
};
|
|
55
|
+
const clickHandler = (...args) => {
|
|
56
|
+
emit("click", ...args);
|
|
57
|
+
};
|
|
58
|
+
const updateModelValue = (...args) => {
|
|
59
|
+
emit("update:modelValue", ...args);
|
|
60
|
+
};
|
|
61
|
+
__expose({
|
|
62
|
+
blur: () => {
|
|
63
|
+
},
|
|
64
|
+
focus: () => {
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
return (_ctx, _cache) => {
|
|
68
|
+
return openBlock(), createBlock(unref(AutoComplete), {
|
|
69
|
+
ref: "autocomplete",
|
|
70
|
+
"model-value": __props.modelValue,
|
|
71
|
+
options: options.value,
|
|
72
|
+
disabled: __props.disabled,
|
|
73
|
+
placeholder: __props.placeholder,
|
|
74
|
+
size: __props.size === "default" ? "medium" : __props.size,
|
|
75
|
+
popupProps: {
|
|
76
|
+
trigger: props.triggerOnFocus ? "focus" : "hover"
|
|
77
|
+
},
|
|
78
|
+
filter: filterHandler,
|
|
79
|
+
onKeypress: inputHandler,
|
|
80
|
+
onChange: changeHandler,
|
|
81
|
+
onBlur: blurHandler,
|
|
82
|
+
onFocus: focusHandler,
|
|
83
|
+
onClick: clickHandler,
|
|
84
|
+
"onUpdate:modelValue": updateModelValue
|
|
85
|
+
}, createSlots({
|
|
86
|
+
_: 2
|
|
87
|
+
/* DYNAMIC */
|
|
88
|
+
}, [
|
|
89
|
+
_ctx.$slots.default ? {
|
|
90
|
+
name: "option",
|
|
91
|
+
fn: withCtx(({ option }) => [
|
|
92
|
+
renderSlot(_ctx.$slots, "default", { item: option })
|
|
93
|
+
]),
|
|
94
|
+
key: "0"
|
|
95
|
+
} : void 0,
|
|
96
|
+
_ctx.$slots.prepend ? {
|
|
97
|
+
name: "prepend",
|
|
98
|
+
fn: withCtx(() => [
|
|
99
|
+
renderSlot(_ctx.$slots, "prepend")
|
|
100
|
+
]),
|
|
101
|
+
key: "1"
|
|
102
|
+
} : void 0,
|
|
103
|
+
_ctx.$slots.append ? {
|
|
104
|
+
name: "append",
|
|
105
|
+
fn: withCtx(() => [
|
|
106
|
+
renderSlot(_ctx.$slots, "append")
|
|
107
|
+
]),
|
|
108
|
+
key: "2"
|
|
109
|
+
} : void 0,
|
|
110
|
+
_ctx.$slots.prefix ? {
|
|
111
|
+
name: "prefix",
|
|
112
|
+
fn: withCtx(() => [
|
|
113
|
+
renderSlot(_ctx.$slots, "prefix")
|
|
114
|
+
]),
|
|
115
|
+
key: "3"
|
|
116
|
+
} : void 0,
|
|
117
|
+
_ctx.$slots.suffix ? {
|
|
118
|
+
name: "suffix",
|
|
119
|
+
fn: withCtx(() => [
|
|
120
|
+
renderSlot(_ctx.$slots, "suffix")
|
|
121
|
+
]),
|
|
122
|
+
key: "4"
|
|
123
|
+
} : void 0
|
|
124
|
+
]), 1032, ["model-value", "options", "disabled", "placeholder", "size", "popupProps"]);
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
});
|
|
3
128
|
|
|
4
129
|
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
5
130
|
...{
|
|
@@ -151,7 +276,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
151
276
|
fullscreen: { type: Boolean },
|
|
152
277
|
closeOnClickModal: { type: Boolean },
|
|
153
278
|
closeOnPressEscape: { type: Boolean },
|
|
154
|
-
destroyOnClose: { type: Boolean }
|
|
279
|
+
destroyOnClose: { type: Boolean },
|
|
280
|
+
showClose: { type: Boolean }
|
|
155
281
|
},
|
|
156
282
|
emits: ["close", "update:modelValue"],
|
|
157
283
|
setup(__props, { emit: __emit }) {
|
|
@@ -169,6 +295,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
169
295
|
header: __props.title,
|
|
170
296
|
width: __props.width,
|
|
171
297
|
mode: __props.fullscreen ? "full-screen" : "modal",
|
|
298
|
+
"close-btn": __props.showClose,
|
|
172
299
|
"close-on-overlay-click": __props.closeOnClickModal,
|
|
173
300
|
"close-on-esc-keydown": __props.closeOnPressEscape,
|
|
174
301
|
"destroy-on-close": __props.destroyOnClose,
|
|
@@ -184,7 +311,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
184
311
|
]),
|
|
185
312
|
_: 3
|
|
186
313
|
/* FORWARDED */
|
|
187
|
-
}, 8, ["visible", "attach", "header", "width", "mode", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
|
|
314
|
+
}, 8, ["visible", "attach", "header", "width", "mode", "close-btn", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
|
|
188
315
|
};
|
|
189
316
|
}
|
|
190
317
|
});
|
|
@@ -216,9 +343,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
216
343
|
placeholder: {},
|
|
217
344
|
rows: {},
|
|
218
345
|
type: {},
|
|
219
|
-
size: {}
|
|
346
|
+
size: {},
|
|
347
|
+
autosize: { type: [Boolean, Object] }
|
|
220
348
|
},
|
|
221
|
-
emits: ["change", "input", "blur", "focus", "update:modelValue"],
|
|
349
|
+
emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
|
|
222
350
|
setup(__props, { emit: __emit }) {
|
|
223
351
|
const props = __props;
|
|
224
352
|
const emit = __emit;
|
|
@@ -247,6 +375,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
247
375
|
const focusHandler = (...args) => {
|
|
248
376
|
emit("focus", ...args);
|
|
249
377
|
};
|
|
378
|
+
const clickHandler = (...args) => {
|
|
379
|
+
emit("click", ...args);
|
|
380
|
+
};
|
|
250
381
|
const updateModelValue = (...args) => {
|
|
251
382
|
emit("update:modelValue", ...args);
|
|
252
383
|
};
|
|
@@ -259,12 +390,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
259
390
|
disabled: __props.disabled,
|
|
260
391
|
placeholder: __props.placeholder,
|
|
261
392
|
rows: __props.rows,
|
|
393
|
+
autosize: __props.autosize,
|
|
262
394
|
onKeypress: inputHandler,
|
|
263
395
|
onChange: changeHandler,
|
|
264
396
|
onBlur: blurHandler,
|
|
265
397
|
onFocus: focusHandler,
|
|
398
|
+
onClick: clickHandler,
|
|
266
399
|
"onUpdate:modelValue": updateModelValue
|
|
267
|
-
}, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows"])) : (openBlock(), createBlock(
|
|
400
|
+
}, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows", "autosize"])) : (openBlock(), createBlock(
|
|
268
401
|
unref(InputAdornment),
|
|
269
402
|
{ key: 1 },
|
|
270
403
|
createSlots({
|
|
@@ -279,6 +412,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
279
412
|
onChange: changeHandler,
|
|
280
413
|
onBlur: blurHandler,
|
|
281
414
|
onFocus: focusHandler,
|
|
415
|
+
onClick: clickHandler,
|
|
282
416
|
"onUpdate:modelValue": updateModelValue
|
|
283
417
|
}, createSlots({
|
|
284
418
|
_: 2
|
|
@@ -561,6 +695,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
561
695
|
return item.cell?.({ row, $index: rowIndex });
|
|
562
696
|
};
|
|
563
697
|
}
|
|
698
|
+
if (item.title) {
|
|
699
|
+
column.title = (h, data) => {
|
|
700
|
+
return item.title?.(data);
|
|
701
|
+
};
|
|
702
|
+
}
|
|
564
703
|
columns.push(column);
|
|
565
704
|
}
|
|
566
705
|
return columns;
|
|
@@ -653,6 +792,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
653
792
|
addable: __props.editable,
|
|
654
793
|
theme: __props.type === "card" ? "card" : "normal",
|
|
655
794
|
placement: __props.tabPosition,
|
|
795
|
+
"scroll-position": "auto",
|
|
656
796
|
onAdd: onTabAdd,
|
|
657
797
|
onChange: tabClickHandler,
|
|
658
798
|
onRemove: onTabRemove,
|
|
@@ -744,6 +884,10 @@ const adapter = {
|
|
|
744
884
|
}
|
|
745
885
|
},
|
|
746
886
|
components: {
|
|
887
|
+
autocomplete: {
|
|
888
|
+
component: _sfc_main$c,
|
|
889
|
+
props: (props) => props
|
|
890
|
+
},
|
|
747
891
|
badge: {
|
|
748
892
|
component: Badge,
|
|
749
893
|
props: (props) => ({
|
|
@@ -755,7 +899,7 @@ const adapter = {
|
|
|
755
899
|
button: {
|
|
756
900
|
component: Button,
|
|
757
901
|
props: (props) => ({
|
|
758
|
-
theme: props.type,
|
|
902
|
+
theme: props.type ? props.type : "default",
|
|
759
903
|
size: props.size === "default" ? "medium" : props.size,
|
|
760
904
|
icon: props.icon ? () => h(_sfc_main$8, null, { default: () => h(props.icon) }) : void 0,
|
|
761
905
|
variant: props.link || props.text ? "text" : props.variant || "base",
|
|
@@ -906,7 +1050,8 @@ const adapter = {
|
|
|
906
1050
|
labelWidth: props.labelWidth,
|
|
907
1051
|
name: props.prop,
|
|
908
1052
|
rules: props.rules,
|
|
909
|
-
help: props.extra
|
|
1053
|
+
help: () => h("div", { innerHTML: props.extra }),
|
|
1054
|
+
labelAlign: props.labelPosition
|
|
910
1055
|
})
|
|
911
1056
|
},
|
|
912
1057
|
icon: {
|
|
@@ -980,6 +1125,7 @@ const adapter = {
|
|
|
980
1125
|
multiple: props.multiple,
|
|
981
1126
|
valueType: props.valueKey,
|
|
982
1127
|
remoteMethod: props.onSearch,
|
|
1128
|
+
creatable: props.allowCreate,
|
|
983
1129
|
size: props.size === "default" ? "medium" : props.size,
|
|
984
1130
|
popupProps: {
|
|
985
1131
|
overlayClassName: props.popperClass
|
|
@@ -4,6 +4,131 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.TMagicTdesignVueNextAdapter = factory(global.Vue, global.tdesignVueNext));
|
|
5
5
|
})(this, (function (vue, tdesignVueNext) { 'use strict';
|
|
6
6
|
|
|
7
|
+
const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
|
|
8
|
+
...{
|
|
9
|
+
name: "TTDesignAdapterAutoComplete"
|
|
10
|
+
},
|
|
11
|
+
__name: "AutoComplete",
|
|
12
|
+
props: {
|
|
13
|
+
modelValue: {},
|
|
14
|
+
placeholder: {},
|
|
15
|
+
clearable: { type: Boolean },
|
|
16
|
+
disabled: { type: Boolean },
|
|
17
|
+
triggerOnFocus: { type: Boolean },
|
|
18
|
+
valueKey: {},
|
|
19
|
+
debounce: {},
|
|
20
|
+
size: {},
|
|
21
|
+
placement: {},
|
|
22
|
+
fetchSuggestions: { type: Function }
|
|
23
|
+
},
|
|
24
|
+
emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
|
|
25
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
26
|
+
const emit = __emit;
|
|
27
|
+
const props = __props;
|
|
28
|
+
const options = vue.ref([]);
|
|
29
|
+
vue.onMounted(() => {
|
|
30
|
+
if (typeof props.fetchSuggestions === "function") {
|
|
31
|
+
props.fetchSuggestions("", (data) => {
|
|
32
|
+
options.value = data;
|
|
33
|
+
});
|
|
34
|
+
} else if (Array.isArray(props.fetchSuggestions)) {
|
|
35
|
+
options.value = props.fetchSuggestions;
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
const filterHandler = (keyword, _option) => {
|
|
39
|
+
if (typeof props.fetchSuggestions === "function") {
|
|
40
|
+
props.fetchSuggestions(keyword, (data) => {
|
|
41
|
+
options.value = data;
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
return true;
|
|
45
|
+
};
|
|
46
|
+
const changeHandler = (...args) => {
|
|
47
|
+
emit("change", ...args);
|
|
48
|
+
};
|
|
49
|
+
const inputHandler = (...args) => {
|
|
50
|
+
emit("input", ...args);
|
|
51
|
+
};
|
|
52
|
+
const blurHandler = (...args) => {
|
|
53
|
+
emit("blur", ...args);
|
|
54
|
+
};
|
|
55
|
+
const focusHandler = (...args) => {
|
|
56
|
+
emit("focus", ...args);
|
|
57
|
+
};
|
|
58
|
+
const clickHandler = (...args) => {
|
|
59
|
+
emit("click", ...args);
|
|
60
|
+
};
|
|
61
|
+
const updateModelValue = (...args) => {
|
|
62
|
+
emit("update:modelValue", ...args);
|
|
63
|
+
};
|
|
64
|
+
__expose({
|
|
65
|
+
blur: () => {
|
|
66
|
+
},
|
|
67
|
+
focus: () => {
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
return (_ctx, _cache) => {
|
|
71
|
+
return vue.openBlock(), vue.createBlock(vue.unref(tdesignVueNext.AutoComplete), {
|
|
72
|
+
ref: "autocomplete",
|
|
73
|
+
"model-value": __props.modelValue,
|
|
74
|
+
options: options.value,
|
|
75
|
+
disabled: __props.disabled,
|
|
76
|
+
placeholder: __props.placeholder,
|
|
77
|
+
size: __props.size === "default" ? "medium" : __props.size,
|
|
78
|
+
popupProps: {
|
|
79
|
+
trigger: props.triggerOnFocus ? "focus" : "hover"
|
|
80
|
+
},
|
|
81
|
+
filter: filterHandler,
|
|
82
|
+
onKeypress: inputHandler,
|
|
83
|
+
onChange: changeHandler,
|
|
84
|
+
onBlur: blurHandler,
|
|
85
|
+
onFocus: focusHandler,
|
|
86
|
+
onClick: clickHandler,
|
|
87
|
+
"onUpdate:modelValue": updateModelValue
|
|
88
|
+
}, vue.createSlots({
|
|
89
|
+
_: 2
|
|
90
|
+
/* DYNAMIC */
|
|
91
|
+
}, [
|
|
92
|
+
_ctx.$slots.default ? {
|
|
93
|
+
name: "option",
|
|
94
|
+
fn: vue.withCtx(({ option }) => [
|
|
95
|
+
vue.renderSlot(_ctx.$slots, "default", { item: option })
|
|
96
|
+
]),
|
|
97
|
+
key: "0"
|
|
98
|
+
} : void 0,
|
|
99
|
+
_ctx.$slots.prepend ? {
|
|
100
|
+
name: "prepend",
|
|
101
|
+
fn: vue.withCtx(() => [
|
|
102
|
+
vue.renderSlot(_ctx.$slots, "prepend")
|
|
103
|
+
]),
|
|
104
|
+
key: "1"
|
|
105
|
+
} : void 0,
|
|
106
|
+
_ctx.$slots.append ? {
|
|
107
|
+
name: "append",
|
|
108
|
+
fn: vue.withCtx(() => [
|
|
109
|
+
vue.renderSlot(_ctx.$slots, "append")
|
|
110
|
+
]),
|
|
111
|
+
key: "2"
|
|
112
|
+
} : void 0,
|
|
113
|
+
_ctx.$slots.prefix ? {
|
|
114
|
+
name: "prefix",
|
|
115
|
+
fn: vue.withCtx(() => [
|
|
116
|
+
vue.renderSlot(_ctx.$slots, "prefix")
|
|
117
|
+
]),
|
|
118
|
+
key: "3"
|
|
119
|
+
} : void 0,
|
|
120
|
+
_ctx.$slots.suffix ? {
|
|
121
|
+
name: "suffix",
|
|
122
|
+
fn: vue.withCtx(() => [
|
|
123
|
+
vue.renderSlot(_ctx.$slots, "suffix")
|
|
124
|
+
]),
|
|
125
|
+
key: "4"
|
|
126
|
+
} : void 0
|
|
127
|
+
]), 1032, ["model-value", "options", "disabled", "placeholder", "size", "popupProps"]);
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
|
|
7
132
|
const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
|
|
8
133
|
...{
|
|
9
134
|
name: "TTDesignAdapterCheckbox"
|
|
@@ -154,7 +279,8 @@
|
|
|
154
279
|
fullscreen: { type: Boolean },
|
|
155
280
|
closeOnClickModal: { type: Boolean },
|
|
156
281
|
closeOnPressEscape: { type: Boolean },
|
|
157
|
-
destroyOnClose: { type: Boolean }
|
|
282
|
+
destroyOnClose: { type: Boolean },
|
|
283
|
+
showClose: { type: Boolean }
|
|
158
284
|
},
|
|
159
285
|
emits: ["close", "update:modelValue"],
|
|
160
286
|
setup(__props, { emit: __emit }) {
|
|
@@ -172,6 +298,7 @@
|
|
|
172
298
|
header: __props.title,
|
|
173
299
|
width: __props.width,
|
|
174
300
|
mode: __props.fullscreen ? "full-screen" : "modal",
|
|
301
|
+
"close-btn": __props.showClose,
|
|
175
302
|
"close-on-overlay-click": __props.closeOnClickModal,
|
|
176
303
|
"close-on-esc-keydown": __props.closeOnPressEscape,
|
|
177
304
|
"destroy-on-close": __props.destroyOnClose,
|
|
@@ -187,7 +314,7 @@
|
|
|
187
314
|
]),
|
|
188
315
|
_: 3
|
|
189
316
|
/* FORWARDED */
|
|
190
|
-
}, 8, ["visible", "attach", "header", "width", "mode", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
|
|
317
|
+
}, 8, ["visible", "attach", "header", "width", "mode", "close-btn", "close-on-overlay-click", "close-on-esc-keydown", "destroy-on-close", "onBeforeOpen"]);
|
|
191
318
|
};
|
|
192
319
|
}
|
|
193
320
|
});
|
|
@@ -219,9 +346,10 @@
|
|
|
219
346
|
placeholder: {},
|
|
220
347
|
rows: {},
|
|
221
348
|
type: {},
|
|
222
|
-
size: {}
|
|
349
|
+
size: {},
|
|
350
|
+
autosize: { type: [Boolean, Object] }
|
|
223
351
|
},
|
|
224
|
-
emits: ["change", "input", "blur", "focus", "update:modelValue"],
|
|
352
|
+
emits: ["change", "input", "blur", "focus", "click", "update:modelValue"],
|
|
225
353
|
setup(__props, { emit: __emit }) {
|
|
226
354
|
const props = __props;
|
|
227
355
|
const emit = __emit;
|
|
@@ -250,6 +378,9 @@
|
|
|
250
378
|
const focusHandler = (...args) => {
|
|
251
379
|
emit("focus", ...args);
|
|
252
380
|
};
|
|
381
|
+
const clickHandler = (...args) => {
|
|
382
|
+
emit("click", ...args);
|
|
383
|
+
};
|
|
253
384
|
const updateModelValue = (...args) => {
|
|
254
385
|
emit("update:modelValue", ...args);
|
|
255
386
|
};
|
|
@@ -262,12 +393,14 @@
|
|
|
262
393
|
disabled: __props.disabled,
|
|
263
394
|
placeholder: __props.placeholder,
|
|
264
395
|
rows: __props.rows,
|
|
396
|
+
autosize: __props.autosize,
|
|
265
397
|
onKeypress: inputHandler,
|
|
266
398
|
onChange: changeHandler,
|
|
267
399
|
onBlur: blurHandler,
|
|
268
400
|
onFocus: focusHandler,
|
|
401
|
+
onClick: clickHandler,
|
|
269
402
|
"onUpdate:modelValue": updateModelValue
|
|
270
|
-
}, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows"])) : (vue.openBlock(), vue.createBlock(
|
|
403
|
+
}, null, 8, ["modelValue", "size", "disabled", "placeholder", "rows", "autosize"])) : (vue.openBlock(), vue.createBlock(
|
|
271
404
|
vue.unref(tdesignVueNext.InputAdornment),
|
|
272
405
|
{ key: 1 },
|
|
273
406
|
vue.createSlots({
|
|
@@ -282,6 +415,7 @@
|
|
|
282
415
|
onChange: changeHandler,
|
|
283
416
|
onBlur: blurHandler,
|
|
284
417
|
onFocus: focusHandler,
|
|
418
|
+
onClick: clickHandler,
|
|
285
419
|
"onUpdate:modelValue": updateModelValue
|
|
286
420
|
}, vue.createSlots({
|
|
287
421
|
_: 2
|
|
@@ -564,6 +698,11 @@
|
|
|
564
698
|
return item.cell?.({ row, $index: rowIndex });
|
|
565
699
|
};
|
|
566
700
|
}
|
|
701
|
+
if (item.title) {
|
|
702
|
+
column.title = (h, data) => {
|
|
703
|
+
return item.title?.(data);
|
|
704
|
+
};
|
|
705
|
+
}
|
|
567
706
|
columns.push(column);
|
|
568
707
|
}
|
|
569
708
|
return columns;
|
|
@@ -656,6 +795,7 @@
|
|
|
656
795
|
addable: __props.editable,
|
|
657
796
|
theme: __props.type === "card" ? "card" : "normal",
|
|
658
797
|
placement: __props.tabPosition,
|
|
798
|
+
"scroll-position": "auto",
|
|
659
799
|
onAdd: onTabAdd,
|
|
660
800
|
onChange: tabClickHandler,
|
|
661
801
|
onRemove: onTabRemove,
|
|
@@ -747,6 +887,10 @@
|
|
|
747
887
|
}
|
|
748
888
|
},
|
|
749
889
|
components: {
|
|
890
|
+
autocomplete: {
|
|
891
|
+
component: _sfc_main$c,
|
|
892
|
+
props: (props) => props
|
|
893
|
+
},
|
|
750
894
|
badge: {
|
|
751
895
|
component: tdesignVueNext.Badge,
|
|
752
896
|
props: (props) => ({
|
|
@@ -758,7 +902,7 @@
|
|
|
758
902
|
button: {
|
|
759
903
|
component: tdesignVueNext.Button,
|
|
760
904
|
props: (props) => ({
|
|
761
|
-
theme: props.type,
|
|
905
|
+
theme: props.type ? props.type : "default",
|
|
762
906
|
size: props.size === "default" ? "medium" : props.size,
|
|
763
907
|
icon: props.icon ? () => vue.h(_sfc_main$8, null, { default: () => vue.h(props.icon) }) : void 0,
|
|
764
908
|
variant: props.link || props.text ? "text" : props.variant || "base",
|
|
@@ -909,7 +1053,8 @@
|
|
|
909
1053
|
labelWidth: props.labelWidth,
|
|
910
1054
|
name: props.prop,
|
|
911
1055
|
rules: props.rules,
|
|
912
|
-
help: props.extra
|
|
1056
|
+
help: () => vue.h("div", { innerHTML: props.extra }),
|
|
1057
|
+
labelAlign: props.labelPosition
|
|
913
1058
|
})
|
|
914
1059
|
},
|
|
915
1060
|
icon: {
|
|
@@ -983,6 +1128,7 @@
|
|
|
983
1128
|
multiple: props.multiple,
|
|
984
1129
|
valueType: props.valueKey,
|
|
985
1130
|
remoteMethod: props.onSearch,
|
|
1131
|
+
creatable: props.allowCreate,
|
|
986
1132
|
size: props.size === "default" ? "medium" : props.size,
|
|
987
1133
|
popupProps: {
|
|
988
1134
|
overlayClassName: props.popperClass
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.7.0-beta.
|
|
2
|
+
"version": "1.7.0-beta.4",
|
|
3
3
|
"name": "@tmagic/tdesign-vue-next-adapter",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
],
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"tdesign-vue-next": "^1.17.1",
|
|
39
|
-
"vue": "^3.5.
|
|
39
|
+
"vue": "^3.5.24",
|
|
40
40
|
"typescript": "^5.9.3",
|
|
41
|
-
"@tmagic/design": "1.7.0-beta.
|
|
41
|
+
"@tmagic/design": "1.7.0-beta.4"
|
|
42
42
|
},
|
|
43
43
|
"peerDependenciesMeta": {
|
|
44
44
|
"typescript": {
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<TAutoComplete
|
|
3
|
+
ref="autocomplete"
|
|
4
|
+
:model-value="modelValue"
|
|
5
|
+
:options="options"
|
|
6
|
+
:disabled="disabled"
|
|
7
|
+
:placeholder="placeholder"
|
|
8
|
+
:size="size === 'default' ? 'medium' : size"
|
|
9
|
+
:popupProps="{
|
|
10
|
+
trigger: props.triggerOnFocus ? 'focus' : 'hover',
|
|
11
|
+
}"
|
|
12
|
+
:filter="filterHandler"
|
|
13
|
+
@keypress="inputHandler"
|
|
14
|
+
@change="changeHandler"
|
|
15
|
+
@blur="blurHandler"
|
|
16
|
+
@focus="focusHandler"
|
|
17
|
+
@click="clickHandler"
|
|
18
|
+
@update:modelValue="updateModelValue"
|
|
19
|
+
>
|
|
20
|
+
<template #option="{ option }" v-if="$slots.default">
|
|
21
|
+
<slot name="default" :item="option"></slot>
|
|
22
|
+
</template>
|
|
23
|
+
<template #prepend v-if="$slots.prepend">
|
|
24
|
+
<slot name="prepend"></slot>
|
|
25
|
+
</template>
|
|
26
|
+
<template #append v-if="$slots.append">
|
|
27
|
+
<slot name="append"></slot>
|
|
28
|
+
</template>
|
|
29
|
+
<template #prefix v-if="$slots.prefix">
|
|
30
|
+
<slot name="prefix"></slot>
|
|
31
|
+
</template>
|
|
32
|
+
<template #suffix v-if="$slots.suffix">
|
|
33
|
+
<slot name="suffix"></slot>
|
|
34
|
+
</template>
|
|
35
|
+
</TAutoComplete>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<script setup lang="ts">
|
|
39
|
+
import { onMounted, ref } from 'vue';
|
|
40
|
+
import { AutoComplete as TAutoComplete, type AutoCompleteOption } from 'tdesign-vue-next';
|
|
41
|
+
|
|
42
|
+
import type { AutocompleteProps } from '@tmagic/design';
|
|
43
|
+
|
|
44
|
+
defineOptions({
|
|
45
|
+
name: 'TTDesignAdapterAutoComplete',
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
const emit = defineEmits(['change', 'input', 'blur', 'focus', 'click', 'update:modelValue']);
|
|
49
|
+
|
|
50
|
+
const props = defineProps<AutocompleteProps>();
|
|
51
|
+
|
|
52
|
+
const options = ref<any[]>([]);
|
|
53
|
+
|
|
54
|
+
onMounted(() => {
|
|
55
|
+
if (typeof props.fetchSuggestions === 'function') {
|
|
56
|
+
props.fetchSuggestions('', (data: any[]) => {
|
|
57
|
+
options.value = data;
|
|
58
|
+
});
|
|
59
|
+
} else if (Array.isArray(props.fetchSuggestions)) {
|
|
60
|
+
options.value = props.fetchSuggestions;
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
const filterHandler = (keyword: string, _option: AutoCompleteOption) => {
|
|
65
|
+
if (typeof props.fetchSuggestions === 'function') {
|
|
66
|
+
props.fetchSuggestions(keyword, (data: any[]) => {
|
|
67
|
+
options.value = data;
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return true;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
const changeHandler = (...args: any[]) => {
|
|
75
|
+
emit('change', ...args);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const inputHandler = (...args: any[]) => {
|
|
79
|
+
emit('input', ...args);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const blurHandler = (...args: any[]) => {
|
|
83
|
+
emit('blur', ...args);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const focusHandler = (...args: any[]) => {
|
|
87
|
+
emit('focus', ...args);
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const clickHandler = (...args: any[]) => {
|
|
91
|
+
emit('click', ...args);
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
const updateModelValue = (...args: any[]) => {
|
|
95
|
+
emit('update:modelValue', ...args);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
defineExpose({
|
|
99
|
+
blur: () => {},
|
|
100
|
+
focus: () => {},
|
|
101
|
+
});
|
|
102
|
+
</script>
|
package/src/Dialog.vue
CHANGED
package/src/Input.vue
CHANGED
|
@@ -7,10 +7,12 @@
|
|
|
7
7
|
:disabled="disabled"
|
|
8
8
|
:placeholder="placeholder"
|
|
9
9
|
:rows="rows"
|
|
10
|
+
:autosize="autosize"
|
|
10
11
|
@keypress="inputHandler"
|
|
11
12
|
@change="changeHandler"
|
|
12
13
|
@blur="blurHandler"
|
|
13
14
|
@focus="focusHandler"
|
|
15
|
+
@click="clickHandler"
|
|
14
16
|
@update:modelValue="updateModelValue"
|
|
15
17
|
></TTextarea>
|
|
16
18
|
<TInputAdornment v-else>
|
|
@@ -30,6 +32,7 @@
|
|
|
30
32
|
@change="changeHandler"
|
|
31
33
|
@blur="blurHandler"
|
|
32
34
|
@focus="focusHandler"
|
|
35
|
+
@click="clickHandler"
|
|
33
36
|
@update:modelValue="updateModelValue"
|
|
34
37
|
>
|
|
35
38
|
<template #prefix-icon v-if="$slots.prefix">
|
|
@@ -58,7 +61,7 @@ const props = defineProps<
|
|
|
58
61
|
}
|
|
59
62
|
>();
|
|
60
63
|
|
|
61
|
-
const emit = defineEmits(['change', 'input', 'blur', 'focus', 'update:modelValue']);
|
|
64
|
+
const emit = defineEmits(['change', 'input', 'blur', 'focus', 'click', 'update:modelValue']);
|
|
62
65
|
|
|
63
66
|
const textareaRef = useTemplateRef('textarea');
|
|
64
67
|
|
|
@@ -91,6 +94,10 @@ const focusHandler = (...args: any[]) => {
|
|
|
91
94
|
emit('focus', ...args);
|
|
92
95
|
};
|
|
93
96
|
|
|
97
|
+
const clickHandler = (...args: any[]) => {
|
|
98
|
+
emit('click', ...args);
|
|
99
|
+
};
|
|
100
|
+
|
|
94
101
|
const updateModelValue = (...args: any[]) => {
|
|
95
102
|
emit('update:modelValue', ...args);
|
|
96
103
|
};
|
package/src/Table.vue
CHANGED
package/src/Tabs.vue
CHANGED
package/src/index.ts
CHANGED
|
@@ -35,6 +35,7 @@ import {
|
|
|
35
35
|
} from 'tdesign-vue-next';
|
|
36
36
|
|
|
37
37
|
import type {
|
|
38
|
+
AutocompleteProps,
|
|
38
39
|
BadgeProps,
|
|
39
40
|
ButtonProps,
|
|
40
41
|
CardProps,
|
|
@@ -75,6 +76,7 @@ import type {
|
|
|
75
76
|
UploadProps,
|
|
76
77
|
} from '@tmagic/design';
|
|
77
78
|
|
|
79
|
+
import AutoComplete from './AutoComplete.vue';
|
|
78
80
|
import Checkbox from './Checkbox.vue';
|
|
79
81
|
import DatePicker from './DatePicker.vue';
|
|
80
82
|
import Dialog from './Dialog.vue';
|
|
@@ -168,6 +170,10 @@ const adapter: any = {
|
|
|
168
170
|
},
|
|
169
171
|
},
|
|
170
172
|
components: {
|
|
173
|
+
autocomplete: {
|
|
174
|
+
component: AutoComplete,
|
|
175
|
+
props: (props: AutocompleteProps) => props,
|
|
176
|
+
},
|
|
171
177
|
badge: {
|
|
172
178
|
component: TBadge,
|
|
173
179
|
props: (props: BadgeProps) => ({
|
|
@@ -180,7 +186,7 @@ const adapter: any = {
|
|
|
180
186
|
button: {
|
|
181
187
|
component: TButton,
|
|
182
188
|
props: (props: ButtonProps) => ({
|
|
183
|
-
theme: props.type,
|
|
189
|
+
theme: props.type ? props.type : 'default',
|
|
184
190
|
size: props.size === 'default' ? 'medium' : props.size,
|
|
185
191
|
icon: props.icon ? () => h(Icon, null, { default: () => h(props.icon) }) : undefined,
|
|
186
192
|
variant: props.link || props.text ? 'text' : props.variant || 'base',
|
|
@@ -348,7 +354,8 @@ const adapter: any = {
|
|
|
348
354
|
labelWidth: props.labelWidth,
|
|
349
355
|
name: props.prop,
|
|
350
356
|
rules: props.rules,
|
|
351
|
-
help: props.extra,
|
|
357
|
+
help: () => h('div', { innerHTML: props.extra }),
|
|
358
|
+
labelAlign: props.labelPosition,
|
|
352
359
|
}),
|
|
353
360
|
},
|
|
354
361
|
|
|
@@ -434,6 +441,7 @@ const adapter: any = {
|
|
|
434
441
|
multiple: props.multiple,
|
|
435
442
|
valueType: props.valueKey,
|
|
436
443
|
remoteMethod: props.onSearch,
|
|
444
|
+
creatable: props.allowCreate,
|
|
437
445
|
size: props.size === 'default' ? 'medium' : props.size,
|
|
438
446
|
popupProps: {
|
|
439
447
|
overlayClassName: props.popperClass,
|