ele-admin-plus 1.1.7-beta.2 → 1.1.7-beta.4

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 (81) hide show
  1. package/es/ele-app/style/common/index.scss +3 -3
  2. package/es/ele-app/style/overwrite/cascader/index.scss +57 -7
  3. package/es/ele-app/style/overwrite/css-var.scss +2 -0
  4. package/es/ele-app/style/overwrite/index.js +1 -0
  5. package/es/ele-app/style/overwrite/index.scss +1 -0
  6. package/es/ele-app/style/overwrite/input/css-var.scss +31 -0
  7. package/es/ele-app/style/overwrite/input/index.js +1 -0
  8. package/es/ele-app/style/overwrite/input/index.scss +456 -0
  9. package/es/ele-app/style/overwrite/select/index.scss +53 -10
  10. package/es/ele-basic-select/index.d.ts +10 -4
  11. package/es/ele-basic-select/index.js +36 -35
  12. package/es/ele-basic-select/props.d.ts +6 -0
  13. package/es/ele-basic-select/props.js +7 -1
  14. package/es/ele-basic-select/style/css-var.scss +9 -0
  15. package/es/ele-basic-select/style/index.scss +137 -49
  16. package/es/ele-data-table/style/index.scss +10 -6
  17. package/es/ele-icon-select/index.d.ts +6 -2
  18. package/es/ele-icon-select/index.js +4 -1
  19. package/es/ele-icon-select/props.d.ts +4 -0
  20. package/es/ele-icon-select/props.js +4 -0
  21. package/es/ele-icon-select/style/index.scss +4 -0
  22. package/es/ele-menus/style/index.scss +1 -1
  23. package/es/ele-split-panel/style/index.scss +7 -6
  24. package/es/ele-table-select/index.d.ts +10 -6
  25. package/es/ele-table-select/index.js +3 -1
  26. package/es/ele-table-select/props.d.ts +4 -0
  27. package/es/ele-table-select/props.js +4 -0
  28. package/es/ele-tree-select/index.d.ts +11 -7
  29. package/es/ele-tree-select/index.js +3 -1
  30. package/es/ele-tree-select/props.d.ts +4 -0
  31. package/es/ele-tree-select/props.js +5 -1
  32. package/es/ele-virtual-table/style/index.scss +8 -4
  33. package/es/icons/ArrowDown.js +5 -3
  34. package/es/icons/ArrowRight.js +4 -2
  35. package/es/icons/CloseOutlined.d.ts +2 -0
  36. package/es/icons/CloseOutlined.js +40 -0
  37. package/es/icons/index.d.ts +1 -0
  38. package/es/icons/index.js +26 -24
  39. package/es/style/themes/default.scss +74 -1
  40. package/es/style/themes/theme-util.scss +2 -0
  41. package/lib/ele-app/style/common/index.scss +3 -3
  42. package/lib/ele-app/style/overwrite/cascader/index.scss +57 -7
  43. package/lib/ele-app/style/overwrite/css-var.scss +2 -0
  44. package/lib/ele-app/style/overwrite/index.cjs +1 -0
  45. package/lib/ele-app/style/overwrite/index.scss +1 -0
  46. package/lib/ele-app/style/overwrite/input/css-var.scss +31 -0
  47. package/lib/ele-app/style/overwrite/input/index.cjs +2 -0
  48. package/lib/ele-app/style/overwrite/input/index.scss +456 -0
  49. package/lib/ele-app/style/overwrite/select/index.scss +53 -10
  50. package/lib/ele-basic-select/index.cjs +35 -34
  51. package/lib/ele-basic-select/index.d.ts +10 -4
  52. package/lib/ele-basic-select/props.cjs +7 -1
  53. package/lib/ele-basic-select/props.d.ts +6 -0
  54. package/lib/ele-basic-select/style/css-var.scss +9 -0
  55. package/lib/ele-basic-select/style/index.scss +137 -49
  56. package/lib/ele-data-table/style/index.scss +10 -6
  57. package/lib/ele-icon-select/index.cjs +4 -1
  58. package/lib/ele-icon-select/index.d.ts +6 -2
  59. package/lib/ele-icon-select/props.cjs +4 -0
  60. package/lib/ele-icon-select/props.d.ts +4 -0
  61. package/lib/ele-icon-select/style/index.scss +4 -0
  62. package/lib/ele-menus/style/index.scss +1 -1
  63. package/lib/ele-split-panel/style/index.scss +7 -6
  64. package/lib/ele-table-select/index.cjs +3 -1
  65. package/lib/ele-table-select/index.d.ts +10 -6
  66. package/lib/ele-table-select/props.cjs +4 -0
  67. package/lib/ele-table-select/props.d.ts +4 -0
  68. package/lib/ele-tree-select/index.cjs +3 -1
  69. package/lib/ele-tree-select/index.d.ts +11 -7
  70. package/lib/ele-tree-select/props.cjs +5 -1
  71. package/lib/ele-tree-select/props.d.ts +4 -0
  72. package/lib/ele-virtual-table/style/index.scss +8 -4
  73. package/lib/icons/ArrowDown.cjs +5 -3
  74. package/lib/icons/ArrowRight.cjs +4 -2
  75. package/lib/icons/CloseOutlined.cjs +39 -0
  76. package/lib/icons/CloseOutlined.d.ts +2 -0
  77. package/lib/icons/index.cjs +2 -0
  78. package/lib/icons/index.d.ts +1 -0
  79. package/lib/style/themes/default.scss +74 -1
  80. package/lib/style/themes/theme-util.scss +2 -0
  81. package/package.json +1 -4
