@antify/ui 2.2.13 → 2.2.14
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.
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
InputState,
|
|
7
7
|
} from '../enums';
|
|
8
8
|
import {
|
|
9
|
-
arrow, autoUpdate, flip, offset, useFloating,
|
|
9
|
+
arrow, autoUpdate, flip, offset, useFloating, shift,
|
|
10
10
|
} from '@floating-ui/vue';
|
|
11
11
|
import {
|
|
12
12
|
hasSlotContent,
|
|
@@ -52,6 +52,7 @@ const {
|
|
|
52
52
|
],
|
|
53
53
|
fallbackAxisSideDirection: 'none',
|
|
54
54
|
}),
|
|
55
|
+
shift(),
|
|
55
56
|
arrow({
|
|
56
57
|
element: floatingArrow,
|
|
57
58
|
}),
|
|
@@ -197,7 +198,7 @@ function onClick() {
|
|
|
197
198
|
@mouseleave="() => onMouseLeaveTooltip()"
|
|
198
199
|
>
|
|
199
200
|
<div
|
|
200
|
-
class="p-2 rounded-md border"
|
|
201
|
+
class="p-2 rounded-md border w-fit max-w-screen"
|
|
201
202
|
:class="contentClasses"
|
|
202
203
|
>
|
|
203
204
|
<slot name="content" />
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.disabled = exports.default = exports.Docs = void 0;
|
|
6
|
+
exports.largeContent = exports.disabled = exports.default = exports.Docs = void 0;
|
|
7
7
|
var _AntTooltip = _interopRequireDefault(require("../AntTooltip.vue"));
|
|
8
8
|
var _enums = require("../../enums");
|
|
9
9
|
var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
|
|
@@ -36,6 +36,7 @@ const Docs = exports.Docs = {
|
|
|
36
36
|
},
|
|
37
37
|
setup() {
|
|
38
38
|
const scrollContainer = (0, _vue.ref)(void 0);
|
|
39
|
+
const tooltipContent = "Tooltip content";
|
|
39
40
|
(0, _vue.onMounted)(() => {
|
|
40
41
|
if (scrollContainer.value) {
|
|
41
42
|
scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
|
|
@@ -44,18 +45,19 @@ const Docs = exports.Docs = {
|
|
|
44
45
|
});
|
|
45
46
|
return {
|
|
46
47
|
args,
|
|
47
|
-
scrollContainer
|
|
48
|
+
scrollContainer,
|
|
49
|
+
tooltipContent
|
|
48
50
|
};
|
|
49
51
|
},
|
|
50
52
|
template: `
|
|
51
53
|
<div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
|
|
52
|
-
<div class="flex grow justify-center items-center h-screen w-[
|
|
54
|
+
<div class="flex grow justify-center items-center h-screen w-[2000px]">
|
|
53
55
|
<AntTooltip v-bind="args">
|
|
54
56
|
<AntButton>Hover me</AntButton>
|
|
55
57
|
|
|
56
58
|
<template #content>
|
|
57
59
|
<div>
|
|
58
|
-
|
|
60
|
+
{{tooltipContent}}
|
|
59
61
|
</div>
|
|
60
62
|
</template>
|
|
61
63
|
</AntTooltip>
|
|
@@ -103,6 +105,47 @@ const Docs = exports.Docs = {
|
|
|
103
105
|
},
|
|
104
106
|
args: {}
|
|
105
107
|
};
|
|
108
|
+
const largeContent = exports.largeContent = {
|
|
109
|
+
render: args => ({
|
|
110
|
+
components: {
|
|
111
|
+
AntTooltip: _AntTooltip.default,
|
|
112
|
+
AntButton: _AntButton.default
|
|
113
|
+
},
|
|
114
|
+
setup() {
|
|
115
|
+
const scrollContainer = (0, _vue.ref)(void 0);
|
|
116
|
+
const tooltipContent = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
|
|
117
|
+
(0, _vue.onMounted)(() => {
|
|
118
|
+
if (scrollContainer.value) {
|
|
119
|
+
scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
|
|
120
|
+
scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
return {
|
|
124
|
+
args,
|
|
125
|
+
scrollContainer,
|
|
126
|
+
tooltipContent
|
|
127
|
+
};
|
|
128
|
+
},
|
|
129
|
+
template: `
|
|
130
|
+
<div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
|
|
131
|
+
<div class="flex grow justify-center items-center h-screen w-[2000px]">
|
|
132
|
+
<AntTooltip v-bind="args">
|
|
133
|
+
<AntButton>Hover me</AntButton>
|
|
134
|
+
|
|
135
|
+
<template #content>
|
|
136
|
+
<div>
|
|
137
|
+
{{tooltipContent}}
|
|
138
|
+
</div>
|
|
139
|
+
</template>
|
|
140
|
+
</AntTooltip>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
`
|
|
144
|
+
}),
|
|
145
|
+
args: {
|
|
146
|
+
...Docs.args
|
|
147
|
+
}
|
|
148
|
+
};
|
|
106
149
|
const disabled = exports.disabled = {
|
|
107
150
|
render: Docs.render,
|
|
108
151
|
args: {
|
|
@@ -39,6 +39,7 @@ export const Docs = {
|
|
|
39
39
|
},
|
|
40
40
|
setup() {
|
|
41
41
|
const scrollContainer = ref(void 0);
|
|
42
|
+
const tooltipContent = "Tooltip content";
|
|
42
43
|
onMounted(() => {
|
|
43
44
|
if (scrollContainer.value) {
|
|
44
45
|
scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
|
|
@@ -47,18 +48,19 @@ export const Docs = {
|
|
|
47
48
|
});
|
|
48
49
|
return {
|
|
49
50
|
args,
|
|
50
|
-
scrollContainer
|
|
51
|
+
scrollContainer,
|
|
52
|
+
tooltipContent
|
|
51
53
|
};
|
|
52
54
|
},
|
|
53
55
|
template: `
|
|
54
56
|
<div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
|
|
55
|
-
<div class="flex grow justify-center items-center h-screen w-[
|
|
57
|
+
<div class="flex grow justify-center items-center h-screen w-[2000px]">
|
|
56
58
|
<AntTooltip v-bind="args">
|
|
57
59
|
<AntButton>Hover me</AntButton>
|
|
58
60
|
|
|
59
61
|
<template #content>
|
|
60
62
|
<div>
|
|
61
|
-
|
|
63
|
+
{{tooltipContent}}
|
|
62
64
|
</div>
|
|
63
65
|
</template>
|
|
64
66
|
</AntTooltip>
|
|
@@ -106,6 +108,47 @@ export const Docs = {
|
|
|
106
108
|
},
|
|
107
109
|
args: {}
|
|
108
110
|
};
|
|
111
|
+
export const largeContent = {
|
|
112
|
+
render: (args) => ({
|
|
113
|
+
components: {
|
|
114
|
+
AntTooltip,
|
|
115
|
+
AntButton
|
|
116
|
+
},
|
|
117
|
+
setup() {
|
|
118
|
+
const scrollContainer = ref(void 0);
|
|
119
|
+
const tooltipContent = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
|
|
120
|
+
onMounted(() => {
|
|
121
|
+
if (scrollContainer.value) {
|
|
122
|
+
scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
|
|
123
|
+
scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
return {
|
|
127
|
+
args,
|
|
128
|
+
scrollContainer,
|
|
129
|
+
tooltipContent
|
|
130
|
+
};
|
|
131
|
+
},
|
|
132
|
+
template: `
|
|
133
|
+
<div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
|
|
134
|
+
<div class="flex grow justify-center items-center h-screen w-[2000px]">
|
|
135
|
+
<AntTooltip v-bind="args">
|
|
136
|
+
<AntButton>Hover me</AntButton>
|
|
137
|
+
|
|
138
|
+
<template #content>
|
|
139
|
+
<div>
|
|
140
|
+
{{tooltipContent}}
|
|
141
|
+
</div>
|
|
142
|
+
</template>
|
|
143
|
+
</AntTooltip>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
`
|
|
147
|
+
}),
|
|
148
|
+
args: {
|
|
149
|
+
...Docs.args
|
|
150
|
+
}
|
|
151
|
+
};
|
|
109
152
|
export const disabled = {
|
|
110
153
|
render: Docs.render,
|
|
111
154
|
args: {
|