mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-11-03 20:17:59 +00:00
e61bd967e3
* move script to scripts folder * add docfy to router and scripts * add docfy to router and scripts * fix jsdoc syntax * add component markdown files to gitignore * improve error handling for scripts * tidy up remaining jsdoc syntax * add sample jsdoc components * add known issue info * make not using multi-line components clearer * make generating docs clearer * update copy * final how to docfy cleanup * fix ts file @module syntax * fix read more syntax * make docfy typescript compatible
73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
import Component from '@glimmer/component';
|
|
import { action } from '@ember/object';
|
|
import { later } from '@ember/runloop';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { assert } from '@ember/debug';
|
|
|
|
/**
|
|
* @deprecated
|
|
* @module AlertInline
|
|
* This component renders a compact Hds::Alert that displays a loading icon if the
|
|
* `@message` arg changes and then re-renders the updated `@message` text.
|
|
* (Example: submitting a form and displaying the number of errors because on re-submit the number may change)
|
|
*
|
|
* @example
|
|
* <AlertInline @type="danger" @message="There are 2 errors with this form."/>
|
|
*
|
|
* * use Hds::Alert @type="compact" for displaying alert messages instead
|
|
* <Hds::Alert @type="compact" @color="critical" as |A|>
|
|
* <A.Title>Error</A.Title>
|
|
* <A.Description>Something is not right</A.Description>
|
|
* </Hds::Alert>
|
|
*
|
|
* @param {string} type - color getter maps type to the Hds::Alert @color
|
|
* @param {string} color - Styles alert color and icon, can be one of: critical, warning, success, highlight, neutral
|
|
* @param {string} message - The message to display within the alert.
|
|
*/
|
|
|
|
export default class AlertInlineComponent extends Component {
|
|
@tracked isRefreshing = false;
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
assert('@type arg is deprecated, pass @color="critical" instead', this.args.type !== 'critical');
|
|
if (this.args.color) {
|
|
const possibleColors = ['critical', 'warning', 'success', 'highlight', 'neutral'];
|
|
assert(
|
|
`${this.args.color} is not a valid color. @color must be one of: ${possibleColors.join(', ')}`,
|
|
possibleColors.includes(this.args.color)
|
|
);
|
|
}
|
|
}
|
|
|
|
get color() {
|
|
if (this.args.color) return this.args.color;
|
|
// @type arg is deprecated, this is for backward compatibility of old implementation
|
|
switch (this.args.type) {
|
|
case 'danger':
|
|
return 'critical';
|
|
case 'success':
|
|
return 'success';
|
|
case 'warning':
|
|
return 'warning';
|
|
case 'info':
|
|
return 'highlight';
|
|
default:
|
|
return 'neutral';
|
|
}
|
|
}
|
|
|
|
@action
|
|
refresh() {
|
|
this.isRefreshing = true;
|
|
later(() => {
|
|
this.isRefreshing = false;
|
|
}, 200);
|
|
}
|
|
}
|