@antify/ui 2.2.12 → 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.
- package/dist/components/AntAlert.vue +6 -8
- package/dist/components/AntTooltip.vue +3 -2
- package/dist/components/__stories/AntTooltip.stories.d.ts +1 -0
- package/dist/components/__stories/AntTooltip.stories.js +47 -4
- package/dist/components/__stories/AntTooltip.stories.mjs +46 -3
- package/dist/components/crud/AntCrudTableFilter.vue +3 -0
- package/dist/components/inputs/Elements/AntSelectMenu.vue +3 -2
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ import AntIcon from './AntIcon.vue';
|
|
|
17
17
|
import AntTooltip from './AntTooltip.vue';
|
|
18
18
|
import AntSkeleton from './AntSkeleton.vue';
|
|
19
19
|
import {
|
|
20
|
-
InputState,
|
|
20
|
+
InputState,
|
|
21
21
|
} from '../enums';
|
|
22
22
|
import {
|
|
23
23
|
IconSize,
|
|
@@ -125,13 +125,11 @@ onMounted(() => {
|
|
|
125
125
|
<div v-if="hasQuestionMark">
|
|
126
126
|
<slot name="questionMarkText">
|
|
127
127
|
<AntTooltip>
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
/>
|
|
134
|
-
</template>
|
|
128
|
+
<AntIcon
|
|
129
|
+
:icon="faCircleQuestion"
|
|
130
|
+
:color="iconColor"
|
|
131
|
+
:size="IconSize.sm"
|
|
132
|
+
/>
|
|
135
133
|
|
|
136
134
|
<template #content>
|
|
137
135
|
{{ questionMarkText }}
|
|
@@ -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: {
|
|
@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<{
|
|
|
24
24
|
hasFilter?: boolean;
|
|
25
25
|
canCreate?: boolean;
|
|
26
26
|
skeleton?: boolean;
|
|
27
|
+
searchPlaceholderText?: string;
|
|
27
28
|
}>(), {
|
|
28
29
|
fullWidth: true,
|
|
29
30
|
showFilter: true,
|
|
@@ -31,6 +32,7 @@ const props = withDefaults(defineProps<{
|
|
|
31
32
|
hasFilter: false,
|
|
32
33
|
canCreate: true,
|
|
33
34
|
skeleton: false,
|
|
35
|
+
searchPlaceholderText: 'Search',
|
|
34
36
|
});
|
|
35
37
|
const emit = defineEmits([
|
|
36
38
|
'search',
|
|
@@ -85,6 +87,7 @@ watch(() => props.fullWidth, (val) => {
|
|
|
85
87
|
<AntSearch
|
|
86
88
|
v-model="search"
|
|
87
89
|
:skeleton="skeleton"
|
|
90
|
+
:placeholder="searchPlaceholderText"
|
|
88
91
|
/>
|
|
89
92
|
</div>
|
|
90
93
|
|
|
@@ -54,7 +54,7 @@ const reference = ref<HTMLElement | null | undefined>(props.inputRef);
|
|
|
54
54
|
const elementSize = useElementSize(reference);
|
|
55
55
|
const floating = ref<HTMLElement | null>(null);
|
|
56
56
|
const {
|
|
57
|
-
floatingStyles,
|
|
57
|
+
floatingStyles,
|
|
58
58
|
} = useFloating(reference, floating, {
|
|
59
59
|
placement: 'bottom',
|
|
60
60
|
whileElementsMounted: autoUpdate,
|
|
@@ -89,7 +89,7 @@ const dropdownClasses = computed(() => {
|
|
|
89
89
|
};
|
|
90
90
|
|
|
91
91
|
return {
|
|
92
|
-
'w-full border flex flex-col gap-px outline-
|
|
92
|
+
'w-full border flex flex-col gap-px outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
|
|
93
93
|
'rounded-md': true,
|
|
94
94
|
[variants[props.state]]: true,
|
|
95
95
|
};
|
|
@@ -230,6 +230,7 @@ watch(_modelValue, (val) => {
|
|
|
230
230
|
v-if="isOpen"
|
|
231
231
|
ref="floating"
|
|
232
232
|
:class="dropdownClasses"
|
|
233
|
+
data-e2e="select-menu"
|
|
233
234
|
:style="{width: `${elementSize.width.value}px!important`, ...floatingStyles}"
|
|
234
235
|
>
|
|
235
236
|
<div
|