60bb484ee4
- Forward data-test-id attrs through rendered controls instead of exposing test-id props - Move shell chrome components into the Shell namespace - Remove internal planning docs from published VitePress docs - Add guardrails and contributor guidance for test hooks and component placement
46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import IconButton from '@/components/ui/IconButton.vue'
|
|
import PanelSection from '@/components/ui/PanelSection.vue'
|
|
import { useI18n, useSceneComputed } from '@open-pencil/vue'
|
|
|
|
import { useEditorStore } from '@/app/editor/active-store'
|
|
|
|
const emit = defineEmits<{ openDialog: [] }>()
|
|
|
|
const editor = useEditorStore()
|
|
const collectionCount = useSceneComputed(() => {
|
|
void editor.state.sceneVersion
|
|
return editor.getCollectionCount()
|
|
})
|
|
const variableCount = useSceneComputed(() => {
|
|
void editor.state.sceneVersion
|
|
return editor.getVariableCount()
|
|
})
|
|
const hasVariables = computed(() => variableCount.value > 0)
|
|
const { panels } = useI18n()
|
|
</script>
|
|
|
|
<template>
|
|
<PanelSection
|
|
:label="panels.variables"
|
|
data-test-id="variables-section"
|
|
:ui="{ label: 'font-medium text-surface' }"
|
|
>
|
|
<template #actions>
|
|
<IconButton
|
|
:label="panels.openVariables"
|
|
data-test-id="variables-section-open"
|
|
@click="emit('openDialog')"
|
|
>
|
|
<icon-lucide-settings-2 class="size-3.5" />
|
|
</IconButton>
|
|
</template>
|
|
<div v-if="hasVariables" class="mt-1 text-[11px] text-muted">
|
|
{{ variableCount }} / {{ collectionCount }}
|
|
</div>
|
|
<div v-else class="mt-1 text-[11px] text-muted">{{ panels.noLocalVariables }}</div>
|
|
</PanelSection>
|
|
</template>
|