fix: 🐛 non-duplicate skin tone selection
This commit is contained in:
parent
b6dd48a375
commit
2f38f228d6
1 changed files with 19 additions and 3 deletions
|
@ -14,7 +14,11 @@
|
|||
<button
|
||||
v-for="skinTone in props.skinTones"
|
||||
class="_button"
|
||||
@click="applySkinTone(props.skinTones.indexOf(skinTone) + 1)"
|
||||
@click.prevent="
|
||||
applyUnicodeSkinTone(
|
||||
props.skinTones.indexOf(skinTone) + 1
|
||||
)
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="ph-circle ph-fill ph-fw ph-lg"
|
||||
|
@ -39,6 +43,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { addSkinTone } from "@/scripts/emojilist";
|
||||
import emojiComponents from "unicode-emoji-json/data-emoji-components.json";
|
||||
|
||||
const props = defineProps<{
|
||||
emojis: string[];
|
||||
|
@ -49,8 +54,19 @@ const props = defineProps<{
|
|||
|
||||
const localEmojis = ref([...props.emojis]);
|
||||
|
||||
function applySkinTone(custom?: number) {
|
||||
function applyUnicodeSkinTone(custom?: number) {
|
||||
for (let i = 0; i < localEmojis.value.length; i++) {
|
||||
if (
|
||||
[
|
||||
emojiComponents.light_skin_tone,
|
||||
emojiComponents.medium_light_skin_tone,
|
||||
emojiComponents.medium_skin_tone,
|
||||
emojiComponents.medium_dark_skin_tone,
|
||||
emojiComponents.dark_skin_tone,
|
||||
].some((v) => localEmojis.value[i].endsWith(v))
|
||||
) {
|
||||
localEmojis.value[i] = localEmojis.value[i].slice(0, -1);
|
||||
}
|
||||
localEmojis.value[i] = addSkinTone(localEmojis.value[i], custom);
|
||||
}
|
||||
}
|
||||
|
@ -63,7 +79,7 @@ const shown = ref(!!props.initialShown);
|
|||
|
||||
onMounted(() => {
|
||||
if (props.skinToneSelector) {
|
||||
applySkinTone();
|
||||
applyUnicodeSkinTone();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue