fix: radio icon 漂移

hellof2e · Dec 27, 2023 · b2b99a2 · b2b99a2
1 parent c474516
commit b2b99a2
Show file tree

Hide file tree

Showing 9 changed files with 1,255 additions and 166 deletions.
diff --git a/packages/quark-react/CHANGELOG.md b/packages/quark-react/CHANGELOG.md
diff --git a/packages/quark-react/package.json b/packages/quark-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quarkd/quark-react",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Web components react reactify",
   "types": "lib/index.d.ts",
   "typings": "lib/index.d.ts",
@@ -24,7 +24,7 @@
     "*.js"
   ],
   "dependencies": {
-    "quarkd": "1.5.2",
+    "quarkd": "1.5.3",
     "@quarkd/reactify": "^1.0.3"
   },
   "devDependencies": {

diff --git a/packages/quark-react/src/docs b/packages/quark-react/src/docs
diff --git a/packages/quarkd/CHANGELOG.md b/packages/quarkd/CHANGELOG.md
@@ -1,5 +1,18 @@
 # 更新日志
 
+### [1.5.3](https://github.com/hellof2e/quark-design/compare/v1.5.2...v1.5.3) (2023-12-26)
+
+### 🎉 Features
+
+- **index:** add watermark component ([#321](https://github.com/hellof2e/quark-design/issues/321)) ([a22d870](https://github.com/hellof2e/quark-design/commit/a22d87066c00f777c8d848515296c3a1bad3ecdc))
+- udpate quarkd ([505f985](https://github.com/hellof2e/quark-design/commit/505f985af5b71e027184fe3053b1c02ca750c281))
+- 水印 ([1b37564](https://github.com/hellof2e/quark-design/commit/1b375647a6faa3cdf8dd87801d9ff177e24e4f75))
+
+### 🐞 Bug Fixes
+
+- radio gap ([c474516](https://github.com/hellof2e/quark-design/commit/c47451659f4b9b40baffbffe4ecd126f699cec0e))
+- radio gap ([3072e55](https://github.com/hellof2e/quark-design/commit/3072e5552e2c127b332d7c1c1cf1a442fff7d4b3))
+
 ### [1.5.1](https://github.com/hellof2e/quark-design/compare/v1.5.0...v1.5.1) (2023-12-08)
 
 ### 🎉 Features

diff --git a/packages/quarkd/package.json b/packages/quarkd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quarkd",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Mobile UI Components built on Web Components.",
   "main": "lib/index.js",
   "module": "lib/index.js",

diff --git a/packages/quarkd/src/docs b/packages/quarkd/src/docs
@@ -1,4 +1,19 @@
 # 更新日志
+### [1.5.3](https://github.com/hellof2e/quark-design/compare/v1.5.2...v1.5.3) (2023-12-26)
+
+
+### 🎉 Features
+
+* **index:** add watermark component ([#321](https://github.com/hellof2e/quark-design/issues/321)) ([a22d870](https://github.com/hellof2e/quark-design/commit/a22d87066c00f777c8d848515296c3a1bad3ecdc))
+* udpate quarkd ([505f985](https://github.com/hellof2e/quark-design/commit/505f985af5b71e027184fe3053b1c02ca750c281))
+* 水印 ([1b37564](https://github.com/hellof2e/quark-design/commit/1b375647a6faa3cdf8dd87801d9ff177e24e4f75))
+
+
+### 🐞 Bug Fixes
+
+* radio gap ([c474516](https://github.com/hellof2e/quark-design/commit/c47451659f4b9b40baffbffe4ecd126f699cec0e))
+* radio gap ([3072e55](https://github.com/hellof2e/quark-design/commit/3072e5552e2c127b332d7c1c1cf1a442fff7d4b3))
+
 ### [1.5.1](https://github.com/hellof2e/quark-design/compare/v1.5.0...v1.5.1) (2023-12-08)
 
 ### 🎉 Features

diff --git a/packages/quarkd/src/radio/demo.vue b/packages/quarkd/src/radio/demo.vue
@@ -42,7 +42,7 @@
     <h2>{{ translate("title.size") }}</h2>
     <div class="radio-container">
       <quark-radio-group :value="data.value3" @change="onChange3">
-        <quark-radio name="apple" size="big">{{
+        <quark-radio name="apple" size="big" shape="square">{{
           translate("size.square")
         }}</quark-radio>
         <quark-radio name="banana" size="big">{{
@@ -63,10 +63,10 @@
       </quark-radio-group>
     </div>
     <div class="radio-container">
-      <quark-radio :checked="true" disabled>{{
+      <quark-radio :checked="true" disabled shape="square">{{
         translate("disabled.squareChecekd")
       }}</quark-radio>
-      <quark-radio :checked="false" disabled>{{
+      <quark-radio :checked="false" disabled shape="square">{{
         translate("disabled.squareUnchecked")
       }}</quark-radio>
     </div>

diff --git a/packages/quarkd/src/radio/index.tsx b/packages/quarkd/src/radio/index.tsx
@@ -89,33 +89,32 @@ class QuarkRadio extends QuarkElement {
     return (
       <div class="quark-radio" onClick={this.handleCheck}>
         <span class="quark-radio-container">
-          <input type="checkbox" />
-          <span class="quark-radio-show"></span>
-          <svg
-            class="quark-radio-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            width="40px"
-            height="40px"
-            viewBox="0 0 40 40"
-            version="1.1"
-          >
-            <title>画板</title>
-            <g
-              id="画板"
-              stroke="none"
-              stroke-width="1"
-              fill="none"
-              fill-rule="evenodd"
+          <span class="quark-radio-show">
+            <svg
+              class="quark-radio-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              width="40px"
+              height="40px"
+              viewBox="0 0 40 40"
+              version="1.1"
             >
-              <path
-                d="M28.5857864,13.5857864 C29.366835,12.8047379 30.633165,12.8047379 31.4142136,13.5857864 C32.1952621,14.366835 32.1952621,15.633165 31.4142136,16.4142136 L19.9142136,27.9142136 C19.133165,28.6952621 17.866835,28.6952621 17.0857864,27.9142136 L10.5857864,21.4142136 C9.80473785,20.633165 9.80473785,19.366835 10.5857864,18.5857864 C11.366835,17.8047379 12.633165,17.8047379 13.4142136,18.5857864 L18.5,23.671 L28.5857864,13.5857864 Z"
-                id="路径-5"
-                fill="#FFFFFF"
-                fill-rule="nonzero"
-              />
-            </g>
-          </svg>
-          <span class="disabled"></span>
+              <title>画板</title>
+              <g
+                id="画板"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+              >
+                <path
+                  d="M28.5857864,13.5857864 C29.366835,12.8047379 30.633165,12.8047379 31.4142136,13.5857864 C32.1952621,14.366835 32.1952621,15.633165 31.4142136,16.4142136 L19.9142136,27.9142136 C19.133165,28.6952621 17.866835,28.6952621 17.0857864,27.9142136 L10.5857864,21.4142136 C9.80473785,20.633165 9.80473785,19.366835 10.5857864,18.5857864 C11.366835,17.8047379 12.633165,17.8047379 13.4142136,18.5857864 L18.5,23.671 L28.5857864,13.5857864 Z"
+                  id="路径-5"
+                  fill="#FFFFFF"
+                  fill-rule="nonzero"
+                />
+              </g>
+            </svg>
+          </span>
         </span>
         <label class={this.classNames}>
           <slot ref={this.slotRef} onslotchange={this.dealClass}></slot>

diff --git a/packages/quarkd/src/radio/style.css b/packages/quarkd/src/radio/style.css
@@ -48,16 +48,16 @@
 :host .quark-radio-container {
   position: relative;
   display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
   height: var(--radio-size, 20px);
   width: var(--radio-size, 20px);
   margin-right: var(--radio-label-gap, 8px);
   flex-shrink: 0;
 }
 
 :host .quark-radio-icon {
-  position: absolute;
-  top: 0;
-  left: 0;
   height: 100%;
   width: 100%;
   visibility: hidden;
@@ -75,42 +75,18 @@
   height: var(--radio-size, 20px);
   width: var(--radio-size, 20px);
 }
-
-:host .quark-radio-container input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-}
-
-:host .quark-radio-container span {
+:host .quark-radio-container .quark-radio-show {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;;
   box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
-}
-
-:host .quark-radio-container .quark-radio-show {
   background: #ffffff;
   border-radius: 50%;
   position: relative;
-}
-
-:host .quark-radio-container .quark-radio-show::after {
-  position: absolute;
-  box-sizing: border-box;
-  content: " ";
-  pointer-events: none;
-  top: -50%;
-  right: -50%;
-  bottom: -50%;
-  left: -50%;
-  border-radius: 50%;
   border: 1px solid quark-formPlaceholderColor;
-  transform: scale(0.5);
 }
 
 :host([disabled]) * {
@@ -142,7 +118,7 @@
   border-radius: 4px;
 }
 
-:host([shape="square"]) .quark-radio-show::after {
+:host([shape="square"]) .quark-radio-show {
   border-radius: 4px;
 }
 
@@ -154,7 +130,7 @@
   background: var(--radio-background, quark-primaryColor);
 }
 
-:host([checked]) .quark-radio-container .quark-radio-show::after {
+:host([checked]) .quark-radio-container .quark-radio-show {
   border: none;
 }