🐛 Fix dialog rendering issue to ensure full-page coverage
✨ Add optional page transitions for improved navigation 🎨 Enhance dashboard UI/UX for better user experience
This commit is contained in:
parent
ff01fc8503
commit
aa8d8bb4f3
7 changed files with 278 additions and 88 deletions
|
@ -1,11 +1,13 @@
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { type Ref, createRef, ref } from 'lit/directives/ref.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
import '@components/General/Button';
|
||||
import { StyledInput } from '@components/General/Input';
|
||||
import { StyledTextarea } from '@components/General/Textarea';
|
||||
import { StyledToggle } from '@components/General/Toggle';
|
||||
import type { EveDialog } from '../General/Dialog';
|
||||
|
||||
interface InputEvent extends Event {
|
||||
detail: {
|
||||
|
@ -18,6 +20,8 @@ export class CalendarEventDialog extends LitElement {
|
|||
@property({ type: Boolean })
|
||||
open = false;
|
||||
|
||||
dialogRef: Ref<EveDialog> = createRef();
|
||||
|
||||
@state()
|
||||
private newEvent = {
|
||||
title: '',
|
||||
|
@ -49,7 +53,8 @@ export class CalendarEventDialog extends LitElement {
|
|||
`;
|
||||
|
||||
private handleClose() {
|
||||
this.dispatchEvent(new CustomEvent('close'));
|
||||
this.dialogRef.value?.close(false);
|
||||
this.dispatchEvent(new CustomEvent('close', { bubbles: false }));
|
||||
}
|
||||
|
||||
private handleInputChange(e: Event) {
|
||||
|
@ -77,7 +82,7 @@ export class CalendarEventDialog extends LitElement {
|
|||
if (!this.open) return html``;
|
||||
|
||||
return html`
|
||||
<arx-dialog width="500px" title="Add Event" .open=${this.open}>
|
||||
<arx-dialog ${ref(this.dialogRef)} width="500px" title="Add Event" .open=${this.open} @close=${this.handleClose}>
|
||||
<arx-fieldset legend="Title">
|
||||
<arx-input
|
||||
type="text"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue