plain-design 1.0.0-beta.94 → 1.0.0-beta.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.94",
+  "version": "1.0.0-beta.96",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Alert/alert.scss

@@ -37,6 +37,7 @@
     padding-right: $close-width;
 
     .alert-close {
+      border-radius: inherit;
       position: absolute;
       top: 0;
       right: 0;
@@ -112,6 +113,7 @@
 
   &.alert-theme-lite {
     @include statusMixin(alert) {
+      border:solid 1px $color-3;
       background-color: $color-light-2;
       color: $color-6;
       .alert-close {

package/src/packages/components/Alert/index.tsx

@@ -17,7 +17,7 @@ export const Alert = designComponent({
     theme: { type: String, default: 'lite' },                     // 主题，lite轻色，deep深色
     noClose: { type: Boolean },                                   // 禁用关闭
     icon: { type: String as PropType<string | null | undefined>, default: undefined },     // 显示的图标
-    message: { type: String },                                    // desc内容消息
+    description: { type: String },                                    // desc内容消息
   },
   slots: ['desc', 'close', 'default'],
   setup({ props, slots, attrs }) {
@@ -46,7 +46,7 @@ export const Alert = designComponent({
       `alert-align-${props.align}`,
       {
         'alert-has-icon': !!icon.value,
-        'alert-has-desc': !!props.message || slots.desc.isExist(),
+        'alert-has-desc': !!props.description || slots.desc.isExist(),
         'alert-has-close': !props.noClose,
       }
     ]);
@@ -76,9 +76,9 @@ export const Alert = designComponent({
                   {slots.default(props.label)}
                 </div>
               )}
-              {(props.message || slots.desc.isExist()) && (
+              {(props.description || slots.desc.isExist()) && (
                 <div className="alert-desc">
-                  {slots.desc(props.message)}
+                  {slots.desc(props.description)}
                 </div>
               )}
             </div>

package/src/packages/components/Button/button.scss

@@ -111,7 +111,7 @@
 
   &.button-mode-stroke {
     @include statusMixin(button) {
-      background-color: transparent;
+      background-color: plv(bg-2);
       border-color: plv(secondary-light-3);
       color: plv(text-2);
 

package/src/packages/components/Form/form.scss

@@ -49,6 +49,12 @@
     .form-item-content {
       display: inline-block;
       box-sizing: border-box;
+
+      .form-item-content-inner {
+        & > .#{componentName(form-item)}:first-child {
+          margin-top: 0 !important;
+        }
+      }
     }
 
     &.form-item-label-align-left {

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -3,6 +3,8 @@ import {createEnum} from "plain-utils/utils/createEnum";
 import {unit} from "plain-utils/string/unit";
 import {removeUnit} from "plain-utils/string/removeUnit";
 import {InputMode, ThemeSize, tStyleComputed} from "../../../uses/useStyle";
+import ApplicationConfigurationProvider from "../../ApplicationConfigurationProvider";
+import {PlainObject} from "plain-utils/utils/event";
 
 /**
  * 表单的文本以及内容对齐方式
@@ -59,6 +61,7 @@ export type tFormLayoutPropsType = ExtractPropTypes<typeof FormLayoutPropsOption
  * @date    2022.9.4 22:46
  */
 export const FormItemLayoutPropsOption = {
+  hideLabel: { type: Boolean },                                                       // 隐藏label
   labelWidth: { type: [String, Number] as PropType<string | number> },                // 显示文本宽度
   column: { type: [String, Number] as PropType<string | number>, default: 1 },        // 多列表单的列数
   block: { type: Boolean as PropType<boolean> },                                      // 占用一行
@@ -94,8 +97,12 @@ export const DefaultFormLabelWidth = (() => {
 export const useFormLayout = (() => {
 
   const FORM_LAYOUT_PROVIDER = '@@FORM_LAYOUT_PROVIDER';
+  const FORM_ITEM_LAYOUT_PROVIDER = '@@FORM_ITEM_LAYOUT_PROVIDER';
 
   const useForm = (props: tFormLayoutPropsType, styleComputed: tStyleComputed) => {
+
+    const configuration = ApplicationConfigurationProvider.inject();
+
     /*是否为单列*/
     const isSingleColumn = computed(() => props.column === 1);
     /*列间距*/
@@ -112,7 +119,10 @@ export const useFormLayout = (() => {
       if (props.rowGutter != null) {
         return removeUnit(props.rowGutter) as any;
       }
-      return FormSizeRowsGutter[styleComputed.value.size];
+      return Math.max(
+        1.25 * ((removeUnit(configuration.value.theme.vars[`margin-${styleComputed.value.size}`]) || 0) as number),
+        14,
+      );
     });
     /*校验消息的位置*/
     const validateMessagePosition = computed(() => {
@@ -147,8 +157,11 @@ export const useFormLayout = (() => {
   };
 
   const useFormItem = (props: tFormItemLayoutPropsType) => {
+
     const form = inject<ReturnType<typeof useForm>>(FORM_LAYOUT_PROVIDER)!;
 
+    const parentFormItem = inject<PlainObject | null>(FORM_ITEM_LAYOUT_PROVIDER, null);
+
     /**
      * 文本宽度
      * @author  韦胜健
@@ -211,7 +224,7 @@ export const useFormLayout = (() => {
      * @author  韦胜健
      * @date    2022.9.4 23:22
      */
-    const contentAlign = computed(() => props.contentAlign || form.props.contentAlign || eFormContentAlign.left);
+    const contentAlign = computed(() => props.contentAlign || form.props.contentAlign);
 
     const validateMessagePosition = computed(() => props.validateMessagePosition || form.validateMessagePosition.value);
     /**
@@ -229,7 +242,11 @@ export const useFormLayout = (() => {
         return `calc(${Number((itemColumn / totalColumn).toFixed(4)) * 100}%)`;
       })();
       styles.padding = `0 ${unit(form.gutter.value / 2)}`;
-      styles.margin = `${form.rowGutter.value / 2}px 0`;
+      if (!parentFormItem) {
+        styles.margin = `${form.rowGutter.value / 2}px 0`;
+      } else {
+        styles.marginTop = `${form.rowGutter.value}px`;
+      }
     });
 
     /**
@@ -270,7 +287,7 @@ export const useFormLayout = (() => {
       }
     });
 
-    return {
+    const refer = {
       colon,
       labelAlign,
       contentAlign,
@@ -280,11 +297,20 @@ export const useFormLayout = (() => {
       form,
       validateMessagePosition,
     };
+
+    provide(FORM_ITEM_LAYOUT_PROVIDER, refer);
+
+    return refer;
   };
 
   return { useForm, useFormItem };
 })();
 
+/**
+ * 不同尺寸下的默认列间距
+ * @author  韦胜健
+ * @date    2024.7.18 20:52
+ */
 const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
   large: 16,
   normal: 12,
@@ -292,13 +318,6 @@ const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
   mini: 4,
 };
 
-const FormSizeRowsGutter: Record<typeof ThemeSize.TYPE, number> = {
-  large: 32,
-  normal: 24,
-  small: 16,
-  mini: 14,
-};
-
 export const FormValidateMessagePosition = createEnum([
   'bottom-left',
   'bottom-right',

package/src/packages/components/FormItem/index.tsx

@@ -61,10 +61,10 @@ export const FormItem = designComponent({
 
     const classes = useClasses(() => [
       getComponentCls('form-item'),
-      `form-item-label-align-${formItemLayout.labelAlign.value}`,
-      `form-item-content-align-${formItemLayout.contentAlign.value}`,
       `form-item-validate-position-${formItemLayout.validateMessagePosition.value}`,
       {
+        [`form-item-label-align-${formItemLayout.labelAlign.value}`]: !!formItemLayout.labelAlign.value,
+        [`form-item-content-align-${formItemLayout.contentAlign.value}`]: !!formItemLayout.contentAlign.value,
         'form-item-required': formItemValidation.isRequired.value,
         'form-item-has-label': !!props.label,
         'form-item-has-prepend': slots.prepend.isExist(),
@@ -97,7 +97,7 @@ export const FormItem = designComponent({
       },
       render: () => (
         <div className={classes.value} style={formItemLayout.styles.value} ref={onRef.el}>
-          {props.label !== null && (
+          {props.label !== null && !props.hideLabel && (
             <div className="form-item-label" style={formItemLayout.labelStyles.value} title={props.label}>
               {formItemValidation.isRequired.value && <i className="form-item-required-tag">*</i>}
               {slots.labelPrepend()}

package/src/packages/components/createScrollDraggier/index.ts

@@ -21,15 +21,19 @@ export function createScrollDraggier(
     getScroll,
     dataModel,
     getItemElements,
+    getHost,
+    getStrut,
     onDraggierStart,
     onDraggierMove,
     onDraggierEnd,
     onDraggierTap,
   }: {
     props: { horizontal: boolean },
-    getScroll: () => PlainScroll | undefined,
+    getScroll: undefined | null | (() => PlainScroll | undefined),
     dataModel: { value: any[] | undefined | null },
     getItemElements: () => HTMLElement[],
+    getHost?: () => HTMLElement,
+    getStrut?: () => HTMLElement,
 
     onDraggierStart?: iVirtualDraggierHandler,
     onDraggierMove?: iVirtualDraggierHandler,
@@ -39,7 +43,7 @@ export function createScrollDraggier(
 ) {
 
   /*管理自动滚动*/
-  const autoScrollManager = createAutoScrollManager(getScroll);
+  const autoScrollManager = !getScroll ? null : createAutoScrollManager(getScroll);
 
   /*静态变量*/
   const dragStaticState = {
@@ -83,11 +87,11 @@ export function createScrollDraggier(
       throw new Error(`Can't find [data-vid] elements!`);
     }
 
-    dragStaticState.hostElement = findParentElement(dragStaticState.dragElement, el => hasClass(el, getComponentCls('scroll')))!;
+    dragStaticState.hostElement = getHost ? getHost() : findParentElement(dragStaticState.dragElement, el => hasClass(el, getComponentCls('scroll')))!;
     if (!dragStaticState.hostElement) {
       throw new Error(`Can't find host elements`);
     }
-    dragStaticState.strutElement = findParentElement(dragStaticState.dragElement, el => hasClass(el, 'scroll-content'))!;
+    dragStaticState.strutElement = getStrut ? getStrut() : findParentElement(dragStaticState.dragElement, el => hasClass(el, 'scroll-content'))!;
     if (!dragStaticState.strutElement) {
       throw new Error(`Can't find strut elements`);
     }
@@ -200,14 +204,14 @@ export function createScrollDraggier(
       dragReactiveState.onScroll = (e: Event) => {
         update();
       };
-      const ejectOnScroll = getScroll()!.on.onScroll(dragReactiveState.onScroll);
+      const ejectOnScroll = !getScroll ? null : getScroll()?.on.onScroll(dragReactiveState.onScroll);
       draggierEffects.push(() => {
-        ejectOnScroll();
+        ejectOnScroll?.();
         dragReactiveState.onScroll = doNothing;
       });
 
       /*拖拽结束的时候停止自动滚动*/
-      draggierEffects.push(() => getScroll()?.methods.stopAutoScroll());
+      draggierEffects.push(() => getScroll?.()?.methods.stopAutoScroll());
       draggierEffects.push(async () => {
         await dragReactiveState.endingDefer.promise;
         dragReactiveState.pointIndex = null;
@@ -301,11 +305,11 @@ export function createScrollDraggier(
       const resultStart = Math.max(minStart, Math.min(maxStart, newStart));
 
       if (resultStart == minStart) {
-        autoScrollManager.set(props.horizontal ? 'left' : 'top');
+        autoScrollManager?.set(props.horizontal ? 'left' : 'top');
       } else if (resultStart == maxStart) {
-        autoScrollManager.set(props.horizontal ? 'right' : 'bottom');
+        autoScrollManager?.set(props.horizontal ? 'right' : 'bottom');
       } else {
-        autoScrollManager.set(null);
+        autoScrollManager?.set(null);
       }
 
       const styleName = props.horizontal ? 'left' : 'top';