b9c89b701f
This commit improves markdown rendering to convert reference labels (e.g., `[1]`) to superscripts, improving document readability without cluttering the text. This improvement applies documentation of all scripts and categories. Changes: - Implement superscript conversion for reference labels within markdown content, ensuring a cleaner presentation of textual references. - Enable HTML content within markdown, necessary for inserting `<sup>` elements due to limitations in `markdown-it`, see markdown-it/markdown-it#999 for details. - Refactor markdown rendering process for improved testability and adherence to the Single Responsibility Principle. - Create `_typography.scss` with font size definitions, facilitating better control over text presentation. - Adjust external URL indicator icon sizing for consistency, aligning images with the top of the text to maintain a uniform appearence. - Use normal font-size explicitly for documentation text to ensure consistency. - Remove text size specification in `markdown-styles` mixin, using `1em` for spacing to simplify styling. - Rename font sizing variables for clarity, distinguishing between absolute and relative units. - Change `font-size-relative-smaller` to be `80%`, browser default for `font-size: smaller;` CSS style and use it with `<sup>` elements. - Improve the logic for converting plain URLs to hyperlinks, removing trailing whitespace for cleaner link generation. - Fix plain URL to hyperlink (autolinking) logic removing trailing whitespace from the original markdown content. This was revealed by tests after separating its logic. - Increase test coverage with more tests. - Add types for `markdown-it` through `@types/markdown-it` package for better editor support and maintainability. - Simplify implementation of adding custom anchor attributes in `markdown-it` using latest documentation.
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<div class="icon">
|
|
<AppIcon
|
|
v-if="isAnyChildSelected && !areAllChildrenSelected"
|
|
icon="battery-half"
|
|
/>
|
|
<AppIcon
|
|
v-if="areAllChildrenSelected"
|
|
icon="battery-full"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed } from 'vue';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
import { ICategory } from '@/domain/ICategory';
|
|
import { ICategoryCollection } from '@/domain/ICategoryCollection';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
AppIcon,
|
|
},
|
|
props: {
|
|
categoryId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const { currentState } = injectKey((keys) => keys.useCollectionState);
|
|
const { currentSelection } = injectKey((keys) => keys.useUserSelectionState);
|
|
const currentCollection = computed<ICategoryCollection>(() => currentState.value.collection);
|
|
|
|
const currentCategory = computed<ICategory>(
|
|
() => currentCollection.value.getCategory(props.categoryId),
|
|
);
|
|
|
|
const isAnyChildSelected = computed<boolean>(
|
|
() => currentSelection.value.categories.isAnyScriptSelected(currentCategory.value),
|
|
);
|
|
|
|
const areAllChildrenSelected = computed<boolean>(
|
|
() => currentSelection.value.categories.areAllScriptsSelected(currentCategory.value),
|
|
);
|
|
|
|
return {
|
|
isAnyChildSelected,
|
|
areAllChildrenSelected,
|
|
};
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
.icon {
|
|
font-size: $font-size-absolute-normal;
|
|
}
|
|
</style>
|