layout, footer, aside, editLink, next, prev, sidebar
| layout |
footer |
aside |
editLink |
next |
prev |
sidebar |
| doc |
false |
false |
false |
false |
false |
true |
<script setup>
import { computed } from 'vue'
import { useData } from 'vitepress'
import IconPreview from '../.vitepress/theme/components/icons/IconPreview.vue'
import IconPreviewSmall from '../.vitepress/theme/components/icons/IconPreviewSmall.vue'
import IconInfo from '../.vitepress/theme/components/icons/IconInfo.vue'
import IconContributors from '../.vitepress/theme/components/icons/IconContributors.vue'
import RelatedIcons from '../.vitepress/theme/components/icons/RelatedIcons.vue'
import CodeGroup from '../.vitepress/theme/components/base/CodeGroup.vue'
import Badge from '../.vitepress/theme/components/base/Badge.vue'
import Label from '../.vitepress/theme/components/base/Label.vue'
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
import { data } from './codeExamples.data'
import { camelCase, startCase } from 'lodash-es'
const { params } = useData()
const tabs = computed(() => data.codeExamples?.map(
(codeExample) => codeExample.title) ?? []
)
const codeExample = computed(() => data.codeExamples?.map(
(codeExample) => {
const pascalCase = startCase(camelCase( params.value.name)).replace(/\s/g, '')
return codeExample.code.replace(/PascalCase/g, pascalCase).replace(/Name/g, params.value.name)
}
).join('') ?? []
)
</script>
Created:
v{{params.createdRelease.version}}
Last changed:
v{{params.changedRelease.version}}
<style module>
.preview {
grid-area: preview;
margin-bottom: 24px;
max-width: 240px;
width: 240px;
flex-shrink: 0;
}
.layout {
align-items: flex-start;
}
.meta {
margin-left: auto;
margin-top: 24px;
}
.info {
--tags-gradient-background: var(--vp-c-bg);
}
.version, .contributors {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
margin-bottom: 0px;
justify-content: flex-start;
}
.version:first-child {
margin-bottom: 8px;
}
.iconPreviews {
display: flex;
justify-content: flex-start;
gap: 24px;
}
.smallPreview {
flex-shrink: 2;
flex-direction: column;
align-items: flex-start;
}
@media (min-width: 640px) {
.layout {
align-items: flex-start;
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
}
.preview {
margin: 0 auto;
}
.iconPreviews {
flex-direction: column;
}
.smallPreview {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 860px) {
.info {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.meta {
border-left: 1px solid var(--vp-c-divider);
padding-left: 16px;
margin-top: 0;
}
.version, .contributors {
flex-direction: column;
}
}
@media (min-width: 960px) {
.info {
display: block;
justify-content: space-between;
align-items: flex-start;
}
.meta {
border-left: none;
padding-left: 0;
margin-top: 24px;
}
.version, .contributors {
flex-direction: row;
}
}
@media (min-width: 1152px) {
.info {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.meta {
border-left: 1px solid var(--vp-c-divider);
padding-left: 16px;
margin-top: 0;
}
.version, .contributors {
flex-direction: row;
margin-bottom: 8px;
}
}
</style>
34155d48e7