kysonic/riot-mui

Set of material ui components for riot js.

riot-mui

Welcome!

Riot JS is the tiniest (by size) library allowing to create user interfaces. Riot is robust, fast and has enjoyable syntax. Unfortunately Riot doesn't have library of material UI components. This project aims to fix this problem.

Any person who loves Riot and material UI willing to be a part of this project - welcome! We have great chance to create set of components which will provide basic features of Material UI for Riot.

DEMO

Riot V3

We have moved to Riot v3! Version 2 is no longer supported. Big thanks Joxit for this update.

News

• Webpack in da house! Now if you want to launch riot MUI just run npm start. (Global webpack, webpack-dev-server required...)

Source code of demo pages is placed here:

https://github.com/kysonic/riot-mui-page

How to get riot-mui?

Github:

  git clone https://github.com/kysonic/riot-mui 

Npm:

  npm install riot-mui 

Bower:

  bower install riot-mui 

Getting started

If you use Browserify (or presumably other NPM-based bundlers), you can simply require('riot-mui') and all tags and mixins will be registered with Riot.js

If you don't use some build system like webpack or gulp (+broserify) you can just include riot-mui.js and riot-mui.css (or their minimized versions) in your project.

 <link href="build/styles/riot-mui.min.css" rel="stylesheet">
        ....
 <script src="build/js/riot-mui-min.js"></script> 

Add material ui component:

<material-button>
    <div class="text">Button</div>
</material-button>    

And mount it:

riot.mount('material-button');

In another case you can use source files of this project:

require('material-elements/material-checkbox/material-checkbox.scss');
require('material-elements/material-checkbox/material-checkbox.tag');

Don't forget that some components have dependency of another components, for example material-button include material-waves. In this case you have to include it at first:

require('material-elements/material-waves/material-waves.scss');
require('material-elements/material-waves/material-waves.tag');
require('material-elements/material-button/material-button.scss');
require('material-elements/material-button/material-button.tag');

Learn more about riot-mui here.

A few words about styling

All components styles located in Sass file which has same name like a component file. All components styles encapsulated using tag name like a name space of component. All components styles has special section - "Variables for quick styling" which will help you to style main features of components really quickly. Also you have possibility to override it whatever you want.

Bugs, enhancements, suggestions

If you want to help make this project better you can add your suggestions here. This also applies to bugs and enhancements.

Contributing

1. Fork the repo.
2. Write your code.
3. Submit your pull request to dev branch of this project.

riot-mui's Issues

Webpack

Should we add webpack in this project ?

Setup test suit to accept PR

PR can be really volatile...
lets setup test cases for the tags

Why not borrow from MDL?

Why not just borrow styles from the Material Design Lite project? Any licensing issue?

issues with valid on material-input

I can neither add a function or use regex without errors. This is with riot 2.6.7

when using regex I get the following error

SyntaxError: Unexpected token )

I get function undefined errors with the function.

material-input fails to display when value is 0 on type number

specifically if value is zero it results in false

opts.value || ''

should be

opts.value !== undefined ? opts.value : ''

at least

also

<div class="{input-content:true,not-empty:value !== undefined,error:error}">

this needs improving more than this.

Version confliction between GitHub(0.0.14) and npm(0.0.15)

Hi,

I tried this package with npm install --save-dev riot-mui but it didn't work.
I found riot-mui version is 0.0.15 at my project but it is 0.0.14 at this GitHub repository.

  // package.json at my project
  "riot-mui": "0.0.15",

And at npm(riot-mui), the version is 0.0.15 too.
Maybe something is wrong with your npm package, I thought.

With installation from GitHub(as shown below), I can use this library without errors.
Very cool! Thanks :D

  "riot-mui": "[email protected]:kysonic/riot-mui.git#4e34676273f186dd6887bc20d1f92c8531e256d7",

toggle component?

Do you think implementing toggle component would be useful?
I will try to make a Pull Request with such feature.

Can't mount button example ( and more)

Setup :

<html>  
    <head>
        <link href="bower_components/riot-mui/build/styles/riot-mui.min.css" rel="stylesheet">

        <script src="bower_components/riot/riot+compiler.js"></script>

        <script src="bower_components/riot-mui/build/js/riot-mui-mixins-min.js"></script>
        <script src="bower_components/riot-mui/build/js/riot-mui.js"></script> 

        <script src="https://cdn.jsdelivr.net/riotgear/2.1.3/rg.min.js"></script>
    </head>
    <body>
        <material-button>
            <div class="text">Button</div>
        </material-button>
        <script>
                   riot.mount('*');
        </script>
    </body>
</html>

Error :

When using

<material-input placeholder="Just input"></material-input>  

I get

With other components i get other random errors, so it seems like i'm doing something wrong in general. Am i missing any dependencies, or do i have to mount it differently ?

Compiling from source issues

compiling from source yields a broken build. Waves don't work, inputs don't render. Button works where as the release build it is broken.

if I require the built files using webpack it breaks a lot of the modules however the onclick actually works. If I import the built files, they display correctly but the events don't work.

input name in material-input should also consider opts.name

current code is

<input type="{opts.type || 'text'}" disabled="{disabled}" placeholder="{opts.placeholder}" onkeyup="{changeValue}" value="{value}" autocomplete="off" name="input"/>

