B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

Dim continents As List
    continents.initialize
    continents.add(CreateMap("id":"africa", "text":"Africa"))
    continents.add(CreateMap("id":"america", "text":"America"))
    continents.add(CreateMap("id":"newzeleand", "text":"New Zealand"))
    vm.setstatesingle("continents", continents)

    Dim rg2 As VMRadioGroup = vm.CreateRadioGroup("rg2", "DataSource", Me).SetVModel("ds")
    rg2.SetDataSource("continents", "id", "text")
    rg2.AddToContainer(cont, 2, 1)

Sub rg2_change(value As Object)
    vm.showsnackbar(value)
End Sub

Dim txtQty As VMInput = vm.CreateInput("txtqty", Me).SetLabel("Quantity").SetVModel("qty").SetTypeNumber(True)
    Dim txtRate As VMInput = vm.CreateInput("txtrate", Me).SetLabel("Rate").SetVModel("rate").SetTypeNumber(True)
    Dim txtTotal As VMInput = vm.CreateInput("txttotal", Me).SetLabel("Total").SetVModel("total").SetTypeNumber(True)

'set computed for the total
Sub ComputeTotal
    'get the qty
    Dim iQty As Int = vm.getstate("qty",0)
    'get the rate
    Dim iRate As Int = vm.getstate("rate", 0)
    'calculate total
    Dim iTot As Double = BANano.parseint(iQty) * BANano.parseFloat(iRate)
    'format the amout
    iTot = Round(iTot, 2)
    'save the total
    vm.SetStateSingle("total", iTot)
End Sub

vm.SetWatch("qty", True, False, Me, "computetotal")
    'we want t watch for changes in rate
    vm.SetWatch("rate", True, False, Me, "computetotal")

Dim mthing As VueThing
    mthing.Initialize("VM", "EditDialog", "v-edit-dialog")
    mthing.AddProperties(Array("cancel-text", "dark", "eager", "large", "light", "persistent", _
    "return-value", "save-text", "transition"))
    mthing.AddSlots(Array("input"))
    mthing.AddEvents(Array("cancel", "close", "open", "save"))
    mthing.Create

'set for
Sub SetVFor(item As String, dataSource As String) As ClassPrefix<vi>
    dataSource = dataSource.tolowercase
    item = item.tolowercase
    Dim sline As String = $"${item} in ${dataSource}"$
    SetAttrSingle("v-for", sline)
    Return Me
End Sub

'set for
Sub SetVFor(item As String, dataSource As String) As ClassPrefix<vi>
    dataSource = dataSource.tolowercase
    item = item.tolowercase
    Dim sline As String = $"${item} in ${dataSource}"$
    SetAttrSingle("v-for", sline)
    Return Me
End Sub

