Merge pull request #3011 from mervekaraman/master

Import page re-design

app/Http/Controllers/Common/Import.php

@@ -48,6 +48,8 @@ class Import extends Controller
             $form_params['url'] = $path . '/import';
         }
 
-        return view('common.import.create', compact('group', 'type', 'path', 'route', 'form_params', 'title_type', 'sample_file'));
+        $document_link = 'https://akaunting.com/hc/docs/import-export/';
+
+        return view('common.import.create', compact('group', 'type', 'path', 'route', 'form_params', 'title_type', 'sample_file', 'document_link'));
     }
 }

app/View/Components/Form/Group/Import.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\View\Components\Form\Group;
+
+use App\Abstracts\View\Components\Form;
+
+class Import extends Form
+{
+    public $type = 'file';
+
+    public $formGroupClass = 'sm:col-span-3';
+
+    public $custom_attributes = [
+        'dropzone-class' => 'form-file dropzone-column sm:w-1/2 h-32.5',
+    ];
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        if (! empty($this->options)) {
+            $options = [];
+
+            foreach ($this->options as $option) {
+                $options[$option->id] = $option->name;
+            }
+
+            $this->options = $options;
+        }
+
+        $this->options['maxFilesize'] = config('filesystems.max_size');
+
+        return view('components.form.group.import');
+    }
+}

app/View/Components/Form/Input/Import.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\View\Components\Form\Input;
+
+use App\Abstracts\View\Components\Form;
+
+class Import extends Form
+{
+    public $type = 'file';
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        if (! empty($this->options)) {
+            $options = [];
+
+            foreach ($this->options as $option) {
+                $options[$option->id] = $option->name;
+            }
+
+            $this->options = $options;
+        }
+
+        return view('components.form.input.import');
+    }
+}

public/css/app.css

@@ -319,7 +319,8 @@
   border-radius: .375rem;
 }
 
