SignatureElement

Only allow form submission if the user verified they are not a robot.

Basic Usage

<SignatureElement> component can be used in a <Vueform> component:

vue
<template>
  <Vueform>
    <SignatureElement
      name="signature"
    />
  </Vueform>
</template>

The SignatureElement produces a png output as a Blob that gets send along with the form, when submitted. The value can be loaded back as a full URL that points to the uploaded image.

Configuration options can be passed over as regular component props. Check out Options section for available configuration options.

Options

Find below the list of options that can use to configure SignatureElement component. Options can be passed to the component via props in inline templates, or in the element's object when using schema.

modes

  • Type: array
  • Default: ["draw","type","upload"]
vue
<SignatureElement :modes="['upload', 'draw']" ... />

The available signature modes in the given order. Possible values: draw, type, upload. If only one is provided, the mode selector will become invisible. If empty it falls back to draw.

fonts

  • Type: array
  • Default: ["Caveat@400","Sacramento@400","Dancing Script@400"]
vue
<SignatureElement :fonts="['Satisfy@400', 'Zeyada@400']" ... />

The available fonts the user can choose from in type mode. If only one is provided the typeface selector will become invisible. If none is provided it will fallback to cursive font.

You can list the fonts in Font Family@weight or Font Family format. Google Fonts are automatically loaded unless autoload is disabled.

autoload

  • Type: boolean
  • Default: true
vue
<SignatureElement :autoload="false" ... />

Autoloads Google Fonts that are defined in the fonts options. If you are not planning to load Google Fonts, you might set this to false.

minFontSize

  • Type: number
  • Default: 10
vue
<SignatureElement :min-font-size="20" ... />
<SignatureElement :min-font-size="30" ... />

The minimum font size the signature text can have in type mode.

maxFontSize

  • Type: number
  • Default: 60
vue
<SignatureElement :max-font-size="50" ... />
<SignatureElement :max-font-size="90" ... />

The maximum font size the signature text can have in type mode.

colors

  • Type: array
  • Default: ["#000000","#2558b2","#f22f30"]
vue
<SignatureElement :colors="['#e81416', '#ffa500', '#faeb36', '#79c314', '#487de7', '#4b369d', '#70369d']" ... />

The available signature colors. If only one is provided the color selector will become invisible. If none is provided it will fallback to #000000.

invertColors

  • Type: array
  • Default: ["#000000"]
vue
<SignatureElement
  :colors="['#000000', '#222222', '#777777']"
  :invert-colors="['#000000', '#222222']"
... />

The colors that should be inverted in dark mode. While the color in the palette and the signature display is inverted, the final image will contain the original color.

maxWidth

  • Type: number|string
  • Default: auto
vue
<SignatureElement :max-width="300" ... />

The maximum width of the signature area in pixels. The value auto will make it 100%.

height

  • Type: number
  • Default: 160
vue
<SignatureElement :height="240" ... />

The height of the signature area in pixels.

uploadWidth

  • Type: number
  • Default: 480
vue
<SignatureElement :upload-width="600" ... />

The width (px) of the image created from the signature that will be sent when submitting the form.

uploadHeight

  • Type: number
  • Default: 160
vue
<SignatureElement :upload-height="200" ... />

The height (px) of the image created from the signature that will be sent when submitting the form.

maxSize

  • Type: number
  • Default: 2048
vue
<SignatureElement :max-size="4096" ... />

The maximum size (kB) of the selected file in upload mode.

accept

  • Type: array
  • Default: ["jpg","png","svg"]
vue
<SignatureElement :accept="['jpg', 'png']" ... />

The type of files to accept in upload mode. Possible values are: jpg, png and svg.

line

  • Type: boolean
  • Default: true
vue
<SignatureElement :line="false" ... />

Whether to show a line for the signature.

canClear

  • Type: boolean
  • Default: true
vue
<SignatureElement :can-clear="false" ... />

Whether the user can clear the signature (drawn, typed, uploaded or loaded).

canUndo

  • Type: boolean
  • Default: true
vue
<SignatureElement :can-undo="false" ... />

Whether the user can undo/redo changes in draw mode.

canDrop

  • Type: boolean
  • Default: true
vue
<SignatureElement :can-drop="false" ... />

Whether the user can drop files in upload mode.

name

  • Type: string|number
  • Default: undefined
  • Required: true

The name of the element. Does not have effect on anything.

id

  • Type: string
  • Default: null
vue
<SignatureElement id="field-id" ... />

Sets the id attribute of the signature wrapper.

readonly

  • Type: boolean|function|array|object
  • Default: false
