plain-design 1.0.0-beta.16 → 1.0.0-beta.160

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

@@ -1,10 +1,13 @@
-import {designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "@peryl/react-compose";
 import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
 import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
-import {useTooltip} from "../useTooltip";
+import {FormItemValidateMessage} from "./FormItemValidateMessage";
+import Tooltip from "../Tooltip";
+import {getFunctionValue} from "@peryl/utils/getFunctionValue";
+import Icon from "../Icon";
 
 export const FormItem = designComponent({
   name: '-form-item',
@@ -61,9 +64,10 @@ export const FormItem = designComponent({
 
     const classes = useClasses(() => [
       getComponentCls('form-item'),
-      `form-item-label-align-${formItemLayout.labelAlign.value}`,
-      `form-item-content-align-${formItemLayout.contentAlign.value}`,
+      `form-item-validate-position-${formItemLayout.validateMessagePosition.value}`,
       {
+        [`form-item-label-align-${formItemLayout.labelAlign.value}`]: !!formItemLayout.labelAlign.value,
+        [`form-item-content-align-${formItemLayout.contentAlign.value}`]: !!formItemLayout.contentAlign.value,
         'form-item-required': formItemValidation.isRequired.value,
         'form-item-has-label': !!props.label,
         'form-item-has-prepend': slots.prepend.isExist(),
@@ -72,16 +76,23 @@ export const FormItem = designComponent({
       },
     ]);
 
-    useTooltip({
-      ignoreEmptyMessage: true,
-      tooltip: () => ({
-        popperSize: styleComputed.value.size,
-        reference: refs.el,
-        message: formItemValidation.validateMessage.value,
-        status: 'error',
-        placement: formItemLayout.form.props.singleColumnCenter ? 'right-start' : 'bottom-end'
-      })
-    });
+    /*    useTooltip({
+          ignoreEmptyMessage: true,
+          alwaysShow: true,
+          tooltip: () => ({
+            type: uuid(),
+            trigger: 'manual',
+            popperSize: styleComputed.value.size,
+            reference: refs.el,
+            message: formItemValidation.validateMessage.value,
+            status: 'error',
+            placement: formItemLayout.form.props.singleColumnCenter ? 'right-center' : 'bottom-end',
+            minWidth: 0,
+            noBackground: true,
+            noArrow: true,
+            offset: 16,
+          })
+        });*/
 
     return {
       refer: {
@@ -89,22 +100,30 @@ export const FormItem = designComponent({
       },
       render: () => (
         <div className={classes.value} style={formItemLayout.styles.value} ref={onRef.el}>
-          {props.label !== null && (
-            <div className="form-item-label" style={formItemLayout.labelStyles.value}>
+          {props.label !== null && !props.hideLabel && (
+            <div className="form-item-label" style={formItemLayout.labelStyles.value} title={props.label}>
               {formItemValidation.isRequired.value && <i className="form-item-required-tag">*</i>}
               {slots.labelPrepend()}
               {slots.labelSlot(props.label)}
               {slots.labelAppend()}
               {formItemLayout.colon.value && <i> :</i>}
+              {!!props.tip && <Tooltip v-slots={{
+                default: () => <Icon icon="pi-info-circle" className="form-item-cell-tip"/>,
+                popper: () => getFunctionValue(props.tip)
+              }}/>}
             </div>
           )}
           <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
             {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
-            <div className="form-item-content-inner">
-              {slots.default()}
+            <div className="form-item-content-inner" style={formItemLayout.contentInnerStyles.value}>
+              <Fragment key="slot_default">{slots.default()}</Fragment>
+              {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
+              {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
             </div>
             {slots.append.isExist() && <div className="form-item-append-content">{slots.append()}</div>}
           </div>
+          {/*校验消息放在右边的时候，放在外部，使得与输入框横向对齐*/}
+          {formItemLayout.validateMessagePosition.value === 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
         </div>
       )
     };
@@ -112,3 +131,4 @@ export const FormItem = designComponent({
 });
 
 export default FormItem;
+

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

@@ -48,7 +48,7 @@ export const Formatter: Record<string, undefined | ((...args: any[]) => string |
   cny: (value: string | number | null | undefined) => {
     if (value == null || value === 0) {return `¥0`;}
     value = Number(value);
-    if (isNaN(value)) {return i18n('base.invalidAmount').d('无效金额');}
+    if (isNaN(value)) {return i18n.$it('base.invalidAmount').d('无效金额');}
     return `¥ ${Formatter.money!(value)}`;
   },
   /**

package/src/packages/components/Grid/GridCol.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {GridColSize} from "./grid.utils";
 import GridRow from "./GridRow";
 
@@ -47,10 +47,11 @@ export const GridCol = designComponent({
       return classList;
     });
     const styles = useStyles(style => {
-      if ((Number(row.props.gutter)) !== 0) {
+      const gutter = row.getColGutter();
+      if (!!gutter) {
         style = {
-          paddingLeft: (Number(row.props.gutter)) / 2 + 'px',
-          paddingRight: (Number(row.props.gutter)) / 2 + 'px'
+          paddingLeft: (gutter) / 2 + 'px',
+          paddingRight: (gutter) / 2 + 'px'
         };
       }
       return style;

package/src/packages/components/Grid/GridRow.tsx

@@ -1,8 +1,10 @@
-import {designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {eGridAlign, eGridJustify} from "./grid.utils";
-import {unit} from 'plain-utils/string/unit';
-import {removeUnit} from 'plain-utils/string/removeUnit';
+import {unit} from '@peryl/utils/unit';
+import {removeUnit} from '@peryl/utils/removeUnit';
 import './grid.scss';
+import {ThemeSize, useStyle} from "../../uses/useStyle";
+import {ApplicationConfigurationProvider} from "../ApplicationConfigurationProvider";
 
 export const GridRow = designComponent({
   name: 'grid-row',
@@ -10,14 +12,39 @@ export const GridRow = designComponent({
     type: { type: String as PropType<undefined | null | string> },        //类型,type
     align: { type: String as PropType<keyof typeof eGridAlign> },         //对其方式,left|center|right
     justify: { type: String as PropType<keyof typeof eGridJustify> },     //内容弹性布局方式,start,end,center,space-around,space-between
-    gutter: { type: [Number, String], default: 0 },                       //间隔
+    gutter: { type: [Number, String], default: 0 },                       //列间隔
+    rowGutter: { type: [Number, String] },                                //行间隔
   },
   inheritPropsType: HTMLDivElement,
   slots: ['default'],
   provideRefer: true,
   setup({ props, slots }) {
 
+    const configuration = ApplicationConfigurationProvider.inject();
+
     const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const { styleComputed } = useStyle();
+
+    const formatGutter = (gutter: string | number | undefined): number | undefined => {
+      if (!gutter) {return undefined;}
+      if (typeof gutter === "string") {
+        if (gutter === 'default') {
+          gutter = styleComputed.value.size;
+        }
+        const varName = `margin-${gutter}`;
+        if (varName in configuration.value.theme.vars) {
+          // @ts-ignore
+          const varValue = configuration.value.theme.vars[varName];
+          return Number(removeUnit(varValue));
+        }
+      }
+      return Number(removeUnit(gutter));
+    };
+
+    const colGutter = computed(() => formatGutter(props.gutter));
+    const rowGutter = computed(() => formatGutter(props.rowGutter));
+
     const classes = useClasses(() => [
       getComponentCls('grid-row'),
       {
@@ -27,13 +54,20 @@ export const GridRow = designComponent({
       }
     ]);
     const styles = useStyles(style => {
-      const gutter = Number(props.gutter);
-      if (gutter !== 0) {
+
+      const gutter = colGutter.value;
+      if (!!gutter) {
         style = {
-          width: `calc(100% + ${unit(props.gutter)})`,
-          marginLeft: `-${unit(Number(removeUnit(props.gutter)) / 2)}`
+          width: `calc(100% + ${unit(gutter)})`,
+          marginLeft: `-${unit(gutter / 2)}`
         };
       }
+
+      if (rowGutter.value) {
+        if (ThemeSize.LIST.indexOf(rowGutter.value as any) == -1) {
+          style.marginBottom = unit(rowGutter.value);
+        }
+      }
       return style;
     });
     // console.log(styles.value)
@@ -42,6 +76,8 @@ export const GridRow = designComponent({
       refer: {
         props,
         refs,
+        getColGutter: () => colGutter.value,
+        getRowGutter: () => rowGutter.value,
       },
       render: () => (
         <div className={classes.value} style={styles.value} ref={onRef.el}>

package/src/packages/components/Grid/grid.scss

@@ -40,8 +40,8 @@ $screens: (
   flex-direction: row;
   flex-wrap: wrap;
 
-  &:not(:last-child) {
-    margin-bottom: 16px;
+  &:last-child {
+    margin-bottom: 0 !important;
   }
 
   &, & * {

package/src/packages/components/Icon/icon.external.tsx

@@ -0,0 +1,107 @@
+import {RenderNode} from "@peryl/react-compose";
+
+export const IconExternal: Record<string, () => RenderNode> = {
+  'ie-stick': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <defs>
+        <linearGradient id="colorGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#f18ffa"/>
+          <stop offset="50%" stopColor="#8dbcff"/>
+          <stop offset="100%" stopColor="#337cef"/>
+        </linearGradient>
+      </defs>
+      <path fill="url(#colorGradient)"
+            d="M15.2238 15.5079L13.0111 20.1581C12.8687 20.4573 12.5107 20.5844 12.2115 20.442C12.1448 20.4103 12.0845 20.3665 12.0337 20.3129L8.49229 16.5741C8.39749 16.474 8.27113 16.4096 8.13445 16.3918L3.02816 15.7243C2.69958 15.6814 2.46804 15.3802 2.51099 15.0516C2.52056 14.9784 2.54359 14.9075 2.5789 14.8426L5.04031 10.3192C5.1062 10.1981 5.12839 10.058 5.10314 9.92253L4.16 4.85991C4.09931 4.53414 4.3142 4.22086 4.63997 4.16017C4.7126 4.14664 4.78711 4.14664 4.85974 4.16017L9.92237 5.10331C10.0579 5.12855 10.198 5.10637 10.319 5.04048L14.8424 2.57907C15.1335 2.42068 15.4979 2.52825 15.6562 2.81931C15.6916 2.88421 15.7146 2.95507 15.7241 3.02833L16.3916 8.13462C16.4095 8.2713 16.4739 8.39766 16.5739 8.49245L20.3127 12.0338C20.5533 12.2617 20.5636 12.6415 20.3357 12.8821C20.2849 12.9357 20.2246 12.9795 20.1579 13.0112L15.5078 15.224C15.3833 15.2832 15.283 15.3835 15.2238 15.5079ZM16.0206 17.435L17.4348 16.0208L21.6775 20.2634L20.2633 21.6776L16.0206 17.435Z"></path>
+    </svg>
+  ),
+  'ie-chat-ai-fill': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <defs>
+        <linearGradient id="colorGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#f18ffa"/>
+          <stop offset="50%" stopColor="#8dbcff"/>
+          <stop offset="100%" stopColor="#337cef"/>
+        </linearGradient>
+      </defs>
+      <path fill="url(#colorGradient)" d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM20 11C20.6986 11 21.3694 10.8806 21.9929 10.6611C21.9976 10.7735 22 10.8865 22 11C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3H14C14.1135 3 14.2265 3.00237 14.3389 3.00705C14.1194 3.63061 14 4.30136 14 5C14 8.31371 16.6863 11 20 11Z"></path>
+    </svg>
+  ),
+  'ie-chat-ai': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <defs>
+        <linearGradient id="colorGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#f18ffa"/>
+          <stop offset="50%" stopColor="#8dbcff"/>
+          <stop offset="100%" stopColor="#337cef"/>
+        </linearGradient>
+      </defs>
+      <path fill="url(#colorGradient)" d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM10 3H14V5H10C6.68629 5 4 7.68629 4 11C4 14.61 6.46208 16.9656 12 19.4798V17H14C17.3137 17 20 14.3137 20 11H22C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3Z"></path>
+    </svg>
+  ),
+  'ie-undo': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M11 20L1 12L11 4V9C16.5228 9 21 13.4772 21 19C21 19.2727 20.9891 19.5428 20.9677 19.81C19.5055 17.0364 16.6381 15.119 13.313 15.0053L13 15H10.9999L11 20ZM8.99986 13H10.9999L13.0341 13.0003L13.3814 13.0065C14.6657 13.0504 15.9053 13.3165 17.0568 13.7734C15.5898 12.0749 13.4204 11 11 11H9V8.16125L4.20156 12L8.99992 15.8387L8.99986 13Z"></path>
+    </svg>
+  ),
+  'ie-redo': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M13 14H11C7.54202 14 4.53953 15.9502 3.03239 18.8107C3.01093 18.5433 3 18.2729 3 18C3 12.4772 7.47715 8 13 8V2.5L23.5 11L13 19.5V14ZM11 12H15V15.3078L20.3214 11L15 6.69224V10H13C10.5795 10 8.41011 11.0749 6.94312 12.7735C8.20873 12.2714 9.58041 12 11 12Z"></path>
+    </svg>
+  ),
+  'ie-import': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M3 19H21V21H3V19ZM13 5.82843V17H11V5.82843L4.92893 11.8995L3.51472 10.4853L12 2L20.4853 10.4853L19.0711 11.8995L13 5.82843Z"></path>
+    </svg>
+  ),
+  'ie-export': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"></path>
+    </svg>
+  ),
+  'ie-clear': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"></path>
+    </svg>
+  ),
+  'ie-external-link': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path>
+    </svg>
+  ),
+  'ie-thumbs-up': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M2 8.99997H5V21H2C1.44772 21 1 20.5523 1 20V9.99997C1 9.44769 1.44772 8.99997 2 8.99997ZM7.29289 7.70708L13.6934 1.30661C13.8693 1.13066 14.1479 1.11087 14.3469 1.26016L15.1995 1.8996C15.6842 2.26312 15.9026 2.88253 15.7531 3.46966L14.5998 7.99997H21C22.1046 7.99997 23 8.8954 23 9.99997V12.1043C23 12.3656 22.9488 12.6243 22.8494 12.8658L19.755 20.3807C19.6007 20.7554 19.2355 21 18.8303 21H8C7.44772 21 7 20.5523 7 20V8.41419C7 8.14897 7.10536 7.89462 7.29289 7.70708Z"></path>
+    </svg>
+  ),
+  'ie-thumbs-down': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M22 15H19V3H22C22.5523 3 23 3.44772 23 4V14C23 14.5523 22.5523 15 22 15ZM16.7071 16.2929L10.3066 22.6934C10.1307 22.8693 9.85214 22.8891 9.65308 22.7398L8.8005 22.1004C8.3158 21.7369 8.09739 21.1174 8.24686 20.5303L9.40017 16H3C1.89543 16 1 15.1046 1 14V11.8957C1 11.6344 1.05118 11.3757 1.15064 11.1342L4.24501 3.61925C4.3993 3.24455 4.76447 3 5.16969 3H16C16.5523 3 17 3.44772 17 4V15.5858C17 15.851 16.8946 16.1054 16.7071 16.2929Z"></path>
+    </svg>
+  ),
+  'ie-full-screen': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z"></path>
+    </svg>
+  ),
+  'ie-full-screen-exit': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z"></path>
+    </svg>
+  ),
+  'ie-backward': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M15.0001 4.99976V10.9998L21.0001 11.0001L21.0001 13.0001L15.0001 12.9998V18.9998L7.99985 12L15.0001 4.99976ZM4.00006 18.9999L4.00006 4.99993H6.00006L6.00006 18.9999H4.00006Z"></path>
+    </svg>
+  ),
+  'ie-forward': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M8.99988 4.99976L16.0002 12L8.99988 18.9998V12.9998L2.9999 13.0001L2.99988 11.0001L8.99988 10.9998V4.99976ZM17.9999 18.9999L18 4.99993H20L19.9999 18.9999H17.9999Z"></path>
+    </svg>
+  ),
+  'ie-dropper': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path
+        d="M15.5355 2.80744C17.0976 1.24534 19.6303 1.24534 21.1924 2.80744C22.7545 4.36953 22.7545 6.90219 21.1924 8.46429L18.3638 11.2929L18.7175 11.6466C19.108 12.0371 19.108 12.6703 18.7175 13.0608C18.327 13.4513 17.6938 13.4513 17.3033 13.0608L16.9498 12.7073L10.7351 18.922C10.1767 19.4804 9.46547 19.861 8.6911 20.0159L6.93694 20.3667C6.54976 20.4442 6.19416 20.6345 5.91496 20.9137L4.92894 21.8997C4.53841 22.2902 3.90525 22.2902 3.51472 21.8997L2.10051 20.4855C1.70999 20.095 1.70999 19.4618 2.10051 19.0713L3.08653 18.0852C3.36574 17.806 3.55605 17.4504 3.63348 17.0633L3.98431 15.3091C4.13919 14.5347 4.51981 13.8235 5.07821 13.2651L11.2929 7.05045L10.9393 6.69686C10.5488 6.30634 10.5488 5.67317 10.9393 5.28265C11.3299 4.89212 11.963 4.89212 12.3535 5.28265L12.7069 5.63604L15.5355 2.80744ZM12.7071 8.46466L6.49242 14.6794C6.21322 14.9586 6.02291 15.3142 5.94548 15.7013L5.59464 17.4555C5.43977 18.2299 5.05915 18.9411 4.50075 19.4995C5.05915 18.9411 5.77035 18.5604 6.54471 18.4056L8.29887 18.0547C8.68605 17.9773 9.04165 17.787 9.32085 17.5078L15.5355 11.2931L12.7071 8.46466Z"></path>
+    </svg>
+  )
+};

package/src/packages/components/Icon/icon.registry.tsx

@@ -1,5 +1,5 @@
-import {RenderNode} from "plain-design-composition";
-import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/src/packages/component/icon/useIcon";
+import {RenderNode} from "@peryl/react-compose";
+import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
 
 interface iIconGetter {(data: { props: { icon?: string | undefined, strokeWidth: number | undefined, strokeLinecap: tStrokeLinecap | undefined, strokeLinejoin: tStrokeLinejoin | undefined }, attrs: any }): RenderNode | Promise<RenderNode>;}
 

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

@@ -1,10 +1,11 @@
-import {PlainIcon} from 'plain-icons/src/packages/component/icon/react';
-import {designComponent, getComponentCls, iHTMLElement, mergeAttrs, PropType, reactive, RenderNode, useClasses, watch} from "plain-design-composition";
-import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/src/packages/component/icon/useIcon";
+import {PlainIcon} from '@peryl/icon/src/packages/component/icon/react';
+import {designComponent, getComponentCls, iHTMLElement, mergeAttrs, PropType, reactive, RenderNode, useClasses, watch} from "@peryl/react-compose";
+import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
 import './icon.scss';
 import {IconRegistration} from "./icon.registry";
 import {renderNothing} from "../../utils/renderNothing";
 import {ThemeStatus} from "../../uses/useStyle";
+import {IconExternal} from "./icon.external";
 
 IconRegistration.registry('pi-', ({ props }) => (<PlainIcon {...mergeAttrs({ style: { verticalAlign: 'baseline' } }, props)}/>));
 
@@ -28,11 +29,16 @@ export const Icon = designComponent({
 
     watch(() => props.icon, async icon => {
       if (!icon) {state.renderer = renderNothing;}
-      const content = await IconRegistration.getIconRenderer({ props, attrs });
-      if (!content) {
-        state.renderer = renderNothing;
+
+      if (!!IconExternal[icon!]) {
+        state.renderer = IconExternal[icon!];
       } else {
-        state.renderer = () => content;
+        const content = await IconRegistration.getIconRenderer({ props, attrs });
+        if (!content) {
+          state.renderer = renderNothing;
+        } else {
+          state.renderer = () => content;
+        }
       }
     }, { immediate: true });
 

package/src/packages/components/IconPicker/DefaultIcons.ts

@@ -0,0 +1,7 @@
+import _icons from "@peryl/icon/dist/icons.json";
+import {IconExternal} from "../Icon/icon.external";
+
+export const DefaultIcons = [
+  ..._icons.map(i => `pi-${i}`),
+  ...Object.keys(IconExternal),
+];

package/src/packages/components/IconPicker/icon-picker.scss

@@ -0,0 +1,43 @@
+@include comp(icon-picker-panel) {
+  height: 15em;
+  width: 24em;
+  overflow: hidden;
+  .icon-picker-row {
+    display: flex;
+    align-items: center;
+  }
+  .icon-picker-item {
+    width: 2.5em;
+    height: 2.5em;
+    margin: 0.25em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease 300ms;
+    cursor: pointer;
+
+    &:hover {
+      background-color: plv(secondary-light-2);
+    }
+
+    &[data-selected=true] {
+      background-color: plv(primary-6);
+      color: plv(pbfc);
+    }
+  }
+
+  @include sizeMixin(icon-picker-panel, (font-size)) {
+    .icon-picker-item {
+      border-radius: $border-radius;
+    }
+  }
+}
+
+@include comp(icon-picker) {
+  .icon-picker-tag {
+    width: 2.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,189 @@
+import {computed, designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useClasses, useRefs} from "@peryl/react-compose";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import Input from "../Input";
+import {Reference} from "../Reference";
+import {usePopperEditor} from "../usePopupEditor";
+import {createInputPopperAttrs} from "../../uses/createInputPopperAttrs";
+import {iPopupUseOption} from "../usePopup/utils/popup.utils";
+import {delay} from "@peryl/utils/delay";
+import Icon from "../Icon";
+import i18n from "../i18n";
+import {chunk} from '@peryl/utils/chunk';
+import './icon-picker.scss';
+import VirtualList from "../VirtualList";
+import {DefaultIcons} from "./DefaultIcons";
+
+export const IconPicker = designComponent({
+  name: 'icon-picker',
+  inheritPropsType: Input,
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    modelValue: { type: String },
+    popperAttrs: { type: Object as PropType<iPopupUseOption> },
+    placeholder: { type: String, default: () => i18n.$it('iconPicker.placeholder').d('请选择或者输入图标') },
+    iconList: { type: Array as PropType<string[]> },
+  },
+  emits: {
+    onUpdateModelValue: (val?: string) => true,
+    onBlur: (e: FocusEvent) => true,
+    onFocus: (e: FocusEvent) => true,
+  },
+  scopeSlots: {
+    default: (scope: { color?: string }) => {},
+  },
+  setup({ props, event: { emit }, scopeSlots }) {
+
+    const { editComputed } = useEdit();
+    const { styleComputed } = useStyle();
+    const classes = useClasses(() => [getComponentCls('icon-picker'),]);
+    const { refs, onRef } = useRefs({ input: Input });
+
+    const panelClasses = useClassCache(() => [
+      getComponentCls('icon-picker-panel'),
+      `icon-picker-panel-size-${styleComputed.value.size}`
+    ]);
+
+    const iconList = computed((): string[] => {
+      const list = props.iconList ?? DefaultIcons;
+      const filterText = filter.state.filterText?.trim();
+      if (!filterText?.length) {
+        return list;
+      }
+      return list.filter(i => i.indexOf(filterText) > -1);
+    });
+
+    const scopedSlotsRender = (() => {
+      const state = reactive({
+        el: null as null | HTMLElement
+      });
+      const render = (defaultRender: () => RenderNode) => {
+        if (scopeSlots.default.isExist()) {
+          const content = scopeSlots.default.isExist() ? scopeSlots.default({ color: model.value }) : null;
+          return (<Reference onElementDetected={el => state.el = el}>{content}</Reference>);
+        } else {
+          return defaultRender();
+        }
+      };
+      return { state, render };
+    })();
+
+    const filter = (() => {
+      const filterState = reactive({
+        isShow: false,
+        filterText: null as null | undefined | string,
+      });
+      return {
+        state: filterState
+      };
+    })();
+
+    const popper = usePopperEditor({
+      popperAttrs: () => ({
+        offset: 1,
+        noArrow: true,
+        noPadding: true,
+        ...props.popperAttrs,
+      }),
+      reference: () => !editComputed.value.editable ? null : (scopedSlotsRender.state.el || refs.input?.refs.el),
+      onShow: () => {
+        filter.state.isShow = true;
+      },
+      onHide: () => {
+        filter.state.isShow = false;
+      },
+      onClose: () => {
+        filter.state.filterText = null;
+      },
+      popper: () => {
+        return (
+          <div
+            className={panelClasses.value}
+            onMouseDown={(e: any) => {
+              delay().then(() => {refs.input?.focus();});
+            }}>
+            <VirtualList
+              data={chunk(iconList.value, 8)}
+              size={24}
+              dynamicSize
+              v-slots={{
+                default: ({ item: subList, vIndex, vid }) => {
+                  return (
+                    <div
+                      data-vid={vid}
+                      key={vIndex}
+                      className="icon-picker-row"
+                    >
+                      {(subList as string[]).map(icon => (
+                        <div
+                          key={icon}
+                          className="icon-picker-item"
+                          data-selected={String(icon === model.value)}
+                          onClick={() => {
+                            model.value = icon;
+                            state.inputValue = icon;
+                            popper.methods.hide();
+                          }}
+                        >
+                          {(icon.indexOf('ie-') === 0 || icon.indexOf('pi-') === 0) ?
+                            (<Icon icon={icon}/>) :
+                            (<span className={icon}/>)}
+                        </div>
+                      ))}
+                    </div>
+                  );
+                }
+              }}
+            />
+          </div>
+        );
+      }
+    });
+
+    const { inputAttrs, state, model } = createInputPopperAttrs({
+      getValue: () => props.modelValue,
+      emitChange: emit.onUpdateModelValue,
+      disableHideOnBlur: true,
+      emit,
+      popper,
+      handleInputChange: (val) => {
+        filter.state.filterText = val;
+        if (!filter.state.isShow) {popper.methods.show();}
+      },
+    });
+
+    onBeforeUnmount(() => {popper.methods.dispose();});
+
+    return {
+      render: () => {
+        return scopedSlotsRender.render(() =>
+          <Input
+            ref={onRef.input}
+            {...mergeAttrs(
+              {
+                class: classes.value,
+                placeholder: editComputed.value.placeholder
+              },
+              inputAttrs.value,
+            )}
+          >
+            {{
+              prefix: () => (
+                <div className="icon-picker-tag">
+                  {!model.value ? <Icon icon="pi-question"/> : (
+                    model.value.indexOf('ie-') === 0 || model.value.indexOf('pi-') === 0 ?
+                      (<Icon icon={model.value}/>) :
+                      (<span className={model.value}/>)
+                  )}
+                </div>
+              )
+            }}
+          </Input>
+        );
+      }
+    };
+  },
+});
+
+export default IconPicker;

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

@@ -1,4 +1,4 @@
-import {designComponent, RenderNode} from 'plain-design-composition';
+import {designComponent, RenderNode} from '@peryl/react-compose';
 
 export const Illustration = designComponent({
   name: 'illustration',