mui-angular version about mui HOT 36 CLOSED

@ghostpanda I haven't used angular in a couple of years so I don't think I'm the best person to work on it. Are you interested in adding Angular support?

from mui.

@amorey Yes , I have an angular version project, and I'm trying to write mui-ng-components.

from mui.

Awesome! That's great news. If you want to try adding it directly to the MUI repo you can add them under src/angular:
https://github.com/muicss/mui/tree/master/src

from mui.

@amorey I am starting angular version here.
https://github.com/ghostpanda/mui/tree/angular-dev
I have finished some part of appbar,button,caret,container,divider,dropdown-item,dropdown,panel
and examples under https://github.com/ghostpanda/mui/tree/angular-dev/examples/angular.
My English is not good, I hope you can help me to comment some javascript code.
Also, you can give me some advice 😃 .
Recently I will be busy, I will finish the rest components later.

from mui.

@ghostpanda It looks great! It's been a while since I used Angular but I'll try to get back into it so I can help with the project.

Is there anything in particular that you want me to take a look at?

from mui.

@ghostpanda Is the code ready to merge into master? When you add some unit tests I can start working on merging it into master and adding it to muicss.com.

from mui.

@amorey Sorry, I am working on an three.js 3D model project these days. I plan to continue this next week.

from mui.

Ok! I hope your project is going well! Let me know if there's anything I can help with Angular. I tested out your examples and it's looking great so far.

from mui.

@amorey I haven't start unit test yet . Would you help me with it? 😆

from mui.

I added angular to the unit test environment:
https://github.com/muicss/mui/blob/ghostpanda_angular-dev/test/setup.js

And set up the basic structure for some unit tests:
https://github.com/muicss/mui/tree/ghostpanda_angular-dev/test/angular-tests

But I ran into problems creating a test that compiles HTML and checks the result. Take a look and let me know if you have some ideas on how to test the MUI directives in a simple way!

from mui.

@amorey
Hi, I modified some angular unit test here, and it seems to work.
https://github.com/ghostpanda/mui/tree/angular-dev/test
I modified some directive with replace: true attribute.
by the way, could you give me some advice which is better replace: true or replace: false

from mui.

Great, it's working for me too! Here are some suggestions:

• We're using JSDOC for documentation and the Airbnb JavaScript Style Guide for coding styles
• I think it would be better to put global.Node = window.Node in the angular test helpers module instead of before-compilers.js to keep the angular-related test code more self contained
• I would recommend moving test/angular/test-helpers.js to test/lib/angular-helpers.js to keep the code organized. Also, mocha executes all files that begin with "test-".

With regards to replace: true or replace: false, it's been a while since I used Angular and I don't remember what the pros/cons are. replace: true seems more elegant.

Let me know when the code is ready for a deeper review and I'll start working on merging it into the master.

from mui.

Thanks for your advice!
I'll start review the code next week and finish the rest components.
It is really hard for me to comment all the code in English, I'll comment some code in Chinese.
I really hope that you can help me to translate that.

from mui.

No problem! If you comment in Chinese I can use Google translate to help me rewrite the comments in English.

from mui.

@amorey
我抽空基本完成了mui的angular组件和examples（单元测试我还没有时间开始做，所以只请求merge到dev branch上）。
明天是**的新年，在这里祝你新年快乐！
😃
**的新年是非常忙碌的，在最近的半个月里，我可能没有时间继续去完成单元测试了，我表示十分抱歉。
当然，如果我能抽到时间的话，我会及时更新单元测试的。
😄

from mui.

@ghostpanda This is awesome! The code is GREAT!!

I've been working on adding examples to the documentation website but it's going to take a little while to finish. So far I've run into these issues:

• The disable attribute should be called disabled
• The disabled attribute should be true if present (e.g. <mui-button disabled>)
• I think it's better to use CSS helper classes instead of divider-top|bottom|left|right attributes
• The floating attribute should be called floating-label
• I'm getting an injector error using <mui-input> and <mui-textarea> in mui-angular.min.js

I merged your pull request into MUI v0.4.3 so it might be easier to start from mui:master rather than from your current branch.

from mui.

@ghostpanda

I just wanted to let you know that I fixed the injector bug by specifying the dependencies here:
https://github.com/muicss/mui/blob/master/src/angular/input.js#L16

I also simplified the Angular examples by using ng-app:
https://github.com/muicss/mui/blob/master/examples/angular/appbar.html#L2

The changes are live in v0.4.4 and in muicss:master.

from mui.

@amorey 我已经修改了上述问题。
😃
有点遗憾的是，似乎master分支上找不到我的贡献值了 😆

