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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.93",
+  "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/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,