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

package/package.json

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

@@ -0,0 +1,53 @@
+import $dialog from "../$dialog";
+import ImageSelector, {iImageSelectOption} from "../ImageSelector";
+import {iDialogServiceOption} from "../useDialog/dialog.service.utils";
+import $message from "../$message";
+import i18n from "../i18n";
+
+export const $imageSelector = (
+  {
+    selectOptions,
+    selectValue,
+    dialogServiceOption,
+    handleConfirm,
+    title,
+    aspectRatio,
+    imageFit,
+  }: {
+    title?: string,
+    selectOptions: iImageSelectOption[],
+    selectValue?: any,
+    dialogServiceOption?: iDialogServiceOption,
+    handleConfirm?: (selectValue: string, selectOption: iImageSelectOption) => void | boolean | Promise<void | boolean>,
+    aspectRatio?: string,
+    imageFit?: string,
+  }
+) => {
+  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: () => {
+      _handleConfirm();
+      return false;
+    },
+    ...dialogServiceOption,
+  });
+};

package/src/packages/components/ImageSelector/image-selector.scss

@@ -0,0 +1,70 @@
+@include comp(image-selector) {
+  $num: 3;
+  $gutter: 1em;
+
+  .image-select-option {
+    display: inline-flex;
+    margin-right: $gutter;
+    margin-bottom: $gutter;
+    border: solid 2px plv(border-color);
+    padding: 10px;
+    box-sizing: border-box;
+    position: relative;
+
+    width: calc((100% - (#{$gutter} * (#{$num} - 1))) / #{$num});
+    aspect-ratio: var(--aspect-ratio);
+    overflow: hidden;
+    cursor: pointer;
+    transition: all ease 300ms;
+
+    .image-select-option-checked {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      height: 36px;
+      width: 36px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      color: white;
+      opacity: 0;
+      transition: all ease 300ms;
+
+      &:before {
+        position: absolute;
+        inset: 0;
+        content: '';
+        background-color: plv(primary-6);
+        transform: translateX(50%) translateY(50%) rotate(45deg);
+        transform-origin: center;
+        z-index: 1;
+      }
+
+      & > .#{componentName(icon)} {
+        z-index: 2;
+        transform: rotate(-4.5deg);
+      }
+    }
+
+    & > img {
+      width: 100%;
+      aspect-ratio: inherit;
+    }
+
+    &:nth-child(#{$num}n) {
+      margin-right: 0;
+    }
+
+    &:hover {
+      border-color: plv(primary-3);
+    }
+
+    &[data-selected=true] {
+      border-color: plv(primary-6);
+
+      .image-select-option-checked {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+import {designComponent, getComponentCls, iMouseEvent, PropType, useModel} from "@peryl/react-compose";
+import {Scroll} from "../Scroll";
+import {Box} from "../Box";
+import {Icon} from "../Icon";
+import {Image} from "../Image";
+import './image-selector.scss';
+
+export const ImageSelector = designComponent({
+  name: 'image-selector',
+  props: {
+    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 } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    return () => (
+      <div className={getComponentCls('image-selector')} style={{ '--aspect-ratio': props.aspectRatio } as any}>
+        <Scroll>
+          {props.selectOptions?.map(item => (
+            <Box
+              className="image-select-option"
+              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={props.imageFit as any} position="center left"/>
+              <div className="image-select-option-checked">
+                <Icon icon="pi-check"/>
+              </div>
+            </Box>
+          ))}
+        </Scroll>
+      </div>
+    );
+  },
+});
+
+export default ImageSelector;
+
+export interface iImageSelectOption {
+  val: string,
+  url: string
+}

package/src/packages/entry.tsx

@@ -140,7 +140,9 @@ export type {iChatBoxHistory} from './components/AiChatBox';
 export {$ai} from './components/$ai';
 export type {iAiChoice, iAiChatResponse, iAiConfiguration, iAiHistory} from './components/$ai';
 export {IconPicker} from './components/IconPicker';
-export {Skeleton} from './components/Skeleton'
+export {Skeleton} from './components/Skeleton';
+export {ImageSelector} from './components/ImageSelector';
+export {$imageSelector} from './components/$imageSelector';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';