thepaperpilot
83d41428eb
- Removed `jsx()` and `JSXFunction`. You can now use `JSX.Element` like any other `Computable` value - `joinJSX` now always requires a joiner. Just pass the array of elements or wrap them in `<>` and `</>` if there's no joiner - Removed `coerceComponent`, `computeComponent`, and `computeOptionalComponent`; just use the `render` function now - It's recommended to now do `<MyComponent />` instead of `<component :is="myComponent" />` - All features no longer take the options as a type parameter, and all generic forms have been removed as a result - Fixed `forceHideGoBack` not being respected - Removed `deepUnref` as now things don't get unreffed before being passed into vue components by default - Moved MarkNode to new wrapper, and removed existing `mark` properties - Moved Tooltip to new wrapper, and made it take an options function instead of raw object - VueFeature component now wraps all vue features, and applies styling, classes, and visibility in the wrapping div. It also adds the Node component so features don't need to - `mergeAdjacent` now works with grids (perhaps should've used scss to reduce the amount of css this took) - `CoercableComponent` renamed to `Renderable` since it should be used with `render` - Replaced `isCoercableComponent` with `isJSXElement` - Replaced `Computable` and `ProcessedComputable` with the vue built-ins `MaybeRefOrGetter` and `MaybeRef` - `convertComputable` renamed to `processGetter` - Also removed `GetComputableTypeWithDefault` and `GetComputableType`, which can similarly be replaced - `dontMerge` is now a property on rows and columns rather than an undocumented css class you'd have to include on every feature within the row or column - Fixed saves manager not being imported in addiction warning component - Created `vueFeatureMixin` for simplifying the vue specific parts of a feature. Passes the component's properties in explicitly and directly from the feature itself - All features should now return an object that includes props typed to omit the options object and satisfies the feature. This will ensure type correctness and pass-through custom properties. (see existing features for more thorough examples of changes) - Replaced decorators with mixins, which won't require casting. Bonus amount decorators converted into generic bonus amount mixin. Removed effect decorator - All `render` functions now return `JSX.Element`. The `JSX` variants (e.g. `renderJSX`) (except `joinJSX`) have been removed - Moved all features that use the clickable component into the clickable folder - Removed `small` property from clickable, since its a single css rule (`min-height: unset`) (you could add a small css class and pass small to any vue feature's classes property, though) - Upgrades now use the clickable component - Added ConversionType symbol - Removed setDefault, just use `??=` - Added isType function that uses a type symbol to check - General cleanup
108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<template>
|
|
<div class="tabs-container" :class="{ useHeader }">
|
|
<div
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
class="tab"
|
|
:style="unref(layers[tab]?.style)"
|
|
:class="unref(layers[tab]?.classes)"
|
|
>
|
|
<Nav v-if="index === 0 && !useHeader" />
|
|
<div class="inner-tab">
|
|
<LayerVue
|
|
v-if="layerKeys.includes(tab)"
|
|
v-bind="gatherLayerProps(layers[tab])"
|
|
:index="index"
|
|
@set-minimized="(value: boolean) => (layers[tab]!.minimized.value = value)"
|
|
/>
|
|
<component :is="tab" :index="index" v-else />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import projInfo from "data/projInfo.json";
|
|
import { type Layer, layers } from "game/layers";
|
|
import player from "game/player";
|
|
import { computed, toRef, unref } from "vue";
|
|
import LayerVue from "./Layer.vue";
|
|
import Nav from "./Nav.vue";
|
|
|
|
const tabs = toRef(player, "tabs");
|
|
const layerKeys = computed(() => Object.keys(layers));
|
|
const useHeader = projInfo.useHeader;
|
|
|
|
function gatherLayerProps(layer: Layer) {
|
|
const {
|
|
display,
|
|
name,
|
|
color,
|
|
minimizable,
|
|
minimizedDisplay,
|
|
minimized,
|
|
nodes,
|
|
forceHideGoBack
|
|
} = layer;
|
|
return {
|
|
display,
|
|
name,
|
|
color,
|
|
minimizable,
|
|
minimizedDisplay,
|
|
minimized,
|
|
nodes,
|
|
forceHideGoBack
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tabs-container {
|
|
width: 100vw;
|
|
flex-grow: 1;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
.tabs-container:not(.useHeader) {
|
|
width: calc(100vw - 50px);
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.tab {
|
|
position: relative;
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
transition-duration: 0s;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.inner-tab {
|
|
padding: 50px 10px;
|
|
min-height: calc(100% - 100px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.tab + .tab > .inner-tab {
|
|
border-left: solid 4px var(--outline);
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.tab hr {
|
|
height: 4px;
|
|
border: none;
|
|
background: var(--outline);
|
|
margin: var(--feature-margin) 0;
|
|
}
|
|
|
|
.tab .modal-body hr {
|
|
margin: 7px 0;
|
|
}
|
|
</style>
|