UI: Glimmerize - Colocate template and remove component file (#19569)
This commit is contained in:
parent
f0283988bb
commit
d6e1dec686
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module FormError
|
||||
* FormError components are used to show an error on a form field that is more compact than the
|
||||
* normal MessageError component. This component adds an icon and styling to the content of the
|
||||
* component, so additionally styling (bold, italic) and links are allowed.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <FormError>Oh no <em>something bad</em>! <a href="#">Do something</a></FormError>
|
||||
* ```
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/form-error';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
});
|
|
@ -1,22 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/layout-loading';
|
||||
|
||||
/**
|
||||
* @module LayoutLoading
|
||||
* `LayoutLoading` displays the `VaultLogoSpinner` component in a centered full-page layout.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <LayoutLoading />
|
||||
* ```
|
||||
*/
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
|
@ -0,0 +1,9 @@
|
|||
<li class="action">
|
||||
{{#if @loadingParam}}
|
||||
<button disabled type="button" class="link button is-loading is-transparent">
|
||||
loading
|
||||
</button>
|
||||
{{else}}
|
||||
{{yield}}
|
||||
{{/if}}
|
||||
</li>
|
|
@ -1,27 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module MenuLoader
|
||||
* MenuLoader components are used to show a loading state when fetching data is triggered by opening a
|
||||
* popup menu.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <MenuLoader @loadingParam={model.updatePath.isPending} />
|
||||
* ```
|
||||
*
|
||||
* @param loadingParam {Boolean} - If the value of this param is true, the loading state will be rendered,
|
||||
* else the component will yield.
|
||||
*/
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/menu-loader';
|
||||
|
||||
export default Component.extend({
|
||||
tagName: 'li',
|
||||
classNames: 'action',
|
||||
layout,
|
||||
loadingParam: null,
|
||||
});
|
|
@ -0,0 +1,16 @@
|
|||
<span>
|
||||
<BasicDropdown class="popup-menu" horizontalPosition="auto-right" verticalPosition="below" onOpen={{@onOpen}} as |d|>
|
||||
<d.Trigger
|
||||
@htmlTag="button"
|
||||
class={{concat "popup-menu-trigger button is-ghost" (if d.isOpen " is-active")}}
|
||||
data-test-popup-menu-trigger
|
||||
>
|
||||
<Icon @name="more-horizontal" class="has-text-black auto-width" aria-label="More options" />
|
||||
</d.Trigger>
|
||||
<d.Content @defaultClass={{concat "popup-menu-content " @contentClass}}>
|
||||
<div class="box">
|
||||
{{yield}}
|
||||
</div>
|
||||
</d.Content>
|
||||
</BasicDropdown>
|
||||
</span>
|
|
@ -1,26 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/popup-menu';
|
||||
|
||||
/**
|
||||
* @module PopupMenu
|
||||
* `PopupMenu` displays a button that when pressed will toggle open a menu that is yielded in the content
|
||||
* block.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <PopupMenu><nav class="menu"> <ul class="menu-list"> <li class="action"> <button type="button">A menu!</button> </li> </ul> </nav></PopupMenu>
|
||||
* ```
|
||||
*
|
||||
* @param contentClass=''{String} A class that will be applied to the yielded content of the popup.
|
||||
*/
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
contentClass: '',
|
||||
tagName: 'span',
|
||||
});
|
|
@ -1,6 +1,6 @@
|
|||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<span class="input has-text-grey-light">{{or this.placeholder "Search"}}</span>
|
||||
<span class="input has-text-grey-light">{{or @placeholder "Search"}}</span>
|
||||
<Icon @name="search" class="search-icon has-text-grey-light" />
|
||||
</p>
|
||||
</div>
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/search-select-placeholder';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
});
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module ToolbarActions
|
||||
* `ToolbarActions` is a container for toolbar links such as "Add item".
|
||||
* It should only be used inside of `Toolbar`.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <Toolbar>
|
||||
* <ToolbarActions>
|
||||
* <ToolbarLink @route="vault.cluster.policy.edit">
|
||||
* Edit policy
|
||||
* </ToolbarLink>
|
||||
* </ToolbarActions>
|
||||
* </Toolbar>
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/toolbar-actions';
|
||||
|
||||
export default Component.extend({
|
||||
tagName: '',
|
||||
layout,
|
||||
});
|
|
@ -1,31 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module ToolbarFilters
|
||||
* `ToolbarFilters` components are containers for Toolbar filters and toggles.
|
||||
* It should only be used inside of `Toolbar`.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <Toolbar>
|
||||
* <ToolbarFilters>
|
||||
* <div class="control has-icons-left">
|
||||
* <input class="filter input" placeholder="Filter keys" type="text">
|
||||
* <Icon @name="search" @size="24" class="search-icon has-text-grey-light" />
|
||||
* </div>
|
||||
* </ToolbarFilters>
|
||||
* </Toolbar>
|
||||
```
|
||||
*
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/toolbar-filters';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module Toolbar
|
||||
* `Toolbar` components are containers for Toolbar actions.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <Toolbar>
|
||||
* <ToolbarActions>
|
||||
* <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
|
||||
* Create policy
|
||||
* </ToolbarSecretLink>
|
||||
* </ToolbarActions>
|
||||
* </Toolbar>
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/toolbar';
|
||||
|
||||
export default Component.extend({
|
||||
tagName: '',
|
||||
layout,
|
||||
});
|
|
@ -1,22 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/vault-logo-spinner';
|
||||
|
||||
/**
|
||||
* @module VaultLogoSpinner
|
||||
* `VaultLogoSpinner` displays an animated Vault logo to use for loading screens.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <VaultLogoSpinner />
|
||||
* ```
|
||||
*/
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
|
@ -1,7 +0,0 @@
|
|||
{{#if @loadingParam}}
|
||||
<button disabled type="button" class="link button is-loading is-transparent">
|
||||
loading
|
||||
</button>
|
||||
{{else}}
|
||||
{{yield}}
|
||||
{{/if}}
|
|
@ -1,14 +0,0 @@
|
|||
<BasicDropdown class="popup-menu" horizontalPosition="auto-right" verticalPosition="below" onOpen={{this.onOpen}} as |d|>
|
||||
<d.Trigger
|
||||
@htmlTag="button"
|
||||
class={{concat "popup-menu-trigger button is-ghost" (if d.isOpen " is-active")}}
|
||||
data-test-popup-menu-trigger
|
||||
>
|
||||
<Icon @name="more-horizontal" class="has-text-black auto-width" aria-label="More options" />
|
||||
</d.Trigger>
|
||||
<d.Content @defaultClass={{concat "popup-menu-content " this.contentClass}}>
|
||||
<div class="box">
|
||||
{{yield}}
|
||||
</div>
|
||||
</d.Content>
|
||||
</BasicDropdown>
|
Loading…
Reference in New Issue