fix(core/drawer|inputgroup): fixed drawer display issue

siemens · Nov 28, 2024 · 87e0a0c · 87e0a0c
1 parent bc56a49
commit 87e0a0c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 63 deletions.
diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss
@@ -20,17 +20,19 @@
   visibility: hidden;
 
   display: flex;
-  position: absolute;
+  position: fixed;
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: center;
+  transform: translateX(16rem);
+  opacity: 0;
 
   max-height: 100vh;
   min-height: $large-space;
   background-color: var(--theme-color-1);
   border-radius: $default-border-radius;
 
-  transition: all var(--theme-medium-time) ease-out;
+  transition: transform var(--theme-medium-time) ease-out;
 
   .toggle {
     z-index: 100;

diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx
@@ -70,7 +70,8 @@ export class Drawer {
   private divElement?: HTMLElement;
 
   @Watch('show')
-  onShowChanged(newValue: boolean) {
+  onShowChanged(newValue: boolean, oldValue?: boolean) {
+    if (newValue === !!oldValue) return;
     this.show = newValue !== undefined ? newValue : !this.show;
     this.toggleDrawer(this.show);
   }
@@ -120,34 +121,24 @@ export class Drawer {
     }
   }
 
-  private slideOutRight(el?: HTMLElement) {
-    if (el) {
-      anime({
-        targets: el,
-        duration: Drawer.duration,
-        translateX: [0, '16rem'],
-        opacity: [1, 0],
-        easing: 'easeInSine',
-        complete: () => {
-          el.classList.add('d-none');
-        },
-      });
-    }
+  private slideOutRight(el: HTMLElement) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: [0, '16rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+    });
   }
 
-  private slideInRight(el?: HTMLElement) {
-    if (el) {
-      anime({
-        targets: el,
-        duration: Drawer.duration,
-        translateX: ['16rem', 0],
-        opacity: [0, 1],
-        easing: 'easeOutSine',
-        begin: () => {
-          el.classList.remove('d-none');
-        },
-      });
-    }
+  private slideInRight(el: HTMLElement) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: ['16rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+    });
   }
 
   componentDidLoad() {
@@ -160,7 +151,8 @@ export class Drawer {
         class={{
           'drawer-container': true,
           toggle: this.show,
-          'd-none': true,
+          'full-height': this.fullHeight,
+
         }}
         style={{
           width: this.width === 'auto' ? this.width : `${this.width}rem`,

diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx
@@ -23,6 +23,9 @@ export class InputGroup {
   @State() inputPaddingLeft = 0;
   @State() inputPaddingRight = 0;
 
+  startSlotRef: HTMLElement;
+  endSlotRef: HTMLElement;
+
   private get inputElement() {
     return this.hostElement.querySelector('input') as HTMLInputElement;
   }
@@ -61,6 +64,7 @@ export class InputGroup {
     });
   }
 
+
   componentDidRender() {
     this.prepareInputElement();
   }
@@ -100,50 +104,41 @@ export class InputGroup {
   }
 
   private startSlotChanged() {
-    const slot = this.hostElement.shadowRoot.querySelector(
-      'slot[name="input-start"]'
-    );
+    const startPadding = this.getChildrenWidth(this.startSlotRef);
 
-    setTimeout(() => {
-      const startPadding = this.getChildrenWidth(slot);
+    if (startPadding !== 0) {
+      this.inputPaddingLeft = 11 + startPadding;
+    } else {
+      this.inputPaddingLeft = 0;
+    }
 
-      if (startPadding !== 0) {
-        this.inputPaddingLeft = 11 + startPadding;
-      } else {
-        this.inputPaddingLeft = 0;
-      }
+    if (!this.inputElement) {
+      return;
+    }
 
-      if (!this.inputElement) {
-        return;
-      }
+    const isInputInvalid =
+      !this.inputElement.validity.valid ||
+      this.inputElement.classList.contains('is-invalid');
 
-      const isInputInvalid =
-        !this.inputElement.validity.valid ||
-        this.inputElement.classList.contains('is-invalid');
+    const formWasValidated =
+      this.inputElement.form?.classList.contains('was-validated') ||
+      this.inputElement.form?.noValidate === false;
 
-      const formWasValidated =
-        this.inputElement.form?.classList.contains('was-validated') ||
-        this.inputElement.form?.noValidate === false;
+    if (formWasValidated && isInputInvalid) {
+      const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
+      this.inputElement.style.backgroundPosition = `left ${left}px center`;
+      this.inputPaddingLeft += 26;
+    }
 
-      if (formWasValidated && isInputInvalid) {
-        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
-        this.inputElement.style.backgroundPosition = `left ${left}px center`;
-        this.inputPaddingLeft += 26;
-      }
-    });
   }
 
   private endSlotChanged() {
-    const slot = this.hostElement.shadowRoot.querySelector(
-      'slot[name="input-end"]'
-    );
+    this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);
 
-    setTimeout(() => {
-      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);
-    });
   }
 
   private getChildrenWidth(slotElement: Element) {
+
     if (!slotElement) {
       return 0;
     }
@@ -166,11 +161,11 @@ export class InputGroup {
     return (
       <Host class={{ disabled: this.disabled }}>
         <div class="group group-start">
-          <slot name="input-start"></slot>
+          <slot ref={(el: HTMLElement) => this.startSlotRef = el} name="input-start"></slot>
         </div>
         <slot></slot>
         <div class="group group-end">
-          <slot name="input-end"></slot>
+          <slot ref={(el: HTMLElement) => this.endSlotRef = el} name="input-end"></slot>
         </div>
       </Host>
     );