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