fix(cascader): cascader menu width bug (#731)

* fix: menuWidth prop

* fix: cascader menu width show error

* fix: cascader width

* fix: fix use css-render

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -18,6 +18,7 @@
 ### Fixes
 
 - Fix `n-dropdown` click exception when using v-for.
+- Fix `n-cascader` menu width shifts in virtual scroll mode, closes [#728](https://github.com/TuSimple/naive-ui/issues/728).
 - Fix `n-input` type of `type` errors.
 
 ## 2.15.11 (2021-07-29)

CHANGELOG.zh-CN.md

@@ -18,6 +18,7 @@
 ### Fixes
 
 - 修复 `n-dropdown` 循环渲染时点击异常
+- 修复 `n-cascader` 的菜单虚拟滚动时宽度展示不一致问题，关闭 [#728](https://github.com/TuSimple/naive-ui/issues/728)
 - 修复 `n-input` 的 `type` 类型错误
 
 ## 2.15.11 (2021-07-29)

src/cascader/demos/zhCN/index.demo-entry.md

@@ -24,7 +24,7 @@ virtual
 | disabled | `boolean` | `false` | 是否禁用 |
 | expand-trigger | `'click' \| 'hover'` | `'click'` | 在 `remote` 被设定时 `'hover'` 不生效 |
 | filterable | `boolean` | `false` | `remote` 被设定时不生效 |
-| filter | `(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean` | 一个基于字符串的过滤算法 |  过滤选项的函数 |
+| filter | `(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean` | 一个基于字符串的过滤算法 | 过滤选项的函数 |
 | leaf-only | `boolean` | `false` | 是否只允许 `value` 出现叶节点的值 |
 | max-tag-count | `number \| 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 |
 | multiple | `boolean` | `false` | 是否支持多选 |

src/cascader/src/Cascader.tsx

@@ -737,7 +737,8 @@ export default defineComponent({
             optionColorHover,
             optionHeight,
             optionFontSize,
-            loadingColor
+            loadingColor,
+            columnWidth
           },
           common: { cubicBezierEaseInOut }
         } = themeRef.value
@@ -746,6 +747,7 @@ export default defineComponent({
           '--menu-border-radius': menuBorderRadius,
           '--menu-box-shadow': menuBoxShadow,
           '--menu-height': menuHeight,
+          '--column-width': columnWidth,
           '--menu-color': menuColor,
           '--menu-divider-color': menuDividerColor,
           '--option-height': optionHeight,

src/cascader/src/CascaderSubmenu.tsx

@@ -68,7 +68,12 @@ export default defineComponent({
   render () {
     const { mergedClsPrefix, mergedTheme, virtualScroll } = this
     return (
-      <div class={`${mergedClsPrefix}-cascader-submenu`}>
+      <div
+        class={[
+          virtualScroll && `${mergedClsPrefix}-cascader-submenu--virtual`,
+          `${mergedClsPrefix}-cascader-submenu`
+        ]}
+      >
         <NScrollbar
           ref="scrollbarInstRef"
           theme={mergedTheme.peers.Scrollbar}

src/cascader/src/styles/index.cssr.ts

@@ -49,9 +49,12 @@ export default c([
     `),
     cB('cascader-submenu', `
       height: var(--menu-height);
+      min-width: var(--column-width);
       position: relative;
-      min-width: 180px;
     `, [
+      cM('virtual', `
+        width: var(--column-width);
+      `),
       cB('scrollbar-content', {
         position: 'relative'
       }),

src/cascader/styles/light.ts

@@ -34,7 +34,8 @@ export const self = (vars: ThemeCommonVars) => {
     optionTextColorActive: primaryColor,
     optionTextColorDisabled: textColorDisabled,
     optionCheckMarkColor: primaryColor,
-    loadingColor: primaryColor
+    loadingColor: primaryColor,
+    columnWidth: '180px'
   }
 }