chore: Refactor Rose::Table::Row visually-hidden to hidden
This commit is contained in:
1 parent
6b93032a78
commit
84051e4b72
3 files changed
+16
-16
No files matched your search
@@ -10,12 +10,12 @@ A table component to display data in structure of rows and columns. It supports
|
||||
|
||||
Cell expansion style should be applied to only one cell in a row.
|
||||
|
||||
```htmlbars
|
||||
<Rose::Table as |table|>
|
||||
```html
|
||||
<Rose::Table @style={{style}} as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row as |row|>
|
||||
<header.row @hidden={{hideHeaderRow}} as |row|>
|
||||
<row.headerCell>Address</row.headerCell>
|
||||
<row.headerCell>Host Set</row.headerCell>
|
||||
<row.headerCell @style={{cellStyle}}>Host Set</row.headerCell>
|
||||
<row.headerCell>Name</row.headerCell>
|
||||
<row.headerCell>Description</row.headerCell>
|
||||
</header.row>
|
||||
@@ -23,19 +23,19 @@ Cell expansion style should be applied to only one cell in a row.
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-1, host-set-2</row.cell>
|
||||
<row.cell @style={{cellStyle}}>host-set-1, host-set-2</row.cell>
|
||||
<row.cell>optional name</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-2</row.cell>
|
||||
<row.cell @style={{cellStyle}}>host-set-2</row.cell>
|
||||
<row.cell>optional name</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-1</row.cell>
|
||||
<row.cell @style={{cellStyle}}>host-set-1</row.cell>
|
||||
<row.cell>optional name</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
@@ -53,7 +53,7 @@ Cell expansion style should be applied to only one cell in a row.
|
||||
template: hbs`
|
||||
<Rose::Table @style={{style}} as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row @visually-hidden={{visuallyHideHeaderRow}} as |row|>
|
||||
<header.row @hidden={{hideHeaderRow}} as |row|>
|
||||
<row.headerCell>Address</row.headerCell>
|
||||
<row.headerCell @style={{cellStyle}}>Host Set</row.headerCell>
|
||||
<row.headerCell>Name</row.headerCell>
|
||||
@@ -88,7 +88,7 @@ Cell expansion style should be applied to only one cell in a row.
|
||||
</Rose::Table>
|
||||
`,
|
||||
context: {
|
||||
visuallyHideHeaderRow: boolean('visuallyHideHeaderRow', false),
|
||||
hideHeaderRow: boolean('hideHeaderRow', false),
|
||||
cellStyle: select(
|
||||
'cellStyle',
|
||||
{
|
||||
@@ -112,7 +112,7 @@ Cell expansion style should be applied to only one cell in a row.
|
||||
template: hbs`
|
||||
<Rose::Table @style="condensed" as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row @visually-hidden=true as |row|>
|
||||
<header.row @hidden=true as |row|>
|
||||
<row.headerCell>Key</row.headerCell>
|
||||
<row.headerCell @style="expand">Value</row.headerCell>
|
||||
</header.row>
|
||||
@@ -150,7 +150,7 @@ Cell expansion style should be applied to only one cell in a row.
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer as |footer|>
|
||||
<footer.row @visually-hidden=true as |row|>
|
||||
<footer.row @hidden=true as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<tr ...attributes class='rose-table-row {{if @visually-hidden (concat "rose-table-row-visually-hidden")}}'>
|
||||
<tr ...attributes class='rose-table-row {{if @hidden (concat "rose-table-row-visually-hidden")}}'>
|
||||
{{yield (hash
|
||||
cell=(component 'rose/table/row/cell' tagName='td')
|
||||
headerCell=(component 'rose/table/row/cell' tagName='th')
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<row.cell @style="expand">description</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer @visually-hidden=true as |footer|>
|
||||
<table.footer @hidden=true as |footer|>
|
||||
<footer.row as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
@@ -106,7 +106,7 @@
|
||||
</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer @visually-hidden=true as |footer|>
|
||||
<table.footer @hidden=true as |footer|>
|
||||
<footer.row as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
@@ -116,7 +116,7 @@
|
||||
<h2>Condensed Table With Visually Hidden Header & Footer</h2>
|
||||
<Rose::Table @style="condensed" as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row @visually-hidden=true as |row|>
|
||||
<header.row @hidden=true as |row|>
|
||||
<row.headerCell >Address</row.headerCell>
|
||||
<row.headerCell>Host Set</row.headerCell>
|
||||
<row.headerCell>Name</row.headerCell>
|
||||
@@ -132,7 +132,7 @@
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer as |footer|>
|
||||
<footer.row @visually-hidden=true as |row|>
|
||||
<footer.row @hidden=true as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
|
||||
Reference in new issue
Block a user