feature: collapsible block

.gitignore

@@ -5,4 +5,10 @@
 /node_modules
 
 # Composer files
-/vendor
+/vendor
+
+# Yarn
+yarn.lock
+
+# Parcel
+.cache

README.md

@@ -44,6 +44,10 @@ blockname:
   <img src="https://files.jongacnik.com/kirby-fields-preview-2.png" width="975" height="auto" />
 </details>
 
+### Collapse/Expand block
+
+You can collapse or expand the block preview by double clicking the block title bar.
+
 ## Notes
 
 - The block `icon` will appear in the title bar.

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "kirby-fields-block",
+  "version": "1.1.0",
+  "main": "src/index.js",
+  "repository": "https://github.com/jongacnik/kirby-fields-block.git",
+  "author": "jongacnik <jon@folderstudio.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/component-compiler-utils": "^3.2.0",
+    "parcel-bundler": "^1.12.5",
+    "vue-template-compiler": "^2.6.13"
+  },
+  "scripts": {
+    "dev": "parcel watch src/index.js --no-source-maps -d ./",
+    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
+  },
+  "dependencies": {
+    "vue": "^2.6.13",
+    "vue-hot-reload-api": "^2.3.4"
+  },
+  "posthtml": {
+    "recognizeSelfClosing": true
+  }
+}

src/FieldsBlock.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="k-block-fields-preview" @mousedown="preventSelect">
+    <k-block-title
+      :content="content"
+      :fieldset="fieldset"
+      @dblclick="toggle"
+      v-if="fieldset.label === null || fieldset.label"
+      :class="{ 'with-border': !isHidden }"
+    />
+    <k-form
+      ref="form"
+      :autofocus="true"
+      :fields="fieldset.tabs.content.fields"
+      :value="$helper.clone(content)"
+      @input="$emit('update', $event)"
+      v-if="!isHidden"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isHidden: JSON.parse(sessionStorage.getItem(`kirby.fieldsBlock.${this.$attrs.endpoints.field}.${this.$attrs.id}`))
+    }
+  },
+  methods: {
+    toggle () {
+      this.isHidden = !this.isHidden
+      sessionStorage.setItem(`kirby.fieldsBlock.${this.$attrs.endpoints.field}.${this.$attrs.id}`, this.isHidden)
+    },
+    preventSelect (event) {
+      if (event.detail > 1) {
+        event.preventDefault()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.k-block-fields-preview {
+  margin: -0.75rem;
+}
+
+.k-block-fields-preview .k-block-title {
+  padding: 0.75rem;
+  background: #f7f7f7;
+}
+
+.k-block-fields-preview .k-block-title.with-border {
+  border-bottom: 1px solid rgba(0,0,0,.1); 
+}
+
+.k-block-fields-preview .k-form {
+  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
+}
+
+/**
+ * Reset `.k-layout-column .k-empty` overrides
+ */
+
+.k-block-fields-preview .k-empty {
+  position: static !important;
+  opacity: 1 !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+  color: #777 !important;
+  border: 1px dashed #ccc !important;
+  border-radius: 1px !important;
+}
+
+.k-block-fields-preview .k-empty[data-layout="cards"] {
+  justify-content: center !important;
+}
+
+.k-block-fields-preview .k-empty[data-layout="list"] .k-icon {
+  border-right: 1px solid rgba(0,0,0,.05) !important;
+}
+</style>

src/index.js

@@ -0,0 +1,7 @@
+import FieldsBlock from "./FieldsBlock.vue"
+
+panel.plugin("jg/fields-block", {
+  blocks: {
+    fields: FieldsBlock
+  }
+})