plain-design 1.0.0-beta.145 → 1.0.0-beta.146

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.145",
+  "version": "1.0.0-beta.146",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Tag/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useStyles} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {iTagColor, TagColor} from "./tag.utils";
 import Icon from "../Icon";
@@ -24,6 +24,8 @@ export const Tag = designComponent({
   },
   setup({ props, event: { emit }, slots }) {
 
+    const { refs, onRef } = useRefs({ closeWrapper: {} as typeof HTMLSpanElement });
+
     const status = Object.keys(ThemeStatus);
 
     const colors = computed((): iTagColor => {
@@ -60,7 +62,10 @@ export const Tag = designComponent({
 
     const handler = {
       onClick: (e: iMouseEvent) => {
-        if (e.currentTarget === e.target) {emit.onClick(e);}
+        if (refs.closeWrapper == e.target || (!!refs.closeWrapper && refs.closeWrapper.contains(e.target as HTMLElement))) {
+          return;
+        }
+        emit.onClick(e);
       },
       onClose: (e: iMouseEvent) => emit.onClose(e),
     };
@@ -70,7 +75,7 @@ export const Tag = designComponent({
         {!!props.icon && <Icon icon={props.icon}/>}
         {!!props.loading && <Loading type="beta"/>}
         <span>{slots.default(props.label as any)}</span>
-        {!!props.closeable && <Icon icon="pi-close" onClick={handler.onClose}/>}
+        {!!props.closeable && <span ref={onRef.closeWrapper} className="tag-close-wrapper"><Icon icon="pi-close" onClick={handler.onClose}/></span>}
       </span>
     );
   },

package/src/packages/components/Tag/tag.scss

@@ -14,7 +14,7 @@
     padding: 0 4px;
   }
 
-  .#{componentName(loading)}, .#{componentName(icon)} {
+  & > .#{componentName(loading)}, & > .#{componentName(icon)}, & > .tag-close-wrapper {
     &:last-child {
       cursor: pointer;
       margin-left: 4px;
@@ -24,4 +24,13 @@
       margin-right: 4px !important;
     }
   }
+
+  .tag-close-wrapper {
+    vertical-align: middle;
+    height: 1em;
+    width: 1em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 }