oatw / luda

A library helps to build cross-framework UI components.

Luda

Luda is a library helps to build cross-framework UI components.

Luda takes part in the process after templates parsed and leaves the parsing work like data binding and custom tag packaging to your faviroute frameworks. In this way, you can package reusable Luda components with utmost flexibility, no matter in a front-end framework or a back-end framework.

Know more about Luda at the official site. Play with the live demos at codepen.

Key Features

• Automatic component lifecycle handling.
• Automatic component dom searching and cache management.
• Automatic proxy creating for accessing components safely.
• Native attributes and events for component communication.
• Mixins for component code reusing.
• Built-in UI components for saving your time.

How Luda Component Works

Component Class Execution Process

Component Instance Lifecycle

Getting Started

Options to get Luda:

• Directly load the CSS and JS from unpkg CDN.
• Download the CSS and JS from this repo.
• Install with yarn: yarn add luda.
• Install with npm: npm install luda.
• Install with gem: gem install luda.

Bug Reports and Feature Requests

Before reporting a bug or submitting a feature request, please make sure you've read the issue guidelines and similiar issues are not addresed on the issues list. Thanks!

Contributing

To get started, please read the contribution guidelines. Any contribution is welcome and highly appreciated. Thanks!

Versioning

Luda is maintained under the Semantic Versioning guidelines(SemVer). To find out changes in released versions, please read this changelog.

Copyright and License

Copyright Oatw under the MIT license.

luda's Issues

The documentation should be more convenient for navigating

Why This Feature Should be Added to Luda

The documentation is not convenient enough to navigate between chapters. Users have to scroll to the top to open the navigation menu on mobile.

How Should This Feature Work

Prev/Next links should be added at the bottom of each page, or provides a better way for navigation.

Use sass variables as values instead of rems in spacing value words documentation.

Version
site 0.2.x

Describe the bug

Expected behavior
Use sass variables as values instead of rems in spacing value words documentation.

.gitattributes is included in the npm package

Version
0.1.13

Describe the bug
.gitattributes is included when building the npm package.

Expected behavior
.gitattributes should not be included when building the npm package.

Additional context
Should add .gitattributes in the .npmignore file.

Previous version site is deleted when building

Version
0.1.13

Describe the bug
Previous version site is deleted when building for release.

Expected behavior
Previous version site should not be deleted when building.

Additional context
The release-site-clean script should be changed.

Texts in form elements are not easy to read

Version
0.1.13

Describe the bug
The styles of form elements are not good for accessibility.

Additional context
Shoud be fixed in next version.

Add drag & drop events support

Why This Feature Should be Added to Luda

Native drag & drop events are not well supported by browsers.

How Should This Feature Work

Drag and drop events should be managed by the .on, .off and .one method.

Additional context

• The event names should not be conflicted with native event names.
• Existed swipe events logistic may be conflicted with the new drag & drop events. Consider using timestamp to distinguish different gestures.

File size in readme.md is not updated

Version
0.3.0

Describe the bug
File size is not updated in readme.

Expected behavior
Current file size after gziped is about 30kb, it should be clarified in readme.md.

Nested carousel pause and play bug.

Version
0.3.0

Describe the bug
When mouseenter or mouseout a nested carousel, parent carousels won't trigger pause nor play method, this leads to a bad user experience.

Expected behavior
When mouseenter or mouseout a nested carousel, parent carousels should also be paused or played.

404 page is not styled.

Version
site 0.3.x

Describe the bug
The customized 404 page is not styled.

Incorrect degradation script path in documentation.

Version
Site 0.3.x

Describe the bug
Incorrect degradation script path in documentation.

To Reproduce

1. Visit https://oatw.github.io/luda/0.3.x/general/browser-support
2. The degradation script path described as below:

import 'luda/src/js/degeradation'

Expected behavior
The degradation script path should be:

import 'luda/dist/js/luda-degeradation'

The blog address should be updated.

Version
0.3.2 & site 0.3.x

Describe the bug
The domain oatw.blog will be abandoned soon, it should be updated in code banners and package.json, etc.

Scrollbar doc is not updated

Version
site 0.3.x

