Package: quasargui
#QuasarGUI
A user-friendly package for making awesome-looking desktop apps in Python.Read thefull documentationhere.Compatibility:It runs flawlessly on Mac, 10.13.6+ (High Sierra or newer).Linux compatibility: unknown, it depends oncefpython3's andpywebview's linux compatibility.Windows compatibility: compatible with Windows 7, on Windows 10pywebviewdid not work (2021-07-30).Usage:This GUI library creates a window with a html view, in which Quasar Vue system is running. But don't worry, you can build up everything in python.A window is built up of Component's and the components correspond to components described in (https://quasar.dev/vue-components/). Quasar is very well-documented and so it makes this project well-documented. From Quasar's help page you can use all props, classes, as well as you can easily customize the look of your Components using CSS.You can react to user events using callbacks. (See: simple greeter app.)###Hello worldimportquasarguifromquasarguiimport*layout=QLayout(["Hello World!"])quasargui.run(layout)###Simple greeter appThis app demonstrates how you can build up a simple form and use the form's data to run your code.importquasarguifromquasarguiimportDiv,QInput,QButton,Modelname=Model()defdisplay_notification():layout.api.plugins.notify(message=f'Hello,{name.value}!')layout=Div(styles={'max-width':'30em','margin-left':'auto','margin-right':'auto'},classes='q-mt-xl q-pt-lg text-center',children=["What's your name?",QInput('Name',name),QButton('Submit',classes='text-primary',props={'size':'lg'},events={'click':display_notification})])quasargui.run(layout)# Shows a window with the layout.If you're interested how you can easily style buttons, check outQuasar's button apiQuasar's input apiFrom Quasar's pageany prop can be added to the corresponding quasargui component's props,any classes can be added to classes andany events can be added to events (without the @).Dynamic props (on Quasar's page it is in ":prop" format) can be added usingModel:fromquasarguiimport*my_value=Model('my str')props={'string-prop':my_value}Model works with any json-like type (str, bool, int, list, dict).See further examples in the examples folder.Installation:At the moment this project is just a demo, featuring only a few components,
but it will be available on pip soon.Dependencies:pywebviewLicense:MIT licenseConcepts of quasarguiQuasargui package closely follows the structure of Quasar, and you can also easily integrate any Vue component. The most important is to have handy defaults so you only need to write code when you want to customize.The GUI builds up itself fromComponent's andModel's. To understand the logic of all components, let's examine a typical component.fromquasarguiimport*loading=Model(False)defconnect():loading.value=True;print('Connect button clicked')button=QButton(label='Connect',classes='q-ma-md',styles={'opacity':0.8},props={'no-caps':True,'loading':loading},events={'click':connect},children=[Slot('loading',[QSpinner(appearance='dots')])])In Vue,button's definition corresponds to:<q-buttonlabel="Connect"class="q-ma-md"styles="opacity: 0.8":no-caps="true":loading="loading"@click="connect"><templatev-slot:loading><q-spinner-dots></q-spinner-dots></template></q-button>The common attributes of aComponentare:classes: custom css classes, separated by space (html class attribute)styles: custom styles applied (html style attribute)props: all the quasar attrs (no-caps is a constant attribute, loading is an  attribute that is bound to a variable.)events: all the quasar "@" attrs. Events call the assigned callback in python.children: are list of the html children, everything that is between .... So,slotsare also set here withSlot('slot-name', [...list of children...]).Convenience:Argument order follows convenience. Some commonly used props of a component such aslabelare given a "shortcut" parameter, and even put into first position, so you don't need to type out its name.WritingQButton('OK')is the same asQButton(props={'label': 'OK'})but more concise.Type system:All arguments are typed so you can catch most of the errors with a type-checker. This is the benefit of having props and events separated.Formulas: If there's a formula in a Vue attribute, you need to useComputed.
If the componentrequiresJavaScript function to be used, you can resort toJSRaw.fromquasarguiimport*x,y=Model(2),Model(3)QInput(label=Computed(lambdax,y:f'{x}+{y}=',x,y),props={'rules':JSRaw("[value => value>0 || 'Enter a positive number']")})Vue directives:If a component works withv-modelthen you can access it via themodelparameter. Otherv-'s such asv-ifcan be accessed as props.
Additionally,prop modifiersare simply put after the prop name as in Vue.Computed values:ModelandComputedwork like an excel sheet, whereModelis the normal data,Computedare the formulas. Everytime aModelchanges, it updates all its dependentComputedvalues. You can also hook intoModel's changes by adding a callback:fromquasarguiimport*model=Model()model.add_callback(lambda:print('model changed'))Convenience classesFor all the typical Python data-types quasargui package has a Component, designed to provide a convenient input.basic types: InputStr, InputInt, InputFloat, InputBool, InputListlist: InputList -  tags, multi-select or checkboxes.choices: InputChoice - radio, button-group or select.file path: InputFile.datatime (data, time and datatime): InputDate, InputTime, InputDataTime are  input fields with calendar/clock popup.hex color: InputColorOverriding defaultsSome other components try and guess your intent (QDrawer adds a sandwich menu button for itself, QHeader wraps its arguments into QToolbar&ToolbarTitle if necessary.)However, every automatic guess and default can be overridden. Some have parameter to disable (eg. automatic sandwich menu for QDrawer).
In components that have defaults, you can override default withdel YourComponent.defaults['props']['your-prop'].To remove a slot, addRemoveSlot('name')tochildren.Detailed documentationRead thefull documentationhere.