vue
<SignatureElement :readonly="true" ... />
<SignatureElement :readonly="prop" ... /> <!-- computed / data (ref) prop -->
<SignatureElement :readonly="[['text', 'value']]" ... /> <!-- conditional -->
<SignatureElement :readonly="(el$, form$) => { return /* boolean */ }" ... />

Makes the signature pad read-only.

If can be a boolean value.

It can be a computed / data (ref) prop.

It can be an array of conditions. When all conditions are met the element will become readonly.

It can be a function that receives the el$ element instance and form$ form instance params and expected to return a boolean.

disabled

  • Type: boolean|function|array|object
  • Default: false
vue
<SignatureElement :readonly="true" ... />
<SignatureElement :disabled="prop" ... /> <!-- computed / data (ref) prop -->
<SignatureElement :disabled="[['text', 'value']]" ... /> <!-- conditional -->
<SignatureElement :disabled="(el$, form$) => { return /* boolean */ }" ... />

Makes the signature pad disabled.

If can be a boolean value.

It can be a computed / data (ref) prop.

It can be an array of conditions. When all conditions are met the element will become disabled.

It can be a function that receives the el$ element instance and form$ form instance params and expected to return a boolean.

label

  • Type: string|object|function
  • Default: null
  • Localizable: true

Sets a label for the element. Can be defined as a string, a Vue component object with a render function or as a function that receives el$ as its first a param.

Can also be defined via #label slot.

placeholder

  • Type: string|object|boolean
  • Default: null
  • Localizable: true
vue
<SignatureElement placeholder="Your signature" ... />

The placeholder of the signature space. Use false or to disable. The default value comes from the locale file (vueform.elements.signature.placeholder).

info

vue
<SignatureElement label="Info" info="Info" ... />

Renders an ElementInfo component next to the element's label. By default the icon shows the value of info when hovered, which can contain plain text or HTML. The element needs to have a label defined in order for info to be rendered.

Can be also defined via #info slot.

infoPosition

  • Type: string
  • Default: right
vue
<SignatureElement label="Top" info="Top" info-position="top" ... />
<SignatureElement label="Right" info="Right" info-position="right" ... />
<SignatureElement label="Left" info="Left" info-position="left" ... />
<SignatureElement label="Bottom" info="Bottom" info-position="bottom" ... />

Sets the position of the info tooltip.

Can be also defined via #info slot.

description

vue
<SignatureElement description="Lorem ipsum dolor sit amet" ... />

Renders the contents of description prop in the ElementDescription component below the input field. It can contain plain text or HTML.

Can be also defined via #description slot.

before

  • Type: object|string|number
  • Default: null
  • Localizable: true
vue
<SignatureElement before="Before" ... />

Renders the contents of before in a ElementText component before the input field. It can contain plain text or HTML.

Can be also defined via #before slot.

between

  • Type: object|string|number
  • Default: null
  • Localizable: true
vue
<SignatureElement description="Description" between="Between" ... />

Renders the contents of between in a ElementText component between the input field and the description. It can contain plain text or HTML.

Can be also defined via #between slot.

after

  • Type: object|string|number
  • Default: null
  • Localizable: true
vue
<SignatureElement description="Description" rules="required" after="After" ... />

Renders the contents of after in a ElementText component after the description and error. It can contain plain text or HTML.

Can be also defined via #after slot.

default

  • Type: string|number|object
  • Default: null
  • Localizable: true
vue
<SignatureElement default="/images/signature-example.png" ... />

The default value of the signature that points to an image.

formatData

  • Type: function
  • Default: null
vue
<SignatureElement :format-data="(n, v) => ({[n]: /* transformed value */ })" ... />

Formats the element's requestData.

The first param is the element's name, the second is the value. The return value should be an object, which only contains one item with the element's name as key and the transformed value as value.

formatLoad

  • Type: function
  • Default: null
vue
<SignatureElement :format-load="(v) => /* transformed value */" ... />

Formats the data being loaded to the element when using load(data, format: true). It receives the value being loaded to the element as its first param and should return the formatted value of the element.

submit

  • Type: boolean
  • Default: true
vue
<SignatureElement :submit="false" ... />

If set to false the element's data will not be included in requestData and will not be submitted.

rules

  • Type: array|string|object
  • Default: null
vue
<SignatureElement rules="required" ... />
<SignatureElement :rules="['required']" ... />

The validation rules to be applied for the element.

The list of rules can be defined as a string separated by | or as an array, where each item should be a single validation rule.

fieldName

  • Type: string
  • Default: name|label
vue
<SignatureElement field-name="Field name" rules="required" ... />

