github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-30 11:37:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into aggregation

Browse Source
This commit is contained in:
rijkvanzanten
2021-06-09 14:16:36 -04:00
parent ecce005226 7ecbe49bb6
commit c2c78792b1
529 changed files with 36532 additions and 32331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/reference/app/components/transition-bounce.md
View File

@@ -14,7 +14,7 @@ Bounces items in or out depending if the get added or removed from the view.
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup(props) {

2
docs/reference/app/components/transition-dialog.md
View File

@@ -14,7 +14,7 @@ Fades items in or out depending if the get added or removed from the view.
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup(props) {

2
docs/reference/app/components/transition-expand.md
View File

@@ -14,7 +14,7 @@ Use around a `v-if` or `v-show` component to have it expand in and out of view.
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup(props) {

56
docs/reference/app/components/v-button-group.md
View File

@@ -1,56 +0,0 @@
# 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
<template>
<v-button-group v-model="selection">
<v-button v-slot:default="{ active }">Click me to {{ active ? 'activate' : 'deactivate' }}</v-button>
</v-button-group>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
export default defineComponent({
setup() {
const selection = ref([]);
return { selection };
},
});
</script>
```
## 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)` |

4
docs/reference/app/components/v-checkbox.md
View File

@@ -64,11 +64,11 @@ Keep in mind to pass the `value` prop with a unique value when using arrays in `
## Indeterminate
The indeterminate state can be set with the `indeterminate` prop. We recommend using the `.sync` modifier with the
The indeterminate state can be set with the `indeterminate` prop. We recommend using the `v-model` directive with the
indeterminate prop, so the checkbox can set change it too:
```html
<v-checkbox :indeterminate.sync="indeterminate">
<v-checkbox v-model:indeterminate="indeterminate">
<script>
export default {
data() {

12
docs/reference/app/components/v-detail.md
View File

@@ -12,12 +12,12 @@ Use the detail component to hide not so important information or elements.
#### 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` |
| Prop | Description | Default | Type |
| ------------ | ----------------------- | ------------------------- | --------- |
| `active` | Used with `v-model` | `undefined` | `Boolean` |
| `label` | Label of detail | `i18n.global.t('toggle')` | `String` |
| `start-open` | Have it open by default | `false` | `Boolean` |
| `disabled` | Disable any interaction | `false` | `Boolean` |
#### Events

16
docs/reference/app/components/v-drawer.md
View File

@@ -13,14 +13,14 @@ relational or nested data.
#### 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` |
| 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.global.t('sidebar')` | `String` |
#### Events

16
docs/reference/app/components/v-fancy-select.md
View File

@@ -33,14 +33,14 @@ representation.
## 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` |
| 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` |
| `description` | Optional description to display | `undefined or string` |
| `divider` | If set to true, display an divider instead | `undefined or boolean` |
| `iconRight` | Display an optional icon to the right | `undefined or string` |
## Reference

10
docs/reference/app/components/v-form.md
View File

@@ -5,7 +5,7 @@ Renders a form using interfaces based on the passed collection name.
```html
<v-form
collection="articles"
:edits.sync="{}"
v-model="{}"
:initial-values="{
title: 'Hello World'
}"
@@ -21,7 +21,7 @@ Renders a form using interfaces based on the passed collection name.
| `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` |
| `model-value` | 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]` |
@@ -36,6 +36,6 @@ n/a
#### Events
| Event | Description | Value |
| ------- | ------------------------ | ----- |
| `input` | Edits have been updated. | |
| Event | Description | Value |
| -------------------- | ------------------------ | ----- |
| `update:model-value` | Edits have been updated. | |

4
docs/reference/app/components/v-item-group.md
View File

@@ -18,7 +18,7 @@ elements like a list of cards, or a button group.
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
@@ -103,7 +103,7 @@ useful when you're working with a predefined list of items:
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {

2
docs/reference/app/components/v-menu.md
View File

@@ -4,7 +4,7 @@ Renders a dropdown menu. Can be attached to an activator element or free floatin
**NOTE**
Due to the fact that a menu is rendered through a portal, dialogs don't work great when rendered from within a menu.
Due to the fact that a menu is rendered through a teleport, dialogs don't work great when rendered from within a menu.
## Reference

70
docs/reference/app/components/v-table.md
View File

@@ -50,7 +50,7 @@ in the header item for this column sent to `headers`.
```html
<v-table :headers="headers" :items="items">
<template #header.name="{ header }">
<template #[`header.name`]="{ header }">
<v-button>{{ header.text }}</v-button>
</template>
</v-table>
@@ -65,7 +65,7 @@ header item for this column sent to `headers`.
```html
<v-table :headers="headers" :items="items">
<template #item.name="{ item }">
<template #[`item.name`]="{ item }">
<v-button>{{ item.name }}</v-button>
</template>
</v-table>
@@ -76,15 +76,15 @@ 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:
the `v-model` directive or listening to the `update:headers` event:
```html
<template>
<v-table :headers.sync="headers" :items="[]" show-resize>
<v-table v-model:headers="headers" :items="[]" show-resize>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api';
import { defineComponent, ref } from 'vue';
import { HeaderRaw } from '@/components/v-table/types';
export default defineComponent({
@@ -112,39 +112,39 @@ export default defineComponent({
#### 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` |
| Prop | Description | Default | Type |
| -------------------- | ------------------------------------------------------------------------------------------------- | --------------------------- | ------------- |
| `headers`\* | What columns to show in the table. Supports the `v-model` directive | | `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.global.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.global.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 `v-model` directive. `{ 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[]` |
| Event | Description | Value |
| ---------------- | --------------------------------------------------- | ------------------------------- |
| `update:sort` | `v-model` 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` | `v-model` 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