Rename primitives panel

This commit is contained in:
Nettika 2026-01-29 11:53:45 -08:00
parent 8ca88e2542
commit 93a2ab9037
No known key found for this signature in database
2 changed files with 8 additions and 8 deletions

View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue' import { ref, computed, onMounted, watch } from 'vue'
import PrimitivesSidebar from './PrimitivesSidebar.vue' import PrimitivesPanel from './PrimitivesPanel.vue'
import PropertiesPanel from './PropertiesPanel.vue' import PropertiesPanel from './PropertiesPanel.vue'
const STORAGE_KEY = 'rapidmodel-sidebar-state' const STORAGE_KEY = 'rapidmodel-sidebar-state'
@ -60,13 +60,13 @@ onMounted(() => {
<slot /> <slot />
</main> </main>
<PrimitivesSidebar <PrimitivesPanel
v-model:collapsed="leftCollapsed" v-model:collapsed="leftCollapsed"
class="left-sidebar" class="left-sidebar"
:style="{ width: leftSidebarWidth }" :style="{ width: leftSidebarWidth }"
> >
<slot name="left-sidebar" /> <slot name="left-sidebar" />
</PrimitivesSidebar> </PrimitivesPanel>
<PropertiesPanel class="properties-panel"> <PropertiesPanel class="properties-panel">
<slot name="properties-panel" /> <slot name="properties-panel" />

View file

@ -25,16 +25,16 @@ function toggle() {
</script> </script>
<template> <template>
<div class="primitives-sidebar-container"> <div class="primitives-panel-container">
<button <button
class="toggle" class="toggle"
:class="{ 'toggle--floating': isCollapsed }" :class="{ 'toggle--floating': isCollapsed }"
:title="isCollapsed ? 'Expand primitives toolbox' : 'Collapse primitives toolbox'" :title="isCollapsed ? 'Expand primitives panel' : 'Collapse primitives panel'"
@click="toggle" @click="toggle"
> >
<span class="toggle-icon">{{ isCollapsed ? '»' : '«' }}</span> <span class="toggle-icon">{{ isCollapsed ? '»' : '«' }}</span>
</button> </button>
<aside v-show="!isCollapsed" class="primitives-sidebar"> <aside v-show="!isCollapsed" class="primitives-panel">
<div class="content"> <div class="content">
<slot /> <slot />
</div> </div>
@ -43,13 +43,13 @@ function toggle() {
</template> </template>
<style scoped> <style scoped>
.primitives-sidebar-container { .primitives-panel-container {
position: relative; position: relative;
height: 100%; height: 100%;
overflow: visible; overflow: visible;
} }
.primitives-sidebar { .primitives-panel {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;