plain-design 1.0.0-beta.93 → 1.0.0-beta.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.93",
+  "version": "1.0.0-beta.95",
   "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);
 
@@ -172,7 +172,7 @@
   .#{componentName(icon)}, .#{componentName(loading)} {
     //vertical-align: text-top;
     position: relative;
-    top: 1px;
+    top: 0.15em;
   }
 
   //&:not(.button-icon-only) {

package/src/packages/components/ConfirmPopup/confirm-popup.scss

@@ -0,0 +1,16 @@
+@include comp(confirm-popup) {
+  .popup-content {
+    .popper-head {
+      color: plv(text-1);
+      text-align: center;
+      padding: 1em 1.25em 0;
+    }
+
+    .confirm-popup-button-bar {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 1em 1.25em;
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+import {designComponent, getComponentCls, PropType, useModel} from "plain-design-composition";
+import Popup from "../Popup";
+import Space from "../Space";
+import Button from "../Button";
+import i18n from "../i18n";
+import './confirm-popup.scss';
+import {ePopupTrigger, iPopupTrigger} from "../usePopup/utils/popup.utils";
+
+export const ConfirmPopup = designComponent({
+  name: 'confirm-popup',
+  inheritPropsType: Popup,
+  props: {
+    title: { type: String },
+    trigger: { type: String as PropType<iPopupTrigger>, default: ePopupTrigger.click },
+    confirmLabel: { type: String },
+    cancelLabel: { type: String },
+    modelValue: { type: Boolean },
+  },
+  emits: {
+    onConfirm: () => true,
+    onCancel: () => true,
+    onUpdateModelValue: (val: boolean) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, attrs, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const handler = {
+      onConfirm: () => {
+        model.value = false;
+        emit.onConfirm();
+      },
+      onCancel: () => {
+        model.value = false;
+        emit.onCancel();
+      },
+    };
+
+    return () => {
+      const hasTitle = !!props.title;
+      return (
+        <Popup
+          title={props.title}
+          placement={attrs.placement || (hasTitle ? 'bottom-end' : 'bottom-center')}
+          popperClass={getComponentCls('confirm-popup')}
+          v-model={model.value}
+          trigger={props.trigger}
+          noPadding
+          v-slots={{
+            default: () => slots.default(),
+            popper: () => (
+              hasTitle ? (
+                <Space className="confirm-popup-button-bar" size="mini">
+                  <Button mode="fill" status="primary" label={props.confirmLabel || i18n.$it('base.confirm').d('确定')} onClick={handler.onConfirm}/>
+                  <Button mode="stroke" status="secondary" label={props.cancelLabel || i18n.$it('base.cancel').d('取消')} onClick={handler.onCancel}/>
+                </Space>
+              ) : (
+                <Space className="confirm-popup-button-bar">
+                  <Button mode="text" status="primary" icon="pi-check" label={props.confirmLabel || i18n.$it('base.confirm').d('确定')} onClick={handler.onConfirm}/>
+                  <Button mode="text" status="error" icon="pi-close" label={props.cancelLabel || i18n.$it('base.cancel').d('取消')} onClick={handler.onCancel}/>
+                </Space>
+              )
+            )
+          }}
+        />
+      );
+    };
+  },
+});
+
+export default ConfirmPopup;

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/usePopup/popup-item.scss

@@ -105,7 +105,7 @@
   }
 
   &.popup-item-dark-app {
-    filter: drop-shadow(0 0 0.5px plv(secondary-6));
+    filter: drop-shadow(0 0 16px var(--custom-bg-1));
   }
 
   &.popup-item-no-background {

package/src/packages/entry.tsx

@@ -89,6 +89,7 @@ export type {FileServiceChooseFileConfig, FileServiceSingleFile, FileServiceUplo
 export {CascadePanel} from './components/CascadePanel';
 export {usePopup} from './components/usePopup';
 export {Popup} from './components/Popup';
+export {ConfirmPopup} from './components/ConfirmPopup';
 export {createPopup} from './components/createPopup';
 export type {
   iPopupAlign,