fix: the issue with viewing the LoadingButton has been resolved

dmitrybubyakin · Dec 14, 2023 · fe5692e · fe5692e
1 parent 8de35ef
commit fe5692e
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 9 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/js/field.js.LICENSE.txt b/dist/js/field.js.LICENSE.txt
@@ -8,6 +8,13 @@
  * Date: 2021-06-12T08:00:17.411Z
  */
 
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
 /*!
  * clipboard.js v2.0.11
  * https://clipboardjs.com/
@@ -21,6 +28,8 @@
  * @license MIT
  */
 
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
 /**

diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/field.js": "/js/field.js?id=d46b17df721fa1cd5931d901f38b117f",
+    "/js/field.js": "/js/field.js?id=66f73aa02266cc43b3d5db3603741976",
     "/css/field.css": "/css/field.css?id=d95e4549d8e45d413398a7fc8bfb5628"
 }
diff --git a/resources/js/components/Buttons/LoadingButton.vue b/resources/js/components/Buttons/LoadingButton.vue
@@ -0,0 +1,53 @@
+<template>
+  <component v-bind="{ size, align, ...$attrs }" :is="component" ref="button">
+    <span :class="{ invisible: processing || loading }">
+      <slot />
+    </span>
+
+    <span
+      v-if="processing || loading"
+      class="absolute"
+      style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
+    >
+      <loader class="text-white" width="32" />
+    </span>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'lg',
+    },
+
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['left', 'center'].includes(v),
+    },
+
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
+    processing: {
+      type: Boolean,
+      default: false,
+    },
+
+    component: {
+      type: String,
+      default: 'DefaultButton',
+    },
+  },
+
+  methods: {
+    focus() {
+      this.$refs.button.focus()
+    },
+  },
+}
+</script>
diff --git a/resources/js/components/Common/Loader.vue b/resources/js/components/Common/Loader.vue
@@ -0,0 +1,94 @@
+<template>
+    <svg
+        class="mx-auto block"
+        :style="{ width: width + 'px' }"
+        viewBox="0 0 120 30"
+        xmlns="http://www.w3.org/2000/svg"
+        :fill="fillColor"
+    >
+        <circle cx="15" cy="15" r="15">
+            <animate
+                attributeName="r"
+                from="15"
+                to="15"
+                begin="0s"
+                dur="0.8s"
+                values="15;9;15"
+                calcMode="linear"
+                repeatCount="indefinite"
+            />
+            <animate
+                attributeName="fill-opacity"
+                from="1"
+                to="1"
+                begin="0s"
+                dur="0.8s"
+                values="1;.5;1"
+                calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+            <animate
+                attributeName="r"
+                from="9"
+                to="9"
+                begin="0s"
+                dur="0.8s"
+                values="9;15;9"
+                calcMode="linear"
+                repeatCount="indefinite"
+            />
+            <animate
+                attributeName="fill-opacity"
+                from="0.5"
+                to="0.5"
+                begin="0s"
+                dur="0.8s"
+                values=".5;1;.5"
+                calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="105" cy="15" r="15">
+            <animate
+                attributeName="r"
+                from="15"
+                to="15"
+                begin="0s"
+                dur="0.8s"
+                values="15;9;15"
+                calcMode="linear"
+                repeatCount="indefinite"
+            />
+            <animate
+                attributeName="fill-opacity"
+                from="1"
+                to="1"
+                begin="0s"
+                dur="0.8s"
+                values="1;.5;1"
+                calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'Loader',
+    props: {
+        width: {
+            type: [Number, String],
+            required: false,
+            default: 50,
+        },
+        fillColor: {
+            type: String,
+            required: false,
+            default: 'currentColor',
+        },
+    },
+}
+</script>
diff --git a/resources/js/components/Medialibrary/Modals/ChooseExistingMedia.vue b/resources/js/components/Medialibrary/Modals/ChooseExistingMedia.vue
@@ -29,10 +29,10 @@
       <ModalFooter>
         <div class="ml-auto">
           <CancelButton component="button" type="button" class="ml-auto mr-3" @click="$emit('close')" />
-          <LoadingButton type="button" :disabled="loading" :loading="loading" ref="confirmButton" @click="handleChoose">
+          <loading-button type="button" :disabled="loading" :loading="loading" ref="confirmButton" @click="handleChoose">
             {{ __('Choose') }}
             <span v-if="chosenMedia.length > 0"> ({{ chosenMedia.length }}) </span>
-          </LoadingButton>
+          </loading-button>
         </div>
       </ModalFooter>
     </div>

diff --git a/resources/js/components/Medialibrary/Modals/Cropper.vue b/resources/js/components/Medialibrary/Modals/Cropper.vue
@@ -68,7 +68,7 @@
         <div class="ml-auto flex items-center">
           <CancelButton component="button" type="button" class="ml-auto mr-3" @click="$emit('close')" />
 
-          <LoadingButton
+          <loading-button
             type="button"
             ref="runButton"
             :disabled="updating"
@@ -77,7 +77,7 @@
             @click.native="handleCrop()"
           >
             {{ __('Crop') }}
-          </LoadingButton>
+          </loading-button>
         </div>
       </ModalFooter>
     </div>

diff --git a/resources/js/components/Medialibrary/Modals/Edit.vue b/resources/js/components/Medialibrary/Modals/Edit.vue
@@ -35,9 +35,9 @@
           <div class="ml-auto flex items-center">
             <CancelButton component="button" type="button" class="ml-auto mr-3" @click="$emit('close')" />
 
-            <LoadingButton type="submit" ref="confirmButton" :disabled="updating" :loading="updating">
+            <loading-button type="submit" ref="confirmButton" :disabled="updating" :loading="updating">
               {{ __('Update Media') }}
-            </LoadingButton>
+            </loading-button>
           </div>
         </ModalFooter>
       </div>

diff --git a/resources/js/field.js b/resources/js/field.js
@@ -12,6 +12,9 @@ import IconCropperUnlock from './components/Icons/Cropper/Unlock'
 import IconCropperZoomIn from './components/Icons/Cropper/ZoomIn'
 import IconCropperZoomOut from './components/Icons/Cropper/ZoomOut'
 
+import LoadingButton from './components/Buttons/LoadingButton';
+import Loader from './components/Common/Loader';
+
 Nova.booting((app, store) => {
   // Icons
   app.component('icon-crop', IconCrop)
@@ -24,9 +27,14 @@ Nova.booting((app, store) => {
   app.component('icon-cropper-zoom-in', IconCropperZoomIn)
   app.component('icon-cropper-zoom-out', IconCropperZoomOut)
 
+  app.component('loader', Loader);
+
+  // Buttons
+  app.component('loading-button', LoadingButton);
+
   app.component('index-nova-medialibrary-field', IndexField)
   app.component('detail-nova-medialibrary-field', DetailField)
   app.component('form-nova-medialibrary-field', FormField)
 
   app.component('detail-nova-generated-conversions-field', GeneratedConversionsDetailField)
-})
+})