From cd36549cbefe45ed6a73850069e7e6198ce5e77a Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 24 Dec 2022 08:38:36 -0600
Subject: [PATCH] Don't set values on ref prop

---
 src/components/Game.vue  |  3 +--
 src/components/Layer.vue | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Game.vue b/src/components/Game.vue
index 8fa3141..680273a 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -4,7 +4,6 @@
             v-for="(tab, index) in tabs"
             :key="index"
             class="tab"
-            :ref="`tab-${index}`"
             :style="unref(layers[tab]?.style)"
             :class="unref(layers[tab]?.classes)"
         >
@@ -14,7 +13,7 @@
                     v-if="layerKeys.includes(tab)"
                     v-bind="gatherLayerProps(layers[tab]!)"
                     :index="index"
-                    :tab="() => (($refs[`tab-${index}`] as HTMLElement[] | undefined)?.[0])"
+                    @set-minimized="value => (layers[tab]!.minimized.value = value)"
                 />
                 <component :is="tab" :index="index" v-else />
             </div>
diff --git a/src/components/Layer.vue b/src/components/Layer.vue
index 2d89ed2..fd7c4e4 100644
--- a/src/components/Layer.vue
+++ b/src/components/Layer.vue
@@ -2,7 +2,11 @@
     <div class="layer-container" :style="{ '--layer-color': unref(color) }">
         <button v-if="showGoBack" class="goBack" @click="goBack">❌</button>
 
-        <button class="layer-tab minimized" v-if="unref(minimized)" @click="setMinimized(false)">
+        <button
+            class="layer-tab minimized"
+            v-if="unref(minimized)"
+            @click="$emit('setMinimized', false)"
+        >
             <component v-if="minimizedComponent" :is="minimizedComponent" />
             <div v-else>{{ unref(name) }}</div>
         </button>
@@ -11,7 +15,8 @@
                 <component :is="component" />
             </Context>
         </div>
-        <button v-if="unref(minimizable)" class="minimize" @click="minimized.value = true">
+
+        <button v-if="unref(minimizable)" class="minimize" @click="$emit('setMinimized', true)">
             ▼
         </button>
     </div>
@@ -41,7 +46,7 @@ export default defineComponent({
         },
         minimizedDisplay: processedPropType<CoercableComponent>(Object, String, Function),
         minimized: {
-            type: Object as PropType<Persistent<boolean>>,
+            type: Object as PropType<Ref<boolean>>,
             required: true
         },
         name: {
@@ -55,6 +60,7 @@ export default defineComponent({
             required: true
         }
     },
+    emits: ["setMinimized"],
     setup(props) {
         const { display, index, minimized, minimizedDisplay } = toRefs(props);
 
@@ -78,8 +84,7 @@ export default defineComponent({
             showGoBack,
             updateNodes,
             unref,
-            goBack,
-            setMinimized
+            goBack
         };
     }
 });