-.dz-message {
+.dz-message,
+.dz-preview-message {
   padding: 5rem 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -331,8 +332,9 @@
       -ms-flex-pack: center;
           justify-content: center;
   background-color: #fff;
-  border: 1px dashed #C7C9D9;
+  border: 2px dashed #C7C9D9;
   border-radius: .375rem;
+  font-weight: 500;
   text-align: center;
   color: #595959;
   -webkit-transition: all .15s ease;
@@ -341,24 +343,31 @@
       -ms-flex-order: -1;
           order: -1;
   cursor: pointer;
+}
+
+.dz-message {
   z-index: 9;
 }
 
-.dz-message:hover {
+.dz-message:hover,
-  border-color: #424242;
+.dz-preview-message:hover {
+  border-color: #918b8b;
 }
 
-.dropzone-multiple .dz-message {
+.dropzone-multiple .dz-message,
+.dropzone-multiple .dz-preview-message {
   height: 5rem;
   padding: 0;
 }
 
-.dropzone-single .dz-message {
+.dropzone-single .dz-message,
+.dropzone-single .dz-preview-message {
   height: 100%;
-  padding: 0.5rem 1rem;
+  padding: 1rem 0;
 }
 
-.dropzone-column .dz-message {
+.dropzone-column .dz-message,
+.dropzone-column .dz-preview-message {
   height: 100%;
   padding: 0;
 }
@@ -373,7 +382,8 @@
   opacity:1
 }
 
-.dz-message .dz-button {
+.dz-message .dz-button,
+.dz-preview-message .dz-button {
   background: hsla(0,0%,100%,0);
   border: none;
   color: #C7C9D9;
@@ -415,6 +425,32 @@
   bottom: 7px;
   z-index: 99;
 }
+
+.dz-import-text {
+  color: #6B7280;
+  font-weight: 600;
+}
+
+.dz-import-upload {
+  color: #6B7280;
+  font-weight: 500;
+}
+
+.dz-import-icon {
+  font-size: 38px;
+  outline: none;
+}
+
+.dz-import {
+  padding: 20px;
+  background: hsla(0,0%,100%,0);
+  border: none;
+  color: #C7C9D9;
+}
+
+.dz-import-width {
+  width: 120%;
+}
 /*
 ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 */
@@ -1543,13 +1579,16 @@ button, input, optgroup, select, textarea{
 .change-log-modal .badge{
   border-radius: 1.5rem;
   --tw-bg-opacity: 1;
+  background-color: rgb(110 161 82 / var(--tw-bg-opacity));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  font-size: 1.2rem;
+  font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: 700;
+  font-weight: 500;
   --tw-text-opacity: 1;
-  color: #6ea152;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .change-log-modal h2{
@@ -1563,39 +1602,31 @@ button, input, optgroup, select, textarea{
 
 .change-log-modal h3{
   margin-bottom: 0.5rem;
-  margin-top: 40px;
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 700;
   --tw-text-opacity: 1;
-  color: #55588B;
+  color: rgb(85 88 139 / var(--tw-text-opacity));
 }
 
 .change-log-modal ul{
   margin-bottom: 0.5rem;
   list-style-position: inside;
   list-style-type: disc;
-  border: 2px solid #eaeaea;
-  padding: 10px 20px;
-  border-radius: 8px;
-}
-
-.change-log-modal li:last-child {
-  margin-bottom: 13px;
 }
 
 .change-log-modal li{
   font-size: 1rem;
   line-height: 1.5rem;
-  margin-top: 13px;
   --tw-text-opacity: 1;
   color: rgb(85 88 139 / var(--tw-text-opacity));
 }
 
-
 .change-log-modal a{
   --tw-text-opacity: 1;
   color: rgb(110 161 82 / var(--tw-text-opacity));
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
 }
 
 /* changelog modal styling for update center */
@@ -62781,6 +62812,10 @@ body{
   display: flex;
 }
 
+.group:hover .group-hover\:hidden{
+  display: none;
+}
+
 .group:hover .group-hover\:translate-x-1{
   --tw-translate-x: 0.25rem;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -63496,6 +63531,10 @@ body{
   margin: 1px;
 }
 
+:is([dir="ltr"] .ltr\:-ml-10){
+  margin-left: -2.5rem;
+}
+
 :is([dir="ltr"] .ltr\:-ml-7){
   margin-left: -1.75rem;
 }
@@ -63520,6 +63559,10 @@ body{
   margin-right: 0.25rem;
 }
 
+:is([dir="ltr"] .ltr\:mr-10){
+  margin-right: 2.5rem;
+}
+
 :is([dir="ltr"] .ltr\:mr-2){
   margin-right: 0.5rem;
 }
@@ -64513,6 +64556,10 @@ body{
   margin: 1px;
 }
 
+:is([dir="rtl"] .rtl\:-mr-10){
+  margin-right: -2.5rem;
+}
+
 :is([dir="rtl"] .rtl\:-mr-7){
   margin-right: -1.75rem;
 }
@@ -64521,6 +64568,10 @@ body{
   margin-left: 0.25rem;
 }
 
+:is([dir="rtl"] .rtl\:ml-10){
+  margin-left: 2.5rem;
+}
+
 :is([dir="rtl"] .rtl\:ml-2){
   margin-left: 0.5rem;
 }

public/css/third_party/dropzone_custom.css

@@ -20,37 +20,46 @@
   border-radius: .375rem;
 }
 
-.dz-message {
+.dz-message,
+.dz-preview-message {
   padding: 5rem 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #fff;
-  border: 1px dashed #C7C9D9;
+  border: 2px dashed #C7C9D9;
   border-radius: .375rem;
+  font-weight: 500;
   text-align: center;
   color: #595959;
   transition: all .15s ease;
   order: -1;
   cursor: pointer;
+}
+
+.dz-message {
   z-index: 9;
 }
 
-.dz-message:hover {
+.dz-message:hover,
-  border-color: #424242;
+.dz-preview-message:hover {
+  border-color: #918b8b;
 }
 
-.dropzone-multiple .dz-message {
+.dropzone-multiple .dz-message,
+.dropzone-multiple .dz-preview-message {
   height: 5rem;
   padding: 0;
 }
 
-.dropzone-single .dz-message {
+.dropzone-single .dz-message,
+.dropzone-single .dz-preview-message {
   height: 100%;
-  padding: 0.5rem 1rem;
+  padding: 1rem 0;
 }
 
-.dropzone-column .dz-message {
+.dropzone-column .dz-message,
+.dropzone-column .dz-preview-message {
   height: 100%;
   padding: 0;
 }
@@ -65,7 +74,8 @@
   opacity:1
 }
 
-.dz-message .dz-button {
+.dz-message .dz-button,
+.dz-preview-message .dz-button {
   background: hsla(0,0%,100%,0);
   border: none;
   color: #C7C9D9;
@@ -100,3 +110,29 @@
   bottom: 7px;
   z-index: 99;
 }
+
+.dz-import-text {
+  color: #6B7280;
+  font-weight: 600;
+}
+
+.dz-import-upload {
+  color: #6B7280;
+  font-weight: 500;
+}
+
+.dz-import-icon {
+  font-size: 38px;
+  outline: none;
+}
+
+.dz-import {
+  padding: 20px;
+  background: hsla(0,0%,100%,0);
+  border: none;
+  color: #C7C9D9;
+}
+
+.dz-import-width {
+  width: 120%;
+}

resources/assets/js/components/AkauntingImport.vue

@@ -0,0 +1,252 @@
+<template>
+    <div :id="'dropzone-' + _uid" class="dropzone dropzone-single dz-clickable group w-full">
+        <div class="fallback">
+            <div class="custom-file">
+                <input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid">
+
+                <label class="custom-file-label" :for="'projectCoverUploads' + _uid">
+                    {{ textChooseFile }}
+                </label>
+            </div>
+        </div>
+
+        <div class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
+            <div class="dz-preview-cover dz-default dz-preview-message flex flex-col">
+                <div class="dz-import">
+                    <div class="dz-import-icon relative">
+                        <span class="material-icons-outlined text-default text-7xl">file_copy</span>
+
+                        <button data-dz-remove="true" class="absolute z-10 right-18 top-0 hidden group-hover:flex bg-white">
+                            <span class="material-icons-outlined text-gray-300 text-8xl">cancel</span>
+                        </button>
+                    </div>
+
+                    <div class="relative h-12">
+                        <p class="absolute dz-import-upload z-10" data-dz-name>...</p>
+
+                        <p class="dz-import-text pt-6" v-html="textExtensionAndLimitationFile"></p>
+                    </div>
+                </div>
+
+                <div class="w-full h-2 bg-purple-100 rounded-b-md -bottom-1 absolute group-hover:hidden">
+                    <div class="w-0 h-2 bg-default rounded-b-md progress"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="dz-default dz-message flex flex-col" style="background-color: white;">
+            <div class="dz-import">
+                <div class="dz-import-icon">
+                    <span class="material-icons-outlined text-7xl" :class="(files.length) ? 'text-default opacity-0' : ''">file_copy</span>
+                </div>
+
+                <div>
+                    <p class="dz-import-upload" :class="(files.length) ? 'opacity-0' : ''" v-html="textDropFile"></p>
+
+                    <p class="dz-import-text" v-html="textExtensionAndLimitationFile"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Dropzone from 'dropzone';
+
+Dropzone.autoDiscover = false;
+
+export default {
+    name: 'akaunting-import',
+
+    props: {
+        textDropFile: {
+            type: String,
+            default: '<span style="color: #006EA6;">Upload a file</span> or drag and drop',
+            description: 'Drop file text'
+        },
+
+        textExtensionAndLimitationFile: {
+            type: String,
+            default: '<span>XLS or XLSX</span> up to <span>500 rows</span>',
+            description: 'Drop message text'
+        },
+
+        textChooseFile: {
+            type: String,
+            default: 'Choose File',
+            description: 'Choose file text'
+        },
+
+        options: {
+            type: [Object, Array],
+            default: () => ({})
+        },
+
+        value: [String, Object, Array, File],
+
+        url: {
+            type: String,
+            default: 'http:'
+        },
+
+        previewClasses: [String, Object, Array],
+
+        attachments: {
+            type: Array,
+            default: () => ([])
+        },
+    },
+
+    model: {
+        prop: 'value',
+        event: 'change'
+    },
+
+    data() {
+        return {
+            files: [],
+            configurations: this.options,
+            progress:0,
+        }
+    },
+
+    methods: {
+        async initDropzone() {
+            let self = this;
+            let preview = this.$refs.previewSingle;
+
+            if (this.configurations.maxFiles === undefined) {
+                this.configurations.maxFiles = 1;
+            }
+
+            if (this.configurations.acceptedFiles === undefined) {
+                this.configurations.acceptedFiles = 'image/*';
+            }
+
+            let finalOptions = {
+                ...self.configurations,
+                url: this.url,
+                previewsContainer: preview,
+                previewTemplate: preview.innerHTML,
+                dictDefaultMessage: this.textDropFile,
+                autoProcessQueue: false,
+
+                init: function () {
+                    let dropzone = this;
+
+                    dropzone.on('addedfile', function (file) {
+                        self.pushProgressbar();
+
+                        self.files.push(file);
+
+                        if (self.configurations.maxFiles == 1) {
+                            self.$emit('change', file);
+                        } else {
+                            self.$emit('change', self.files);
+                        }
+
+                        self.onMaxFilesReached(self);
+                    }),
+ 
+                    dropzone.on('removedfile', function (file) {
+                        let index = self.files.findIndex(f => f.name === file.name)
+
+                        if (index !== -1) {
+                            self.files.splice(index, 1);
+                        }
+
+                        self.$emit('change', self.files);
+
+                        self.resetProgressBar();
+                    }),
+
+                    dropzone.on('maxfilesexceeded', function(file) {
+                        this.removeAllFiles('notCancel');
+                        this.addFile(file);
+                    }),
+
+                    dropzone.on('maxfilesreached', function(file) {
+                        //
+                    })
+                }
+            };
+
+            this.dropzone = new Dropzone(this.$el, finalOptions);
+
+            preview.innerHTML = '';
+        },
+
+        onMaxFilesReached(arg) {
+            if (arg.attachments.length == 1) {
+                arg.$nextTick(() => {
+                    document.querySelector("#dropzone-" + arg._uid).classList.add("dz-max-files-reached");
+                });
+            }
+        },
+
+        async pushProgressbar() {
+            if (this.progress == 0) {
+                var elem = document.querySelector(".progress");
+                var width = 1;
+                var id = setInterval(frame, 2);
+                var self = this;
+
+                function frame() {
+                    if (width >= 100) {
+                        self.progress = 1;
+
+                        clearInterval(id);
+                    } else {
+                        width++;
+
+                        elem.style.width = width + "%";
+                    }
+                }
+            }
+        },
+
+        async resetProgressBar() {
+            this.progress = 0;
+        }
+    },
+
+    async mounted() {
+        this.initDropzone();
+    },
+
+    watch: {
+        progress: function(new_value) {
+            this.progress = new_value;
+        },
+
+        attachments: function (attachments) {
+            attachments.forEach((attachment) => {
+                if (attachment.length != undefined) {
+                    var mockFile = {
+                        id: attachment[0].id,
+                        name: attachment[0].name,
+                        size: attachment[0].size,
+                        type: attachment[0].type,
+                        download: attachment[0].downloadPath,
+                        dropzone: 'edit',
+                    };
+
+                    this.dropzone.emit("addedfile", mockFile);
+                    this.dropzone.options.thumbnail.call(this.dropzone, mockFile, attachment[0].path);
+
+                    // Make sure that there is no progress bar, etc...
+                    this.dropzone.emit("complete", mockFile);
+
+                    this.onMaxFilesReached(this);
+                }
+            }, this);
+        },
+    },
+}
+</script>
+
+<style>
+    .avatar.hidden {
+        display: none;
+    }
+</style>

resources/assets/js/mixins/global.js

@@ -24,6 +24,7 @@ import AkauntingConnectTransactions from './../components/AkauntingConnectTransa
 import AkauntingSwitch from './../components/AkauntingSwitch';
 import AkauntingSlider from './../components/AkauntingSlider';
 import AkauntingColor from './../components/AkauntingColor';
+import AkauntingImport from './../components/AkauntingImport';
 import CardForm from './../components/CreditCard/CardForm';
 
 import NProgress from 'nprogress';
@@ -79,6 +80,7 @@ export default {
         AkauntingSwitch,
         AkauntingSlider,
         AkauntingColor,
+        AkauntingImport,
         CardForm,
         [Select.name]: Select,
         [Option.name]: Option,

resources/lang/en-GB/import.php

@@ -6,5 +6,8 @@ return [
     'title'                     => 'Import :type',
     'limitations'               => 'Allowed file types: :extensions<br>Allowed max rows: :row_limit',
     'sample_file'               => 'You can <a target="_blank" href=":download_link"><strong>download</strong></a> the sample file and fill it with your data.',
+    'sample_file_and_document'  => 'You can <a target="_blank" href=":download_link" class="text-blue-500 underline font-bold">download</a> the sample file and review the <a target="_blank" href=":document_link"class="text-blue-500 underline font-bold">documents</a> for detailed information',
+    'drop_file'                 => '<span style="color: #006EA6;">Upload a file</span> or drag and drop',
+    'file_type_and_limitations' => ':extensions up to :row_limit rows',
 
 ];

resources/views/common/import/create.blade.php

@@ -3,31 +3,49 @@
         {{ trans('import.title', ['type' => $title_type]) }}
     </x-slot>
 
+    <x-slot name="favorite"
+        title="{{ trans('import.title', ['type' => $title_type]) }}"
+        icon="import_export"
+        url="{{ route('import.create', ['group' => $group, 'type' => $type]) }}"
+    ></x-slot>
+
     <x-slot name="content">
         <div class="card">
             <x-form id="import" :route="$form_params['route']" :url="$form_params['url']">
-                <div class="card-body mt-8">
+                <div class="flex flex-col lg:flex-row">
-                    <div class="border-t-4 border-orange-300 rounded-b-lg text-orange-700 px-4 py-3 shadow-md" role="alert">
+                    <div class="hidden lg:flex w-4/12 ltr:-ml-10 rtl:-mr-10 ltr:mr-10 rtl:ml-10">
+                        <img src="{{ asset('public/img/import.png') }}" alt="{{ trans('import.title', ['type' => $title_type]) }}">
+                    </div>
+
+                    <!-- 
+                    <div class="hidden lg:flex w-4/12 mt-18 mr-14">
+                        <iframe width="560" height="244" src="https://www.youtube.com/embed/p98z142g2yY" frameborder="0"  title="{{ trans('import.title', ['type' => $title_type]) }}" class="rounded-lg"></iframe>
+                    </div>
+                     -->
+
+                    <div class="card-body mt-8 lg:w-8/12 w-full">
+                        <div class="w-full mt-8 bg-blue-100 rounded-lg text-blue-700 px-4 py-2" role="alert">
                             <div class="flex">
-                            <div>
+                                <span class="material-icons ltr:mr-3 rtl:ml-3">error_outline</span>
-                                {!! trans('import.limitations', ['extensions' => strtoupper(config('excel.imports.extensions')),
+
-                                        'row_limit' => config('excel.imports.row_limit')
+                                <div class="font-semibold text-sm mt-1">
-                                    ])
+                                    {!! trans('import.sample_file_and_document', [
-                                !!}
+                                        'download_link' => $sample_file,
+                                        'document_link' => $document_link
+                                    ]) !!}
                                 </div>
                             </div>
                         </div>
 
-                    <div class="border-t-4 mt-8 border-blue-300 rounded-b-lg text-blue-700 px-4 py-3 shadow-md" role="alert">
+                        <x-form.group.import
-                        <div class="flex">
+                            name="import"
-                            <div>
+                            dropzone-class="form-file"
-                                {!! trans('import.sample_file', ['download_link' => $sample_file]) !!}
+                            singleWidthClasses
+                            :options="['acceptedFiles' => '.xls,.xlsx']"
+                            form-group-class="mt-8"
+                        />
                     </div>
                 </div>
-                    </div>
-
-                    <x-form.group.file name="import" dropzone-class="form-file" singleWidthClasses :options="['acceptedFiles' => '.xls,.xlsx']" form-group-class="mt-8" />
-                </div>
 
                 <div class="mt-8">
                     <div class="sm:col-span-6 flex items-center justify-end">
@@ -59,3 +77,4 @@
 
     <x-script folder="common" file="imports" />
 </x-layouts.admin>
+

resources/views/components/form/group/import.blade.php

@@ -0,0 +1,59 @@
+@stack($name . '_input_start')
+    <div
+        @class([
+            'relative',
+            $formGroupClass,
+            'required' => $required,
+            'readonly' => $readonly,
+            'disabled' => $disabled,
+        ])
+
+        @if (isset($attributes['v-show']))
+        v-if="{{ $attributes['v-show'] }}"
+        @endif
+
+        @if (isset($attributes['v-disabled']) || isset($attributes['v-bind:disabled']))
+        :class="[
+            {'disabled' : {{ (isset($attributes['v-disabled'])) ? $attributes['v-disabled'] : $attributes['v-bind:disabled'] }}},
+            {'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }}}
+        ]"
+        @else
+        :class="[
+            {'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }}}
+        ]"
+        @endif
+    >
+        @if (! $attributes->has('label') && ! empty($label->contents))
+            {!! $label ?? '' !!}
+        @elseif (! empty($label))
+            <x-form.label for="{{ $name }}" :required="$required">{!! $label !!}</x-form.label>
+        @endif
+
+        <div @class([
+                $inputGroupClass,
+            ])
+        >
+            @if (! $attributes->has('icon') && ! empty($icon->contents))
+                {!! $icon ?? '' !!}
+            @elseif (! empty($icon))
+                <x-form.icon icon="{{ $icon }}" />
+            @endif
+
+            <x-form.input.import
+                name="{{ $name }}"
+                id="{{ $id }}"
+                :value="$value"
+                v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.' . $name : 'form.' . $name) }}"
+                :multiple="$multiple"
+                :options="$options"
+                {{ $attributes->merge($custom_attributes) }}
+            />
+        </div>
+
+        @if (! $attributes->has('error') && ! empty($error->contents))
+            {!! $error ?? '' !!}
+        @else
+            <x-form.error name="{{ $name }}" {{ $attributes }} />
+        @endif
+    </div>
+@stack($name . '_input_end')

resources/views/components/form/input/import.blade.php

@@ -0,0 +1,75 @@
+<akaunting-import
+    text-drop-file="{{ trans('import.drop_file') }}"
+    text-extension-and-limitation-file="{!! trans('import.file_type_and_limitations', [
+        'extensions' => strtoupper(config('excel.imports.extensions')),
+        'row_limit' => config('excel.imports.row_limit')
+    ]) !!}"
+    text-choose-file="{{ trans('general.form.choose_file') }}"
+
+    @if (! empty($attributes['dropzone-class']))
+    class="{{ $attributes['dropzone-class'] }}"
+    @endif
+
+    @if (! empty($options))
+    :options={{ json_encode($options) }}
+    @endif
+
+    @if (! empty($attributes['previewClasses']))
+    preview-classes="{{ $attributes['previewClasses'] }}"
+    @endif
+
+    @if (! empty($attributes['url']))
+    url="{{ $attributes['url'] }}"
+    @endif
+
+    @if (! empty($value))
+        @php
+            $attachments = [];
+        @endphp
+
+        @if (is_array($value))
+            @foreach($value as $attachment)
+                @php
+                    $attachments[] = [
+                        'id' => $attachment->id,
+                        'name' => $attachment->filename . '.' . $attachment->extension,
+                        'path' => route('uploads.get', $attachment->id),
+                        'type' => $attachment->mime_type,
+                        'size' => $attachment->size,
+                        'downloadPath' => route('uploads.download', $attachment->id),
+                    ];
+                @endphp
+            @endforeach
+        @elseif ($value instanceof \Plank\Mediable\Media)
+            @php
+                $attachments[] = [
+                    'id' => $value->id,
+                    'name' => $value->filename . '.' . $value->extension,
+                    'path' => route('uploads.get', $value->id),
+                    'type' => $value->mime_type,
+                    'size' => $value->size,
+                    'downloadPath' => false,
+                ];
+            @endphp
+        @else
+            @php
+                $attachment = \Plank\Mediable\Media::find($value);
+
+                if (! empty($attachment)) {
+                    $attachments[] = [
+                        'id' => $attachment->id,
+                        'name' => $attachment->filename . '.' . $attachment->extension,
+                        'path' => route('uploads.get', $attachment->id),
+                        'type' => $attachment->mime_type,
+                        'size' => $attachment->size,
+                        'downloadPath' => false,
+                    ];
+                }
+            @endphp
+        @endif
+
+    :attachments="{{ json_encode($attachments) }}"
+    @endif
+
+    v-model="{{ ! empty($attributes['v-model']) ? $attributes['v-model'] : (! empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.'. $name : 'form.' . $name) }}"
+></akaunting-import>