feat(ui/form-details): add component form-details

packages/varlet-vue2-ui/src/form-details/FormDetails.vue

@@ -0,0 +1,23 @@
+<template>
+  <transition name="var-form-details">
+    <div class="var-form-details" v-if="errorMessage || maxlengthText">
+      <div class="var-form-details__message">{{ errorMessage }}</div>
+      <div class="var-form-details__length">{{ maxlengthText }}</div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { props } from './props'
+import { defineComponent } from '../utils/create'
+
+export default defineComponent({
+  name: 'VarFormDetails',
+  props,
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './formDetails';
+</style>

packages/varlet-vue2-ui/src/form-details/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import FormDetails from '..'
+
+test('test form details plugin', () => {
+  const app = Vue.use(FormDetails)
+  expect(app.component(FormDetails.name)).toBeTruthy()
+})

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

@@ -0,0 +1,48 @@
+@form-details-error-color: var(--color-danger);
+@form-details-length-color: #888;
+@form-details-margin-top: 6px;
+@form-details-font-size: 12px;
+@form-details-message-margin-right: 4px;
+
+:root {
+  --form-details-error-color: @form-details-error-color;
+  --form-details-length-color: @form-details-length-color;
+  --form-details-margin-top: @form-details-margin-top;
+  --form-details-font-size: @form-details-font-size;
+  --form-details-message-margin-right: @form-details-message-margin-right;
+}
+
+.var {
+  &-form-details-enter-from,
+  &-form-details-leave-to {
+    opacity: 0;
+    margin-top: 2px !important;
+  }
+
+  &-form-details-enter-active,
+  &-form-details-leave-active {
+    transition: 0.2s all var(--cubic-bezier);
+  }
+}
+
+.var-form-details {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--form-details-font-size);
+  margin-top: var(--form-details-margin-top);
+
+  &__message {
+    flex-grow: 1;
+    color: var(--form-details-error-color);
+    margin-right: var(--form-details-message-margin-right);
+    user-select: none;
+    text-align: left;
+  }
+
+  &__length {
+    flex-shrink: 0;
+    color: var(--form-details-length-color);
+    user-select: none;
+    text-align: right;
+  }
+}

packages/varlet-vue2-ui/src/form-details/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import FormDetails from './FormDetails.vue'
+
+FormDetails.install = function (app: App) {
+  app.component(FormDetails.name, FormDetails)
+}
+
+export const _FormDetailsComponent = FormDetails
+
+export default FormDetails

packages/varlet-vue2-ui/src/form-details/props.ts

@@ -0,0 +1,10 @@
+export const props = {
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  maxlengthText: {
+    type: String,
+    default: '',
+  },
+}

packages/varlet-vue2-ui/src/utils/mixins/validation.js

@@ -6,7 +6,7 @@ export const ValidationMixin = {
   }),
 
   methods: {
-    async validateRules(rules, value, apis) {
+    async validate(rules, value, apis) {
       if (!isArray(rules) || !rules.length) {
         return true
       }