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