@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
53 lines (52 loc) • 2.69 kB
TypeScript
/**
* OcNotifications Component
*
* This component is used to display a container for notification messages. It supports different positions
* for displaying notifications on the screen.
*
* Notifications for screen reader users
* This component uses so called live regions in order to announce its content to screen readers once the notification appeared (this is not the normal modus operandi for screen readers, since their reading order is usually the DOM order – when the user does not take shortcuts). There are two types of live regions: `aria-live="polite"` (equivalent to `role="status"`) and `aria-live="assertive"` (equivalent to `role="alert"`). The latter directly interrupts the current output of the screen reader, the former waits until the current output is finished and reads the announcement afterwards. Since 'assertive' should be used sparingly, only `<oc-notfication-message>`'s "danger" status prop value uses `aria-live="assertive"` (and `role="alert"`). Using `aria-live` and `role="assertive|status"` simultaneously is for compatibility reasons regarding different browser and assistive technology pairings.
*
* @component
* @name OcNotifications
* @status ready
* @release 1.0.0
*
* @props {string} [position='default'] - The position of the notification container.
* Possible values: 'default', 'top-left', 'top-center', 'top-right'.
*
* @slots default - Slot to include notification messages, such as OcNotificationMessage components.
*
* @computed
* @computed {string} classes - Dynamically computed CSS class based on the `position` prop.
*
* @example
* <OcNotifications position="top-right">
* <OcNotificationMessage
* status="success"
* title="Success"
* message="Your operation was successful."
* />
* </OcNotifications>
*
*/
interface Props {
position?: 'default' | 'top-left' | 'top-center' | 'top-right';
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
default?(_: {}): any;
};
refs: {};
rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};