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

package/package.json

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

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

@@ -13,6 +13,7 @@ export const $imageSelector = (
     title,
     aspectRatio,
     imageFit,
+    imagePosition,
   }: {
     title?: string,
     selectOptions: iImageSelectOption[],
@@ -21,6 +22,7 @@ export const $imageSelector = (
     handleConfirm?: (selectValue: string, selectOption: iImageSelectOption) => void | boolean | Promise<void | boolean>,
     aspectRatio?: string,
     imageFit?: string,
+    imagePosition?: string,
   }
 ) => {
   const _handleConfirm = async () => {
@@ -36,6 +38,7 @@ export const $imageSelector = (
     width: 800,
     render: () => <ImageSelector
       imageFit={imageFit}
+      imagePosition={imagePosition}
       modelValue={selectValue}
       onUpdateModelValue={val => selectValue = val}
       selectOptions={selectOptions}

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

@@ -11,7 +11,8 @@ 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' }
+    imageFit: { type: String, default: 'contain' },
+    imagePosition: { type: String, default: 'center left' },
   },
   emits: {
     onUpdateModelValue: (val?: string | number | null | undefined) => true,
@@ -32,7 +33,12 @@ export const ImageSelector = designComponent({
               onClick={() => {model.value = item.val;}}
               onDoubleClick={emit.onDoubleClickOption}
             >
-              <Image src={item.url} previewOnClick={false} fit={props.imageFit as any} position="center left"/>
+              <Image
+                src={item.url}
+                previewOnClick={false}
+                fit={props.imageFit as any}
+                position={props.imagePosition}
+              />
               <div className="image-select-option-checked">
                 <Icon icon="pi-check"/>
               </div>

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

@@ -2,6 +2,7 @@ import {designComponent, getComponentCls, useClassCache, useModel} from "@peryl/
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {Box} from "../Box";
 import './page-card.scss';
+import {EditProps, useEdit} from "../../uses/useEdit";
 
 export const PageCard = designComponent({
   name: 'page-card',
@@ -12,6 +13,7 @@ export const PageCard = designComponent({
     collapsable: { type: Boolean },
     full: { type: Boolean },
     ...StyleProps,
+    ...EditProps,
   },
   slots: ['default'],
   emits: {
@@ -22,6 +24,7 @@ export const PageCard = designComponent({
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
 
     const { styleComputed } = useStyle();
+    useEdit();
 
     const classes = useClassCache(() => [
       getComponentCls('page-card'),

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

@@ -1,6 +1,7 @@
 import {designComponent, getComponentCls, PropType, useClassCache} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import PageCard from "../PageCard";
+import {EditProps, useEdit} from "../../uses/useEdit";
 
 export const PageCardContent = designComponent({
   name: 'page-card-content',
@@ -9,6 +10,7 @@ export const PageCardContent = designComponent({
     full: { type: Boolean },
     noPadding: { type: Boolean },
     ...StyleProps,
+    ...EditProps,
   },
   slots: ['default'],
   setup({ props, slots }) {
@@ -16,6 +18,7 @@ export const PageCardContent = designComponent({
     const pageCard = PageCard.use.inject();
 
     const { styleComputed } = useStyle();
+    useEdit();
 
     const classes = useClassCache(() => [
       getComponentCls('page-card-content'),