v4 (#148)

* Nova 4 support (#147) * Update composer.json * add support for laravel mix 6 * add support for nova 4 * generated production build * use mix commands * remove extra option from watch * remove nova 3 support from composer Co-authored-by: Anand <[email protected]> * cleanup * Fix styling Co-authored-by: Anand Patel <[email protected]> Co-authored-by: Anand <[email protected]> Co-authored-by: freekmurze <[email protected]>
spatie · Apr 7, 2022 · d311760 · d311760
1 parent 62d7270
commit d311760
Show file tree

Hide file tree

Showing 20 changed files with 197 additions and 156 deletions.
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -9,10 +9,12 @@ jobs:
             fail-fast: true
             matrix:
                 os: [ubuntu-latest]
-                php: [8.0, 7.4]
-                laravel: [8.*]
+                php: [8.1, 8.0]
+                laravel: [9.*, 8.*]
                 dependency-version: [prefer-stable]
                 include:
+                    -   laravel: 9.*
+                        testbench: 7.*
                     -   laravel: 8.*
                         testbench: 6.*
 

diff --git a/composer.json b/composer.json
@@ -21,9 +21,9 @@
         }
     ],
     "require": {
-        "php": "^8.0|^7.3",
-        "laravel/nova": "^3.0",
-        "spatie/laravel-tags": "^2.3|^3.0|^4.0"
+        "php": "^8.0",
+        "laravel/nova": "^4.0",
+        "spatie/laravel-tags": "^4.0"
     },
     "require-dev": {
         "mockery/mockery": "^1.4",

diff --git a/dist/css/field.css b/dist/css/field.css
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/package.json b/package.json
@@ -2,12 +2,12 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch --watch-options-poll=1000",
+        "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "production": "mix --production",
         "check-format": "prettier --list-different 'resources/**/*.{css,js,vue}'",
         "format": "prettier --write 'resources/js/**/*.{css,js,vue}'",
         "lint": "eslint resources/js --fix --ext js,vue"
@@ -17,12 +17,12 @@
         "eslint": "^4.19.1",
         "eslint-config-prettier": "^2.9.0",
         "eslint-plugin-vue": "^4.4.0",
-        "laravel-mix": "^1.0",
+        "laravel-mix": "^6.0",
         "laravel-nova": "^1.0",
         "prettier": "^1.14.2"
     },
     "dependencies": {
         "animated-scroll-to": "^1.2.2",
-        "vue": "^2.5.0"
+        "vue": "^3.0"
     }
 }
diff --git a/resources/js/components/Nova/DetailField.vue b/resources/js/components/Nova/DetailField.vue
@@ -1,13 +1,13 @@
 <template>
-    <panel-item :field="field">
-        <p slot="value" v-html="typeof field.value === 'object' ? field.value.join(', ') : field.value"></p>
-    </panel-item>
+    <PanelItem :index="index" :field="field">
+        <template #value>
+            <p v-html="typeof field.value === 'object' ? field.value.join(', ') : field.value"></p>
+        </template>
+    </PanelItem>
 </template>
 
 <script>
 export default {
-    inheritAttrs: false,
-
-    props: ['field'],
+    props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 };
 </script>
diff --git a/resources/js/components/Nova/FormField.vue b/resources/js/components/Nova/FormField.vue
@@ -1,19 +1,20 @@
 <template>
-    <default-field :field="field" :errors="errors" :show-help-text="showHelpText">
-        <template slot="field">
+    <DefaultField :field="field" :errors="errors" :show-help-text="showHelpText">
+        <template #field>
             <component
                 :is="component"
                 :name="field.attribute"
                 :type="field.type"
                 :suggestion-limit="field.suggestionLimit"
                 :limit="field.limit"
                 :errors="errors"
+                :tags="tags"
                 :placeholder="field.placeholder"
                 :can-be-deselected="field.canBeDeselected"
                 v-model="tags"
             ></component>
         </template>
-    </default-field>
+    </DefaultField>
 </template>
 
 <script>