Sub InputDialog As VMDialog
    Dim user As Map = CreateMap()
    vm.SetData("user", user)
    '
    Dim diag As VMDialog = vm.CreateDialog("inputdialog", Me)
    diag.SetModal(True)
    diag.SetWidth("800px")
    diag.SetTitle("Input Dialog")
    diag.Container.AddRows(7).AddColumns2x6
    '
    Dim chkAgree As VMCheckBox = vm.CreateCheckBox("chkAgree1", Me).SetVModel("user.agree").SetLabel("I agree")
    Dim dob As VMDatePicker = vm.CreateDatePicker("dob", Me).SetVModel("user.dob").SetLabel("Date of Birth").SetForInput
    Dim fi As VMFileInput = vm.CreateFileInput("myfile", Me).SetAccept("image/*").SetLabel("File input").SetVModel("user.myfile")
    Dim rg1 As VMRadioGroup = vm.CreateRadioGroup("gender", Me).SetVModel("user.gender").SetHorizontal(True).SetLabel("Gender")
    rg1.SetOptions(CreateMap("m":"Male","f":"Female"))
    Dim selx As VMSelect = vm.CreateSelect("code", Me).SetItems("items").SetLabel("Code").SetVModel("user.code")
    Dim age As VMSlider = vm.CreateSlider("age", Me).SetVModel("user.age").SetMin("0").SetMax("100").SetLabel("Age").SetThumbLabel("always").SetValue("46")
    Dim swt As VMSwitch = vm.CreateSwitch("notif", Me).SetLabel("Receive Notifications").SetVModel("user.notif")
    Dim txtm As VMTextArea = vm.CreateTextArea("about", Me).SetLabel("About Yourself").SetVModel("user.about")
    Dim txtfn As VMTextField = vm.CreateTextField("fn", Me).SetLabel("First Name").SetVModel("user.fn").SetHint("Enter a first name").SetPersistentHint(True).SetClearable(True).SetMaxLength(50)
    Dim ac1 As VMAutoComplete = vm.CreateAutoComplete("ln", Me).SetVModel("user.ln").Bind(":items", "items").SetLabel("Last Name")
    Dim a3 As VMAvatar = vm.CreateAvatar("dp", Me).SetImage("./assets/sponge.png", "Sponge")
    Dim tp2 As VMTimePicker = vm.CreateTimePicker("tob", Me).SetVModel("user.tob").SetLabel("Time of Birth").SetForInput
    Dim cbo1 As VMComboBox = vm.CreateComboBox("combox", Me).SetVModel("user.combo").SetItems("items").SetLabel("Select a favourate activity or create a new one")
    Dim pwd As VMTextField = vm.CreateTextField("pwd", Me).SetLabel("Password").SetPassword(True).SetName("password",False).SetVModel("user.pwd").SetHint("At least enter 8 characters.")
    pwd.SetCounter(8)
   
    diag.Container.AddComponent(1, 1, chkAgree.ToString)
    diag.Container.AddComponent(1, 2, dob.tostring)
    diag.Container.AddComponent(2, 1, fi.tostring)
    diag.Container.AddComponent(2, 2, rg1.tostring)
    diag.Container.AddComponent(3, 1, selx.tostring)
    diag.Container.AddComponent(3, 2, age.tostring)
    diag.Container.AddComponent(4, 1, swt.tostring)
    diag.Container.AddComponent(4, 2, txtm.tostring)
    diag.Container.AddComponent(5, 1, txtfn.tostring)
    diag.Container.AddComponent(5, 2, ac1.tostring)
    diag.Container.AddComponent(6, 1, a3.tostring)
    diag.Container.AddComponent(6, 2, tp2.tostring)
    diag.Container.AddComponent(7, 1, cbo1.tostring)
    diag.Container.AddComponent(7, 2, pwd.tostring)
    '
    diag.AddCancel("btnCancelIt", "Cancel")
    diag.AddOK("btnSaveIt", "Save")
    Return diag
End Sub

Sub Code
    vm = pgIndex.vm
    'create a container to hold all contents
    Dim cont As VMContainer = vm.CreateContainer(name, Me)
    'hide this container
    cont.Hide
    '
    Dim switch As VMSwitch = vm.NewSwitch("switch1", "Radio", "Yes", "No", True, 0).SetDevicePositions(1, 1, 12, 6, 6, 6)
    cont.AddControl(switch.SwitchBox, switch.ToString)
    '
    Dim radiogroup As VMRadioGroup = vm.NewRadioGroup("radiogroup", "Gender", "f", CreateMap("m":"Male","f":"Female"), 0).SetDevicePositions(1, 2, 12, 6, 6, 6)
    radiogroup.SetHorizontal(True)
    cont.AddControl(radiogroup.RadioGroup, radiogroup.ToString)
    '
    Dim checkbox As VMCheckBox = vm.NewCheckBox("checkbox", "I concur!", "Yes", "No", True, 0).SetDevicePositions(1, 3, 12, 6, 6, 6)
    cont.AddControl(checkbox.CheckBox, checkbox.ToString)
    '
    Dim datepicker As VMDatePicker = vm.NewDatePicker("datepicker", "Date Picker", True, "Select a Date Picker", "This date", 0).SetDevicePositions(1, 4, 12, 6, 6, 6)
    cont.AddControl(datepicker.DatePicker, datepicker.ToString)
    '
    Dim timepicker As VMTimePicker = vm.NewTimePicker("timepicker", "Time Picker", True, "Select a time Picker", "This time", 0).SetDevicePositions(2, 1, 12, 6, 6, 6)
    cont.AddControl(timepicker.TimePicker, timepicker.ToString)
    '
    Dim slider As VMSlider = vm.NewSlider("slider", "Slider", 0, 100, 0).SetDevicePositions(2, 2, 12, 6, 6, 6)
    cont.AddControl(slider.Slider, slider.ToString)
    '
    'add container to page
    vm.AddContainer(cont)
End Sub

