fix(ui/col): fix span & responsive props when equal 0 #529

varletjs · Apr 29, 2022 · a0831c3 · a0831c3
1 parent 317d242
commit a0831c3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/packages/varlet-ui/src/col/Col.vue b/packages/varlet-ui/src/col/Col.vue
@@ -4,7 +4,7 @@
       classes(
         n(),
         'var--box',
-        [span, n(`--span-${span}`)],
+        [span, n(`--span-${span}`), n('--none')],
         [offset, n(`--offset-${offset}`)],
         ...getSize('xs', xs),
         ...getSize('sm', sm),
@@ -53,16 +53,24 @@ export default defineComponent({
     const getSize = (mode: string, size: string | number | SizeDescriptor | undefined) => {
       const classes: string[] = []
 
-      if (!size) {
+      if (size == null) {
         return classes
       }
 
       if (isPlainObject(size)) {
-        const { span, offset } = size
-        span && classes.push(n(`--span-${mode}-${span}`))
+        const { offset } = size
+        let { span } = size
+        span = Number(span)
+
+        span === 0 && classes.push(n('--none'))
+        span > 0 && classes.push(n(`--span-${mode}-${span}`))
+
         offset && classes.push(n(`--offset-${mode}-${offset}`))
       } else {
-        classes.push(n(`--span-${mode}-${size}`))
+        size = Number(size)
+
+        size === 0 && classes.push(n('--none'))
+        size > 0 && classes.push(n(`--span-${mode}-${size}`))
       }
 
       return classes

diff --git a/packages/varlet-ui/src/col/col.less b/packages/varlet-ui/src/col/col.less
@@ -1,5 +1,9 @@
 .var-col {
   transition: all 0.25s;
+
+  &--none {
+    display: none !important;
+  }
 }
 
 .create-col(@i) when (@i =< 24) {
@@ -23,7 +27,7 @@
     margin-left: @i * (100% / 24);
   }
 
-  .create-responsive-col(@i + 1,@mode);
+  .create-responsive-col(@i + 1, @mode);
 }
 
 .create-col(1);
@@ -45,5 +49,5 @@
 }
 
 @media only screen and (min-width: 1920px) {
-  .create-responsive-col(1, xl);
+  .create-responsive-col(0, xl);
 }
diff --git a/packages/varlet-ui/src/row/__tests__/index.spec.js b/packages/varlet-ui/src/row/__tests__/index.spec.js
@@ -69,6 +69,17 @@ describe('test row and col component props', () => {
     wrapper.unmount()
   })
 
+  test('test row and col span 0', () => {
+    const wrapper = mount(VarRow, {
+      slots: {
+        default: () => [0, 12, 12].map((span) => h(VarCol, { span })),
+      },
+    })
+
+    expect(wrapper.findAll('.var-col--none').length).toBe(1)
+    wrapper.unmount()
+  })
+
   test('test row and col offset', () => {
     const wrapper = mount(VarRow, {
       slots: {
@@ -80,7 +91,7 @@ describe('test row and col component props', () => {
     wrapper.unmount()
   })
 
-  test('test row and col offset', () => {
+  test('test row and col responsive', () => {
     const wrapper = mount(VarRow, {
       slots: {
         default: () =>
@@ -103,3 +114,14 @@ describe('test row and col component props', () => {
     wrapper.unmount()
   })
 })
+
+test('test row and col responsive 0', () => {
+  const wrapper = mount(VarRow, {
+    slots: {
+      default: () => [h(VarCol, { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 })],
+    },
+  })
+
+  expect(wrapper.find('.var-col--none')).toBeTruthy()
+  wrapper.unmount()
+})