Describe the bug
Firefox css scrollbar has been supported in v 0.3, but the doc was not updated to clarify this feature.

Make swipe distance able to be customized for swipe events.

Why This Feature Should be Added to Luda

The default swipe distance to trigger a swipe event is 10px, and cannot be changed so far.
In some situation, 10px may not be that suitable.

How Should This Feature Work

Make customized swipe distance as part of the event name seems OK.

Add WAI-ARIA examples to docs

Why This Feature Should be Added to Luda

WAI-ARIA examples should be added to the docs.

Anonymous mixins don't include any defined properties.

Version
0.3.3

Describe the bug
Anonymous mixins don't include any defined properties.

To Reproduce
Steps to reproduce the behavior:

1. Define an anonymous mixin as the below code:

let toggleable = luda.mixin({
  toggleableCreate: function(){
    console.log('creating a instance.')
  },
  toggleableActivate: function(){
    console.log('activate a instance.')
  }  
})

2. Try getting all properties in the defined mixin:

// returns {}
toggleable.all()

Expected behavior
An object with all the defined properties should be returned.

What is Actually Happening
An object without any defined properties is returned.

playerfair -> playfair

Version
site 0.2.x

Describe the bug
Spelling mistake of playfair font name in site footer.

Expected behavior
Playerfair -> playfair

Additional context

Use a font which is easy to read for the documentation

Why This Feature Should be Added to Luda

The Raleway font is not so comfortable for reading, it should not be used for body texts.

How Should This Feature Work

The Open Sans font is an option. It's OK to be used as body text font.

Luda gem summary and package description not updated.

Version
0.3.1

Describe the bug
The description in luda gem is not updated.

luda/gem/luda.gemspec

Line 13 in 247f734

spec.summary = "A lightweight and responsive UI framework for modern web development."

luda/package.json

Line 4 in 247f734

"description": "A responsive and lightweight UI framework for modern web development",

Add padding-top value automatically if responsive medias have width and height attributes.

Why This Feature Should be Added to Luda

If a responsive media has width and height attribute, the padding-top value of its container should be calculated and set automatically to ensure the scale ratio.

How Should This Feature Work

1. Detect if a responsive media has width and height attribute.
2. Calculate padding-top value in percentage according to the width value and height value.
3. Set media wrapper padding-top value.

Additional context

Plan to release feature in version 0.3.3.

List selectors are incorrect in the article pattern

Version
0.3.2

Describe the bug
.article > li will never match any elements in an article, it should be changed to .article > ol, and
.article > dl should also be added.

luda/src/sass/kernel/patterns/_article.sass

Line 44 in 1c6a28c

.article > li

Add sassc-ruby support to the luda gem

Version
0.3.2

Describe the bug
Ruby sass is deprecated, ruby community has been using sassc as a replacement, the luda gem should be updated to add sassc support.

Expected behavior
There're two features should be added at least:

1. Add luda gem assets path to sassc load path.
   https://github.com/sass/sassc-ruby/blob/7cbb5775fdcec3ed27a8ec6f1c7800901ccf5d8e/lib/sassc.rb#L22
2. Add luda sass precision config to sassc precision number config.
   https://github.com/sass/sassc-ruby/blob/7cbb5775fdcec3ed27a8ec6f1c7800901ccf5d8e/lib/sassc/script/value/number.rb#L48

Additional context
This issue is not in high priority, since ruby community especially rails community mainly takes webpacker as assets bundler. Besides, the old ruby sass support shouldn't be dropped.

Bad examples of form placeholders and grouped checkboxes/radios

Version
site 0.1.x

Describe the bug
The placeholders of form elements are not written in a good meaning.
The grouped checkboxes/radios should not be wrapped in <div> tags.

Expected behavior
Change the placeholders with meaningful and appropriate texts.
Wrap the checkboxes/radios in <fieldset>/<legend>

The background video of the official site is too outstanding.

Version
site version 0.1.x

Describe the bug
The background video of the official site is too outstanding. It's not comfortable for reading the texts.

Expected behavior
The background video should be more transparent.

Additional context
Try to change the opacity of the background video to 0.1.