Reference

Guide

Helpers

The Panel bundles a few functions that help you with common tasks.

How to access helpers

The Panel exposes all shared helpers via this.$helper:

// example in the Vue component of a custom field

panel.plugin("your/pad-display-field", {
  fields: {
    "pad-display": {
      // …
      computed: {
        paddedValue() {
          return this.$helper.pad(this.value);
        }
      }
      // …
    }
  }
});

Available helpers

clone

Shorthand helper for

JSON.parse(JSON.stringify(array))

Example

let array = ["homer, "simpson"];
let cloned = this.$helper.clone(array);

debounce

Parameters

Name Description
fn Function to be debounced
delay Delay in miliseconds

Example

debounce(function (query) {
  this.search(query);
}, 200)

pad

Adds 0 to the left of the value

Parameters

Name Description
value Value to be padded
length Length of the returned string (default: 2)

Example

let money = 9;
return this.$helper.pad(money, 4);
// result: "0009"

ratio

Receive a padding percentage for a specified image ratio.

Parameters

Name Description
ratio e.g. 1/2 (default: 3/2)

Example

return this.$helper.ratio("1/2");
// result: "50%"

slug

Transform a string to a valid slug according to a specified ruleset.

Parameters

Name Description
string String to be transformed
rules Array of transformation rulesets (objects themselves)
allowed String of allowed characters

Example

return this.$helper.slug("Was für ein Spaß", [
  {
    "ü": "ue"
  },
  {
    "ß": "sz"
  }
]);
// result: "was-fuer-ein-spasz"

sort

Natural sort algorithm with unicode support

Example

return this.$helper.sort(valueA, valueB);

string

Helper that offers two methods:

ucfirst

return this.$helper.string.ucfirst("hello);
// result: "Hello"

lcfirst

return this.$helper.string.lcfirst("Hello);
// result: "hello"

upload

Helper to upload a file.

Parameters

Name Description
file File object
params Options object (see defaults below)
// available params and their default
const defaults = {
  url: "/",
  field: "file",
  method: "POST",
  accept: "text",
  attributes: {},
  complete: function() {},
  error: function() {},
  success: function() {},
  progress: function() {}
};

isUploadEvent

Checks if a javascript event is really an upload event.

Example

YourVueComponent.vue
<template>
  <div @drop="onDrop" />
</template>

<script>
export default {
  methods: {
    onDrop(event) {
      if (this.$helper.isUploadEvent(event) === true) {
        // …
      }
    }
  }
}