Merge branch 'develop'

Yegorich555 · Nov 17, 2023 · 136e896 · 136e896
2 parents 15a3d89 + b6e041b
commit 136e896
Show file tree

Hide file tree

Showing 29 changed files with 109 additions and 130 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,22 @@
+<!-- markdownlint-disable MD024 -->
 # Changelog
 
+## 1.0.1 (\_\_\_)
+
+### Fixes
+
+---
+
+- [ModalElement](src/modalElement.ts.ts). _Wrong behavior on confirmModal + replace: true + click outside on previous/hidden modal_
+- [PopupElement](src/popup/popupElement.ts). _Popup blinks on fast open+close_
+- **Controls**
+  - _Missed css-var `--base-margin`_
+  - _Missed style `flex: 1` for switch/checkbox_ controls
+
+---
+
+---
+
 ## 1.0.0 (Nov 13, 2023)
 
 ### New Features
@@ -45,6 +62,7 @@
 
   - Added static `.$use()`. Call it before using element: `WUPTextControl.$use()` (_self-registration by import_ works now and will be removed in the future)
   - Renamed css-vars:
+
     - `--ctrl-select-menu-hover` >>> `--menu-hover-bg`
     - `--anim-time` >>> `--anim-t`
     - `--popup` >>> `popup-text`
@@ -78,7 +96,7 @@
     - enum `HideCases` >>> `MenuHideCases`
     - event `$showMenu` >>> `$openMenu`
     - event `$hideMenu` >>> `$closeMenu`
-    etc.
+      etc.
 
 ---
 

diff --git a/demo/src/components/modalView.tsx b/demo/src/components/modalView.tsx
@@ -126,7 +126,7 @@ export default function ModalView() {
           </button>
           <wup-modal w-target="prev" w-placement="top">
             <h2>Modal with placement: top</h2>
-            <div>{bigContent}</div>
+            <div>{smallContent}</div>
             <SameFooter />
           </wup-modal>
           {/*  */}
@@ -135,7 +135,7 @@ export default function ModalView() {
           </button>
           <wup-modal w-target="prev" w-placement="center">
             <h2>Modal with placement: center</h2>
-            <div>{bigContent}</div>
+            <div>{smallContent}</div>
             <SameFooter />
           </wup-modal>
           {/*  */}
@@ -211,6 +211,15 @@ const confirmHookHTML = `html
 </button>
 `;
 
+const smallContentRaw = [
+  `Let's explain the popup element. During the 10+ years, I've worked with 10s libraries included popup. Every library has huge amount of issues!`,
+  `* almost with every library impossible to place popup inside parent with position relative. In web-ui-pack it's possible.`,
+  `* almost in every library popup time to time is wrongly positioned when there is not enough space (sometimes outside the viewport). In web-ui-pack it works like a charm.`,
+  `* most of popups are extremely difficult to position/resize on the fly, or even impossible to set position priorities
+when there is not enough space for the popup at the first pointed position. In web-ui-pack it's very flexible!`,
+];
+const smallContent = smallContentRaw.map((s) => s.replace(/\n/g, " ")).join("\r\n\r\n");
+
 const bigContent = [
   `I've been in development since 2010. And nowadays, I'm really impressed that web browsers don't suggest good
 elements with rich functionality, perfect styles and easy customizable at the same time.
@@ -245,11 +254,7 @@ then developers can change styles completely with a single custom class without
 
   `THE LIBRARY WEB-UI-PACK FITS ALL REQUIREMENTS ABOVE!`,
 
-  `Let's explain the popup element. During the 10+ years, I've worked with 10s libraries included popup. Every library has huge amount of issues!`,
-  `* almost with every library impossible to place popup inside parent with position relative. In web-ui-pack it's possible.`,
-  `* almost in every library popup time to time is wrongly positioned when there is not enough space (sometimes outside the viewport). In web-ui-pack it works like a charm.`,
-  `* most of popups are extremely difficult to position/resize on the fly, or even impossible to set position priorities
-when there is not enough space for the popup at the first pointed position. In web-ui-pack it's very flexible`,
+  ...smallContentRaw,
 
   `So every element/helper is the result of many years of experience collected in one place to help the web community develop faster, easier and better overall.
 This library is a wonderful solution that must fit the requirements of every developer, every user, and the highest standards nowadays!`,

diff --git a/demo/src/main.scss b/demo/src/main.scss
@@ -44,12 +44,13 @@ a.headerLink {
 }
 
 .darkMode {
+  flex: 0;
   font-size: 14px;
   margin: 0 4px;
   box-shadow: none !important;
   border: none !important;
 
-  --ctrl-switch-r: 1.4em;
+  --ctrl-switch-r: 20px;
   --ctrl-switch-r-hover: 2em;
   --ctrl-switch-h: 2em;
   --ctrl-switch-w: 3.6em;

diff --git a/src/baseElement.ts b/src/baseElement.ts
@@ -690,6 +690,11 @@ export default abstract class WUPBaseElement<
     });
   }
 
+  /** Removes empty attr [style] */
+  removeEmptyStyle(): void {
+    !this.getAttribute("style") && this.removeAttribute("style");
+  }
+
   // /** Forces to re-calc render-logic of browser */
   // refreshRender(): void {
   //   const was = this.style.display;

diff --git a/src/controls/baseCombo.ts b/src/controls/baseCombo.ts
@@ -327,30 +327,10 @@ export default abstract class WUPBaseComboControl<
     this._focusedMenuItem = next;
   }
 
