Merge pull request #6160 from getkirby/fix/5100-disabled-blocks

Consistent disabled blocks

panel/lab/components/block/1_block/index.vue

@@ -30,5 +30,8 @@
 				:is-selected="true"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Disabled">
+			<k-block :disabled="true" :fieldset="{ icon: 'image', label: 'Image' }" />
+		</k-lab-example>
 	</k-lab-examples>
 </template>

panel/lab/components/block/3_figure/index.vue

@@ -7,6 +7,14 @@
 				empty-text="Select an image …"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Empty & disabled">
+			<k-block-figure
+				:disabled="true"
+				:is-empty="true"
+				empty-icon="image"
+				empty-text="Select an image …"
+			/>
+		</k-lab-example>
 		<k-lab-example label="Image">
 			<k-block-figure>
 				<k-image-frame

panel/lab/components/blocks/code/index.php

@@ -1,5 +1,12 @@
 <?php
 
+use Kirby\Cms\Fieldsets;
+
+$fieldset = Fieldsets::factory()->get('code');
+$defaults = $fieldset->form($fieldset->fields())->data(true);
+
 return [
-	'docs' => 'k-block-type-code',
+	'docs'     => 'k-block-type-code',
+	'defaults' => $defaults,
+	'fieldset' => $fieldset->toArray(),
 ];

panel/lab/components/blocks/code/index.vue

@@ -1,11 +1,32 @@
 <template>
 	<k-lab-examples>
 		<k-lab-example label="Default">
-			<k-block type="code" />
+			<k-block
+				:content="content"
+				:fieldset="fieldset"
+				type="code"
+				@update="update"
+			/>
 		</k-lab-example>
-		<k-lab-example label="With Fieldset">
-			<k-block :content="content" :fieldset="fieldset" :is-editable="true" :is-last-selected="true" :is-selected="true"
-				type="code" @update="update" />
+		<k-lab-example label="Selected">
+			<k-block
+				:content="content"
+				:fieldset="fieldset"
+				:is-editable="true"
+				:is-last-selected="true"
+				:is-selected="true"
+				type="code"
+				@update="update"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Disabled">
+			<k-block
+				:content="content"
+				:disabled="true"
+				:fieldset="fieldset"
+				type="code"
+				@update="update"
+			/>
 		</k-lab-example>
 		<k-lab-example label="Output">
 			<k-code>{{ content }}</k-code>
@@ -14,50 +35,23 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				content: {
-					code: "",
-					language: "",
-				},
+export default {
+	props: {
+		defaults: Object,
+		fieldset: Object
+	},
+	data() {
+		return {
+			content: this.defaults
+		};
+	},
+	methods: {
+		update(content) {
+			this.content = {
+				...this.content,
+				...content
 			};
-		},
-		computed: {
-			fieldset() {
-				return {
-					icon: "code",
-					name: "Code",
-					tabs: {
-						main: {
-							fields: {
-								language: {
-									label: "Level",
-									type: "select",
-									options: [
-										{ text: "PHP", value: "php" },
-										{ text: "HTML", value: "html" },
-										{ text: "CSS", value: "css" },
-									],
-								},
-								text: {
-									label: "Text",
-									type: "writer",
-									placeholder: "Heading …",
-								},
-							},
-						},
-					},
-				};
-			},
-		},
-		methods: {
-			update(content) {
-				this.content = {
-					...this.content,
-					...content,
-				};
-			},
-		},
-	};
+		}
+	}
+};
 </script>

panel/lab/components/blocks/default/index.vue

@@ -3,5 +3,29 @@
 		<k-lab-example label="Default">
 			<k-block type="default" />
 		</k-lab-example>
+		<k-lab-example label="Disabled">
+			<k-block :disabled="true" type="default" />
+		</k-lab-example>
+		<k-lab-example label="Output">
+			<k-code>{{ content }}</k-code>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			content: {}
+		};
+	},
+	methods: {
+		update(content) {
+			this.content = {
+				...this.content,
+				...content
+			};
+		}
+	}
+};
+</script>

panel/lab/components/blocks/fields/index.vue

@@ -1,37 +1,107 @@
 <template>
 	<k-lab-examples>
 		<k-lab-example label="Default">