Sets the name of the field in validation rule messages.

debounce

  • Type: number
  • Default: null
vue
<SignatureElement floating="Without debounce" rules="required" ... />
<SignatureElement floating="With debounce" :debounce="500" rules="required" ... />

The milliseconds to wait before the validation triggers after the user changed the value (unless the value is empty). Applies to each validation rule.

If you only want debounce for a specific rule, you can use: rules="required:debounce=500"

Note that SignatureElement has a 500 ms debounce out of the box as the value, so this adds on top of that.

messages

  • Type: object
  • Default: {}
vue
<SignatureElement rules="required" :messages="{ required: 'Please fill in' }" ... />

Overrides the default messages for the element's validation rules. The value is an object where each key is the name of a validation rule and the value is the error message that will be displayed when the rule fails.

You can override validation messages on form level with messages.

conditions

  • Type: array
  • Default: []
vue
<!-- field1 - type 'show' -->
<TextElement name="field1" ... />

<!-- field2 - only if field1 == 'show' -->
<SignatureElement name="field2" :conditions="[['field1', 'show']]" ... />

<!-- field3 - only if field1 != 'show' -->
<SignatureElement name="field3" :conditions="[['field1', '!=', 'show']]" ... />

<!-- field4 - only if field1 == 'show' -->
<SignatureElement name="field4" :conditions="[
  (form$, el$) => form$.el$('field1')?.value === 'show'
]" ... />

Shows or hides an element based on the provided conditions.

If an element's conditions are unmet the element will be hidden and its available property will become false. If hidden, its value will not be part of requestData.

Conditions can be provided as an array, where each item has to be either an array or a function. The element will only become available if all the conditions are fulfilled.

If a condition is provided as an array, the first value must be the path of an other field which value should be watched. The second is an operator that defines the type of comparison. The third is the expected value of the other field.

vue
<SignatureElement name="field" :conditions="[['other_field', '==', 'expected_value']]" ... />

Hint: In case you want to check for equality you might leave the operator and pass the expected value as the second param:

vue
<SignatureElement name="field" :conditions="[['other_field', 'expected_value']]" ... />

Available operators:

  • == - expect equality
  • != - expect inequality
  • > - expect the other element's value(s) to be higher
  • >=- expect the other element's value(s) to be higher or equal
  • < - expect the other element's value(s) to be lower
  • <= - expect the other element's value(s) to be lower or equal
  • ^ - expect the other element's value to start with
  • $ - expect the other element's value to end with
  • * - expect the other element's value to contain
  • in - expect to be among an array of values
  • not_in - expect not to be among an array of values
  • today - expect to be today
  • before - expect to be before a date (value can be a YYYY-MM-DD date string or today)
  • after - expect to be after a date (value can be a YYYY-MM-DD date string or today)

The expected value can also be defined as an array in which case any of its values will fulfill the condition.

Conditions can be defined with OR relation or as function. Learn more about conditions here.

columns

  • Type: object|string|number
  • Default: null
vue
<SignatureElement label="Label" :columns="{ container: 12, label: 3, wrapper: 12 }" ... />

Sets the size of the container, label and wrapper using the theme's grid system, where the:

  • container is the outermost DOM that contains both label and wrapper
  • label contains the label
  • wrapper contains the input field.
container: 12
label: 3
wrapper: 12

The value of container defines the size of the element's container. 12 will result in full width, 6 in half, 4 in third and so on.

The value of label defines the amount of space the label should take up within the container. If the container is 12 and label is 6 the label is going to take up half the space and the input field will the other half (which is calculated automatically). If the container is 6 and label is 6, the label will only take up one forth and the input field the rest. In case the label has full width (12) the input field will also take up full space instead of becoming zero.

The value of wrapper defines the size of the input field wrapper within the space left for it in the container after subtracting the size of the label. If the container is 12 and label is 4 the space left for the input field is 8. In this case if the wrapper value is 12 it will take up the full space left for it (which is 8) while if it is changed to 6 it will only take up half the space left for it (4):

vue
<SignatureElement label="Label" :columns="{ container: 12, label: 4, wrapper: 12 }" ... />
<SignatureElement label="Label" :columns="{ container: 12, label: 4, wrapper: 6 }" ... />

Note that while the size of the input field wrapper changes, the size of extras like a description or error won't be limited to the wrapper's space. Instead it will take up the full space in the container left after subtracting the size of the label:

vue
<SignatureElement
  label="Label"
  :columns="{ container: 12, label: 4, wrapper: 6 }" 
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
... />

You can set the value of columns as a number in which case the container will receive its value without affecting the default settings of label and wrapper:

