diff --git a/src/components/Game.vue b/src/components/Game.vue index 6f9bb66..9dd1e27 100644 --- a/src/components/Game.vue +++ b/src/components/Game.vue @@ -36,8 +36,9 @@ const layerKeys = computed(() => Object.keys(layers)); const useHeader = projInfo.useHeader; function gatherLayerProps(layer: GenericLayer) { - const { display, minimized, minWidth, name, color, minimizable, nodes } = layer; - return { display, minimized, minWidth, name, color, minimizable, nodes }; + const { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay } = + layer; + return { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay }; } diff --git a/src/components/Layer.vue b/src/components/Layer.vue index a64a255..abdf2bf 100644 --- a/src/components/Layer.vue +++ b/src/components/Layer.vue @@ -2,7 +2,8 @@
@@ -21,7 +22,7 @@ import type { CoercableComponent } from "features/feature"; import type { FeatureNode } from "game/layers"; import type { Persistent } from "game/persistence"; import player from "game/player"; -import { computeComponent, processedPropType, wrapRef } from "util/vue"; +import { computeComponent, computeOptionalComponent, processedPropType, wrapRef } from "util/vue"; import type { PropType, Ref } from "vue"; import { computed, defineComponent, nextTick, toRefs, unref, watch } from "vue"; import Context from "./Context.vue"; @@ -41,6 +42,7 @@ export default defineComponent({ type: processedPropType(Object, String, Function), required: true }, + minimizedDisplay: processedPropType(Object, String, Function), minimized: { type: Object as PropType>, required: true @@ -61,9 +63,10 @@ export default defineComponent({ } }, setup(props) { - const { display, index, minimized, minWidth, tab } = toRefs(props); + const { display, index, minimized, minWidth, tab, minimizedDisplay } = toRefs(props); const component = computeComponent(display); + const minimizedComponent = computeOptionalComponent(minimizedDisplay); const showGoBack = computed( () => projInfo.allowGoBack && index.value > 0 && !minimized.value ); @@ -106,6 +109,7 @@ export default defineComponent({ return { component, + minimizedComponent, showGoBack, updateNodes, unref, @@ -155,7 +159,7 @@ export default defineComponent({ background-color: transparent; } -.layer-tab.minimized div { +.layer-tab.minimized > * { margin: 0; writing-mode: vertical-rl; padding-left: 10px; diff --git a/src/game/layers.tsx b/src/game/layers.tsx index 404d72c..5435a2d 100644 --- a/src/game/layers.tsx +++ b/src/game/layers.tsx @@ -109,7 +109,7 @@ export interface LayerOptions { color?: Computable; /** * The layout of this layer's features. - * When the layer is open in {@link game/player.PlayerData.tabs}, this is the content that is display. + * When the layer is open in {@link game/player.PlayerData.tabs}, this is the content that is displayed. */ display: Computable; /** An object of classes that should be applied to the display. */ @@ -126,6 +126,11 @@ export interface LayerOptions { * Defaults to true. */ minimizable?: Computable; + /** + * The layout of this layer's features. + * When the layer is open in {@link game/player.PlayerData.tabs}, but the tab is {@link Layer.minimized} this is the content that is displayed. + */ + minimizedDisplay?: Computable; /** * Whether or not to force the go back button to be hidden. * If true, go back will be hidden regardless of {@link data/projInfo.allowGoBack}. @@ -170,6 +175,7 @@ export type Layer = Replace< name: GetComputableTypeWithDefault; minWidth: GetComputableTypeWithDefault; minimizable: GetComputableTypeWithDefault; + minimizedDisplay: GetComputableType; forceHideGoBack: GetComputableType; } >; @@ -231,6 +237,7 @@ export function createLayer( setDefault(layer, "minWidth", 600); processComputable(layer as T, "minimizable"); setDefault(layer, "minimizable", true); + processComputable(layer as T, "minimizedDisplay"); return layer as unknown as Layer; });