feat: 新增 select 和 confirm 组件配置项

FightingDesign · May 23, 2024 · ad3a89e · ad3a89e
1 parent 065477c
commit ad3a89e
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 7 deletions.
diff --git a/packages/fighting-design/confirm-box/src/confirm-box.vue b/packages/fighting-design/confirm-box/src/confirm-box.vue
@@ -4,14 +4,18 @@
   import { FSpace } from '../../space'
   import { FCloseBtn } from '../../close-btn'
   import { ref } from 'vue'
-  import { useRun } from '../../_hooks'
+  import { useRun, useList } from '../../_hooks'
   import { isFunction } from '../../_utils'
 
   defineOptions({ name: 'FConfirmBox' })
 
   const prop = defineProps(Props)
 
   const { run } = useRun()
+  const { styles } = useList(prop, 'confirm-box')
+
+  /** 样式列表 */
+  const style = styles(['zIndex'], ['zIndex'])
 
   /** 是否展示确认框 */
   const isShow = ref(prop.show)
@@ -72,7 +76,7 @@
       @after-enter="handleOpenEnd"
       @after-leave="handleCloseEnd"
     >
-      <div v-if="isShow" class="f-confirm-box">
+      <div v-if="isShow" class="f-confirm-box" :style="style">
         <!-- 遮罩层 -->
         <div class="f-confirm-box__mask" />
 

diff --git a/packages/fighting-design/confirm-box/src/props.ts b/packages/fighting-design/confirm-box/src/props.ts
@@ -2,7 +2,8 @@ import {
   setBooleanProp,
   setFunctionProp,
   setStringNumberProp,
-  setStringProp
+  setStringProp,
+  setNumberProp
 } from '../../_utils'
 import type { ExtractPropTypes } from 'vue'
 import type { HandleMouse, HandleChange } from '../../_interface'
@@ -12,6 +13,8 @@ export const Props = {
   show: setBooleanProp(false),
   /** 标题内容 */
   title: setStringProp(),
+  /** 层级 */
+  zIndex: setNumberProp(),
   /** 提示内容 */
   content: setStringProp(),
   /** 确认按钮文字 */

diff --git a/packages/fighting-design/option/src/option.vue b/packages/fighting-design/option/src/option.vue
@@ -130,10 +130,25 @@
    *
    * @param { Object } evt 事件对象
    */
-  const handleClick = (evt: MouseEvent): void => {
+  const handleClick = async (evt: MouseEvent): Promise<void> => {
     // 如果没有获取到注入的依赖项或者禁用状态 则返回
     if (!parentInject || prop.disabled) return
 
+    /**
+     * 如果存在需要改变值之前的方法，那么久先等待函数执行完毕再执行后面的逻辑
+     *
+     * promise 返回一个布尔类型，为 true 代表值需要改变，为 false 代表取消改变
+     */
+    if (parentInject.onBeforeChange) {
+      const changeRes = await parentInject.onBeforeChange()
+
+      if (!changeRes) {
+        // 点击之后关闭
+        triggerInject && run(triggerInject.close)
+        return
+      }
+    }
+
     // 执行父组件的设置方法
     run(parentInject.setValue, currentValue, currentLabel, evt)
     // 点击之后关闭

diff --git a/packages/fighting-design/select/src/interface.ts b/packages/fighting-design/select/src/interface.ts
@@ -16,6 +16,8 @@ export type SelectChange = (
   evt: MouseEvent
 ) => void
 
+export type SelectBeforeChange = () => Promise<boolean>
+
 /**
  * 提供给子组件注入的依赖项类型接口
  *
@@ -28,6 +30,7 @@ export type SelectChange = (
 export interface SelectProvide {
   setValue: SelectChange
   modelValue: SelectModelValue
+  onBeforeChange: SelectBeforeChange
   filter: boolean
   isFiltering: boolean
   inputValue: string

diff --git a/packages/fighting-design/select/src/props.ts b/packages/fighting-design/select/src/props.ts
@@ -1,7 +1,7 @@
 import { setBooleanProp, setFunctionProp, setStringProp } from '../../_utils'
 import { FIGHTING_SIZE } from '../../_tokens'
 import type { ExtractPropTypes, InjectionKey, PropType } from 'vue'
-import type { SelectProvide, SelectModelValue, SelectChange } from './interface'
+import type { SelectProvide, SelectModelValue, SelectChange, SelectBeforeChange } from './interface'
 import type { FightingSize } from '../../_interface'
 
 export const Props = {
@@ -48,7 +48,9 @@ export const Props = {
    */
   disabled: setBooleanProp(),
   /** 绑定值发生变化时触发的回调 */
-  onChange: setFunctionProp<SelectChange>()
+  onChange: setFunctionProp<SelectChange>(),
+  /** 在值改变之前执行的回调 */
+  onBeforeChange: setFunctionProp<SelectBeforeChange>()
 } as const
 
 /** select 组件 props 类型 */

diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue
@@ -120,6 +120,7 @@
       setValue,
       inputValue,
       isFiltering,
+      onBeforeChange: prop.onBeforeChange,
       modelValue: toRef(prop, 'modelValue'),
       filter: toRef(prop, 'filter')
     })

diff --git a/packages/fighting-theme/src/confirm-box.scss b/packages/fighting-theme/src/confirm-box.scss
@@ -1,5 +1,5 @@
 .f-confirm-box {
-  z-index: 1000;
+  z-index: var(--confirm-box-z-index, 1000);
   display: flex;
   justify-content: center;
   align-items: center;