fix(form): [form] x-design theme refresh

opentiny · Sep 10, 2024 · fe6748a · fe6748a
1 parent 44e2779
commit fe6748a
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 26 deletions.
diff --git a/examples/sites/demos/pc/app/form/error-slot-composition-api.vue b/examples/sites/demos/pc/app/form/error-slot-composition-api.vue
@@ -4,18 +4,21 @@
       <tiny-form-item label="姓名" prop="name">
         <tiny-input v-model="createData.name"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="年龄" prop="age">
-        <tiny-input v-model="createData.age"></tiny-input>
-        <template #error>
-          <span>错误提示内容插槽</span>
-        </template>
-      </tiny-form-item>
       <tiny-form-item label="昵称" prop="nickname" validate-type="text">
         <tiny-input v-model="createData.nickname"></tiny-input>
         <template #error="message">
           <span class="error-slot">{{ message }}</span>
         </template>
       </tiny-form-item>
+      <tiny-form-item label="年龄" prop="age">
+        <tiny-input v-model="createData.age"></tiny-input>
+        <template #error>
+          <div class="custom-error">
+            <tiny-icon-error></tiny-icon-error>
+            <span>错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。</span>
+          </div>
+        </template>
+      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
       </tiny-form-item>
@@ -26,6 +29,9 @@
 <script setup>
 import { ref } from 'vue'
 import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { iconError } from '@opentiny/vue-icon'
