Merge pull request #531 from Tencent/fix/tree-select/polyfill

fix(tree-select): add tree-select class polyfill
Tencent · Mar 10, 2022 · eb3ac12 · eb3ac12
2 parents ba94285 + 4ebb692
commit eb3ac12
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 270 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/cascader/utils/item.ts b/src/cascader/utils/item.ts
@@ -19,7 +19,7 @@ export function getNodeStatusClass(node: TreeNode, CLASSNAMES: any, cascaderCont
   const {
     checkStrictly, multiple, value, max,
   } = cascaderContext;
-  const expandedActive = !checkStrictly && node.expanded && (multiple ? !node.isLeaf() : true);
+  const expandedActive = (!checkStrictly && node.expanded && (multiple ? !node.isLeaf() : true)) || (checkStrictly && node.expanded);
 
   const isLeaf = node.isLeaf();
 

diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -120,6 +120,7 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
       if (classList.includes(INPUT_WRAP_CLASS)) {
         this.attrInputClass = classList.filter((item) => item !== INPUT_WRAP_CLASS);
       }
+      this.$el.setAttribute('class', INPUT_WRAP_CLASS);
     },
     addListenders() {
       this.$watch(

diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
@@ -75,6 +75,7 @@ export default mixins(getConfigReceiverMixins<Vue, TreeSelectConfig>('treeSelect
     classes(): ClassName {
       return [
         `${prefix}-select`,
+        `${prefix}-select-polyfill`,
         {
           [CLASSNAMES.STATUS.disabled]: this.tDisabled,
           [CLASSNAMES.STATUS.active]: this.visible,
@@ -471,25 +472,29 @@ export default mixins(getConfigReceiverMixins<Vue, TreeSelectConfig>('treeSelect
             {searchInput}
             {this.showArrow && !this.showLoading && (
               <FakeArrow
-                overlayClassName={`${prefix}-select__right-icon`}
+                overlayClassName={`${prefix}-select__right-icon ${prefix}-select__right-icon-polyfill`}
                 overlayStyle={iconStyle}
                 isActive={this.visible && !this.tDisabled}
               />
             )}
             <CloseCircleFilledIcon
               v-show={this.showClose && !this.showLoading}
-              class={[`${prefix}-select__right-icon`, `${prefix}-select__right-icon-clear`]}
+              class={[
+                `${prefix}-select__right-icon`,
+                `${prefix}-select__right-icon-polyfill`,
+                `${prefix}-select__right-icon-clear`,
+              ]}
               size={this.size}
               nativeOnClick={this.clear}
             />
             <Loading
               v-show={this.showLoading}
-              class={`${prefix}-select__right-icon ${prefix}-select__active-icon`}
+              class={`${prefix}-select__right-icon ${prefix}-select__right-icon-polyfill ${prefix}-select__active-icon`}
               size="small"
             />
           </div>
           <div slot="content">
-            <p v-show={this.showLoading} class={`${prefix}-select__loading-tips`}>
+            <p v-show={this.showLoading} class={`${prefix}-select__loading-tips ${prefix}-select__right-icon-polyfill`}>
               {this.loadingTextSlot}
             </p>
             {treeItem}

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
diff --git a/test/unit/select/__snapshots__/demo.test.js.snap b/test/unit/select/__snapshots__/demo.test.js.snap
@@ -342,7 +342,7 @@ exports[`Steps Steps creatable demo works fine 1`] = `
         +0
       </span>
       <div
-        class="t-input__wrap t-select__input"
+        class="t-input__wrap"
       >
         <div
           class="t-input t-size-m t-is-readonly"
@@ -768,7 +768,7 @@ exports[`Steps Steps filterable demo works fine 1`] = `
         +0
       </span>
       <div
-        class="t-input__wrap t-select__input"
+        class="t-input__wrap"
       >
         <div
           class="t-input t-size-m t-is-readonly"
@@ -815,7 +815,7 @@ exports[`Steps Steps filterable demo works fine 1`] = `
         +0
       </span>
       <div
-        class="t-input__wrap t-select__input"
+        class="t-input__wrap"
       >
         <div
           class="t-input t-size-m t-is-readonly"
@@ -867,7 +867,7 @@ exports[`Steps Steps group demo works fine 1`] = `
         +0
       </span>
       <div
-        class="t-input__wrap t-select__input"
+        class="t-input__wrap"
       >
         <div
           class="t-input t-size-m t-is-readonly"
@@ -913,7 +913,7 @@ exports[`Steps Steps group demo works fine 1`] = `
         +0
       </span>
       <div
-        class="t-input__wrap t-select__input"
+        class="t-input__wrap"
       >
         <div
           class="t-input t-size-m t-is-readonly"
@@ -1672,7 +1672,7 @@ exports[`Steps Steps remoteSearch demo works fine 1`] = `
         +0
       </span>
       <div
-        class="t-input__wrap t-select__input"
+        class="t-input__wrap"
       >
         <div
           class="t-input t-size-m t-is-readonly"
@@ -1719,7 +1719,7 @@ exports[`Steps Steps remoteSearch demo works fine 1`] = `
         +0
       </span>
       <div
-        class="t-input__wrap t-select__input"
+        class="t-input__wrap"
       >
         <div
           class="t-input t-size-m t-is-readonly"

diff --git a/test/unit/tag-input/__snapshots__/demo.test.js.snap b/test/unit/tag-input/__snapshots__/demo.test.js.snap
@@ -6,7 +6,7 @@ exports[`TagInput TagInput baseVue demo works fine 1`] = `
   style="width: 80%;"
 >
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -62,7 +62,7 @@ exports[`TagInput TagInput baseVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -123,7 +123,7 @@ exports[`TagInput TagInput baseVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -191,7 +191,7 @@ exports[`TagInput TagInput collapsedVue demo works fine 1`] = `
   style="width: 80%;"
 >
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -234,7 +234,7 @@ exports[`TagInput TagInput collapsedVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -295,7 +295,7 @@ exports[`TagInput TagInput collapsedVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -381,7 +381,7 @@ exports[`TagInput TagInput customTagVue demo works fine 1`] = `
   style="width: 80%;"
 >
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -459,7 +459,7 @@ exports[`TagInput TagInput customTagVue demo works fine 1`] = `
   <br />
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -564,7 +564,7 @@ exports[`TagInput TagInput excessVue demo works fine 1`] = `
   style="width: 80%;"
 >
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -625,7 +625,7 @@ exports[`TagInput TagInput excessVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input t-tag-input--break-line"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -692,7 +692,7 @@ exports[`TagInput TagInput maxVue demo works fine 1`] = `
   style="width: 100%;"
 >
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -718,7 +718,7 @@ exports[`TagInput TagInput sizeVue demo works fine 1`] = `
   style="width: 80%;"
 >
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-s t-input--prefix"
@@ -774,7 +774,7 @@ exports[`TagInput TagInput sizeVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -830,7 +830,7 @@ exports[`TagInput TagInput sizeVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-l t-input--prefix"
@@ -900,7 +900,7 @@ exports[`TagInput TagInput statusVue demo works fine 1`] = `
     </label>
      
     <div
-      class="t-input__wrap t-tag-input"
+      class="t-input__wrap"
     >
       <div
         class="t-input t-size-m t-is-disabled t-input--prefix"
@@ -944,7 +944,7 @@ exports[`TagInput TagInput statusVue demo works fine 1`] = `
     </label>
      
     <div
-      class="t-input__wrap t-tag-input"
+      class="t-input__wrap"
     >
       <div
         class="t-input t-size-m t-is-readonly t-input--prefix"
@@ -993,7 +993,7 @@ exports[`TagInput TagInput statusVue demo works fine 1`] = `
     </label>
      
     <div
-      class="t-input__wrap t-tag-input"
+      class="t-input__wrap"
     >
       <div
         class="t-input t-size-m t-is-success t-input--prefix"
@@ -1080,7 +1080,7 @@ exports[`TagInput TagInput statusVue demo works fine 1`] = `
     </label>
      
     <div
-      class="t-input__wrap t-tag-input"
+      class="t-input__wrap"
     >
       <div
         class="t-input t-size-m t-is-warning t-input--prefix"
@@ -1167,7 +1167,7 @@ exports[`TagInput TagInput statusVue demo works fine 1`] = `
     </label>
      
     <div
-      class="t-input__wrap t-tag-input"
+      class="t-input__wrap"
     >
       <div
         class="t-input t-size-m t-is-error t-input--prefix"
@@ -1254,7 +1254,7 @@ exports[`TagInput TagInput themeVue demo works fine 1`] = `
   style="width: 80%;"
 >
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -1328,7 +1328,7 @@ exports[`TagInput TagInput themeVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -1402,7 +1402,7 @@ exports[`TagInput TagInput themeVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
@@ -1476,7 +1476,7 @@ exports[`TagInput TagInput themeVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-input__wrap t-tag-input"
+    class="t-input__wrap"
   >
     <div
       class="t-input t-size-m t-input--prefix"
+49 −0		docs/web/api/color-picker.md
+59 −0		js/global-config/default-config.ts
+35 −15		js/global-config/locale/en_US.ts
+32 −5		js/global-config/locale/zh_CN.ts
+67 −2		style/mobile/components/count-down/_index.less
+57 −0		style/mobile/components/count-down/_mixin.less
+91 −0		style/mobile/components/count-down/_var.less
+1 −0		style/mobile/components/loading/_index.less
+1 −0		style/mobile/components/loading/_var.less
+1 −0		style/web/components/cascader/_index.less
+0 −0		style/web/components/color-picker/_docs.less
+470 −0		style/web/components/color-picker/_index.less
+0 −0		style/web/components/color-picker/_mixin.less
+45 −0		style/web/components/color-picker/_var.less
+96 −0		style/web/components/color-picker/index.html
+21 −9		style/web/components/form/_mixin.less
+1 −0		style/web/components/select/_index.less
+1 −0		style/web/components/tree/_index.less