fix: more issuse (#71)

* fix: tab active icon * fix: some isssue * fix: issuse about hover * fix: carousel component * refactor: remove useless code * fix: bind item click * Update text-field.html * fix: add placeholder * feat: drawer component support dialog-not-mobile * fix: more style issuse * fix: dialog style * fix: some issuse * Update dialog.html * chore: bump version --------- Co-authored-by: huang yao <[email protected]>
ofajs · May 18, 2024 · c4b96f0 · c4b96f0
1 parent 28c2b4d
commit c4b96f0
Show file tree

Hide file tree

Showing 18 changed files with 166 additions and 91 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "punch-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "UI component library based on ofa.js development",
   "scripts": {
     "static": "node scripts/static-server.js"

diff --git a/packages/button/bind-item-click.js b/packages/button/bind-item-click.js
@@ -1,18 +1,32 @@
-export default function bindItemClick(_this, success) {
+export default function bindClick(_this, success) {
   _this.on("click", (e) => {
-    if (_this.disabled === null) {
-      const notSlotEls = _this.filter((e) => e.is(`:not([slot])`));
-      if (
-        notSlotEls.length === 1 &&
-        notSlotEls[0].tag === "a" &&
-        e.target.tagName !== "A"
-      ) {
-        notSlotEls[0].ele.dispatchEvent(new PointerEvent("click"));
+    if (_this.disabled !== null) {
+      e.stopImmediatePropagation();
+      return;
+    }
+
+    const notSlotEls = _this.filter((e) => e.is(`:not([slot])`));
+    if (notSlotEls.length === 1 && notSlotEls[0].tag === "a") {
+      if (e.target.tagName === "A") {
+        return;
       }
 
-      success && success();
-    } else {
       e.stopImmediatePropagation();
+
+      if (navigator.userAgent.includes("Firefox")) {
+        notSlotEls[0].ele.click();
+      } else {
+        notSlotEls[0].ele.dispatchEvent(
+          new PointerEvent("click", {
+            metaKey: e.metaKey,
+            shiftKey: e.shiftKey,
+            bubbles: e.bubbles,
+            cancelable: true,
+          })
+        );
+      }
     }
+
+    success && success();
   });
 }
diff --git a/packages/button/button.html b/packages/button/button.html
@@ -2,6 +2,7 @@
   <l-m src="../wave/wave.html"></l-m>
   <style>
     :host {
+      position: relative;
       display: inline-block;
       flex-shrink: 0;
       --pui-border-radius: 30px;
@@ -42,9 +43,10 @@
     :host([elevated]) .container {
       box-shadow: var(--contained-shadow);
     }
-
-    :host([elevated]) .container:hover {
-      box-shadow: var(--contained-hover-shadow);
+    @media (hover: hover) {
+      :host([elevated]) .container:hover {
+        box-shadow: var(--contained-hover-shadow);
+      }
     }
 
     :host([elevated]) .container:active {
@@ -69,8 +71,10 @@
     .container[variant="outlined"] .fake-border {
       border: var(--pui-on-main-color-container) solid 0.5px;
     }
-    .container[variant="outlined"]:hover .fake-border {
-      border: var(--pui-main-color) solid 1px;
+    @media (hover: hover) {
+      .container[variant="outlined"]:hover .fake-border {
+        border: var(--pui-main-color) solid 1px;
+      }
     }
 
     .container[variant="text"] {
@@ -134,8 +138,10 @@
       z-index: 0;
       transition: all ease 0.2s;
     }
-    .container:hover .hover-place {
-      background-color: var(--pui-main-hover-color);
+    @media (hover: hover) {
+      .container:hover .hover-place {
+        background-color: var(--pui-main-hover-color);
+      }
     }
 
     .text-place {
@@ -179,17 +185,7 @@
       align-items: center;
     }
 
-    ::slotted([button-goal]) {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-    }
-
     ::slotted(a) {
-      display: contents;
       color: inherit;
       text-decoration: none;
     }
@@ -253,11 +249,6 @@
       },
       ready() {
         bindClick(this);
-
-        this.on("click", () => {
-          const goal = this.$("[button-goal]");
-          goal && goal.ele.click();
-        });
       },
     };
   </script>

diff --git a/packages/carousel/carousel.html b/packages/carousel/carousel.html
@@ -22,7 +22,7 @@
       border-radius: var(--item-radio);
       cursor: pointer;
       overflow: hidden;
-      color: transparent;
+      /* color: transparent; */
     }
 
     ::slotted(*:last-child) {
@@ -56,7 +56,7 @@
   <inject-host>
     <style>
       p-carousel[add-anime] > * {
-        transition: all ease 0.3s;
+        transition: all ease 0.4s;
       }
 
       p-carousel[in-focus-mode] > [focus] {
@@ -263,16 +263,18 @@
               target = nextTarget;
             } else {
               const newTarget = this[lastVisId - 1];
-              const newBasis =
-                (containerWidth % mainBasis) -
-                Math.floor(containerWidth / mainBasis) * this.spaceSize;
-              newTarget.style.flexBasis = `${newBasis}px`;
-              newTarget.style.marginRight = this.spaceSize + "px";
-              newTarget.attr(
-                "visabled",
-                Math.round((newBasis / mainBasis) * 10) * 10
-              );
-              visables.add(newTarget);
+              if (newTarget) {
+                const newBasis =
+                  (containerWidth % mainBasis) -
+                  Math.floor(containerWidth / mainBasis) * this.spaceSize;
+                newTarget.style.flexBasis = `${newBasis}px`;
+                newTarget.style.marginRight = this.spaceSize + "px";
+                newTarget.attr(
+                  "visabled",
+                  Math.round((newBasis / mainBasis) * 10) * 10
+                );
+                visables.add(newTarget);
+              }
               break;
             }
           }
@@ -307,7 +309,6 @@
           const point = e?.changedTouches[0] || e.targetTouches[0];
           startX = point.screenX;
           startTime = Date.now();
-          console.log("this.currentId1", this.currentId);
           clearTimeout(this._autoplayTimer);
         });
         this.on("touchmove", (e) => {
@@ -330,12 +331,10 @@
           const point = e?.changedTouches[0] || e.targetTouches[0];
           const diffX = point.screenX - startX;
           const diffTime = Date.now() - startTime;
-          console.log(diffX, diffTime);
 
           let newIndex = this.currentId - diffX / 200;
 
           this.attr("add-anime", "");
-          console.log("this.currentId2", this.currentId);
 
           if (diffTime < 200 && Math.abs(diffX) >= 20) {
             if (diffX < 0) {

diff --git a/packages/dialog/dialog-demo.html b/packages/dialog/dialog-demo.html
@@ -16,7 +16,7 @@
     :open="open1"
     on:click-mask="open1 = false"
     on:click-close="open1 = false"
-    fullscreen="540"
+    auto-fullscreen
     style="--dialog-width: 320px"
   >
     <span slot="title">Basic dialog title</span>
@@ -32,7 +32,7 @@
     :open="open2"
     on:click-mask="open2 = false"
     on:click-close="open2 = false"
-    fullscreen="540"
+    auto-fullscreen
   >
     <span slot="title">Basic dialog title</span>
     <p-list>

diff --git a/packages/dialog/dialog.html b/packages/dialog/dialog.html
@@ -12,10 +12,10 @@
       background-color: var(--md-sys-color-on-normal);
       width: var(--dialog-width, auto);
       min-width: 320px;
+      --label-bg: var(--md-sys-color-on-normal);
     }
     .tltle {
       display: flex;
-      align-items: center;
       font-size: 20px;
       font-weight: 400;
       line-height: 1.2em;
@@ -61,10 +61,31 @@
 
     .close-btn {
       display: none;
+      cursor: pointer;
       margin-right: calc(var(--pui-space-x) * 3);
     }
   </style>
 
+  <x-if :value="autoFullscreen !== null">
+    <style>
+      @media screen and (max-width: 600px) {
+        .main {
+          height: 100%;
+          width: 100%;
+          border-radius: 0;
+        }
+
+        .close-btn {
+          display: block;
+        }
+
+        .content {
+          max-height: calc(100vh - 150px);
+        }
+      }
+    </style>
+  </x-if>
+
   <style :html="fstyle"></style>
 
   <x-if :value="noMask === null">
@@ -109,7 +130,7 @@
       return {
         tag: "p-dialog",
         attrs: {
-          fullscreen: null,
+          autoFullscreen: null,
           autoclose: null,
           noMask: null,
         },
@@ -138,31 +159,6 @@
               }, 100);
             }
           },
-          fullscreen(val) {
-            if (val !== null) {
-              this.fstyle = `
-      @media screen and (max-width: ${val === "" ? "100vw" : val + "px"}) {
-        .main {
-          height: 100%;
-          width: 100%;
-          border-radius:0;
-        }
-
-        .close-btn {
-          display: block;
-        }
-
-        .tltle {
-        }
-
-        .content {
-          max-height: calc(100vh - 150px);
-        }
-      }`;
-            } else {
-              this.fstyle = "";
-            }
-          },
         },
       };
     };

diff --git a/packages/drawer/drawer.html b/packages/drawer/drawer.html
@@ -5,10 +5,12 @@
       font-size: 14px;
     }
     .main {
+      position: relative;
       box-sizing: border-box;
       padding: calc(var(--pui-space-y) * 6) calc(var(--pui-space-x) * 4);
       /* border-radius: var(--dialog-border-radius, 30px); */
       background-color: var(--md-sys-color-on-normal);
+      --label-bg: var(--md-sys-color-on-normal);
       min-width: var(--dialog-min-width, 320px);
       min-height: var(--dialog-min-height, 320px);
     }
@@ -90,6 +92,25 @@
     .container[anchor="bottom"] p-mask::part(container) {
       transform-origin: 50% 100%;
     }
+
+    ::slotted([close-button]) {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+    }
+  </style>
+  <style>
+    @media screen and (min-width: 600px) {
+      :host([dialog-not-mobile]) .container[anchor="bottom"] .main {
+        width: auto;
+        height: auto;
+        border-radius: var(--dialog-border-radius, 30px);
+      }
+
+      :host([dialog-not-mobile]) .container p-mask::part(container) {
+        align-items: center;
+      }
+    }
   </style>
   <l-m src="../dialog/mask.html"></l-m>
 
@@ -108,6 +129,7 @@
       attrs: {
         anchor: "left",
         autoClose: null,
+        // dialogNotMobile: null,
       },
       data: {
         open: false,

diff --git a/packages/field-container/field.css b/packages/field-container/field.css
@@ -77,7 +77,7 @@
   line-height: 16px;
   position: absolute;
   top: calc(var(--pui-space-y) * 2);
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--label-bg, var(--md-sys-color-surface));
   white-space: nowrap;
   transition: all ease 0.3s;
   pointer-events: none;

diff --git a/packages/field-container/field.less b/packages/field-container/field.less
@@ -112,7 +112,7 @@
     position: absolute;
     top: calc(var(--pui-space-y) * 2);
     // left: calc(var(--pui-space-x) * 1.5);
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--label-bg,var(--md-sys-color-surface));
     white-space: nowrap;
     transition: all ease 0.3s;
     pointer-events: none;