-  #scrolltid?: ReturnType<typeof setTimeout>;
-  #scrollFrame?: ReturnType<typeof requestAnimationFrame>;
   /** Scroll to element if previous scroll is not in processing (debounce by empty timeout) */
   tryScrollTo(el: HTMLElement): void {
-    if (this.#scrolltid) {
-      return;
-    }
-    this.#scrolltid = setTimeout(() => {
-      this.#scrolltid = undefined;
-      this.#scrollFrame && window.cancelAnimationFrame(this.#scrollFrame); // cancel previous scrolling
-      this.#scrollFrame = undefined;
-      const act = (): void => {
-        const p = el.parentElement!; // WARN: expected that parent is scrollable
-        const prev = p.scrollTop;
-        const ifneed = (el as any).scrollIntoViewIfNeeded as undefined | ((center?: boolean) => void);
-        ifneed ? ifneed.call(el, false) : el.scrollIntoView({ behavior: "instant" as ScrollBehavior });
-        if (p.scrollTop !== prev) {
-          this.#scrollFrame = window.requestAnimationFrame(act); // try scroll again later because during the popup animation scrolling can be wrong
-        } else {
-          this.#scrollFrame = undefined;
-        }
-      };
-      act();
-    });
+    const scroll = (el as any).scrollIntoViewIfNeeded as undefined | ((center?: boolean) => void);
+    scroll ? scroll.call(el, false) : el.scrollIntoView({ behavior: "instant" as ScrollBehavior });
   }
 
   _selectedMenuItem?: HTMLElement | null;

diff --git a/src/controls/baseControl.ts b/src/controls/baseControl.ts
@@ -284,7 +284,8 @@ export default abstract class WUPBaseControl<
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);

