Skip to content

Commit d38512f

Browse files
vesper8vesper8
authored
Nova 4 Compatible (#29)
1 parent 7ec0a63 commit d38512f

File tree

6 files changed

+107
-80
lines changed

6 files changed

+107
-80
lines changed

‎dist/js/filter.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nova.mix.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const mix = require('laravel-mix')
2+
const webpack = require('webpack')
3+
const path = require('path')
4+
5+
class NovaExtension {
6+
name() {
7+
return 'nova-extension'
8+
}
9+
10+
register(name) {
11+
this.name = name
12+
}
13+
14+
webpackPlugins() {
15+
return new webpack.ProvidePlugin({
16+
_: 'lodash',
17+
Errors: 'form-backend-validation',
18+
})
19+
}
20+
21+
webpackConfig(webpackConfig) {
22+
webpackConfig.externals = {
23+
vue: 'Vue',
24+
}
25+
26+
webpackConfig.resolve.alias = {
27+
...(webpackConfig.resolve.alias || {}),
28+
'laravel-nova': path.join(__dirname, 'vendor/laravel/nova/resources/js/mixins/packages.js'),
29+
}
30+
31+
webpackConfig.output = {
32+
uniqueName: this.name,
33+
}
34+
}
35+
}
36+
37+
mix.extend('nova', new NovaExtension())

‎package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
22
"private": true,
33
"scripts": {
44
"dev": "npm run development",
5-
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
6-
"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",
5+
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
6+
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
77
"watch-poll": "npm run watch -- --watch-poll",
88
"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",
99
"prod": "npm run production",
10-
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
10+
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
1111
},
1212
"devDependencies": {
1313
"cross-env": "^6.0.3",
14-
"laravel-mix": "^5.0.1",
15-
"vue-template-compiler": "^2.6.11"
14+
"laravel-mix": "^6.0.1",
15+
"vue-template-compiler": "^2.6"
1616
},
1717
"dependencies": {
18-
"vue": "^2.6.11"
18+
"vue": "^3.0",
19+
"vue-loader": "^16.8.3"
1920
}
2021
}

‎resources/js/components/RangeInputFilter.vue‎

Lines changed: 56 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,73 @@
11
<template>
22

3-
<div class="range-input-filter">
3+
<div class="range-input-filter pt-2 pb-3">
44

5-
<h3 class="text-sm uppercase tracking-wide text-80 bg-30 p-3">
6-
{{ filter.name }}
7-
</h3>
5+
<h3 class="px-3 text-xs uppercase font-bold tracking-wide">
6+
{{ filter.name }}
7+
</h3>
88

9-
<div class="flex p-2 flex-no-wrap items-center">
9+
<div class="flex p-2 flex-no-wrap items-center">
1010

11-
<input class="flex items-center form-control form-input text-sm border-60"
12-
:class="{ 'w-full': filter.options.fullWidth }"
13-
name="from"
14-
:type="filter.options.inputType"
15-
:placeholder="filter.options.fromPlaceholder"
16-
v-model="value.from"
17-
@change="handleChange"/>
11+
<input class="w-full block form-control form-select form-control-sm form-select-bordered"
12+
:class="{ 'w-full': filter.options.fullWidth }"
13+
name="from"
14+
:type="filter.options.inputType"
15+
:placeholder="filter.options.fromPlaceholder"
16+
v-model="value.from"
17+
@change="handleChange"/>
1818

19-
<div class="text-sm mx-2 text-center">{{ filter.options.dividerLabel }}</div>
19+
<div class="text-sm mx-2 text-center">{{ filter.options.dividerLabel }}</div>
2020

21-
<input class="flex items-center form-control form-input text-sm border-60"
22-
:class="{ 'w-full': filter.options.fullWidth }"
23-
name="to"
24-
:type="filter.options.inputType"
25-
:placeholder="filter.options.toPlaceholder"
26-
v-model="value.to"
27-
@change="handleChange"/>
28-
29-
</div>
21+
<input class="w-full block form-control form-select form-control-sm form-select-bordered"
22+
:class="{ 'w-full': filter.options.fullWidth }"
23+
name="to"
24+
:type="filter.options.inputType"
25+
:placeholder="filter.options.toPlaceholder"
26+
v-model="value.to"
27+
@change="handleChange"/>
3028

3129
</div>
3230

31+
</div>
32+
3333
</template>
3434

3535
<script>
36+
export default {
37+
name: 'RangeInputFilter',
38+
props: {
39+
resourceName: {
40+
type: String,
41+
required: true
42+
},
43+
filterKey: {
44+
type: String,
45+
required: true
46+
}
47+
},
48+
methods: {
49+
handleChange(event) {
50+
51+
this.$store.commit(`${ this.resourceName }/updateFilterState`, {
52+
filterClass: this.filterKey,
53+
value: {
54+
...this.value,
55+
[ event.target.name ]: event.target.value
56+
}
57+
})
3658
37-
export default {
38-
name: 'RangeInputFilter',
39-
props: {
40-
resourceName: {
41-
type: String,
42-
required: true
43-
},
44-
filterKey: {
45-
type: String,
46-
required: true
47-
}
48-
},
49-
methods: {
50-
handleChange(event) {
51-
52-
/**
53-
* Dont refresh the page if user is still typing the values
54-
*/
55-
if (Number.isNaN(parseInt(this.value.from)) !==
56-
Number.isNaN(parseInt(this.value.to))) {
57-
58-
return
59-
60-
}
61-
62-
this.$store.commit(`${ this.resourceName }/updateFilterState`, {
63-
filterClass: this.filterKey,
64-
value: {
65-
...this.value,
66-
[ event.target.name ]: event.target.value
67-
}
68-
})
69-
70-
this.$emit('change')
59+
this.$emit('change')
7160
72-
}
73-
},
74-
computed: {
75-
filter() {
76-
return this.$store.getters[ `${ this.resourceName }/getFilter` ](this.filterKey)
77-
},
78-
value() {
79-
return { ...this.filter.currentValue } || { from: '', to: '' }
80-
}
81-
}
8261
}
62+
},
63+
computed: {
64+
filter() {
65+
return this.$store.getters[ `${ this.resourceName }/getFilter` ](this.filterKey)
66+
},
67+
value() {
68+
return { ...this.filter.currentValue } || { from: '', to: '' }
69+
}
70+
}
71+
}
8372
84-
</script>
73+
</script>

‎resources/js/filter.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import RangeInputFilter from './components/RangeInputFilter'
2-
import RangeDateFilter from './components/RangeDateFilter'
3-
41
Nova.booting((Vue, router, store) => {
5-
Vue.component('range-input-filter', RangeInputFilter)
6-
Vue.component('range-date-filter', RangeDateFilter)
2+
Vue.component('range-input-filter', require('./components/RangeInputFilter').default)
3+
Vue.component('range-date-filter', require('./components/RangeDateFilter').default)
74
})

‎webpack.mix.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
const mix = require('laravel-mix')
22

3+
require('./nova.mix.js');
4+
35
mix.setPublicPath('dist')
4-
.js('resources/js/filter.js', 'js')
6+
.js('resources/js/filter.js', 'js')
7+
.vue({ version: 3})

0 commit comments

Comments
 (0)