-
-
-
-
-
diff --git a/app/src/components/readme.md b/app/src/components/readme.md
deleted file mode 100644
index 7e9931b5d4..0000000000
--- a/app/src/components/readme.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Components
-
-Components are custom elements that can reused in various other places.
-
-## Storybook / Tests
-
-Every component should have an entry in Storybook, and should have unit tests where appropriate.
-
-## Naming
-
-Components must always have a `-` in the name. This makes sure we don't run into any conflicts with HTML element names.
-
-## Base Components
-
-The core-most base-components are prefixed with `v-` (for example `v-icon` and `v-button`). These components can not rely on any global store.
-
-## Private Components
-
-Every now and again, it makes sense to split up a bigger component in smaller sub-parts for code maintainability and organization reasons. These "internal private components" are prefixed with a `_` and should never be used standalone.
diff --git a/app/src/components/transition/expand/readme.md b/app/src/components/transition/expand/readme.md
deleted file mode 100644
index df67addaea..0000000000
--- a/app/src/components/transition/expand/readme.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# `transition-expand`
-
-Use around a `v-if` or `v-show` component to have it expand in and out of view.
-
-## Usage
-
-```html
-
-
- `,
- });
diff --git a/app/src/components/v-divider/readme.md b/app/src/components/v-divider/readme.md
deleted file mode 100644
index 04878e33ea..0000000000
--- a/app/src/components/v-divider/readme.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Divider
-
-Divides content. Made to be used in `v-list` or `v-tabs` components.
-
-## Usage
-
-```html
-
-```
-
-## Props
-
-| Prop | Description | Default |
-| ------------- | ----------------------------------------------------- | ------- |
-| `vertical` | Render the divider vertically | `false` |
-| `inlineTitle` | Render the title inline with the divider, or under it | `true` |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot | Description | Data |
-|-----------|--------------------------------------------------------------------------|------|
-| _default_ | Label on the divider. This isn't rendered in vertical mode. | |
-| `icon` | Icon on the divider. Rendered in all modes, inline with title if present | |
-
-## CSS Variables
-
-| Variable | Default |
-| ------------------------- | --------------------------- |
-| `--v-divider-color` | `var(--border-normal)` |
-| `--v-divider-label-color` | `var(--foreground-subdued)` |
diff --git a/app/src/components/v-fancy-select/readme.md b/app/src/components/v-fancy-select/readme.md
deleted file mode 100644
index f890108821..0000000000
--- a/app/src/components/v-fancy-select/readme.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Fancy Select
-
-Mimics the functionality of a select, where only the current value is shown, but does it in a
-different visual representation.
-
-## Usage
-
-```html
-
-```
-
-## Props
-| Prop | Description | Default |
-|------------|-----------------------------------------|---------|
-| `items`* | Items the user can select from | |
-| `value` | Value used for v-model | `null` |
-| `disabled` | Disable selecting / deselecting a value | |
-
-## Events
-| Event | Description | Value |
-|---------|----------------------------|-----------|
-| `input` | Syncs value with `v-model` | `boolean` |
-
-## Slots
-n/a
-
-## CSS Variables
-n/a
diff --git a/app/src/components/v-fancy-select/v-fancy-select.story.ts b/app/src/components/v-fancy-select/v-fancy-select.story.ts
deleted file mode 100644
index 9e1cd5c0c1..0000000000
--- a/app/src/components/v-fancy-select/v-fancy-select.story.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import readme from './readme.md';
-import { defineComponent, ref } from '@vue/composition-api';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-
-export default {
- title: 'Components / Fancy Select',
- parameters: {
- notes: readme,
- },
- decorators: [withPadding, withKnobs],
-};
-
-export const basic = () =>
- defineComponent({
- props: {
- disabled: {
- default: boolean('Disabled', false),
- },
- },
- setup() {
- const value = ref(null);
- const items = [
- {
- value: 'code',
- icon: 'code',
- text: 'Raw Value',
- description: 'This works for most non-relational fields',
- },
- {
- value: 'palette',
- icon: 'palette',
- text: 'Formatted Value',
- description: 'Templated formatting and conditional coloring to text values',
- },
- {
- value: 'label',
- icon: 'label',
- text: 'Placard',
- description: 'Shows the value within a colored badge',
- },
- {
- value: 'assignment_turned_in',
- icon: 'assignment_turned_in',
- text: 'Progress',
- description: 'Converts number values into a progress bar',
- },
- ];
-
- return { value, items };
- },
- template: `
-
- `,
- });
diff --git a/app/src/components/v-field-select/readme.md b/app/src/components/v-field-select/readme.md
deleted file mode 100644
index 0797026f8a..0000000000
--- a/app/src/components/v-field-select/readme.md
+++ /dev/null
@@ -1 +0,0 @@
-# Field Select
diff --git a/app/src/components/v-field-template/readme.md b/app/src/components/v-field-template/readme.md
deleted file mode 100644
index 2ee33e3add..0000000000
--- a/app/src/components/v-field-template/readme.md
+++ /dev/null
@@ -1 +0,0 @@
-# Field Template
diff --git a/app/src/components/v-field-template/v-field-template.story.ts b/app/src/components/v-field-template/v-field-template.story.ts
deleted file mode 100644
index a5681a1f14..0000000000
--- a/app/src/components/v-field-template/v-field-template.story.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { defineComponent, ref } from '@vue/composition-api';
-import { withKnobs } from '@storybook/addon-knobs';
-import fullWidth from '../../../.storybook/decorators/full-width';
-import readme from './readme.md';
-import RawValue from '../../../.storybook/raw-value.vue';
-
-import { useFieldsStore, useCollectionsStore, useRelationsStore } from '@/stores/';
-
-import fields from '../../../.storybook/mock-data/fields.json';
-import collections from '../../../.storybook/mock-data/collections.json';
-import relations from '../../../.storybook/mock-data/relations.json';
-
-export default {
- title: 'Components / Field Template',
- decorators: [withPadding, withKnobs, fullWidth],
- parameters: {
- notes: readme,
- },
-};
-
-export const basic = () =>
- defineComponent({
- components: { RawValue },
- setup() {
- const req = {};
- const fieldsStore = useFieldsStore(req);
- const collectionsStore = useCollectionsStore(req);
- const relationsStore = useRelationsStore(req);
-
- // eslint-disable-next-line
- fieldsStore.state = fields as any;
-
- // eslint-disable-next-line
- collectionsStore.state = collections as any;
-
- // eslint-disable-next-line
- relationsStore.state = relations as any;
-
- const value = ref('{{first_name}} ({{ last_name }})');
- return { value };
- },
- template: `
-
-
- {{ value }}
-
-
- `,
- });
diff --git a/app/src/components/v-form/readme.md b/app/src/components/v-form/readme.md
deleted file mode 100644
index 13bee9d2c1..0000000000
--- a/app/src/components/v-form/readme.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Form
-
-Renders a form using interfaces based on the passed collection name.
-
-## Usage
-
-```html
-
-```
-
-## Props
-
-| Prop | Description | Default |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------- | ------- |
-| `collection` | The collection of which you want to render the fields | -- |
-| `fields` | Array of fields to render. This can be used instead of the collection prop | -- |
-| `initialValues` | Object of the starting values of the fields | -- |
-| `edits` | The edits that were made after the form was rendered. Being used in `v-model` | -- |
-| `loading` | Display the form in a loading state. Prevents the ctx menus from being used and renders skeleton loaders for the fields | `false` |
-
-**Note**: You have to pass either the collection or fields prop.
-
-## Slots
-
-n/a
-
-## Events
-
-| Event | Description |
-| ------- | ------------------------ |
-| `input` | Edits have been updated. |
diff --git a/app/src/components/v-hover/readme.md b/app/src/components/v-hover/readme.md
deleted file mode 100644
index 1b93a8d65f..0000000000
--- a/app/src/components/v-hover/readme.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Hover (util)
-
-```html
-
-
-
-```
-
-## Delays
-
-You can control how long the hover state persists after the user leaves the element with the `close-delay` prop. Likewise, you can set how long it will take before the hover state is set with the `open-delay` prop:
-
-```html
-
-
-
-
-```
-
-## Props
-
-| Prop | Description | Default |
-|---------------|----------------------------------------------|---------|
-| `close-delay` | Delay (ms) before the hover state is removed | `0` |
-| `open-delay` | Delay (ms) before the hover state is applied | `0` |
-| `disabled` | Disables the hover state from happening | `false` |
-| `tag` | What HTML tag to use for the wrapper | `div` |
-
-## Events
-n/a
-
-## Slots
-
-Only the default slot is available. The hover state is passed as scoped slot data
diff --git a/app/src/components/v-hover/v-hover.story.ts b/app/src/components/v-hover/v-hover.story.ts
deleted file mode 100644
index 13c5d35f6f..0000000000
--- a/app/src/components/v-hover/v-hover.story.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Vue from 'vue';
-import markdown from './readme.md';
-import VIcon from '../v-icon/';
-import VHover from './v-hover.vue';
-import withPadding from '../../../.storybook/decorators/with-padding';
-
-Vue.component('v-hover', VHover);
-Vue.component('v-icon', VIcon);
-
-export default {
- title: 'Components / Hover',
- component: VHover,
- decorators: [withPadding],
- parameters: {
- notes: markdown,
- },
-};
-
-export const basic = () => `
-
-
-
-`;
-
-export const customMarkup = () => `
-
-
-
- Hovering! 🎉🥳
-
-
- Hover me.
-
-
-`;
diff --git a/app/src/components/v-icon/readme.md b/app/src/components/v-icon/readme.md
deleted file mode 100644
index c366a3eab6..0000000000
--- a/app/src/components/v-icon/readme.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Icon
-
-The icon component allows you to render any [Material Design Icons](https://material.io/icons). It also supports rendering of custom SVG based icons.
-
-## Sizes / Colors
-
-The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. Color changes are done via the css variable `--v-icon-color` like in the example below.
-
-```html
-
-
-```
-
-| Prop Name | Size in PX |
-|----------------|------------|
-| `sup` | 8 |
-| `x-small` | 12 |
-| `small` | 18 |
-| None (default) | 24 |
-| `large` | 36 |
-| `x-large` | 48 |
-
-The `sup` size is meant to be used as superscript. For example the required state flag.
-
-## Custom Size
-If the default sizes don't give you the exact size you require, you can add the `size` prop with any
-custom pixel value. Note: we recommend using one of the pre-defined sizes to ensure a consistent look
-across the platform.
-
-## Outline
-You can render the outline variant of the Material Icon by setting the `outline` property.
-
-## Click events
-When you add a click event to the icon, the icon will automatically add a pointer cursor.
-
-## Left / Right
-Oftentimes, you'll use the icon next to some text, for example in a button. When doing this, you can use the `left` / `right` props to add some spacing to the icon:
-
-```html
-
- Add new
-
-```
-
-## Props
-| Name | Description | Default |
-|-------------|-------------------------------------------------------------------|---------|
-| `name`* | Name of the icon | -- |
-| `outline` | Use outline Material Icons. Note: only works for non-custom icons | `false` |
-| `size` | Custom pixel size | `false` |
-| `x-small` | Render the icon extra small | `false` |
-| `small` | Render the icon small | `false` |
-| `large` | Render the icon large | `false` |
-| `x-large` | Render the icon extra large | `false` |
-| `left` | Use when icon is left of text | `false` |
-| `right` | Use when icon is right of text | `false` |
-| `disabledd` | Prevent the click handler from firing | `false` |
-
-## Events
-| Event | Description | Data |
-|---------|----------------------|--------------|
-| `click` | Standard click event | `MouseEvent` |
-
-## Slots
-n/a
-
-## CSS Variables
-| Variable | Default |
-|------------------|----------------|
-| `--v-icon-color` | `currentColor` |
-| `--v-icon-size` | `24px` |
diff --git a/app/src/components/v-icon/v-icon.story.ts b/app/src/components/v-icon/v-icon.story.ts
deleted file mode 100644
index cb3a6a5d5b..0000000000
--- a/app/src/components/v-icon/v-icon.story.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { withKnobs, text, boolean, number, color, optionsKnob as options } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import Vue from 'vue';
-import VIcon from '../v-icon/';
-import markdown from './readme.md';
-import withPadding from '../../../.storybook/decorators/with-padding';
-
-Vue.component('v-icon', VIcon);
-
-export default {
- title: 'Components / Icon',
- component: VIcon,
- decorators: [withKnobs, withPadding],
- parameters: {
- notes: markdown,
- },
-};
-
-export const interactive = () => ({
- methods: { onClick: action('click') },
- props: {
- name: {
- default: text('Icon Name', 'person'),
- },
- color: {
- default: color('Color', '#37474f'),
- },
- outline: {
- default: boolean('Outline', false),
- },
- sup: {
- default: boolean('Superscript', false),
- },
- size: {
- default: options(
- 'Size',
- {
- 'Extra Small': 'xSmall',
- Small: 'small',
- '(default)': 'default',
- Large: 'large',
- 'Extra Large': 'xLarge',
- },
- 'default',
- {
- display: 'select',
- }
- ),
- },
- customSize: {
- default: number('Size (in px)', 0),
- },
- },
- template: `
-
- `,
-});
-
-export const superscript = () =>
- `Title`;
-
-export const sizesAndColors = () => `
-
-`,
-});
diff --git a/app/src/components/v-info/readme.md b/app/src/components/v-info/readme.md
deleted file mode 100644
index fb3ca525af..0000000000
--- a/app/src/components/v-info/readme.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Info
-
-Renders a stylized informational placard. It's similar in `v-notice` in it's use case.
-
-## Usage
-
-```html
-
- We couldn't find the user you're looking for.
-
-```
-
-## Props
-| Prop | Description | Default |
-|----------|-----------------------------------------------|---------|
-| `title`* | Title for the info section | |
-| `icon` | What icon to render above the title | `box` |
-| `type` | One of `info`, `success`, `warning`, `danger` | `info` |
-
-## Events
-n/a
-
-## Slots
-| Slot | Description | Data |
-|-----------|--------------------------------------------------------------|------|
-| _default_ | Default content area. Is rendered within a styled `
` tag. | |
-| `append` | After the main body copy. Can be used to inject buttons etc. | |
-
-## CSS Variables
-n/a
diff --git a/app/src/components/v-info/v-info.story.ts b/app/src/components/v-info/v-info.story.ts
deleted file mode 100644
index f2f3abcadf..0000000000
--- a/app/src/components/v-info/v-info.story.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import withPadding from '../../../.storybook/decorators/with-padding';
-import readme from './readme.md';
-import { defineComponent } from '@vue/composition-api';
-import { withKnobs, select } from '@storybook/addon-knobs';
-
-export default {
- title: 'Components / Info',
- decorators: [withPadding, withKnobs],
- parameters: { notes: readme },
-};
-
-export const basic = () =>
- defineComponent({
- props: {
- type: {
- default: select('Type', ['info', 'success', 'warning', 'danger'], 'info'),
- },
- },
- template: `
-
- It looks like you don’t have any Collections yet.
- Fortunately, it’s very easy to create one — click the button below to get started.
-
- Create Collection
-
-
- `,
- });
diff --git a/app/src/components/v-input/readme.md b/app/src/components/v-input/readme.md
deleted file mode 100644
index c0f740303d..0000000000
--- a/app/src/components/v-input/readme.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# Input
-
-```html
-
-```
-
-## Attributes & Events
-
-The HTML `` element supports a huge amount of attributes and events. In order to support all of these, all props that aren't specially handled (see list below) will be passed on to the `` element directly. This allows you to change anything you want on the input.
-
-## Prefixes / Suffixes
-
-You can add any custom (text) prefix/suffix to the value in the input using the `prefix` and `suffix` slots.
-
-## Props
-
-| Prop | Description | Default |
-| ---------------- | ------------------------------------------- | ------- |
-| `autofocus` | Autofocusses the input on render | `false` |
-| `disabled` | Set the disabled state for the input | `false` |
-| `full-width` | Render the input with 100% width | `false` |
-| `prefix` | Prefix the users value with a value | -- |
-| `suffix` | Show a value at the end of the input | -- |
-| `slug` | Force the value to be URL safe | `false` |
-| `slug-separator` | What character to use as separator in slugs | `-` |
-| `active` | Force the focus state | `false` |
-| `trim` | Trim the start and end whitespace | `false` |
-
-Note: all other attached attributes are bound to the input HTMLELement in the component. This allows you to attach any of the standard HTML attributes like `min`, `length`, or `pattern`.
-
-## Slots
-
-| Slot | Description | Data |
-| --------------- | ------------------------------------------------- | ------------------------------------------------ |
-| `prepend-outer` | Before the input | `{ disabled: boolean, value: string | number; }` |
-| `prepend` | In the input, before the value, before the prefix | `{ disabled: boolean, value: string | number; }` |
-| `append` | In the input, after the value, after the suffix | `{ disabled: boolean, value: string | number; }` |
-| `append-outer` | After the input | `{ disabled: boolean, value: string | number; }` |
-
-## Events
-
-| Events | Description | Value |
-| --------------------- | -------------------------------------------- | ----- |
-| `input` | Updates `v-model` | `any` |
-| `click:append` | User clicks on content of inner append slot | -- |
-| `click:prepend` | User clicks on content of inner prepend slot | -- |
-| `click:append-outer` | User clicks on content of outer append slot | -- |
-| `click:prepend-outer` | User clicks on content of outer prepend slot | -- |
-
-Note: all other listeners are bound to the input HTMLElement, allowing you to handle everything from `keydown` to `emptied`.
-
-## CSS Variables
-
-| Variable | Default |
-|-------------------------------|-----------------------------|
-| `--v-input-font-family` | `var(--family-sans-serif)` |
-| `--v-input-placeholder-color` | `var(--foreground-subdued)` |
diff --git a/app/src/components/v-input/v-input.story.ts b/app/src/components/v-input/v-input.story.ts
deleted file mode 100644
index f2e82c0ed2..0000000000
--- a/app/src/components/v-input/v-input.story.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import Vue from 'vue';
-import VInput from './v-input.vue';
-import markdown from './readme.md';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { defineComponent, ref } from '@vue/composition-api';
-import VMenu from '@/components/v-menu';
-import RawValue from '../../../.storybook/raw-value.vue';
-
-Vue.component('v-input', VInput);
-Vue.directive('focus', {});
-
-export default {
- title: 'Components / Input',
- component: VInput,
- decorators: [withKnobs, withPadding],
- parameters: {
- notes: markdown,
- },
-};
-
-export const basic = () =>
- defineComponent({
- components: { RawValue },
- props: {
- placeholder: {
- default: text('Placeholder', 'Enter a value...', 'Options'),
- },
- trim: {
- default: boolean('Trim', false, 'Options'),
- },
- },
- setup() {
- const value = ref(null);
- return { value };
- },
- template: `
-
- `,
- });
diff --git a/app/src/components/v-item-group/readme.md b/app/src/components/v-item-group/readme.md
deleted file mode 100644
index 57436263c4..0000000000
--- a/app/src/components/v-item-group/readme.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# Item Group
-
-Provides the ability to make groups of items out of any nested component. Can be reused to make more advanced selectable elements like a list of cards, or a button group.
-
-## Usage
-
-```html
-
-
-
-
-
Item {{ n }}
- Click me to {{ active ? 'activate' : 'deactivate' }}
-
-
-
-
-
-
-```
-
-The `v-item-group` component will keep the final state for the selection; every nested `v-item` component will be registered to the context of the first `v-item-group` parent up in the tree. This means that `v-item` can be in any nested component or sibling:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-It also means you can theoretically nest item-groups inside of items:
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-(That being said, if you ever find yourself in this situation, think long and hard if what you're doing makes sense)
-
-### Active / Toggle
-
-Every `v-item` provides the `active` state and a `toggle` function to the default slot. Use this to render custom markup / styling and to toggle the active state for this item:
-
-```html
-
-
- Am I active? {{ active }}
-
- Toggle active state
-
-```
-
-### Custom values
-
-By default, the `v-item-group` component will use the index of the child as model value (eg `[2, 4]`). The child `v-item` component accepts a `value` prop that lets you choose what is used as identifier for the v-item. This can be useful when you're working with a predefined list of items:
-
-```html
-
-
-
- {{ item.title }}
-
-
-
-
-
-```
-
-In this case, the selection state for all items selected would be `[15, 414, 'jolly']`
-
-## Props
-
-### Item Group (`v-item-group`)
-| Prop | Description | Default |
-|-------------|---------------------------------------------------------|---------|
-| `mandatory` | Require an item to be selected | `false` |
-| `max` | Only allow a maximum of n items | `-1` |
-| `multiple` | Allow multiple items to be selected | `false` |
-| `value` | The v-model value. Selection of indexes / custom values | -- |
-
-### Item (`v-item`)
-| Prop | Description | Default |
-|---------|-------------------------------------------|---------|
-| `value` | Custom value to be used in v-model values | --* |
-
-\* `value` defaults to the index of the item in the markup if value isn't set
-
-## Slots
-
-### Item Group (`v-item-group`)
-| Slot | Description | Data |
-|-----------|-------------|------|
-| _default_ | | -- |
-
-### Item (`v-item`)
-| Slot | Description | Data |
-|-----------|-------------|-----------------------------------------|
-| _default_ | | { active: boolean, toggle: () => void } |
-
-## Events
-
-### Item Group (`v-item-group`)
-| Event | Description | Data |
-|---------|----------------------------------|-----------------------|
-| `input` | Used to update the v-model value | `(string | number)[]` |
-
-### Item (`v-item`)
-n/a
-
-## CSS Variables
-
-### Item Group (`v-item-group`)
-n/a
-
-### Item (`v-item`)
-n/a
diff --git a/app/src/components/v-item-group/v-item-group.story.ts b/app/src/components/v-item-group/v-item-group.story.ts
deleted file mode 100644
index beec91b2e0..0000000000
--- a/app/src/components/v-item-group/v-item-group.story.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import Vue from 'vue';
-import { withKnobs, boolean, number } from '@storybook/addon-knobs';
-import markdown from './readme.md';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import VItemGroup from './v-item-group.vue';
-import VItem from './v-item.vue';
-
-Vue.component('v-item-group', VItemGroup);
-Vue.component('v-item', VItem);
-
-export default {
- title: 'Components / Item Group',
- component: VItemGroup,
- decorators: [withKnobs, withPadding],
- parameters: {
- notes: markdown,
- },
-};
-
-export const basic = () => ({
- data() {
- return {
- selection: null,
- };
- },
- props: {
- mandatory: {
- default: boolean('Mandatory', false),
- },
- max: {
- default: number('Max', -1),
- },
- multiple: {
- default: boolean('Multiple', false),
- },
- },
- template: `
-
- `,
-});
diff --git a/app/src/components/v-menu/readme.md b/app/src/components/v-menu/readme.md
deleted file mode 100644
index de59faf323..0000000000
--- a/app/src/components/v-menu/readme.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Menu
-
-Renders a dropdown menu. Can be attached to an activator element or free floating.
-
-**NOTE**
-
-Due to the fact that a menu is rendered through a portal, dialogs don't work great when rendered from
-within a menu. If you ever find yourself doing this:
-
-## Props
-
-| Prop | Description | Default |
-|--------------------------|-------------------------------------------------------------------|-------------|
-| `placement` | Where to position the popper. | `bottom` |
-| `value` | Value to control menu active state | `undefined` |
-| `close-on-click` | Close the menu when clicking outside of the menu | `true` |
-| `close-on-content-click` | Close the menu when clicking the content of the menu | `true` |
-| `attached` | Attach the menu to an input | `false` |
-| `show-arrow` | Show an arrow pointer | `false` |
-| `disabled` | Menu does not appear | `false` |
-| `trigger` | Activate the menu on a trigger. One of `manual`, `click`, `hover` | `null` |
-| `delay` | Time in ms before menu activates after trigger | `0` |
-
-## Slots
-
-| Slot | Description | Data |
-| --------- | ----------------------------------------------------------------------------------- | ---- |
-| _default_ | Menu content | |
-| activator | Activator element. Attaches click and mouse enter/leave handlers on wrapper element | |
diff --git a/app/src/components/v-menu/v-menu.story.ts b/app/src/components/v-menu/v-menu.story.ts
deleted file mode 100644
index 4090959bb8..0000000000
--- a/app/src/components/v-menu/v-menu.story.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-import { withKnobs, boolean, select } from '@storybook/addon-knobs';
-import markdown from './readme.md';
-import VMenu from './v-menu.vue';
-import VButton from '@/components/v-button/';
-import { VList, VListItem } from '@/components/v-list/';
-import { defineComponent, ref } from '@vue/composition-api';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import VCheckbox from '@/components/v-checkbox/';
-import VInput from '@/components/v-input/';
-
-export default {
- title: 'Components / Menu',
- parameters: {
- notes: markdown,
- },
- decorators: [withKnobs, withPadding],
-};
-
-export const basic = () =>
- defineComponent({
- components: { VMenu, VButton, VList, VListItem },
- props: {
- closeOnClick: {
- default: boolean('Close on Click', true),
- },
- closeOnContentClick: {
- default: boolean('Close on Content Click', false),
- },
- },
- template: `
-
- Hello from the default slot!
-`;
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index af317485fb..b133be96ff 100755
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -335,6 +335,327 @@ module.exports = {
path: '/reference/sdk-js',
title: 'JavaScript SDK',
},
+ {
+ title: 'Vue Components',
+ type: 'group',
+ children: [
+ {
+ path: 'reference/app/components/',
+ title: 'Introduction',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-avatar',
+ title: 'Avatar',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-badge',
+ title: 'Badge',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-breadcrumb',
+ title: 'Breadcrumb',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-button-group',
+ title: 'Button Group',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-button',
+ title: 'Button',
+ type: 'page',
+ },
+ {
+ title: 'Card',
+ children: [
+ {
+ path: 'reference/app/components/v-card',
+ title: 'Card',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-card-actions',
+ title: 'Card Actions',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-card-subtitle',
+ title: 'Card Subtitle',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-card-text',
+ title: 'Card Text',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-card-title',
+ title: 'Card Title',
+ type: 'page',
+ },
+ ],
+ },
+ {
+ path: 'reference/app/components/v-checkbox',
+ title: 'Checkbox',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-chip',
+ title: 'Chip',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-detail',
+ title: 'Detail',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-dialog',
+ title: 'Dialog',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-divider',
+ title: 'Divider',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-drawer',
+ title: 'Drawer',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-error',
+ title: 'Error',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-fancy-select',
+ title: 'Fancy Select',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-field-select',
+ title: 'Field Select',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-field-template',
+ title: 'Field Template',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-form',
+ title: 'Form',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-hover',
+ title: 'Hover',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-icon',
+ title: 'Icon',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-info',
+ title: 'Info',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-input',
+ title: 'Input',
+ type: 'page',
+ },
+ {
+ title: 'ItemGroup',
+ children: [
+ {
+ path: 'reference/app/components/v-item-group',
+ title: 'Item Group',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-item',
+ title: 'Item',
+ type: 'page',
+ },
+ ],
+ },
+ {
+ title: 'List',
+ children: [
+ {
+ path: 'reference/app/components/v-list-group',
+ title: 'List Group',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-list-item-content',
+ title: 'List Item Content',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-list-item-hint',
+ title: 'List Item Hint',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-list-item-icon',
+ title: 'List Item Icon',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-list-item',
+ title: 'List Item',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-list',
+ title: 'List',
+ type: 'page',
+ },
+ ],
+ },
+ {
+ path: 'reference/app/components/v-menu',
+ title: 'Menu',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-notice',
+ title: 'Notice',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-overlay',
+ title: 'Overlay',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-pagination',
+ title: 'Pagination',
+ type: 'page',
+ },
+ {
+ title: 'Progress',
+ children: [
+ {
+ path: 'reference/app/components/v-progress-circular',
+ title: 'Progress Circular',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-progress-linear',
+ title: 'Progress Linear',
+ type: 'page',
+ },
+ ],
+ },
+ {
+ path: 'reference/app/components/v-radio',
+ title: 'Radio',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-select',
+ title: 'Select',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-sheet',
+ title: 'Sheet',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-skeleton-loader',
+ title: 'Skeleton Loader',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-slider',
+ title: 'Slider',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-switch',
+ title: 'Switch',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-table',
+ title: 'Table',
+ type: 'page',
+ },
+ {
+ title: 'Tabs',
+ children: [
+ {
+ path: 'reference/app/components/v-tabs',
+ title: 'Tabs',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-tab',
+ title: 'Tab',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-tabs-items',
+ title: 'Tabs Items',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-tab-item',
+ title: 'Tab Item',
+ type: 'page',
+ },
+ ],
+ },
+ {
+ path: 'reference/app/components/v-text-overflow',
+ title: 'Text Overflow',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/v-textarea',
+ title: 'Textarea',
+ type: 'page',
+ },
+ {
+ title: 'Transitions',
+ children: [
+ {
+ path: 'reference/app/components/transition-bounce',
+ title: 'Transition Bounce',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/transition-dialog',
+ title: 'Transition Dialog',
+ type: 'page',
+ },
+ {
+ path: 'reference/app/components/transition-expand',
+ title: 'Transition Expand',
+ type: 'page',
+ },
+ ],
+ },
+ {
+ path: 'reference/app/components/v-upload',
+ title: 'Upload',
+ type: 'page',
+ },
+ ],
+ },
],
},
{
diff --git a/docs/reference/app/app.md b/docs/reference/app/app.md
new file mode 100644
index 0000000000..f361754dd4
--- /dev/null
+++ b/docs/reference/app/app.md
@@ -0,0 +1,25 @@
+# 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 |
diff --git a/docs/reference/app/components/index.md b/docs/reference/app/components/index.md
new file mode 100644
index 0000000000..38730ec7a5
--- /dev/null
+++ b/docs/reference/app/components/index.md
@@ -0,0 +1,16 @@
+# Directus Vue Components
+
+Directus comes shipped with it's own Vue component library you can use to enrich your extensions, while making them fit
+within the context of the Directus app.
+
+These components can be used in any of the "front-end extensions", including [Interfaces](/guides/interfaces/),
+[Displays](/guides/displays/), and [Modules](/guides/modules/).
+
+::: warning Breaking Changes
+
+While we aim to make the components as backwards compatible as possible, we **do not** consider internal-API changes in
+the components as a breaking change of Directus. Please keep an eye
+[the release notes](https://github.com/directus/directus/releases), and make sure your extension still works before
+updating Directus.
+
+:::
diff --git a/docs/reference/app/components/transition-bounce.md b/docs/reference/app/components/transition-bounce.md
new file mode 100644
index 0000000000..db995e1ffb
--- /dev/null
+++ b/docs/reference/app/components/transition-bounce.md
@@ -0,0 +1,39 @@
+# Transition Bounce
+
+Bounces items in or out depending if the get added or removed from the view.
+
+```html
+
+
+ Click me!
+
+
+
More content
+
+
+
+
+
+```
+
+## Reference
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | -------------------------------------------- | ---- |
+| _default_ | The elements that should get animated in/out | |
diff --git a/docs/reference/app/components/transition-dialog.md b/docs/reference/app/components/transition-dialog.md
new file mode 100644
index 0000000000..9d13693107
--- /dev/null
+++ b/docs/reference/app/components/transition-dialog.md
@@ -0,0 +1,39 @@
+# Transition Dialog
+
+Fades items in or out depending if the get added or removed from the view.
+
+```html
+
+
+ Click me!
+
+
+
More content
+
+
+
+
+
+```
+
+## Reference
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | -------------------------------------------- | ---- |
+| _default_ | The elements that should get animated in/out | |
diff --git a/docs/reference/app/components/transition-expand.md b/docs/reference/app/components/transition-expand.md
new file mode 100644
index 0000000000..d20a26fb67
--- /dev/null
+++ b/docs/reference/app/components/transition-expand.md
@@ -0,0 +1,54 @@
+# Transition Expand
+
+Use around a `v-if` or `v-show` component to have it expand in and out of view.
+
+```html
+
+
+ Click me!
+
+
+
More content
+
+
+
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ----------------------- | -------------------------------------------------- | ------- | --------- |
+| `x-axis` | Expand on the horizontal instead vertical axis | `false` | `Boolean` |
+| `expanded-parent-class` | Add a custom class to the element that is expanded | `''` | `String` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ---------------------------------------- | ---- |
+| _default_ | Elements that should be animated go here | |
+
+#### Events
+
+n/a
+
+#### CSS Variables
+
+n/a
diff --git a/docs/reference/app/components/v-avatar.md b/docs/reference/app/components/v-avatar.md
new file mode 100644
index 0000000000..af179276f5
--- /dev/null
+++ b/docs/reference/app/components/v-avatar.md
@@ -0,0 +1,42 @@
+# Avatar
+
+The avatar component can be used to display a person or something similar. It will generate a grey box in which either a
+profile picture or an icon or text can be inserted.
+
+```html
+RVZ
+
+
+
+
+
+
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------ | ------------------------- | ------- | --------- |
+| `size` | Size in px | `null` | `Number` |
+| `tile` | Render as a tile (square) | `false` | `Boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ------------------------------------------------------- | ---- |
+| _default_ | Default slot to display your elements inside the avatar | -- |
+
+#### Events
+
+n/a
+
+###### CSS Variables
+
+| Variable | Default |
+| ------------------ | -------------------------- |
+| `--v-avatar-color` | `var(--background-normal)` |
+| `--v-avatar-size` | `48px` |
diff --git a/docs/reference/app/components/v-badge.md b/docs/reference/app/components/v-badge.md
new file mode 100644
index 0000000000..6eabd31e16
--- /dev/null
+++ b/docs/reference/app/components/v-badge.md
@@ -0,0 +1,49 @@
+# Badge
+
+Display a small dot in the corner of the component.
+
+```html
+ABC
+```
+
+## Colors
+
+You can set the color, background color and boder color with the `--v-badge-color`, `--v-badge-background-color` and
+`--v-badge-border-color` css vars respectively:
+
+```html
+
+ ABC
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | ---------------------------------------------------------------------------- | ------- | ------------------ |
+| `value` | The value that will be displayed inside the badge Only 2 characters allowed) | `null` | `[String, Number]` |
+| `dot` | Only will show a small dot without any content | `false` | `Boolean` |
+| `bordered` | Shows a border arround the badge | `false` | `Boolean` |
+| `left` | Aligns the badge on the left side | `false` | `Boolean` |
+| `bottom` | Aligns the badge on the bottom side | `false` | `Boolean` |
+| `icon` | Shows an icon instead of text | `null` | `String` |
+| `disabled` | Don't render the badge | `false` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ---------------------------- | ------------------------ |
+| `--v-badge-color` | `var(--white)` |
+| `--v-badge-background-color` | `var(--danger)` |
+| `--v-badge-border-color` | `var(--background-page)` |
+| `--v-badge-offset-x` | `0px` |
+| `--v-badge-offset-y` | `0px` |
+| `--v-badge-size` | `16px` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-breadcrumb.md b/docs/reference/app/components/v-breadcrumb.md
new file mode 100644
index 0000000000..ce62bff731
--- /dev/null
+++ b/docs/reference/app/components/v-breadcrumb.md
@@ -0,0 +1,31 @@
+# Breadcrumb
+
+A breadcrumb can help you display on what site you are currently on by displaying a structure like `my / custom / page`.
+
+```html
+
+```
+
+## Breadcrumb Item
+
+An item for the items prop has these 4 options: | Prop | Description |
+|------------|-----------------------------------------------------------| | `to` | The reroute link | | `name` | The
+name which will be displayed | | `icon` | Displays an icon with the given name in front of the name | | `disabled` | If
+the router link should be clickable |
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------- | -------------------------------------------------------- | ---------- | -------------- |
+| `items` | An array of objects which information about each section | `() => []` | `Breadcrumb[]` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ------------------------------- | --------------------------- |
+| `--v-breadcrumb-color` | `var(--foreground-subdued)` |
+| `--v-breadcrumb-color-hover` | `var(--foreground-normal)` |
+| `--v-breadcrumb-color-disabled` | `var(--foreground-subdued)` |
+| `--v-breadcrumb-divider-color` | `var(--foreground-subdued)` |
diff --git a/docs/reference/app/components/v-button-group.md b/docs/reference/app/components/v-button-group.md
new file mode 100644
index 0000000000..5b336538ab
--- /dev/null
+++ b/docs/reference/app/components/v-button-group.md
@@ -0,0 +1,56 @@
+# Button Group
+
+Provides the ability to make groups of buttons. Uses the v-item-group component and adds styling to the buttons. For
+more information about how to use groups, look into v-item-group.
+
+## Usage
+
+```html
+
+
+ Click me to {{ active ? 'activate' : 'deactivate' }}
+
+
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ----------- | ------------------------------------------------------- | ----------- | ---------------------- |
+| `mandatory` | Require an item to be selected | `false` | `Boolean` |
+| `max` | Only allow a maximum of n items | `-1` | `Number` |
+| `multiple` | Allow multiple items to be selected | `false` | `Boolean` |
+| `value` | The v-model value. Selection of indexes / custom values | `undefined` | `(string or number)[]` |
+| `rounded` | Adds rounded corners to the sides | `false` | `Boolean` |
+| `tile` | Adds sharp corners to the sides | `false` | `Boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | -- |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | -------------------------------- | ---------------------- |
+| `input` | Used to update the v-model value | `(string or number)[]` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ------------------------------------------ | -------------------- |
+| `--v-button-group-background-color-active` | `var(--primary-alt)` |
diff --git a/docs/reference/app/components/v-button.md b/docs/reference/app/components/v-button.md
new file mode 100644
index 0000000000..bb09051f0f
--- /dev/null
+++ b/docs/reference/app/components/v-button.md
@@ -0,0 +1,108 @@
+# Button
+
+A simple button component to make your life interactive!
+
+```html
+Click me!
+```
+
+## Sizes
+
+The button component supports the following sizes through the use of props:
+
+- x-small
+- small
+- (default)
+- large
+- x-large
+
+## Colors
+
+You can set the color, background color, hover color, and background hover color with the `--v-button-color`,
+`--v-button-background-color`, `--v-button-color-hover`, and `--v-button-background-color-hover` css variables
+respectively:
+
+```html
+Click me
+
+
+```
+
+## Loading
+
+The button has a loading state that can be enabled with the `loading` prop. By default, the button will render a
+`v-spinner`. You can override what's being shown during the loading state by using the `#loading` slot:
+
+```html
+
+ ... Almost done ...
+
+```
+
+The loading slot is rendered _on top_ of the content that was there before. Make sure that your loading content doesn't
+exceed the size of the default state content. This restriction is put in place to prevent jumps when going from and to
+the loading state.
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------ | ------------------------------------------------------------------------- | ---------- | -------------------- |
+| `icon` | Remove padding / min-width. Meant to be used with just an icon as content | `false` | `Boolean` |
+| `outlined` | No background | `false` | `Boolean` |
+| `rounded` | Enable rounded corners | `false` | `Boolean` |
+| `type` | HTML `type` attribute | `'button'` | `String` |
+| `disabled` | Disabled state | `false` | `Boolean` |
+| `loading` | Loading state | `false` | `Boolean` |
+| `to` | Render as vue router-link | `null` | `string or Location` |
+| `href` | Render as anchor | `null` | `String` |
+| `align` | Align content in button. One of `left | `'center'` | `String` |
+| `dashed` | Render the border dashed. Meant to be used with `outlined`. | `false` | `Boolean` |
+| `tile` | Render without border radius | `false` | `Boolean` |
+| `download` | Add the `download` attribute (used in combo with `href`) | `null` | `String` |
+| `full-width` | | `false` | `Boolean` |
+| `exact` | | `false` | `Boolean` |
+| `secondary` | | `false` | `Boolean` |
+| `value` | | `null` | `[Number, String]` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------------- | -------------------------------------------- | ---- |
+| _default_ | Button content | |
+| `loading` | Content that's rendered during loading state | |
+| `prepend-outer` | Content that's rendered before the button | |
+| `append-outer` | Content that's rendered after the button | |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | --------------------- | ------------ |
+| `click` | User clicks on button | `MouseEvent` |
+
+#### CSS Variables
+
+| Variable | Default |
+| --------------------------------------- | ---------------------------- |
+| `--v-button-width` | `auto` |
+| `--v-button-height` | `44px` |
+| `--v-button-color` | `var(--foreground-inverted)` |
+| `--v-button-color-hover` | `var(--foreground-inverted)` |
+| `--v-button-color-activated` | `var(--foreground-inverted)` |
+| `--v-button-color-disabled` | `var(--foreground-subdued)` |
+| `--v-button-background-color` | `var(--primary)` |
+| `--v-button-background-color-hover` | `var(--primary-125)` |
+| `--v-button-background-color-activated` | `var(--primary)` |
+| `--v-button-background-color-disabled` | `var(--background-normal)` |
+| `--v-button-font-size` | `16px` |
+| `--v-button-font-weight` | `600` |
+| `--v-button-line-height` | `22px` |
+| `--v-button-min-width` | `140px` |
diff --git a/docs/reference/app/components/v-card-actions.md b/docs/reference/app/components/v-card-actions.md
new file mode 100644
index 0000000000..d39b6dd3db
--- /dev/null
+++ b/docs/reference/app/components/v-card-actions.md
@@ -0,0 +1,21 @@
+# Card Actions
+
+This component is used to add actions like `cancel` or `save` to an existing `v-card`.
+
+```html
+
+ Would you like to save the changes?
+
+ Cancel
+ Save
+
+
+```
+
+## Reference
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------------------------- | ---- |
+| _default_ | Where all the actions will go | |
diff --git a/docs/reference/app/components/v-card-subtitle.md b/docs/reference/app/components/v-card-subtitle.md
new file mode 100644
index 0000000000..8487e24af7
--- /dev/null
+++ b/docs/reference/app/components/v-card-subtitle.md
@@ -0,0 +1,17 @@
+# Card Subtitle
+
+This component is used to give a `v-card` an already stylized subtitle.
+
+```html
+
+ A less important subtitle
+
+```
+
+## Reference
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | -------------------------- | ---- |
+| _default_ | Where the subtitle will go | |
diff --git a/docs/reference/app/components/v-card-text.md b/docs/reference/app/components/v-card-text.md
new file mode 100644
index 0000000000..1a1a07c799
--- /dev/null
+++ b/docs/reference/app/components/v-card-text.md
@@ -0,0 +1,17 @@
+# Card Text
+
+This component is used to give a `v-card` an already stylized text.
+
+```html
+
+ This card can do nothing!
+
+```
+
+## Reference
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------------------- | ---- |
+| _default_ | Where your text will go | |
diff --git a/docs/reference/app/components/v-card-title.md b/docs/reference/app/components/v-card-title.md
new file mode 100644
index 0000000000..4155933c7e
--- /dev/null
+++ b/docs/reference/app/components/v-card-title.md
@@ -0,0 +1,17 @@
+# Card Title
+
+This component is used to give a `v-card` an already stylized title.
+
+```html
+
+ My Own Title
+
+```
+
+## Reference
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------------------- | ---- |
+| _default_ | Where the title will go | |
diff --git a/docs/reference/app/components/v-card.md b/docs/reference/app/components/v-card.md
new file mode 100644
index 0000000000..8e353b6894
--- /dev/null
+++ b/docs/reference/app/components/v-card.md
@@ -0,0 +1,77 @@
+# Card
+
+A card is nothing but a v-sheet with predefined building blocks to enforce consistency.
+
+## Usage
+
+```html
+
+ Hello, world!
+ This is a card
+ Consectetur enim ullamco sint sit deserunt proident consectetur.
+
+ Save
+
+
+```
+
+Cards can be used to consistently style dialogs:
+
+```html
+
+
+ Show dialog
+
+
+
+ Are you sure you want to delete 1 item?
+
+ Cancel
+ Yes
+
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | ------------------------------------------------- | ------- | --------- |
+| `disabled` | Disable the card, prevents all cursor interaction | `false` | `Boolean` |
+| `tile` | Render without rounded corners | `false` | `Boolean` |
+
+#### Events
+
+n/a
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
+
+#### CSS Variables
+
+| Variable | Default |
+| --------------------------- | --------------------------- |
+| `--v-card-min-width` | `none` |
+| `--v-card-max-width` | `400px` |
+| `--v-card-min-height` | `none` |
+| `--v-card-max-height` | `min-content` |
+| `--v-card-padding` | `16px` |
+| `--v-card-background-color` | `var(--background-subdued)` |
+| `--v-card-height` | `auto` |
+
+---
+
+# Card Title
+
+Functional component that enforces consistent styling.
+
+## Usage
+
+```html
+Hello, world!
+```
diff --git a/docs/reference/app/components/v-checkbox.md b/docs/reference/app/components/v-checkbox.md
new file mode 100644
index 0000000000..5a8948a814
--- /dev/null
+++ b/docs/reference/app/components/v-checkbox.md
@@ -0,0 +1,133 @@
+# Checkbox
+
+Display a single checkbox on which you can model a boolean.
+
+```html
+
+```
+
+## Colors
+
+The colors can be changed via the css variables `--v-checkbox-color`.
+
+```html
+
+
+
+
+
+
+```
+
+## Boolean vs arrays
+
+Just as with checkboxes, you can use `v-model` with both an array and a boolean:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+Keep in mind to pass the `value` prop with a unique value when using arrays in `v-model`.
+
+## Indeterminate
+
+The indeterminate state can be set with the `indeterminate` prop. We recommend using the `.sync` modifier with the
+indeterminate prop, so the checkbox can set change it too:
+
+```html
+
+
+
+```
+
+If you can't, you should listen to the `update:indeterminate` event and respond to that:
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------------------- | ------------------------------------------------------------------------ | --------------------------- | ------------------ |
+| `value` | Value for checkbox. Similar to value attr on checkbox type input in HTML | `null` | `String` |
+| `input-value` | Value that's used with `v-model`. Either boolean or array of values | `false` | `[Boolean, Array]` |
+| `label` | | `null` | `String` |
+| `disabled` | | `false` | `Boolean` |
+| `indeterminate` | | `false` | `Boolean` |
+| `icon-on` | | `'check_box'` | `String` |
+| `icon-off` | | `'check_box_outline_blank'` | `String` |
+| `icon-indeterminate` | | `'indeterminate_check_box'` | `String` |
+| `block` | | `false` | `Boolean` |
+| `custom-value` | | `false` | `Boolean` |
+| `label` | Label for the checkbox | `null` | `String` |
+| `disabled` | Disable the checkbox | `false` | `Boolean` |
+| `indeterminate` | Show the indeterminate state | `false` | `Boolean` |
+| `icon-on` | What icon to use for the on state | `'check_box'` | `String` |
+| `icon-off` | What icon to use for the off state | `'check_box_outline_blank'` | `String` |
+| `icon-indeterminate` | What icon to use for the indeterminate state | `'indeterminate_check_box'` | `String` |
+| `block` | Show as styled block. Matches input size | `false` | `Boolean` |
+| `input-value` | | `false` | `[Boolean, Array]` |
+| `custom-value` | | `false` | `Boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ---------------------------------- | ---- |
+| `prepend` | Rendered right before the checkbox | |
+| `append` | Rendered right after the label | |
+| _default_ | | |
+
+#### Events
+
+| Event | Description | Value |
+| ---------------------- | -------------------------- | -------------------------- |
+| `change` | New state for the checkbox | Boolean or array of values |
+| `update:indeterminate` | New state for the checkbox | Boolean or array of values |
+
+#### CSS Variables
+
+| Variable | Default |
+| -------------------- | ---------------- |
+| `--v-checkbox-color` | `var(--primary)` |
diff --git a/docs/reference/app/components/v-chip.md b/docs/reference/app/components/v-chip.md
new file mode 100644
index 0000000000..10082d4f7d
--- /dev/null
+++ b/docs/reference/app/components/v-chip.md
@@ -0,0 +1,91 @@
+# Chip
+
+Chips are small round components that can be used to display tags or similar data.
+
+```html
+I'm a chip!
+```
+
+## Sizes
+
+The chip component supports the following sizes through the use of props:
+
+- x-small
+- small
+- (default)
+- large
+- x-large
+
+```html
+I'm a chip!
+```
+
+## Colors
+
+You can set the color, background color, hover color, and background hover color with the `--v-chip-color`,
+`--v-chip-background-color`, `--v-chip-color-hover`, and `--v-chip-background-color-hover` css variables respectively:
+
+```html
+I'm a chip!
+
+```
+
+## Clicks / Closes
+
+There are two events, one when clicking on the chip called `click` and one when clicking on the enabled close icon
+called `close`.
+
+```html
+Hello!
+I'm closeable!
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------ | ---------------------------------------------------- | --------- | --------- |
+| `active` | Change visibility. Can be reacted to via `sync` | `null` | `Boolean` |
+| `close` | Displays a close icon which triggers the close event | `false` | `Boolean` |
+| `close-icon` | Which icon should be displayed instead of `close ` | `'close'` | `String` |
+| `outlined` | | `false` | `Boolean` |
+| `label` | | `true` | `Boolean` |
+| `disabled` | | `false` | `Boolean` |
+| `outlined` | No background | `false` | `Boolean` |
+| `label` | Label style | `true` | `Boolean` |
+| `disabled` | Disabled state | `false` | `Boolean` |
+| `close-icon` | | `'close'` | `String` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | -- |
+
+#### Events
+
+| Event | Description | Value |
+| --------------- | ---------------------------------------------------------------------------------------------- | ----- |
+| `click` | Triggers when clicked somewhere on the chip | |
+| `close` | Triggers when the `close` prop is enabled and gets clicked (Doesn't trigger the `click` event) | |
+| `update:active` | | |
+
+#### CSS Variables
+
+| Variable | Default |
+| --------------------------------- | ------------------------------ |
+| `--v-chip-color` | `var(--foreground-normal)` |
+| `--v-chip-background-color` | `var(--background-normal-alt)` |
+| `--v-chip-color-hover` | `var(--white)` |
+| `--v-chip-background-color-hover` | `var(--primary-125)` |
+| `--v-chip-close-color` | `var(--danger)` |
+| `--v-chip-close-color-disabled` | `var(--primary)` |
+| `--v-chip-close-color-hover` | `var(--primary-125)` |
diff --git a/docs/reference/app/components/v-detail.md b/docs/reference/app/components/v-detail.md
new file mode 100644
index 0000000000..a9bab0c56d
--- /dev/null
+++ b/docs/reference/app/components/v-detail.md
@@ -0,0 +1,37 @@
+# Detail
+
+Use the detail component to hide not so important information or elements.
+
+```html
+
+
I'm hidden until you open the component
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------ | ----------------------- | ------------------ | --------- |
+| `active` | Used with `v-model` | `undefined` | `Boolean` |
+| `label` | Label of detail | `i18n.t('toggle')` | `String` |
+| `start-open` | Have it open by default | `false` | `Boolean` |
+| `disabled` | Disable any interaction | `false` | `Boolean` |
+
+#### Events
+
+| Event | Description | Value |
+| -------- | --------------------------- | --------- |
+| `toggle` | New active value of divider | `boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------------------------- | --------------------- |
+| _default_ | Content of the detail section | |
+| `title` | Content to render in divider | `{ active: boolean }` |
+
+#### CSS Variables
+
+n/a
diff --git a/docs/reference/app/components/v-dialog.md b/docs/reference/app/components/v-dialog.md
new file mode 100644
index 0000000000..e3f5b24fbb
--- /dev/null
+++ b/docs/reference/app/components/v-dialog.md
@@ -0,0 +1,43 @@
+# Dialog
+
+Renders an overlay with a flex slot rendering whatever content you pass.
+
+```html
+
+
+
Are you sure you want to delete this item?
+ No
+ Yes
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------ | --------------------------------------------------- | ----------- | --------- |
+| `persistent` | Disable closing by clicking on the side | `false` | `Boolean` |
+| `active` | Can be used in combination with `v-model` | `undefined` | `Boolean` |
+| `placement` | Display it either in the `center` or to the `right` | `'center'` | `String` |
+
+#### Slots
+
+| Slot | Description | Data |
+| ----------- | --------------------------------------------- | ---- |
+| _default_ | Whatever should be rendered inside the dialog | |
+| `activator` | Insert an activator for the dialog | |
+
+#### Events
+
+| Event | Description | Value |
+| -------- | ----------------------- | --------- |
+| `toggle` | Change the active state | `boolean` |
+| `esc` | Escape has been pressed | `boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| -------------------- | ------- |
+| `--v-dialog-z-index` | `100` |
diff --git a/docs/reference/app/components/v-divider.md b/docs/reference/app/components/v-divider.md
new file mode 100644
index 0000000000..3fc3ddacf7
--- /dev/null
+++ b/docs/reference/app/components/v-divider.md
@@ -0,0 +1,35 @@
+# Divider
+
+Divides content. Made to be used in `v-list` or `v-tabs` components.
+
+```html
+New Section
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------------- | ----------------------------------------------------- | ------- | --------- |
+| `vertical` | Render the divider vertically | `false` | `Boolean` |
+| `inline-title` | Render the title inline with the divider, or under it | `true` | `Boolean` |
+| `large` | Renders a larger divider | `false` | `Boolean` |
+
+#### Events
+
+n/a
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ------------------------------------------------------------------------ | ---- |
+| _default_ | Label on the divider. This isn't rendered in vertical mode. | |
+| `icon` | Icon on the divider. Rendered in all modes, inline with title if present | |
+
+#### CSS Variables
+
+| Variable | Default |
+| ------------------------- | ------------------------------ |
+| `--v-divider-color` | `var(--border-normal)` |
+| `--v-divider-label-color` | `var(--foreground-normal-alt)` |
diff --git a/docs/reference/app/components/v-drawer.md b/docs/reference/app/components/v-drawer.md
new file mode 100644
index 0000000000..456cefcd1b
--- /dev/null
+++ b/docs/reference/app/components/v-drawer.md
@@ -0,0 +1,48 @@
+# Drawer
+
+A more robust dialog that is rendered at the side and provides more space than a usual dialog. Can be helpful for
+relational or nested data.
+
+```html
+
+
This text will show up in the drawer
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| --------------- | ------------------------------------------------------ | ------------------- | --------- |
+| `title`\* | The title of the drawer | | `String` |
+| `subtitle` | The subtitle of the drawer | `null` | `String` |
+| `active` | Can be used with `v-model` to open or close the drawer | `undefined` | `Boolean` |
+| `persistent` | Disallow closing the drawer by clicking out of it | `false` | `Boolean` |
+| `icon` | An icon for the drawer | `'box'` | `String` |
+| `sidebar-label` | A label for the sidebar | `i18n.t('sidebar')` | `String` |
+
+#### Events
+
+| Event | Description | Value |
+| -------- | ---------------------------------------------------------------- | --------- |
+| `cancel` | When escape is pressed or the drawer gets canceled in other ways | |
+| `toggle` | When the drawer gets opened or closed | `boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| ----------------- | ------------------------------------------------------ | ---- |
+| `activator` | Elements placed inside here can activate the drawer | `on` |
+| `sidebar` | Display components to the side of the drawer like tabs | |
+| `subtitle` | Add a custom subtitle | |
+| `actions:prepend` | Prepend actions to the drawer | |
+| `actions` | Add actions to the top right corner | |
+| `header:append` | Append your elements to the header | |
+| _default_ | Where the content of the drawer goes | |
+
+#### CSS Variables
+
+| Variable | Default |
+| ---------------------- | ------- |
+| `--v-drawer-max-width` | `856px` |
diff --git a/docs/reference/app/components/v-error.md b/docs/reference/app/components/v-error.md
new file mode 100644
index 0000000000..27c3165cb7
--- /dev/null
+++ b/docs/reference/app/components/v-error.md
@@ -0,0 +1,15 @@
+# Error
+
+Display an api request error.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| --------- | --------------------------------------- | ------- | ----- |
+| `error`\* | The error returned from the api request | | `any` |
diff --git a/docs/reference/app/components/v-fancy-select.md b/docs/reference/app/components/v-fancy-select.md
new file mode 100644
index 0000000000..d9fd116ba7
--- /dev/null
+++ b/docs/reference/app/components/v-fancy-select.md
@@ -0,0 +1,67 @@
+# Fancy Select
+
+Mimics the functionality of a select, where only the current value is shown, but does it in a different visual
+representation.
+
+## Usage
+
+```html
+
+```
+
+## FancySelectItem
+
+| Prop | Description | Type |
+| ------------- | ------------------------------------------ | ---------------------------------------- |
+| `icon` | Which icon to display | `string` |
+| `value` | Which value the item represents | `string or number` |
+| `text` | The displayed text | `undefined or string or TranslateResult` |
+| `description` | Optional description to display | `undefined or string or TranslateResult` |
+| `divider` | If set to true, display an divider instead | `undefined or boolean` |
+| `iconRight` | Display an optional icon to the right | `undefined or string` |
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | --------------------------------------- | ------- | ------------------- |
+| `items`\* | The list of possible items to display | | `FancySelectItem[]` |
+| `value` | used to model the selected items | `null` | `[String, Number]` |
+| `disabled` | Disable selecting / deselecting a value | `false` | `Boolean` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | -------------------------- | --------- |
+| `input` | Syncs value with `v-model` | `boolean` |
+
+#### Slots
+
+n/a
+
+#### CSS Variables
+
+n/a
diff --git a/docs/reference/app/components/v-field-select.md b/docs/reference/app/components/v-field-select.md
new file mode 100644
index 0000000000..1ebb57070e
--- /dev/null
+++ b/docs/reference/app/components/v-field-select.md
@@ -0,0 +1,25 @@
+# Field Select
+
+Allows for easy selection of field inside a collection. Also works with relations inside a collection.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------------- | ---------------------------------------------------------- | ------------ | ---------- |
+| `collection`\* | From where the fields should be selected | | `String` |
+| `disabled` | Disables this component | `false` | `Boolean` |
+| `value` | Can be used to model the selected field | `null` | `string[]` |
+| `depth` | If greater than `0`, it also considers relations of fields | `1` | `Number` |
+| `inject` | Inject you own fields, collections or relations | `() => ({})` | `Object` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | --------------------- | ---------- |
+| `input` | The changed selection | `string[]` |
diff --git a/docs/reference/app/components/v-field-template.md b/docs/reference/app/components/v-field-template.md
new file mode 100644
index 0000000000..601b2fab5c
--- /dev/null
+++ b/docs/reference/app/components/v-field-template.md
@@ -0,0 +1,27 @@
+# Field Template
+
+Similar to the v-field-select. Allows you to select fields or relational fields from a collection with the benefit of
+being able to add text in between.
+
+Models a template string like `My name is {name} and I'm {age} years old`.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------------- | ---------------------------------------------------------- | ------- | --------- |
+| `collection`\* | From where the fields should be selected | | `String` |
+| `disabled` | Disables this component | `false` | `Boolean` |
+| `value` | Can be used to model the template string | `null` | `String` |
+| `depth` | If greater than `0`, it also considers relations of fields | `2` | `Number` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | --------------------------- | -------- |
+| `input` | The changed template string | `String` |
diff --git a/docs/reference/app/components/v-form.md b/docs/reference/app/components/v-form.md
new file mode 100644
index 0000000000..3972e19859
--- /dev/null
+++ b/docs/reference/app/components/v-form.md
@@ -0,0 +1,41 @@
+# Form
+
+Renders a form using interfaces based on the passed collection name.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------- |
+| `collection` | The collection of which you want to render the fields | `undefined` | `String` |
+| `fields` | Array of fields to render. This can be used instead of the collection prop | `undefined` | `Field[]` |
+| `initial-values` | Object of the starting values of the fields | `null` | `FieldValues` |
+| `edits` | The edits that were made after the form was rendered. Being used in `v-model` | `null` | `FieldValues` |
+| `loading` | Display the form in a loading state. Prevents the ctx menus from being used and renders skeleton loaders for the fields | `false` | `Boolean` |
+| `batch-mode` | If enabled, allows to select multiple entries | `false` | `Boolean` |
+| `primary-key` | The primary key of the given collection | `null` | `[String, Number]` |
+| `disabled` | Disables any interaction with the form | `false` | `Boolean` |
+| `validation-errors` | Add custom validation to any field | `() => []` | `ValidationError[]` |
+
+**Note**: You have to pass either the collection or fields prop.
+
+#### Slots
+
+n/a
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ------------------------ | ----- |
+| `input` | Edits have been updated. | |
diff --git a/docs/reference/app/components/v-hover.md b/docs/reference/app/components/v-hover.md
new file mode 100644
index 0000000000..32a992fded
--- /dev/null
+++ b/docs/reference/app/components/v-hover.md
@@ -0,0 +1,50 @@
+# Hover
+
+Adds hover functionality to any component you place inside. Can be used to display different states of a component
+depending if you are hovering over it.
+
+```html
+
+
+
+```
+
+## Delays
+
+You can control how long the hover state persists after the user leaves the element with the `close-delay` prop.
+Likewise, you can set how long it will take before the hover state is set with the `open-delay` prop:
+
+```html
+
+
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------- | -------------------------------------------- | ------- | --------- |
+| `close-delay` | Delay (ms) before the hover state is removed | `0` | `Number` |
+| `open-delay` | Delay (ms) before the hover state is applied | `0` | `Number` |
+| `disabled` | Disables the hover state from happening | `false` | `Boolean` |
+| `tag` | What HTML tag to use for the wrapper | `'div'` | `String` |
+
+#### Events
+
+n/a
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------------------------------------------------------- | ---- |
+| _default_ | Place your components that should use the hover effect here | |
diff --git a/docs/reference/app/components/v-icon.md b/docs/reference/app/components/v-icon.md
new file mode 100644
index 0000000000..cb4c78fda8
--- /dev/null
+++ b/docs/reference/app/components/v-icon.md
@@ -0,0 +1,69 @@
+# Icon
+
+The icon component allows you to render any [Material Design Icons](https://material.io/icons). It also supports
+rendering of custom SVG based icons.
+
+## Sizes / Colors
+
+The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. Color changes are
+done via the css variable `--v-icon-color` like in the example below.
+
+```html
+
+
+```
+
+## Custom Size
+
+If the default sizes don't give you the exact size you require, you can add the `size` prop with any custom pixel value.
+Note: we recommend using one of the pre-defined sizes to ensure a consistent look across the platform.
+
+## Outline
+
+You can render the outline variant of the Material Icon by setting the `outline` property.
+
+## Click events
+
+When you add a click event to the icon, the icon will automatically add a pointer cursor.
+
+## Left / Right
+
+Oftentimes, you'll use the icon next to some text, for example in a button. When doing this, you can use the `left` /
+`right` props to add some spacing to the icon:
+
+```html
+
+ Add new
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | ------------------------------------ | ------- | --------- |
+| `name`\* | Which icon to display | | `String` |
+| `filled` | Removes the outline stlye if enabled | `false` | `Boolean` |
+| `sup` | | `false` | `Boolean` |
+| `left` | Displays the icon more to the left | `false` | `Boolean` |
+| `right` | Displays the icon more to the right | `false` | `Boolean` |
+| `disabled` | Disables the icon | `false` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ---------------------- | -------------- |
+| `--v-icon-color` | `currentColor` |
+| `--v-icon-color-hover` | `currentColor` |
+| `--v-icon-size` | `24px` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ------------------------------- | ----- |
+| `click` | Fires when clicking on the icon | |
diff --git a/docs/reference/app/components/v-info.md b/docs/reference/app/components/v-info.md
new file mode 100644
index 0000000000..2d52115091
--- /dev/null
+++ b/docs/reference/app/components/v-info.md
@@ -0,0 +1,33 @@
+# Info
+
+Renders a stylized informational placard. It's similar in `v-notice` in it's use case.
+
+```html
+We couldn't find the user you're looking for.
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| --------- | --------------------------------------------- | -------- | ---------------------------------------------- |
+| `title`\* | The title to display in the info | | `String` |
+| `icon` | What icon to render above the title | `'box'` | `String` |
+| `type` | One of `info`, `success`, `warning`, `danger` | `'info'` | `'info' or 'success' or 'warning' or 'danger'` |
+| `center` | Display the info centered | `false` | `Boolean` |
+
+#### Events
+
+n/a
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ------------------------------------------------------------ | ---- |
+| _default_ | Default content area. Is rendered within a styled `
` tag. | |
+| `append` | After the main body copy. Can be used to inject buttons etc. | |
+
+#### CSS Variables
+
+n/a
diff --git a/docs/reference/app/components/v-input.md b/docs/reference/app/components/v-input.md
new file mode 100644
index 0000000000..4db4e3c4b5
--- /dev/null
+++ b/docs/reference/app/components/v-input.md
@@ -0,0 +1,69 @@
+# Input
+
+Displays the usual input. Can be used to model strings and numbers.
+
+```html
+
+```
+
+## Attributes & Events
+
+The HTML `` element supports a huge amount of attributes and events. In order to support all of these, all props
+that aren't specially handled (see list below) will be passed on to the `` element directly. This allows you to
+change anything you want on the input.
+
+## Prefixes / Suffixes
+
+You can add any custom (text) prefix/suffix to the value in the input using the `prefix` and `suffix` slots.
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------------- | -------------------------------------------------------------- | -------- | ------------------ |
+| `value` | Used with `v-model` to mirror the entered value | `null` | `[String, Number]` |
+| `autofocus` | Autofocusses the input on render | `false` | `Boolean` |
+| `disabled` | Set the disabled state for the input | `false` | `Boolean` |
+| `full-width` | Render the input with 100% width | `true` | `Boolean` |
+| `prefix` | Prefix the users value with a value | `null` | `String` |
+| `suffix` | Show a value at the end of the input | `null` | `String` |
+| `slug` | Force the value to be URL safe | `false` | `Boolean` |
+| `slug-separator` | What character to use as separator in slugs | `'-'` | `String` |
+| `active` | Force the focus state | `false` | `Boolean` |
+| `trim` | Trim the start and end whitespace | `false` | `Boolean` |
+| `nullable` | When active, sets an empty entry to null | `true` | `Boolean` |
+| `type` | Can be `text` or `number` | `'text'` | `String` |
+| `max` | The maximum number that can be entered | `null` | `Number` |
+| `min` | The minimum number that can be enterd | `null` | `Number` |
+| `step` | In which unit steps should be counted up or down | `1` | `Number` |
+| `db-safe` | Make the value save to be used with the DB | `false` | `Boolean` |
+| `hide-arrows` | Hide the arrows that are used to increase or decrease a number | `false` | `Boolean` |
+
+Note: all other attached attributes are bound to the input HTMLELement in the component. This allows you to attach any
+of the standard HTML attributes like `min`, `length`, or `pattern`.
+
+#### Slots
+
+| Slot | Description | Data |
+| --------------- | ------------------------------------------------- | ------------------------------------------------- |
+| `prepend-outer` | Before the input | `{ disabled: boolean, value: string or number; }` |
+| `prepend` | In the input, before the value, before the prefix | `{ disabled: boolean, value: string or number; }` |
+| `append` | In the input, after the value, after the suffix | `{ disabled: boolean, value: string or number; }` |
+| `append-outer` | After the input | `{ disabled: boolean, value: string or number; }` |
+| `input` | | |
+
+#### CSS Variables
+
+| Variable | Default |
+| ----------------------------- | --------------------------- |
+| `--v-input-font-family` | `var(--family-sans-serif)` |
+| `--v-input-placeholder-color` | `var(--foreground-subdued)` |
+
+#### Events
+
+| Event | Description | Value |
+| --------- | --------------------------------- | ------------------ |
+| `click` | Fires when the input gets clicked | |
+| `keydown` | When a key has been pressen | |
+| `input` | Updated the modeled value | `String or Number` |
diff --git a/docs/reference/app/components/v-item-group.md b/docs/reference/app/components/v-item-group.md
new file mode 100644
index 0000000000..09ddc07211
--- /dev/null
+++ b/docs/reference/app/components/v-item-group.md
@@ -0,0 +1,155 @@
+# Item Group
+
+Provides the ability to make groups of items out of any nested component. Can be reused to make more advanced selectable
+elements like a list of cards, or a button group.
+
+## Usage
+
+```html
+
+
+
+
+
Item {{ n }}
+ Click me to {{ active ? 'activate' : 'deactivate' }}
+
+
+
+
+
+
+```
+
+The `v-item-group` component will keep the final state for the selection; every nested `v-item` component will be
+registered to the context of the first `v-item-group` parent up in the tree. This means that `v-item` can be in any
+nested component or sibling:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+It also means you can theoretically nest item-groups inside of items:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+(That being said, if you ever find yourself in this situation, think long and hard if what you're doing makes sense)
+
+### Active / Toggle
+
+Every `v-item` provides the `active` state and a `toggle` function to the default slot. Use this to render custom markup
+/ styling and to toggle the active state for this item:
+
+```html
+
+
Am I active? {{ active }}
+ Toggle active state
+
+```
+
+### Custom values
+
+By default, the `v-item-group` component will use the index of the child as model value (eg `[2, 4]`). The child
+`v-item` component accepts a `value` prop that lets you choose what is used as identifier for the v-item. This can be
+useful when you're working with a predefined list of items:
+
+```html
+
+
+ {{ item.title }}
+
+
+
+
+```
+
+In this case, the selection state for all items selected would be `[15, 414, 'jolly']`
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ----------- | ----------------------------------------------------- | -------------- | ---------------------- |
+| `value` | Used with `v-model` to model the selected items | `undefined` | `(string or number)[]` |
+| `mandatory` | If enabled, at least one item has to be selected | `false` | `Boolean` |
+| `max` | The maximum amount of items that can be selected | `-1` | `Number` |
+| `multiple` | If enabled, multiple elements can be selected | `false` | `Boolean` |
+| `scope` | Items that do not have the same scope will be ignored | `'item-group'` | `String` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | -------------------------------- | -------------------- |
+| `input` | Used to update the modeled value | (String or Number)[] |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------------------------------------------------------- | ---- |
+| _default_ | All items placed inside here will be part of the item group | |
diff --git a/docs/reference/app/components/v-item.md b/docs/reference/app/components/v-item.md
new file mode 100644
index 0000000000..8c5b934f38
--- /dev/null
+++ b/docs/reference/app/components/v-item.md
@@ -0,0 +1,21 @@
+# Item
+
+Should be used in combination with `v-item-group` to model the state of active / inactive items. For more information
+have a look at the item group component.
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------- | ----------------------------------------------------- | -------------- | --------- |
+| `value` | Which value to represent when active | `null` | `String` |
+| `scope` | Only matches to a group when both scopes are the same | `'item-group'` | `String` |
+| `active` | If the item is currently activated | `undefined` | `Boolean` |
+| `watch` | If the active state should update after initial set | `true` | `Boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | --------------------------- | ---- |
+| _default_ | Where the item content goes | |
diff --git a/docs/reference/app/components/v-list-group.md b/docs/reference/app/components/v-list-group.md
new file mode 100644
index 0000000000..19a9d91060
--- /dev/null
+++ b/docs/reference/app/components/v-list-group.md
@@ -0,0 +1,49 @@
+# List Group
+
+Used to display nested items inside a list.
+
+```html
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+ Group 1
+
+
+ Item 1-1
+ Item 1-2
+ Item 1-2
+
+
+```
+
+## Reference
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ----------- | ----- |
+| `click` | | |
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | ----------- | ----------- | ------------------ |
+| `multiple` | | `true` | `Boolean` |
+| `to` | | `null` | `String` |
+| `active` | | `false` | `Boolean` |
+| `exact` | | `false` | `Boolean` |
+| `disabled` | | `false` | `Boolean` |
+| `scope` | | `undefined` | `String` |
+| `value` | | `undefined` | `[String, Number]` |
+| `dense` | | `false` | `Boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| ----------- | ----------- | ---- |
+| `activator` | | |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-list-item-content.md b/docs/reference/app/components/v-list-item-content.md
new file mode 100644
index 0000000000..340f4dea84
--- /dev/null
+++ b/docs/reference/app/components/v-list-item-content.md
@@ -0,0 +1,18 @@
+# List Item Content
+
+Add properly formatted content to the `v-list-item`.
+
+## Reference
+
+#### CSS Variables
+
+| Variable | Default |
+| ----------------------------------- | -------------------------- |
+| `--v-list-item-content-padding` | `9px 0` |
+| `--v-list-item-content-font-family` | `var(--family-sans-serif)` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ---------------------- | ---- |
+| _default_ | Where the content goes | |
diff --git a/docs/reference/app/components/v-list-item-hint.md b/docs/reference/app/components/v-list-item-hint.md
new file mode 100644
index 0000000000..1721a9e2de
--- /dev/null
+++ b/docs/reference/app/components/v-list-item-hint.md
@@ -0,0 +1,17 @@
+# List Item Hint
+
+Adds a hint to the `v-list-item` component.
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------- | ----------- | ------- | --------- |
+| `center` | | `false` | `Boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-list-item-icon.md b/docs/reference/app/components/v-list-item-icon.md
new file mode 100644
index 0000000000..b243b9f4f5
--- /dev/null
+++ b/docs/reference/app/components/v-list-item-icon.md
@@ -0,0 +1,30 @@
+# List Item Icon
+
+Adds an icon to a `v-list-item`.
+
+```html
+
+
+ This is a person
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------- | ---------------- | ------- | --------- |
+| `center` | Centers the icon | `false` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| -------------------------- | --------------------------- |
+| `--v-list-item-icon-color` | `var(--foreground-subdued)` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ------------------- | ---- |
+| _default_ | Where the icon goes | |
diff --git a/docs/reference/app/components/v-list-item.md b/docs/reference/app/components/v-list-item.md
new file mode 100644
index 0000000000..280c75f722
--- /dev/null
+++ b/docs/reference/app/components/v-list-item.md
@@ -0,0 +1,49 @@
+# List Item
+
+Used inside a `v-list` to display an item inside the given list.
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | -------------------------------------------------- | ----------- | -------------------- |
+| `value` | What value to represent when active | `undefined` | `[String, Number]` |
+| `large` | If the item should be displayed larger | `false` | `Boolean` |
+| `dense` | Makes the item smaller | `false` | `Boolean` |
+| `to` | Where the item should link to | `null` | `string or Location` |
+| `href` | Same as `to` except that it takes an external link | `null` | `String` |
+| `disabled` | Disables the item | `false` | `Boolean` |
+| `active` | If the item should be active or not | `false` | `Boolean` |
+| `dashed` | Adds a dashed style | `false` | `Boolean` |
+| `exact` | | `false` | `Boolean` |
+| `download` | | `null` | `String` |
+
+#
+
+### CSS Variables
+
+| Variable | Default |
+| --------------------------------------- | --------------------------------------------------------------------- |
+| `--v-list-item-min-height-large` | `40px` |
+| `--v-list-item-min-height` | `var(--v-list-item-min-height)` |
+| `--v-list-item-padding-large` | `0 8px` |
+| `--v-list-item-padding` | `0 8px 0 calc(8px + var(--v-list-item-indent, 0px))` |
+| `--v-list-item-margin-large` | `4px 0` |
+| `--v-list-item-margin` | `2px 0` |
+| `--v-list-item-min-width` | `none` |
+| `--v-list-item-max-width` | `none` |
+| `--v-list-item-max-height` | `auto` |
+| `--v-list-item-border-radius` | `var(--border-radius)` |
+| `--v-list-item-margin-bottom` | `0` |
+| `--v-list-item-color` | `var(--v-list-color, var(--foreground-normal))` |
+| `--v-list-item-color-hover` | `var(--v-list-color-hover, var(--foreground-normal))` |
+| `--v-list-item-color-active` | `var(--v-list-color-active, var(--foreground-normal))` |
+| `--v-list-item-background-color-hover` | `var(--v-list-background-color-hover, var(--background-normal-alt))` |
+| `--v-list-item-background-color-active` | `var(--v-list-background-color-active, var(--background-normal-alt))` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | --------------------------- | ---- |
+| _default_ | Where the item content goes | |
diff --git a/docs/reference/app/components/v-list.md b/docs/reference/app/components/v-list.md
new file mode 100644
index 0000000000..f3e764b1d0
--- /dev/null
+++ b/docs/reference/app/components/v-list.md
@@ -0,0 +1,59 @@
+# List
+
+Display usual lists. Also works with nested data.
+
+```html
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+ Group 1
+
+
+ Item 1-1
+ Item 1-2
+ Item 1-2
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------------- | ----------------------------------------------------------- | ---------- | ---------------------- |
+| `active-items` | Used with `v-model` to model all selected items in the list | `() => []` | `(number or string)[]` |
+| `large` | Displays each list item a bit larger | `false` | `Boolean` |
+| `multiple` | Allows to select multiple items in the list | `true` | `Boolean` |
+| `mandatory` | At least one item has to be selected | `true` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ---------------------------------- | ------------------------------ |
+| `--v-list-padding` | `4px 0` |
+| `--v-list-max-height` | `none` |
+| `--v-list-max-width` | `none` |
+| `--v-list-min-width` | `220px` |
+| `--v-list-min-height` | `none` |
+| `--v-list-color` | `var(--foreground-normal-alt)` |
+| `--v-list-color-hover` | `var(--foreground-normal-alt)` |
+| `--v-list-color-active` | `var(--foreground-normal-alt)` |
+| `--v-list-background-color-hover` | `var(--background-normal-alt)` |
+| `--v-list-background-color-active` | `var(--background-normal-alt)` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ------------------------------------ | ----- |
+| `input` | Used to update the current selection | |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | -------------------------- | ---- |
+| _default_ | Render all list items here | |
diff --git a/docs/reference/app/components/v-menu.md b/docs/reference/app/components/v-menu.md
new file mode 100644
index 0000000000..95c88c538b
--- /dev/null
+++ b/docs/reference/app/components/v-menu.md
@@ -0,0 +1,42 @@
+# Menu
+
+Renders a dropdown menu. Can be attached to an activator element or free floating.
+
+**NOTE**
+
+Due to the fact that a menu is rendered through a portal, dialogs don't work great when rendered from within a menu.
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------------------ | ----------------------------------------------------------------- | ----------- | ----------- |
+| `placement` | Where to position the popper. | `'bottom'` | `Placement` |
+| `value` | Value to control menu active state | `undefined` | `Boolean` |
+| `close-on-click` | Close the menu when clicking outside of the menu | `true` | `Boolean` |
+| `close-on-content-click` | Close the menu when clicking the content of the menu | `true` | `Boolean` |
+| `attached` | Attach the menu to an input | `false` | `Boolean` |
+| `show-arrow` | Show an arrow pointer | `false` | `Boolean` |
+| `disabled` | Menu does not appear | `false` | `Boolean` |
+| `trigger` | Activate the menu on a trigger. One of `manual`, `click`, `hover` | `null` | `String` |
+| `delay` | Time in ms before menu activates after trigger | `0` | `Number` |
+
+#### CSS Variables
+
+| Variable | Default |
+| -------------------- | ------- |
+| `--v-menu-min-width` | `100px` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ---------------------------- | --------- |
+| `input` | Used to model the value prop | `Boolean` |
+
+#### Slots
+
+| Slot | Description | Data |
+| ----------- | ------------------------------------------------- | ---- |
+| `activator` | The activator for the menu | |
+| _default_ | Elements that should be displayed inside the menu | |
diff --git a/docs/reference/app/components/v-notice.md b/docs/reference/app/components/v-notice.md
new file mode 100644
index 0000000000..eb44db810b
--- /dev/null
+++ b/docs/reference/app/components/v-notice.md
@@ -0,0 +1,31 @@
+# Notice
+
+Render a small notice to warn of something or to give tips on how to use things.
+
+```html
+I'm a notice!
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------- | ------------------------------------------------------------------ | ---------- | ---------------------------------------------------------- |
+| `type` | One of `info`, `success`, `warning`, `danger` | `'normal'` | `'normal' or 'info' or 'success' or 'warning' or 'danger'` |
+| `icon` | Custom icon name, or false if you want to hide the icon completely | `null` | `[String, Boolean]` |
+| `center` | Render notice content centered | `false` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ----------------------------- | --------------------------- |
+| `--v-notice-color` | `var(--foreground-subdued)` |
+| `--v-notice-background-color` | `var(--background-subdued)` |
+| `--v-notice-icon-color` | `var(--foreground-subdued)` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ------------------------------------ | ---- |
+| _default_ | Whatever should be inside the notice | |
diff --git a/docs/reference/app/components/v-overlay.md b/docs/reference/app/components/v-overlay.md
new file mode 100644
index 0000000000..f5740b9e8d
--- /dev/null
+++ b/docs/reference/app/components/v-overlay.md
@@ -0,0 +1,53 @@
+# Overlay
+
+The overlay is a fairly barebones component that's meant to be used with modals / confirms / other attention requiring
+actions.
+
+```html
+
+ Close overlay
+
+```
+
+## Color
+
+The colors can be changed via the css variable `--v-overlay-color`.
+
+```html
+
+ Close overlay
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | ------------------------- | ------- | --------- |
+| `active` | Show / hide the overlay | `false` | `Boolean` |
+| `absolute` | Add `position: absolute;` | `false` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| --------------------- | ---------------------- |
+| `--v-overlay-color` | `var(--overlay-color)` |
+| `--v-overlay-z-index` | `600` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ----------- | ----- |
+| `click` | | |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-pagination.md b/docs/reference/app/components/v-pagination.md
new file mode 100644
index 0000000000..90201692ad
--- /dev/null
+++ b/docs/reference/app/components/v-pagination.md
@@ -0,0 +1,33 @@
+# Pagination
+
+Add a pagination to a list or similar to allow for access to multiple pages.
+
+## Usage
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ----------------- | ------------------------------------------------ | ----------- | --------- |
+| `length`\* | The amount of pages to render | `null` | `Number` |
+| `value` | Currently selected page | `null` | `Number` |
+| `disabled` | Disables the pagination | `false` | `Boolean` |
+| `total-visible` | Specify the max total visible pagination numbers | `undefined` | `Number` |
+| `show-first-last` | Show first/last buttons | `false` | `Boolean` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | --------------------- | -------- |
+| `input` | When the page changes | `number` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ----------------------------- | ---------------- |
+| `--v-pagination-active-color` | `var(--primary)` |
diff --git a/docs/reference/app/components/v-progress-circular.md b/docs/reference/app/components/v-progress-circular.md
new file mode 100644
index 0000000000..740645d846
--- /dev/null
+++ b/docs/reference/app/components/v-progress-circular.md
@@ -0,0 +1,40 @@
+# Progress Circular
+
+Displays a circular progress bar as the name suggests. Can be used to show that something is loading or how much
+something is done.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| --------------- | ------------------------------------------------------- | ------- | --------- |
+| `indeterminate` | If set to true displays no value but spins indefinitely | `false` | `Boolean` |
+| `value` | Which value to represent going from 0 to 100 | `0` | `Number` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ---------------------------------------- | -------------------------- |
+| `--v-progress-circular-color` | `var(--foreground-normal)` |
+| `--v-progress-circular-background-color` | `var(--border-normal)` |
+| `--v-progress-circular-transition` | `400ms` |
+| `--v-progress-circular-speed` | `2s` |
+| `--v-progress-circular-size` | `28px` |
+| `--v-progress-circular-line-size` | `3px` |
+
+#### Events
+
+| Event | Description | Value |
+| -------------------- | ----------- | ----- |
+| `animationiteration` | | |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-progress-linear.md b/docs/reference/app/components/v-progress-linear.md
new file mode 100644
index 0000000000..f12c96bbc1
--- /dev/null
+++ b/docs/reference/app/components/v-progress-linear.md
@@ -0,0 +1,42 @@
+# Progress Linear
+
+Displays a linear progress bar. Can be used to show that something is loading or how much something is done.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| --------------- | -------------------------------------- | ------- | --------- |
+| `value` | Which value to represent from 0 to 100 | `0` | `Number` |
+| `absolute` | Sets position to absolute | `false` | `Boolean` |
+| `fixed` | Sets position to fixed | `false` | `Boolean` |
+| `indeterminate` | Play a general loading animation | `false` | `Boolean` |
+| `rounded` | Rounds up the corners of the progress | `false` | `Boolean` |
+| `top` | Positions the bar at the top | `false` | `Boolean` |
+| `bottom` | Positions the bar at the bottom | `false` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| -------------------------------------- | -------------------------- |
+| `--v-progress-linear-height` | `4px` |
+| `--v-progress-linear-color` | `var(--foreground-normal)` |
+| `--v-progress-linear-background-color` | `var(--border-normal)` |
+| `--v-progress-linear-transition` | `400ms` |
+
+#### Events
+
+| Event | Description | Value |
+| -------------------- | ----------- | ----- |
+| `animationiteration` | | |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-radio.md b/docs/reference/app/components/v-radio.md
new file mode 100644
index 0000000000..df5cc0dc49
--- /dev/null
+++ b/docs/reference/app/components/v-radio.md
@@ -0,0 +1,41 @@
+# Radio
+
+Classic radio buttons. Nothing special.
+
+```html
+
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------- | ------------------------------------------- | -------------------------- | --------- |
+| `value`\* | What value to represent when selected | | `String` |
+| `input-value` | Selected value. Used as value for `v-model` | `null` | `String` |
+| `label` | Label to render next to the radio | `null` | `String` |
+| `disabled` | Disable the radio button | `false` | `Boolean` |
+| `icon-on` | Change the icon to display when enabled | `'radio_button_checked'` | `String` |
+| `icon-off` | Change the icon to display when disabled | `'radio_button_unchecked'` | `String` |
+| `block` | Render the radio in a block like style | `false` | `Boolean` |
+
+#### Events
+
+| Event | Description | Value |
+| -------- | ------------------------------------------------------------- | -------- |
+| `change` | When the state of the radio button changes. Used in `v-model` | `string` |
+
+#### Slots
+
+| Slot | Description | Data |
+| ------- | --------------------------------------------------------------------------------- | ---- |
+| `label` | Custom override for label slot. Allows you to render custom markup in label slot. | |
+
+#### CSS Variables
+
+| Variable | Default |
+| ----------------- | ---------------- |
+| `--v-radio-color` | `var(--primary)` |
diff --git a/docs/reference/app/components/v-select.md b/docs/reference/app/components/v-select.md
new file mode 100644
index 0000000000..85f4b850bb
--- /dev/null
+++ b/docs/reference/app/components/v-select.md
@@ -0,0 +1,58 @@
+# Select
+
+Renders a dropdown input.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------------------------- | -------------------------------------------------------------- | --------- | ------------ |
+| `items`\* | The items that should be selectable | | `ItemsRaw` |
+| `item-text` | Which prop should be taken to render the text | `'text'` | `String` |
+| `item-value` | Which prop should be taken to mirror the selected value | `'value'` | `String` |
+| `item-icon` | Which prop should be taken to render the icon | `null` | `String` |
+| `value` | Mirror with `v-model` the currently selected values | `null` | `InputValue` |
+| `multiple` | Allow to select multiple values | `false` | `Boolean` |
+| `placeholder` | A placeholder if no item is selected yet | `null` | `String` |
+| `full-width` | Display the select in full width | `true` | `Boolean` |
+| `disabled` | Disable any interaction with the select | `false` | `Boolean` |
+| `show-deselect` | Allow to deselect all currently selected items | `false` | `Boolean` |
+| `allow-other` | Allow to enter custom values | `false` | `Boolean` |
+| `close-on-content-click` | Close the dropdown when an selection has been made | `true` | `Boolean` |
+| `inline` | display the selection inline with other text | `false` | `Boolean` |
+| `multiple-preview-threshold` | The maximum amount of selected items to display in the preview | `3` | `Number` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ------------------------ | -------------------------- |
+| `--v-select-font-family` | `var(--family-sans-serif)` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | --------------------------------- | ---- |
+| `prepend` | Prepend anything to the selection | |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ----------- | ----- |
+| `input` | | |
diff --git a/docs/reference/app/components/v-sheet.md b/docs/reference/app/components/v-sheet.md
new file mode 100644
index 0000000000..fb9ff16758
--- /dev/null
+++ b/docs/reference/app/components/v-sheet.md
@@ -0,0 +1,47 @@
+# Sheet
+
+A sheet is a component that holds other components. It provides a visual difference (layer) on the page. It's often used
+when grouping fields.
+
+```html
+
+```
+
+## Sizing
+
+The sheet component has props for `height`, `width`, `min-height`, `min-width`, `max-height`, and `max-width`. All of
+these props are in pixels.
+
+## Color
+
+The color can be changed via the css variable called `--v-sheet-color`.
+
+```html
+
+
+```
+
+## Reference
+
+#### CSS Variables
+
+| Variable | Default |
+| ---------------------------- | --------------------------- |
+| `--v-sheet-background-color` | `var(--background-subdued)` |
+| `--v-sheet-height` | `auto` |
+| `--v-sheet-min-height` | `var(--input-height)` |
+| `--v-sheet-max-height` | `none` |
+| `--v-sheet-width` | `auto` |
+| `--v-sheet-min-width` | `none` |
+| `--v-sheet-max-width` | `none` |
+| `--v-sheet-padding` | `8px` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-skeleton-loader.md b/docs/reference/app/components/v-skeleton-loader.md
new file mode 100644
index 0000000000..eed4beab67
--- /dev/null
+++ b/docs/reference/app/components/v-skeleton-loader.md
@@ -0,0 +1,22 @@
+# Skeleton Loader
+
+Render a placeholder while the proper content is still loading.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------ | ----------------------------------- | --------- | -------- |
+| `type` | Name of another component to mirror | `'input'` | `String` |
+
+#### CSS Variables
+
+| Variable | Default |
+| -------------------------------------- | --------------------------- |
+| `--v-skeleton-loader-color` | `var(--background-page)` |
+| `--v-skeleton-loader-background-color` | `var(--background-subdued)` |
diff --git a/docs/reference/app/components/v-slider.md b/docs/reference/app/components/v-slider.md
new file mode 100644
index 0000000000..ae9c2e792b
--- /dev/null
+++ b/docs/reference/app/components/v-slider.md
@@ -0,0 +1,93 @@
+# Slider
+
+A standard slider as everybody knows them.
+
+```html
+
+```
+
+## Color
+
+The colors can be changed via the css variables `--v-slider-color`, `--v-slider-fill-color` and
+`--v-slider-thumb-color`.
+
+```html
+
+
+```
+
+## Thumb Label
+
+You can show the current value of the slider when the user is sliding by enabling the thumb label. This can be done by
+setting the `show-thumb-label` prop:
+
+```html
+
+```
+
+## Ticks
+
+You can render an indicator for every step of the slider. This allows the user to know what kind of steps are available
+when sliding the slider. You can enable this with the `show-ticks` prop.
+
+```html
+
+```
+
+## Prepend / Append slot
+
+You can add any custom content before and after the slider (inline). This can be used to render things like buttons to
+decrease / increase the value, or a label that shows a preview of what the value with a unit is going to be.
+
+```html
+
+
+
+
+ Value: {{ value }}
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------------- | --------------------------------------------------- | ------- | --------- |
+| `max` | Maximum allowed value | `100` | `Number` |
+| `min` | Minimum allowed value | `0` | `Number` |
+| `show-thumb-label` | Show the thumb label on drag of the thumb | `false` | `Boolean` |
+| `show-ticks` | Show tick for each step | `false` | `Boolean` |
+| `step` | In what step the value can be entered | `1` | `Number` |
+| `value` | Current value of slider. Can be used with `v-model` | `0` | `Number` |
+| `always-show-value` | Always the current selected value | `false` | `Boolean` |
+
+#### Events
+
+| Event | Description | Value |
+| -------- | ------------------------------------------- | -------- |
+| `change` | Fires only when the user releases the thumb | `number` |
+| `input` | Fires continuously | `number` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ------------------------ | ---------------------- |
+| `--v-slider-color` | `var(--border-normal)` |
+| `--v-slider-thumb-color` | `var(--primary)` |
+| `--v-slider-fill-color` | `var(--primary)` |
+
+#### Slots
+
+| Slot | Description | Data |
+| ------------- | ------------------------------ | ---- |
+| `prepend` | Prepend anything to the slider | |
+| `thumb-label` | | |
+| `type-text` | | |
+| `append` | Append anything to the slider | |
diff --git a/docs/reference/app/components/v-switch.md b/docs/reference/app/components/v-switch.md
new file mode 100644
index 0000000000..06e20d8a8d
--- /dev/null
+++ b/docs/reference/app/components/v-switch.md
@@ -0,0 +1,76 @@
+# Switch
+
+Render a switch that either can model a single boolean value or model an array in combination with the `value` prop.
+
+```html
+
+```
+
+## Colors
+
+Color changes are done using the css variable `--v-switch-color`.
+
+```html
+
+
+```
+
+## Boolean vs arrays
+
+Just as with regular checkboxes, you can use `v-model` with both an array and a boolean:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+Keep in mind to pass the `value` prop with a unique value when using arrays in `v-model`.
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------------- | ------------------------------------------------------ | ------- | ------------------ |
+| `value` | If modeling an array, what value the switch represents | `null` | `String` |
+| `input-value` | Model the selected state using `v-model` | `false` | `[Boolean, Array]` |
+| `disabled` | Disables the switch | `false` | `Boolean` |
+| `label` | Displays a label next to the switch | `null` | `String` |
+
+#### CSS Variables
+
+| Variable | Default |
+| ------------------ | -------------------------- |
+| `--v-switch-color` | `var(--foreground-normal)` |
+
+#### Events
+
+| Event | Description | Value |
+| -------- | ------------------------------------ | ----- |
+| `change` | When the state of the switch changes | |
+
+#### Slots
+
+| Slot | Description | Data |
+| ------- | ----------------------------------------------- | ---- |
+| `label` | Alternative way of adding a label to the switch | |
diff --git a/docs/reference/app/components/v-tab-item.md b/docs/reference/app/components/v-tab-item.md
new file mode 100644
index 0000000000..a8e8793a04
--- /dev/null
+++ b/docs/reference/app/components/v-tab-item.md
@@ -0,0 +1,42 @@
+# Tab Item
+
+Individual tab content. To be used in a `v-tabs-items` context.
+
+```html
+
+ This is the content for the first tab.
+ This is the content for the second tab.
+
+```
+
+If you're using a custom value in the `value` prop, make sure the corresponding tab uses the same value to match:
+
+```html
+
+ Home
+ Settings
+
+
+
+ This is the content for home.
+ Settings content
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------- | --------------------------------------- | ------- | -------- |
+| `value` | Custom value to use for selection state | `null` | `String` |
+
+#### Events
+
+n/a
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ---------------- | ----------------------------------------- |
+| _default_ | Tab item content | `{ active: boolean, toggle: () => void }` |
diff --git a/app/src/components/v-tabs/v-tab/readme.md b/docs/reference/app/components/v-tab.md
similarity index 50%
rename from app/src/components/v-tabs/v-tab/readme.md
rename to docs/reference/app/components/v-tab.md
index 14e0d52717..eade5c6561 100644
--- a/app/src/components/v-tabs/v-tab/readme.md
+++ b/docs/reference/app/components/v-tab.md
@@ -2,8 +2,6 @@
Individual tab. To be used inside a `v-tabs` context.
-## Usage
-
```html
Schema
@@ -11,24 +9,30 @@ Individual tab. To be used inside a `v-tabs` context.
```
-## Props
-| Prop | Description | Default |
-|------------|--------------------------------------------------------|---------|
-| `disabled` | Disable the tab | `false` |
-| `value` | A custom value to be used in the selection of `v-tabs` | |
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | ------------------------------------------------------ | ------- | --------- |
+| `disabled` | Disable the tab | `false` | `Boolean` |
+| `value` | A custom value to be used in the selection of `v-tabs` | `null` | `String` |
+
+#### Events
-## Events
n/a
-## Slots
+#### Slots
+
| Slot | Description | Data |
-|-----------|-------------|--------------------------------------------|
+| --------- | ----------- | ------------------------------------------ |
| _default_ | | `{ active: boolean, toggle: () => void; }` |
-## CSS Variables
-| Variable | Default |
-|-----------------------------------|---------------------------------|
-| `--v-tab-color` | `var(--foreground-normal)` |
-| `--v-tab-background-color` | `var(--background-page)` |
-| `--v-tab-color-active` | `var(--foreground-normal)` |
-| `--v-tab-background-color-active` | `var(--background-page)` |
+#### CSS Variables
+
+| Variable | Default |
+| --------------------------------- | --------------------------- |
+| `--v-tab-color` | `var(--foreground-subdued)` |
+| `--v-tab-background-color` | `var(--background-page)` |
+| `--v-tab-color-active` | `var(--foreground-normal)` |
+| `--v-tab-background-color-active` | `var(--background-page)` |
diff --git a/docs/reference/app/components/v-table.md b/docs/reference/app/components/v-table.md
new file mode 100644
index 0000000000..0de708f459
--- /dev/null
+++ b/docs/reference/app/components/v-table.md
@@ -0,0 +1,165 @@
+# Table
+
+Used to display data like a list of objects in a table like view.
+
+```html
+
+```
+
+## Headers
+
+| Property | Description | Default |
+| ---------- | ------------------------------------------------------------ | ------- |
+| `text`\* | Text displayed in the column | -- |
+| `value`\* | Name of the object property that holds the value of the item | -- |
+| `align` | Text alignment of value. One of `left`, `center`, `right` | `left` |
+| `sortable` | If the column can be sorted on | `true` |
+| `width` | Custom width of the column in px | -- |
+
+## Custom element / component for header
+
+You can override the displayed header name by using the dynamic `header.[name]` slot. `[name]` is the `value` property
+in the header item for this column sent to `headers`.
+
+```html
+
+
+ {{ header.text }}
+
+
+```
+
+In this slot, you have access to the `header` through the scoped slot binding.
+
+## Custom element / component for cell value
+
+You can override the columns in a row by using the dynamic `item.[name]` slot. `[name]` is the `value` property in the
+header item for this column sent to `headers`.
+
+```html
+
+
+ {{ item.name }}
+
+
+```
+
+In this slot, you have access to the `item` through the scoped slot binding.
+
+## Resizable rows
+
+Adding the `show-resize` prop allows the user to resize the columns at will. You can keep your headers updated by using
+the `.sync` modifier or listening to the `update:headers` event:
+
+```html
+
+
+
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------------------- | ---------------------------------------------------------------------------------------------- | -------------------- | ------------- |
+| `headers`\* | What columns to show in the table. Supports the `.sync` modifier | | `HeaderRaw[]` |
+| `items`\* | The individual items to render as rows | | `Item[]` |
+| `disabled` | Disable edits to items in the form (drag/select) | `false` | `Boolean` |
+| `fixed-header` | Make the header fixed | `false` | `Boolean` |
+| `inline` | Display the table inline with other text | `false` | `Boolean` |
+| `item-key` | Primary key of the item. Used for keys / selections | `'id'` | `String` |
+| `loading-text` | What text to show when table is loading with no items | `i18n.t('loading')` | `String` |
+| `loading` | Show progress indicator | `false` | `Boolean` |
+| `manual-sort-key` | What field to use for manual sorting | `null` | `String` |
+| `must-sort` | Requires the sort to be on a particular column | `false` | `Boolean` |
+| `no-items-text` | What text to show when table doesn't contain any rows | `i18n.t('no_items')` | `String` |
+| `row-height` | Height of the individual rows in px | `48` | `Number` |
+| `selection-use-keys` | What field to use for selection | `false` | `Boolean` |
+| `selection` | What items are selected. Can be used with `v-model` as well | `() => []` | `any` |
+| `server-sort` | Handle sorting on the parent level. | `false` | `Boolean` |
+| `show-manual-sort` | Show manual sort drag handles | `false` | `Boolean` |
+| `show-resize` | Show resize handlers | `false` | `Boolean` |
+| `show-select` | Show checkboxes | `false` | `Boolean` |
+| `sort` | What column / order to sort by. Supports the `.sync` modifier. `{ by: string, desc: boolean }` | `null` | `Sort` |
+
+#### Events
+
+| Event | Description | Value |
+| ---------------- | ------------------------------------------------- | ------------------------------- |
+| `update:sort` | `.sync` event for `sort` prop | `{ by: string, desc: boolean }` |
+| `click:row` | When a row has been clicked | |
+| `update:items` | When changes to the items where made | |
+| `manual-sort` | When a user manually sorts the items | |
+| `update:headers` | `.sync` event for `headers` prop or `HeaderRaw[]` | |
+| `item-selected` | Emitted when an item is selected or deselected | `{ item: any, value: boolean }` |
+| `select` | Emitted when selected items change | `any[]` |
+
+#### Slots
+
+| Slot | Description | Data |
+| ------------------------ | ---------------------------- | ---- |
+| `header.${header.value}` | A slot for each header | |
+| `item.${header.value}` | A slot for each item | |
+| `item-append` | Adds to the end of each item | |
+| `footer` | Could be used for pagination | |
+
+#### CSS Variables
+
+| Variable | Default |
+| ----------------------------- | -------------------------- |
+| `--v-table-height` | `auto` |
+| `--v-table-sticky-offset-top` | `0` |
+| `--v-table-color` | `var(--foreground-normal)` |
+| `--v-table-background-color` | `var(--background-page)` |
diff --git a/docs/reference/app/components/v-tabs-items.md b/docs/reference/app/components/v-tabs-items.md
new file mode 100644
index 0000000000..e981564dac
--- /dev/null
+++ b/docs/reference/app/components/v-tabs-items.md
@@ -0,0 +1,32 @@
+# Tabs Items
+
+Tabs Items mirror a tab and display information for a selected tab. If a tab item is not selected, it automaticly gets
+hidden.
+
+```html
+
+ Home Section
+ News Section
+ Help Section
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ------- | ------------- | ----------- | ---------------------- |
+| `value` | v-model value | `undefined` | `(string or number)[]` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | --------------- | ------------------------------- |
+| `input` | Updates v-model | `readonly (string or number)[]` |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-tabs.md b/docs/reference/app/components/v-tabs.md
new file mode 100644
index 0000000000..3b57a684f4
--- /dev/null
+++ b/docs/reference/app/components/v-tabs.md
@@ -0,0 +1,62 @@
+# Tabs
+
+Tabs work like tabs in the browser and are there to split data into quickly accessable pages.
+
+```html
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+```
+
+## With Tab Items
+
+To be able to display a page depending on the tab use tab items.
+
+```html
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+
+
+
This is the first page
+
+
+
This is the second page
+
+
+
This is the third page
+
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| ---------- | ------------------------------------- | ----------- | ---------------------- |
+| `value` | The currently selected tab | `undefined` | `(string or number)[]` |
+| `vertical` | Display the tabs in a vertical format | `false` | `Boolean` |
+
+#### CSS Variables
+
+| Variable | Default |
+| -------------------------- | -------------------------- |
+| `--v-tabs-underline-color` | `var(--foreground-normal)` |
+
+#### Events
+
+| Event | Description | Value |
+| ------- | ------------------------------- | ----- |
+| `input` | Used to update the selected tab | |
+
+#### Slots
+
+| Slot | Description | Data |
+| --------- | ----------- | ---- |
+| _default_ | | |
diff --git a/docs/reference/app/components/v-text-overflow.md b/docs/reference/app/components/v-text-overflow.md
new file mode 100644
index 0000000000..3592bc6d8c
--- /dev/null
+++ b/docs/reference/app/components/v-text-overflow.md
@@ -0,0 +1,15 @@
+# Text Overflow
+
+Can be used to display text in a single line and hide any overflow.
+
+```html
+
+```
+
+## Reference
+
+#### Props
+
+| Prop | Description | Default | Type |
+| -------- | --------------------------------- | ------- | ------------------------------------------ |
+| `text`\* | The text that should be displayed | | `[String, Number, Array, Object, Boolean]` |
diff --git a/app/src/components/v-textarea/readme.md b/docs/reference/app/components/v-textarea.md
similarity index 56%
rename from app/src/components/v-textarea/readme.md
rename to docs/reference/app/components/v-textarea.md
index 03b4ba1738..51fe03b080 100644
--- a/app/src/components/v-textarea/readme.md
+++ b/docs/reference/app/components/v-textarea.md
@@ -1,4 +1,6 @@
-# Input
+# Textarea
+
+Renders a textarea in which multiline text can be entered.
```html
@@ -6,38 +8,35 @@
## Attributes & Events
-The HTML `
- 
-