9845a7cd68
Styling of codeblocks:
- Uniform margins as other documentation elements.
- Add small margin for inline code-blocks.
- Use different background color for inline code-blocks.
- Introduce `inline-code` and `code-block` mixins for clarity in
styling.
Overflowing of codeblocks:
- Improve flex layout of the tree component to be handle overflowing
content and providing maximum available width. To be able to correctly
provide maximum available width in card content, card expansion layout
is changed so both close button and the content gets their full width.
- Other refactorings to support this:
- Introduce separate Vue component for checkboxes of nodes for better
separation of concerns and improved maintainability.
- Refactor `LeafTreeNode` to make it simpler, separating layout concerns
from other styling.
- `ScriptsTree.vue`: Prefer `<div>`s instead of `<span>`s as they
represent large content.
- Remove unnecessary `<div>`s and use `<template>`s to reduce HTML
complexity.
- Update script documentation to not include unnecessary left padding
on script code blocks.
- Refactor SCSS variable names in `DocumentationText.vue` for clarity.
103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<template>
|
|
<div
|
|
ref="treeContainerElement"
|
|
class="tree"
|
|
>
|
|
<TreeRoot :tree-root="tree" :rendering-strategy="nodeRenderingScheduler">
|
|
<template #default="slotProps">
|
|
<slot name="node-content" v-bind="slotProps" />
|
|
</template>
|
|
</TreeRoot>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent, onMounted, watch,
|
|
shallowRef, toRef, shallowReadonly,
|
|
} from 'vue';
|
|
import { TreeRootManager } from './TreeRoot/TreeRootManager';
|
|
import TreeRoot from './TreeRoot/TreeRoot.vue';
|
|
import { TreeInputNodeData } from './Bindings/TreeInputNodeData';
|
|
import { TreeViewFilterEvent } from './Bindings/TreeInputFilterEvent';
|
|
import { useTreeQueryFilter } from './UseTreeQueryFilter';
|
|
import { useTreeKeyboardNavigation } from './UseTreeKeyboardNavigation';
|
|
import { useNodeStateChangeAggregator } from './UseNodeStateChangeAggregator';
|
|
import { useLeafNodeCheckedStateUpdater } from './UseLeafNodeCheckedStateUpdater';
|
|
import { TreeNodeStateChangedEmittedEvent } from './Bindings/TreeNodeStateChangedEmittedEvent';
|
|
import { useAutoUpdateParentCheckState } from './UseAutoUpdateParentCheckState';
|
|
import { useAutoUpdateChildrenCheckState } from './UseAutoUpdateChildrenCheckState';
|
|
import { useGradualNodeRendering } from './Rendering/UseGradualNodeRendering';
|
|
import type { PropType } from 'vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TreeRoot,
|
|
},
|
|
props: {
|
|
initialNodes: {
|
|
type: Array as PropType<readonly TreeInputNodeData[]>,
|
|
default: () => [],
|
|
},
|
|
latestFilterEvent: {
|
|
type: Object as PropType<TreeViewFilterEvent | undefined>,
|
|
default: () => undefined,
|
|
},
|
|
selectedLeafNodeIds: {
|
|
type: Array as PropType<ReadonlyArray<string>>,
|
|
default: () => [],
|
|
},
|
|
},
|
|
emits: {
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
nodeStateChanged: (node: TreeNodeStateChangedEmittedEvent) => true,
|
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
},
|
|
setup(props, { emit }) {
|
|
const treeContainerElement = shallowRef<HTMLElement | undefined>();
|
|
|
|
const tree = new TreeRootManager();
|
|
|
|
const treeRef = shallowReadonly(shallowRef(tree));
|
|
|
|
useTreeKeyboardNavigation(treeRef, treeContainerElement);
|
|
useTreeQueryFilter(toRef(props, 'latestFilterEvent'), treeRef);
|
|
useLeafNodeCheckedStateUpdater(treeRef, toRef(props, 'selectedLeafNodeIds'));
|
|
useAutoUpdateParentCheckState(treeRef);
|
|
useAutoUpdateChildrenCheckState(treeRef);
|
|
const nodeRenderingScheduler = useGradualNodeRendering(treeRef);
|
|
|
|
const { onNodeStateChange } = useNodeStateChangeAggregator(treeRef);
|
|
|
|
onNodeStateChange((change) => {
|
|
emit('nodeStateChanged', {
|
|
node: change.node,
|
|
newState: change.newState,
|
|
oldState: change.oldState,
|
|
});
|
|
});
|
|
|
|
onMounted(() => {
|
|
watch(() => props.initialNodes, (nodes) => {
|
|
tree.collection.updateRootNodes(nodes);
|
|
}, { immediate: true });
|
|
});
|
|
|
|
return {
|
|
treeContainerElement,
|
|
nodeRenderingScheduler,
|
|
tree,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "./tree-colors" as *;
|
|
|
|
.tree {
|
|
background: $color-tree-bg;
|
|
overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
|
|
}
|
|
</style>
|