a721e82a4f
This commit upgrades TypeScript to the latest version 5.3 and introduces `verbatimModuleSyntax` in line with the official Vue guide recommendatinos (vuejs/docs#2592). By enforcing `import type` for type-only imports, this commit improves code clarity and supports tooling optimization, ensuring imports are only bundled when necessary for runtime. Changes: - Bump TypeScript to 5.3.3 across the project. - Adjust import statements to utilize `import type` where applicable, promoting cleaner and more efficient code.
95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="content">
|
|
<slot />
|
|
</div>
|
|
<ToggleDocumentationButton
|
|
v-if="docs && docs.length > 0"
|
|
@show="isExpanded = true"
|
|
@hide="isExpanded = false"
|
|
/>
|
|
</div>
|
|
<ExpandCollapseTransition>
|
|
<div
|
|
v-if="docs && docs.length > 0 && isExpanded"
|
|
class="docs"
|
|
:class="{
|
|
'docs-expanded': isExpanded,
|
|
'docs-collapsed': !isExpanded,
|
|
}"
|
|
>
|
|
<DocumentationText
|
|
:docs="docs"
|
|
class="text"
|
|
:class="{
|
|
expanded: isExpanded,
|
|
collapsed: !isExpanded,
|
|
}"
|
|
/>
|
|
</div>
|
|
</ExpandCollapseTransition>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, type PropType } from 'vue';
|
|
import ExpandCollapseTransition from '@/presentation/components/Shared/ExpandCollapse/ExpandCollapseTransition.vue';
|
|
import DocumentationText from './DocumentationText.vue';
|
|
import ToggleDocumentationButton from './ToggleDocumentationButton.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
DocumentationText,
|
|
ToggleDocumentationButton,
|
|
ExpandCollapseTransition,
|
|
},
|
|
props: {
|
|
docs: {
|
|
type: Array as PropType<readonly string[]>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup() {
|
|
const isExpanded = ref(false);
|
|
|
|
return {
|
|
isExpanded,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
|
|
max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
|
|
*:not(:first-child) {
|
|
margin-left: 5px;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.content {
|
|
flex: 1; // Expands the content to fill available width, aligning the documentation button to the right.
|
|
}
|
|
}
|
|
.docs {
|
|
background: $color-primary-darkest;
|
|
margin-top: 0.25em;
|
|
color: $color-on-primary;
|
|
text-transform: none;
|
|
padding: 0.5em;
|
|
&-collapsed {
|
|
display: none;
|
|
}
|
|
cursor: auto;
|
|
user-select: text;
|
|
}
|
|
}
|
|
</style>
|