Refactor some code

client/src/components/content-forms/DocumentForm.vue

@@ -3,82 +3,25 @@
     class="document-form"
     ref="documentform"
   >
-    <div
+    <document-input
-      v-if="!value.url"
+      :url="value.url"
-      ref="uploadcare-panel"
+      @update="updateUrl"
     />
-    <div
-      class="document-form__spinner"
-      v-if="loading"
-    >
-      <loading-icon class="document-form__loading-icon" />
-    </div>
-    <div
-      class="document-form__uploaded"
-      v-if="value.url"
-    >
-      <document-icon class="document-form__icon" />
-      <a
-        :href="previewUrl"
-        class="document-form__link"
-        target="_blank"
-        >{{ previewLink }}</a
-      >
-    </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { uploadcare } from '@/helpers/uploadcare';
+import DocumentInput from '@/components/content-forms/DocumentInput.vue';
-import LoadingIcon from '@/components/icons/LoadingIcon.vue';
+export interface Props {
-import { defineAsyncComponent } from 'vue';
+  value: any;
-
+  index: number;
-const DocumentIcon = defineAsyncComponent(() =>
-  import('@/components/icons/DocumentIcon.vue')
-);
-
-export default {
-  props: ['value', 'index'],
-
-  components: {
-    LoadingIcon,
-    DocumentIcon,
-  },
-
-  data() {
-    return {
-      loading: false,
-    };
-  },
-
-  computed: {
-    previewUrl() {
-      if (this.value && this.value.url) {
-        return this.value.url;
 }
-      return null;
-    },
-    previewLink() {
-      if (this.value && this.value.url) {
-        const parts = this.value.url.split('/');
-        return parts[parts.length - 1];
-      }
-      return '';
-    },
-  },
 
-  mounted() {
+const props = defineProps<Props>();
-    uploadcare(
+const emit = defineEmits(['change-url']);
-      this,
+
-      (url) => {
+const updateUrl = (url: string) => {
-        this.$emit('change-url', url, this.index);
+  emit('change-url', url, props.index);
-        this.loading = false;
-      },
-      () => {
-        this.loading = true;
-      }
-    );
-  },
 };
 </script>
 

client/src/components/content-forms/LinkForm.vue

@@ -28,7 +28,7 @@ export default {
 .link-form {
   display: grid;
   grid-auto-rows: auto;
-  grid-row-gap: 11px;
+  grid-row-gap: $small-spacing;
 
   &__text,
   &__url {