vxe-pc-ui 4.9.39 → 4.9.41

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 (47) hide show
  1. package/es/icon/style.css +1 -1
  2. package/es/style.css +1 -1
  3. package/es/style.min.css +1 -1
  4. package/es/tag/src/tag.js +81 -13
  5. package/es/tag/style.css +123 -1
  6. package/es/tag/style.min.css +1 -1
  7. package/es/ui/index.js +4 -1
  8. package/es/ui/src/log.js +1 -1
  9. package/es/vxe-tag/style.css +123 -1
  10. package/es/vxe-tag/style.min.css +1 -1
  11. package/lib/icon/style/style.css +1 -1
  12. package/lib/icon/style/style.min.css +1 -1
  13. package/lib/index.umd.js +90 -13
  14. package/lib/index.umd.min.js +1 -1
  15. package/lib/style.css +1 -1
  16. package/lib/style.min.css +1 -1
  17. package/lib/tag/src/tag.js +85 -11
  18. package/lib/tag/src/tag.min.js +1 -1
  19. package/lib/tag/style/style.css +123 -1
  20. package/lib/tag/style/style.min.css +1 -1
  21. package/lib/ui/index.js +4 -1
  22. package/lib/ui/index.min.js +1 -1
  23. package/lib/ui/src/log.js +1 -1
  24. package/lib/ui/src/log.min.js +1 -1
  25. package/lib/vxe-tag/style/style.css +123 -1
  26. package/lib/vxe-tag/style/style.min.css +1 -1
  27. package/package.json +1 -1
  28. package/packages/tag/src/tag.ts +84 -12
  29. package/packages/ui/index.ts +4 -0
  30. package/styles/components/tag.scss +114 -10
  31. package/types/components/column.d.ts +1 -1
  32. package/types/components/grid.d.ts +1 -1
  33. package/types/components/table.d.ts +2 -2
  34. package/types/components/tag.d.ts +24 -4
  35. package/types/ui/global-icon.d.ts +4 -0
  36. /package/es/icon/{iconfont.1759043297531.ttf → iconfont.1759106680746.ttf} +0 -0
  37. /package/es/icon/{iconfont.1759043297531.woff → iconfont.1759106680746.woff} +0 -0
  38. /package/es/icon/{iconfont.1759043297531.woff2 → iconfont.1759106680746.woff2} +0 -0
  39. /package/es/{iconfont.1759043297531.ttf → iconfont.1759106680746.ttf} +0 -0
  40. /package/es/{iconfont.1759043297531.woff → iconfont.1759106680746.woff} +0 -0
  41. /package/es/{iconfont.1759043297531.woff2 → iconfont.1759106680746.woff2} +0 -0
  42. /package/lib/icon/style/{iconfont.1759043297531.ttf → iconfont.1759106680746.ttf} +0 -0
  43. /package/lib/icon/style/{iconfont.1759043297531.woff → iconfont.1759106680746.woff} +0 -0
  44. /package/lib/icon/style/{iconfont.1759043297531.woff2 → iconfont.1759106680746.woff2} +0 -0
  45. /package/lib/{iconfont.1759043297531.ttf → iconfont.1759106680746.ttf} +0 -0
  46. /package/lib/{iconfont.1759043297531.woff → iconfont.1759106680746.woff} +0 -0
  47. /package/lib/{iconfont.1759043297531.woff2 → iconfont.1759106680746.woff2} +0 -0
package/es/tag/src/tag.js CHANGED
@@ -1,30 +1,52 @@
1
- import { ref, h, reactive } from 'vue';
1
+ import { ref, h, reactive, watch } from 'vue';
2
2
  import { defineVxeComponent } from '../../ui/src/comp';
3
3
  import XEUtils from 'xe-utils';
