Merge pull request #59 from bakerkretzmar/fix-loading-button

Add back Nova's removed `LoadingButton`

Author: bakerkretzmar

.github/workflows/main.yaml

@@ -1,22 +1,23 @@
 name: CI
 on:
-  pull_request:
-    paths-ignore: ['dist/**', '*.md']
-  push:
-    branches: [1.x, 2.x]
-    paths-ignore: ['dist/**', '*.md']
+    pull_request:
+        paths-ignore: ['dist/**', '*.md']
+    push:
+        branches: [1.x, 2.x]
+        paths-ignore: ['dist/**', '*.md']
 jobs:
-  test:
-    name: Tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: shivammathur/setup-php@v2
-        with:
-          php-version: 8.0
-      - run: composer config http-basic.nova.laravel.com $NOVA_USERNAME $NOVA_PASSWORD
-        env:
-          NOVA_USERNAME: ${{ secrets.NOVA_USERNAME }}
-          NOVA_PASSWORD: ${{ secrets.NOVA_PASSWORD }}
-      - uses: ramsey/composer-install@v2
-      - run: vendor/bin/phpunit --testdox --colors=always
+    test:
+        name: Tests
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: shivammathur/setup-php@v2
+              with:
+                  php-version: 8.0
+            - run: composer config http-basic.nova.laravel.com $NOVA_USERNAME $NOVA_PASSWORD
+              env:
+                  NOVA_USERNAME: ${{ secrets.NOVA_USERNAME }}
+                  NOVA_PASSWORD: ${{ secrets.NOVA_PASSWORD }}
+            - run: composer require laravel/nova:4.22.2 --no-update
+            - uses: ramsey/composer-install@v2
+            - run: vendor/bin/phpunit --testdox --colors=always

dist/js/tool.js

@@ -6,16 +6,16 @@
         "prod": "mix --production"
     },
     "devDependencies": {
-        "@vue/compiler-sfc": "^3.2.22",
-        "autoprefixer": "^10.4.14",
-        "codemirror": "^5.65.2",
-        "laravel-mix": "^6.0.41",
+        "@vue/compiler-sfc": "^3.4.19",
+        "autoprefixer": "^10.4.17",
+        "codemirror": "^5.65.16",
+        "laravel-mix": "^6.0.49",
         "lodash": "^4.17.21",
-        "postcss": "^8.4.27",
-        "prettier": "^2.6.2",
-        "tailwindcss": "^3.3.3",
-        "vue": "^3.2.33",
-        "vue-loader": "^17.0.0"
+        "postcss": "^8.4.35",
+        "prettier": "^3.2.5",
+        "tailwindcss": "^3.4.1",
+        "vue": "^3.4.19",
+        "vue-loader": "^17.4.2"
     },
     "prettier": {
         "printWidth": 140,

package.json

@@ -0,0 +1,23 @@
+<template>
+    <Component size="lg" align="center" v-bind="$attrs" is="DefaultButton" ref="button">
+        <span :class="{ invisible: processing }">
+            <slot />
+        </span>
+        <span v-if="processing" class="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">
+            <Loader class="text-white" width="32" />
+        </span>
+    </Component>
+</template>
+
+<script>
+export default {
+    props: {
+        processing: Boolean,
+    },
+    methods: {
+        focus() {
+            this.$refs.button.focus();
+        },
+    },
+};
+</script>

resources/js/LoadingButton.vue

@@ -30,6 +30,7 @@ import SelectSetting from './SelectSetting.vue';
 import TextSetting from './TextSetting.vue';
 import TextareaSetting from './TextareaSetting.vue';
 import ToggleSetting from './ToggleSetting.vue';
+import LoadingButton from './LoadingButton.vue';
 
 export default {
     components: {
@@ -39,6 +40,7 @@ export default {
         TextSetting,
         TextareaSetting,
         ToggleSetting,
+        LoadingButton,
     },
     data: () => ({
         saving: false,