@wikicasa-dev/components 1.7.33 → 1.7.34
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/BaseTooltip.js +38 -49
- package/dist/UIKit/BaseTooltip.vue.d.ts +65 -47
- package/dist/assets/BaseTooltip.css +1 -1
- package/package.json +1 -1
package/dist/BaseTooltip.js
CHANGED
|
@@ -1,53 +1,42 @@
|
|
|
1
|
-
import { defineComponent as a, openBlock as
|
|
2
|
-
import { _ as
|
|
3
|
-
import './assets/BaseTooltip.css';const p = a({
|
|
4
|
-
|
|
5
|
-
inheritAttrs: !1,
|
|
1
|
+
import { defineComponent as a, openBlock as e, createElementBlock as t, renderSlot as s, createElementVNode as i, normalizeClass as l, createCommentVNode as n } from "vue";
|
|
2
|
+
import { _ as r } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
3
|
+
import './assets/BaseTooltip.css';const p = { class: "base-tooltip" }, d = /* @__PURE__ */ a({
|
|
4
|
+
__name: "BaseTooltip",
|
|
6
5
|
props: {
|
|
7
|
-
theme: {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
showTooltipContentManually: {
|
|
25
|
-
type: Boolean,
|
|
26
|
-
default: !0
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
function d(e, c, m, u, f, h) {
|
|
31
|
-
return o(), s("div", {
|
|
32
|
-
class: t(["base-tooltip", e.$attrs.class])
|
|
33
|
-
}, [
|
|
34
|
-
r(e.$slots, "trigger", {}, void 0, !0),
|
|
35
|
-
l("div", {
|
|
36
|
-
class: t(["bg-transparent", [
|
|
37
|
-
e.theme.size,
|
|
38
|
-
`${e.customTooltipClass ? e.customTooltipClass : "tooltip-content-wrapper"}`
|
|
39
|
-
]])
|
|
40
|
-
}, [
|
|
41
|
-
e.showTooltipContentManually ? (o(), s("div", {
|
|
42
|
-
key: 0,
|
|
43
|
-
class: t(["tooltip-content uikit-shadow-lg uikit-shadow-w-primary/10", ["base-tooltip-arrow", e.direction, e.theme.color, e.theme.size]])
|
|
6
|
+
theme: { default: () => ({
|
|
7
|
+
color: "blue",
|
|
8
|
+
size: "sm"
|
|
9
|
+
}) },
|
|
10
|
+
direction: { default: "top" },
|
|
11
|
+
customTooltipClass: { default: "" },
|
|
12
|
+
showTooltipContentManually: { type: Boolean, default: !0 },
|
|
13
|
+
tooltipContentClasses: { default: "" }
|
|
14
|
+
},
|
|
15
|
+
setup(m) {
|
|
16
|
+
return (o, u) => (e(), t("div", p, [
|
|
17
|
+
s(o.$slots, "trigger", {}, void 0, !0),
|
|
18
|
+
i("div", {
|
|
19
|
+
class: l(["bg-transparent", [
|
|
20
|
+
o.theme.size,
|
|
21
|
+
`${o.customTooltipClass ? o.customTooltipClass : "tooltip-content-wrapper"}`
|
|
22
|
+
]])
|
|
44
23
|
}, [
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
24
|
+
o.showTooltipContentManually ? (e(), t("div", {
|
|
25
|
+
key: 0,
|
|
26
|
+
class: l(["tooltip-content uikit-shadow-lg uikit-shadow-w-primary/10", [
|
|
27
|
+
"base-tooltip-arrow",
|
|
28
|
+
o.direction,
|
|
29
|
+
o.theme.color,
|
|
30
|
+
o.theme.size,
|
|
31
|
+
o.tooltipContentClasses
|
|
32
|
+
]])
|
|
33
|
+
}, [
|
|
34
|
+
s(o.$slots, "content", {}, void 0, !0)
|
|
35
|
+
], 2)) : n("", !0)
|
|
36
|
+
], 2)
|
|
37
|
+
]));
|
|
38
|
+
}
|
|
39
|
+
}), f = /* @__PURE__ */ r(d, [["__scopeId", "data-v-b0e473d5"]]);
|
|
51
40
|
export {
|
|
52
|
-
|
|
41
|
+
f as default
|
|
53
42
|
};
|
|
@@ -1,56 +1,74 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
customTooltipClass: {
|
|
17
|
-
type: () => "mail-alert";
|
|
18
|
-
default: string;
|
|
19
|
-
};
|
|
20
|
-
showTooltipContentManually: {
|
|
21
|
-
type: BooleanConstructor;
|
|
22
|
-
default: boolean;
|
|
23
|
-
};
|
|
24
|
-
}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
25
|
-
theme: {
|
|
26
|
-
type: () => {
|
|
27
|
-
color: "blue" | "white";
|
|
28
|
-
size: "sm" | "md" | "lg";
|
|
29
|
-
};
|
|
30
|
-
default(): {
|
|
31
|
-
color: string;
|
|
32
|
-
size: string;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
direction: {
|
|
36
|
-
type: () => "top" | "bottom" | "left" | "right" | "top-center" | "bottom-center";
|
|
37
|
-
default: string;
|
|
38
|
-
};
|
|
39
|
-
customTooltipClass: {
|
|
40
|
-
type: () => "mail-alert";
|
|
41
|
-
default: string;
|
|
1
|
+
import { ClassType } from '@wikicasa-dev/types';
|
|
2
|
+
|
|
3
|
+
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
theme?: {
|
|
5
|
+
color: "blue" | "white";
|
|
6
|
+
size: "sm" | "md" | "lg";
|
|
7
|
+
} | undefined;
|
|
8
|
+
direction?: "left" | "right" | "bottom" | "top" | "top-center" | "bottom-center" | undefined;
|
|
9
|
+
customTooltipClass?: "" | "mail-alert" | undefined;
|
|
10
|
+
showTooltipContentManually?: boolean | undefined;
|
|
11
|
+
tooltipContentClasses?: ClassType | undefined;
|
|
12
|
+
}>, {
|
|
13
|
+
theme: () => {
|
|
14
|
+
color: string;
|
|
15
|
+
size: string;
|
|
42
16
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
17
|
+
direction: string;
|
|
18
|
+
customTooltipClass: string;
|
|
19
|
+
showTooltipContentManually: boolean;
|
|
20
|
+
tooltipContentClasses: string;
|
|
21
|
+
}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
22
|
+
theme?: {
|
|
23
|
+
color: "blue" | "white";
|
|
24
|
+
size: "sm" | "md" | "lg";
|
|
25
|
+
} | undefined;
|
|
26
|
+
direction?: "left" | "right" | "bottom" | "top" | "top-center" | "bottom-center" | undefined;
|
|
27
|
+
customTooltipClass?: "" | "mail-alert" | undefined;
|
|
28
|
+
showTooltipContentManually?: boolean | undefined;
|
|
29
|
+
tooltipContentClasses?: ClassType | undefined;
|
|
30
|
+
}>, {
|
|
31
|
+
theme: () => {
|
|
32
|
+
color: string;
|
|
33
|
+
size: string;
|
|
46
34
|
};
|
|
47
|
-
|
|
35
|
+
direction: string;
|
|
36
|
+
customTooltipClass: string;
|
|
37
|
+
showTooltipContentManually: boolean;
|
|
38
|
+
tooltipContentClasses: string;
|
|
39
|
+
}>>>, {
|
|
48
40
|
direction: "left" | "right" | "bottom" | "top" | "top-center" | "bottom-center";
|
|
49
41
|
theme: {
|
|
50
42
|
color: "blue" | "white";
|
|
51
43
|
size: "sm" | "md" | "lg";
|
|
52
44
|
};
|
|
53
|
-
customTooltipClass: "mail-alert";
|
|
45
|
+
customTooltipClass: "" | "mail-alert";
|
|
54
46
|
showTooltipContentManually: boolean;
|
|
55
|
-
|
|
47
|
+
tooltipContentClasses: ClassType;
|
|
48
|
+
}, {}>, {
|
|
49
|
+
trigger?(_: {}): any;
|
|
50
|
+
content?(_: {}): any;
|
|
51
|
+
}>;
|
|
56
52
|
export default _default;
|
|
53
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
54
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
55
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
56
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
57
|
+
} : {
|
|
58
|
+
type: import('vue').PropType<T[K]>;
|
|
59
|
+
required: true;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
type __VLS_WithDefaults<P, D> = {
|
|
63
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
64
|
+
default: D[K];
|
|
65
|
+
}> : P[K];
|
|
66
|
+
};
|
|
67
|
+
type __VLS_Prettify<T> = {
|
|
68
|
+
[K in keyof T]: T[K];
|
|
69
|
+
} & {};
|
|
70
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
71
|
+
new (): {
|
|
72
|
+
$slots: S;
|
|
73
|
+
};
|
|
74
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.base-tooltip[data-v-
|
|
1
|
+
.base-tooltip[data-v-b0e473d5]{--tooltip-sm-content-width: 250px;--tooltip-sm-arrows-width: 8px;--tooltip-sm-height: 65px;--tooltip-md-width: calc(var(--tooltip-sm-content-width) * 1.2);--tooltip-md-height: 100px;--tooltip-lg-width: calc(var(--tooltip-sm-content-width) * 1.4);--tooltip-lg-height: 130px;--tooltip-border-radius: 10px;--tooltip-space-from-top-content: 65%;--tooltip-blue-bg: #2B5DFF;--tooltip-blue-color: #fff;--tooltip-white-bg: #fff;--tooltip-white-color: #000;--arrow-width: 10px;--arrow-margin-left: calc(var(--arrow-width) * -1);--arrow-left-position: 10%;position:relative;display:inline-block}.base-tooltip .tooltip-content-wrapper[data-v-b0e473d5]{position:absolute;top:60%}.base-tooltip .tooltip-content-wrapper.sm[data-v-b0e473d5]{width:var(--tooltip-sm-content-width)}.base-tooltip .tooltip-content-wrapper.md[data-v-b0e473d5]{width:var(--tooltip-md-width)}.base-tooltip .tooltip-content-wrapper.lg[data-v-b0e473d5]{width:var(--tooltip-lg-width)}.base-tooltip .tooltip-content[data-v-b0e473d5]{display:none;opacity:0;text-align:center;padding:5px 0;position:absolute;z-index:1;left:var(--arrow-left-position);top:var(--tooltip-space-from-top-content)}.base-tooltip .tooltip-content.lg[data-v-b0e473d5]{top:calc(var(--tooltip-space-from-top-content) + 20%)}.base-tooltip .mail-alert[data-v-b0e473d5]{padding-top:22px;position:absolute;top:90%;z-index:1053}.base-tooltip .mail-alert.listing>.tooltip-content[data-v-b0e473d5]{left:-70px}.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5]{left:0;top:65%;display:flex!important;justify-content:center;align-items:center}.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5],.base-tooltip .mail-alert .tooltip-content[data-v-b0e473d5]:after{display:block;opacity:1;transition:opacity .25s ease-out}.base-tooltip .tooltip-content[data-v-b0e473d5],.base-tooltip .tooltip-content[data-v-b0e473d5]>*{border-radius:var(--tooltip-border-radius)}.base-tooltip .tooltip-content.blue[data-v-b0e473d5]{background-color:var(--tooltip-blue-bg);color:var(--tooltip-blue-color)}.base-tooltip .tooltip-content.blue[data-v-b0e473d5]:after{border-color:transparent transparent var(--tooltip-blue-bg) transparent}.base-tooltip .tooltip-content.white[data-v-b0e473d5]{background-color:var(--tooltip-white-bg);color:var(--tooltip-white-color)}.base-tooltip .tooltip-content.white[data-v-b0e473d5]:after{border-color:transparent transparent var(--tooltip-white-bg) transparent}.base-tooltip .tooltip-content.sm[data-v-b0e473d5]{width:var(--tooltip-sm-content-width);height:var(--tooltip-sm-height)}.base-tooltip .tooltip-content.sm[data-v-b0e473d5]:after{border-width:var(--tooltip-sm-arrows-width)}.base-tooltip .tooltip-content.md[data-v-b0e473d5]{width:var(--tooltip-md-width);height:var(--tooltip-md-height)}.base-tooltip .tooltip-content.md[data-v-b0e473d5]:after{border-width:calc(var(--tooltip-sm-arrows-width) + 1)}.base-tooltip .tooltip-content.lg[data-v-b0e473d5]{width:var(--tooltip-lg-width);height:var(--tooltip-lg-height)}.base-tooltip .tooltip-content.lg[data-v-b0e473d5]:after{border-width:calc(var(--tooltip-sm-arrows-width) + 2)}.base-tooltip:hover .tooltip-content-wrapper[data-v-b0e473d5]{padding-top:30px}.base-tooltip:hover .tooltip-content.lg[data-v-b0e473d5]{left:8%}.base-tooltip:hover .tooltip-content[data-v-b0e473d5],.base-tooltip .tooltip-content[data-v-b0e473d5]:after{display:block;opacity:1;transition:opacity .25s ease-out}.base-tooltip-arrow[data-v-b0e473d5]:after{content:" ";position:absolute;margin-left:var(--arrow-margin-left);border-style:solid}.base-tooltip-arrow.top[data-v-b0e473d5]:after{bottom:100%;left:var(--arrow-left-position)}.base-tooltip-arrow.top-center[data-v-b0e473d5]:after{bottom:100%;left:50%}.base-tooltip-arrow.right[data-v-b0e473d5]:after{top:50%;left:100%;transform:rotate(90deg)}.base-tooltip-arrow.bottom[data-v-b0e473d5]:after{top:100%;left:var(--arrow-left-position);transform:rotate(180deg)}.base-tooltip-arrow.bottom-center[data-v-b0e473d5]:after{top:100%;left:50%;transform:rotate(180deg)}.base-tooltip-arrow.left[data-v-b0e473d5]:after{top:50%;right:100%;transform:rotate(270deg)}
|