Development
Useful documentation
VitePress official documentation
md
---
title: Docs with VitePress
---
<stript setup>
// ...
</script>
# {{ $$frontmatter.title }}Vue components
Files structure
<componentName>_docs.md: ...<componentName>_docs.scss: ...<componentName>.list.ts: (optional)...<componentName>.meta.auto.ts: ...<componentName>.props.ts: ...<componentName>.scss: ...<componentName>.spec.ts: ...<componentName>.vue: ...index.ts: ...
/components folder is used for Vue components that will be used in the VitePress documentation. They are ignored for the library and the typing.
<componentName>.PlayGround.vue: ...<componentName>.Table.vue: ...index.ts: ...
The /assets folder is for images for the VitePress documentation, Nothing here will be included in the library.
The /snapshots folder is for images for the in-code documentation, so they are included in the library.
Other folders like /images, /icons, or /sprints can be used for storing assets that are required for the Vue components.
Definition of the properties
We do it in a separated file with the naming convention <componentName>.props.ts.
Order of properties
The order of properties and attributes, with alphabetical order as a second level or sorting, is the following:
- Vue directives
- Non-dynamic attributes
- Dynamic attributes
- Boolean attributes as tags
- Event handlers
vue
<template>
<MyComponent
v-bind="{ tooltip, disabled }"
v-for="(item, i) in items"
class="my-component"
:key="i"
:options="myOptions"
hasIcon
@change="changeHandler($event)"
/>
</template>Naming conventions
In Vue component names will be in written PascalCase and all property values as well as variants will be typed in camelCase. This does not hold true for the standard properties that every component will hold that we will prefix with an underscore, i.e. _state.
Title The component’s title is derived from the corresponding page. This title should be as descriptive as possible and match the common terms of the industry. In cases of components that serve an overall site/app functionality and therefore will be present at most once, we will add the prefix ‘The’ to the component’s title, i.e. TheLanguageSelector.
_brand variants must match one of the 6 available options: PohlCon, JORDAHL, PUK, H-BAU. The default is always Pohlcon
_size Components hold a size property set in the app wrapper, namely Small, Medium and Big. Each dimension property defined in Gutter Tokens scale up according to the defined progression for these size patterns (properties Small, Medium, Big). The default is Medium.
_state All state related variants will be named after their corresponding css pseudo-classes. The default is _ (idle), if not otherwise set by use case in application.
By applying this naming convention, we come up with an exemplary default component named: AppButton that holds the following properties _brand _size _state type.
For other naming conventions see the page in Azure Wiki