@@ -26,7 +27,7 @@ export default {
 
     mixins: [FormField, HandlesValidationErrors],
 
-    props: ['field'],
+    props: ['resourceName', 'resourceId', 'field'],
 
     data() {
         return {
@@ -41,7 +42,7 @@ export default {
 
     computed: {
         component() {
-            return this.field.multiple ? 'multi-tags-input' : 'single-tags-input';
+            return this.field.multiple ? 'MultiTagsInput' : 'SingleTagsInput';
         },
     },
 

diff --git a/resources/js/components/Nova/IndexField.vue b/resources/js/components/Nova/IndexField.vue
@@ -1,11 +1,12 @@
 <template>
-    <div class="py-3 tags-index-field" v-html="typeof field.value === 'object' ? field.value.join(', ') : field.value"></div>
+    <div
+        class="py-3 tags-index-field"
+        v-html="typeof field.value === 'object' ? field.value.join(', ') : field.value"
+    ></div>
 </template>
 
 <script>
 export default {
-    inheritAttrs: false,
-
-    props: ['field'],
+    props: ['resourceName', 'field'],
 };
 </script>
diff --git a/resources/js/components/Tags/MultiTagsInput.vue b/resources/js/components/Tags/MultiTagsInput.vue
@@ -1,13 +1,28 @@
 <template>
     <tags-input
-      :tags="tags"
-      :type="type"
-      :suggestion-limit="suggestionLimit"
-      :limit="limit"
-      @input="handleInput"
+        :tags="tagsInput"
+        :type="type"
+        :suggestion-limit="suggestionLimit"
+        :limit="limit"
+        :value="modelValue"
+        @updateTags="handleInput"
     >
-        <div slot-scope="{ tags, removeTag, canAddTag, inputProps, inputEvents, suggestions, insertSuggestion }">
-            <div class="tags-input w-full form-control form-input form-input-bordered flex items-center" :class="{ 'border-danger': errors.has(name) }" @click="focusInput">
+        <template
+            v-slot="{
+                tags,
+                removeTag,
+                canAddTag,
+                inputProps,
+                inputEvents,
+                suggestions,
+                insertSuggestion,
+            }"
+        >
+            <div
+                class="tags-input w-full form-control form-input form-input-bordered flex items-center"
+                :class="{ 'border-danger': errors.has(name) }"
+                @click="focusInput"
+            >
                 <span v-for="tag in tags" :key="tag" class="tags-input-tag mr-1">
                     <span>{{ tag }}</span>
                     <button
@@ -25,7 +40,7 @@
                     :placeholder="placeholder ? placeholder : __('Add tag...')"
                     v-bind="inputProps"
                     v-on="inputEvents"
-                >
+                />
             </div>
             <ul v-if="suggestions.length" class="tags-input-suggestions">
                 <li v-for="suggestion in suggestions" :key="suggestion" class="mr-1">
@@ -38,24 +53,39 @@
                     </button>
                 </li>
             </ul>
-        </div>
+        </template>
     </tags-input>
 </template>
 
 <script>
 import TagsInput from './TagsInput.vue';
 
 export default {
-    props: ['name', 'tags', 'type', 'suggestionLimit', 'errors', 'placeholder', 'limit'],
+    props: [
+        'name',
+        'tags',
+        'type',
+        'suggestionLimit',
+        'errors',
+        'placeholder',
+        'limit',
+        'modelValue',
+    ],
 
-    model: {
-        prop: 'tags',
-    },
+    emits: ['update:modelValue'],
 
     components: {
         TagsInput,
     },
 
+    data() {
+        return {
+            tagsInput: this.tags,
+        };
+    },
+
+    mounted() {},
+
     methods: {
         focusInput() {
             if (this.$refs.input) {
@@ -64,11 +94,16 @@ export default {
         },
 
         handleInput(tags) {
-            this.$emit('input', tags);
+            this.$emit('update:modelValue', tags);
 
-            // Re-focus the input after a suggestion was inserted
             this.focusInput();
         },
     },
+
+    watch: {
+        tags(updatedTags) {
+            this.tagsInput = updatedTags;
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/Tags/SingleTagsInput.vue b/resources/js/components/Tags/SingleTagsInput.vue
@@ -1,20 +1,16 @@
 <template>
     <select
         v-if="loaded"
-        class="w-full form-control form-select"
+        class="w-full block form-control form-select form-select-bordered"
         :class="{ 'border-danger': errors.has(name) }"
         :id="name"
         :value="tags[0]"
-        @input="$emit('input', [$event.target.value])"
+        @input="$emit('update:modelValue', [$event.target.value])"
     >
         <option value="" selected :disabled="!canBeDeselected">
             {{ placeholder ? placeholder : __('Choose an option') }}
         </option>
-        <option
-            v-for="tag in availableTags"
-            :key="tag"
-            :value="tag"
-        >
+        <option v-for="tag in availableTags" :key="tag" :value="tag">
             {{ tag }}
         </option>
     </select>
@@ -41,7 +37,7 @@ export default {
         getAvailableTags() {
             const queryString = this.type ? `filter[type]=${this.type}` : '';
 
-            window.axios
+            Nova.request()
                 .get(`/nova-vendor/spatie/nova-tags-field?${queryString}`)
                 .then(response => {
                     this.availableTags = response.data;