This commit is contained in:
syuilo 2021-10-22 06:23:23 +09:00
parent 90b62a3e95
commit 9d11c29c3b
6 changed files with 75 additions and 12 deletions

View File

@ -33,7 +33,7 @@
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import MkButton from '../ui/button.vue';
import MkButton from '@client/components/ui/button.vue';
import { debounce } from 'throttle-debounce';
export default defineComponent({

View File

@ -1,9 +1,9 @@
<template>
<div class="vblkjoeq">
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ inline, disabled, focused }">
<div class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick" ref="container">
<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
<select ref="inputEl"
<select class="select" ref="inputEl"
v-model="v"
:disabled="disabled"
:required="required"
@ -25,7 +25,8 @@
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import MkButton from '../ui/button.vue';
import MkButton from '@client/components/ui/button.vue';
import * as os from '@client/os';
export default defineComponent({
components: {
@ -81,6 +82,7 @@ export default defineComponent({
const inputEl = ref(null);
const prefixEl = ref(null);
const suffixEl = ref(null);
const container = ref(null);
const focus = () => inputEl.value.focus();
const onInput = (ev) => {
@ -132,6 +134,47 @@ export default defineComponent({
});
});
const onClick = (ev: MouseEvent) => {
focused.value = true;
const menu = [];
let options = context.slots.default();
for (const optionOrOptgroup of options) {
if (optionOrOptgroup.type === 'optgroup') {
const optgroup = optionOrOptgroup;
menu.push({
type: 'label',
text: optgroup.props.label,
});
for (const option of optgroup.children) {
menu.push({
text: option.children,
active: v.value === option.props.value,
action: () => {
v.value = option.props.value;
},
});
}
} else {
const option = optionOrOptgroup;
menu.push({
text: option.children,
active: v.value === option.props.value,
action: () => {
v.value = option.props.value;
},
});
}
}
os.popupMenu(menu, container.value, {
width: container.value.offsetWidth,
}).then(() => {
focused.value = false;
});
};
return {
v,
focused,
@ -141,8 +184,10 @@ export default defineComponent({
inputEl,
prefixEl,
suffixEl,
container,
focus,
onInput,
onClick,
updated,
};
},
@ -174,8 +219,15 @@ export default defineComponent({
> .input {
$height: 42px;
position: relative;
cursor: pointer;
> select {
&:hover {
> .select {
border-color: var(--inputBorderHover);
}
}
> .select {
appearance: none;
-webkit-appearance: none;
display: block;
@ -195,10 +247,7 @@ export default defineComponent({
box-sizing: border-box;
cursor: pointer;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover);
}
pointer-events: none;
}
> .prefix,

View File

@ -26,7 +26,7 @@
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import MkButton from '../ui/button.vue';
import MkButton from '@client/components/ui/button.vue';
import { debounce } from 'throttle-debounce';
export default defineComponent({

View File

@ -1,5 +1,6 @@
<template>
<div class="rrevdjwt" :class="{ center: align === 'center' }"
:style="{ width: width ? width + 'px' : null }"
ref="items"
@contextmenu.self="e => e.preventDefault()"
v-hotkey="keymap"
@ -59,6 +60,10 @@ export default defineComponent({
type: String,
requried: false
},
width: {
type: Number,
required: false
},
},
emits: ['close'],
data() {

View File

@ -1,6 +1,6 @@
<template>
<MkPopup ref="popup" :src="src" @closed="$emit('closed')">
<MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup _shadow"/>
<MkMenu :items="items" :align="align" :width="width" @close="$refs.popup.close()" class="_popup _shadow"/>
</MkPopup>
</template>
@ -24,6 +24,10 @@ export default defineComponent({
type: String,
required: false
},
width: {
type: Number,
required: false
},
viaKeyboard: {
type: Boolean,
required: false

View File

@ -372,12 +372,17 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
});
}
export function popupMenu(items: any[] | Ref<any[]>, src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
export function popupMenu(items: any[] | Ref<any[]>, src?: HTMLElement, options?: {
align?: string;
width?: number;
viaKeyboard?: boolean;
}) {
return new Promise((resolve, reject) => {
let dispose;
popup(import('@client/components/ui/popup-menu.vue'), {
items,
src,
width: options?.width,
align: options?.align,
viaKeyboard: options?.viaKeyboard
}, {