Helpers

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

Library	Description
`this.$helper.clone`
`this.$helper.debounce`
`this.$helper.pad`
`this.$helper.ratio`
`this.$helper.slug`
`this.$helper.sort`
`this.$helper.string`
`this.$helper.upload`
`this.$helper.isUploadEvent`

`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) {
        // …
      }
    }
  }
}