Skip to content

Commit 3e597ce

Browse files
martinjagodicmartinjagodic
committed
Improve widgets
- better readability - add screenshot Copied from #22. Credit to @privatemaker.
1 parent 36fc86a commit 3e597ce

31 files changed

+451
-279
lines changed

‎content/docs/widgets/boolean.md‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
11
---
2-
title: boolean
3-
label: "Boolean"
2+
title: Boolean
3+
label: Boolean
4+
group: Widgets
5+
weight: 20
46
---
57

68
The boolean widget translates a toggle switch input to a true/false value.
79

8-
- **Name:** `boolean`
9-
- **UI:** toggle switch
10-
- **Data type:** boolean
11-
- **Options:**
12-
- `default`: accepts `true` or `false`; defaults to `false` when `required` is set to `false`
13-
- **Example:**
14-
```yaml
15-
- {label: "Draft", name: "draft", widget: "boolean", default: true}
16-
```
10+
**Name:** `boolean`
11+
12+
**UI:** toggle switch
13+
14+
**Data type:** boolean
15+
16+
**Options**
17+
18+
- `default`: accepts `true` or `false`; defaults to `false` when `required` is set to `false`
19+
20+
**Example config**
21+
22+
```yaml
23+
- {label: "Draft", name: "draft", widget: "boolean", default: true}
24+
```
25+
26+
**Result**
27+
28+
![toggle switch](/img/widget-boolean.png)

‎content/docs/widgets/code.md‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
---
2-
title: code
3-
label: 'Code'
2+
title: Code
3+
label: Code
4+
group: Widgets
5+
weight: 30
46
---
57

