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

package/package.json

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

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

@@ -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/FilterFormMultiple/index.tsx

@@ -178,7 +178,6 @@ export const FilterFormMultiple = designComponent({
     const formAttrs = computed(() => {
       return {
         column: props.column,
-        labelAlign: 'right' as const,
         labelWidth: 100,
         ...props.formAttrs,
       };
@@ -222,7 +221,9 @@ export const FilterFormMultiple = designComponent({
                 return (
                   <FormItem
                     class={isFirstColumn ? 'filter-form-multiple-first-column' : undefined}
-                    key={key} label={label}
+                    labelAlign={isFirstColumn ? 'left' : 'right'}
+                    key={key}
+                    label={label}
                     column={column}
                   >
                     <InputGroup>

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

@@ -204,6 +204,9 @@
 
   &.form-vertical-label {
     @include prefix(form-item) {
+      .form-item-label {
+        display: block;
+      }
       .form-item-label, .form-item-content {
         width: 100%;
       }

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

@@ -119,7 +119,7 @@ export const useFormLayout = (() => {
       if (!!props.validateMessagePosition) {return props.validateMessagePosition;}
 
       /*纵向文本的情况下，校验消息默认放在左下角*/
-      if (props.verticalLabel) {return FormValidateMessagePosition["bottom-left"];}
+      if (props.verticalLabel) {return FormValidateMessagePosition["bottom-right"];}
       if (isSingleColumn.value) {
         /*单列的情况下，校验消息默认放在右侧*/
         return FormValidateMessagePosition['right'];
@@ -204,7 +204,7 @@ export const useFormLayout = (() => {
      * @author  韦胜健
      * @date    2022.9.4 23:22
      */
-    const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || (form.props.verticalLabel ? eFormLabelAlign.left : eFormLabelAlign.right));
+    const labelAlign = computed(() => form.props.verticalLabel ? eFormLabelAlign.left : (props.labelAlign || form.props.labelAlign));
 
     /**
      * 内容对其方式

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,