@@ -1,19 +1,19 @@
1
1
  "use strict";
2
2
  const vue = require("vue");
3
- const iconsVue = require("@element-plus/icons-vue");
4
3
  const elementPlus = require("element-plus");
5
4
  const receiver = require("../ele-config-provider/receiver");
6
5
  const EleTooltip = require("../ele-tooltip/index");
6
+ const icons = require("../icons");
7
7
  const props = require("./props");
8
8
  const _sfc_main = vue.defineComponent({
9
9
  name: "EleBasicSelect",
10
10
  components: {
11
- CircleClose: iconsVue.CircleClose,
12
- ArrowDown: iconsVue.ArrowDown,
13
11
  ElInput: elementPlus.ElInput,
14
12
  ElIcon: elementPlus.ElIcon,
15
13
  ElTag: elementPlus.ElTag,
16
- EleTooltip
14
+ EleTooltip,
15
+ CloseOutlined: icons.CloseOutlined,
16
+ ArrowDown: icons.ArrowDown
17
17
  },
18
18
  props: props.basicSelectProps,
19
19
  emits: props.basicSelectEmits,
@@ -158,13 +158,12 @@ const _export_sfc = (sfc, props2) => {
158
158
  }
159
159
  return target;
160
160
  };
161
- const _hoisted_1 = { class: "ele-select-suffix" };
162
- const _hoisted_2 = {
161
+ const _hoisted_1 = {
163
162
  key: 0,
164
163
  class: "ele-select-tags"
165
164
  };
166
165
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
167
- const _component_CircleClose = vue.resolveComponent("CircleClose");
166
+ const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
168
167
  const _component_ElIcon = vue.resolveComponent("ElIcon");
169
168
  const _component_ArrowDown = vue.resolveComponent("ArrowDown");
170
169
  const _component_ElInput = vue.resolveComponent("ElInput");
@@ -200,6 +199,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
200
199
  vue.createElementVNode("div", {
201
200
  class: vue.normalizeClass([
202
201
  "ele-select",
202
+ _ctx.selectClass,
203
203
  { "is-empty": _ctx.isEmpty },
204
204
  { "is-multiple": _ctx.multiple },
205
205
  { "is-disabled": _ctx.disabled },
@@ -207,7 +207,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
207
207
  { "is-small": _ctx.size === "small" },
208
208
  { "is-large": _ctx.size === "large" },
209
209
  { "is-opened": _ctx.visible }
210
- ])
210
+ ]),
211
+ style: vue.normalizeStyle(_ctx.selectStyle)
211
212
  }, [
212
213
  vue.createVNode(_component_ElInput, {
213
214
  ref: "inputRef",
@@ -217,33 +218,32 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
217
218
  modelValue: _ctx.inputValue,
218
219
  placeholder: _ctx.filterable && _ctx.multiple && _ctx.visible ? "" : _ctx.inputPlaceholder,
219
220
  readonly: !_ctx.filterable || !_ctx.visible || _ctx.multiple,
221
+ style: vue.normalizeStyle(_ctx.inputStyle),
220
222
  "onUpdate:modelValue": _ctx.updateInputValue,
221
223
  onFocus: _ctx.onInputFocus,
222
224
  onBlur: _ctx.onInputBlur
223
225
  }, vue.createSlots({
224
226
  suffix: vue.withCtx(() => [
225
- vue.createElementVNode("div", _hoisted_1, [
226
- _ctx.clearable && !_ctx.disabled && !_ctx.isEmpty ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
227
- key: 0,
228
- class: "ele-select-clear",
229
- onClick: vue.withModifiers(_ctx.onClear, ["stop"])
230
- }, {
231
- default: vue.withCtx(() => [
232
- vue.renderSlot(_ctx.$slots, "clearIcon", {}, () => [
233
- vue.createVNode(_component_CircleClose)
234
- ])
235
- ]),
236
- _: 3
237
- }, 8, ["onClick"])) : vue.createCommentVNode("", true),
238
- vue.createVNode(_component_ElIcon, { class: "ele-select-arrow" }, {
239
- default: vue.withCtx(() => [
240
- vue.renderSlot(_ctx.$slots, "suffixIcon", { visible: _ctx.visible }, () => [
241
- vue.createVNode(_component_ArrowDown)
242
- ])
243
- ]),
244
- _: 3
245
- })
246
- ])
227
+ _ctx.clearable && !_ctx.disabled && !_ctx.isEmpty ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
228
+ key: 0,
229
+ class: "ele-select-clear el-input__icon",
230
+ onClick: vue.withModifiers(_ctx.onClear, ["stop"])
231
+ }, {
232
+ default: vue.withCtx(() => [
233
+ vue.renderSlot(_ctx.$slots, "clearIcon", {}, () => [
234
+ vue.createVNode(_component_CloseOutlined)
235
+ ])
236
+ ]),
237
+ _: 3
238
+ }, 8, ["onClick"])) : vue.createCommentVNode("", true),
239
+ vue.createVNode(_component_ElIcon, { class: "ele-select-arrow el-input__icon" }, {
240
+ default: vue.withCtx(() => [
241
+ vue.renderSlot(_ctx.$slots, "suffixIcon", { visible: _ctx.visible }, () => [
242
+ vue.createVNode(_component_ArrowDown)
243
+ ])
244
+ ]),
245
+ _: 3
246
+ })
247
247
  ]),
