Add EnumInput (WIP)

- Also Slight linting adjustment
- Slight form style adustment
- Visually descendant fields version
This commit is contained in:
adro 2023-10-31 22:52:58 +01:00
parent b3bfbefa5a
commit 7d2ef675f7
4 changed files with 101 additions and 1 deletions

View file

@ -3,6 +3,8 @@ 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,9 +30,20 @@ function genSP(indexIsChar: boolean): SearchProvider {
<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: {
'dhcp': { display: 'DHCP' },
'static-ipv4': {
display: 'Static (IPV4)',
fields: {
ip: { is: TextBox, label: 'IP Address + CIDR' },
gw: { is: TextBox, label: 'Gateway Address' },
},
},
}}},
}" v-model="vm"/>
{{ vm }}
<button @click="() => { vm.Multiple = [1]; }">Click me</button>
<button @click="() => { vm.Multiple = [42]; }">Click me but EEEEVIL</button>
<button @click="() => { vm.IP = {'static-ipv4': {ip: '192.168.69.2/24', gw: '192.168.69.1' }} }">Click me but kinda pog wth</button>
</div>
</template>