Skip to content

Commit

Permalink
Update docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
timvandijck committed Mar 19, 2024
1 parent fb05bab commit f623dd0
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ import vue from '@vitejs/plugin-vue';
export default defineConfig({
resolve: {
alias: {
'media-library-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
'media-library-pro-react-attachment': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-react-attachment',
'media-library-pro-react-collection': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-react-collection',
}
},
plugins: [
Expand Down Expand Up @@ -105,8 +106,8 @@ The most basic components have a `name` prop. This name will be used to identify
```jsx
// MyImageUploader.jsx

import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
import { MediaLibraryCollection } from "media-library-pro/media-library-pro-react-collection";
import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
import { MediaLibraryCollection } from "media-library-pro-react-collection";

export default function MyImageUploader() {
return (
Expand Down Expand Up @@ -185,7 +186,7 @@ See the [Validation rules section](#validation-rules) for a complete list of all
The components keep track of whether they're ready to be submitted, you can use this to disable a submit button while a file is still uploading or when there are frontend validation errors. This value can be tracked by passing a listener method to the `onIsReadyToSubmitChange` prop. If you submit a form while a file is uploading, Laravel will return a HTTP 500 error with an `invalid uuid` message.

```jsx
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
import { MediaLibraryAttachment } from "media-library-pro-react-attachment";

function AvatarComponent() {
const [isReadyToSubmit, setIsReadyToSubmit] = useState(true);
Expand Down Expand Up @@ -329,7 +330,7 @@ When using the components in repository that uses Inertia, the setup is very sim

```jsx
import React, { useState } from "react";
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
import { usePage } from "@inertiajs/inertia-react";
import { Inertia } from "@inertiajs/inertia";

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ import vue from '@vitejs/plugin-vue';
export default defineConfig({
resolve: {
alias: {
'media-library-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
'media-library-pro-vue3-attachment': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-attachment',
'media-library-pro-vue3-collection': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-collection',
'vue': 'vue/dist/vue.esm-bundler.js',
}
},
Expand Down Expand Up @@ -89,8 +90,8 @@ To use a component in your Blade templates, import the components you plan to us

```js
import { createApp } from "vue";
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro-vue3-collection";

createApp({
components: {
Expand Down Expand Up @@ -128,8 +129,8 @@ You may also choose to import the components on the fly in a `.vue` file.
</template>

<script>
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
export default {
components: {
Expand Down Expand Up @@ -171,8 +172,8 @@ The most basic components have a `name` prop. This name will be used to identify
</template>

<script>
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
export default {
components: {
Expand Down

0 comments on commit f623dd0

Please sign in to comment.