natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: refactor(client): migrate components to composition api

This commit is contained in:
syuilo 2022-01-16 01:46:25 +09:00
parent 21c9705a0f
commit c17e8fa8a4
2 changed files with 564 additions and 632 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

802
packages/client/src/components/post-form.vue
View File

File diff suppressed because it is too large Load Diff

26
packages/client/src/scripts/autocomplete.ts
View File

@ -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);