TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-23 04:34:15 -04:00
Code Issues Packages Projects Releases Wiki Activity

(style) resize popovers so that they become scrollable when they get to large

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-05-02 12:55:46 +02:00
parent ed96040437
commit c0ab01ac3b
2 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/MorphemeWithPronunciation.vue
View File

@ -1,5 +1,5 @@
<template>
<Popover v-if="pronoun.getMorpheme(morpheme, counter)">
<Popover v-if="pronoun.getMorpheme(morpheme, counter)" resize>
<Morpheme
:pronoun="pronoun"
:morpheme="morpheme"

33
components/Popover.vue
View File

@ -6,14 +6,21 @@
><slot></slot><span
v-if="visible && hasContent"
ref="floating"
class="popover bg-dark text-white px-2 py-1 rounded"
class="popover"
:style="floatingStyles"
><slot name="content"></slot><span ref="arrow" class="popover-arrow bg-dark text-white" :style="arrowStyles"></span></span></span>
><span
ref="arrow"
class="popover-arrow bg-dark text-white"
:style="arrowStyles"
></span><div
ref="content"
class="overflow-auto bg-dark text-white px-2 py-1 rounded"
><slot name="content"></slot></div></span></span>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
import Vue from 'vue';
import type { CSSProperties } from 'vue/types/jsx';
import type { ComputePositionReturn, Placement } from '@floating-ui/dom';
@ -44,12 +51,14 @@ interface Data {
interface Refs {
reference: HTMLSpanElement | undefined;
floating: HTMLSpanElement | undefined;
content: HTMLSpanElement | undefined;
arrow: HTMLSpanElement | undefined;
}
export default Vue.extend({
props: {
placement: { default: 'bottom', type: String as PropType<Placement> },
resize: { type: Boolean },
},
data(): Data {
return {
@ -125,8 +134,24 @@ export default Vue.extend({
if (!this.$tRefs.reference || !this.$tRefs.floating || !this.$tRefs.arrow) {
return;
}
const middleware = [offset(remToPx(0.25)), flip(), shift()];
if (this.resize) {
middleware.push(size({
apply: ({ availableWidth, availableHeight }) => {
if (!this.$tRefs.content) {
return;
}
Object.assign(this.$tRefs.content.style, {
maxWidth: `${availableWidth}px`,
maxHeight: `${availableHeight}px`,
});
},
}));
}
middleware.push(arrow({ element: this.$tRefs.arrow }));
this.position = await computePosition(this.$tRefs.reference, this.$tRefs.floating, {
middleware: [offset(remToPx(0.25)), flip(), shift(), arrow({ element: this.$tRefs.arrow })],
middleware,
placement: this.placement as Placement,
});
},