You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
884 B
38 lines
884 B
import type { ComputedRef, Ref } from 'vue';
|
|
import { ref, watch } from 'vue';
|
|
|
|
export default function useTextValueMapping({
|
|
valueTexts,
|
|
onTextChange,
|
|
}: {
|
|
/** Must useMemo, to assume that `valueTexts` only match on the first change */
|
|
valueTexts: ComputedRef<string[]>;
|
|
onTextChange: (text: string) => void;
|
|
}): [Ref<string>, (text: string) => void, () => void] {
|
|
const text = ref('');
|
|
|
|
function triggerTextChange(value: string) {
|
|
text.value = value;
|
|
onTextChange(value);
|
|
}
|
|
|
|
function resetText() {
|
|
text.value = valueTexts.value[0];
|
|
}
|
|
|
|
watch(
|
|
() => [...valueTexts.value],
|
|
(cur, pre = []) => {
|
|
if (
|
|
cur.join('||') !== pre.join('||') &&
|
|
valueTexts.value.every(valText => valText !== text.value)
|
|
) {
|
|
resetText();
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
return [text, triggerTextChange, resetText];
|
|
}
|