mirror of
https://github.com/directus/directus.git
synced 2026-01-23 02:18:00 -05:00
c2e7c85bbd
* move component docs to documentation * update app docs tables for components * update docs * Add components to docs sidebar * fix generated tables * fix tables * rename transitions * update tables * update nested components * update tables * update tables * update tables * update v-table table * add basic documentation to each component * remove all stories of storybook * add missing documentation * undate tables * update tables * update docs sidebar * update app docs * remove unused references * add general readme * update docs * make reference titiles smaller * add reference tag * improve docs * update order of tabs in sidebar * remove all readmes and stories from interfaces/displays * Cleanup menu * Remove storybook Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
26 lines
3.7 KiB
Markdown
26 lines
3.7 KiB
Markdown
# App Reference
|
|
|
|
The purpose of the app reference is to allow more and easier access to our internal components when developing custom
|
|
interfaces, displays or modules.
|
|
|
|
## App Structure
|
|
|
|
The Vue frontend app is structured into many departments to combine similar purpose components.
|
|
|
|
| Folder | Content | Example |
|
|
| ------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
| `components` | In here are our base components that are designed to be as general and everywhere fitting as possible | It contains `v-button` |
|
|
| `composables` | Composables are reusable pieces of logic that can be used inside Vue component | `use-shortcut` to easily react to button combinations pressed |
|
|
| `directives` | Directives are functions that are available on Vue components in templates | contains `v-focus` or `v-tooltip` |
|
|
| `displays` | Displays are functions / components that are used in the system to display data | `display-image` is used to display image data inside the app |
|
|
| `interfaces` | Interfaces are the individual blocks that allow editing and viewing individual pieces of data | `interface-color` is a color picker allowing for easy selection of any color |
|
|
| `lang` | Containing all translations used across the directus app | Contains translations like `en-US` |
|
|
| `layouts` | Layouts change the way items are represented inside the collection view | The card and tabular layout are inside here |
|
|
| `modules` | Modules organize in which major parts the app is structured | Here are the files or settings module which are always visible from the sidebar |
|
|
| `routes` | Basic routes the app needs that shouldn't be customized | Routes for authentication or password reset |
|
|
| `stores` | Here lay all stores used in the app containing all relevant data that gets fetched from the api | The `fields` store containing all accessible fields for the user |
|
|
| `styles` | All general styles, css-vars, mixins and themes are stored inside here | The `form-grid` mixin allowing to style form like grids |
|
|
| `types` | Contains types used to generalize data for typescript | `field-schema` which is used to model the schema of fields |
|
|
| `utils` | Utility functions that helps minimize repetition | `notify` which is used to easily generate notifications inside the app |
|
|
| `views` | Views are the top-level parent component that are used in all modules | `private-view` which renders the basic structure like sidebar, headers and content sections |
|