from mui.

Great! I'll take a look at the code!

Sorry it didn't add your contribution automatically when I merged your changes. Can I add you as a contributor here:
https://github.com/muicss/mui/blob/master/AUTHORS.txt

from mui.

Hmm... I did a --squash merge when I merged your code into the master so it looks like I got the credit for the changes:
https://github.com/muicss/mui/blame/master/src/angular/button.js

from mui.

👌好的😃这是我第一次在git上贡献代码，留个纪念😄

from mui.

@ghostpanda Thanks again for creating a pull request! Your changes are in the latest version of MUI (v0.4.5).

from mui.

@amorey You're welcome!
Maybe there's 4 issues.
https://www.muicss.com/docs/v1/angular/forms
<mui-input label="Input 1" float-label></mui-input> should be
<mui-input floating-label="Input 1"></mui-input>

Checkboxes and radio buttons directive has no checked attribute , only supports ngModel now.

https://www.muicss.com/docs/v1/angular/tabs some error reports.

https://www.muicss.com/docs/v1/angular/reference
muiForm formInline directive. <form form-inline> </form>
not

 <mui-form />
  * {Boolean} inline=false|true

Hmm.. Maybe I can change form-inline directive to inline to support all elements.

from mui.

@ghostpanda

What do you think about using a mui- prefix for custom attributes? The official Angular Material Design library uses prefixes for custom attributes:
https://material.angularjs.org/latest/demo/sidenav

Here's a proposal for the MUI Angular spec. Let me know what you think:

Appbar

<mui-appbar />

Button

<mui-button />
  * {String} mui-color=default|primary|danger|accent
  * {String} mui-variant=default|flat|raised|fab
  * {String} mui-size=default|small|large
  * {Boolean} disabled=false|true

Caret

<mui-caret />

Checkbox

<mui-checkbox />
  * {String} mui-label
  * {String} name
  * {String} value
  * {Boolean} checked=false|true
  * {Boolean} disabled=false|true

Container

<mui-container />
  * {Boolean} mui-fluid=false|true

Divider

<mui-divider />

Dropdown Component

Dropdown

<mui-dropdown />
  * {String} mui-label
  * {String} mui-align=left|right
  * {String} mui-color=default|primary|accent
  * {String} mui-size=default|small|large
  * {String} mui-variant=default|flat|raised|fab
  * {Boolean} disabled

Dropdown-Item

<mui-dropdown-item />
  * {String} mui-link

Form

<mui-form />
  * {Boolean} mui-inline=false|true

Grid

Row

<mui-row />

Col

<mui-col />
  * {Integer} mui-xs
  * {Integer} mui-xs-offset
  * {Integer} mui-sm
  * {Integer} mui-sm-offset
  * {Integer} mui-md
  * {Integer} mui-md-offset
  * {Integer} mui-lg
  * {Integer} mui-lg-offset
  * {Integer} mui-xl
  * {Integer} mui-xl-offset

Input

<mui-input />
  * {String} mui-hint
  * {String} mui-label
  * {String} value
  * {String} type=text|email|url|tel|password
  * {Boolean} autofocus
  * {Boolean} mui-float-label=false|true

Panel

<mui-panel />

Radio

<mui-radio />
  * {String} name
  * {String} value
  * {Boolean} checked=false|true
  * {Boolean} disabled=false|true

Select Component

Select

<mui-select />
  * {String} mui-value
  * {String} name
  * {Boolean} autofocus=false|true
  * {Boolean} disabled=false|true
  * {Boolean} required=false|true
  * {Boolean} mui-use-default=false|true

Option

<mui-option />
  * {String} mui-label
  * {String} value

Tabs Component

Tabs

<mui-tabs />
   * {Integer} mui-initial-selected-index=0
  * {Boolean} mui-justified=false|true

Tab

<mui-tab />
  * {String} mui-label
  * {String} value

Textarea

<mui-textarea />
  * {String} mui-hint
  * {String} mui-label
  * {Integer} rows
  * {Boolean} autofocus
  * {Boolean} mui-float-label=false|true

from mui.

看起来很不错！我刚开始的想法只是尽可能减少字母。

from mui.

@ghostpanda Do you have time to work on the Angular library soon? I'd like to include the new Angular library in the next newsletter. Let me know when you have time!

from mui.

@amorey
I modified some of your MUI Angular spec as * prefix.
下面是我已经完成的部分（更新中）:

Appbar

<mui-appbar />

*Button

<mui-button />
  * {String} mui-color=default|primary|danger|accent
  * {String} mui-variant=default|flat|raised|fab
  * {String} mui-size=default|small|large
  * {String} disabled
  * {Boolean} ng-disabled=false|true
  * {Function} ng-click

