mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-29 21:37:34 -07:00
wip: refactor(client): migrate components to composition api
This commit is contained in:
parent
d9788c59a4
commit
42bb5626dc
2 changed files with 564 additions and 632 deletions
File diff suppressed because it is too large
Load diff
|
@ -1,4 +1,4 @@
|
||||||
import { Ref, ref } from 'vue';
|
import { nextTick, 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';
|
import { popup } from '@/os';
|
||||||
|
@ -10,26 +10,23 @@ export class Autocomplete {
|
||||||
q: Ref<string | null>;
|
q: Ref<string | null>;
|
||||||
close: Function;
|
close: Function;
|
||||||
} | null;
|
} | null;
|
||||||
private textarea: any;
|
private textarea: HTMLInputElement | HTMLTextAreaElement;
|
||||||
private vm: any;
|
|
||||||
private currentType: string;
|
private currentType: string;
|
||||||
private opts: {
|
private textRef: Ref<string>;
|
||||||
model: string;
|
|
||||||
};
|
|
||||||
private opening: boolean;
|
private opening: boolean;
|
||||||
|
|
||||||
private get text(): string {
|
private get text(): string {
|
||||||
return this.vm[this.opts.model];
|
return this.textRef.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
private set text(text: string) {
|
private set text(text: string) {
|
||||||
this.vm[this.opts.model] = text;
|
this.textRef.value = text;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 対象のテキストエリアを与えてインスタンスを初期化します。
|
* 対象のテキストエリアを与えてインスタンスを初期化します。
|
||||||
*/
|
*/
|
||||||
constructor(textarea, vm, opts) {
|
constructor(textarea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) {
|
||||||
//#region BIND
|
//#region BIND
|
||||||
this.onInput = this.onInput.bind(this);
|
this.onInput = this.onInput.bind(this);
|
||||||
this.complete = this.complete.bind(this);
|
this.complete = this.complete.bind(this);
|
||||||
|
@ -38,8 +35,7 @@ export class Autocomplete {
|
||||||
|
|
||||||
this.suggestion = null;
|
this.suggestion = null;
|
||||||
this.textarea = textarea;
|
this.textarea = textarea;
|
||||||
this.vm = vm;
|
this.textRef = textRef;
|
||||||
this.opts = opts;
|
|
||||||
this.opening = false;
|
this.opening = false;
|
||||||
|
|
||||||
this.attach();
|
this.attach();
|
||||||
|
@ -218,7 +214,7 @@ export class Autocomplete {
|
||||||
this.text = `${trimmedBefore}@${acct} ${after}`;
|
this.text = `${trimmedBefore}@${acct} ${after}`;
|
||||||
|
|
||||||
// キャレットを戻す
|
// キャレットを戻す
|
||||||
this.vm.$nextTick(() => {
|
nextTick(() => {
|
||||||
this.textarea.focus();
|
this.textarea.focus();
|
||||||
const pos = trimmedBefore.length + (acct.length + 2);
|
const pos = trimmedBefore.length + (acct.length + 2);
|
||||||
this.textarea.setSelectionRange(pos, pos);
|
this.textarea.setSelectionRange(pos, pos);
|
||||||
|
@ -234,7 +230,7 @@ export class Autocomplete {
|
||||||
this.text = `${trimmedBefore}#${value} ${after}`;
|
this.text = `${trimmedBefore}#${value} ${after}`;
|
||||||
|
|
||||||
// キャレットを戻す
|
// キャレットを戻す
|
||||||
this.vm.$nextTick(() => {
|
nextTick(() => {
|
||||||
this.textarea.focus();
|
this.textarea.focus();
|
||||||
const pos = trimmedBefore.length + (value.length + 2);
|
const pos = trimmedBefore.length + (value.length + 2);
|
||||||
this.textarea.setSelectionRange(pos, pos);
|
this.textarea.setSelectionRange(pos, pos);
|
||||||
|
@ -250,7 +246,7 @@ export class Autocomplete {
|
||||||
this.text = trimmedBefore + value + after;
|
this.text = trimmedBefore + value + after;
|
||||||
|
|
||||||
// キャレットを戻す
|
// キャレットを戻す
|
||||||
this.vm.$nextTick(() => {
|
nextTick(() => {
|
||||||
this.textarea.focus();
|
this.textarea.focus();
|
||||||
const pos = trimmedBefore.length + value.length;
|
const pos = trimmedBefore.length + value.length;
|
||||||
this.textarea.setSelectionRange(pos, pos);
|
this.textarea.setSelectionRange(pos, pos);
|
||||||
|
@ -266,7 +262,7 @@ export class Autocomplete {
|
||||||
this.text = `${trimmedBefore}$[${value} ]${after}`;
|
this.text = `${trimmedBefore}$[${value} ]${after}`;
|
||||||
|
|
||||||
// キャレットを戻す
|
// キャレットを戻す
|
||||||
this.vm.$nextTick(() => {
|
nextTick(() => {
|
||||||
this.textarea.focus();
|
this.textarea.focus();
|
||||||
const pos = trimmedBefore.length + (value.length + 3);
|
const pos = trimmedBefore.length + (value.length + 3);
|
||||||
this.textarea.setSelectionRange(pos, pos);
|
this.textarea.setSelectionRange(pos, pos);
|
||||||
|
|
Loading…
Reference in a new issue