fix: improve styles for select/cascader with custom #selected slot

ecomfe · Oct 9, 2023 · f5eb231 · f5eb231
1 parent 5a40bfd
commit f5eb231
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 37 deletions.
diff --git a/packages/veui-theme-dls/components/cascader.less b/packages/veui-theme-dls/components/cascader.less
@@ -27,12 +27,6 @@
     }
   }
 
-  .@{veui-prefix}-trigger.@{veui-prefix}-trigger-multiple:not(
-      .@{veui-prefix}-trigger-empty
-    ) {
-    padding-left: @dls-select-padding-start;
-  }
-
   &-pane-wrap {
     &:extend(._veui-dropdown-overlay all);
     overflow-y: auto;

diff --git a/packages/veui-theme-dls/components/select.less b/packages/veui-theme-dls/components/select.less
@@ -51,8 +51,24 @@
     }
   }
 
-  &-multiple:not(&-empty) &-trigger {
+  &-trigger .@{veui-prefix}-input-before > .@{veui-prefix}-tag:first-child {
+    margin-left: dls-sum(@dls-select-padding-start, -@dls-input-padding);
+  }
+
+  &-trigger:has(
+      .@{veui-prefix}-input-before > .@{veui-prefix}-tag:first-child
+    ) {
     padding-left: @dls-select-padding-start;
+
+    .@{veui-prefix}-input-before > .@{veui-prefix}-tag:first-child {
+      margin-left: 0;
+    }
+  }
+
+  &:not(&-searchable) &-trigger {
+    .@{veui-prefix}-input-before {
+      padding-right: 0;
+    }
   }
 
   &-trigger {
@@ -63,7 +79,6 @@
     .@{veui-prefix}-input-before {
       flex-grow: 0;
       flex-shrink: 1;
-      padding-right: 0;
       .ellipsis();
     }
 
@@ -137,11 +152,13 @@
     .ellipsis();
   }
 
-  &-searchable&-multiple {
-    &:not(.@{veui-prefix}-select-empty) .@{veui-prefix}-input-content {
+  &-searchable&-wrap {
+    .@{veui-prefix}-input-content {
       display: block;
     }
+  }
 
+  &-searchable&-multiple {
     .@{veui-prefix}-input-input {
       width: 0;
       max-width: 100%;
@@ -201,7 +218,9 @@
       .dls-icon-size(@dls-input-icon-size);
     }
 
-    .@{veui-prefix}-select:not(.@{veui-prefix}-readonly):not(.@{veui-prefix}-disabled):hover
+    .@{veui-prefix}-select:not(.@{veui-prefix}-readonly):not(
+        .@{veui-prefix}-disabled
+      ):hover
       &,
     .@{veui-prefix}-focus &,
     &[data-focus-visible-added] {

diff --git a/packages/veui-theme-dls/trigger.less b/packages/veui-theme-dls/trigger.less
@@ -151,11 +151,13 @@
     .ellipsis();
   }
 
-  &-searchable.@{trigger}-multiple {
-    &:not(.@{veui-prefix}-trigger-empty) .@{veui-prefix}-input-content {
+  &-searchable.@{trigger}-wrap {
+    .@{veui-prefix}-input-content {
       display: block;
     }
+  }
 
+  &-searchable.@{trigger}-multiple {
     .@{veui-prefix}-input-input {
       width: 0;
       max-width: 100%;
@@ -168,6 +170,18 @@
     }
   }
 
+  & .@{veui-prefix}-input-before > .@{veui-prefix}-tag:first-child {
+    margin-left: dls-sum(@dls-select-padding-start, -@dls-input-padding);
+  }
+
+  &:has(.@{veui-prefix}-input-before > .@{veui-prefix}-tag:first-child) {
+    padding-left: @dls-select-padding-start;
+
+    .@{veui-prefix}-input-before > .@{veui-prefix}-tag:first-child {
+      margin-left: 0;
+    }
+  }
+
   .make-metrics (@size) {
     @height: ~"dls-select-tag-height-@{size}";
 

diff --git a/packages/veui/demo/cases/Cascader.vue b/packages/veui/demo/cases/Cascader.vue
@@ -34,7 +34,7 @@
         <veui-input v-model="columnWidth1"/>
       </label>
     </div>
-    <cascader
+    <veui-cascader
       v-model="value1"
       :options="options"
       :searchable="searchable1"
@@ -74,7 +74,7 @@
         <veui-input v-model="columnWidth2"/>
       </label>
     </div>
-    <cascader
+    <veui-cascader
       v-model="value2"
       :options="options"
       :searchable="searchable2"
@@ -91,7 +91,7 @@
   </section>
   <section>
     <h3>Slots: before/after/column-before/column-after</h3>
-    <cascader
+    <veui-cascader
       v-model="value2"
       :options="options"
       :searchable="searchable2"
@@ -116,13 +116,13 @@
       <template #column-after>
         <div class="center-align">column-after</div>
       </template>
-    </cascader>
+    </veui-cascader>
   </section>
   <section>
     <h3>Sizes: xs/s/m/l</h3>
     <div class="size-wrap">
       <span class="size">xs:</span>
-      <cascader
+      <veui-cascader
         v-model="value2"
         :options="options"
         :searchable="searchable2"
@@ -144,11 +144,11 @@
         <template #column-after>
           <div class="center-align">column-after</div>
         </template>
-      </cascader>
+      </veui-cascader>
     </div>
     <div class="size-wrap">
       <span class="size">s:</span>
-      <cascader
+      <veui-cascader
         :options="options"
         :searchable="searchable1"
         :select-mode="selectMode1"
@@ -160,7 +160,7 @@
     </div>
     <div class="size-wrap">
       <span class="size">m:</span>
-      <cascader
+      <veui-cascader
         :options="options"
         :searchable="searchable1"
         :select-mode="selectMode1"
@@ -172,7 +172,7 @@
     </div>
     <div class="size-wrap">
       <span class="size">l:</span>
-      <cascader
+      <veui-cascader
         :options="options"
         :searchable="searchable2"
         :column-trigger="trigger2"
@@ -185,7 +185,7 @@
   </section>
   <section>
     <h3>Disabled</h3>
-    <cascader
+    <veui-cascader
       :options="options"
       :searchable="searchable2"
       :column-trigger="trigger2"
@@ -196,7 +196,7 @@
   </section>
   <section>
     <h3>Readonly</h3>
-    <cascader
+    <veui-cascader
       :options="options"
       :searchable="searchable2"
       :column-trigger="trigger2"
@@ -259,7 +259,7 @@ const hzChildren = [
 export default {
   name: 'cascader-demo',
   components: {
-    Cascader,
+    'veui-cascader': Cascader,
     'veui-checkbox': Checkbox,
     'veui-radio': Radio,
     'veui-number-input': NumberInput,

diff --git a/packages/veui/demo/cases/Select.vue b/packages/veui/demo/cases/Select.vue
@@ -184,7 +184,12 @@
   </section>
   <section>
     <h2>多选Select：(自定义 selected slot)</h2>
-    <veui-select v-model="defaultSearchMultiValue" v-bind="attrs" multiple>
+    <veui-select
+      v-model="defaultSearchMultiValue"
+      v-bind="attrs"
+      multiple
+      searchable
+    >
       <template #selected="{ selected }">
         {{ selected[0].label
         }}{{ selected.length > 1 ? `等${selected.length}个` : '' }}
@@ -792,7 +797,7 @@ export default {
   padding-left: 24px;
 
   &::after {
-    content: "❤️";
+    content: '❤️';
     position: absolute;
     top: 50%;
     left: 0;

diff --git a/packages/veui/src/components/_SelectTrigger.vue b/packages/veui/src/components/_SelectTrigger.vue
@@ -64,15 +64,6 @@ export default {
       }
       return this.realSelected.map(({ label, value }) => label || value)
     },
-    // float multiple tags
-    layoutWrap () {
-      return (
-        this.multiple &&
-        !this.isEmpty &&
-        (!this.hasLabelSlot() || this.expanded) &&
-        !this.hasSelectedSlot()
-      )
-    },
     finalInvalid () {
       return this.realInvalid || this.countOverflow
     },
@@ -106,6 +97,15 @@ export default {
         this.focus()
       }
     },
+    // float multiple tags
+    layoutWrap () {
+      return (
+        this.multiple &&
+        !this.isEmpty &&
+        (!this.hasLabelSlot() || this.expanded) &&
+        !this.hasSelectedSlot()
+      )
+    },
     handleInputMouseup (e) {
       if (this.realReadonly || this.realDisabled) {
         return
@@ -248,7 +248,7 @@ export default {
           [this.$c('trigger-searchable')]: this.searchable,
           [this.$c('trigger-expanded')]: this.expanded,
           [this.$c('trigger-multiple')]: this.multiple,
-          [this.$c('trigger-wrap')]: this.layoutWrap,
+          [this.$c('trigger-wrap')]: this.layoutWrap(),
           [this.$c('trigger-empty')]: this.isEmpty
         }}
         disabled={this.realDisabled}