Skip to content

[demo app] remove positionalParams from paper-api and simplify #1352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mansona wants to merge 1 commit into
base: unused-snippet
Choose a base branch
from
Open

[demo app] remove positionalParams from paper-api and simplify #1352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 1 addition & 10 deletions tests/dummy/app/components/paper-api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,6 @@ export default Component.extend({
categorySpec: Object.freeze([]),
sort: true,

// Predefined categories.
color: Object.freeze([
'Theme colors',
['warn', 'boolean', 'Displays the button in the theme\'s warn color.'],
['accent', 'boolean', 'Displays the button in the theme\'s Accent color.']
]),

categories: computed('categorySpec', function() {
let categories = [];
this.categorySpec.forEach((category) => {
Expand Down Expand Up @@ -58,6 +51,4 @@ export default Component.extend({
});
}

}).reopenClass({
positionalParams: 'categorySpec'
});
})
8 changes: 0 additions & 8 deletions tests/dummy/app/helpers/array.js
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions tests/dummy/app/helpers/p-row.js
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions tests/dummy/app/helpers/p-section.js
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions tests/dummy/app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<MenuItem @onClick={{fn this.toggleExpandedItem "demos"}} @expanded={{this.demosExpanded}} @canExpand={{true}}>Components</MenuItem>

