@tekkare/auriga 0.1.164 → 0.1.165
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/module.json
CHANGED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div ref="container" class="oip_row v-center gap-8 global_tags-container">
|
|
3
|
+
<div class="tags_container" ref="tagsContainer">
|
|
4
|
+
<ArgTags v-for="(tag, index) in newTags" :key="index">{{ tag }}</ArgTags>
|
|
5
|
+
</div>
|
|
6
|
+
<p
|
|
7
|
+
v-if="haveHiddenTags"
|
|
8
|
+
ref="hiddenTagCounter"
|
|
9
|
+
class="hidden_tags_counter"
|
|
10
|
+
:style="{ left: leftTag + 'px' }"
|
|
11
|
+
>
|
|
12
|
+
<ArgTooltip
|
|
13
|
+
:tooltip-text="`${tags.slice(-hiddenTagsCount).join('\n')}`"
|
|
14
|
+
dir="bottom"
|
|
15
|
+
:override-height="true"
|
|
16
|
+
>
|
|
17
|
+
+{{ hiddenTagsCount }}
|
|
18
|
+
</ArgTooltip>
|
|
19
|
+
</p>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
import {
|
|
25
|
+
computed,
|
|
26
|
+
onMounted,
|
|
27
|
+
onBeforeUnmount,
|
|
28
|
+
ref,
|
|
29
|
+
nextTick,
|
|
30
|
+
defineComponent,
|
|
31
|
+
watch
|
|
32
|
+
} from "vue";
|
|
33
|
+
import ArgTooltip from "./argTooltip.vue";
|
|
34
|
+
export default defineComponent({
|
|
35
|
+
name: "argTagsRow",
|
|
36
|
+
components: { ArgTooltip },
|
|
37
|
+
props: {
|
|
38
|
+
tags: { type: Array, default: () => [] }
|
|
39
|
+
},
|
|
40
|
+
setup(props) {
|
|
41
|
+
const container = ref(null);
|
|
42
|
+
const tagsContainer = ref(null);
|
|
43
|
+
const hiddenTagCounter = ref(null);
|
|
44
|
+
const haveHiddenTags = ref(false);
|
|
45
|
+
const hiddenTagsCount = ref(0);
|
|
46
|
+
const leftTag = ref(0);
|
|
47
|
+
const componentKey = ref(0);
|
|
48
|
+
const newTags = computed(() => {
|
|
49
|
+
return haveHiddenTags.value ? props.tags.slice(0, -hiddenTagsCount.value) : props.tags;
|
|
50
|
+
});
|
|
51
|
+
const adjustTagsRow = () => {
|
|
52
|
+
if (!container.value || !tagsContainer.value)
|
|
53
|
+
return;
|
|
54
|
+
const containerWidth = container.value.offsetWidth - 20;
|
|
55
|
+
let totalTagsWidth = 0;
|
|
56
|
+
let hiddenIndex = -1;
|
|
57
|
+
for (let i = 0; i < props.tags.length; i++) {
|
|
58
|
+
const tagElement = tagsContainer.value.children[i];
|
|
59
|
+
if (!tagElement) {
|
|
60
|
+
hiddenIndex = i;
|
|
61
|
+
break;
|
|
62
|
+
}
|
|
63
|
+
totalTagsWidth += tagElement.offsetWidth + 8;
|
|
64
|
+
if (totalTagsWidth > containerWidth) {
|
|
65
|
+
hiddenIndex = i;
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
leftTag.value = totalTagsWidth;
|
|
69
|
+
}
|
|
70
|
+
if (hiddenIndex >= 0) {
|
|
71
|
+
haveHiddenTags.value = true;
|
|
72
|
+
hiddenTagsCount.value = props.tags.length - hiddenIndex;
|
|
73
|
+
} else {
|
|
74
|
+
haveHiddenTags.value = false;
|
|
75
|
+
hiddenTagsCount.value = 0;
|
|
76
|
+
}
|
|
77
|
+
if (containerWidth > totalTagsWidth) {
|
|
78
|
+
haveHiddenTags.value = false;
|
|
79
|
+
hiddenTagsCount.value = 0;
|
|
80
|
+
}
|
|
81
|
+
componentKey.value++;
|
|
82
|
+
};
|
|
83
|
+
const handleResize = () => {
|
|
84
|
+
nextTick(adjustTagsRow);
|
|
85
|
+
};
|
|
86
|
+
onMounted(() => {
|
|
87
|
+
nextTick(adjustTagsRow);
|
|
88
|
+
window.addEventListener("resize", handleResize);
|
|
89
|
+
});
|
|
90
|
+
onBeforeUnmount(() => {
|
|
91
|
+
window.removeEventListener("resize", handleResize);
|
|
92
|
+
});
|
|
93
|
+
watch(() => props.tags, adjustTagsRow);
|
|
94
|
+
return {
|
|
95
|
+
container,
|
|
96
|
+
tagsContainer,
|
|
97
|
+
hiddenTagCounter,
|
|
98
|
+
haveHiddenTags,
|
|
99
|
+
hiddenTagsCount,
|
|
100
|
+
newTags,
|
|
101
|
+
leftTag
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
</script>
|
|
106
|
+
|
|
107
|
+
<style scoped>
|
|
108
|
+
.global_tags-container{position:relative}.tags_container{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin-right:20px;max-height:22px;overflow:hidden}.hidden_tags_counter{border:1px solid var(--light);border-radius:8px;font-size:12px;padding:4px;position:absolute;right:0;top:3;width:-moz-fit-content;width:fit-content}
|
|
109
|
+
</style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{
|
|
2
|
+
tags: {
|
|
3
|
+
type: ArrayConstructor;
|
|
4
|
+
default: () => never[];
|
|
5
|
+
};
|
|
6
|
+
}, {
|
|
7
|
+
container: import("vue").Ref<null>;
|
|
8
|
+
tagsContainer: import("vue").Ref<null>;
|
|
9
|
+
hiddenTagCounter: import("vue").Ref<null>;
|
|
10
|
+
haveHiddenTags: import("vue").Ref<boolean>;
|
|
11
|
+
hiddenTagsCount: import("vue").Ref<number>;
|
|
12
|
+
newTags: import("vue").ComputedRef<unknown[]>;
|
|
13
|
+
leftTag: import("vue").Ref<number>;
|
|
14
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
15
|
+
tags: {
|
|
16
|
+
type: ArrayConstructor;
|
|
17
|
+
default: () => never[];
|
|
18
|
+
};
|
|
19
|
+
}>>, {
|
|
20
|
+
tags: unknown[];
|
|
21
|
+
}, {}>;
|
|
22
|
+
export default _default;
|
|
@@ -6,7 +6,10 @@
|
|
|
6
6
|
<slot> </slot>
|
|
7
7
|
<div
|
|
8
8
|
v-if="disable === false"
|
|
9
|
-
:class="
|
|
9
|
+
:class="[
|
|
10
|
+
`prmt_tooltip_text prmt_tooltip_text-${dir}`,
|
|
11
|
+
overrideHeight ? '' : 'max-height',
|
|
12
|
+
]"
|
|
10
13
|
>
|
|
11
14
|
<p>{{ tooltipText }}</p>
|
|
12
15
|
</div>
|
|
@@ -22,11 +25,12 @@ export default defineComponent({
|
|
|
22
25
|
tooltipText: { type: String, required: true },
|
|
23
26
|
dir: { type: String, default: "top" },
|
|
24
27
|
disable: { type: Boolean, default: false },
|
|
25
|
-
sideLimit: { type: Boolean, default: false }
|
|
28
|
+
sideLimit: { type: Boolean, default: false },
|
|
29
|
+
overrideHeight: { type: Boolean, default: false }
|
|
26
30
|
}
|
|
27
31
|
});
|
|
28
32
|
</script>
|
|
29
33
|
|
|
30
34
|
<style scoped>
|
|
31
|
-
.prmt_tooltip{display:flex;position:relative;width:-moz-fit-content;width:fit-content}.prmt_tooltip:hover .prmt_tooltip_text{visibility:visible}.prmt_tooltip_text{background-color:var(--darkest);border-radius:4px;color:var(--white);
|
|
35
|
+
.prmt_tooltip{display:flex;position:relative;width:-moz-fit-content;width:fit-content}.prmt_tooltip:hover .prmt_tooltip_text{visibility:visible}.prmt_tooltip_text{background-color:var(--darkest);border-radius:4px;color:var(--white);font-size:14px;font-weight:400;line-height:160%;margin-top:4px;max-width:120px;padding:4px 12px;position:absolute;text-align:left;visibility:hidden;white-space:wrap;white-space:pre-line;width:-moz-max-content;width:max-content;z-index:2}.max-height{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.prmt_tooltip .prmt_tooltip_text-top{bottom:120%;left:50%;margin-left:-72px}.prmt_tooltip .prmt_tooltip_text-right{left:110%;margin-left:16px;top:-9px}.prmt_tooltip .prmt_tooltip_text-left{margin-right:16px;right:110%;top:-9px}.prmt_tooltip .prmt_tooltip_text-bottom{left:50%;margin-left:-72px;top:110%}.prmt_tooltip.last_tooltip .prmt_tooltip_text-bottom{left:50%;margin-left:-130px;top:110%}
|
|
32
36
|
</style>
|
|
@@ -15,6 +15,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
15
15
|
type: BooleanConstructor;
|
|
16
16
|
default: boolean;
|
|
17
17
|
};
|
|
18
|
+
overrideHeight: {
|
|
19
|
+
type: BooleanConstructor;
|
|
20
|
+
default: boolean;
|
|
21
|
+
};
|
|
18
22
|
}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
19
23
|
tooltipText: {
|
|
20
24
|
type: StringConstructor;
|
|
@@ -32,9 +36,14 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
32
36
|
type: BooleanConstructor;
|
|
33
37
|
default: boolean;
|
|
34
38
|
};
|
|
39
|
+
overrideHeight: {
|
|
40
|
+
type: BooleanConstructor;
|
|
41
|
+
default: boolean;
|
|
42
|
+
};
|
|
35
43
|
}>>, {
|
|
36
44
|
disable: boolean;
|
|
37
45
|
dir: string;
|
|
38
46
|
sideLimit: boolean;
|
|
47
|
+
overrideHeight: boolean;
|
|
39
48
|
}, {}>;
|
|
40
49
|
export default _default;
|