speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-09-13 23:29:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhance EnumInput and Forms

Browse source 
- Soft-Nesting Layout to show structure without too much x-overhead
- Forms now use subgrid where possible
- Generalized form style to cover more cases and remove redundancy
- Minor definitions fix
- Made NicerForm a global component
- Updated Test Page to use global components
This commit is contained in:
adro 2023-11-02 23:53:54 +01:00
parent 864ca6defd
commit bc83309d6d
6 changed files with 47 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,5 @@
<script setup lang="ts">
import SingleSelect from '../components/inputs/SingleSelect.vue';
import { SearchProvider, Options } from '../components/inputs/DropdownInput.vue';
import MultiSelect from '../components/inputs/MultiSelect.vue';
import NicerForm from '../components/inputs/NicerForm.vue';
import EnumInput from '../components/inputs/EnumInput.vue';
import TextBox from '../components/inputs/TextBox.vue';
const testValues: Options = {
1: { display: 'Option 1' },
@ -28,18 +23,24 @@ function genSP(indexIsChar: boolean): SearchProvider {
<div>
<PageHeader title="Test Page"/>
<NicerForm :fields="{
Single: { is: SingleSelect, label: 'SingleSelect', props: { options: testValues, searchProvider: genSP(true) } },
Multiple: { is: MultiSelect, label: 'Multiselect', props: { options: testValues, searchProvider: genSP(false) } },
IP: { is: EnumInput, label: 'IP Address', props: { variants: {
Single: { is: 'SingleSelect', label: 'SingleSelect', props: { options: testValues, searchProvider: genSP(true) } },
Multiple: { is: 'MultiSelect', label: 'Multiselect', props: { options: testValues, searchProvider: genSP(false) } },
IP: { is: 'EnumInput', label: 'IP Address', props: { variants: {
'dhcp': { display: 'DHCP' },
'static-ipv4': {
display: 'Static (IPV4)',
fields: {
ip: { is: TextBox, label: 'IP Address + CIDR' },
gw: { is: TextBox, label: 'Gateway Address' },
ip: { is: 'TextBox', label: 'IP Address (CIDR)' },
gw: { is: 'TextBox', label: 'Gateway Address' },
},
},
}}},
Subform: { is: 'NicerForm', props: { heading: 'Subform', fields: {
Text: { is: 'TextBox', label: 'Text' },
Subform2: { is: 'NicerForm', props: { heading: 'Subform2', fields: {
Text: { is: 'TextBox', label: 'Text' },
} } },
} } },
}" v-model="vm"/>
{{ vm }}
<button @click="() => { vm.Multiple = [1]; }">Click me</button>