68
The code widget provides a code editor (powered by [Codemirror](https://codemirror.net)) with optional syntax awareness. Can output the raw code value or an object with the selected language and the raw code value.
79

8-
- **Name:** `code`
9-
- **UI:** code editor
10-
- **Data type:** string
11-
- **Options:**
12-
- `default_language`: optional; default language to use
13-
- `allow_language_selection`: optional; defaults to `false`: allows syntax to be changed
14-
- `keys`: optional; sets key names for code and lang if outputting an object; defaults to `{ code: 'code', lang: 'lang' }`
15-
- `output_code_only`: set to `true` to output the string value only, defaults to `false`
16-
17-
- **Example:**
18-
```yaml
19-
- label: 'Code'
20-
name: 'code'
21-
widget: 'code'
22-
```
10+
**Name:** `code`
11+
12+
**UI:** code editor
13+
14+
**Data type:** string
15+
16+
**Options:**
17+
18+
- `default_language`: optional; default language to use
19+
- `allow_language_selection`: optional; defaults to `false`: allows syntax to be changed
20+
- `keys`: optional; sets key names for code and lang if outputting an object; defaults to `{ code: 'code', lang: 'lang' }`
21+
- `output_code_only`: set to `true` to output the string value only, defaults to `false`
22+
23+
**Example**
24+
25+
```yaml
26+
- label: 'Code'
27+
name: 'code'
28+
widget: 'code'
29+
```
30+
31+
**Result**
32+
33+
![toggle switch](/img/widget-code.png)

‎content/docs/widgets/color.md‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
11
---
2-
label: 'Color'
3-
title: color
2+
label: Color
3+
title: Color
4+
group: Widgets
5+
weight: 40
46
---
57

68
The color widget translates a color picker to a color string.
79

8-
- **Name:** `color`
9-
- **UI:** color picker
10-
- **Data type:** string
11-
- **Options:**
12-
- `default`: accepts a string; defaults to an empty string. Sets the default value
13-
- `allowInput`: accepts a boolean, defaults to `false`. Allows manual editing of the color input value
14-
- `enableAlpha`: accepts a boolean, defaults to `false`. Enables Alpha editing
15-
- **Example:**
16-
```yaml
17-
- { label: 'Color', name: 'color', widget: 'color' }
18-
```
19-
- **Example:**
20-
```yaml
21-
- { label: 'Color', name: 'color', widget: 'color', enableAlpha: true, allowInput: true }
22-
```
10+
**Name:** `color`
11+
12+
**UI:** color picker
13+
14+
**Data type:** string
15+
16+
**Options:**
17+
18+
- `default`: accepts a string; defaults to an empty string. Sets the default value
19+
- `allowInput`: accepts a boolean, defaults to `false`. Allows manual editing of the color input value
20+
- `enableAlpha`: accepts a boolean, defaults to `false`. Enables Alpha editing
21+
22+
**Example**
23+
24+
```yaml
25+
- { label: 'Color', name: 'color', widget: 'color' }
26+
```
27+
28+
**Example**
29+
30+
```yaml
31+
- { label: 'Color', name: 'color', widget: 'color', enableAlpha: true, allowInput: true }
32+
```
33+
34+
**Result**
35+
36+
![toggle switch](/img/widget-color.png)

‎content/docs/widgets/datetime.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
2-
title: datetime
2+
title: Datetime
33
label: DateTime
4+
group: Widgets
5+
weight: 50
46
---
57

68
The datetime widget translates a datetime picker to a datetime string.
@@ -34,3 +36,7 @@ The datetime widget translates a datetime picker to a datetime string.
3436
format: "LLL"
3537
picker_utc: false
3638
```
39+
40+
**Result**
41+
42+
![toggle switch](/img/widget-datetime.png)

‎content/docs/widgets/file.md‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
---
2-
title: file
2+
title: File
33
label: File
4+
group: Widgets
5+
weight: 50
46
---
7+
58
The file widget allows editors to upload a file or select an existing one from the media library. The path to the file will be saved to the field as a string.
69

7-
* **Name:** `file`
8-
* **UI:** file picker button opens media gallery
9-
* **Data type:** file path string
10-
* **Options:**
11-
12-
* `default`: accepts a file path string; defaults to null
13-
* `media_library`: media library settings to apply when a media library is opened by the
14-
current widget
15-
16-
* `allow_multiple`: *(default: `true`)* when set to `false`, prevents multiple selection for any media library extension, but must be supported by the extension in use
17-
* `config`: a configuration object that will be passed directly to the media library being
18-
used - available options are determined by the library
19-
* `media_folder` (Beta): file path where uploaded files will be saved specific to this control. Paths can be relative to a collection folder (e.g. `files` will add the file to a sub-folder in the collection folder) or absolute with reference to the base of the repo which needs to begin with `/` (e.g `/static/files` will save uploaded files to the `static` folder in a sub folder named `files`)
20-
* `choose_url`: *(default: `true`)* when set to `false`, the "Insert from URL" button will be hidden
21-
* **Example:**
22-
23-
```yaml
24-
- label: "Manual PDF"
25-
name: "manual_pdf"
26-
widget: "file"
27-
default: "/uploads/general-manual.pdf"
28-
media_library:
29-
config:
30-
multiple: true
31-
```
10+
**Name:** `file`
11+
12+
**UI:** file picker button opens media gallery
13+
14+
**Data type:** file path string
15+
16+
**Options:**
17+
18+
- `default`: accepts a file path string; defaults to null
19+
- `media_library`: media library settings to apply when a media library is opened by the current widget
20+
- `allow_multiple`: *(default: `true`)* when set to `false`, prevents multiple selection for any media library extension, but must be supported by the extension in use
21+
- `config`: a configuration object that will be passed directly to the media library being used - available options are determined by the library
22+
- `media_folder` (Beta): file path where uploaded files will be saved specific to this control. Paths can be relative to a collection folder (e.g. `files` will add the file to a sub-folder in the collection folder) or absolute with reference to the base of the repo which needs to begin with `/` (e.g `/static/files` will save uploaded files to the `static` folder in a sub folder named `files`)
23+
- `choose_url`: *(default: `true`)* when set to `false`, the "Insert from URL" button will be hidden
24+
25+
**Example**
26+
27+
```yaml
28+
- label: "Manual PDF"
29+
name: "manual_pdf"
30+
widget: "file"
31+
default: "/uploads/general-manual.pdf"
32+
media_library:
33+
config:
34+
multiple: true
35+
```
3236
3337
### File Size Limit
3438
@@ -41,3 +45,7 @@ You can set a limit to as what the maximum file size of a file is that users can
4145
config:
4246
max_file_size: 1024000 # in bytes, only for default media library
4347
```
48+
49+
**Result**
50+
51+
![toggle switch](/img/widget-file.png)

‎content/docs/widgets/hidden.md‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
---
2-
label: "Hidden"
3-
title: hidden
2+
label: Hidden
3+
title: Hidden
4+
group: Widgets
5+
weight: 60
46
---
57

68
Hidden widgets do not display in the UI. In folder collections that allow users to create new items, you will often want to set a default for hidden fields, so they will be set without requiring an input.
79

8-
- **Name:** `hidden`
9-
- **UI:** none
10-
- **Data type:** any valid data type
11-
- **Options:**
12-
- `default`: accepts any valid data type; recommended for collections that allow adding new items
13-
- **Example:**
14-
```yaml
15-
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
16-
```
10+
**Name:** `hidden`
11+
12+
**UI:** none
13+
14+
**Data type:** any valid data type
15+
16+
**Options:**
17+
18+
- `default`: accepts any valid data type; recommended for collections that allow adding new items
19+
20+
**Example**
21+
22+
```yaml
23+
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
24+
```

‎content/docs/widgets/image.md‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,39 @@
11
---
2-
title: image
2+
title: Image
33
label: Image
4+
group: Widgets
5+
weight: 70
46
---
7+
58
The image widget allows editors to upload an image or select an existing one from the media library. The path to the image file will be saved to the field as a string.
69

7-
* **Name:** `image`
8-
* **UI:** file picker button opens media gallery allowing image files (jpg, jpeg, webp, gif, png, bmp, tiff, svg) only; displays selected image thumbnail
9-
* **Data type:** file path string
10-
* **Options:**
11-
12-
* `default`: accepts a file path string; defaults to null
13-
* `media_library`: settings to apply when a media library is opened by the
14-
current widget
15-
* `allow_multiple`: *(default: `true`)* when set to `false`, multiple selection will be disabled even if the media library extension supports it
16-
* `config`: a configuration object passed directly to the media library; check the documentation of your media library extension for available `config` options
17-
* `media_folder` (Beta): file path where uploaded images will be saved specific to this control. Paths can be relative to a collection folder (e.g. `images` will add the image to a sub-folder in the collection folder) or absolute with reference to the base of the repo which needs to begin with `/` (e.g `/static/images` will save uploaded images to the `static` folder in a sub folder named `images`)
18-
* `public_folder` *(defaults to the value of `media_folder`, with an opening `/` if one is not already included.)*: specifies the folder path where the files uploaded by the media library will be accessed, relative to the base of the built site. The value of the field is generated by prepending this path to the filename of the selected file.
19-
* `choose_url`: *(default: `true`)* when set to `false`, the "Insert from URL" button will be hidden
20-
* **Example:**
10+
**Name:** `image`
11+
12+
**UI:** file picker button opens media gallery allowing image files (jpg, jpeg, webp, gif, png, bmp, tiff, svg) only; displays selected image thumbnail
13+
14+
**Data type:** file path string
15+
16+
**Options**
17+
18+
- `default`: accepts a file path string; defaults to null
19+
- `media_library`: settings to apply when a media library is opened by the current widget
20+
- `allow_multiple`: *(default: `true`)* when set to `false`, multiple selection will be disabled even if the media library extension supports it
21+
- `config`: a configuration object passed directly to the media library; check the documentation of your media library extension for available `config` options
22+
- `media_folder` (Beta): file path where uploaded images will be saved specific to this control. Paths can be relative to a collection folder (e.g. `images` will add the image to a sub-folder in the collection folder) or absolute with reference to the base of the repo which needs to begin with `/` (e.g `/static/images` will save uploaded images to the `static` folder in a sub folder named `images`)
23+
- `public_folder` *(defaults to the value of `media_folder`, with an opening `/` if one is not already included.)*: specifies the folder path where the files uploaded by the media library will be accessed, relative to the base of the built site. The value of the field is generated by prepending this path to the filename of the selected file.
24+
- `choose_url`: *(default: `true`)* when set to `false`, the "Insert from URL" button will be hidden
25+
26+
**Example**
2127

2228
```yaml
23-
- label: "Featured Image"
24-
name: "thumbnail"
25-
widget: "image"
26-
choose_url: true
27-
default: "/uploads/chocolate-dogecoin.jpg"
28-
media_library:
29-
config:
30-
multiple: true
29+
- label: "Featured Image"
30+
name: "thumbnail"
31+
widget: "image"
32+
choose_url: true
33+
default: "/uploads/chocolate-dogecoin.jpg"
34+
media_library:
35+
config:
36+
multiple: true
3137
```
3238
3339
### Image Size Limit
@@ -41,3 +47,7 @@ You can set a limit to as what the maximum file size of a file is that users can
4147
config:
4248
max_file_size: 512000 # in bytes, only for default media library
4349
```
50+
51+
**Result**
52+
53+
![toggle switch](/img/widget-image.png)

0 commit comments

Comments
 (0)