vue
<SignatureElement label="Label" :columns="6" ... /> <!-- { container: 6, label: 3, wrapper: 12 } -->

You can as well define column values for different breakpoints using the theme system's breakpoints like sm, md, etc. as keys:

vue
<SignatureElement label="Label" :columns="{
  xs: { container: 12, label: 12, wrapper: 12 },
  sm: { container: 12, label: 4, wrapper: 12 },
  md: 12,
  lg: { container: 12, label: 2, wrapper: 12 }
}" ... />

Default column sizes can be defined globally in vueform.config.js or on form level using columns.

inline

  • Type: boolean
  • Default: false
vue
<SignatureElement :inline="true" ... />

Renders the element and all of its components in a single <span> without applying columns.

size

  • Type: string
  • Default: undefined
vue
<SignatureElement size="sm" ... />
<SignatureElement ... /> <!-- Default size: 'md' -->
<SignatureElement size="lg" ... />

The size of the element and its child components. Currently all sizes are displayed the same for SignatureElement.

view

  • Type: string
  • Default: undefined
vue
<SignatureElement view="alt" ... />

The name of the view to be used for the element and by default for its child components. If undefined the default view will be used. Child component views can be overridden with views option.

Learn more about views here.

views

  • Type: object
  • Default: {}
vue
<SignatureElement :views="{
  ComponentName: 'alt'
}" ... />

The name of the views for the child components.

Learn more about views here.

addClasses

  • Type: object|function
  • Default: {}
vue
<SignatureElement :add-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Adds classes to any component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :add-classes="(form$) => ({
  ComponentName: {
    classname: [
      { 'class-value': form$.el$('other_field')?.value === 'some_value' }
    ],
  }
})" ... />

Learn more about adding classes here.

addClass

  • Type: array|object|string|function
  • Default: null
vue
<SignatureElement :add-class="{
  classname: 'class-value',
  classname: ['class-value'],
  classname: [{'class-value': true}],
}" ... />

Adds classes to any of SignatureElement component's class names. Classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :add-class="(form$) => ({
  classname: [
    { 'class-value': form$.el$('other_field')?.value === 'some_value' }
  ],
})" ... />

Learn more about adding classes here.

removeClasses

  • Type: object|function
  • Default: {}
vue
<SignatureElement :remove-classes="{
  ComponentName: {
    classname: ['class-value-1', 'class-value-2']
  }
}" ... />

Removes classes from any class names of any components. The classes to be removed must be listed in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :remove-classes="(form$) => ({
  ComponentName: {
    classname: form$.el$('other_field')?.value === 'some_value'
      ? ['class-value-1', 'class-value-2']
      : [],
  }
})" ... />

Learn more about removing classes here.

removeClass

  • Type: array|object|function
  • Default: null
vue
<SignatureElement :remove-class="{
  classname: ['class-value-1', 'class-value-2']
}" ... />

Removes classes from any of SignatureElement component's class names. The classes to be removed must be listed in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :remove-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value'
    ? ['class-value-1', 'class-value-2']
    : [],
})" ... />

Learn more about removing classes here.

replaceClasses

  • Type: object|function
  • Default: {}
vue
<SignatureElement :replace-classes="{
  ComponentName: {
    classname: {
      'from-class': 'to-class',
      'from-class': ['to-class'],
      'from-class': [{'to-class': true}],
    }
  }
}" ... />

Replaces classes of any class names of any component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :replace-classes="(form$) => ({
  ComponentName: {
    classname: form$.el$('other_field')?.value === 'some_value' ? {
      'from-class': 'to-class'
    } : {},
  }
})" ... />

Learn more about replacing classes here.

replaceClass

  • Type: object|function
  • Default: null
vue
<SignatureElement :replace-class="{
  classname: {
    'from-class': 'to-class',
    'from-class': ['to-class'],
    'from-class': [{'to-class': true}],
  }
}" ... />

Replaces the classes of any class names of SignatureElement component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :replace-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value' ? {
    'from-class': 'to-class'
  } : {},
})" ... />

Learn more about replacing classes here.

overrideClasses

  • Type: object|function
  • Default: {}
vue
<SignatureElement :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :override-classes="(form$) => ({
  ComponentName: form$.el$('other_field')?.value === 'some_value' ? {
    classname: 'class-value'
  } : {}
})" ... />

Learn more about overriding classes here.

overrideClass

  • Type: array|object|string|function
  • Default: null
vue
<SignatureElement :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any of SignatureElement component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

vue
<SignatureElement :override-class="(form$) => (form$.el$('other_field')?.value === 'some_value' ? {
  classname: 'class-value'
} : {})" ... />

