plain-design 1.0.0-beta.153 → 1.0.0-beta.154

package/package.json

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

package/src/packages/components/$imageSelector/index.tsx

@@ -12,6 +12,7 @@ export const $imageSelector = (
     handleConfirm,
     title,
     aspectRatio,
+    imageFit,
   }: {
     title?: string,
     selectOptions: iImageSelectOption[],
@@ -19,25 +20,33 @@ export const $imageSelector = (
     dialogServiceOption?: iDialogServiceOption,
     handleConfirm?: (selectValue: string, selectOption: iImageSelectOption) => void | boolean | Promise<void | boolean>,
     aspectRatio?: string,
+    imageFit?: string,
   }
 ) => {
-  $dialog({
+  const _handleConfirm = async () => {
+    if (!selectValue) {
+      $message.error(i18n.$it('base.pleaseSelect').d('请选择'));
+      return false;
+    }
+    const flag = await handleConfirm?.(selectValue, selectOptions.find(i => i.val === selectValue)!);
+    if (flag !== false) {close();}
+  };
+  const close = $dialog({
     title,
     width: 800,
     render: () => <ImageSelector
+      imageFit={imageFit}
       modelValue={selectValue}
       onUpdateModelValue={val => selectValue = val}
       selectOptions={selectOptions}
       aspectRatio={aspectRatio}
+      onDoubleClickOption={() => {_handleConfirm();}}
     />,
     confirmButton: true,
     cancelButton: true,
-    handleConfirm: async () => {
-      if (!selectValue) {
-        $message.error(i18n.$it('base.pleaseSelect').d('请选择'));
-        return false;
-      }
-      return handleConfirm?.(selectValue, selectOptions.find(i => i.val === selectValue)!);
+    handleConfirm: () => {
+      _handleConfirm();
+      return false;
     },
     ...dialogServiceOption,
   });

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useModel} from "@peryl/react-compose";
+import {designComponent, getComponentCls, iMouseEvent, PropType, useModel} from "@peryl/react-compose";
 import {Scroll} from "../Scroll";
 import {Box} from "../Box";
 import {Icon} from "../Icon";
@@ -11,9 +11,11 @@ export const ImageSelector = designComponent({
     modelValue: { type: [String, Number] },
     selectOptions: { type: Array as PropType<iImageSelectOption[]> },
     aspectRatio: { type: String, default: '3 / 4' },
+    imageFit: { type: String, default: 'contain' }
   },
   emits: {
     onUpdateModelValue: (val?: string | number | null | undefined) => true,
+    onDoubleClickOption: (e: iMouseEvent) => true,
   },
   setup({ props, event: { emit } }) {
 
@@ -28,8 +30,9 @@ export const ImageSelector = designComponent({
               key={item.val}
               data-selected={String(model.value === item.val)}
               onClick={() => {model.value = item.val;}}
+              onDoubleClick={emit.onDoubleClickOption}
             >
-              <Image src={item.url} previewOnClick={false} fit="cover" position="top left"/>
+              <Image src={item.url} previewOnClick={false} fit={props.imageFit as any} position="center left"/>
               <div className="image-select-option-checked">
                 <Icon icon="pi-check"/>
               </div>