Merge pull request #15 from rasteiner/feat/controls

Feat/controls

index.js

@@ -1,7 +1,30 @@
 panel.plugin("rasteiner/k3-pagesdisplay-section", {
-  components: {
-    "k-pagesdisplay-section": {
-      extends: "k-pages-section",
-    },
-  },
+  use: [(Vue) => {
+    const o = Vue.component("k-pages-section").options;
+    Vue.component("k-pagesdisplay-section", {
+      extends: o,
+      props: {
+        controls: {
+          type: [Boolean, String],
+          default: true,
+        },
+      },
+      methods: {
+        items(data) {
+          if(this.controls === false) return data;
+
+          data = o.methods.items.call(this, data);
+
+          if(this.controls === "flag") {
+            for(const item of data) {
+              delete item.flag.click
+              delete item.options
+            }
+          }
+
+          return data;
+        },
+      },
+    });
+  }],
 });

readme.md

@@ -54,3 +54,27 @@ sections:
     type: pagesdisplay
     query: page.siblings(false)
 ```
+
+### Disable Controls
+
+In addition to leaving the controls (the status flag and the options dropdown) visible - the default, it's possible to either hide them completely or show only the status flag. 
+
+To completely hide the controls:
+```yaml 
+sections:
+  mysection:
+    headline: Siblings
+    type: pagesdisplay
+    query: page.siblings(false)
+    controls: false
+```
+
+To show only the status flag:
+```yaml 
+sections:
+  mysection:
+    headline: Siblings
+    type: pagesdisplay
+    query: page.siblings(false)
+    controls: flag
+```

src/PagesDisplaySection.php

@@ -17,7 +17,14 @@
         },
         'query' => function (string $query = 'page.children') {
             return $query;
-        }
+        },
+        'controls' => function ($controls = true) {
+            if(!is_bool($controls) && $controls !== 'flag') {
+                throw new InvalidArgumentException('Invalid value for "controls" option. It must be either true, false or "flag"');
+            }
+
+            return $controls;
+        },
     ],
     'computed' => [
         'pages' => function () {