Update Media Library Pro docs.

spatie · Jan 24, 2024 · cccf2b9 · cccf2b9
1 parent 82bd20c
commit cccf2b9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 75 deletions.
diff --git a/docs/handling-uploads-with-media-library-pro/creating-custom-react-components.md b/docs/handling-uploads-with-media-library-pro/creating-custom-react-components.md
@@ -211,12 +211,6 @@ Renders a button with an icon. Requires [icons](#icons) to be rendered on the pa
 }
 ```
 
-### useDragula
-
-[See code on GitHub](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-react/src/useDragula.ts)
-
-Custom hook to use [Dragula](https://github.com/bevacqua/react-dragula), to allow sorting of files.
-
 **Parameters**
 
 ```ts

diff --git a/docs/handling-uploads-with-media-library-pro/creating-custom-vue-components.md b/docs/handling-uploads-with-media-library-pro/creating-custom-vue-components.md
@@ -67,8 +67,6 @@ You can find a full list of available props for the renderless component [at the
 
 For extensive examples you can have a look at the source of the pre-built UI components:
 
--   [Vue 2 attachment component](https://github.com/spatie/laravel-medialibrary-pro/tree/master/resources/js/media-library-pro-vue2-attachment)
--   [Vue 2 collection component](https://github.com/spatie/laravel-medialibrary-pro/tree/master/resources/js/media-library-pro-vue2-collection)
 -   [Vue 3 attachment component](https://github.com/spatie/laravel-medialibrary-pro/tree/master/resources/js/media-library-pro-vue3-attachment)
 -   [Vue 3 collection component](https://github.com/spatie/laravel-medialibrary-pro/tree/master/resources/js/media-library-pro-vue3-collection)
 
@@ -78,7 +76,7 @@ When building your own UI component using the Media Library Pro, you can also ma
 
 ### DropZone
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/DropZone.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/DropZone.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/DropZone.vue)
 
 Renderless component that exposes some props needed to render a file dropzone. Has a scoped slot that exposes `hasDragObject`, `isDropTarget` and `isValid`.
 
@@ -94,7 +92,7 @@ props: {
 
 ### HiddenFields
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/HiddenFields.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/HiddenFields.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/HiddenFields.vue)
 
 Component that renders hidden input fields with the values of the entire MediaLibrary instance's media state. Only needed if you're planning on submitting forms traditionally (not with AJAX).
 
@@ -109,7 +107,7 @@ props: {
 
 ### ItemErrors
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/ItemErrors.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/ItemErrors.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/ItemErrors.vue)
 
 Component that renders the errors for one media object.
 
@@ -125,7 +123,7 @@ props: {
 
 ### ListErrors
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/listErrors/ListErrors.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/listErrors/ListErrors.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/listErrors/ListErrors.vue)
 
 Component that can render the MediaLibrary instance's invalid media (`mediaLibrary.state.invalidMedia`).
 
@@ -142,7 +140,7 @@ props: {
 
 ### Thumb
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/Thumb.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/Thumb.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/Thumb.vue)
 
 Component to display a file's thumbnail. If no preview for the file exists, it will attempt to display its extension. Also implements the [Uploader](#uploader) component to replace files.
 
@@ -160,7 +158,7 @@ props: {
 
 ### Uploader
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/Uploader.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/Uploader.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/Uploader.vue)
 
 Component used to upload new media objects, or to replace an existing object's file. Is used by the [Thumb](#thumb) component.
 
@@ -181,13 +179,13 @@ props: {
 
 ### Icons
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/components/Icons.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/components/Icons.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/components/Icons.vue)
 
 Component that sets svg values for the packaged icons, required if you're planning on using the [icon](#icon) component.
 
 ### Icon
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/components/Icon.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/components/Icon.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/components/Icon.vue)
 
 Renders an icon. Requires [icons](#icons) to be rendered on the page.
 
@@ -201,7 +199,7 @@ props: {
 
 ### IconButton
 
-See code on GitHub: [Vue 2](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue2/src/components/IconButton.vue) / [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/components/IconButton.vue)
+See code on GitHub: [Vue 3](https://github.com/spatie/laravel-medialibrary-pro/blob/master/resources/js/media-library-pro-vue3/src/components/IconButton.vue)
 
 Renders a button with an icon. Requires [icons](#icons) to be rendered on the page.
 

diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
@@ -3,7 +3,7 @@ title: Handling uploads with Vue
 weight: 6
 ---
 
-Media Library Pro provides beautiful UI components for Vue 2 and Vue 3. They pack a lot of features: temporary uploads, custom property inputs, frontend validation, and robust error handling.
+Media Library Pro provides beautiful UI components for Vue 3. They pack a lot of features: temporary uploads, custom property inputs, frontend validation, and robust error handling.
 
 The `MediaLibraryAttachment` component can upload one or more files with little or no extra information. The attachment component is a lightweight solution for small bits of UI like avatar fields.
 
@@ -81,11 +81,9 @@ mix.webpackConfig({
 });
 ```
 
-This will force Webpack to look in `vendor/spatie/laravel-medialibrary-pro/resources/js` when resolving imports, and allows you to shorten your import. Notice that the Vue 2 and Vue 3 components are separate components.
+This will force Webpack to look in `vendor/spatie/laravel-medialibrary-pro/resources/js` when resolving imports, and allows you to shorten your import.
 
 ```js
-import { MediaLibraryAttachment } from "media-library-pro-vue2-attachment";
-// or
 import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
 ```
 
@@ -105,23 +103,6 @@ If you're using TypeScript, you will also have to add this to your tsconfig:
 
 To use a component in your Blade templates, import the components you plan to use in your `app.js` file, and add them to your main Vue app's `components` object.
 
-**Vue 2**
-
-```js
-import Vue from "vue";
-import { MediaLibraryAttachment } from "media-library-pro-vue2-attachment";
-import { MediaLibraryCollection } from "media-library-pro-vue2-collection";
-
-new Vue({
-    el: "#app",
-
-    components: {
-        MediaLibraryAttachment,
-        MediaLibraryCollection,
-    },
-});
-```
-
 **Vue 3**
 
 ```js
@@ -362,13 +343,12 @@ The Media Library supports [custom properties](/docs/laravel-medialibrary/v11/ad
 
 Use the `fields` scoped slot to add some fields:
 
-**Vue 2**
+**Vue 3**
 
 ```html
 <media-library-collection name="images" :initial-value="{{ $images }}">
     <template
-        slot="fields"
-        slot-scope="{
+        #fields="{
             getCustomPropertyInputProps,
             getCustomPropertyInputListeners,
             getCustomPropertyInputErrors,
@@ -414,25 +394,6 @@ Use the `fields` scoped slot to add some fields:
 </media-library-collection>
 ```
 
-**Vue 3**
-
-```html
-<media-library-collection name="images" :initial-value="{{ $images }}">
-    <template
-        #fields="{
-            getCustomPropertyInputProps,
-            getCustomPropertyInputListeners,
-            getCustomPropertyInputErrors,
-            getNameInputProps,
-            getNameInputListeners,
-            getNameInputErrors,
-        }"
-    >
-        … (see Vue 2 example above)
-    </template>
-</media-library-collection>
-```
-
 When you add an image to your collection, it will look like this.
 
 ![Screenshot of custom property](/docs/laravel-medialibrary/v11/images/pro/extra.png)
@@ -443,21 +404,6 @@ When uploading a file, some properties appear by default: its extension, filesiz
 
 You can customize what is displayed here by using the `properties` scoped slot:
 
-**Vue 2**
-
-```html
-<media-library-attachment
-    name="images"
-    :initial-value="{{ $images }}"
->
-    <template slot="properties" slot-scope="{ object }">
-        <div class="media-library-property">
-            {{ object.attributes.name }}
-        </div>
-    </template>
-</media-library-collection>
-```
-
 **Vue 3**
 
 ```html