+
+const TinyIconError = iconError()
 
 const createData = ref({
   name: '',
@@ -60,3 +66,17 @@ function validateField() {
   color: #ffd0a6;
 }
 </style>
+
+<style lang="less">
+.custom-error {
+  padding: 4px 0;
+  display: flex;
+  .tiny-svg {
+    fill: var(--ti-tooltip-validate-icon-color);
+    margin-right: 8px;
+    font-size: 16px;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/form/error-slot.spec.ts b/examples/sites/demos/pc/app/form/error-slot.spec.ts
@@ -10,6 +10,8 @@ test('错误提示插槽', async ({ page }) => {
 
   await validBtn.click()
   await expect(getTooltipByText('必填')).toBeVisible()
-  await expect(getTooltipByText('错误提示内容插槽')).toBeVisible()
+  await expect(
+    getTooltipByText('错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。')
+  ).toBeVisible()
   await expect(page.locator('.error-slot')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/form/error-slot.vue b/examples/sites/demos/pc/app/form/error-slot.vue
@@ -4,18 +4,21 @@
       <tiny-form-item label="姓名" prop="name">
         <tiny-input v-model="createData.name"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="年龄" prop="age">
-        <tiny-input v-model="createData.age"></tiny-input>
-        <template #error>
-          <span>错误提示内容插槽</span>
-        </template>
-      </tiny-form-item>
       <tiny-form-item label="昵称" prop="nickname" validate-type="text">
         <tiny-input v-model="createData.nickname"></tiny-input>
         <template #error="message">
           <span class="error-slot">{{ message }}</span>
         </template>
       </tiny-form-item>
+      <tiny-form-item label="年龄" prop="age">
+        <tiny-input v-model="createData.age"></tiny-input>
+        <template #error>
+          <div class="custom-error">
+            <tiny-icon-error></tiny-icon-error>
+            <span>错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。</span>
+          </div>
+        </template>
+      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
       </tiny-form-item>
@@ -25,13 +28,15 @@
 
 <script>
 import { Form, FormItem, Input, Button } from '@opentiny/vue'
+import { iconError } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
-    TinyButton: Button
+    TinyButton: Button,
+    TinyIconError: iconError()
   },
   data() {
     return {
@@ -42,7 +47,11 @@ export default {
       },
       rules: {
         name: [
-          { required: true, message: '必填', trigger: 'blur' },
+          {
+            required: true,
+            message: '必填',
+            trigger: 'blur'
+          },
           { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
         ],
         age: { required: true },
@@ -69,3 +78,17 @@ export default {
   color: #ffd0a6;
 }
 </style>
+
+<style lang="less">
+.custom-error {
+  padding: 4px 0;
+  display: flex;
+  .tiny-svg {
+    fill: var(--ti-tooltip-validate-icon-color);
+    margin-right: 8px;
+    font-size: 16px;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/form/slot-label.vue b/examples/sites/demos/pc/app/form/slot-label.vue
@@ -10,7 +10,9 @@
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
       <tiny-form-item prop="url">
-        <template #label> URL </template>
+        <template #label>
+          <div class="custom-label">超过两行文字，省略显示</div>
+        </template>
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
       <tiny-form-item prop="radio">
@@ -80,4 +82,13 @@ export default {
 .demo-form {
   width: 380px;
 }
+.custom-label {
+  display: -webkit-box;
+  width: 100%;
+  -webkit-line-clamp: 2;
+  line-height: 1.2;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  white-space: wrap;
+}
 </style>
diff --git a/packages/theme/src/form-item/smb-theme.js b/packages/theme/src/form-item/smb-theme.js
@@ -1,13 +1,13 @@
 export const tinyFormItemSmbTheme = {
   'ti-form-item-margin-bottom-default': 'var(--ti-common-space-6x)',
-  'ti-form-item-margin-bottom-mini': 'var(--ti-common-space-3x)',
-  'ti-form-item-margin-bottom-small': 'var(--ti-common-space-5x)',
+  'ti-form-item-margin-bottom-mini': 'var(--ti-common-space-5x)',
+  'ti-form-item-margin-bottom-small': 'var(--ti-common-space-6x)',
   'ti-form-item-margin-bottom-medium': 'var(--ti-common-space-6x)',
-  'ti-form-item-input-mini-height': 'var(--ti-common-space-5x)',
-  'ti-form-item-input-small-height': 'var(--ti-common-space-6x)',
-  'ti-form-item-input-medium-height': 'var(--ti-common-space-8x)',
-  'ti-form-item-mini-line-height': 'var(--ti-common-space-5x)',
-  'ti-form-item-small-line-height': 'var(--ti-common-space-6x)',
-  'ti-form-item-medium-line-height': 'var(--ti-common-space-8x)',
+  'ti-form-item-input-mini-height': 'var(--ti-common-size-6x)',
+  'ti-form-item-input-small-height': '28px',
+  'ti-form-item-input-medium-height': 'var(--ti-common-size-10x)',
+  'ti-form-item-mini-line-height': '24px',
+  'ti-form-item-small-line-height': '28px',
+  'ti-form-item-medium-line-height': 'var(--ti-common-size-10x)',
   'ti-form-item-label-padding-right': 'var(--ti-common-space-6x)'
 }
diff --git a/packages/theme/src/form/index.less b/packages/theme/src/form/index.less
@@ -126,6 +126,7 @@
       .tooltip-validate-icon {
         fill: var(--ti-tooltip-validate-icon-color);
         margin-right: 8px;
+        font-size: 16px;
       }
 
       &[x-placement^='top'] .popper__arrow {

diff --git a/packages/theme/src/form/vars.less b/packages/theme/src/form/vars.less
@@ -12,9 +12,9 @@
 
 .component-css-vars-form() {
   // 表单校验水平内边距
-  --ti-form-valid-padding-horizontal: calc(var(--ti-common-space-2x, 8px) + 2px);
+  --ti-form-valid-padding-horizontal: var(--ti-common-space-4x, 16px);
   // 表单校验垂直内边距
-  --ti-form-valid-padding-vertical: calc(var(--ti-common-space-2x, 8px) + 2px);
+  --ti-form-valid-padding-vertical: var(--ti-common-space-3x, 12px);
   // 行内表单输入框右边距(hide)
   --ti-form-item-margin-right: calc(var(--ti-common-space-2x, 8px) + 2px);