248
248
  _: 2
249
249
  }, [
@@ -254,8 +254,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
254
254
  ]),
255
255
  key: "0"
256
256
  } : void 0
257
- ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "onUpdate:modelValue", "onFocus", "onBlur"]),
258
- _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
257
+ ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "style", "onUpdate:modelValue", "onFocus", "onBlur"]),
258
+ _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
259
259
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.currentTags, (item, index2) => {
260
260
  return vue.openBlock(), vue.createBlock(_component_ElTag, {
261
261
  key: index2 + "-" + item.value,
@@ -301,16 +301,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
301
301
  default: vue.withCtx(() => [
302
302
  vue.createVNode(_component_ElInput, {
303
303
  ref: "searchRef",
304
+ size: _ctx.size,
304
305
  validateEvent: false,
305
306
  modelValue: _ctx.searchValue,
306
307
  placeholder: _ctx.inputPlaceholder,
307
308
  "onUpdate:modelValue": _ctx.updateSearchValue
308
- }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
309
+ }, null, 8, ["size", "modelValue", "placeholder", "onUpdate:modelValue"])
309
310
  ]),
310
311
  _: 1
311
312
  }, 8, ["size"])) : vue.createCommentVNode("", true)
312
313
  ])) : vue.createCommentVNode("", true)
313
- ], 2)
314
+ ], 6)
314
315
  ]),
315
316
  _: 3
316
317
  }, 8, ["visible", "disabled", "placement", "teleported", "width", "popperClass", "popperOptions", "transition", "gpuAcceleration", "onUpdate:visible"]);