-			<k-block type="fields" />
+			<k-block
+				:content="content"
+				:fieldset="fieldset"
+				type="fields"
+				@update="update"
+			/>
 		</k-lab-example>
 		<k-lab-example label="Tabs">
-			<k-block type="fields" :fieldset="fieldsetWithTabs" />
+			<k-block
+				:content="content"
+				:fieldset="fieldsetWithTabs"
+				type="fields"
+				@update="update"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Selected">
+			<k-block
+				:content="content"
+				:fieldset="fieldsetWithTabs"
+				:is-editable="true"
+				:is-last-selected="true"
+				:is-selected="true"
+				type="fields"
+				@update="update"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Disabled">
+			<k-block
+				:content="content"
+				:disabled="true"
+				:fieldset="fieldsetWithTabs"
+				type="fields"
+				@update="update"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Output">
+			<k-code>{{ content }}</k-code>
 		</k-lab-example>
 	</k-lab-examples>
 </template>
 
 <script>
 export default {
+	data() {
+		return {
+			content: {
+				name: null,
+				email: null,
+				toggle: false
+			}
+		};
+	},
 	computed: {
+		contentTab() {
+			return {
+				name: "content",
+				label: "Content",
+				fields: {
+					name: {
+						label: "Name",
+						type: "text",
+						width: "1/2"
+					},
+					email: {
+						label: "Email",
+						type: "email",
+						width: "1/2"
+					}
+				}
+			};
+		},
 		fieldset() {
 			return {
 				name: "Test",
+				wysiwyg: true,
+				tabs: {
+					content: this.contentTab
+				}
 			};
 		},
 		fieldsetWithTabs() {
 			return {
 				...this.fieldset,
 				tabs: {
-					content: {
-						name: "content",
-						label: "Content",
-					},
-					settings: {
-						name: "settings",
-						label: "Settings",
-					},
-				},
+					content: this.contentTab,
+					settings: this.settingsTab
+				}
 			};
 		},
-	},
+		settingsTab() {
+			return {
+				name: "settings",
+				label: "Settings",
+				fields: {
+					toggle: {
+						label: "Setting",
+						type: "toggle"
+					}
+				}
+			};
+		}
+	}
 };
 </script>

panel/lab/components/blocks/gallery/index.php

@@ -1,5 +1,12 @@
 <?php
 
+use Kirby\Cms\Fieldsets;
+
+$fieldset = Fieldsets::factory()->get('gallery');
+$defaults = $fieldset->form($fieldset->fields())->data(true);
+
 return [
-	'docs' => 'k-block-type-gallery',
+	'docs'     => 'k-block-type-gallery',
+	'defaults' => $defaults,
+	'fieldset' => $fieldset->toArray(),
 ];

panel/lab/components/blocks/gallery/index.vue

@@ -1,7 +1,57 @@
 <template>
 	<k-lab-examples>
 		<k-lab-example label="Default">
-			<k-block type="gallery" />
+			<k-block
+				:content="content"
+				:fieldset="fieldset"
+				type="gallery"
+				@update="update"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Selected">
+			<k-block
+				:content="content"
+				:fieldset="fieldset"
+				:is-editable="true"
+				:is-last-selected="true"
+				:is-selected="true"
+				type="gallery"
+				@update="update"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Disabled">
+			<k-block
+				:content="content"
+				:disabled="true"
+				:fieldset="fieldset"
+				type="gallery"
+				@update="update"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Output">
+			<k-code>{{ content }}</k-code>
 		</k-lab-example>
 	</k-lab-examples>
 </template>
+
+<script>
+export default {
+	props: {
+		defaults: Object,
+		fieldset: Object
+	},
+	data() {
+		return {
+			content: this.defaults
+		};
+	},
+	methods: {
+		update(content) {
+			this.content = {
+				...this.content,
+				...content
+			};
+		}
+	}
+};
+</script>

panel/lab/components/blocks/heading/index.php

@@ -1,5 +1,12 @@
 <?php
 
+use Kirby\Cms\Fieldsets;
+
+$fieldset = Fieldsets::factory()->get('heading');
+$defaults = $fieldset->form($fieldset->fields())->data(true);
+
 return [
-	'docs' => 'k-block-type-heading',
+	'docs'     => 'k-block-type-heading',
+	'defaults' => $defaults,
+	'fieldset' => $fieldset->toArray(),
 ];