mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
70 lines
1.3 KiB
TypeScript
70 lines
1.3 KiB
TypeScript
import type { SvelteComponentTyped } from "svelte";
|
|
import type { SvelteHTMLElements } from "svelte/elements";
|
|
|
|
type $RestProps = SvelteHTMLElements["div"];
|
|
|
|
type $Props = {
|
|
/**
|
|
* Set to `true` to display the popover
|
|
* @default false
|
|
*/
|
|
open?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to close the popover on an outside click
|
|
* @default false
|
|
*/
|
|
closeOnOutsideClick?: boolean;
|
|
|
|
/**
|
|
* Set to `true` render a caret
|
|
* @default false
|
|
*/
|
|
caret?: boolean;
|
|
|
|
/**
|
|
* Specify the alignment of the caret
|
|
* @default "top"
|
|
*/
|
|
align?:
|
|
| "top"
|
|
| "top-left"
|
|
| "top-right"
|
|
| "bottom"
|
|
| "bottom-left"
|
|
| "bottom-right"
|
|
| "left"
|
|
| "left-bottom"
|
|
| "left-top"
|
|
| "right"
|
|
| "right-bottom"
|
|
| "right-top";
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to enable the high contrast variant
|
|
* @default false
|
|
*/
|
|
highContrast?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to use a relative position
|
|
* @default false
|
|
*/
|
|
relative?: boolean;
|
|
|
|
[key: `data-${string}`]: any;
|
|
};
|
|
|
|
export type PopoverProps = Omit<$RestProps, keyof $Props> & $Props;
|
|
|
|
export default class Popover extends SvelteComponentTyped<
|
|
PopoverProps,
|
|
{ ["click:outside"]: CustomEvent<{ target: HTMLElement }> },
|
|
{ default: {} }
|
|
> {}
|