This commit is contained in:
syuilo 2021-10-03 15:39:39 +09:00
parent f0b2eaf70d
commit 9a33495694
4 changed files with 37 additions and 36 deletions

View File

@ -96,6 +96,7 @@ export default defineComponent({
width: 16px;
height: 16px;
background-color: #fff;
pointer-events: none;
}
}

View File

@ -1,5 +1,5 @@
<template>
<div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }"
<div class="rrevdjwt" :class="{ center: align === 'center' }"
ref="items"
@contextmenu.self="e => e.preventDefault()"
v-hotkey="keymap"
@ -59,10 +59,6 @@ export default defineComponent({
type: String,
requried: false
},
point: {
type: String,
requried: false
},
},
emits: ['close'],
data() {
@ -145,26 +141,11 @@ export default defineComponent({
<style lang="scss" scoped>
.rrevdjwt {
padding: 8px 0;
min-width: 200px;
&.pointer {
&:before {
--size: 8px;
content: '';
display: block;
position: absolute;
top: calc(0px - (var(--size) * 2));
left: 0;
right: 0;
width: 0;
margin: auto;
border: solid var(--size) transparent;
border-bottom-color: var(--popup);
}
}
&.left {
&.center {
> .item {
text-align: left;
text-align: center;
}
}
@ -177,33 +158,55 @@ export default defineComponent({
white-space: nowrap;
font-size: 0.9em;
line-height: 20px;
text-align: center;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: calc(100% - 16px);
height: 100%;
border-radius: 6px;
}
&.danger {
color: #ff2a2a;
&:hover {
color: #fff;
background: #ff4242;
&:before {
background: #ff4242;
}
}
&:active {
color: #fff;
background: #d42e2e;
&:before {
background: #d42e2e;
}
}
}
&:hover {
color: var(--fgOnAccent);
background: var(--accent);
color: var(--accent);
text-decoration: none;
&:before {
background: var(--accentedBg);
}
}
&:active {
color: var(--fgOnAccent);
background: var(--accentDarken);
//color: var(--fgOnAccent);
//background: var(--accentDarken);
}
&:not(:active):focus-visible {

View File

@ -1,6 +1,6 @@
<template>
<MkPopup ref="popup" :src="src" @closed="$emit('closed')" #default="{point}">
<MkMenu :items="items" :align="align" :point="point" @close="$refs.popup.close()" class="_popup _shadow"/>
<MkPopup ref="popup" :src="src" @closed="$emit('closed')">
<MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup _shadow"/>
</MkPopup>
</template>

View File

@ -1,7 +1,7 @@
<template>
<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<slot :point="point"></slot>
<slot></slot>
</div>
</transition>
</template>
@ -52,7 +52,6 @@ export default defineComponent({
fixed: false,
transformOrigin: 'center',
contentClicking: false,
point: null,
};
},
@ -136,10 +135,8 @@ export default defineComponent({
}
if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
this.point = 'top';
this.transformOrigin = 'center top';
} else {
this.point = null;
this.transformOrigin = 'center';
}