@element-plus/nightly 0.0.20241128 → 0.0.20241129

package/theme-chalk/src/common/var.scss

@@ -918,6 +918,53 @@ $mention: map.merge(
   $mention
 );
 
+// InputTag
+// css3 var in packages/theme-chalk/src/input-tag.scss
+$input-tag: () !default;
+$input-tag: map.merge(
+  (
+    'border-color-hover': getCssVar('border-color-hover'),
+    'disabled-color': getCssVar('disabled-text-color'),
+    'disabled-border': getCssVar('disabled-border-color'),
+    'font-size': getCssVar('font-size-base'),
+    'close-hover-color': getCssVar('text-color-secondary'),
+    'text-color': getCssVar('text-color-regular'),
+    'input-focus-border-color': getCssVar('color-primary'),
+    'width': 100%,
+  ),
+  $input-tag
+);
+
+$input-tag-padding: () !default;
+$input-tag-padding: map.merge(
+  (
+    'large': 8px,
+    'default': 4px,
+    'small': 2px,
+  ),
+  $input-tag-padding
+);
+
+$input-tag-inner-padding: () !default;
+$input-tag-inner-padding: map.merge(
+  (
+    'large': 8px,
+    'default': 8px,
+    'small': 6px,
+  ),
+  $input-tag-inner-padding
+);
+
+$input-tag-gap: () !default;
+$input-tag-gap: map.merge(
+  (
+    'large': 6px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $input-tag-gap
+);
+
 // Table
 // css3 var in packages/theme-chalk/src/table.scss
 $table: () !default;

package/theme-chalk/src/form.scss

@@ -210,7 +210,8 @@ $form-item-label-top-margin-bottom: map.merge(
   @include when(error) {
     .#{$namespace}-input__wrapper,
     .#{$namespace}-textarea__inner,
-    .#{$namespace}-select__wrapper {
+    .#{$namespace}-select__wrapper,
+    .#{$namespace}-input-tag__wrapper {
       &,
       &:hover,
       &:focus,

package/theme-chalk/src/index.scss

@@ -46,6 +46,7 @@
 @use './infinite-scroll.scss';
 @use './input.scss';
 @use './input-number.scss';
+@use './input-tag.scss';
 @use './link.scss';
 @use './loading.scss';
 @use './main.scss';

package/theme-chalk/src/input-tag.scss

@@ -0,0 +1,215 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@mixin mixed-input-border($color) {
+  box-shadow: 0 0 0 1px $color inset;
+}
+
+@include b(input-tag) {
+  @include set-component-css-var('input-tag', $input-tag);
+  @include css-var-from-global('input-tag-mini-height', 'component-size');
+  @include set-css-var-value(
+    ('input-tag', 'gap'),
+    map.get($input-tag-gap, default)
+  );
+  @include set-css-var-value(
+    ('input-tag', 'padding'),
+    map.get($input-tag-padding, default)
+  );
+  @include set-css-var-value(
+    ('input-tag', 'inner-padding'),
+    map.get($input-tag-inner-padding, default)
+  );
+  @include set-css-var-value(
+    ('input-tag', 'line-height'),
+    map.get($tag-height, default)
+  );
+}
+
+@include b(input-tag) {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: getCssVar('input-tag-font-size');
+  padding: getCssVar('input-tag-padding');
+  width: getCssVar('input-tag-width');
+  min-height: getCssVar('input-tag-mini-height');
+  line-height: getCssVar('input-tag-line-height');
+  border-radius: getCssVar('border-radius-base');
+  background-color: getCssVar('fill-color', 'blank');
+  transition: getCssVar('transition', 'duration');
+  transform: translate3d(0, 0, 0);
+  @include mixed-input-border(#{getCssVar('border-color')});
+
+  @include when(focused) {
+    @include mixed-input-border(#{getCssVar('color-primary')});
+  }
+
+  @include when(hovering) {
+    &:not(.is-focused) {
+      @include mixed-input-border(#{getCssVar('border-color-hover')});
+    }
+  }
+
+  @include when(disabled) {
+    cursor: not-allowed;
+    background-color: getCssVar('fill-color', 'light');
+    @include mixed-input-border(#{getCssVar('input-tag-disabled-border')});
+
+    &:hover {
+      @include mixed-input-border(#{getCssVar('input-tag-disabled-border')});
+    }
+
+    &.is-focus {
+      @include mixed-input-border(#{getCssVar('input-focus-border-color')});
+    }
+
+    @include e(inner) {
+      @include e(input) {
+        cursor: not-allowed;
+      }
+      .#{$namespace}-tag {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(prefix) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 getCssVar('input-tag-inner-padding');
+    color: var(
+      #{getCssVarName('input-icon-color')},
+      map.get($input, 'icon-color')
+    );
+  }
+
+  @include e(suffix) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 getCssVar('input-tag-inner-padding');
+    gap: 8px;
+    color: var(
+      #{getCssVarName('input-icon-color')},
+      map.get($input, 'icon-color')
+    );
+  }
+
+  @include e(inner) {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex: 1;
+    max-width: 100%;
+    min-width: 0;
+    gap: getCssVar('input-tag-gap');
+
+    @include when(left-space) {
+      margin-left: getCssVar('input-tag-inner-padding');
+    }
+
+    @include when(right-space) {
+      margin-right: getCssVar('input-tag-inner-padding');
+    }
+
+    @include when(draggable) {
+      .#{$namespace}-tag {
+        cursor: move;
+        user-select: none;
+      }
+    }
+
+    @include e(drop-indicator) {
+      position: absolute;
+      top: 0;
+      width: 1px;
+      height: var(--el-input-tag-line-height);
+      background-color: getCssVar('color-primary');
+    }
+
+    .#{$namespace}-tag {
+      max-width: 100%;
+      cursor: pointer;
+      border-color: transparent;
+
+      &.#{$namespace}-tag--plain {
+        border-color: getCssVar('tag', 'border-color');
+      }
+
+      .#{$namespace}-tag__content {
+        min-width: 0;
+        line-height: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  @include e(input-wrapper) {
+    flex: 1;
+  }
+
+  @include e(input) {
+    border: none;
+    outline: none;
+    padding: 0;
+    color: getCssVar('input-tag-text-color');
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    appearance: none;
+    width: 100%;
+    background-color: transparent;
+  }
+
+  @include e(input-calculator) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    max-width: 100%;
+    visibility: hidden;
+    white-space: pre;
+    overflow: hidden;
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include set-css-var-value(
+        ('input-tag', 'gap'),
+        map.get($input-tag-gap, $size)
+      );
+      @include set-css-var-value(
+        ('input-tag', 'padding'),
+        map.get($input-tag-padding, $size)
+      );
+      @include set-css-var-value(
+        ('input-tag', 'padding-left'),
+        map.get($input-tag-inner-padding, $size)
+      );
+      @include set-css-var-value(
+        ('input-tag', 'font-size'),
+        map.get($input-font-size, $size)
+      );
+
+      @if $size == small {
+        @include set-css-var-value(
+          ('input-tag', 'line-height'),
+          map.get($tag-height, $size)
+        );
+        @include css-var-from-global(
+          'input-tag-mini-height',
+          ('component-size', $size)
+        );
+      }
+    }
+  }
+}