feat(ui): add component radio radio-group form

packages/varlet-vue2-cli/site/mobile/components/AppType.vue

@@ -14,7 +14,7 @@ export default {
 .app-type {
   width: 100%;
   padding: 15px 0;
-  color: #888;
+  color: var(--site-config-color-sub-text);
   font-size: 14px;
 }
 </style>

packages/varlet-vue2-ui/src/cell/Cell.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="var-cell" :class="[border ? 'var-cell--border' : null]">
-    <div class="var-cell__icon" :class="[iconClass ? iconClass : null]" v-if="$slots.icon || icon">
+    <div class="var-cell__icon" :class="[iconClass ? iconClass : null]" v-if="hasSlots('icon') || icon">
       <slot name="icon">
         <var-icon class="var--flex" :name="icon" />
       </slot>
@@ -9,29 +9,30 @@
       <div class="var-cell__title" :class="[titleClass ? titleClass : null]">
         <slot>{{ title }}</slot>
       </div>
-      <div class="var-cell__desc" :class="[descClass ? descClass : null]" v-if="hasSlots(desc) || desc">
+      <div class="var-cell__desc" :class="[descClass ? descClass : null]" v-if="hasSlots('desc') || desc">
         <slot name="desc">
           {{ desc }}
         </slot>
       </div>
     </div>
-    <div class="var-cell__extra" :class="[extraClass ? extraClass : null]" v-if="hasSlots(extra)">
+    <div class="var-cell__extra" :class="[extraClass ? extraClass : null]" v-if="hasSlots('extra')">
       <slot name="extra" />
     </div>
   </div>
 </template>
 
 <script>
+import VarIcon from '../icon'
 import { defineComponent } from '../utils/create'
 import { props } from './props'
-import VarIcon from '../icon'
 
 export default defineComponent({
   name: 'VarCell',
 
   components: {
     VarIcon,
   },
+
   props,
 })
 </script>

packages/varlet-vue2-ui/src/cell/__test__/__snapshots__/index.spec.js.snap

@@ -1,91 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test cell example 1`] = `
-"<div>
-  <div class=\\"app-type\\">基本使用</div>
-  <div class=\\"var-cell\\">
-    <!--v-if-->
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <!--v-if-->
+"<div class=\\"var-cell-outer\\">
+  <div>
+    <div class=\\"app-type\\">基本使用</div>
+    <div class=\\"var-cell\\">
+      <!---->
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\"> 这是单元格 </div>
+        <!---->
+      </div>
+      <!---->
     </div>
-    <!--v-if-->
-  </div>
-  <div class=\\"var-cell\\">
-    <!--v-if-->
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <!--v-if-->
+    <div class=\\"var-cell\\">
+      <!---->
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\"> 这是单元格 </div>
+        <!---->
+      </div>
+      <!---->
     </div>
-    <!--v-if-->
   </div>
-</div>
-<div>
-  <div class=\\"app-type\\">显示图标</div>
-  <div class=\\"var-cell\\">
-    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <!--v-if-->
+  <div>
+    <div class=\\"app-type\\">显示图标</div>
+    <div class=\\"var-cell\\">
+      <div class=\\"var-cell__icon\\"><i class=\\"var-icon var--flex var-icon--set var-icon-fire\\" style=\\"transition: transform 0ms;\\"></i></div>
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\">这是单元格</div>
+        <!---->
+      </div>
+      <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
     </div>
-    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
-  </div>
-  <div class=\\"var-cell\\">
-    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <!--v-if-->
+    <div class=\\"var-cell\\">
+      <div class=\\"var-cell__icon\\"><i class=\\"var-icon var--flex var-icon--set var-icon-fire\\" style=\\"transition: transform 0ms;\\"></i></div>
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\">这是单元格</div>
+        <!---->
+      </div>
+      <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
     </div>
-    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
   </div>
-</div>
-<div>
-  <div class=\\"app-type\\">显示描述</div>
-  <div class=\\"var-cell\\">
-    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <div class=\\"var-cell__desc\\">描述</div>
+  <div>
+    <div class=\\"app-type\\">显示描述</div>
+    <div class=\\"var-cell\\">
+      <div class=\\"var-cell__icon\\"><i class=\\"var-icon var--flex var-icon--set var-icon-fire\\" style=\\"transition: transform 0ms;\\"></i></div>
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\">这是单元格</div>
+        <div class=\\"var-cell__desc\\">
+          描述
+        </div>
+      </div>
+      <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
     </div>
-    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
-  </div>
-  <div class=\\"var-cell\\">
-    <!--v-if-->
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <div class=\\"var-cell__desc\\">描述</div>
+    <div class=\\"var-cell\\">
+      <!---->
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\">这是单元格</div>
+        <div class=\\"var-cell__desc\\">
+          描述
+        </div>
+      </div>
+      <!---->
     </div>
-    <!--v-if-->
   </div>
-</div>
-<div>
-  <div class=\\"app-type\\">显示边框</div>
-  <div class=\\"var-cell var-cell--border\\">
-    <!--v-if-->
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <!--v-if-->
+  <div>
+    <div class=\\"app-type\\">显示边框</div>
+    <div class=\\"var-cell var-cell--border\\">
+      <!---->
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\"> 这是单元格 </div>
+        <!---->
+      </div>
+      <!---->
     </div>
-    <!--v-if-->
-  </div>
-  <div class=\\"var-cell var-cell--border\\">
-    <!--v-if-->
-    <div class=\\"var-cell__content\\">
-      <div class=\\"var-cell__title\\">这是单元格</div>
-      <!--v-if-->
+    <div class=\\"var-cell var-cell--border\\">
+      <!---->
+      <div class=\\"var-cell__content\\">
+        <div class=\\"var-cell__title\\"> 这是单元格 </div>
+        <!---->
+      </div>
+      <!---->
     </div>
-    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`test cell props 1`] = `
 "<div class=\\"var-cell var-cell--border\\">
-  <div class=\\"var-cell__icon test-icon-class\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
+  <div class=\\"var-cell__icon test-icon-class\\"><i class=\\"var-icon var--flex var-icon--set var-icon-fire\\" style=\\"transition: transform 0ms;\\"></i></div>
   <div class=\\"var-cell__content\\">
     <div class=\\"var-cell__title test-title-class\\">This is Cell</div>
-    <div class=\\"var-cell__desc test-desc-class\\">This is desc</div>
+    <div class=\\"var-cell__desc test-desc-class\\">
+      This is desc
+    </div>
+  </div>
+  <div class=\\"var-cell__extra test-extra-class\\">
+    <div>text</div>
   </div>
-  <div class=\\"var-cell__extra test-extra-class\\">text</div>
 </div>"
 `;