@@ -18,17 +18,20 @@ declare const _default: import("vue").DefineComponent<{
18
18
  tagType: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
19
19
  automaticDropdown: BooleanConstructor;
20
20
  filterable: BooleanConstructor;
21
- visible: BooleanConstructor; /** 多选搜索框组件 */
21
+ visible: BooleanConstructor;
22
22
  teleported: BooleanConstructor;
23
23
  persistent: BooleanConstructor;
24
24
  placement: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
25
25
  transition: {
26
- type: StringConstructor; /** 多选时搜索框值 */
26
+ type: StringConstructor;
27
27
  default: string;
28
28
  };
29
29
  popperOptions: import("vue").PropType<Partial<import("element-plus").Options> | undefined>;
30
30
  popperClass: StringConstructor;
31
31
  popperWidth: (StringConstructor | NumberConstructor)[];
32
+ selectClass: StringConstructor;
33
+ selectStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
34
+ inputStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
32
35
  }, {
33
36
  tooltipRef: import("vue").Ref<EleTooltipInstance>;
34
37
  inputRef: import("vue").Ref<ElInputInstance>;
@@ -74,17 +77,20 @@ declare const _default: import("vue").DefineComponent<{
74
77
  tagType: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
75
78
  automaticDropdown: BooleanConstructor;
76
79
  filterable: BooleanConstructor;
77
- visible: BooleanConstructor; /** 多选搜索框组件 */
80
+ visible: BooleanConstructor;
78
81
  teleported: BooleanConstructor;
79
82
  persistent: BooleanConstructor;
80
83
  placement: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
81
84
  transition: {
82
- type: StringConstructor; /** 多选时搜索框值 */
85
+ type: StringConstructor;
83
86
  default: string;
84
87
  };
85
88
  popperOptions: import("vue").PropType<Partial<import("element-plus").Options> | undefined>;
86
89
  popperClass: StringConstructor;
87
90
  popperWidth: (StringConstructor | NumberConstructor)[];
91
+ selectClass: StringConstructor;
92
+ selectStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
93
+ inputStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
88
94
  }>> & {
89
95
  onFocus?: ((_e: FocusEvent) => any) | undefined;
90
96
  onBlur?: ((_e: FocusEvent) => any) | undefined;
@@ -50,7 +50,13 @@ const basicSelectProps = {
50
50
  /** 下拉框类名 */
51
51
  popperClass: String,
52
52
  /** 下拉框宽度 */
53
- popperWidth: [Number, String]
53
+ popperWidth: [Number, String],
54
+ /** 自定义类名 */
55
+ selectClass: String,
56
+ /** 自定义样式 */
57
+ selectStyle: Object,
58
+ /** 自定义输入框样式 */
59
+ inputStyle: Object
54
60
  };
55
61
  const basicSelectEmits = {
56
62
  /** 更新下拉框显示状态 */
@@ -52,6 +52,12 @@ export declare const basicSelectProps: {
52
52
  popperClass: StringConstructor;
53
53
  /** 下拉框宽度 */
54
54
  popperWidth: (StringConstructor | NumberConstructor)[];
55
+ /** 自定义类名 */
56
+ selectClass: StringConstructor;
57
+ /** 自定义样式 */
58
+ selectStyle: PropType<Partial<import("vue").CSSProperties>>;
59
+ /** 自定义输入框样式 */
60
+ inputStyle: PropType<Partial<import("vue").CSSProperties>>;
55
61
  };
56
62
  export type BasicSelectProps = ExtractPropTypes<typeof basicSelectProps>;
57
63
  /**
@@ -0,0 +1,9 @@
1
+ @use '../../style/util.scss' as *;
2
+
3
+ /* 通用下拉选择主题变量 */
4
+ @mixin set-basic-select-var($var) {
5
+ .ele-select {
6
+ @include set-ele-var('input', $var);
7
+ @include set-ele-var('input-error', $var);
8
+ }
9
+ }
@@ -1,5 +1,8 @@
1
1
  @use '../../style/themes/default.scss' as *;
2
2
  @use '../../style/util.scss' as *;
3
+ @use './css-var.scss' as *;
4
+
5
+ @include set-basic-select-var($ele);
3
6
 
4
7
  .ele-select {
5
8
  width: 100%;
@@ -7,57 +10,91 @@
7
10
  cursor: pointer;
8
11
 
9
12
  & > .el-input,
10
- & > .el-input .el-input__wrapper,
11
- & > .el-input .el-input__inner {
13
+ & > .el-input > .el-input__wrapper,
14
+ & > .el-input > .el-input__wrapper > .el-input__inner {
12
15
  cursor: inherit;
13
16
  }
14
17
 
15
- .el-input__prefix-inner {
16
- color: elVar('input', 'text-color');
17
- }
18
-
19
18
  &.is-filterable {
20
19
  cursor: text;
21
20
  }
22
21
 
23
- /* 箭头和清空图标 */
24
- .ele-select-suffix {
25
- display: flex;
26
- align-items: center;
22
+ /* 输入框 */
23
+ & > .el-input > .el-input__wrapper {
24
+ border: eleVar('input', 'border');
25
+ background: eleVar('input', 'bg');
26
+ transition: all $ele-transition;
27
+ box-sizing: border-box;
28
+ position: relative;
29
+ box-shadow: none;
27
30
  }
28
31
 
29
- .ele-select-clear,
30
- .ele-select-arrow {
31
- font-size: 14px;
32
- color: elVar('input', 'icon-color');
33
- transition: (transform $ele-transition, color $ele-transition);
32
+ &:hover > .el-input > .el-input__wrapper {
33
+ border: eleVar('input', 'hover-border');
34
+ background: eleVar('input', 'hover-bg');
35
+ box-shadow: eleVar('input', 'hover-shadow');
36
+ }
37
+
38
+ & > .el-input > .el-input__wrapper.is-focus,
39
+ &.is-opened > .el-input > .el-input__wrapper {
40
+ border: eleVar('input', 'focus-border');
41
+ background: eleVar('input', 'focus-bg');
42
+ box-shadow: eleVar('input', 'focus-shadow');
43
+ }
44
+
45
+ /* 图标 */
46
+ & > .el-input > .el-input__wrapper .el-input__icon {
47
+ color: eleVar('input', 'icon-color');
48
+ font-size: eleVar('input', 'icon-size');
49
+ transition: all $ele-transition;
50
+ }
51
+
52
+ & > .el-input .el-input__prefix-inner .el-input__icon {
53
+ margin-right: eleVar('input', 'icon-space');
34
54
  }
35
55
 
36
- .ele-select-clear:hover {
37
- color: elVar('input', 'clear-hover-color');
56
+ & > .el-input .el-input__suffix-inner .el-input__icon {
57
+ margin-left: eleVar('input', 'icon-space');
58
+ }
59
+
60
+ /* 箭头和清空图标 */
61
+ & > .el-input .el-input__icon.ele-select-clear,
62
+ & > .el-input .el-input__icon.ele-select-arrow {
63
+ margin: eleVar('input', 'clear-margin');
64
+ }
65
+
66
+ & > .el-input .el-input__icon.ele-select-clear {
67
+ color: elVar('bg-color', 'overlay');
68
+ font-size: eleVar('input', 'clear-size');
69
+ background: eleVar('input', 'clear-color');
70
+ border-radius: 50%;
38
71
  cursor: pointer;
72
+
73
+ &:hover {
74
+ background: eleVar('input', 'clear-hover-color');
75
+ }
39
76
  }
40
77
 
41
78
  .ele-select-clear,
42
- &:hover .ele-select-clear + .ele-select-arrow {
79
+ &:hover .ele-select-clear + .ele-select-arrow,
80
+ &:hover .ele-select-clear + .ele-select-arrow + .el-input__validateIcon {
43
81
  display: none;
44
82
  }
45
83
 
46
84
  &:hover .ele-select-clear {
47
- display: block;
85
+ display: flex;
48
86
  }
49
87
 
50
- &.is-opened .ele-select-arrow {
51
- transform: rotate(-180deg);
88
+ .ele-select-arrow > svg > path {
89
+ transition: d $ele-transition;
52
90
  }
53
91
 
54
- /* 输入框边框 */
55
- &:hover > .el-input:not(.is-disabled) .el-input__wrapper:not(.is-focus) {
56
- box-shadow: 0 0 0 1px elVar('input', 'hover-border-color') inset;
92
+ &.is-opened .ele-select-arrow > svg > path {
93
+ #{'d'}: path('M10 31 24 17 38 31');
57
94
  }
58
95
 
59
- &.is-opened > .el-input:not(.is-disabled) .el-input__wrapper:not(.is-focus) {
60
- box-shadow: 0 0 0 1px elVar('input', 'focus-border-color') inset;
96
+ .ele-select-arrow > svg > path {
97
+ stroke-width: 4;
61
98
  }
62
99
 
63
100
  /* 多选 */
@@ -73,20 +110,12 @@
73
110
  width: 100%;
74
111
  height: 100%;
75
112
 
76
- .el-input__wrapper,
77
- .el-input__inner {
113
+ & > .el-input__wrapper,
114
+ & > .el-input__wrapper > .el-input__inner {
78
115
  height: 100%;
79
116
  box-sizing: border-box;
80
117
  }
81
118
  }
82
-
83
- &.is-small {
84
- min-height: elVar('component-size', 'small');
85
- }
86
-
87
- &.large {
88
- min-height: elVar('component-size', 'large');
89
- }
90
119
  }
91
120
 
92
121
  /* 多选标签 */
@@ -96,9 +125,9 @@
96
125
  min-height: inherit;
97
126
  box-sizing: border-box;
98
127
  padding: 2px 0 2px 4px;
99
- width: calc(100% - 24px);
128
+ width: calc(100% - 22px);
100
129
  position: relative;
101
- z-index: 2;
130
+ z-index: 3;
102
131
 
103
132
  & > .el-tag {
104
133
  flex-shrink: 0;
@@ -109,7 +138,7 @@
109
138
  }
110
139
 
111
140
  &.is-empty .ele-select-tags {
112
- padding-left: 9px;
141
+ padding-left: 8.8px;
113
142
  }
114
143
 
115
144
  /* 多选搜索框 */
@@ -121,11 +150,13 @@
121
150
  overflow: hidden;
122
151
  background: none;
123
152
  display: none;
153
+ font-size: 0;
124
154
 
125
155
  & > .el-tag__content {
126
156
  width: 100%;
127
157
  height: 100%;
128
158
  display: block;
159
+ font-size: 0;
129
160
  }
130
161
 
131
162
  .el-input {
@@ -135,9 +166,9 @@
135
166
 
136
167
  .el-input__wrapper {
137
168
  height: 100%;
138
- padding-left: 2px;
139
- padding-right: 0;
169
+ padding: 0 0 0 2px;
140
170
  box-sizing: border-box;
171
+ border: none;
141
172
  box-shadow: none;
142
173
  background: none;
143
174
  cursor: inherit;
@@ -156,33 +187,90 @@
156
187
 
157
188
  /* 小尺寸 */
158
189
  &.is-small {
159
- & > .ele-select-tags {
160
- padding-left: 4px;
190
+ &.is-multiple {
191
+ min-height: elVar('component-size', 'small');
192
+ }
193
+
194
+ .ele-select-tags {
195
+ width: calc(100% - 20px);
161
196
 
162
197
  & > .el-tag {
163
- margin-top: 1px;
164
- margin-bottom: 1px;
165
- height: calc(elVar('component-size') - 4px - 2px);
198
+ margin: 1px 4px 1px 0;
199
+ height: calc(elVar('component-size', 'small') - 4px - 2px);
166
200
  }
167
201
  }
168
202
 
169
203
  &.is-empty .ele-select-tags {
170
- padding-left: 5px;
204
+ padding-left: 6.8px;
171
205
  }
172
206
  }
173
207
 
174
208
  /* 大尺寸 */
175
- &.is-large.is-empty .ele-select-tags {
176
- padding-left: 13px;
209
+ &.is-large {
210
+ &.is-multiple {
211
+ min-height: elVar('component-size', 'large');
212
+ }
213
+
214
+ .ele-select-tags {
215
+ padding: 4px 0 4px 6px;
216
+ width: calc(100% - 24px);
217
+
218
+ & > .el-tag {
219
+ height: calc(elVar('component-size', 'large') - 8px - 4px);
220
+ }
221
+ }
222
+
223
+ &.is-empty .ele-select-tags {
224
+ padding-left: 10.8px;
225
+ }
177
226
  }
178
227
 
179
228
  /* 禁用 */
180
229
  &.is-disabled {
181
230
  cursor: not-allowed;
182
231
 
232
+ & > .el-input.is-disabled > .el-input__wrapper {
233
+ border: eleVar('input', 'disabled-border');
234
+ background: eleVar('input', 'disabled-bg');
235
+ box-shadow: none;
236
+ }
237
+
238
+ & > .el-input > .el-input__wrapper > .el-input__inner {
239
+ color: eleVar('input', 'disabled-color');
240
+ -webkit-text-fill-color: eleVar('input', 'disabled-color');
241
+ }
242
+
183
243
  .ele-select-tags > .el-tag {
184
244
  color: elVar('disabled', 'text-color');
185
245
  background: hsla(0, 0%, 60%, 0.15);
186
246
  }
187
247
  }
188
248
  }
249
+
250
+ /* 表单验证 */
251
+ .el-form-item.is-error {
252
+ .ele-select > .el-input > .el-input__wrapper {
253
+ border: eleVar('input-error', 'border');
254
+ background: eleVar('input-error', 'bg');
255
+ box-shadow: none;
256
+ }
257
+
258
+ .ele-select:hover > .el-input > .el-input__wrapper {
259
+ border: eleVar('input-error', 'hover-border');
260
+ background: eleVar('input-error', 'hover-bg');
261
+ box-shadow: eleVar('input-error', 'hover-shadow');
262
+ }
263
+
264
+ .ele-select > .el-input > .el-input__wrapper.is-focus,
265
+ .ele-select.is-opened > .el-input > .el-input__wrapper {
266
+ border: eleVar('input-error', 'focus-border');
267
+ background: eleVar('input-error', 'focus-bg');
268
+ box-shadow: eleVar('input-error', 'focus-shadow') !important;
269
+ }
270
+
271
+ .ele-select.is-disabled > .el-input > .el-input__wrapper {
272
+ border: eleVar('input-error', 'disabled-border');
273
+ background: eleVar('input-error', 'disabled-bg');
274
+ box-shadow: none;
275
+ }
276
+ }
@@ -1,8 +1,8 @@
1
1
  @use '../../style/themes/default.scss' as *;
2
2
  @use '../../style/util.scss' as *;
3
3
  @use './css-var.scss' as *;
4
- $ele-filter-path: 'M 349 838 c 0 17.7 14.2 32 31.8 32 h 262.4 c 17.6 0 31.8 -14.3 31.8 -32 V 642 H 349 v 196 Z M 880.1 154 H 143.9 c -24.5 0 -39.8 26.7 -27.5 48 l 221.3 376 h 348.8 l 221.3 -376 c 12.1 -21.3 -3.2 -48 -27.7 -48 Z' !default;
5
- $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09 830.41l-51.68-51.73z' !default;
4
+ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM880 154H143c-24 0-39 26-27 48l221 376h348l221-376c12-21-3-48-27-48' !default;
5
+ $ele-expand-path: 'M362 811 662 512 362 213' !default;
6
6
 
7
7
  @include set-data-table-var($ele);
8
8
  @include table-var-style('body .ele-data-table.el-table');
@@ -201,9 +201,9 @@ $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09
201
201
  /* 展开按钮 */
202
202
  .ele-table-tr > .el-table__cell > .cell {
203
203
  & > .el-table__expand-icon {
204
- font-size: 16px;
204
+ font-size: 14px;
205
205
  align-items: center;
206
- justify-content: flex-end;
206
+ justify-content: center;
207
207
  border-radius: eleVar('table', 'icon-radius');
208
208
  transition: (color $ele-transition, background-color $ele-transition);
209
209
  transform: none;
@@ -213,6 +213,10 @@ $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09
213
213
  font-size: inherit;
214
214
 
215
215
  &:not(.is-loading) > svg > path {
216
+ fill: none;
217
+ stroke: currentColor;
218
+ stroke-width: 100;
219
+ stroke-linecap: round;
216
220
  #{'d'}: path($ele-expand-path);
217
221
  }
218
222
  }
@@ -225,14 +229,14 @@ $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09
225
229
  & > .el-table__expand-icon,
226
230
  & > .el-table__indent,
227
231
  & > .el-table__placeholder {
228
- height: 17px;
232
+ height: 16px;
229
233
  display: inline-flex;
230
234
  vertical-align: -3px;
231
235
  }
232
236
 
233
237
  & > .el-table__expand-icon,
234
238
  & > .el-table__placeholder {
235
- width: 17px;
239
+ width: 16px;
236
240
  margin: eleVar('table', 'expand-margin');
237
241
  }
238
242
 
@@ -217,6 +217,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
217
217
  popperWidth: _ctx.popperWidth,
218
218
  popperOptions: _ctx.popperOptions,
219
219
  popperClass: _ctx.selectPopperClass,
220
+ selectClass: "is-icon-select",
221
+ selectStyle: _ctx.selectStyle,
222
+ inputStyle: _ctx.inputStyle,
220
223
  selectedLabel: _ctx.modelValue,
221
224
  visible: _ctx.selectVisible,
222
225
  "onUpdate:visible": _ctx.updateVisible,
@@ -300,7 +303,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
300
303
  ]),
301
304
  key: "0"
302
305
  } : void 0
303
- ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectedLabel", "visible", "onUpdate:visible", "onFilterChange", "onClear", "onFocus", "onBlur"]);
306
+ ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectStyle", "inputStyle", "selectedLabel", "visible", "onUpdate:visible", "onFilterChange", "onClear", "onFocus", "onBlur"]);
304
307
  }
305
308
  const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
306
309
  module.exports = index;
@@ -38,7 +38,9 @@ declare const _default: import("vue").DefineComponent<{
38
38
  type: (StringConstructor | NumberConstructor)[];
39
39
  default: number;
40
40
  };
41
- hideOnSingleTab: BooleanConstructor;
41
+ selectStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
42
+ inputStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
43
+ hideOnSingleTab: BooleanConstructor; /** 下拉框类名 */
42
44
  emptyProps: import("vue").PropType<import("../ele-app/el").ElEmptyProps>;
43
45
  tooltip: {
44
46
  type: BooleanConstructor;
@@ -121,7 +123,9 @@ declare const _default: import("vue").DefineComponent<{
121
123
  type: (StringConstructor | NumberConstructor)[];
122
124
  default: number;
123
125
  };
124
- hideOnSingleTab: BooleanConstructor;
126
+ selectStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
127
+ inputStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
128
+ hideOnSingleTab: BooleanConstructor; /** 下拉框类名 */
125
129
  emptyProps: import("vue").PropType<import("../ele-app/el").ElEmptyProps>;
126
130
  tooltip: {
127
131
  type: BooleanConstructor;
@@ -54,6 +54,10 @@ const iconSelectProps = {
54
54
  type: [Number, String],
55
55
  default: 260
56
56
  },
57
+ /** 自定义样式 */
58
+ selectStyle: Object,
59
+ /** 自定义样式 */
60
+ inputStyle: Object,
57
61
  /** 顶部选项卡只有一个时隐藏 */
58
62
  hideOnSingleTab: Boolean,
59
63
  /** 空组件属性 */
@@ -58,6 +58,10 @@ export declare const iconSelectProps: {
58
58
  type: (StringConstructor | NumberConstructor)[];
59
59
  default: number;
60
60
  };
61
+ /** 自定义样式 */
62
+ selectStyle: PropType<Partial<import("vue").CSSProperties>>;
63
+ /** 自定义样式 */
64
+ inputStyle: PropType<Partial<import("vue").CSSProperties>>;
61
65
  /** 顶部选项卡只有一个时隐藏 */
62
66
  hideOnSingleTab: BooleanConstructor;
63
67
  /** 空组件属性 */
@@ -4,6 +4,10 @@
4
4
 
5
5
  @include set-icon-var($ele);
6
6
 
7
+ .ele-select.is-icon-select .el-input__prefix-inner {
8
+ color: elVar('input', 'text-color');
9
+ }
10
+
7
11
  .ele-icon-select-popper.is-responsive {
8
12
  max-width: calc(100vw - 32px);
9
13
  }
@@ -53,7 +53,7 @@
53
53
 
54
54
  .el-sub-menu.is-opened > .el-sub-menu__title {
55
55
  .el-sub-menu__icon-arrow > svg.ele-arrow-down path {
56
- #{'d'}: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425');
56
+ #{'d'}: path('M10 31 24 17 38 31');
57
57
  }
58
58
  }
59
59