fix: add default width

packages/varlet-ui/src/app-bar/appBar.less

@@ -17,6 +17,7 @@
 .var-app-bar {
   position: relative;
   display: flex;
+  width: 100%;
   justify-content: center;
   align-items: center;
   height: var(--app-bar-height);

packages/varlet-ui/src/card/card.less

@@ -71,6 +71,7 @@
 .var-card {
   border-radius: var(--card-border-radius);
   overflow: hidden;
+  width: 100%;
 
   &__floater {
     display: flex;

packages/varlet-ui/src/cell/cell.less

@@ -29,6 +29,7 @@
   display: flex;
   min-height: var(--cell-min-height);
   outline: none;
+  width: 100%;
   padding: var(--cell-padding);
   position: relative;
   box-sizing: border-box;

packages/varlet-ui/src/collapse/Collapse.vue

@@ -136,5 +136,6 @@ export default defineComponent({
 
 .var-collapse {
   position: relative;
+  width: 100%;
 }
 </style>

packages/varlet-ui/src/date-picker/date-picker.less

@@ -79,6 +79,7 @@
   border-radius: var(--date-picker-border-radius);
   contain: layout style;
   display: flex;
+  width: 100%;
   flex-direction: column;
   font-size: var(--date-picker-font-size);
   position: relative;

packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap

@@ -258,7 +258,7 @@ exports[`test form with radio 4`] = `
 
 exports[`test form with rate 1`] = `
 "<div class=\\"var-form\\">
-  <div class=\\"var-rate__warp\\">
+  <div class=\\"var-rate__wrap\\">
     <div class=\\"var-rate\\">
       <div style=\\"border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline var-rate__content-icon\\" style=\\"transition: transform 0ms;\\" var-rate-cover=\\"\\"></i></div>
       <div style=\\"border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline var-rate__content-icon\\" style=\\"transition: transform 0ms;\\" var-rate-cover=\\"\\"></i></div>
@@ -275,7 +275,7 @@ exports[`test form with rate 1`] = `
 
 exports[`test form with rate 2`] = `
 "<div class=\\"var-form\\">
-  <div class=\\"var-rate__warp\\">
+  <div class=\\"var-rate__wrap\\">
     <div class=\\"var-rate\\">
       <div style=\\"border-radius: 50%;\\" class=\\"var-rate__content var-rate--error\\"><i class=\\"var-icon var-icon--set var-icon-star-outline var-rate__content-icon\\" style=\\"transition: transform 0ms;\\" var-rate-cover=\\"\\"></i></div>
       <div style=\\"border-radius: 50%;\\" class=\\"var-rate__content var-rate--error\\"><i class=\\"var-icon var-icon--set var-icon-star-outline var-rate__content-icon\\" style=\\"transition: transform 0ms;\\" var-rate-cover=\\"\\"></i></div>
@@ -295,7 +295,7 @@ exports[`test form with rate 2`] = `
 
 exports[`test form with rate 3`] = `
 "<div class=\\"var-form\\">
-  <div class=\\"var-rate__warp\\">
+  <div class=\\"var-rate__wrap\\">
     <div class=\\"var-rate\\">
       <div style=\\"border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline var-rate__content-icon\\" style=\\"transition: transform 0ms;\\" var-rate-cover=\\"\\"></i></div>
       <div style=\\"border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline var-rate__content-icon\\" style=\\"transition: transform 0ms;\\" var-rate-cover=\\"\\"></i></div>

packages/varlet-ui/src/pagination/pagination.less

@@ -51,6 +51,7 @@
   display: flex;
   align-items: center;
   list-style: none;
+  width: 100%;
   margin: 0;
   font-size: var(--pagination-font-size);
   padding: 0;

packages/varlet-ui/src/pull-refresh/pullRefresh.less

@@ -16,6 +16,7 @@
   overflow: hidden;
   position: relative;
   user-select: none;
+  width: 100%;
 
   &__control {
     display: flex;

packages/varlet-ui/src/rate/Rate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="n('warp')">
+  <div :class="n('wrap')">
     <div :class="n()">
       <div
         :key="val"

packages/varlet-ui/src/rate/rate.less

@@ -14,6 +14,10 @@
   display: flex;
   transform: translateX(calc(-1 * var(--rate-action-padding)));
 
+  &__wrap {
+    width: 100%;
+  }
+
   &__content {
     padding: var(--rate-action-padding);
     box-sizing: unset;

packages/varlet-ui/src/slider/slider.less

@@ -18,6 +18,7 @@
 
 .var-slider {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  width: 100%;
 
   &__block {
     display: flex;

packages/varlet-ui/src/snackbar/__tests__/__snapshots__/component.spec.js.snap

@@ -3,61 +3,61 @@
 exports[`test snackbar example 1`] = `
 "<div class=\\"app-type\\">组件调用</div>
 <div class=\\"var-space var--box\\" style=\\"flex-direction: column; justify-content: start; flex-wrap: wrap;\\">
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">基本使用</div>
     </button></div>
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">垂直排列</div>
     </button></div>
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">底部显示</div>
     </button></div>
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">显示时长</div>
     </button></div>
-  <div style=\\"margin: 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
+  <div style=\\"margin: 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">禁止穿透点击</div>
     </button></div>
 </div>
 <div class=\\"app-type\\">函数调用</div>
 <div class=\\"var-space var--box\\" style=\\"flex-direction: column; justify-content: start; flex-wrap: wrap;\\">
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">基本使用</div>
     </button></div>
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">显示时长</div>
     </button></div>
-  <div style=\\"margin: 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
+  <div style=\\"margin: 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">底部显示</div>
     </button></div>
 </div>
 <div class=\\"app-type\\">Snackbar 类型</div>
 <div class=\\"var-space var--box\\" style=\\"flex-direction: column; justify-content: start; flex-wrap: wrap;\\">
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--success var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--success var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">成功</div>
     </button></div>
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--warning var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">警告</div>
     </button></div>
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--info var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--info var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">消息</div>
     </button></div>
-  <div style=\\"margin: 0px 0px 30.72px 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--danger var-elevation--2\\">
+  <div style=\\"margin: 0px 0px 30.72px 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--danger var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">错误</div>
     </button></div>
-  <div style=\\"margin: 0px;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
+  <div style=\\"margin: 0px; width: 100%;\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
       <!--v-if-->
       <div class=\\"var-button__content\\">加载</div>
     </button></div>

packages/varlet-ui/src/space/Space.tsx

@@ -83,7 +83,7 @@ export default defineComponent({
           margin = `0 0 ${y}px 0`
         }
 
-        return <div style={{ margin }}>{child}</div>
+        return <div style={{ margin, width: '100%' }}>{child}</div>
       })
 
       return (

packages/varlet-ui/src/steps/Steps.vue

@@ -50,6 +50,7 @@ export default defineComponent({
 @import '../styles/common';
 
 .var-steps {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   overflow: hidden;

packages/varlet-ui/src/swipe/swipe.less

@@ -12,6 +12,7 @@
   position: relative;
   overflow: hidden;
   user-select: none;
+  width: 100%;
 
   &__track {
     width: 100%;

packages/varlet-ui/src/time-picker/timePicker.less

@@ -91,6 +91,7 @@
   border-radius: var(--time-picker-border-radius);
   contain: layout style;
   display: flex;
+  width: 100%;
   flex-direction: column;
   font-size: var(--time-picker-font-size);
   position: relative;

packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap

@@ -275,10 +275,10 @@ exports[`test uploader example 1`] = `
 </div>
 <div class=\\"app-type\\">自定义渲染文件列表</div>
 <div class=\\"var-space var--box\\" style=\\"flex-direction: row; justify-content: start; flex-wrap: wrap; margin: -4px 0px;\\">
-  <div style=\\"margin: 4px 12px 4px 0px;\\"><img class=\\"custom-uploader-file\\" src=\\"https://varlet-varletjs.vercel.app/cat.jpg\\"></div>
-  <div style=\\"margin: 4px 12px 4px 0px;\\"><img class=\\"custom-uploader-file\\" src=\\"https://varlet-varletjs.vercel.app/cat.jpg\\"></div>
-  <div style=\\"margin: 4px 12px 4px 0px;\\"><img class=\\"custom-uploader-file\\" src=\\"https://varlet-varletjs.vercel.app/cat.jpg\\"></div>
-  <div style=\\"margin: 4px 0px;\\">
+  <div style=\\"margin: 4px 12px 4px 0px; width: 100%;\\"><img class=\\"custom-uploader-file\\" src=\\"https://varlet-varletjs.vercel.app/cat.jpg\\"></div>
+  <div style=\\"margin: 4px 12px 4px 0px; width: 100%;\\"><img class=\\"custom-uploader-file\\" src=\\"https://varlet-varletjs.vercel.app/cat.jpg\\"></div>
+  <div style=\\"margin: 4px 12px 4px 0px; width: 100%;\\"><img class=\\"custom-uploader-file\\" src=\\"https://varlet-varletjs.vercel.app/cat.jpg\\"></div>
+  <div style=\\"margin: 4px 0px; width: 100%;\\">
     <div class=\\"var-uploader var--box\\">
       <div class=\\"var-uploader__file-list\\">
         <div class=\\"\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round\\">