Learn more about overriding classes here.

templates

  • Type: object
  • Default: {}
vue
<template>
  <div id="app">
    <Vueform>
      <SignatureElement :templates="{ ElementError }" ... />
    </Vueform>
  </div>
</template>

<script>
import { markRaw } from 'vue'
import CustomElementError from './CustomElementError.vue'

export default {
  data() {
    return {
      ElementError: markRaw(CustomElementError),
    }
  }
}
</script>

Overrides templates used by the component.

Learn more about overriding templates here.

presets

  • Type: array
  • Default: []
vue
<SignatureElement :presets="['preset1', 'preset2']" ... />

The presets to be applied for the component.

Learn more about presets classes here.

slots

  • Type: object
  • Default: {}
vue
<script>
import { Vueform, useVueform } from '@vueform/vueform';
import CustomDescriptionSlot from 'path/to/CustomDescriptionSlot.vue';

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 'signature',
          slots: {
            label: '<span>Label</span>',
            description: CustomDescriptionSlot,
          }
        }
      }
    }
  })
}
</script>

With this option you can define slot values in a schema based form that you would normally just write inline. The value of a slot can be a plain string, HTML or a component with render function.

While this option can be also used in inline forms, it's primarily intended for schema based forms.

Properties

Properties include data, computed and inject properties of the component. You can use them by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.

mode$

  • Type: ElementAddonOptions
  • Group: data

The signature mode selector.

font$

  • Type: ElementAddonOptions
  • Group: data

The font style selector.

input$

  • Type: HTMLInputElement
  • Group: data

The input field when mode is type.

preview$

  • Type: HTMLCanvasElement
  • Group: data

The canvas that shows the preview of an uploaded signature when mode is upload.

pad$

  • Type: HTMLCanvasElement
  • Group: data

The canvas that allows drawning signature when mode is draw.

file$

  • Type: HTMLInputElement
  • Group: data

