feat: splitter增加updateCollapsed方法 feat: form新增hideRequiredMark参数

Author: fengjiancai

packages/devui-vue/devui/form/src/components/form-label/form-label.scss

@@ -46,6 +46,11 @@
     margin-right: 8px;
     margin-left: -12px;
   }
+  &-hide {
+    &::before {
+      display: none;
+    }
+  }
 }
 
 .#{$devui-prefix}-form__label-help {

packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts

@@ -2,8 +2,10 @@ import { computed, inject } from 'vue';
 import { FormItemContext, FORM_ITEM_TOKEN, LabelData, LABEL_DATA } from '../form-item/form-item-types';
 import { UseFormLabel } from './form-label-types';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import { FORM_TOKEN, FormContext } from '../../form-types';
 
 export function useFormLabel(): UseFormLabel {
+  const formContext = inject(FORM_TOKEN) as FormContext;
   const formItemContext = inject(FORM_ITEM_TOKEN) as FormItemContext;
   const labelData = inject(LABEL_DATA) as LabelData;
   const ns = useNamespace('form');
@@ -18,6 +20,7 @@ export function useFormLabel(): UseFormLabel {
   const labelInnerClasses = computed(() => ({
     [`${ns.e('label-span')}`]: true,
     [`${ns.em('label', 'required')}`]: formItemContext.isRequired,
+    [`${ns.em('label', 'required-hide')}`]: formItemContext.isRequired && formContext.hideRequiredMark,
   }));
 
   return { labelClasses, labelInnerClasses };

packages/devui-vue/devui/form/src/form-types.ts

@@ -64,6 +64,10 @@ export const formProps = {
   size: {
     type: String as PropType<FormSize>,
   },
+  hideRequiredMark: {
+    type: Boolean,
+    default: false,
+  }
 } as const;
 
 export interface UseFieldCollection {

packages/devui-vue/devui/splitter/src/components/splitter-pane.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, inject, onMounted, onUpdated } from 'vue';
+import { defineComponent, ref, watch, inject, onMounted, onUpdated, getCurrentInstance } from 'vue';
 import { addClass, hasClass, removeClass } from '../../../shared/utils/class';
 import { setStyle } from '../../../shared/utils/set-style';
 import type { SplitterStore } from '../splitter-store';
@@ -15,6 +15,7 @@ export default defineComponent({
     const store = inject<SplitterStore>('splitterStore');
     const domRef = ref<null | HTMLElement>();
     const orderRef = ref();
+    const currentVnode = getCurrentInstance()?.vnode;
     const ns = useNamespace('splitter');
     watch([orderRef, domRef], ([order, ele]) => {
       if (!ele) {
@@ -115,11 +116,20 @@ export default defineComponent({
       }
     };
 
+    const updateCollapsed = (collapsed?: boolean) => {
+      if (typeof collapsed === 'boolean') {
+        currentVnode!.component!.props.collapsed = collapsed;
+        return;
+      }
+      currentVnode!.component!.props.collapsed = !currentVnode?.component?.props.collapsed;
+    }
+
     // 暴露给外部使用
     expose({
       order: orderRef,
       getPaneSize,
       toggleNearPaneFlexGrow,
+      updateCollapsed,
     });
 
     return () => {

packages/devui-vue/docs/components/form/index.md

@@ -663,6 +663,7 @@ export default defineComponent({
 | show-feedback           | `boolean`                   | false              | 可选，是否展示校验结果反馈图标                                     |                       |
 | disabled                | `boolean`                   | false              | 可选，是否禁用该表单内的所有组件。                                 |                       |
 | size                    | [FormSize](#formsize)       | --                 | 可选，用于控制该表单内组件的尺寸                                   |                       |
+| hide-required-mark      | `boolean`                   | false              | 可选，是否隐藏所有表单项的必选标记                                   |                       |
 
 ### Form 事件
 

packages/devui-vue/docs/components/splitter/index.md

@@ -238,6 +238,7 @@ export default defineComponent({
 ```vue
 <template>
   <section>
+    <d-button variant="solid" @click="handleOperation" style="margin-bottom: 10px">{{buttonDesc}}</d-button>
     <d-splitter class="splitter-border" style="height: 300px">
       <template v-slot:DSplitterPane>
         <d-splitter-pane size="30%" minSize="20%" :sizeChange="sizeChange">
@@ -246,7 +247,7 @@ export default defineComponent({
             <div>width: 30%, min-width: 20%</div>
           </div>
         </d-splitter-pane>
-        <d-splitter-pane minSize="15%" :collapsible="true" collapseDirection="before">
+        <d-splitter-pane minSize="15%" :collapsible="true" collapseDirection="before" ref="splitterPane">
           <div class="pane-content">
             <h2>Center</h2>
             <div>Specify the folding and retracting direction to fold forward</div>
@@ -269,12 +270,24 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   name: 'DSplitterDemoDirection',
   setup() {
+    const buttonDesc = ref('收起');
+    const splitterPane = ref();
+    const collapsed = ref(false);
     const sizeChange = (size) => {
       console.log(size);
     };
 
+    const handleOperation = () => {
+      splitterPane.value.updateCollapsed();
+      collapsed.value = !collapsed.value;
+      buttonDesc.value = collapsed.value ? '展开' : '收起';
+    };
+
     return {
       sizeChange,
+      buttonDesc,
+      splitterPane,
+      handleOperation,
     };
   },
 });
@@ -321,6 +334,12 @@ export default defineComponent({
 | size-change      | `(size: string) => void`        | 大小变动时，返回改变后的值,像素值或者百分比 | [基本用法](#基本用法) |
 | collapsed-change | `(collapsed: boolean>) => void` | 折叠和展开时，返回当前 pane 是否折叠        | [基本用法](#基本用法) |
 
+### SplitterPane 方法
+
+| 方法名             | 类型                | 描述                           | 跳转 Demo             |
+| :--------------- | :--------------------| :---------------------------- | :--------------------- |
+| updateCollapsed   | `(collapsed?: boolean) => void`    | 更新面板的折叠状态，传入参数可指定面板的折叠状态    | [指定折叠收起方向](#指定折叠收起方向) |
+
 ### Splitter 类型定义
 
 #### SplitterOrientation