mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-24 05:05:20 -04:00
(ts) convert routes/pronouns.vue
This commit is contained in:
Valentyne Stigloher
parent
e8b7342f6f
commit
127500e100
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Page>
|
||||
<Page v-if="$config.pronouns.enabled">
|
||||
<section>
|
||||
<Suggested />
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
v-if="part.variable"
|
||||
v-model="selectedPronoun.morphemes[part.str]"
|
||||
:class="['form-control form-input p-0', { active: selectedMorpheme === part.str }]"
|
||||
:size="selectedPronoun.morphemes[part.str] ? selectedPronoun.morphemes[part.str].length : 0"
|
||||
:size="selectedPronoun.morphemes[part.str]?.length ?? 0"
|
||||
maxlength="24"
|
||||
@focus="selectedMorpheme = part.str"
|
||||
@blur="selectedMorpheme = ''"
|
||||
@ -134,7 +134,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="$config.pronouns.multiple !== false" id="multiple" class="list-group-item">
|
||||
<li id="multiple" class="list-group-item">
|
||||
<p class="h5">
|
||||
<Spelling :text="$config.pronouns.multiple.name" />
|
||||
</p>
|
||||
@ -160,7 +160,7 @@
|
||||
:class="['btn', multiple.includes(pronounName) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
||||
@click="toggleMultiple(pronounName)"
|
||||
>
|
||||
<Spelling :text="pronoun.name()" />
|
||||
<Spelling :text="pronoun.name('')" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@ -248,25 +248,41 @@
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { examples, pronouns, pronounLibrary } from '../src/data.js';
|
||||
import { ExamplePart, Pronoun } from '../src/classes.ts';
|
||||
import Compressor from '../src/compressor.js';
|
||||
import MORPHEMES from '../data/pronouns/morphemes.js';
|
||||
import { mapState } from 'vuex';
|
||||
import Suggested from '../data/pronouns/Suggested.vue';
|
||||
import type { Example, PronounLibrary } from '../src/classes.ts';
|
||||
|
||||
export default {
|
||||
interface PronounsData {
|
||||
examples: Example[];
|
||||
pronouns: Record<string, Pronoun>;
|
||||
pronounLibrary: PronounLibrary;
|
||||
selectedPronoun: Pronoun;
|
||||
selectedMorpheme: string;
|
||||
customiseMultiple: boolean;
|
||||
multiple: string[];
|
||||
customise: boolean;
|
||||
glue: string;
|
||||
DESCRIPTION_MAXLENGTH: number;
|
||||
}
|
||||
|
||||
export default Vue.extend({
|
||||
components: { Suggested },
|
||||
data() {
|
||||
data(): PronounsData {
|
||||
if (!this.$config.pronouns.enabled) {
|
||||
throw null;
|
||||
}
|
||||
return {
|
||||
examples,
|
||||
pronouns,
|
||||
pronounLibrary,
|
||||
|
||||
// Added 'he' as a default in case it can't read the $config
|
||||
// for its' default to prevent a crash
|
||||
selectedPronoun: pronouns[this.$config.pronouns.default].clone(true) ?? 'he',
|
||||
selectedPronoun: pronouns[this.$config.pronouns.default].clone(true),
|
||||
selectedMorpheme: '',
|
||||
|
||||
customiseMultiple: false,
|
||||
@ -283,7 +299,7 @@ export default {
|
||||
...mapState([
|
||||
'user',
|
||||
]),
|
||||
usedBase() {
|
||||
usedBase(): string | null {
|
||||
const name = this.selectedPronoun.name(this.glue);
|
||||
for (const key in this.pronouns) {
|
||||
if (this.pronouns.hasOwnProperty(key)) {
|
||||
@ -300,11 +316,11 @@ export default {
|
||||
|
||||
return null;
|
||||
},
|
||||
usedBaseEquals() {
|
||||
return this.usedBase && this.selectedPronoun.equals(this.pronouns[this.usedBase], true);
|
||||
usedBaseEquals(): boolean {
|
||||
return !!this.usedBase && this.selectedPronoun.equals(this.pronouns[this.usedBase], true);
|
||||
},
|
||||
longLink() {
|
||||
const base = this.pronouns[this.selectedPronoun.morphemes[MORPHEMES[0]]];
|
||||
longLink(): string {
|
||||
const base = this.pronouns[this.selectedPronoun.morphemes[MORPHEMES[0]]!];
|
||||
|
||||
return base
|
||||
? Compressor.compress(
|
||||
@ -313,7 +329,7 @@ export default {
|
||||
).join(',')
|
||||
: this.selectedPronoun.toString();
|
||||
},
|
||||
link() {
|
||||
link(): string | null {
|
||||
if (!this.selectedPronoun.pronoun()) {
|
||||
return null;
|
||||
}
|
||||
@ -331,7 +347,7 @@ export default {
|
||||
|
||||
return this.addSlash(`${this.$base + (this.$config.pronouns.prefix || '')}/${link}`);
|
||||
},
|
||||
linkMultiple() {
|
||||
linkMultiple(): string | null {
|
||||
if (!this.multiple.length) {
|
||||
return null;
|
||||
}
|
||||
@ -340,7 +356,7 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleMultiple(name) {
|
||||
toggleMultiple(name: string): void {
|
||||
const index = this.multiple.indexOf(name);
|
||||
if (index > -1) {
|
||||
this.multiple.splice(index, 1);
|
||||
@ -348,14 +364,14 @@ export default {
|
||||
this.multiple.push(name);
|
||||
}
|
||||
},
|
||||
addSlash(link) {
|
||||
addSlash(link: string): string {
|
||||
return link + (['*', '\''].includes(link.substr(link.length - 1)) ? '/' : '');
|
||||
},
|
||||
clearExampleParts(parts) {
|
||||
clearExampleParts(parts: ExamplePart[]): ExamplePart[] {
|
||||
return parts.map((p) => new ExamplePart(p.variable, p.str.replace(/^'/, '')));
|
||||
},
|
||||
deduplicatePronounGroup(pronounGroup) {
|
||||
const dict = {};
|
||||
deduplicatePronounGroup(pronounGroup: Pronoun[]): Pronoun[] {
|
||||
const dict: Record<string, Pronoun> = {};
|
||||
for (const pronoun of pronounGroup) {
|
||||
if (dict.hasOwnProperty(pronoun.name(this.glue))) {
|
||||
continue;
|
||||
@ -365,7 +381,7 @@ export default {
|
||||
return Object.values(dict);
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user