38 lines
884 B
TypeScript
38 lines
884 B
TypeScript
|
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];
|
||
|
|
}
|