diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 0b22853..3d5969d 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1742,8 +1742,8 @@ declare global { new (): HTMLPopMaskElement; }; interface HTMLPopModalElementEventMap { - "didPresent": void; - "didDismiss": void; + "present": void; + "dismiss": void; } /** * Modal is used to show a dialog or a box when you click on the trigger element. @@ -2744,11 +2744,11 @@ declare namespace LocalJSX { /** * Emitted after the modal has dismissed. */ - "onDidDismiss"?: (event: PopModalCustomEvent) => void; + "onDismiss"?: (event: PopModalCustomEvent) => void; /** * Emitted after the modal has presented. */ - "onDidPresent"?: (event: PopModalCustomEvent) => void; + "onPresent"?: (event: PopModalCustomEvent) => void; /** * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `open` will automatically be set back to `false` when the modal dismisses. * @config diff --git a/packages/core/src/components/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss index 60d1eae..fbe06b3 100644 --- a/packages/core/src/components/avatar/avatar.scss +++ b/packages/core/src/components/avatar/avatar.scss @@ -13,6 +13,7 @@ --color: #{theme.use_color("neutral.content")}; display: grid; + place-content: center; position: relative; aspect-ratio: 1; diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index e40dfbf..e89ad62 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -102,19 +102,19 @@ export class Modal implements ComponentInterface, OverlayInterface { if (isOpen) { this.present(); } else { - this.dismiss(null); + this.dismiss('close'); } } /** * Emitted after the modal has presented. */ - @Event() didPresent: EventEmitter; + @Event({ eventName: 'present' }) didPresent: EventEmitter; /** * Emitted after the modal has dismissed. */ - @Event() didDismiss: EventEmitter; + @Event({ eventName: 'dismiss' }) didDismiss: EventEmitter; connectedCallback(): void { const { trigger } = this; @@ -162,6 +162,7 @@ export class Modal implements ComponentInterface, OverlayInterface { } this.dialog.showModal(); + this.didPresent.emit(); return true; } @@ -177,6 +178,7 @@ export class Modal implements ComponentInterface, OverlayInterface { if (!open) return false; this.dialog.close(data); + this.didDismiss.emit(); return true; } diff --git a/packages/core/src/components/modal/tests/basic/index.html b/packages/core/src/components/modal/tests/basic/index.html new file mode 100644 index 0000000..4eee875 --- /dev/null +++ b/packages/core/src/components/modal/tests/basic/index.html @@ -0,0 +1,100 @@ + + + + + + + Dropdown | Poppy-ui + + + + + + + +
+
+

Dropdown - basic

+
+ default + + basic + close + +
+
+
+

Dropdown - Show backdrop

+
+ show-backdrop + + show backdrop + close + +
+
+
+

Dropdown - Backdrop

+
+ backdrop-dismiss + + backdrop dismiss + close + +
+
+
+

Dropdown - Open

+
+ open + + Open by default + close + +
+
+
+ + + + + diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index ec593d2..5040fcb 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -494,8 +494,8 @@ export const PopModal = /*@__PURE__*/ globalThis.window ? defineContainer