Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
luisa-vue
Advanced tools
Readme
The Luisa framework is an open-source project that turns Figma and Quant-UX designs into fully functional VUE3 applications. By ensuring that the design stays the single source of truth, Vue-Low-Code reduces the need for design hand-offs and front-end code significantly.
You can find the documentation at Luisa.cloud.
If you want to reach out please use the Contact page or Discord
A constant pain point during the development of an application is the hand-off between the design and the development team. Often this process is not frictionless. The design team creates a set of graphics and prototypes, which serve as the source of truth and specification for the development team. The development team implements the visual design in the desired technology, which includes the translation of the design into front-end code and business logic, as well as the wiring between the two. As the development evolves, the implementation becomes a second source of truth, and keeping the design and the code base in sync can be a painful exercise.
The core of the solution is the Luisa component which reads the visual design and creates the front-end automatically on the fly. As a result, changes in the design are immediately updated in the application. The wiring between the front-end component and the business logic is achieved through method and data binding, which is defined in a Figma plugin or a dedicated view in Quant-UX.
As a result, Developers can focus on business logic and backend connectivity, while the design team can iterate fast through different ideas, without impacting the development team.
In summary, the Luisaproject provides the following benfefits:
More information can be found here
Table of contents
First, you have to install the Luisa package via NPM
npm i luisa-vue@3
In the full mode the or component are used to render the entire front end. The first step is top register these components in Vue. The following section will use Quant-UX design as an example. For Figma, please check the Figma-Low-Code repo.
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import luisa from 'luisa-vue'
const app = createApp(App)
app.use(router).mount('#app')
app.use(luisa)
Now you can start including the component, for instance in your home components. You have to pass your Quant-UX prototype to the component, so it knows what to render. You can either pass a javascrit object or a share key
<Luisa :design="app"/>
You can optain the share key from the http://quant-ux.com website by clicking share in the canvas menu. In general the share key is best for development. Updates in Quant-UX will be immediatly visible after a page reload. However, for production you should pass an app object. You can download the app json with the luisa command line interface:
npm install luisa-util
Now you can call quant-ux on the command line. Please pass the share key and select download. The json file will be loaded and all images will be stored in the public folder
npm run download
Please note that home component should be wrapped by a router-view, otherwise navigation will not work. If you use VUE-CLI to bootrap the project, everything will be configured out of the box.
<div id="app">
<router-view/>
</div>
Last, you have to update your router to delegate all routes to home.
const routes = [
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
},
{
path: '/:screenName.html',
name: 'qux',
component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
}
]
The default paramter QUX will look for is 'screenName'.
You can configure certain parameters, e.g. the routing rules. To do so, pass a config object to the qux component.
<QUX :design="app" :config="config"/>
The config object can have the following properties and hsould be defined in the data section of the home component.
config: {
css: {
grid: true, // Use CSS grid to align objects. False will use CSS-Flex.
justifyContentInWrapper: true // In justifz or left align content in wrapped elements
},
router: {
key: 'id', // alternative routing parameter
prefix: 'qux' // path prefix that will be used when rendering links
}
}
QUX-LowCode supports VUE data binding. You have to pass a v-model to the QUX component. The databindings for the widgets must be defined in the Quant-UX canvas.
<Luisa :design="app" v-model="view-model"/>
In the Quant-UX canvas you can define javascript callbacks for the widgets. Place the methods in the parent compoent of QUX. The method will have the following signature:
myMethod (value, element, e) {
...
}
If a method returns a string, matching a screen name, the QUX will navigate to this screen.
myMethod (value, element, e) {
...
// navigate to screen 2
return 'Screen2'
}
Sometimes you want to render a certain part of the UI by your self, or replace existing widgets with custom implementations. These components will be used at the specified screen location instead of the default QUX component. This approach allows you to fully manage certain parts of the UI. Data is passed as a value property and follows default VUE practices.
<Luisa :design="app" :config="config"/>
...
import MyWidget from 'src/myWidget'
...
config = {
components: {
'myCustomComponent': MyWidget
}
}
You can set the name of the custom component in the data view in Quant-UX.
Sometimes you might not want to render the entire prototype, but just a small subsection, e.g. a dialog. You can do this by using the 'selected' property. Enter the name of the component to show. Please make sure, that the name is unique. You can also use several instances if the QUX component in your template.
<Luisa
:design="app"
:config="config"
v-model="viewModel"
selected="LoginBox"
/>
<Luisa
:design="app"
:config="config"
v-model="viewModel"
selected="SignupBox"
/>
If you are using the Quant-UX icons components, you have to install the mdi-font package.
npm install @mdi/font
Afterwards import the icons in the App.vue
import '@mdi/font/css/materialdesignicons.css'
You can define the data binding and the callbacks in the normal Quant-UX designer. Before you start, you have to enable the Beta features. To do so:
To set the code properties perform the following steps:
Vue-Low-Code apps are to some degree responsive, depending on the constraints that affre defined in Quant-UX or Figma. In addtion you can define min and max widths, and determine the flow of child components (Grid vs Flex).
However, sometimes this is not enough and one needs different UIs for different devices. Vue-Low-Code allows you to specify for each device type a different app. By doing this, you have to complete freedom to design for each device type, without worrying too much about the responsive behavior. Also, this approahc allows you to provide completly different navigation patters, e.g. a hamburger menu on mobile and a central navbar on desktop.
To enable the responsive behavior do:
<Luisa :design="apps"/>
...
let apps = {
mobile: <key or object>,
tablet: <key or object>
desktop: <key or object>
}
You can pass weather the share key or the downloaded app json. Again, the share key is great for development, but for production you should download the artifacts.
We envision the following workflow to enable painless collaboration between designers and developers:
For fixes and improvements please clone the repository and submit pull requests.
npm install
Build:
npm run export
FAQs
Luisa - VUE Renderer for FIGMA designs. Turn your Figma or Quant-UX design into VUE, or create re-usable designlets
The npm package luisa-vue receives a total of 25 weekly downloads. As such, luisa-vue popularity was classified as not popular.
We found that luisa-vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.