this hard codes name of input to be "input" this hard code should only be a fallback

Expose click handler on icon in input field

The icon in input field is clickable, but I cannot find a way to handle the event.

<material-input icon="true" waves-color="#2f6975" label="Icon input">
    <i class="material-icons" onclick="..." >search</i>
</material-input>

value sent from otps to material-input is not being considered

Update riot 5

Hi there, it's been a long time 😄, I hope you're well 😃

I would like to upgrade my projects to riot 5, but it will need an upgrade of riot-mui
Are you planning to accept new PR or add new maintainer for this project ?

Merry Christmas

valueChanged should also be triggered as a riot event style

lets use opts.[onvaluechanged] for value changed event ad others as well

Provide source code for gh-page

Hello,

I checked out your project and though that it would be cool if the sources for the gh-page were available. So that people could test in practice the library you are providing

material textarea doesn't correctly take input

I will provide a PR for this one

basically if you set opts.value it is not set to the element

in the on(mount)

this.value = opts.value <--- is missing

calendar component ?

would be useful

input and textarea error

Basically the same error i mentioned in my first post in #6 about the input, sadly i didn't check the input example again, my bad.

The compiled code ( and your src) for input and textera contain referenes to

this['{opts.name}']
this['{this.name}']

The html contains

<input type="{opts.type || \'text\'}" disabled="{disabled}" placeholder="{opts.placeholder}" onkeyup="{changeValue}" value="{value}" autocomplete="off" name="{this.name}"> 

but the i guess the reference with brackets causes an eror for the compiler somehow ?

Fixed this issue by simply giving a static name ( e.g. 'input'), but you probably intended something different here.

material-tabs - changing number of tabs dynamically

I have a question, since I can't figure out this myself and there's no documentation on the topic. I want to add tabs after user clicks a button, so I have an array and I'm invoking tabs.push({title: "newtitle"})
and I have <material-tabs tabs={tabs}> somewhere on the page (inside another riot component). Well, nothing happens. I'm trying to call riot.update() after that and again nothing. I'm 100% sure that tabs are changing (console.log). Any idea?

Better docs on common use cases please

Firstly, I really like what you've done here- makes it really fast to create pages.

However, I'm having difficulty with some very simple things: can't seem to get the value from input fields, etc. I've tried the Roitjs documented methods, jQuery etc. None seem to work.

In the end, I had to resort to standard HTML to get things working.

What would solve the issue for me, is more examples of common usage scenarios.

Lastly, how to integrate this with the material grid system? I've included the materialize.css stylesheet and i can use the rest of the materialize css grids, etc. But the input field has a double underline when selected.

delayed click

sometimes i need to show the waves traveling to the user and when this transition ends... i'd like to fire some event then like "onwaveend" on the root element...

it looks better by design that way...

e.g. material-button should fire onwaveend when waves animation has ended

Additional Gulp support

Would it be possible to bring back Gulp support? All my projects have workflows using Gulp

Compatible with riot v3

Is it compatible with Riot version 3?

Thanks.

Dont forget to add a License

Hay @kysonic
very nice and simple Project Thank you .

Do not forget to add a license like MIT.

support for material popup ??

Hi team,

How to call material popup on a button click ??

vanilla example throwing a require not defined Uncaught ReferenceError

Loading examples/vanilla/index.html throws the following error -
Uncaught ReferenceError, as require isn't defined.

riot-mui and riot not matching on jspm

can you explain to me how to define riot-mui on jspm, it still like not matching with my riot module, the error see at below :
system.src.js:123 Uncaught (in promise) Error: (SystemJS) riot is not defined ReferenceError: riot is not defined at Object.riot.tag2.e (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:1658) at e (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:101) at Object.eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:23236) at e (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:101) at Object.defineProperty.value (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:477) at Object.eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:487) at eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:3:4) at eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:4:3) at eval (<anonymous>) Evaluating http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js Evaluating http://localhost:8080/jspm_packages/npm/[email protected] Error loading http://localhost:8080/src/index.js at Object.riot.tag2.e (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:1658) at e (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:101) at Object.eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:23236) at e (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:101) at Object.defineProperty.value (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:477) at Object.eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:2:487) at eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:3:4) at eval (http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js:4:3) at eval (<anonymous>) Evaluating http://localhost:8080/jspm_packages/npm/[email protected]/build/js/riot-mui-min.js Evaluating http://localhost:8080/jspm_packages/npm/[email protected] Error loading http://localhost:8080/src/index.js

material-popup does not confirm to material specs

i think it should be a little closer to
https://www.google.com/design/spec/components/dialogs.html#dialogs-specs

how do i edit documentation?

gh-pages branch only has compiled js

Scroll bar of code block breaks sometimes.

It is related with highlight.js somehow...

http://joxi.ru/4Ak00YpfPVKVrq

does not find 'riot' on (webpacked) ES6 import

The following js imports:

import riot from 'riot'
import 'riot-mui'

... results in:

ReferenceError: Can't find variable: riot

(emitted by riot-mui)

Doing console.log(riot)does however print out the riot object.

Versions:

• Webpack 3.8.1
• riot 3.7.3
• riot-mui 0.1.1