speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-11 02:48:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

vee-validate experiments

Browse source
This commit is contained in:
Samuel Lorch 2023-04-02 23:56:14 +02:00
parent 232670f161
commit b319e9573d
2 changed files with 35 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
client/src/main.ts
View file

@ -5,6 +5,13 @@ import './global-styles/mlfe.css';
import './global-styles/transitions.css';
import 'vue-toast-notification/dist/theme-default.css';
import PillBar from "./components/inputs/PillBar.vue";
import TextBox from "./components/inputs/TextBox.vue";
import MultilineTextBox from "./components/inputs/MultilineTextBox.vue";
import CheckBox from "./components/inputs/CheckBox.vue";
import { Form, Field, ErrorMessage } from 'vee-validate';
import App from './App.vue';
import { createHead } from '@vueuse/head';
import { createRouter, createWebHistory } from 'vue-router';
@ -22,4 +29,13 @@ app.use(router);
app.use(head);
app.use(ToastPlugin);
// Global Components
app.component('PillBar', PillBar)
app.component('TextBox', TextBox)
app.component('MultilineTextBox', MultilineTextBox)
app.component('CheckBox', CheckBox)
app.component('ValidationForm', Form)
app.component('Field', Field)
app.component('ErrorMessage', ErrorMessage)
app.mount('#app');

21
client/src/pages/index.vue
View file

@ -4,6 +4,7 @@ import PillBar from "../components/inputs/PillBar.vue";
import TextBox from "../components/inputs/TextBox.vue";
import MultilineTextBox from "../components/inputs/MultilineTextBox.vue";
import CheckBox from "../components/inputs/CheckBox.vue";
import { Form as ValidationForm, Field, ErrorMessage } from 'vee-validate';
async function doShit(){
apiCall("Firewall.GetForwardRules", {});
@ -23,10 +24,26 @@ let fields = $ref([
<PageHeader title="Dashboard">
<button @click="doShit">Example Buttons</button>
</PageHeader>
<NiceForm class="scroll cl-secondary" title="Testasdfdsfsdf" :fields="fields"/>
<ValidationForm class="form">
<Field name="email" as="TextBox" />
<ErrorMessage name="email" />
<Field name="email" as="MultilineTextBox" />
<ErrorMessage name="email" />
</ValidationForm>
</div>
</template>
<style scoped>
.form {
display: grid;
grid-template-columns: auto 1fr;
padding: 0.5rem;
gap: 0.5rem;
}
.form > :is(button, .button, h2) {
grid-column: 1 / 3;
}
.form > :is(label) {
grid-column: 1;
}
</style>