revert: 发布新版本 0.36.1 (2023-05-08)

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.36.1 (2023-05-08)
+
+- 修复 `f-dialog` 样式问题
+- `f-form` 新增 `submit` 和 `validate` 方法
+
 ## 0.36.0 (2023-05-08)
 
 **优化**

packages/fighting-design/form-item/src/form-item.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup name="FFormItem">
   import { Props } from './props'
   import { inject, computed } from 'vue'
-  import { isString } from '../../_utils'
+  import { isString, sizeChange } from '../../_utils'
   import { FORM_PROVIDE_KEY } from '../../form/src/props'
   import type { CSSProperties } from 'vue'
   import type { FormInject } from '../../form'
@@ -30,7 +30,7 @@
   /** 样式列表 */
   const styleList = computed((): CSSProperties => {
     return {
-      '--form-item-label-width': parentInject && parentInject.labelWidth
+      '--form-item-label-width': parentInject && sizeChange(parentInject.labelWidth)
     } as CSSProperties
   })
 

packages/fighting-design/form/src/form.vue

@@ -149,6 +149,9 @@
       childrenCheckResult
     })
   )
+
+  /** 向外界导出一些方法 */
+  defineExpose({ submit: handelSubmit, validate })
 </script>
 
 <template>

packages/fighting-design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fighting-design",
-  "version": "0.36.0",
+  "version": "0.36.1",
   "description": "Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.",
   "keywords": [
     "fighting",

packages/fighting-theme/src/dialog.scss

@@ -2,7 +2,6 @@
   border-radius: 4px;
   min-width: var(--dialog-width, 400px);
   max-width: inherit;
-  background: #fff;
 
   // 头部
   &__header {

start/src/App.vue

@@ -1,3 +1,58 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue'
+  import { FMessage } from 'fighting-design'
+  import type { FormParam } from 'fighting-design'
 
-<template></template>
+  const ruleForm2 = reactive({
+    account: '',
+    password: ''
+  })
+
+  const handelSubmit2 = ({ ok, res, evt }: FormParam): void => {
+    console.log(123)
+    if (!ok) return
+    FMessage.primary(`ok: ${ok} res: ${res} evt: ${evt} 开始提交表单`)
+  }
+
+  const formInstance = ref()
+
+  const text = (evt): void => {
+    formInstance.value.handelSubmit(evt)
+    console.log(formInstance.value.validate())
+  }
+</script>
+
+<template>
+  {{ ruleForm2 }}
+  <f-form
+    ref="formInstance"
+    :model="ruleForm2"
+    :on-submit="handelSubmit2"
+  >
+    <f-form-item
+      name="account"
+      :rules="[
+        { required: true, message: '请输入用户名' },
+        { min: 4, max: 12, message: '请输入 4~12 用户名' },
+        { regExp: /123456/, message: '必须包含 123456' }
+      ]"
+    >
+      <f-input v-model="ruleForm2.account" type="text" placeholder="请输入账号" />
+    </f-form-item>
+
+    <f-form-item
+      label="密码"
+      name="password"
+      :rules="[
+        { required: true, message: '请输入密码' },
+        { min: 6, message: '至少输入六位数密码' }
+      ]"
+    >
+      <f-input v-model="ruleForm2.password" type="password" placeholder="请输入密码" />
+    </f-form-item>
+
+    <f-button type="primary" native-type="submit" block>提交表单</f-button>
+  </f-form>
+
+  <f-button type="primary" block :on-click="text">提交表单2</f-button>
+</template>