This commit is contained in:
syuilo 2020-09-19 14:57:42 +09:00
parent da3c183a76
commit 0b4b5fad6d
5 changed files with 38 additions and 45 deletions

View File

@ -33,8 +33,8 @@
<button @click="addVisibleUser" class="_buttonPrimary"><fa :icon="faPlus" fixed-width/></button> <button @click="addVisibleUser" class="_buttonPrimary"><fa :icon="faPlus" fixed-width/></button>
</div> </div>
</div> </div>
<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" v-autocomplete="{ model: 'cw' }"> <input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')">
<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @keydown="onKeydown" @paste="onPaste"></textarea> <textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste"></textarea>
<x-post-form-attaches class="attaches" :files="files"/> <x-post-form-attaches class="attaches" :files="files"/>
<x-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/> <x-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
<x-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/> <x-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
@ -68,6 +68,7 @@ import extractMentions from '../../misc/extract-mentions';
import getAcct from '../../misc/acct/render'; import getAcct from '../../misc/acct/render';
import { formatTimeString } from '../../misc/format-time-string'; import { formatTimeString } from '../../misc/format-time-string';
import { selectDriveFile } from '@/scripts/select-drive-file'; import { selectDriveFile } from '@/scripts/select-drive-file';
import { Autocomplete } from '@/scripts/autocomplete';
import { noteVisibilities } from '../../types'; import { noteVisibilities } from '../../types';
import { utils } from '@syuilo/aiscript'; import { utils } from '@syuilo/aiscript';
import * as os from '@/os'; import * as os from '@/os';
@ -280,6 +281,9 @@ export default defineComponent({
this.focus(); this.focus();
}); });
new Autocomplete(this.$refs.text, this, { model: 'text' });
new Autocomplete(this.$refs.cw, this, { model: 'cw' });
this.$nextTick(() => { this.$nextTick(() => {
// 稿 // 稿
if (!this.instant && !this.mention) { if (!this.instant && !this.mention) {

View File

@ -1,13 +1,11 @@
import { App } from 'vue'; import { App } from 'vue';
import userPreview from './user-preview'; import userPreview from './user-preview';
import autocomplete from './autocomplete';
import size from './size'; import size from './size';
import particle from './particle'; import particle from './particle';
import tooltip from './tooltip'; import tooltip from './tooltip';
export default function(app: App) { export default function(app: App) {
app.directive('autocomplete', autocomplete);
app.directive('userPreview', userPreview); app.directive('userPreview', userPreview);
app.directive('user-preview', userPreview); app.directive('user-preview', userPreview);
app.directive('size', size); app.directive('size', size);

View File

@ -29,7 +29,6 @@ export default {
self.close = os.popup(MkUserPreview, { self.close = os.popup(MkUserPreview, {
user: self.user, user: self.user,
}, null, {
source: el source: el
}); });

View File

@ -60,7 +60,6 @@ export function popup(component: Component, props: Record<string, any>, events =
props, props,
showing, showing,
events, events,
source: option?.source,
done: close, done: close,
bgClick: () => close(), bgClick: () => close(),
closed: () => { closed: () => {

View File

@ -1,25 +1,15 @@
import { Directive } from 'vue'; import { Ref, ref } from 'vue';
import * as getCaretCoordinates from 'textarea-caret'; import * as getCaretCoordinates from 'textarea-caret';
import { toASCII } from 'punycode'; import { toASCII } from 'punycode';
import { popup } from '@/os';
export default { export class Autocomplete {
mounted(el, binding, vn) { private suggestion: {
const self = el._autoCompleteDirective_ = {} as any; x: Ref<number>;
self.x = new Autocomplete(el, vn.context, binding.value); y: Ref<number>;
self.x.attach(); q: Ref<string>;
}, close: Function;
};
unmounted(el, binding, vn) {
const self = el._autoCompleteDirective_;
self.x.detach();
}
} as Directive;
/**
*
*/
class Autocomplete {
private suggestion: any;
private textarea: any; private textarea: any;
private vm: any; private vm: any;
private currentType: string; private currentType: string;
@ -148,31 +138,34 @@ class Autocomplete {
//#endregion //#endregion
if (this.suggestion) { if (this.suggestion) {
// TODO: Vueの警告が出るのでなんとかする this.suggestion.x.value = x;
this.suggestion.x = x; this.suggestion.y.value = y;
this.suggestion.y = y; this.suggestion.q.value = q;
this.suggestion.q = q;
this.opening = false; this.opening = false;
} else { } else {
const MkAutocomplete = await import('@/components/autocomplete.vue'); const MkAutocomplete = await import('@/components/autocomplete.vue');
// サジェスト要素作成 const _x = ref(x);
this.suggestion = new MkAutocomplete({ const _y = ref(y);
parent: this.vm, const _q = ref(q);
propsData: {
const promise = popup(MkAutocomplete, {
textarea: this.textarea, textarea: this.textarea,
complete: this.complete, complete: this.complete,
close: this.close, close: this.close,
type: type, type: type,
q: q, q: _q,
x, x: _x,
y y: _y,
} });
}).$mount();
// 要素追加 this.suggestion = {
document.body.appendChild(this.suggestion.$el); q: _q,
x: _x,
y: _y,
close: () => promise.cancel(),
};
this.opening = false; this.opening = false;
} }
@ -184,7 +177,7 @@ class Autocomplete {
private close() { private close() {
if (this.suggestion == null) return; if (this.suggestion == null) return;
this.suggestion.destroyDom(); this.suggestion.close();
this.suggestion = null; this.suggestion = null;
this.textarea.focus(); this.textarea.focus();