github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-30 08:47: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-23 18:09:00 -04:00
parent 518547b530 7b1e1f7f82
commit dd67fdbdfb
196 changed files with 5651 additions and 1811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/concepts/items.md
View File

@@ -1,6 +1,6 @@
# Items
> An Item is an object within a Collection that contains the values for one or more fields. Each collection represents a
> An Item is an object within a Collection that contains the values for one or more fields. Each item represents a
> **record** in your database.
Items are the primary building blocks of your project content. Similar to a "row" within a spreadsheet, all data within

15
docs/guides/displays.md
View File

@@ -98,7 +98,7 @@ To be read by the Admin App, your custom display's Vue component must first be b
recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
```bash
npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
```
You can then use the following Rollup configuration within `rollup.config.js`:
@@ -106,7 +106,6 @@ You can then use the following Rollup configuration within `rollup.config.js`:
```js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import vue from 'rollup-plugin-vue';
@@ -116,16 +115,8 @@ export default {
format: 'es',
file: 'dist/index.js',
},
plugins: [
vue(),
nodeResolve(),
commonjs(),
replace({
'process\u200b.env.NODE_ENV': JSON.stringify('production'),
preventAssignment: true,
}),
terser(),
],
external: ['vue', '@directus/extension-sdk'],
plugins: [vue(), nodeResolve(), commonjs(), terser()],
};
```

15
docs/guides/interfaces.md
View File

@@ -89,7 +89,7 @@ To be read by the Admin App, your custom interface's Vue component must first be
We recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
```bash
npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
```
You can then use the following Rollup configuration within `rollup.config.js`:
@@ -97,7 +97,6 @@ You can then use the following Rollup configuration within `rollup.config.js`:
```js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import vue from 'rollup-plugin-vue';
@@ -107,16 +106,8 @@ export default {
format: 'es',
file: 'dist/index.js',
},
plugins: [
vue(),
nodeResolve(),
commonjs(),
replace({
'process\u200b.env.NODE_ENV': JSON.stringify('production'),
preventAssignment: true,
}),
terser(),
],
external: ['vue', '@directus/extension-sdk'],
plugins: [vue(), nodeResolve(), commonjs(), terser()],
};
```

96
docs/guides/layouts.md
View File

