TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-22 03:57:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

(vue) migrate <Example> to composition API

Browse Source
This commit is contained in:
Valentyne Stigloher 2025-04-01 21:04:32 +02:00
parent b279940380
commit 9f3d3bca7f
1 changed files with 43 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
components/Example.vue
View File

@ -1,3 +1,46 @@
<script setup lang="ts">
import type { Example, Pronoun, ExamplePart } from '~/src/classes.ts';
const props = withDefaults(defineProps<{
example: Example;
pronoun: Pronoun;
counter?: number;
link?: boolean;
pronunciation?: boolean;
}>(), {
counter: 0,
});
const startsWithArabicLetter = /^[\u0621-\u064A]/;
const endsWithArabicLetter = /[\u0621-\u064A]$/;
const zeroWidthJoiner = '\u200d';
const exampleParts = computed((): ExamplePart[] => {
return props.example.parts(props.pronoun, props.counter);
});
const getContent = (index: number): string | null => {
if (exampleParts.value[index].variable) {
return props.pronoun.getMorpheme(exampleParts.value[index].str, props.counter);
}
return exampleParts.value[index].str;
};
const getPrepend = (index: number): string => {
if (getContent(index)?.match(startsWithArabicLetter) &&
index > 0 && getContent(index - 1)?.match(endsWithArabicLetter)) {
return zeroWidthJoiner;
}
return '';
};
const getAppend = (index: number): string => {
if (getContent(index)?.match(endsWithArabicLetter) &&
index < exampleParts.value.length - 1 && getContent(index + 1)?.match(startsWithArabicLetter)) {
return zeroWidthJoiner;
}
return '';
};
</script>
<template> <template>
<template v-for="(part, index) in exampleParts" :key="index"> <template v-for="(part, index) in exampleParts" :key="index">
<strong v-if="part.variable"><Morpheme <strong v-if="part.variable"><Morpheme
@ -17,51 +60,3 @@
:pronunciation="example.toPronunciationString(pronoun) as string" :pronunciation="example.toPronunciationString(pronoun) as string"
/> />
</template> </template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Example, Pronoun } from '../src/classes.ts';
import type { ExamplePart } from '../src/classes.ts';
const startsWithArabicLetter = /^[\u0621-\u064A]/;
const endsWithArabicLetter = /[\u0621-\u064A]$/;
const zeroWidthJoiner = '\u200d';
export default defineComponent({
props: {
example: { required: true, type: Example },
pronoun: { required: true, type: Pronoun },
counter: { default: 0, type: Number },
link: { type: Boolean },
pronunciation: { type: Boolean },
},
computed: {
exampleParts(): ExamplePart[] {
return this.example.parts(this.pronoun, this.counter);
},
},
methods: {
getContent(index: number): string | null {
if (this.exampleParts[index].variable) {
return this.pronoun.getMorpheme(this.exampleParts[index].str, this.counter);
}
return this.exampleParts[index].str;
},
getPrepend(index: number): string {
if (this.getContent(index)?.match(startsWithArabicLetter) &&
index > 0 && this.getContent(index - 1)?.match(endsWithArabicLetter)) {
return zeroWidthJoiner;
}
return '';
},
getAppend(index: number): string {
if (this.getContent(index)?.match(endsWithArabicLetter) &&
index < this.exampleParts.length - 1 && this.getContent(index + 1)?.match(startsWithArabicLetter)) {
return zeroWidthJoiner;
}
return '';
},
},
});
</script>