4
- import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui';
5
- import { getSlotVNs } from '../../ui/src/vn';
4
+ import { getConfig, getIcon, createEvent, useSize, renderEmptyElement } from '../../ui';
6
5
  export default defineVxeComponent({
7
6
  name: 'VxeTag',
8
7
  props: {
8
+ border: {
9
+ type: Boolean,
10
+ default: () => getConfig().tag.border
11
+ },
12
+ visible: {
13
+ type: Boolean,
14
+ default: null
15
+ },
9
16
  status: String,
10
17
  title: [String, Number],
11
18
  icon: String,
19
+ closeIcon: {
20
+ type: String,
21
+ default: () => getConfig().tag.closeIcon
22
+ },
12
23
  content: [String, Number],
13
24
  round: Boolean,
25
+ closable: {
26
+ type: Boolean,
27
+ default: () => getConfig().tag.closable
28
+ },
29
+ color: String,
30
+ loading: Boolean,
14
31
  size: {
15
32
  type: String,
16
33
  default: () => getConfig().tag.size || getConfig().size
17
34
  }
18
35
  },
19
36
  emits: [
20
- 'click'
37
+ 'click',
38
+ 'dblclick',
39
+ 'close',
40
+ 'update:visible'
21
41
  ],
22
42
  setup(props, context) {
23
43
  const { slots, emit } = context;
24
44
  const xID = XEUtils.uniqueId();
25
45
  const { computeSize } = useSize(props);
26
46
  const refElem = ref();
27
- const reactData = reactive({});
47
+ const reactData = reactive({
48
+ showTag: props.visible !== false
49
+ });
28
50
  const refMaps = {
29
51
  refElem
30
52
  };
@@ -44,20 +66,42 @@ export default defineVxeComponent({
44
66
  dispatchEvent
45
67
  };
46
68
  const tagPrivateMethods = {};
69
+ const updateVisible = () => {
70
+ reactData.showTag = props.visible !== false;
71
+ };
47
72
  const clickEvent = (evnt) => {
48
- dispatchEvent('click', {}, evnt);
73
+ const { loading } = props;
74
+ if (!loading) {
75
+ dispatchEvent('click', {}, evnt);
76
+ }
77
+ };
78
+ const dblclickEvent = (evnt) => {
79
+ const { loading } = props;
80
+ if (!loading) {
81
+ dispatchEvent('dblclick', {}, evnt);
82
+ }
83
+ };
84
+ const closeEvent = (evnt) => {
85
+ const { loading } = props;
86
+ if (!loading) {
87
+ const visible = !reactData.showTag;
88
+ reactData.showTag = visible;
89
+ emit('update:visible', visible);
90
+ dispatchEvent('close', { visible }, evnt);
91
+ }
49
92
  };
50
93
  Object.assign($xeTag, tagMethods, tagPrivateMethods);
51
94
  const renderContent = () => {
52
- const { icon, content } = props;
95
+ const { icon, content, closable, closeIcon, loading } = props;
53
96
  const defaultSlot = slots.default;
54
97
  const iconSlot = slots.icon;
98
+ const closeIconSlot = slots.closeIcon || slots['close-icon'];
55
99
  return [
56
100
  iconSlot || icon
57
101
  ? h('span', {
58
102
  class: 'vxe-tag--icon'
59
103
  }, iconSlot
60
- ? getSlotVNs(iconSlot({}))
104
+ ? iconSlot({})
61
105
  : [
62
106
  h('i', {
63
107
  class: icon
@@ -66,23 +110,47 @@ export default defineVxeComponent({
66
110
  : renderEmptyElement($xeTag),
67
111
  h('span', {
68
112
  class: 'vxe-tag--content'
69
- }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content))
113
+ }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content)),
114
+ loading || closable
115
+ ? h('span', {
116
+ class: loading ? 'vxe-tag--loading' : 'vxe-tag--close',
117
+ onClick: closeEvent
118
+ }, !loading && closeIconSlot
119
+ ? closeIconSlot({})
120
+ : [
121
+ h('i', {
122
+ class: loading ? getIcon().TAG_LOADING : (closeIcon || getIcon().TAG_CLOSE)
123
+ })
124
+ ])
125
+ : renderEmptyElement($xeTag)
70
126
  ];
71
127
  };
72
128
  const renderVN = () => {
73
- const { status, title, round } = props;
129
+ const { status, color, title, round, border, loading } = props;
130
+ const { showTag } = reactData;
74
131
  const vSize = computeSize.value;
132
+ if (!showTag) {
133
+ return renderEmptyElement($xeTag);
134
+ }
75
135
  return h('span', {
76
136
  ref: refElem,
77
137
  class: ['vxe-tag', {
78
138
  [`size--${vSize}`]: vSize,
79
- [`theme--${status}`]: status,
80
- 'is--round': round
139
+ [`theme--${status}`]: status && !color,
140
+ [`color--${color}`]: color && !status,
141
+ 'is--round': round,
142
+ 'is--border': border,
143
+ 'is--loading': loading
81
144
  }],
82
145
  title,
83
- onClick: clickEvent
146
+ onClick: clickEvent,
147
+ onDblclick: dblclickEvent
84
148
  }, renderContent());
85
149
  };
150
+ watch(() => props.visible, () => {
151
+ updateVisible();
152
+ });
153
+ updateVisible();
86
154
  $xeTag.renderVN = renderVN;
87
155
  return $xeTag;
88
156
  },
package/es/tag/style.css CHANGED
@@ -1,5 +1,49 @@
1
+ .vxe-tag.color--gray {
2
+ color: #827d7d;
3
+ background-color: #f3f3f3;
4
+ }
5
+ .vxe-tag.color--orangered {
6
+ color: #877568;
7
+ background-color: #f4e9e1;
8
+ }
9
+ .vxe-tag.color--orange {
10
+ color: #9a9079;
11
+ background-color: #fff8e8;
12
+ }
13
+ .vxe-tag.color--green {
14
+ color: #627865;
15
+ background-color: #e7ffea;
16
+ }
17
+ .vxe-tag.color--blue {
18
+ color: #6b7b82;
19
+ background-color: #e8f8ff;
20
+ }
21
+ .vxe-tag.color--purple {
22
+ color: #8f7e97;
23
+ background-color: #f8e8ff;
24
+ }
25
+ .vxe-tag.color--pinkpurple {
26
+ color: #82687a;
27
+ background-color: #ffe8f8;
28
+ }
29
+ .vxe-tag.color--magenta {
30
+ color: #846084;
31
+ background-color: #f4c9f4;
32
+ }
33
+ .vxe-tag.color--chocolate {
34
+ color: #7f6e61;
35
+ background-color: #f7e2d2;
36
+ }
37
+ .vxe-tag.color--cyan {
38
+ color: #577474;
39
+ background-color: #d7f7f7;
40
+ }
41
+
1
42
  .vxe-tag {
2
- padding: var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);
43
+ display: inline-flex;
44
+ flex-direction: row;
45
+ align-items: center;
46
+ padding: 0.25em 0.5em;
3
47
  color: var(--vxe-ui-font-color);
4
48
  border-radius: var(--vxe-ui-base-border-radius);
5
49
  }
@@ -7,26 +51,65 @@
7
51
  color: var(--vxe-ui-font-primary-color);
8
52
  background-color: var(--vxe-ui-font-primary-tinge-color);
9
53
  }
54
+ .vxe-tag.theme--primary.is--border {
55
+ border-color: var(--vxe-ui-font-primary-lighten-color);
56
+ }
57
+ .vxe-tag.theme--primary > .vxe-tag--close:hover {
58
+ background-color: var(--vxe-ui-font-primary-darken-color);
59
+ }
10
60
  .vxe-tag.theme--success {
11
61
  color: var(--vxe-ui-status-success-color);
12
62
  background-color: var(--vxe-ui-status-success-tinge-color);
13
63
  }
64
+ .vxe-tag.theme--success.is--border {
65
+ border-color: var(--vxe-ui-status-success-lighten-color);
66
+ }
67
+ .vxe-tag.theme--success > .vxe-tag--close:hover {
68
+ background-color: var(--vxe-ui-status-success-darken-color);
69
+ }
14
70
  .vxe-tag.theme--info {
15
71
  color: var(--vxe-ui-status-info-color);
16
72
  background-color: var(--vxe-ui-status-info-tinge-color);
17
73
  }
74
+ .vxe-tag.theme--info.is--border {
75
+ border-color: var(--vxe-ui-status-info-lighten-color);
76
+ }
77
+ .vxe-tag.theme--info > .vxe-tag--close:hover {
78
+ background-color: var(--vxe-ui-status-info-darken-color);
79
+ }
18
80
  .vxe-tag.theme--warning {
19
81
  color: var(--vxe-ui-status-warning-color);
20
82
  background-color: var(--vxe-ui-status-warning-tinge-color);
21
83
  }
84
+ .vxe-tag.theme--warning.is--border {
85
+ border-color: var(--vxe-ui-status-warning-lighten-color);
86
+ }
87
+ .vxe-tag.theme--warning > .vxe-tag--close:hover {
88
+ background-color: var(--vxe-ui-status-warning-darken-color);
89
+ }
22
90
  .vxe-tag.theme--danger {
23
91
  color: var(--vxe-ui-status-danger-color);
24
92
  background-color: var(--vxe-ui-status-danger-tinge-color);
25
93
  }
94
+ .vxe-tag.theme--danger.is--border {
95
+ border-color: var(--vxe-ui-status-danger-lighten-color);
96
+ }
97
+ .vxe-tag.theme--danger > .vxe-tag--close:hover {
98
+ background-color: var(--vxe-ui-status-danger-darken-color);
99
+ }
26
100
  .vxe-tag.theme--error {
27
101
  color: var(--vxe-ui-status-error-color);
28
102
  background-color: var(--vxe-ui-status-error-tinge-color);
29
103
  }
104
+ .vxe-tag.theme--error.is--border {
105
+ border-color: var(--vxe-ui-status-error-lighten-color);
106
+ }
107
+ .vxe-tag.theme--error > .vxe-tag--close:hover {
108
+ background-color: var(--vxe-ui-status-error-darken-color);
109
+ }
110
+ .vxe-tag.is--border {
111
+ border: 1px solid var(--vxe-ui-font-lighten-color);
112
+ }
30
113
  .vxe-tag.is--round {
31
114
  border-radius: 1em;
32
115
  }
@@ -51,6 +134,45 @@
51
134
  padding: 0 0.1em;
52
135
  }
53
136
 
137
+ .vxe-tag--icon > i,
138
+ .vxe-tag--loading > i {
139
+ font-size: 1em;
140
+ line-height: 1em;
141
+ }
142
+
143
+ .vxe-tag--close,
144
+ .vxe-tag--loading {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ padding: 0.1em 0;
149
+ border-radius: 50%;
150
+ width: 1.2em;
151
+ height: 1.2em;
152
+ line-height: 1em;
153
+ }
154
+
155
+ .vxe-tag--close {
156
+ transition: all 0.3s;
157
+ cursor: pointer;
158
+ }
159
+ .vxe-tag--close:hover {
160
+ color: #fff;
161
+ background-color: var(--vxe-ui-font-darken-color);
162
+ }
163
+ .vxe-tag--close > i {
164
+ font-size: 0.7em;
165
+ line-height: 0.7em;
166
+ }
167
+
168
+ .vxe-tag--icon,
169
+ .vxe-tag--close,
170
+ .vxe-tag--loading {
171
+ -webkit-user-select: none;
172
+ -moz-user-select: none;
173
+ user-select: none;
174
+ }
175
+
54
176
  .vxe-tag.size--medium {
55
177
  font-size: var(--vxe-ui-font-size-medium);
56
178
  }
package/es/tag/style.min.css CHANGED
@@ -1 +1 @@
1
- .vxe-tag{padding:var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-tag.theme--primary{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-tag.theme--success{color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-tag.theme--info{color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-tag.theme--warning{color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-tag.theme--danger{color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-tag.theme--error{color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-tag.is--round{border-radius:1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tag+.vxe-tag{margin-left:8px}.vxe-tag--icon{padding:0 .1em}.vxe-tag--content{padding:0 .1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}
1
+ .vxe-tag.color--gray{color:#827d7d;background-color:#f3f3f3}.vxe-tag.color--orangered{color:#877568;background-color:#f4e9e1}.vxe-tag.color--orange{color:#9a9079;background-color:#fff8e8}.vxe-tag.color--green{color:#627865;background-color:#e7ffea}.vxe-tag.color--blue{color:#6b7b82;background-color:#e8f8ff}.vxe-tag.color--purple{color:#8f7e97;background-color:#f8e8ff}.vxe-tag.color--pinkpurple{color:#82687a;background-color:#ffe8f8}.vxe-tag.color--magenta{color:#846084;background-color:#f4c9f4}.vxe-tag.color--chocolate{color:#7f6e61;background-color:#f7e2d2}.vxe-tag.color--cyan{color:#577474;background-color:#d7f7f7}.vxe-tag{display:inline-flex;flex-direction:row;align-items:center;padding:.25em .5em;color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-tag.theme--primary{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-tag.theme--primary.is--border{border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tag.theme--primary>.vxe-tag--close:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-tag.theme--success{color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-tag.theme--success.is--border{border-color:var(--vxe-ui-status-success-lighten-color)}.vxe-tag.theme--success>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-tag.theme--info{color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-tag.theme--info.is--border{border-color:var(--vxe-ui-status-info-lighten-color)}.vxe-tag.theme--info>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-tag.theme--warning{color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-tag.theme--warning.is--border{border-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-tag.theme--warning>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-tag.theme--danger{color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-tag.theme--danger.is--border{border-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-tag.theme--danger>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-tag.theme--error{color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-tag.theme--error.is--border{border-color:var(--vxe-ui-status-error-lighten-color)}.vxe-tag.theme--error>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-tag.is--border{border:1px solid var(--vxe-ui-font-lighten-color)}.vxe-tag.is--round{border-radius:1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tag+.vxe-tag{margin-left:8px}.vxe-tag--icon{padding:0 .1em}.vxe-tag--content{padding:0 .1em}.vxe-tag--icon>i,.vxe-tag--loading>i{font-size:1em;line-height:1em}.vxe-tag--close,.vxe-tag--loading{display:inline-flex;align-items:center;justify-content:center;padding:.1em 0;border-radius:50%;width:1.2em;height:1.2em;line-height:1em}.vxe-tag--close{transition:all .3s;cursor:pointer}.vxe-tag--close:hover{color:#fff;background-color:var(--vxe-ui-font-darken-color)}.vxe-tag--close>i{font-size:.7em;line-height:.7em}.vxe-tag--close,.vxe-tag--icon,.vxe-tag--loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}
package/es/ui/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
2
2
  import { dynamicApp } from '../dynamics';
3
3
  import { warnLog } from './src/log';
4
- export const version = "4.9.39";
4
+ export const version = "4.9.41";
5
5
  VxeUI.uiVersion = version;
6
6
  VxeUI.dynamicApp = dynamicApp;
7
7
  export function config(options) {
@@ -570,6 +570,9 @@ setIcon({
570
570
  // text
571
571
  TEXT_COPY: iconPrefix + 'copy',
572
572
  TEXT_LOADING: iconPrefix + 'spinner roll',
573
+ // tag
574
+ TAG_CLOSE: iconPrefix + 'close',
575
+ TAG_LOADING: iconPrefix + 'spinner roll',
573
576
  // carousel
574
577
  CAROUSEL_HORIZONTAL_PREVIOUS: iconPrefix + 'arrow-left',
575
578
  CAROUSEL_HORIZONTAL_NEXT: iconPrefix + 'arrow-right',
package/es/ui/src/log.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { log } from '@vxe-ui/core';
2
- const version = `ui v${"4.9.39"}`;
2
+ const version = `ui v${"4.9.41"}`;
3
3
  export const warnLog = log.create('warn', version);
4
4
  export const errLog = log.create('error', version);
package/es/vxe-tag/style.css CHANGED
@@ -1,5 +1,49 @@
1
+ .vxe-tag.color--gray {
2
+ color: #827d7d;
3
+ background-color: #f3f3f3;
4
+ }
5
+ .vxe-tag.color--orangered {
6
+ color: #877568;
7
+ background-color: #f4e9e1;
8
+ }
9
+ .vxe-tag.color--orange {
10
+ color: #9a9079;
11
+ background-color: #fff8e8;
12
+ }
13
+ .vxe-tag.color--green {
14
+ color: #627865;
15
+ background-color: #e7ffea;
16
+ }
17
+ .vxe-tag.color--blue {
18
+ color: #6b7b82;
19
+ background-color: #e8f8ff;
20
+ }
21
+ .vxe-tag.color--purple {
22
+ color: #8f7e97;
23
+ background-color: #f8e8ff;
24
+ }
25
+ .vxe-tag.color--pinkpurple {
26
+ color: #82687a;
27
+ background-color: #ffe8f8;
28
+ }
29
+ .vxe-tag.color--magenta {
30
+ color: #846084;
31
+ background-color: #f4c9f4;
32
+ }
33
+ .vxe-tag.color--chocolate {
34
+ color: #7f6e61;
35
+ background-color: #f7e2d2;
36
+ }
37
+ .vxe-tag.color--cyan {
38
+ color: #577474;
39
+ background-color: #d7f7f7;
40
+ }
41
+
1
42
  .vxe-tag {
2
- padding: var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);
43
+ display: inline-flex;
44
+ flex-direction: row;
45
+ align-items: center;
46
+ padding: 0.25em 0.5em;
3
47
  color: var(--vxe-ui-font-color);
4
48
  border-radius: var(--vxe-ui-base-border-radius);
5
49
  }
@@ -7,26 +51,65 @@
7
51
  color: var(--vxe-ui-font-primary-color);
8
52
  background-color: var(--vxe-ui-font-primary-tinge-color);
9
53
  }
54
+ .vxe-tag.theme--primary.is--border {
55
+ border-color: var(--vxe-ui-font-primary-lighten-color);
56
+ }
57
+ .vxe-tag.theme--primary > .vxe-tag--close:hover {
58
+ background-color: var(--vxe-ui-font-primary-darken-color);
59
+ }
10
60
  .vxe-tag.theme--success {
11
61
  color: var(--vxe-ui-status-success-color);
12
62
  background-color: var(--vxe-ui-status-success-tinge-color);
13
63
  }
64
+ .vxe-tag.theme--success.is--border {
65
+ border-color: var(--vxe-ui-status-success-lighten-color);
66
+ }
67
+ .vxe-tag.theme--success > .vxe-tag--close:hover {
68
+ background-color: var(--vxe-ui-status-success-darken-color);
69
+ }
14
70
  .vxe-tag.theme--info {
15
71
  color: var(--vxe-ui-status-info-color);
16
72
  background-color: var(--vxe-ui-status-info-tinge-color);
17
73
  }
74
+ .vxe-tag.theme--info.is--border {
75
+ border-color: var(--vxe-ui-status-info-lighten-color);
76
+ }
77
+ .vxe-tag.theme--info > .vxe-tag--close:hover {
78
+ background-color: var(--vxe-ui-status-info-darken-color);
79
+ }
18
80
  .vxe-tag.theme--warning {
19
81
  color: var(--vxe-ui-status-warning-color);
20
82
  background-color: var(--vxe-ui-status-warning-tinge-color);
21
83
  }
84
+ .vxe-tag.theme--warning.is--border {
85
+ border-color: var(--vxe-ui-status-warning-lighten-color);
86
+ }
87
+ .vxe-tag.theme--warning > .vxe-tag--close:hover {
88
+ background-color: var(--vxe-ui-status-warning-darken-color);
89
+ }
22
90
  .vxe-tag.theme--danger {
23
91
  color: var(--vxe-ui-status-danger-color);
24
92
  background-color: var(--vxe-ui-status-danger-tinge-color);
25
93
  }
94
+ .vxe-tag.theme--danger.is--border {
95
+ border-color: var(--vxe-ui-status-danger-lighten-color);
96
+ }
97
+ .vxe-tag.theme--danger > .vxe-tag--close:hover {
98
+ background-color: var(--vxe-ui-status-danger-darken-color);
99
+ }
26
100
  .vxe-tag.theme--error {
27
101
  color: var(--vxe-ui-status-error-color);
28
102
  background-color: var(--vxe-ui-status-error-tinge-color);
29
103
  }
104
+ .vxe-tag.theme--error.is--border {
105
+ border-color: var(--vxe-ui-status-error-lighten-color);
106
+ }
107
+ .vxe-tag.theme--error > .vxe-tag--close:hover {
108
+ background-color: var(--vxe-ui-status-error-darken-color);
109
+ }
110
+ .vxe-tag.is--border {
111
+ border: 1px solid var(--vxe-ui-font-lighten-color);
112
+ }
30
113
  .vxe-tag.is--round {
31
114
  border-radius: 1em;
32
115
  }
@@ -51,6 +134,45 @@
51
134
  padding: 0 0.1em;
52
135
  }
53
136
 
137
+ .vxe-tag--icon > i,
138
+ .vxe-tag--loading > i {
139
+ font-size: 1em;
140
+ line-height: 1em;
141
+ }
142
+
143
+ .vxe-tag--close,
144
+ .vxe-tag--loading {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ padding: 0.1em 0;
149
+ border-radius: 50%;
150
+ width: 1.2em;
151
+ height: 1.2em;
152
+ line-height: 1em;
153
+ }
154
+
155
+ .vxe-tag--close {
156
+ transition: all 0.3s;
157
+ cursor: pointer;
158
+ }
159
+ .vxe-tag--close:hover {
160
+ color: #fff;
161
+ background-color: var(--vxe-ui-font-darken-color);
162
+ }
163
+ .vxe-tag--close > i {
164
+ font-size: 0.7em;
165
+ line-height: 0.7em;
166
+ }
167
+
168
+ .vxe-tag--icon,
169
+ .vxe-tag--close,
170
+ .vxe-tag--loading {
171
+ -webkit-user-select: none;
172
+ -moz-user-select: none;
173
+ user-select: none;
174
+ }
175
+
54
176
  .vxe-tag.size--medium {
55
177
  font-size: var(--vxe-ui-font-size-medium);
56
178
  }
package/es/vxe-tag/style.min.css CHANGED
@@ -1 +1 @@
1
- .vxe-tag{padding:var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-tag.theme--primary{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-tag.theme--success{color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-tag.theme--info{color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-tag.theme--warning{color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-tag.theme--danger{color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-tag.theme--error{color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-tag.is--round{border-radius:1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tag+.vxe-tag{margin-left:8px}.vxe-tag--icon{padding:0 .1em}.vxe-tag--content{padding:0 .1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}
1
+ .vxe-tag.color--gray{color:#827d7d;background-color:#f3f3f3}.vxe-tag.color--orangered{color:#877568;background-color:#f4e9e1}.vxe-tag.color--orange{color:#9a9079;background-color:#fff8e8}.vxe-tag.color--green{color:#627865;background-color:#e7ffea}.vxe-tag.color--blue{color:#6b7b82;background-color:#e8f8ff}.vxe-tag.color--purple{color:#8f7e97;background-color:#f8e8ff}.vxe-tag.color--pinkpurple{color:#82687a;background-color:#ffe8f8}.vxe-tag.color--magenta{color:#846084;background-color:#f4c9f4}.vxe-tag.color--chocolate{color:#7f6e61;background-color:#f7e2d2}.vxe-tag.color--cyan{color:#577474;background-color:#d7f7f7}.vxe-tag{display:inline-flex;flex-direction:row;align-items:center;padding:.25em .5em;color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-tag.theme--primary{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-tag.theme--primary.is--border{border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tag.theme--primary>.vxe-tag--close:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-tag.theme--success{color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-tag.theme--success.is--border{border-color:var(--vxe-ui-status-success-lighten-color)}.vxe-tag.theme--success>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-tag.theme--info{color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-tag.theme--info.is--border{border-color:var(--vxe-ui-status-info-lighten-color)}.vxe-tag.theme--info>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-tag.theme--warning{color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-tag.theme--warning.is--border{border-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-tag.theme--warning>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-tag.theme--danger{color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-tag.theme--danger.is--border{border-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-tag.theme--danger>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-tag.theme--error{color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-tag.theme--error.is--border{border-color:var(--vxe-ui-status-error-lighten-color)}.vxe-tag.theme--error>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-tag.is--border{border:1px solid var(--vxe-ui-font-lighten-color)}.vxe-tag.is--round{border-radius:1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tag+.vxe-tag{margin-left:8px}.vxe-tag--icon{padding:0 .1em}.vxe-tag--content{padding:0 .1em}.vxe-tag--icon>i,.vxe-tag--loading>i{font-size:1em;line-height:1em}.vxe-tag--close,.vxe-tag--loading{display:inline-flex;align-items:center;justify-content:center;padding:.1em 0;border-radius:50%;width:1.2em;height:1.2em;line-height:1em}.vxe-tag--close{transition:all .3s;cursor:pointer}.vxe-tag--close:hover{color:#fff;background-color:var(--vxe-ui-font-darken-color)}.vxe-tag--close>i{font-size:.7em;line-height:.7em}.vxe-tag--close,.vxe-tag--icon,.vxe-tag--loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}