typefox/langium-ui-framework

A DSL for generating user interfaces, built with Langium

langium-ui-framework's Issues

Handle nested CSS

Example:

.center {}

.center > a {}

Current behavior: If the center class is called inside of a html element, only the rule for .center will be in the final stylesheet.

Expected behavior: When the center class is added to a html element, all nested rules should also be added.

Put the topbar / footer CSS style in the base.css file.

Then we could copy the CSS only if the topbar or footer is used.

Fix error in main branch (image attached)

You cannot change the background color of the body currently

Maybe you can set the style of the body at the start of the document like

background: black

Import other .sui file

It would be a very cool feature if you could import other .sui files and use all components from this file

import example
will import all components from
example.sui

Autocompletion for CSS classes

For now, the autocompletion for the CSS classes is hardcoded into the grammar.

We need to move the autocompletion logic into the LSP with custom services

Give components custom variables

It would be cool if you could give components variables like

component example variables[title, text] {
    div classes[border, hidden-border, shadow] {width: "50%"} {
        heading $title level: 4
        paragraph $text{ width: "50%"}
    }
}

And use the component like this

usecomponent example ["Title", "Lorem ipsum dolor sit amet"]

Maybe that's too advanced for now but it would be a very cool feature.

Create a footer

Create a footer like the topbar but on the bottom

Issues with the Prebuild step

Just found out that if the assets directory is empty or doesn't exist it will cancel the build process because the 'cp' command returns an error due to the folder being empty or not existing.

This error currently does not exist in the main branch but we should change it where it exists so that it won't become a problem later

Look at the attached fan art

I was bored yesterday so I created a simple icon as fan art.

Create a watch option to auto generate your code.

Who: Emil
Status: DONE

Improve JavaScript integration

At the moment we only have basic stuff like functions and popups (alerts) so we need to add some JavaScript functionality.

The Goal is to have some JavaScript "Toys" like changing CSS properties with the press of a button or with a Timer.
These JavaScript Toys should be simple, not to Specific and also visual so the end-user can see that it's doing something.

Set a .sui file as target of a link

Maybe like
link: "homepage.sui"
This should automatically generate
<a href="homepage.html">homepage</a>
and generate the sui file

Refactoring grammar

For now the grammar is very repetitive and is getting more and more difficult to scale and maintain.

Need to be refactored so it is easier to implement new features without having to modify the existing ones.

Add possibility to section a page

The idea is to have the possibility to add

s from the grammar.

These sections could later be referenced for the navigation in the header/footer

Improve Html encoding

It only does
< becomes >
> becomes <
in the current pull request.

I will try something like this: Jsfiddle

Create highlevel CSS

Create examples for general purpose styles for advanced and easy use of CSS (maybe like Tailwind or Flutter)

Write a README.md

In order to explain to others how to use SimpleUI, we should write a README.md file.

Create autocompletion also for CSS Properties

We should add autocompletion also for CSS Properties.