Caret

<mui-caret />

*Checkbox

<mui-checkbox />
  * {String} mui-label
  * {String} name
  * {String} value
  * {String} disabled
  * {Boolean} ng-disabled=false|true
  * {String} ng-model
  * {Function} ng-click
  * {Function} ng-change
  * {Expression} ng-true-value
  * {Expression} ng-false-value

Container

<mui-container />
  * {Boolean} mui-fluid=false|true

Divider

<mui-divider />

Dropdown Component

*Dropdown

<mui-dropdown />
  * {String} mui-label
  * {String} mui-align=left|right
  * {String} mui-color=default|primary|accent
  * {String} mui-size=default|small|large
  * {String} mui-variant=default|flat|raised|fab
  * {Boolean} disabled=true|false
  * {Boolean} mui-open=true|false

Dropdown-Item

<mui-dropdown-item />
  * {String} mui-link

Form

<mui-form />
  * {Boolean} mui-inline=false|true

Grid

Row

<mui-row />

Col

<mui-col />
  * {Integer} mui-xs
  * {Integer} mui-xs-offset
  * {Integer} mui-sm
  * {Integer} mui-sm-offset
  * {Integer} mui-md
  * {Integer} mui-md-offset
  * {Integer} mui-lg
  * {Integer} mui-lg-offset
  * {Integer} mui-xl
  * {Integer} mui-xl-offset

Input

<mui-input />
  * {String} mui-hint
  * {String} mui-label
  * {String} value
  * {String} type=text|email|url|tel|password
  * {Boolean} autofocus
  * {Boolean} mui-float-label=false|true
  * {Reg} ng-pattern

Panel

<mui-panel />

*Radio

<mui-radio />
  * {String} mui-label
  * {String} name
  * {String} value
  * {Boolean} disabled=false|true
  * {Object} ng-model
  * {Function} on-click

from mui.

Adding event handlers would be great. Do the MUI components currently support the Angular built-in event handlers (e.g. ng-click)?

Also, here are some other questions/suggestions:

• Can/should <mui-dropdown-item> support ng-click?
• Can <mui-input> and <mui-textarea> support ng-model?
• For feature parity with MUI React, <mui-input>, <mui-textarea>, <mui-select> and <mui-tabs> should support a change event

from mui.

@amorey
some directive supports built-in event handlers , but I unified ng-click to on-click.
<mui-input> and <mui-textarea> supports ng-model and change event now.

from mui.

I see... what happens if the user defines both 'on-click' and 'ng-click'?

What do you think about calling it 'mui-on-click' or 'mui-click' to be consistent with the other variables?

Let me know when it's ready to merge!

On Feb 21, 2016, at 9:05 AM, gaoqi.liu [email protected] wrote:

@amorey
some directive supports built-in event handlers , but I unified ng-click to on-click.
and supports ng-model and change event now.

—
Reply to this email directly or view it on GitHub.

from mui.

我想，还是统一使用'ng-click’可能会好一些。
同时使用'on-click' 和 'ng-click’的时候’ng-click’可能会有些问题。
这周恐怕没办法抽出时间完成所有部分，不过我会尽力，尽快merge。

@amorey I'll modify the directives like this, Let me know what you think:

*Checkbox

<mui-checkbox />
  * {String} mui-label
  * {String} name
  * {String} value
  * {String} disabled
  * {Boolean} ng-disabled=false|true
  * {Object} ng-model
  * {Function} ng-click
  * {Function} ng-change
  * {Expression} ng-true-value
  * {Expression} ng-false-value

from mui.

Excellent! Looks great!

from mui.

@amorey I'll remove value disabled(useless) like angular checkbox:

*Checkbox

<mui-checkbox />
  * {String} mui-label
  * {String} name
  * {Boolean} ng-disabled=false|true
  * {String} ng-model
  * {Function} ng-click
  * {Function} ng-change
  * {Expression} ng-true-value
  * {Expression} ng-false-value

<mui-dropdown-item> support ng-click now.

from mui.

Sounds good! Sorry, I thought Angular supported both disabled and ng-disabled.

from mui.

@ghostpanda Any updates on the Angular library? It'd be great to include it in the next newsletter. Let me know if you need help finishing the remaining items.

from mui.

@ghostpanda Thanks for your help on the MUI Angular library. The latest version has reached feature parity with CSS/JS and React libraries:
https://www.muicss.com/docs/v1/angular/boilerplate-html

Can I add you to the MUI contributors list?
https://github.com/muicss/mui/blob/master/AUTHORS.txt

from mui.