The file input field when mode is upload (it's invisible).

upload$

  • Type: HTMLElement
  • Group: data

The DOM that contains upload related parts.

uploadButton$

  • Type: HTMLElement
  • Group: data

The upload button.

mode

  • Type: string
  • Group: data

The current signature mode (draw, type or upload).

fontFamily

  • Type: string
  • Group: data

The current font family.

fontWeight

  • Type: string
  • Group: data

The current font weight.

color

  • Type: string
  • Group: data

The hex code of the current signature color.

text

  • Type: string
  • Group: data

The input value used when mode is type.

fontSize

  • Type: number
  • Group: data

The current font size.

pad

  • Type: object
  • Group: data

The Signature Pad instance.

image

  • Type: File
  • Group: data

The file (image) selected by the user when mode is upload.

created

  • Type: boolean
  • Group: data

Whether the image preview is already created when mode is upload.

creating

  • Type: boolean
  • Group: data

Whether the image preview is being created when mode is upload.

dragging

  • Type: boolean
  • Group: data

Whether a file is being dragged over the element when mode is upload.

drawn

  • Type: boolean
  • Group: data

Whether the canvas contains any drawn signature when mode is draw.

drawing

  • Type: boolean
  • Group: data

Whether a signature is currently being drawn when mode is draw.

redos

  • Type: array
  • Group: data

The list of available redos.

undosLeft

  • Type: number
  • Group: data

The number available undos.

width

  • Type: number
  • Group: data

The current width of the signature element.

lastWidth

  • Type: number
  • Group: data

The last width of the element.

aria

  • Type: object
  • Group: computed

The aria-* attributes of the input.

Placeholder

  • Type: string
  • Group: computed

The localized placeholder of the element.

isReadonly

  • Type: boolean
  • Group: computed

Whether the element is readonly.

fontFamilies

  • Type: array
  • Group: computed

The available font families.

fontWeights

  • Type: array
  • Group: computed

The available font weights.

processing

  • Type: boolean
  • Group: computed

Whether the uploaded file is being processed for preview.

droppable

  • Type: boolean
  • Group: computed

Whether drop is enabled and browser supports dragging.

resolvedModes

  • Type: array
  • Group: computed

The list of modes formatted for mode selector.

resolvedFonts

  • Type: array
  • Group: computed

The list of fonts formatted for fonts selector.

fileAccept

  • Type: string
  • Group: computed

The list of MIME types formatted for the file input attribute.

showLine

  • Type: boolean
  • Group: computed

Whether the signature line should be shown.

showInput

  • Type: boolean
  • Group: computed

Whether the signature text input should be shown.

showPlaceholder

  • Type: boolean
  • Group: computed

Whether the signature placeholder should be shown.

showUploadContainer

  • Type: boolean
  • Group: computed

Whether the upload container should be shown.

showUpload

  • Type: boolean
  • Group: computed

Whether the file upload controllers should be shown.

showPreview

  • Type: boolean
  • Group: computed

Whether file upload preview should be shown.

showPad

  • Type: boolean
  • Group: computed

Whether signature draw pad should be shown.

showUndos

  • Type: boolean
  • Group: computed

Whether undo and redo buttons should be shown.

showColors

  • Type: boolean
  • Group: computed

Whether color selector should be shown.

showModes

  • Type: boolean
  • Group: computed

Whether mode selector should be shown.

showFonts

  • Type: boolean
  • Group: computed

Whether font selector should be shown.

showClear

  • Type: boolean
  • Group: computed

Whether clear button should be shown.

tabindex

  • Type: number|undefined
  • Group: computed

The tabindex of focusable DOM parts.

placeholderText

  • Type: string
  • Group: computed

The text of the placeholder.

dndText

  • Type: string
  • Group: computed

The text of the drag and drop area.

uploadButtonText

  • Type: string
  • Group: computed

The text of the upload button.

imgAltText

  • Type: string
  • Group: computed

The text of the img alt attribute.

imgTitleText

  • Type: string
  • Group: computed

The text of the img title attribute.

fontText

  • Type: string
  • Group: computed

The current text of font selector options.

undoText

  • Type: string
  • Group: computed

The undo button's title.

redoText

  • Type: string
  • Group: computed

The redo button's title.

modeSelectorAria

  • Type: object
  • Group: computed

The aria attributes of the mode selector.

fontSelectorAria

  • Type: object
  • Group: computed

The aria attributes of the font selector.

wrapperAriaLabel

  • Type: string
  • Group: computed

The aria label of the signature wrapper.

inputAriaLabel

  • Type: string
  • Group: computed

The aria label of the text input field.

padAriaLabel

  • Type: string
  • Group: computed

The aria label of the signature pad.

colorAriaLabel

  • Type: string
  • Group: computed

The aria label of a color.

clearAriaLabel

  • Type: string
  • Group: computed

The aria label of the clear button.

padWidth

  • Type: number
  • Group: computed

The width of signature pad.

padHeight

  • Type: number
  • Group: computed

The height of signature pad.

padStyle

  • Type: object
  • Group: computed

The style attributes of the signature pad.

wrapperStyle

  • Type: object
  • Group: computed

The style attributes of the signature wrapper.

inputStyle

  • Type: object
  • Group: computed

The style attributes of the signature input when mode is type.

lineStyle

  • Type: object
  • Group: computed

The style attributes of the signature line.

isRequired

  • Type: boolean
  • Group: computed

Whether the element is required (has required rule).

isDefault

  • Type: boolean
  • Group: computed

Whether the element has its default value.

uploaded

  • Type: boolean
  • Group: computed

Whether a signature (as URL) was loaded to the element.

value

  • Type: any
  • Group: computed

The value of the element.

model

  • Type: any
  • Group: computed

Intermediary value between element's value and field's v-model. It is required when we need to transform the value format between the element and its field.

data

  • Type: object
  • Group: computed

The value of the element in {[name]: value} value format. This gets merged with the parent component's data.

requestData

  • Type: object
  • Group: computed

Same as data property except that it only includes the element's value if submit is not disabled and available is true (has no conditions or they are fulfilled).

empty

  • Type: boolean
  • Group: computed

Whether the element has no value filled in.

path

  • Type: string
  • Group: computed

The path of the element using dot . syntax.

dataPath

  • Type: string
  • Group: computed

The path of the element's data using dot . syntax.

parent

  • Type: VNode
  • Group: computed

The parent component of the element.

validated

  • Type: boolean
  • Group: computed

Whether the element was already validated at least once.

invalid

  • Type: boolean
  • Group: computed

Whether the element has any failing rules.

dirty

  • Type: boolean
  • Group: computed

Whether the element's value was modified.

pending

  • Type: boolean
  • Group: computed

Whether the element has any async rules in progress.

busy

  • Type: boolean
  • Group: computed

Whether the element is pending.

messageBag

  • Type: MessageBag
  • Default: MessageBag
  • Group: data

Instance of MessageBag service. Custom errors and messages can be added.

errors

  • Type: array
  • Group: computed

All the errors of MessageBag.

error

  • Type: string
  • Group: computed

The first error of MessageBag.

available

  • Type: boolean
  • Group: computed

Whether no conditions are defined or they are all fulfilled.

hidden

  • Type: boolean
  • Default: false
  • Group: data

Whether the element was hidden programmatically with show() or hide() methods.

visible

  • Type: boolean
  • Group: computed

Whether the element is visible. It's false when available or active is false or hidden is true.

focused

  • Type: boolean
  • Group: data

Whether the element is focused.

isDisabled

  • Type: boolean
  • Group: computed

Whether the element is disabled.

isSuccess

  • Type: boolean
  • Group: computed

Whether the element has been filled in successfully.

isDanger

  • Type: boolean
  • Group: computed

Whether the element has errors.

container

  • Type: HTMLElement
  • Group: data

The ref to the outermost DOM of the element.

input

  • Type: HTMLElement
  • Group: data

The main input field of the element.

fieldId

  • Type: string
  • Group: computed

The id of the input field. If id is not provided path will be used.

hasLabel

  • Type: boolean
  • Group: computed

Whether the element has a label option, a #label slot or Vueform component's forceLabels option is true.

Size

  • Type: string
  • Group: computed

The resolved size of the element and all of its child components.

View

  • Type: string
  • Group: computed

The name of the resolved view for the component and the default view for its child components. Child component views can be overridden with views option. This one should be used to determine the component's view in class functions.

template

  • Type: object
  • Group: computed

The component's template.

classes

  • Type: object
  • Group: computed

The component's classes.

theme

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$

  • Type: Vueform
  • Group: inject

The root form's component.

el$

  • Type: VueformElement
  • Group: computed

The element's component.

mounted

  • Type: boolean
  • Default: true
  • Group: data

Whether the element has been already mounted.

Methods

The methods of the component that you can use by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.

initPad

  • Returns: void

Initalizes the Signature Pad.

resizePad

  • Returns: void

Resizes the signature pad to the current max width and clears any drawings.

drawingToImage

  • Returns: void

Sets the element value as Blob from the current drawing.

typingToImage

  • Returns: void

Sets the element value as Blob from the currently typed signature.

uploadToImage

  • Returns: void

Sets the element value as Blob from the currently uploaded signature.

undo

  • Returns: void

Undoes the last drawing when mode is draw.

redo

  • Returns: void

Redoes the last drawing when mode is draw.

clearSignature

  • Returns: void

Clears the signature in all forms (drawn, typed, uploaded, loaded).

clearDrawnSignature

  • Returns: void

Clears the drawn signature.

loadFonts

  • Returns: void

Loads Google Fonts dynamically by adding <link> tags to <head>.

setDrawColor

  • Returns: void

Sets the drawing color of the signature pad.

adjustFontSize

  • Returns: void

Adjusts the typed signature's font size to fit into the input without overflow until minSize or maxSize is reached.

hexToRgb

  • Arguments:
    • {string} hex* - the color in HEX format
  • Returns: string

Converts a HEX color to RGB.

checkFileExt

  • Arguments:
    • {File} file* - the file to check
  • Returns: boolean

Checks if a file complies with accept list and throws an alert if not.

checkFileSize

  • Arguments:
    • {File} file* - the file to check
  • Returns: boolean

Checks if a file is under the allowed maxSize and throws an alert if not.

setWidth

  • Returns: void

Sets the width to the current element width.

setLastWidth

  • Returns: void

Sets the lastWidth to the current element width.

setDefaultMode

  • Returns: void

Sets the mode to the first available mode from modes. If none found, draw will be set.

setDefaultFont

  • Returns: void

Sets the fontFamily and fontWeight to the first available from fonts. If none found, cursive and 400 will be set.

setDefaultColor

  • Returns: void

Sets the color to the first available color from colors. If none found, #000000 will be set.

setFont

  • Arguments:
  • Returns: void

Sets the fontFamily and fontWeight by the index of a font from fonts.

handleInput

  • Arguments:
    • {Event} e* - the Event object
  • Returns: void

Handles the input event of the input field.

handleModeSelect

  • Arguments:
  • Returns: void

Handles the mode select.

handleColorSelect

  • Arguments:
    • {string} value* - the color to select (HEX)
  • Returns: void

Handles the color select.

handleFontSelect

  • Arguments:
  • Returns: void

Handles the font select.

handleClear

  • Returns: void

Handle the clear button action.

handleUndo

  • Returns: void

Handles the undo button action.

handleRedo

  • Returns: void

Handles the redo button action.

handleSelectClick

  • Returns: void

Handles the file select button action.

handleFileSelect

  • Returns: void

Handles the file selection.

handleDrop

  • Arguments:
    • {Event} e* - the Event object
  • Returns: void

Handles the drop event.

handleMouseLeave

  • Returns: void

Handles the mouse leave event of the wrapper.

handleResize

  • Returns: void

Handles the window resize event.

clearMessages

  • Returns: void

Clears the manually added messages from the messageBag.

load

  • Arguments:
    • {any} value* - the value to be loaded
    • {boolean} format* - whether the loaded value should be formatted with formatLoad before setting the value of the element (default: false)
  • Returns: void

Loads value to the element using optional formatLoad formatter. This is the method that gets called for each element when loading data to the form with format: true.

update

  • Arguments:
    • {any} value* - the value to be set
  • Returns: void

Updates the value of the element similarly to load, only that it can't format data.

clear

  • Returns: void

Clears the element's value.

reset

  • Returns: void

Resets the element's value to default (or empty if default is not provided). Also resets all the validation state for the element.

disable

  • Returns: void

Disables the element.

enable

  • Returns: void

Enables the element even if it is disabled by disabled option.

on

  • Arguments:
    • {string} event* - name of the event to listen for
    • {function} callback* - callback to run when the event is triggered
  • Returns: void

Adds a listener for an event.

off

  • Arguments:
    • {string} event* - name of the event to remove
  • Returns: void

Removes all listeners for an event.

fire

  • Arguments:
    • {any} args* - list of arguments to pass over to the event callback
  • Returns: void

Fires and emits an event.

validate

  • Returns: Promise

Checks each validation rule for the element (async).

clean

  • Returns: void

Removes the element's dirty state.

resetValidators

  • Returns: void

Sets the validators to default state.

reinitValidation

  • Returns: void

Re-initializes validators when rules have changed.

hide

  • Returns: void

Hides the element.

show

  • Returns: void

Shows the element if it was hidden with hide() method.

Events

With events you can subscribe to different events broadcasted by the element. It can be used inline as regular Vue event listeners with @event format. In schema it can be used in PascalCase format prefixed with on (eg. onChange).

vue
<template>
  <Vueform>
    <SignatureElement @{eventName}="handler" ... />
  </Vueform>
</template>
vue
<script>
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 'signature',
          on{EventName}() {
            // ...
          }
        }
      }
    }
  })
}
</script>