Sub NewSwitch(sname As String, slabel As String, svalue As Object, sunchecked As Object, bPrimary As Boolean, iTabIndex As Int) As VMSwitch
    sname = sname.tolowercase
    Dim actName As String = sname
    Dim actID As String = sname
    If sname.IndexOf(".") >= 0 Then
        actName = MvField(sname,2,".")
    End If
    Dim el As VMSwitch = CreateSwitch(actName, module)
    el.SwitchBox.ActualID = actID
    el.SetVModel(actName)
    el.Setlabel(slabel)
    el.SetTrueValue(svalue)
    el.SetPrimary(bPrimary)
    el.SetFalseValue(sunchecked)
    el.SetTabIndex(iTabIndex)
    el.SwitchBox.Host = $"${actName}field"$
    Return el
End Sub

vm.SetLocale("ar")

vm.CreateAlert("a8", Me, "").SetContent("You've got {B}5{/B} new updates on your timeline!.").SetIcon("mdi-twitter") _
    .SetDismissible(True).SetBorder("left").SetColoredBorder(True).SetOutlined(True).SetColor(vm.COLOR_CYAN).SetElevation(2).AddToContainer(cont, 1, 2)

Dim banner1 As VMBanner = vm.CreateBanner("banner1", Me).SetTwoLine(True)
    Dim avat As VMAvatar = vm.CreateAvatar("avat1", Me).SetSlot("icon").SetSize("40").SetColorIntensity(vm.COLOR_DEEPPURPLE, vm.INTENSITY_ACCENT4)
    avat.SetIcon("mdi-lock","", CreateMap("color" : "white"), Null, Null)
    '
    banner1.AddComponent(avat.ToString)
    banner1.SetText(vm.Fake.Rand_LoremIpsum(1))
    banner1.AddAction(vm.CreateButton("btnDismis", Me).SetLabel("Dismiss").SetPrimary(True).SetTransparent(True))
    banner1.AddAction(vm.CreateButton("btnRetry", Me).SetLabel("Retry").SetPrimary(True).SetTransparent(True))
    '
    banner1.SetOnClickIcon("checkConnection")
    
    cont.AddComponent(1, 2, banner1.ToString)

Sub checkConnection(e As BANanoEvent)
    vm.showsnackbar("Check connection!")
End Sub

Dim bn3 As VMBottomNavigation = vm.CreateBottomNavigation("bn3", Me).SetVModel("bottomNav").SetDark(True).SetShift(True)
    '
    Dim btnRecent2 As VMButton = vm.CreateButton("btnRecent2", Me).SetValue("recent")
    btnRecent2.AddComponent(vm.CreateLabel("").SetSpan.SetText("Recent").tostring)
    btnRecent2.AddComponent(vm.CreateIcon("", Me, "mdi-history").tostring)
    bn3.AddComponent(btnRecent2.ToString)
    '
    Dim btnFav2 As VMButton = vm.CreateButton("btnFav2", Me).SetValue("favorites")
    btnFav2.AddComponent(vm.CreateLabel("").SetSpan.SetText("Favorites").tostring)
    btnFav2.AddComponent(vm.CreateIcon("", Me, "mdi-heart").tostring)
    bn3.AddComponent(btnFav2.ToString)
    '
    Dim btnNear2 As VMButton = vm.CreateButton("btnNear2", Me).SetValue("nearby")
    btnNear2.AddComponent(vm.CreateLabel("").SetSpan.SetText("Nearby").tostring)
    btnNear2.AddComponent(vm.CreateIcon("", Me, "mdi-map-marker").tostring)
    bn3.AddComponent(btnNear2.ToString)
    '
    cont.AddComponent(2, 1, bn3.tostring)

Sub BottomSheet2 As VMBottomSheet
    Dim bs As VMBottomSheet = vm.CreateBottomSheet("bs2", Me).SetVModel("bs2").SetInset(True)
    Dim s As VMSheet = vm.CreateSheet("s2", Me).SetTextCenter.SetHeight("200px")
    '
    s.Container.AddRows(1).AddColumns12
    '
    Dim lbl As VMLabel = vm.CreateLabel("lbl2").SetText("This is a botto sheet using inset prop!").SetParagraph
    s.Container.AddComponent(1, 1, lbl.ToString)
    '
    Dim btnClose As VMButton = vm.CreateButton("btnCloseSheet2", Me).SetLabel("Close Sheet")
    s.Container.AddComponent(1, 1, btnClose.ToString)
    '
    bs.AddComponent(s.ToString)
    Return bs
End Sub