Use shallowRef in more places
This commit is contained in:
parent
bca8c6d64e
commit
3042d5ebb6
4 changed files with 7 additions and 7 deletions
|
@ -4,7 +4,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { RegisterNodeInjectionKey, UnregisterNodeInjectionKey } from "game/layers";
|
||||
import { computed, inject, onUnmounted, ref, toRefs, unref, watch } from "vue";
|
||||
import { computed, inject, onUnmounted, shallowRef, toRefs, unref, watch } from "vue";
|
||||
|
||||
const _props = defineProps<{ id: string }>();
|
||||
const props = toRefs(_props);
|
||||
|
@ -14,7 +14,7 @@ const register = inject(RegisterNodeInjectionKey, () => {});
|
|||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
const unregister = inject(UnregisterNodeInjectionKey, () => {});
|
||||
|
||||
const node = ref<HTMLElement | null>(null);
|
||||
const node = shallowRef<HTMLElement | null>(null);
|
||||
const parentNode = computed(() => node.value && node.value.parentElement);
|
||||
|
||||
watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
import "components/common/fields.css";
|
||||
import type { CoercableComponent } from "features/feature";
|
||||
import { coerceComponent } from "util/vue";
|
||||
import { computed, onMounted, ref, toRefs, unref } from "vue";
|
||||
import { computed, onMounted, shallowRef, toRefs, unref } from "vue";
|
||||
import VueTextareaAutosize from "vue-textarea-autosize";
|
||||
|
||||
const _props = defineProps<{
|
||||
|
@ -49,7 +49,7 @@ const titleComponent = computed(
|
|||
() => props.title?.value && coerceComponent(unref(props.title.value), "span")
|
||||
);
|
||||
|
||||
const field = ref<HTMLElement | null>(null);
|
||||
const field = shallowRef<HTMLElement | null>(null);
|
||||
onMounted(() => {
|
||||
field.value?.focus();
|
||||
});
|
||||
|
|
|
@ -5,11 +5,11 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
import { nextTick, onMounted, ref, shallowRef } from "vue";
|
||||
|
||||
const top = ref("0");
|
||||
const observer = new ResizeObserver(updateTop);
|
||||
const element = ref<HTMLElement | null>(null);
|
||||
const element = shallowRef<HTMLElement | null>(null);
|
||||
|
||||
function updateTop() {
|
||||
let el = element.value;
|
||||
|
|
|
@ -35,7 +35,7 @@ export default defineComponent({
|
|||
const app = shallowRef<null | Application>(null);
|
||||
|
||||
const resizeObserver = new ResizeObserver(updateBounds);
|
||||
const resizeListener = ref<HTMLElement | null>(null);
|
||||
const resizeListener = shallowRef<HTMLElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
// ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
|
||||
|
|
Loading…
Reference in a new issue