@@ -17,17 +17,30 @@ src/
### src/index.js
```js
import { ref } from 'vue';
import LayoutComponent from './layout.vue';
export default {
id: 'custom',
name: 'Custom',
icon: 'box',
component: LayoutComponent,
slots: {
options: () => null,
sidebar: () => null,
actions: () => null,
},
setup(props) {
const name = ref('Custom layout state');
return { name };
},
};
```
- `id` — The unique key for this layout. It is good practice to scope proprietary layouts with an author prefix.
- `name` — The human-readable name for this layout.
- `icon` — An icon name from the material icon set, or the extended list of Directus custom icons.
- `component` — A reference to your Vue component.
::: tip TypeScript
@@ -42,13 +55,19 @@ for more info on what can go into this object.
```vue
<template>
<div>Collection: {{ collection }}</div>
<div>{{ name }} - Collection: {{ props.collection }}</div>
</template>
<script>
import { toRefs } from 'vue';
import { useLayoutState } from '@directus/extension-sdk';
export default {
props: {
collection: String,
setup() {
const layoutState = useLayoutState();
const { props, name } = toRefs(layoutState.value);
return { props, name };
},
};
</script>
@@ -63,62 +82,6 @@ The props you can use in an layout are:
- `filters` (sync) - The user's currently active filters.
- `search-query` (sync) - The user's current search query.
#### Accessing the API from within your extension
The Directus App's Vue app instance provides a field called `system`, which can be injected into Vue components using
[Vue's inject framework](https://v3.vuejs.org/guide/component-provide-inject.html). This `system` field contains
functions to access [Pinia](https://pinia.esm.dev) stores, and more importantly, contains a property called `api`, which
is an authenticated Axios instance. Here's an example of how to use it:
```vue
<template>
<div>
<div>Collection: {{ collection }}</div>
<v-list>
<v-list-item v-for="item in items" v-bind:key="item.id">
{{ item }}
</v-list-item>
</v-list>
<v-button v-on:click="logToConsole">CLog items to console</v-button>
</div>
</template>
<script>
export default {
data() {
return {
items: null,
};
},
methods: {
logToConsole: function () {
console.log(this.items);
},
},
inject: ['system'],
mounted() {
// log the system field so you can see what attributes are available under it
// remove this line when you're done.
console.log(this.system);
// Get a list of all available collections to use with this module
this.system.api.get(`/items/${this.collection}`).then((res) => {
this.items = res;
});
},
};
</script>
```
In the above example, you can see that:
- The `system` field gets injected into the component and becomes available as an attribute of the component (ie
`this.system`)
- When the component is mounted, it uses `this.system.api.get` to request a list of all available collections
- The names of the collections are rendered into a list in the component's template
- a button is added with a method the logs all the data for the collections to the console
This is just a basic example. A more efficient way to access and work with the list of collections would be to get an
instance of the `collectionsStore` using `system.useCollectionsStore()`, but that's beyond the scope of this guide
## 2. Install Dependencies and Configure the Buildchain
Set up a package.json file by running:
@@ -131,7 +94,7 @@ To be read by the Admin App, your custom layouts's Vue component must first be b
recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
```bash
npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
```
You can then use the following Rollup configuration within `rollup.config.js`:
@@ -139,7 +102,6 @@ You can then use the following Rollup configuration within `rollup.config.js`:
```js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import vue from 'rollup-plugin-vue';
@@ -149,16 +111,8 @@ export default {
format: 'es',
file: 'dist/index.js',
},
plugins: [
vue(),
nodeResolve(),
commonjs(),
replace({
'process\u200b.env.NODE_ENV': JSON.stringify('production'),
preventAssignment: true,
}),
terser(),
],
external: ['vue', '@directus/extension-sdk'],
plugins: [vue(), nodeResolve(), commonjs(), terser()],
};
```

15
docs/guides/modules.md
View File

@@ -131,7 +131,7 @@ To be read by the Admin App, your custom module's Vue component must first be bu
recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
```bash
npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
```
You can then use the following Rollup configuration within `rollup.config.js`:
@@ -139,7 +139,6 @@ You can then use the following Rollup configuration within `rollup.config.js`:
```js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import vue from 'rollup-plugin-vue';
@@ -149,16 +148,8 @@ export default {
format: 'es',
file: 'dist/index.js',
},
plugins: [
vue(),
nodeResolve(),
commonjs(),
replace({
'process\u200b.env.NODE_ENV': JSON.stringify('production'),
preventAssignment: true,
}),
terser(),
],
external: ['vue', '@directus/extension-sdk'],
plugins: [vue(), nodeResolve(), commonjs(), terser()],
};
```

4
docs/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@directus/docs",
"private": false,
"version": "9.0.0-rc.76",
"version": "9.0.0-rc.80",
"description": "",
"main": "dist/index.js",
"scripts": {
@@ -33,7 +33,7 @@
"directory-tree": "2.2.9",
"fs-extra": "10.0.0",
"lodash.get": "4.4.2",
"micromark": "2.11.4",
"micromark": "3.0.0",
"npm-watch": "0.10.0",
"slugify": "1.5.3",
"vuepress": "1.8.2",

2
docs/reference/api/assets.md
View File

@@ -9,7 +9,7 @@
::: tip Uploading Files
To learn more about uploading files, see the [Upload a File](/reference/api/system/files/#upload-a-file) and
[Import a File](<(/reference/api/system/files/#import-a-file)>) endpoints.
[Import a File](/reference/api/system/files/#import-a-file) endpoints.
:::

19
docs/reference/environment-variables.md
View File

@@ -125,14 +125,17 @@ needs, you can extend the above environment variables to configure any of
## Cache
| Variable | Description | Default Value |
| ------------------------ | -------------------------------------------------------------------------------------- | ---------------- |
| `CACHE_ENABLED` | Whether or not caching is enabled. | `false` |
| `CACHE_TTL` | How long the cache is persisted. | `30m` |
| `CACHE_CONTROL_S_MAXAGE` | Whether to not to add the s-maxage expiration flag. Set to a number for a custom value | `0` |
| `CACHE_AUTO_PURGE` | Automatically purge the cache on `create`/`update`/`delete` actions. | `false` |
| `CACHE_NAMESPACE` | How to scope the cache data. | `directus-cache` |
| `CACHE_STORE` | Where to store the cache data. Either `memory`, `redis`, or `memcache`. | `memory` |
| Variable | Description | Default Value |
| ----------------------------- | -------------------------------------------------------------------------------------------- | ---------------- |
| `CACHE_ENABLED` | Whether or not caching is enabled. | `false` |
| `CACHE_TTL` | How long the cache is persisted. | `30m` |
| `CACHE_CONTROL_S_MAXAGE` | Whether to not to add the s-maxage expiration flag. Set to a number for a custom value | `0` |
| `CACHE_AUTO_PURGE` | Automatically purge the cache on `create`/`update`/`delete` actions. | `false` |
| `CACHE_SCHEMA` <sup>[1]</sup> | Whether or not the database schema is cached. One of `false`, `true`, or a string time value | `true` |
| `CACHE_NAMESPACE` | How to scope the cache data. | `directus-cache` |
| `CACHE_STORE` | Where to store the cache data. Either `memory`, `redis`, or `memcache`. | `memory` |
<sup>[1]</sup> `CACHE_SCHEMA` ignores the `CACHE_ENABLED` value
Based on the `CACHE_STORE` used, you must also provide the following configurations:

40
docs/reference/filter-rules.md
View File

@@ -48,24 +48,28 @@
## Filter Operators
| Operator | Description |
| ------------ | -------------------------------------- |
| `_eq` | Equal to |
| `_neq` | Not equal to |
| `_lt` | Less than |
| `_lte` | Less than or equal to |
| `_gt` | Greater than |
| `_gte` | Greater than or equal to |
| `_in` | Exists in one of the values |
| `_nin` | Not in one of the values |
| `_null` | It is null |
| `_nnull` | It is not null |
| `_contains` | Contains the substring |
| `_ncontains` | Doesn't contain the substring |
| `_between` | The value is between two values |
| `_nbetween` | The value is not between two values |
| `_empty` | The value is empty (null or falsy) |
| `_nempty` | The value is not empty (null or falsy) |
| Operator | Description |
| --------------- | -------------------------------------- |
| `_eq` | Equal to |
| `_neq` | Not equal to |
| `_lt` | Less than |
| `_lte` | Less than or equal to |
| `_gt` | Greater than |
| `_gte` | Greater than or equal to |
| `_in` | Exists in one of the values |
| `_nin` | Not in one of the values |
| `_null` | It is null |
| `_nnull` | It is not null |
| `_contains` | Contains the substring |
| `_ncontains` | Doesn't contain the substring |
| `_starts_with` | Contains the substring |
| `_nstarts_with` | Doesn't contain the substring |
| `_ends_with` | Contains the substring |
| `_nends_with` | Doesn't contain the substring |
| `_between` | The value is between two values |
| `_nbetween` | The value is not between two values |
| `_empty` | The value is empty (null or falsy) |
| `_nempty` | The value is not empty (null or falsy) |
The following operators are **only available in validation permissions**:

16
docs/reference/sdk.md
View File

@@ -68,25 +68,27 @@ The storage implementation. See [Storage](#storage) for more information.
Defaults to an instance of `MemoryStorage` when in node.js, and `LocalStorage` when in browsers.
**NOTE:**
**NOTE:**
If you plan to use multiple SDK instances at once, keep in mind that they will share the Storage across them, leading to unpredictable behaviors. This scenario might be a case while writing tests.
If you plan to use multiple SDK instances at once, keep in mind that they will share the Storage across them, leading to
unpredictable behaviors. This scenario might be a case while writing tests.
For example, the SDK instance that executed last the `login()` method writes the resulting `access_token` into the Storage and **overwrites** any prior fetched `access_token` from any other SDK instance. That might mix up your test scenario by granting false access rights to your previous logged-in users.
For example, the SDK instance that executed last the `login()` method writes the resulting `access_token` into the
Storage and **overwrites** any prior fetched `access_token` from any other SDK instance. That might mix up your test
scenario by granting false access rights to your previous logged-in users.
Adding prefixes to your Storage instances would solve this error:
```js
import { Directus, MemoryStorage } from "@directus/sdk";
import { randomBytes } from "crypto";
import { Directus, MemoryStorage } from '@directus/sdk';
import { randomBytes } from 'crypto';
// ...
const prefix = randomBytes(8).toString("hex");
const prefix = randomBytes(8).toString('hex');
const storage = new MemoryStorage(prefix);
const url = `http://${host}:${port}`;
const directus = new Directus(url, { storage });
```
#### `options.transport`