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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/plain-design.commonjs.min.js +1 -1
  2. package/dist/plain-design.min.css +1 -1
  3. package/dist/plain-design.min.js +1 -1
  4. package/dist/report.html +2 -2
  5. package/package.json +2 -2
  6. package/src/packages/components/Icon/icon.external.tsx +4 -4
  7. package/src/packages/components/Tag/index.tsx +8 -3
  8. package/src/packages/components/Tag/tag.scss +10 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "1.0.0-beta.144",
3
+ "version": "1.0.0-beta.146",
4
4
  "description": "",
5
5
  "main": "dist/plain-design.min.js",
6
6
  "module": "dist/plain-design.commonjs.min.js",
@@ -15,7 +15,7 @@
15
15
  "dev": "cross-env APP_ENV=prod vue-cli-service serve",
16
16
  "build": "cross-env APP_ENV=prod vue-cli-service build",
17
17
  "release": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress",
18
- "ferv": "ferv ./docs -b plain-design/ -c -s -p 3379"
18
+ "ferv": "ferv ./plain-design -b plain-design/ -c -s -p 3379"
19
19
  },
20
20
  "author": "",
21
21
  "license": "ISC",
package/src/packages/components/Icon/icon.external.tsx CHANGED
@@ -40,22 +40,22 @@ export const IconExternal: Record<string, () => RenderNode> = {
40
40
  ),
41
41
  'ie-undo': () => (
42
42
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
43
- <path d="M11 20L1 12L11 4V9C16.5228 9 21 13.4772 21 19C21 19.2729 20.9891 19.5433 20.9676 19.8107C19.4605 16.9502 16.458 15 13 15H11V20Z"></path>
43
+ <path d="M11 20L1 12L11 4V9C16.5228 9 21 13.4772 21 19C21 19.2727 20.9891 19.5428 20.9677 19.81C19.5055 17.0364 16.6381 15.119 13.313 15.0053L13 15H10.9999L11 20ZM8.99986 13H10.9999L13.0341 13.0003L13.3814 13.0065C14.6657 13.0504 15.9053 13.3165 17.0568 13.7734C15.5898 12.0749 13.4204 11 11 11H9V8.16125L4.20156 12L8.99992 15.8387L8.99986 13Z"></path>
44
44
  </svg>
45
45
  ),
46
46
  'ie-redo': () => (
47
47
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
48
- <path d="M13 14H11C7.54202 14 4.53953 15.9502 3.03239 18.8107C3.01093 18.5433 3 18.2729 3 18C3 12.4772 7.47715 8 13 8V3L23 11L13 19V14Z"></path>
48
+ <path d="M13 14H11C7.54202 14 4.53953 15.9502 3.03239 18.8107C3.01093 18.5433 3 18.2729 3 18C3 12.4772 7.47715 8 13 8V2.5L23.5 11L13 19.5V14ZM11 12H15V15.3078L20.3214 11L15 6.69224V10H13C10.5795 10 8.41011 11.0749 6.94312 12.7735C8.20873 12.2714 9.58041 12 11 12Z"></path>
49
49
  </svg>
50
50
  ),
51
51
  'ie-import': () => (
52
52
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
53
- <path d="M13 10H18L12 16L6 10H11V3H13V10ZM4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19Z"></path>
53
+ <path d="M3 19H21V21H3V19ZM13 5.82843V17H11V5.82843L4.92893 11.8995L3.51472 10.4853L12 2L20.4853 10.4853L19.0711 11.8995L13 5.82843Z"></path>
54
54
  </svg>
55
55
  ),
56
56
  'ie-export': () => (
57
57
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
58
- <path d="M4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19ZM13 9V16H11V9H6L12 3L18 9H13Z"></path>
58
+ <path d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"></path>
59
59
  </svg>
60
60
  ),
61
61
  'ie-clear': () => (
package/src/packages/components/Tag/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useStyles} from "@peryl/react-compose";
1
+ import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useRefs, useStyles} from "@peryl/react-compose";
2
2
  import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
3
3
  import {iTagColor, TagColor} from "./tag.utils";
4
4
  import Icon from "../Icon";
@@ -24,6 +24,8 @@ export const Tag = designComponent({
24
24
  },
25
25
  setup({ props, event: { emit }, slots }) {
26
26
 
27
+ const { refs, onRef } = useRefs({ closeWrapper: {} as typeof HTMLSpanElement });
28
+
27
29
  const status = Object.keys(ThemeStatus);
28
30
 
29
31
  const colors = computed((): iTagColor => {
@@ -60,7 +62,10 @@ export const Tag = designComponent({
60
62
 
61
63
  const handler = {
62
64
  onClick: (e: iMouseEvent) => {
63
- if (e.currentTarget === e.target) {emit.onClick(e);}
65
+ if (refs.closeWrapper == e.target || (!!refs.closeWrapper && refs.closeWrapper.contains(e.target as HTMLElement))) {
66
+ return;
67
+ }
68
+ emit.onClick(e);
64
69
  },
65
70
  onClose: (e: iMouseEvent) => emit.onClose(e),
66
71
  };
@@ -70,7 +75,7 @@ export const Tag = designComponent({
70
75
  {!!props.icon && <Icon icon={props.icon}/>}
71
76
  {!!props.loading && <Loading type="beta"/>}
72
77
  <span>{slots.default(props.label as any)}</span>
73
- {!!props.closeable && <Icon icon="pi-close" onClick={handler.onClose}/>}
78
+ {!!props.closeable && <span ref={onRef.closeWrapper} className="tag-close-wrapper"><Icon icon="pi-close" onClick={handler.onClose}/></span>}
74
79
  </span>
75
80
  );
76
81
  },
package/src/packages/components/Tag/tag.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  padding: 0 4px;
15
15
  }
16
16
 
17
- .#{componentName(loading)}, .#{componentName(icon)} {
17
+ & > .#{componentName(loading)}, & > .#{componentName(icon)}, & > .tag-close-wrapper {
18
18
  &:last-child {
19
19
  cursor: pointer;
20
20
  margin-left: 4px;
@@ -24,4 +24,13 @@
24
24
  margin-right: 4px !important;
25
25
  }
26
26
  }
27
+
28
+ .tag-close-wrapper {
29
+ vertical-align: middle;
30
+ height: 1em;
31
+ width: 1em;
32
+ display: inline-flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+ }
27
36
  }