Gallery Element

An element used to upload multiple images.

Examples
Options
Properties
Methods
Slots
Events

#Examples

Basic Usage

Renders a multi-image uploader.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        gallery: {
          type: 'gallery'
        }
      }
    })
  }
</script>

List View

Renders image previews as a list using view 'list'.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        gallery: {
          type: 'gallery',
          view: 'list'
        }
      }
    })
  }
</script>

Drag n Drop

Renders a gallery uploader with drag n drop area using drop option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        gallery: {
          type: 'gallery',
          drop: true
        }
      }
    })
  }
</script>

Form `data`:

Sorting

Allows to sort gallery elements with sort option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        gallery: {
          type: 'gallery',
          sort: true,
          storeFile: 'file',
          storeOrder: 'order',
          fields: {
            order: {
              type: 'meta'
            }
          }
        }
      }
    }),
  }
</script>

Custom Preview

The images have custom preview with preview slot.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        gallery: {
          type: 'gallery',
          slots: {
            preview: Vue.extend({
              props: ['el$', 'remove', 'preview'],
              template: `
              <div>
                <img :src="el$.file.preview" @click.prevent="preview" width="120" /> 
                <a href="" @click.prevent="remove">Remove</a>
              </div>
              `
            })
          }
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
storeFile	`string`	The name of child element which should contain the size of the image. Storing size, original name, extension, mime and defining fields is only possible if this one is set.
fileRules	`str\|arr`	Validation rules to be applied for the image element when using `storeFile`.
storeSize	`string`	The name of child element which should contain the size of the image.
storeOriginalName	`string`	The name of child element which should contain the original name of the image.
storeExtension	`string`	The name of child element which should contain the extension of the image.
storeMime	`string`	The name of child element which should contain the mime type of the image.
fields	`object`	Additional elements for each image. General schema rules apply.
drop	`boolean`	Whether the uploader should be a drag n drop area instead of a button.
sort	`boolean`	Whether the files can be sorted by drag n drop.
storeOrder	`string`	The name of the field which should contain the order of the files.
order	`string`	The default order direction of image list when data is loaded. Possible values: `null`, `'ASC'`, `'DESC'`.
orderBy	`string`	The image list will be ordered by this element's values.
disabled	`boolean`	Whether the field is disabled.

#Properties

Name	Type	Default	Description
children$	`object`	`{}`	Child components.
disabled	`boolean`	`false`	Whether the field is disabled.
sort	`boolean`	`false`	Whether the list items can be sorted by drag n drop.
storeOrder	`string`	`null`	The name of the element which should contain the order of the list item in case of an object list.
order	`string`	`null`	The default order direction of list items when data is loaded. Possible values: `null`, `'ASC'`, `'DESC'`.
orderBy	`string`	`null`	When using an object list the list items will be ordered by this element's values. If `storeOrder` is defined, `orderBy` will be equal to that unless specified otherwise.
instances	`array`	`[]`	Child instances.
drop	`boolean`	`false`	Determines if the element has drag n drop area instead of upload button.
lightbox$	`object`	`null`	Lightbox component which appears when an image is clicked.
prototype	`object`	-	The schema of a child.

#Methods

# .reset()

Resets the element to it's default state.

# .disable()

Disabled the field.

# .enable()

Enables the field.

# .add(data) @returns {number}

Parameters

data data : Javascript file object

Adds a file to the file list. Returns the index of the added file.

# .remove(index)

Parameters

index index : index of child to be removed.

Removes a child by its index.

#Slots

# preview

Props

el$ object : The file's element component.
remove function : Removes the image.
preview function : Opens image preview.

Custom preview for file.

# children

Props

el$ object : The element component.

Contains the children of the element.

#Events

# add(indexes)

Parameters

indexes array : index(es) of added list items.

Triggered when the user adds a new list item or .add() method is invoked.

# remove(index)

Parameters

index number : index of child to be removed.

Triggered when the user removes a list item or .remove() method is invoked.

# sort(indexes)

Parameters

indexes object : an object containing newIndex and oldIndex.

Triggered when the user changes the order of the list items.