From e67b06b7a5c366d666d613567a45c2b253bd2157 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Fri, 18 Feb 2022 22:03:23 +0800
Subject: [PATCH] feat(ui/form-details): add component form-details

---
 .../src/form-details/FormDetails.vue          | 23 +++++++++
 .../src/form-details/__tests__/index.spec.js  |  7 +++
 .../src/form-details/formDetails.less         | 48 +++++++++++++++++++
 .../varlet-vue2-ui/src/form-details/index.ts  | 10 ++++
 .../varlet-vue2-ui/src/form-details/props.ts  | 10 ++++
 .../src/utils/mixins/validation.js            |  2 +-
 6 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 packages/varlet-vue2-ui/src/form-details/FormDetails.vue
 create mode 100644 packages/varlet-vue2-ui/src/form-details/__tests__/index.spec.js
 create mode 100644 packages/varlet-vue2-ui/src/form-details/formDetails.less
 create mode 100644 packages/varlet-vue2-ui/src/form-details/index.ts
 create mode 100644 packages/varlet-vue2-ui/src/form-details/props.ts

diff --git a/packages/varlet-vue2-ui/src/form-details/FormDetails.vue b/packages/varlet-vue2-ui/src/form-details/FormDetails.vue
new file mode 100644
index 0000000..1ad4a15
--- /dev/null
+++ b/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>
diff --git a/packages/varlet-vue2-ui/src/form-details/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/form-details/__tests__/index.spec.js
new file mode 100644
index 0000000..1807408
--- /dev/null
+++ b/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()
+})
diff --git a/packages/varlet-vue2-ui/src/form-details/formDetails.less b/packages/varlet-vue2-ui/src/form-details/formDetails.less
new file mode 100644
index 0000000..edf02d0
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/varlet-vue2-ui/src/form-details/index.ts b/packages/varlet-vue2-ui/src/form-details/index.ts
new file mode 100644
index 0000000..371dc93
--- /dev/null
+++ b/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
diff --git a/packages/varlet-vue2-ui/src/form-details/props.ts b/packages/varlet-vue2-ui/src/form-details/props.ts
new file mode 100644
index 0000000..94a151e
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/form-details/props.ts
@@ -0,0 +1,10 @@
+export const props = {
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  maxlengthText: {
+    type: String,
+    default: '',
+  },
+}
diff --git a/packages/varlet-vue2-ui/src/utils/mixins/validation.js b/packages/varlet-vue2-ui/src/utils/mixins/validation.js
index c836080..8046af8 100644
--- a/packages/varlet-vue2-ui/src/utils/mixins/validation.js
+++ b/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
       }