diff --git a/src/controls/text.ts b/src/controls/text.ts
@@ -137,9 +137,7 @@ export default class WUPTextControl<
   static get $style(): string {
     return `${super.$style}
         :host {
-          contain: style;
           cursor: text;
-          flex: 1;
         }
         :host label > span {
           width: 100%;

diff --git a/src/dropdownElement.ts b/src/dropdownElement.ts
@@ -189,7 +189,7 @@ export default class WUPDropdownElement<
     }
     const p = WUPPopupElement.prototype.goClose.call(this.$refPopup, closeCase, ev).finally(() => {
       t.style.zIndex = "";
-      !t.getAttribute("style") && t.removeAttribute("style");
+      this.removeEmptyStyle.call(t);
     });
     const t = this.$refPopup.$options.target!;
     t.setAttribute("aria-expanded", false);

diff --git a/src/helpers/animateDropdown.ts b/src/helpers/animateDropdown.ts
@@ -71,7 +71,7 @@ export default function animateDropdown(el: HTMLElement, ms: number, isHide = fa
     const pos = el.getAttribute("position");
     let tmo = "bottom";
     let tmo2 = "top";
-    let scale = "scaleY" as "scaleY" | "scaleX";
+    let scale: "scaleY" | "scaleX" = "scaleY";
     /* prettier-ignore */
     switch (pos) {
       case "bottom": tmo="top"; tmo2="bottom"; break;

diff --git a/src/modalElement.ts b/src/modalElement.ts
@@ -314,6 +314,12 @@ export default class WUPModalElement<
       :host[show] {
         transform: none;
       }
+      :host[hide] {
+        opacity: 0!important;
+        pointer-events: none!important;
+        user-select: none!important;
+        touch-action: none!important;
+      }
       @media (max-width: 600px) {
         :host {
           --modal-margin: 0px;
@@ -481,9 +487,7 @@ export default class WUPModalElement<
       this.$refFade ??= (isReplace ? document.body : p).appendChild(document.createElement("div")); // append to parent to hide modal parent
       this.$refFade.setAttribute("show", ""); // WARN without timeout to show immediately
       p.$refFade!.style.display = "none";
-      if (isReplace) {
-        p.style.opacity = "0"; // hide such modal
-      }
+      isReplace && p.setAttribute("hide", ""); // hide such modal
     }
 
     this.$refFade.className = this.#ctr.$classFade;
@@ -538,9 +542,8 @@ export default class WUPModalElement<
       this.$refFade = undefined;
       const p = this._openedModals[this._mid! - 2];
       p.$refFade!.style.display = "";
-      !p.$refFade!.getAttribute("style") && p.$refFade!.removeAttribute("style");
-      p.style.opacity = "";
-      !p.getAttribute("style") && p.removeAttribute("style");
+      this.removeEmptyStyle.call(p.$refFade!);
+      p.removeAttribute("hide");
     }
     this._openedModals.splice(this._mid! - 1, 1); // self remove from array
 

diff --git a/src/popup/popupElement.ts b/src/popup/popupElement.ts
@@ -529,6 +529,10 @@ export default class WUPPopupElement<
   /** Required to stop previous animations/timeouts (for case when option animation is changed) */
   _stopAnimation?: () => void;
   protected goAnimate(animTime: number, isHide: boolean): Promise<boolean> {
+    if (!isHide && animTime) {
+      this.style.opacity = "0";
+      setTimeout(() => (this.style.opacity = ""), 2); // such logic allows to calc layout & scroll to element & then animate properly
+    }
     this._isStopChanges = true;
     if (this._opts.animation === PopupAnimations.drawer) {
       this.setAttribute("w-animation", "drawer");
@@ -623,7 +627,14 @@ export default class WUPPopupElement<
     immediately?: boolean
   ): void {
     this._stopAnimation?.call(this);
-    !immediately && this.goAnimate(this.animTime, true);
+    !immediately &&
+      this.goAnimate(this.animTime, true).then((isEnd) => {
+        if (isEnd) {
+          const fix = this._whenClose;
+          this.resetState(); // custom animation can finish faster so need to reset state immediately
+          this._whenClose = fix; // WARN: event $close fired after strict this.animTime
+        }
+      });
   }
 
   /** Returns `target.getBoundingClientRect()` Use function to change placement logic based on target-rect
@@ -784,7 +795,7 @@ export default class WUPPopupElement<
       // suggestion: if height/width is very small we can use another side
       let sp = this.#state!.scrollParents[0];
       /* istanbul ignore next */
-      sp = sp === document.documentElement ? document.body : sp; // when scrollParent is html element then rect.top can be negative: to test place target at bottom body+margin taget+html vert.scroll
+      sp = sp === document.documentElement ? document.body : sp; // when scrollParent is html element then rect.top can be negative: to test place target at bottom body+margin target+html vert.scroll
       const scrollRect = getBoundingInternalRect(sp); // warn: it's important to fit only first parent
       t.top = Math.max(scrollRect.top, t.top);
       t.bottom = Math.min(scrollRect.bottom, t.bottom);
@@ -845,7 +856,7 @@ export default class WUPPopupElement<
             me.arrow.h = maxArrowSize / 2;
             this.$refArrow!.style.width = `${me.arrow.w}px`;
             this.$refArrow!.style.height = `${me.arrow.h}px`;
-            pos = lastRule(t, me, fit); // recalc position because size of arrow is changed
+            pos = lastRule(t, me, fit); // re-calc position because size of arrow is changed
           }
         };
 
@@ -936,5 +947,6 @@ customElements.define(tagName, WUPPopupElement);
 // manual testcase: show as dropdown & scroll parent - blur effect can appear
 
 // NiceToHave add 'position: centerScreen' to place as modal when content is big and no spaces anymore
-// NiceToHave 2 popups can oveflow each other: need option to try place several popups at once without oveflow. Example on wup-pwd page: issue with 2 errors
+// NiceToHave 2 popups can overflow each other: need option to try place several popups at once without overflow. Example on wup-pwd page: issue with 2 errors
 // NiceToHave animation.default animates to opacity: 1 but need to animate to opacityFromCss
+// todo issue if combobox open+close+open in a short time
diff --git a/test/jest/__snapshots__/formElement.test.js.snap b/test/jest/__snapshots__/formElement.test.js.snap
@@ -197,7 +197,8 @@ WUP-FORM button[type=submit][aria-busy] {
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);
@@ -336,9 +337,7 @@ mask-image: var(--ctrl-icon-img);
         }
       }
         WUP-TEXT {
-          contain: style;
           cursor: text;
-          flex: 1;
         }
         WUP-TEXT label &gt; span {
           width: 100%;

diff --git a/test/jest/__snapshots__/modalElement.test.js.snap b/test/jest/__snapshots__/modalElement.test.js.snap
@@ -206,6 +206,12 @@ WUP-MODAL::-webkit-scrollbar-track-piece:horizontal:end {
       WUP-MODAL[show] {
         transform: none;
       }
+      WUP-MODAL[hide] {
+        opacity: 0!important;
+        pointer-events: none!important;
+        user-select: none!important;
+        touch-action: none!important;
+      }
       @media (max-width: 600px) {
         WUP-MODAL {
           --modal-margin: 0px;

diff --git a/test/jest/controls/__snapshots__/control.calendar.test.js.snap b/test/jest/controls/__snapshots__/control.calendar.test.js.snap
@@ -1095,7 +1095,8 @@ padding:0;}
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);

diff --git a/test/jest/controls/__snapshots__/control.check.test.js.snap b/test/jest/controls/__snapshots__/control.check.test.js.snap
@@ -334,7 +334,8 @@ padding:0;}
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);

diff --git a/test/jest/controls/__snapshots__/control.date.test.js.snap b/test/jest/controls/__snapshots__/control.date.test.js.snap
@@ -396,7 +396,8 @@ padding:0;}
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);
@@ -535,9 +536,7 @@ mask-image: var(--ctrl-icon-img);
         }
       }
         WUP-DATE {
-          contain: style;
           cursor: text;
-          flex: 1;
         }
         WUP-DATE label &gt; span {
           width: 100%;

diff --git a/test/jest/controls/__snapshots__/control.number.test.js.snap b/test/jest/controls/__snapshots__/control.number.test.js.snap
@@ -372,7 +372,8 @@ padding:0;}
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);
@@ -511,9 +512,7 @@ mask-image: var(--ctrl-icon-img);
         }
       }
         WUP-NUM {
-          contain: style;
           cursor: text;
-          flex: 1;
         }
         WUP-NUM label &gt; span {
           width: 100%;

diff --git a/test/jest/controls/__snapshots__/control.pwd.test.js.snap b/test/jest/controls/__snapshots__/control.pwd.test.js.snap
@@ -436,7 +436,8 @@ padding:0;}
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);
@@ -575,9 +576,7 @@ mask-image: var(--ctrl-icon-img);
         }
       }
         WUP-PWD {
-          contain: style;
           cursor: text;
-          flex: 1;
         }
         WUP-PWD label &gt; span {
           width: 100%;

diff --git a/test/jest/controls/__snapshots__/control.radio.test.js.snap b/test/jest/controls/__snapshots__/control.radio.test.js.snap
@@ -779,7 +779,8 @@ padding:0;}
         --ctrl-focus-border: var(--ctrl-focus);
         contain: style;
         display: block;
-        margin: 20px 0;
+        flex: 1;
+        margin: var(--base-margin) 0;
         box-shadow: 0 0 0 1px var(--ctrl-border);
         border-radius: var(--ctrl-border-radius);
         color: var(--ctrl-text);