ele-admin-plus 1.5.0-beta.7 → 1.5.0

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.
@@ -5,6 +5,10 @@
5
5
  @include set-el-input-var($ele);
6
6
 
7
7
  /* Input */
8
+ .el-input .el-input__wrapper {
9
+ min-height: elVar('input', 'height');
10
+ }
11
+
8
12
  .el-input .el-input__wrapper,
9
13
  .el-textarea .el-textarea__inner,
10
14
  .el-select .el-select__wrapper,
@@ -373,30 +377,86 @@ body .el-textarea .el-input__count {
373
377
  .el-input-number {
374
378
  .el-input-number__increase,
375
379
  .el-input-number__decrease {
376
- width: elVar('component-size');
380
+ #{elVarName('input', 'height')}: elVar('component-size');
381
+ width: elVar('input', 'height');
382
+ background: none;
383
+ border: 1px solid transparent;
377
384
  transition: color $transition-base;
378
- bottom: 0.8px;
379
- top: 0.8px;
385
+ box-sizing: border-box;
386
+ left: 0;
387
+ right: 0;
388
+ bottom: 0;
389
+ top: 0;
390
+
391
+ & > .el-icon {
392
+ width: 100%;
393
+ height: 100%;
394
+ display: flex;
395
+ align-items: center;
396
+ justify-content: center;
397
+ background: elVar('fill-color', 'light');
398
+ box-sizing: border-box;
399
+ border-radius: inherit;
400
+
401
+ & > svg {
402
+ transform: scale(0.9);
403
+ }
404
+ }
380
405
  }
381
406
 
382
407
  .el-input-number__increase {
383
- right: 0.8px;
408
+ left: auto;
409
+ & > .el-icon {
410
+ border-left: 1px solid elVar('border-color');
411
+ }
384
412
  }
385
413
 
386
- .el-input-number__decrease {
387
- left: 0.8px;
414
+ .el-input-number__decrease > .el-icon {
415
+ border-right: 1px solid elVar('border-color');
388
416
  }
389
417
  }
390
418
 
391
- body .el-input-number.is-controls-right {
392
- .el-input-number__increase {
393
- bottom: auto;
419
+ body .el-input-number {
420
+ .el-input-number__increase,
421
+ .el-input-number__decrease,
422
+ &.is-controls-right .el-input-number__increase,
423
+ &.is-controls-right .el-input-number__decrease {
424
+ & > .el-icon {
425
+ transform: none;
426
+ }
394
427
  }
395
428
 
396
- .el-input-number__decrease {
397
- right: 0.8px;
398
- left: auto;
399
- top: auto;
429
+ &.is-controls-right {
430
+ .el-input-number__increase,
431
+ .el-input-number__decrease {
432
+ left: auto;
433
+ border: 1px solid transparent;
434
+
435
+ & > .el-icon {
436
+ border-left: 1px solid elVar('border-color');
437
+ }
438
+ }
439
+
440
+ .el-input-number__increase {
441
+ bottom: auto;
442
+ border-bottom: none;
443
+ height: calc(#{elVar('input', 'height')} / 2 + 0.5px);
444
+
445
+ & > .el-icon {
446
+ border-bottom: 1px solid elVar('border-color');
447
+ }
448
+ }
449
+
450
+ .el-input-number__decrease {
451
+ right: 0;
452
+ top: auto;
453
+ border-top: none;
454
+ height: calc(#{elVar('input', 'height')} / 2 - 0.5px);
455
+
456
+ & > .el-icon {
457
+ border-right: none;
458
+ }
459
+ }
400
460
  }
401
461
  }
402
462
 
@@ -405,7 +465,7 @@ body .el-input-number .el-input .el-input__wrapper {
405
465
  padding-bottom: 0;
406
466
  padding-left: eleVar('input', 'padding-left');
407
467
  padding-right: calc(
408
- #{elVar('component-size')} + #{eleVar('input', 'icon-space')}
468
+ #{elVar('input', 'height')} + #{eleVar('input', 'icon-space')}
409
469
  );
410
470
  }
411
471
 
@@ -426,7 +486,7 @@ body .el-input-number .el-input .el-input__wrapper {
426
486
  .el-input-number.el-input-number--large {
427
487
  .el-input-number__increase,
428
488
  .el-input-number__decrease {
429
- width: elVar('component-size', 'large');
489
+ #{elVarName('input', 'height')}: elVar('component-size', 'large');
430
490
  }
431
491
 
432
492
  .el-input .el-input__wrapper {
@@ -437,6 +497,13 @@ body .el-input-number .el-input .el-input__wrapper {
437
497
  }
438
498
  }
439
499
 
500
+ .el-input-number.el-input-number--small {
501
+ .el-input-number__increase,
502
+ .el-input-number__decrease {
503
+ #{elVarName('input', 'height')}: elVar('component-size', 'small');
504
+ }
505
+ }
506
+
440
507
  .el-input-number:not(.is-controls-right) .el-input .el-input__wrapper {
441
508
  padding-left: calc(
442
509
  #{elVar('component-size')} + #{eleVar('input', 'icon-space')}
@@ -40,7 +40,7 @@
40
40
  margin: eleVar('buttons', 'btn-arrow-margin');
41
41
  }
42
42
 
43
- /* 带图标时间距调整 */
43
+ /* 带图标间距调整 */
44
44
  .ele-buttons-item {
45
45
  &.ele-buttons-icon-link > .el-icon {
46
46
  font-size: eleVar('buttons', 'link-icon-font-size');
@@ -85,6 +85,7 @@ span.el-tag.ele-edit-tag-input {
85
85
  .el-input {
86
86
  .el-input__wrapper {
87
87
  height: 100%;
88
+ min-height: auto;
88
89
  padding-left: 8px;
89
90
  padding-right: 8px;
90
91
  box-sizing: border-box;
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  &:not(.ele-loading-spinner-show) {
34
- pointer-events: none;
34
+ pointer-events: none !important;
35
35
 
36
36
  & > * {
37
37
  display: none !important;
@@ -1 +1 @@
1
- import "element-plus/es/components/transfer/style/index";
1
+ import "element-plus/es/components/mention/style/index";
@@ -3,6 +3,7 @@ import { MutationOption } from '../ele-watermark/types';
3
3
 
4
4
  export declare function useMutation(option: MutationOption): {
5
5
  imageId: import('vue').Ref<number, number>;
6
+ imageStyleId: import('vue').Ref<number, number>;
6
7
  imageStyle: import('vue').Ref<string, string>;
7
8
  observe: () => void;
8
9
  observeText: (text: string) => string;
@@ -5,6 +5,7 @@ import { getImageData, svgProp, getProps, getOption } from "../ele-watermark/uti
5
5
  function useMutation(option) {
6
6
  const imageStyle = ref(joinStyle({ display: "none" }));
7
7
  const imageId = ref(1);
8
+ const imageStyleId = ref(1);
8
9
  const deletedObserver = new MutationObserver((mutations) => {
9
10
  const el = option.getImageEl();
10
11
  mutations.forEach((mutation) => {
@@ -60,6 +61,7 @@ function useMutation(option) {
60
61
  styleOpt.offsetX,
61
62
  styleOpt.offsetY
62
63
  );
64
+ imageStyleId.value = imageStyleId.value + 1;
63
65
  nextTick(() => {
64
66
  observe();
65
67
  });
@@ -74,7 +76,14 @@ function useMutation(option) {
74
76
  onBeforeUnmount(() => {
75
77
  disconnect();
76
78
  });
77
- return { imageId, imageStyle, observe, observeText, updateImageStyle };
79
+ return {
80
+ imageId,
81
+ imageStyleId,
82
+ imageStyle,
83
+ observe,
84
+ observeText,
85
+ updateImageStyle
86
+ };
78
87
  }
79
88
  function useSvgOption() {
80
89
  const cs = svgProp[svgText.findIndex((c) => c === svgText[svgText.length - 1])];
@@ -99,7 +99,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
99
99
  offsetY: props.offset?.[1] ?? 0
100
100
  };
101
101
  };
102
- const { imageId, imageStyle, observeText, updateImageStyle } = useMutation({
102
+ const { imageId, imageStyleId, imageStyle, observeText, updateImageStyle } = useMutation({
103
103
  getWrapperEl: () => wrapperRef.value,
104
104
  getImageEl: () => imageRef.value,
105
105
  getImageStyleOption
@@ -141,9 +141,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
141
141
  }, [
142
142
  renderSlot(_ctx.$slots, "default"),
143
143
  !_ctx.svgRender && markDisabled.value ? (openBlock(), createElementBlock("div", {
144
- key: 0,
145
144
  ref_key: "imageRef",
146
145
  ref: imageRef,
146
+ key: unref(imageStyleId),
147
147
  style: normalizeStyle(unref(imageStyle))
148
148
  }, null, 4)) : svgMarkOption.value && markDisabled.value ? (openBlock(), createBlock(Teleport, {
149
149
  key: 1,
@@ -5,6 +5,10 @@
5
5
  @include set-el-input-var($ele);
6
6
 
7
7
  /* Input */
8
+ .el-input .el-input__wrapper {
9
+ min-height: elVar('input', 'height');
10
+ }
11
+
8
12
  .el-input .el-input__wrapper,
9
13
  .el-textarea .el-textarea__inner,
10
14
  .el-select .el-select__wrapper,
@@ -373,30 +377,86 @@ body .el-textarea .el-input__count {
373
377
  .el-input-number {
374
378
  .el-input-number__increase,
375
379
  .el-input-number__decrease {
376
- width: elVar('component-size');
380
+ #{elVarName('input', 'height')}: elVar('component-size');
381
+ width: elVar('input', 'height');
382
+ background: none;
383
+ border: 1px solid transparent;
377
384
  transition: color $transition-base;
378
- bottom: 0.8px;
379
- top: 0.8px;
385
+ box-sizing: border-box;
386
+ left: 0;
387
+ right: 0;
388
+ bottom: 0;
389
+ top: 0;
390
+
391
+ & > .el-icon {
392
+ width: 100%;
393
+ height: 100%;
394
+ display: flex;
395
+ align-items: center;
396
+ justify-content: center;
397
+ background: elVar('fill-color', 'light');
398
+ box-sizing: border-box;
399
+ border-radius: inherit;
400
+
401
+ & > svg {
402
+ transform: scale(0.9);
403
+ }
404
+ }
380
405
  }
381
406
 
382
407
  .el-input-number__increase {
383
- right: 0.8px;
408
+ left: auto;
409
+ & > .el-icon {
410
+ border-left: 1px solid elVar('border-color');
411
+ }
384
412
  }
385
413
 
386
- .el-input-number__decrease {
387
- left: 0.8px;
414
+ .el-input-number__decrease > .el-icon {
415
+ border-right: 1px solid elVar('border-color');
388
416
  }
389
417
  }
390
418
 
391
- body .el-input-number.is-controls-right {
392
- .el-input-number__increase {
393
- bottom: auto;
419
+ body .el-input-number {
420
+ .el-input-number__increase,
421
+ .el-input-number__decrease,
422
+ &.is-controls-right .el-input-number__increase,
423
+ &.is-controls-right .el-input-number__decrease {
424
+ & > .el-icon {
425
+ transform: none;
426
+ }
394
427
  }
395
428
 
396
- .el-input-number__decrease {
397
- right: 0.8px;
398
- left: auto;
399
- top: auto;
429
+ &.is-controls-right {
430
+ .el-input-number__increase,
431
+ .el-input-number__decrease {
432
+ left: auto;
433
+ border: 1px solid transparent;
434
+
435
+ & > .el-icon {
436
+ border-left: 1px solid elVar('border-color');
437
+ }
438
+ }
439
+
440
+ .el-input-number__increase {
441
+ bottom: auto;
442
+ border-bottom: none;
443
+ height: calc(#{elVar('input', 'height')} / 2 + 0.5px);
444
+
445
+ & > .el-icon {
446
+ border-bottom: 1px solid elVar('border-color');
447
+ }
448
+ }
449
+
450
+ .el-input-number__decrease {
451
+ right: 0;
452
+ top: auto;
453
+ border-top: none;
454
+ height: calc(#{elVar('input', 'height')} / 2 - 0.5px);
455
+
456
+ & > .el-icon {
457
+ border-right: none;
458
+ }
459
+ }
400
460
  }
401
461
  }
402
462
 
@@ -405,7 +465,7 @@ body .el-input-number .el-input .el-input__wrapper {
405
465
  padding-bottom: 0;
406
466
  padding-left: eleVar('input', 'padding-left');
407
467
  padding-right: calc(
408
- #{elVar('component-size')} + #{eleVar('input', 'icon-space')}
468
+ #{elVar('input', 'height')} + #{eleVar('input', 'icon-space')}
409
469
  );
410
470
  }
411
471
 
@@ -426,7 +486,7 @@ body .el-input-number .el-input .el-input__wrapper {
426
486
  .el-input-number.el-input-number--large {
427
487
  .el-input-number__increase,
428
488
  .el-input-number__decrease {
429
- width: elVar('component-size', 'large');
489
+ #{elVarName('input', 'height')}: elVar('component-size', 'large');
430
490
  }
431
491
 
432
492
  .el-input .el-input__wrapper {
@@ -437,6 +497,13 @@ body .el-input-number .el-input .el-input__wrapper {
437
497
  }
438
498
  }
439
499
 
500
+ .el-input-number.el-input-number--small {
501
+ .el-input-number__increase,
502
+ .el-input-number__decrease {
503
+ #{elVarName('input', 'height')}: elVar('component-size', 'small');
504
+ }
505
+ }
506
+
440
507
  .el-input-number:not(.is-controls-right) .el-input .el-input__wrapper {
441
508
  padding-left: calc(
442
509
  #{elVar('component-size')} + #{eleVar('input', 'icon-space')}
@@ -40,7 +40,7 @@
40
40
  margin: eleVar('buttons', 'btn-arrow-margin');
41
41
  }
42
42
 
43
- /* 带图标时间距调整 */
43
+ /* 带图标间距调整 */
44
44
  .ele-buttons-item {
45
45
  &.ele-buttons-icon-link > .el-icon {
46
46
  font-size: eleVar('buttons', 'link-icon-font-size');
@@ -85,6 +85,7 @@ span.el-tag.ele-edit-tag-input {
85
85
  .el-input {
86
86
  .el-input__wrapper {
87
87
  height: 100%;
88
+ min-height: auto;
88
89
  padding-left: 8px;
89
90
  padding-right: 8px;
90
91
  box-sizing: border-box;
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  &:not(.ele-loading-spinner-show) {
34
- pointer-events: none;
34
+ pointer-events: none !important;
35
35
 
36
36
  & > * {
37
37
  display: none !important;
@@ -1,2 +1,2 @@
1
1
  "use strict";
2
- require("element-plus/es/components/transfer/style/index");
2
+ require("element-plus/es/components/mention/style/index");
@@ -7,6 +7,7 @@ const util = require("../ele-watermark/util");
7
7
  function useMutation(option) {
8
8
  const imageStyle = vue.ref(common.joinStyle({ display: "none" }));
9
9
  const imageId = vue.ref(1);
10
+ const imageStyleId = vue.ref(1);
10
11
  const deletedObserver = new MutationObserver((mutations) => {
11
12
  const el = option.getImageEl();
12
13
  mutations.forEach((mutation) => {
@@ -62,6 +63,7 @@ function useMutation(option) {
62
63
  styleOpt.offsetX,
63
64
  styleOpt.offsetY
64
65
  );
66
+ imageStyleId.value = imageStyleId.value + 1;
65
67
  vue.nextTick(() => {
66
68
  observe();
67
69
  });
@@ -76,7 +78,14 @@ function useMutation(option) {
76
78
  vue.onBeforeUnmount(() => {
77
79
  disconnect();
78
80
  });
79
- return { imageId, imageStyle, observe, observeText, updateImageStyle };
81
+ return {
82
+ imageId,
83
+ imageStyleId,
84
+ imageStyle,
85
+ observe,
86
+ observeText,
87
+ updateImageStyle
88
+ };
80
89
  }
81
90
  function useSvgOption() {
82
91
  const cs = util.svgProp[qrcodegen.svgText.findIndex((c) => c === qrcodegen.svgText[qrcodegen.svgText.length - 1])];
@@ -3,6 +3,7 @@ import { MutationOption } from '../ele-watermark/types';
3
3
 
4
4
  export declare function useMutation(option: MutationOption): {
5
5
  imageId: import('vue').Ref<number, number>;
6
+ imageStyleId: import('vue').Ref<number, number>;
6
7
  imageStyle: import('vue').Ref<string, string>;
7
8
  observe: () => void;
8
9
  observeText: (text: string) => string;
@@ -100,7 +100,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
100
100
  offsetY: props2.offset?.[1] ?? 0
101
101
  };
102
102
  };
103
- const { imageId, imageStyle, observeText, updateImageStyle } = util$1.useMutation({
103
+ const { imageId, imageStyleId, imageStyle, observeText, updateImageStyle } = util$1.useMutation({
104
104
  getWrapperEl: () => wrapperRef.value,
105
105
  getImageEl: () => imageRef.value,
106
106
  getImageStyleOption
@@ -142,9 +142,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
142
142
  }, [
143
143
  vue.renderSlot(_ctx.$slots, "default"),
144
144
  !_ctx.svgRender && markDisabled.value ? (vue.openBlock(), vue.createElementBlock("div", {
145
- key: 0,
146
145
  ref_key: "imageRef",
147
146
  ref: imageRef,
147
+ key: vue.unref(imageStyleId),
148
148
  style: vue.normalizeStyle(vue.unref(imageStyle))
149
149
  }, null, 4)) : svgMarkOption.value && markDisabled.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
150
150
  key: 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ele-admin-plus",
3
- "version": "1.5.0-beta.7",
3
+ "version": "1.5.0",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite --host",