You can also use on(event, callback) method to subscribe to events.

change

  • Params:
    • {string} newValue - the new value
    • {string} oldValue - the old value
    • {component} el$ - the element's component

Triggered when the element's value is changed.

beforeCreate

  • Params:
    • {component} el$ - the element's component

Triggered in beforeCreate hook.

created

  • Params:
    • {component} el$ - the element's component

Triggered in created hook.

beforeMount

  • Params:
    • {component} el$ - the element's component

Triggered in beforeMount hook.

mounted

  • Params:
    • {component} el$ - the element's component

Triggered in mounted hook.

beforeUpdate

  • Params:
    • {component} el$ - the element's component

Triggered in beforeUpdate hook.

updated

  • Params:
    • {component} el$ - the element's component

Triggered in updated hook.

beforeUnmount

  • Params:
    • {component} el$ - the element's component

Triggered in beforeUnmount (or beforeDestroy in Vue 2) hook.

unmounted

  • Params:
    • {component} el$ - the element's component

Triggered in unmounted (or destroyed in Vue 2) hook.

Slots

Slots can be used inline or in slots option object when used in schema:

vue
<template>
  <Vueform>
    <SignatureElement ... >
      <template #{slot-name}="scope">
        <!-- ... --->
      </template>
    </SignatureElement>
  </Vueform>
</template>
vue
<script>
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 'signature',
          slots: {
            {slotName}: // implementation
          }
        }
      }
    }
  })
}
</script>

label

  • Scope:
    • {component} el$ - the element's component

Renders a label for the element in ElementLabel component.

info

  • Scope:
    • {component} el$ - the element's component

Renders an info icon in ElementInfo component next the the element label. When the icon is hovered it shows the content of this slot. The element needs to have a label to render this.

required

description

  • Scope:
    • {component} el$ - the element's component

Renders description for the element in ElementDescription component.

before

  • Scope:
    • {component} el$ - the element's component

Renders an ElementText component before the input field.

between

  • Scope:
    • {component} el$ - the element's component

Renders an ElementText component after the input field and before description.

after

  • Scope:
    • {component} el$ - the element's component

Renders an ElementText component after the description and error.

addon-before

  • Scope:
    • {component} el$ - the element's component

Prepends an addon to the input field.

addon-after

  • Scope:
    • {component} el$ - the element's component

Appends an addon to the input field.

👋 Hire Vueform team for form customizations and developmentLearn more