Skip to content

Commit 4a5b54b

Browse files
fiahfyfiahfy
committed
Use vue-composition-api
1 parent 62f6132 commit 4a5b54b

11 files changed

+302
-229
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
"url": "https://fiahfy.github.io/"
99
},
1010
"dependencies": {
11+
"@vue/composition-api": "^1.0.0-beta.3",
1112
"nanoid": "^3.1.10",
1213
"vue": "^2.6.11",
13-
"vue-property-decorator": "^9.0.0",
1414
"vuetify": "^2.3.4",
1515
"vuex": "^3.5.1",
1616
"vuex-module-decorators": "^0.17.0",

‎src/components/RuleDialog.vue

+107-66
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,161 @@
11
<template>
2-
<v-dialog v-model="dialog" max-width="480">
3-
<v-form ref="form" v-model="valid" lazy-validation>
2+
<v-dialog v-model="state.dialog" max-width="480">
3+
<v-form ref="form" v-model="state.valid" lazy-validation>
44
<v-card>
55
<v-card-title primary-title>
66
<span class="title" v-text="title" />
77
</v-card-title>
88
<v-card-text>
99
<v-select
10-
v-model="formInputs.field"
10+
v-model="state.formInputs.field"
1111
:items="fields"
1212
label="Field"
1313
dense
1414
class="pt-3"
1515
/>
1616
<v-select
17-
v-model="formInputs.condition"
17+
v-model="state.formInputs.condition"
1818
:items="conditions"
1919
label="Condition"
2020
dense
2121
class="pt-3"
2222
/>
2323
<v-text-field
24-
v-model="formInputs.value"
24+
v-model="state.formInputs.value"
2525
:rules="valueRules"
2626
label="Value"
2727
:placeholder="placeholder"
2828
required
2929
autofocus
3030
/>
3131
<v-select
32-
v-model="formInputs.action"
32+
v-model="state.formInputs.action"
3333
:items="actions"
3434
label="Action"
3535
dense
3636
class="pt-3"
3737
/>
3838
<v-switch
39-
v-model="formInputs.active"
40-
:label="formInputs.active ? 'Active' : 'Inactive'"
39+
v-model="state.formInputs.active"
40+
:label="state.formInputs.active ? 'Active' : 'Inactive'"
4141
/>
4242
</v-card-text>
4343
<v-card-actions>
4444
<v-spacer />
45-
<v-btn text @click.native="onClickClose">Cancel</v-btn>
46-
<v-btn color="primary" text @click.native="onClickSave">Save</v-btn>
45+
<v-btn text @click.native="handleClickClose">Cancel</v-btn>
46+
<v-btn color="primary" text @click.native="handleClickSave">
47+
Save
48+
</v-btn>
4749
</v-card-actions>
4850
</v-card>
4951
</v-form>
5052
</v-dialog>
5153
</template>
5254

5355
<script lang="ts">
54-
import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
56+
import {
57+
defineComponent,
58+
computed,
59+
ref,
60+
reactive,
61+
watch,
62+
SetupContext,
63+
} from '@vue/composition-api'
5564
import { VForm } from 'vuetify/lib'
5665
import Rule from '~/models/rule'
5766
58-
@Component
59-
export default class RuleDialog extends Vue {
60-
@Prop({ type: Boolean, required: true }) readonly value!: boolean
61-
@Prop({ type: Object, default: () => ({}) }) readonly inputs!: object
62-
@Prop({ type: String, default: 'New Rule' }) readonly title!: string
63-
@Ref() readonly form!: typeof VForm
67+
const fields = [
68+
{ text: 'Author', value: 'author' },
69+
{ text: 'Message', value: 'message' },
70+
]
71+
const conditions = [
72+
{ text: 'Contains', value: 'contains' },
73+
{ text: 'Matches Regular Expression', value: 'matches_regular_expression' },
74+
]
75+
const actions = [
76+
{ text: 'Mask Message', value: 'mask_message' },
77+
{ text: 'Hide Completely', value: 'hide_completely' },
78+
]
79+
const valueRules = [(v: string) => !!v || 'Value is required']
6480
65-
fields = [
66-
{ text: 'Author', value: 'author' },
67-
{ text: 'Message', value: 'message' },
68-
]
69-
conditions = [
70-
{ text: 'Contains', value: 'contains' },
71-
{ text: 'Matches Regular Expression', value: 'matches_regular_expression' },
72-
]
73-
actions = [
74-
{ text: 'Mask Message', value: 'mask_message' },
75-
{ text: 'Hide Completely', value: 'hide_completely' },
76-
]
77-
valueRules = [(v: string) => !!v || 'Value is required']
78-
valid = false
79-
dialog = false
80-
formInputs: Partial<Rule> = {}
81+
type Props = {
82+
value: boolean
83+
title: string
84+
inputs: Partial<Rule>
85+
}
8186
82-
get placeholder() {
83-
return this.formInputs.condition === 'contains' ? 'Text' : 'Pattern'
84-
}
87+
export default defineComponent({
88+
props: {
89+
value: {
90+
type: Boolean,
91+
required: true,
92+
},
93+
title: {
94+
type: String,
95+
default: 'New Rule',
96+
},
97+
inputs: {
98+
type: Object,
99+
default: () => ({}),
100+
},
101+
},
102+
setup(props: Props, context: SetupContext) {
103+
const state = reactive<{
104+
valid: boolean
105+
dialog: boolean
106+
formInputs: Partial<Rule>
107+
}>({
108+
valid: false,
109+
dialog: false,
110+
formInputs: {},
111+
})
85112
86-
@Watch('value')
87-
onValueChanged(value: boolean) {
88-
this.dialog = value
89-
if (value) {
90-
this.formInputs = {
91-
active: true,
92-
field: 'message',
93-
condition: 'contains',
94-
action: 'mask_message',
95-
...this.inputs,
96-
}
113+
const placeholder = computed(() =>
114+
state.formInputs.condition === 'contains' ? 'Text' : 'Pattern'
115+
)
116+
117+
const form = ref<typeof VForm>()
118+
119+
const handleClickClose = () => {
120+
context.emit('update:inputs', undefined)
121+
context.emit('input', false)
97122
}
98-
}
99-
@Watch('dialog')
100-
onDialogChanged(value: boolean) {
101-
if (!value) {
102-
this.$emit('update:inputs', null)
123+
const handleClickSave = () => {
124+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
125+
if (!(form.value as any).validate()) {
126+
return
127+
}
128+
context.emit('update:inputs', { ...state.formInputs })
129+
context.emit('input', false)
103130
}
104-
this.$emit('input', value)
105-
}
106131
107-
onClickClose() {
108-
this.$emit('update:inputs', null)
109-
this.$emit('input', false)
110-
}
111-
onClickSave() {
112-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
113-
if (!(this.form as any).validate()) {
114-
return
132+
watch(
133+
() => props.value,
134+
(value) => {
135+
state.dialog = value
136+
if (value) {
137+
state.formInputs = {
138+
active: true,
139+
field: 'message',
140+
condition: 'contains',
141+
action: 'mask_message',
142+
...props.inputs,
143+
}
144+
}
145+
}
146+
)
147+
148+
return {
149+
fields,
150+
conditions,
151+
actions,
152+
valueRules,
153+
state,
154+
placeholder,
155+
form,
156+
handleClickClose,
157+
handleClickSave,
115158
}
116-
this.$emit('update:inputs', { ...this.formInputs })
117-
this.$emit('input', false)
118-
}
119-
}
159+
},
160+
})
120161
</script>

‎src/components/RuleTabItem.vue

-32
This file was deleted.

‎src/components/RuleTable.vue

+28-24
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,44 @@
66
:items-per-page="-1"
77
hide-default-footer
88
>
9-
<rule-table-toolbar slot="top" />
10-
<rule-table-row
11-
slot="item"
12-
:key="props.item.id"
13-
slot-scope="props"
14-
:item="props.item"
15-
/>
9+
<template v-slot:top>
10+
<rule-table-toolbar />
11+
</template>
12+
<template v-slot:item="props">
13+
<rule-table-row :item="props.item" />
14+
</template>
1615
</v-data-table>
1716
</template>
1817

1918
<script lang="ts">
20-
import { Vue, Component } from 'vue-property-decorator'
21-
import { settingsStore } from '~/store'
19+
import { defineComponent, computed } from '@vue/composition-api'
2220
import RuleTableRow from '~/components/RuleTableRow.vue'
2321
import RuleTableToolbar from '~/components/RuleTableToolbar.vue'
22+
import { settingsStore } from '~/store'
23+
24+
const headers = [
25+
{ text: 'Field', value: 'field' },
26+
{ text: 'Condition', value: 'condition' },
27+
{ text: 'Value', value: 'value' },
28+
{ text: 'Action', value: 'action' },
29+
{ text: 'Status', value: 'active' },
30+
{ sortable: false },
31+
]
2432
25-
@Component({
33+
export default defineComponent({
2634
components: {
2735
RuleTableRow,
2836
RuleTableToolbar,
2937
},
30-
})
31-
export default class RuleTable extends Vue {
32-
headers = [
33-
{ text: 'Field', value: 'field' },
34-
{ text: 'Condition', value: 'condition' },
35-
{ text: 'Value', value: 'value' },
36-
{ text: 'Action', value: 'action' },
37-
{ text: 'Status', value: 'active' },
38-
{ sortable: false },
39-
]
38+
setup() {
39+
const rules = computed(() => {
40+
return settingsStore.rules
41+
})
4042
41-
get rules() {
42-
return settingsStore.rules
43-
}
44-
}
43+
return {
44+
headers,
45+
rules,
46+
}
47+
},
48+
})
4549
</script>

0 commit comments

Comments
 (0)