npm package: @mtcmedia/vue-wordpress-media-library
Description: Vue JS Wordpress media library
Author: Paul McAvoy
Latest version: 1.0.0

# @mtcmedia/vue-wordpress-media-library
Vue component to allow user to access/upload files using Wordpress' build in media library. Uses draggable to allow user to re-order files when using multiple functionality

## Install to production site
```bash
npm install @mtcmedia/vue-wordpress-media-library
```

### Usage
```js
import MtcWordpressMediaLibrary from '@mtcmedia/vue-wordpress-media-library'

Vue.component('mtc-wordpress-media-library', MtcWordpressMediaLibrary)
```

Add this to your theme where you want the button to show. The condition prevents user from seeing the button who don't have permissions to upload files to your site
```php
<?php
if (current_user_can('upload_files')) {
  ?>
  <mtc-wordpress-media-library
    v-model="images"
  >
  </mtc-wordpress-media-library>
  <?php
}
?>
```

Example with custom item slot and access to slotPropItem (selected file object)
```html
<mtc-wordpress-media-library
  v-model="images"
>
  <template #item="{ slotPropItem }">
    {{ slotPropItem }}
   </template>
</mtc-wordpress-media-library>
```

<code>images</code> should equal and array of images in the following format as a minimum.
```json
const images = [{
    "alt": "Alt tag of image",
    "id": 0,
    "mime": "image/jpeg",
    "sizes": {
        "thumbnail": {
            "url": "path_to_thumbnail_image" // pass in wordpress document icon managing document files
        }
    },
    "url": "path_to_main_image"
}]
```
Add the following to your themes function file
```php
<?php
// enqueue js and css for wp media library
if (current_user_can('upload_files')) {
    add_action('wp_enqueue_scripts', 'wp_enqueue_media', 999);
}

// This limits users so that they can only see content that they have uploaded to the media library
function hideMediaFromOtherUsers($query) {
    $user_id = get_current_user_id();
    if ($user_id && !current_user_can('manage_options')) {
        $query['author'] = $user_id;
    }
    return $query;
}
add_filter('ajax_query_attachments_args', 'hideMediaFromOtherUsers');
```

### Props
The component accepts these props:

| Attribute    | Type     | Default   | Description      | Required |
| :---         | :---     | :---      | :---             | :--- |
| multiple   | Boolean  |  false  | Set to true to allow user to select more than one image | false |
| max   | Number  |  Infinity  | Define the maximum number of images that can be selected. Only useful when multiple is true | false |
| delete-image   | Boolean  |  true  | Allow user to remove images from selection | false |
| edit   | Boolean  |  false  | Allow user to make a change to selected image | false |
| imageSize   | String  |  'thumbnail'  | Image size used when displaying selected image <code>image</code> must contain this images size | false |
| resetSelection   | Boolean  |  false  | When true users selection will be cleared when they open the media library | false |
| showFilename   | Boolean  |  false  | Add filename to DOM after displayed image or can be used to display filename when file is a document | false |
| hideImage   | Boolean  |  false  | Choose to hide the image, useful if you are only managing documents and don't want to show the wordpress default icons | false |
| mimeType   | String  |  ''  | Define the mime type of valid files | false |

### Slots
The component accepts these slots:

| Name | Default | Description |
| :--- | :--- | :--- |
| item | HTML <a href="#remove-button-content">see here</a> | Markup for images that are selected from the media library. Has access to file object |
| remove-button-content | HTML <a href="#remove-button-content">see here</a> | Entire cntent of remove button |
| remove-button-icon | '&times;' | Icon within remove button |
| add-button-content | 'Select File' | Content of select file button |
| edit-button-content | 'Update File' | Content of update file button - this button shows when max number of files have been selected |

<h4 id="item">item slot default html</h3>
```html
<div class="mtc_wpml__thumbnail-image">
  <img v-if="!hideImage"
    :src="item.sizes[imageSize].url"
    :alt="item.alt">
  <span v-if="showFilename" v-html="item.filename"></span>
</div> <!-- .mtc_wpml__thumbnail-image -->
```

<h4 id="remove-button-content">remove-button-content slot default html</h3>
```html
<span class="mtc_wpml__button-text">Remove</span>
<span class="mtc_wpml__button-icon"><slot name="remove-button-icon">&times;</slot></span>
```

## Development Setup
For developing it's best to download the directory from bitbucket and use the full component directly within a wordpress theme.