<div class="submenu">
{{#liquid-if this.demosExpanded}}
<LiquidIf @predicate={{this.demosExpanded}}>
<SubmenuItem @active={{is-active "demo.autocomplete" this.router.currentRouteName}} @href={{href-to "demo.autocomplete"}}>Autocomplete</SubmenuItem>
<SubmenuItem @active={{is-active "demo.button" this.router.currentRouteName}} @href={{href-to "demo.button"}}>Button</SubmenuItem>
<SubmenuItem @active={{is-active "demo.card" this.router.currentRouteName}} @href={{href-to "demo.card"}}>Card</SubmenuItem>
Expand All @@ -41,20 +41,20 @@
<SubmenuItem @active={{is-active "demo.toast" this.router.currentRouteName}} @href={{href-to "demo.toast"}}>Toast</SubmenuItem>
<SubmenuItem @active={{is-active "demo.toolbar" this.router.currentRouteName}} @href={{href-to "demo.toolbar"}}>Toolbar</SubmenuItem>
<SubmenuItem @active={{is-active "demo.tooltip" this.router.currentRouteName}} @href={{href-to "demo.tooltip"}}>Tooltip</SubmenuItem>
{{/liquid-if}}
</LiquidIf>
</div>
<MenuItem @active={{is-active "forms" this.router.currentRouteName}} @href={{href-to "forms"}}>Forms</MenuItem>
<MenuItem @active={{is-active "typography" this.router.currentRouteName}} @href={{href-to "typography"}}>Typography</MenuItem>
<MenuItem @active={{is-active "theme" this.router.currentRouteName}} @href={{href-to "theme"}}>Color & Theme</MenuItem>

<MenuItem @onClick={{fn this.toggleExpandedItem "layout"}} @expanded={{this.layoutExpanded}} @canExpand={{true}}>Layout</MenuItem>
<div class="submenu">
{{#liquid-if this.layoutExpanded}}
<LiquidIf @predicate={{this.layoutExpanded}}>
<SubmenuItem @active={{is-active "layout.introduction" this.router.currentRouteName}} @href={{href-to "layout.introduction"}}>Introduction</SubmenuItem>
<SubmenuItem @active={{is-active "layout.layout-containers" this.router.currentRouteName}} @href={{href-to "layout.layout-containers"}}>Layout Containers</SubmenuItem>
<SubmenuItem @active={{is-active "layout.layout-children" this.router.currentRouteName}} @href={{href-to "layout.layout-children"}}>Layout Children</SubmenuItem>
<SubmenuItem @active={{is-active "layout.child-alignment" this.router.currentRouteName}} @href={{href-to "layout.child-alignment"}}>Child Alignment</SubmenuItem>
{{/liquid-if}}
</LiquidIf>
</div>

<MenuItem @active={{is-active "cookbook" this.router.currentRouteName}} @href={{href-to "cookbook"}}>Cookbook</MenuItem>
Expand Down
42 changes: 23 additions & 19 deletions tests/dummy/app/templates/demo/button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,29 +44,33 @@
<h3>Controller</h3>
<CodeSnippet @name="buttons.component.js" />

{{paper-api
(p-section
(p-row "onClick" "closure" "Action sent when the button is clicked.")
(p-row "type" "string" "Sets the html5 `type` attribute. Defaults to `\"button\"`, except for `<a>` link buttons.")
(p-row "bubbles" "boolean" "Determines whether the Ember click event handler bubbles. Default is `undefined`, which bubbles.")
(p-row "disabled" "boolean" "Whether the button is displayed as disabled and does not accept clicks.")
<PaperApi @categorySpec={{array
(array
(array "onClick" "closure" "Action sent when the button is clicked.")
(array "type" "string" "Sets the html5 `type` attribute. Defaults to `\"button\"`, except for `<a>` link buttons.")
(array "bubbles" "boolean" "Determines whether the Ember click event handler bubbles. Default is `undefined`, which bubbles.")
(array "disabled" "boolean" "Whether the button is displayed as disabled and does not accept clicks.")
)
(p-section
(array
"Link buttons"
(p-row "href" "string" "Displays the button as an `<a>` link to the specified destination URL.")
(p-row "target" "string" "Sets the `<a>` link target attribute, such as `\"_blank\"`.")
(array "href" "string" "Displays the button as an `<a>` link to the specified destination URL.")
(array "target" "string" "Sets the `<a>` link target attribute, such as `\"_blank\"`.")
)
(p-section
(array
"Appearance"
(p-row "fab" "boolean" "Display as a Floating Action Button.")
(p-row "iconButton" "boolean" "Set when the contents contains an icon and adjusts CSS appropriately.")
(p-row "label" "string" "Set the content of the button when used as a blockless component.")
(p-row "mini" "boolean" "Display as a mini-sized button. Implies `fab`, unless `fab` is explicity set falsy.")
(p-row "noInk" "boolean" "Suppresses the ripple effect when clicked.")
(p-row "primary" "boolean" "Display as the primary button, more prominent that other buttons.")
(p-row "raised" "boolean" "Display button with a 3-D effect.")
(array "fab" "boolean" "Display as a Floating Action Button.")
(array "iconButton" "boolean" "Set when the contents contains an icon and adjusts CSS appropriately.")
(array "label" "string" "Set the content of the button when used as a blockless component.")
(array "mini" "boolean" "Display as a mini-sized button. Implies `fab`, unless `fab` is explicity set falsy.")
(array "noInk" "boolean" "Suppresses the ripple effect when clicked.")
(array "primary" "boolean" "Display as the primary button, more prominent that other buttons.")
(array "raised" "boolean" "Display button with a 3-D effect.")
)
"color"
}}
(array
'Theme colors'
(array 'warn' 'boolean' 'Displays the button in the theme\'s warn color.')
(array 'accent' 'boolean' 'Displays the button in the theme\'s Accent color.')
)
}} />

</DocContent>
28 changes: 14 additions & 14 deletions tests/dummy/app/templates/demo/dialog.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,23 +41,23 @@
<p>You dismissed the dialog with a result of "{{this.result}}".</p>
{{/if}}

{{paper-api
(p-section
(p-row "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
(p-row "origin" "element or selector" "If present, the dialog will use it as openFrom and closeTo. Also, focus will be returned to this element once the dialog closes.")
(p-row "closeTo" "element or selector" "Target for closing the dialog with a transition.")
(p-row "openFrom" "element or selector" "Source for opening the dialog with a transition.")
(p-row "fullscreen" "boolean" "Causes the dialog to become fullscreen at smaller breakpoints.")
(p-row "opaque" "boolean" "Causes the backdrop to become opaque. Defaults to `true`.")
(p-row "clickOutsideToClose" "boolean" "Causes clicking on the backdrop to trigger the `onClose` handler. Defaults to `false`.")
(p-row "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `{{paper-dialog-actions}}`. Defaults to `true`.")
(p-row "escapeToClose" "boolean" "Causes pressing escape to close the dialog. Defaults to `true`.")
<PaperApi @categorySpec={{array
(array
(array "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
(array "origin" "element or selector" "If present, the dialog will use it as openFrom and closeTo. Also, focus will be returned to this element once the dialog closes.")
(array "closeTo" "element or selector" "Target for closing the dialog with a transition.")
(array "openFrom" "element or selector" "Source for opening the dialog with a transition.")
(array "fullscreen" "boolean" "Causes the dialog to become fullscreen at smaller breakpoints.")
(array "opaque" "boolean" "Causes the backdrop to become opaque. Defaults to `true`.")
(array "clickOutsideToClose" "boolean" "Causes clicking on the backdrop to trigger the `onClose` handler. Defaults to `false`.")
(array "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `{{paper-dialog-actions}}`. Defaults to `true`.")
(array "escapeToClose" "boolean" "Causes pressing escape to close the dialog. Defaults to `true`.")
)
(p-section
(array
"Actions"
(p-row "onClose" "action" "An action to be executed when the dialog is closed, e.g. by pressing escape.")
(array "onClose" "action" "An action to be executed when the dialog is closed, e.g. by pressing escape.")
)
}}
}}/>

</PaperCardContent>
</div>
Expand Down
18 changes: 9 additions & 9 deletions tests/dummy/app/templates/demo/sidenav.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,17 +125,17 @@

</PaperCard>

{{paper-api
(p-section
(p-row "position" "`'left'` | `'right'`" "Pass in the string `'left'` or `'right'` to place the sidenav accordingly.")
(p-row "lockedOpen" "`matchMedia` expression" "when this expression evauluates to true, the sidenav \"locks open\".")
(p-row "open" "boolean" "Specifies if the sidenav is opened or closed. Defaults to `false`.")
(p-row "closeOnClick" "boolean" "If `true` the sidenav closes when a click event is triggered. Prevent bubbling in click events you don't want this to happen or use `false`. Defaults to `true`.")
<PaperApi @categorySpec={{array
(array
(array "position" "`'left'` | `'right'`" "Pass in the string `'left'` or `'right'` to place the sidenav accordingly.")
(array "lockedOpen" "`matchMedia` expression" "when this expression evauluates to true, the sidenav \"locks open\".")
(array "open" "boolean" "Specifies if the sidenav is opened or closed. Defaults to `false`.")
(array "closeOnClick" "boolean" "If `true` the sidenav closes when a click event is triggered. Prevent bubbling in click events you don't want this to happen or use `false`. Defaults to `true`.")
)
(p-section
(array
"Actions"
(p-row "onToggle" "action" "An action to be executed when the sidenav is toggled, e.g. by when `closeOnClick` is `true` and a click happened or by using the `close` method on the service. This action gets a parameter that specifies wether this sidenav is opened or closed.")
(array "onToggle" "action" "An action to be executed when the sidenav is toggled, e.g. by when `closeOnClick` is `true` and a click happened or by using the `close` method on the service. This action gets a parameter that specifies wether this sidenav is opened or closed.")
)
}}
}}/>

</DocContent>
32 changes: 17 additions & 15 deletions tests/dummy/app/templates/demo/tabs.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,24 +225,26 @@
</div>

<div class="md-padding">
{{paper-api
(p-section
(p-row "selected" "string or number" "Value of the active tab. Each tab automatically gets an index as its value. Default is `0` (the first tab active).")
(p-row "onChange" "action" "An action triggered when the active tab changes.")
(p-row "accent" "boolean" "Pass `true` to enable accent color scheme.")
(p-row "primary" "boolean" "Pass `true` to enable primary color scheme.")
(p-row "stretch" "boolean or matchMedia query" "Use true/false to permanently enable/disable tab stretching. You can also use a matchMedia query to enable tab stretching only at certain viewport sizes. Default value is `sm` (`(min-width: 600px) and (max-width: 959px)`).")
(p-row "borderBottom" "boolean" "Use true to enable border beneath tabs. Default is false.")
<PaperApi @categorySpec={{array
(array
(array "selected" "string or number" "Value of the active tab. Each tab automatically gets an index as its value. Default is `0` (the first tab active).")
(array "onChange" "action" "An action triggered when the active tab changes.")
(array "accent" "boolean" "Pass `true` to enable accent color scheme.")
(array "primary" "boolean" "Pass `true` to enable primary color scheme.")
(array "stretch" "boolean or matchMedia query" "Use true/false to permanently enable/disable tab stretching. You can also use a matchMedia query to enable tab stretching only at certain viewport sizes. Default value is `sm` (`(min-width: 600px) and (max-width: 959px)`).")
(array "borderBottom" "boolean" "Use true to enable border beneath tabs. Default is false.")
)
(p-section
(array
"`tabs.tab` API"
(p-row "value" "string" "Value associated with the tab. To activate the tab, `selected` needs to have this value. Each tab gets a value automatically set to its index, so you don't need to use this property unless you need specific values for some special case.")
(p-row "isSelected" "boolean" "Optionally you can set a specific tab as selected directly without relying on the global tabs value.")
(p-row "disabled" "boolean" "Pass `true` to disable the tab button.")
(p-row "href" "string" "You can pass an href to the tab button to render a link. Hint: use `ember-href-to` to generate route urls.")
(p-row "onClick" "action" "An action triggered when the tab button is clicked.")
) title="API Usage"
(array "value" "string" "Value associated with the tab. To activate the tab, `selected` needs to have this value. Each tab gets a value automatically set to its index, so you don't need to use this property unless you need specific values for some special case.")
(array "isSelected" "boolean" "Optionally you can set a specific tab as selected directly without relying on the global tabs value.")
(array "disabled" "boolean" "Pass `true` to disable the tab button.")
(array "href" "string" "You can pass an href to the tab button to render a link. Hint: use `ember-href-to` to generate route urls.")
(array "onClick" "action" "An action triggered when the tab button is clicked.")
)
}}
@title="API Usage"
/>
</div>

</DocContent>
54 changes: 27 additions & 27 deletions tests/dummy/app/templates/demo/toast.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,20 +67,20 @@
<PaperInput @type="number" @value={{this.duration}} @onChange={{fn (mut this.duration)}} />
</div>

{{paper-api
(p-section
(p-row "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
(p-row "swipeToClose" "boolean" "Causes swiping to trigger the `onClose` handler. Defaults to `true`.")
(p-row "duration" "number or `false`" "Timeout in milliseconds, set to false to disable timeout. Defaults to `3000`")
(p-row "escapeToClose" "boolean" "Causes pressing escape to close the toast. Defaults to `false`.")
(p-row "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
(p-row "capsule" "boolean" "Controls whether the capsule class is added to the toast.Defaults to `false`")
<PaperApi @categorySpec={{array
(array
(array "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
(array "swipeToClose" "boolean" "Causes swiping to trigger the `onClose` handler. Defaults to `true`.")
(array "duration" "number or `false`" "Timeout in milliseconds, set to false to disable timeout. Defaults to `3000`")
(array "escapeToClose" "boolean" "Causes pressing escape to close the toast. Defaults to `false`.")
(array "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
(array "capsule" "boolean" "Controls whether the capsule class is added to the toast.Defaults to `false`")
)
(p-section
(array
"Actions"
(p-row "onClose" "action" "An action to be executed when the toast is closed, e.g. by pressing escape, swiping or timeout.")
(array "onClose" "action" "An action to be executed when the toast is closed, e.g. by pressing escape, swiping or timeout.")
)
}}
}}/>

</PaperCardContent>
</div>
Expand Down Expand Up @@ -150,26 +150,26 @@
{{/each}}
</ul>

{{paper-api
(p-section
<PaperApi @categorySpec={{array
(array
"Methods"
(p-row "show(text[, options])" "Toast" "Display a toast that renders given text.")
(p-row "showComponent(componentName[, options])" "Toast" "Display a toast that renders a component.")
(p-row "cancelToast(toast)" "" "Closes or cancel a given toast.")
(array "show(text[, options])" "Toast" "Display a toast that renders given text.")
(array "showComponent(componentName[, options])" "Toast" "Display a toast that renders a component.")
(array "cancelToast(toast)" "" "Closes or cancel a given toast.")
)
(p-section
(array
"Options"
(p-row "duration" "number or `false`" "Timeout in milliseconds. Defaults to `3000`. Use `false` to keep it open until a `cancelToast` is used.")
(p-row "onClose" "function" "You can pass in a function the will be called back after the toast closes.")
(p-row "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
(p-row "toastClass" "string" "CSS class to be applied to the md-toast element")
(p-row "action.label" "string" "The label of the action button.")
(p-row "action.primary" "boolean" "Wether or not you want the action button to be higlighted with the primary color.")
(p-row "action.accent" "boolean" "Wether or not you want the action button to be higlighted with the accent color.")
(p-row "action.warn" "boolean" "Wether or not you want the action button to be higlighted with the warn color.")
(p-row "action.onClick" "function" "This function gets called when the button is pressed.")
(array "duration" "number or `false`" "Timeout in milliseconds. Defaults to `3000`. Use `false` to keep it open until a `cancelToast` is used.")
(array "onClose" "function" "You can pass in a function the will be called back after the toast closes.")
(array "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
(array "toastClass" "string" "CSS class to be applied to the md-toast element")
(array "action.label" "string" "The label of the action button.")
(array "action.primary" "boolean" "Wether or not you want the action button to be higlighted with the primary color.")
(array "action.accent" "boolean" "Wether or not you want the action button to be higlighted with the accent color.")
(array "action.warn" "boolean" "Wether or not you want the action button to be higlighted with the warn color.")
(array "action.onClick" "function" "This function gets called when the button is pressed.")
)
}}
}}/>

<h3>Application defaults</h3>

Expand Down
Loading
Loading