thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Don't set values on ref prop

Browse source
This commit is contained in:
thepaperpilot 2022-12-24 08:38:36 -06:00
parent 832517d192
commit cd36549cbe
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/Game.vue
View file

@ -4,7 +4,6 @@
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="index" :key="index"
class="tab" class="tab"
:ref="`tab-${index}`"
:style="unref(layers[tab]?.style)" :style="unref(layers[tab]?.style)"
:class="unref(layers[tab]?.classes)" :class="unref(layers[tab]?.classes)"
> >
@ -14,7 +13,7 @@
v-if="layerKeys.includes(tab)" v-if="layerKeys.includes(tab)"
v-bind="gatherLayerProps(layers[tab]!)" v-bind="gatherLayerProps(layers[tab]!)"
:index="index" :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 /> <component :is="tab" :index="index" v-else />
</div> </div>

15
src/components/Layer.vue
View file

@ -2,7 +2,11 @@
<div class="layer-container" :style="{ '--layer-color': unref(color) }"> <div class="layer-container" :style="{ '--layer-color': unref(color) }">
<button v-if="showGoBack" class="goBack" @click="goBack">❌</button> <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" /> <component v-if="minimizedComponent" :is="minimizedComponent" />
<div v-else>{{ unref(name) }}</div> <div v-else>{{ unref(name) }}</div>
</button> </button>
@ -11,7 +15,8 @@
<component :is="component" /> <component :is="component" />
</Context> </Context>
</div> </div>
<button v-if="unref(minimizable)" class="minimize" @click="minimized.value = true">
<button v-if="unref(minimizable)" class="minimize" @click="$emit('setMinimized', true)">
▼ ▼
</button> </button>
</div> </div>
@ -41,7 +46,7 @@ export default defineComponent({
}, },
minimizedDisplay: processedPropType<CoercableComponent>(Object, String, Function), minimizedDisplay: processedPropType<CoercableComponent>(Object, String, Function),
minimized: { minimized: {
type: Object as PropType<Persistent<boolean>>, type: Object as PropType<Ref<boolean>>,
required: true required: true
}, },
name: { name: {
@ -55,6 +60,7 @@ export default defineComponent({
required: true required: true
} }
}, },
emits: ["setMinimized"],
setup(props) { setup(props) {
const { display, index, minimized, minimizedDisplay } = toRefs(props); const { display, index, minimized, minimizedDisplay } = toRefs(props);
@ -78,8 +84,7 @@ export default defineComponent({
showGoBack, showGoBack,
updateNodes, updateNodes,
unref, unref,
goBack, goBack
setMinimized
}; };
} }
}); });