packages/varlet-vue2-ui/src/cell/__test__/index.spec.js

@@ -28,7 +28,7 @@ test('test cell props', async () => {
       icon: 'fire',
     },
     scopedSlots: {
-      extra: 'text',
+      extra: '<div>text</div>',
     },
   })
   expect(wrapper.find('.var-icon').exists()).toBe(true)

packages/varlet-vue2-ui/src/form-details/formDetails.less

@@ -13,7 +13,7 @@
 }
 
 .var {
-  &-form-details-enter-from,
+  &-form-details-enter,
   &-form-details-leave-to {
     opacity: 0;
     margin-top: 2px !important;

packages/varlet-vue2-ui/src/form/Form.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="var-form">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { props } from './props'
+import { defineComponent } from '../utils/create'
+import { ValidationMixin } from '../utils/mixins/validation'
+import { createParentMixin } from '../utils/mixins/relation'
+
+export default defineComponent({
+  name: 'VarForm',
+
+  mixins: [ValidationMixin, createParentMixin('form', { childrenKey: 'formItems' })],
+
+  props,
+
+  methods: {
+    // expose
+    async validate() {
+      const res = await Promise.all(this.formItems.map(({ validate }) => validate()))
+
+      return res.every((r) => r === true)
+    },
+
+    // expose
+    reset() {
+      this.formItems.forEach(({ reset }) => reset())
+    },
+
+    // expose
+    resetValidation() {
+      this.formItems.forEach(({ resetValidation }) => resetValidation())
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+</style>