plain-design 1.0.0-beta.146 → 1.0.0-beta.148

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

@@ -1,131 +1,144 @@
-import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, PropType, reactive, RenderNode, useClasses, useRefs} from "@peryl/react-compose";
-import {ColorPanel} from "./ColorPanel";
-import {ColorSvPanel} from "./sub/ColorSvPanel";
-import {ColorHueSlider} from "./sub/ColorHueSlider";
-import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";
-import {Input} from "../Input";
-import './color-picker.scss';
-import Color from "color";
-import {delay} from "@peryl/utils/delay";
-//@ts-ignore
-import opacityImage from './utils/opacity.png';
-import {Reference} from "../Reference";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, useStyle} from "../../uses/useStyle";
-import {createInputPopperAttrs} from "../../uses/createInputPopperAttrs";
-import {ColorPanelPublicPropOptions, renderColorButton} from "./utils/color-picker.utils";
-import {usePopperEditor} from "../usePopupEditor";
-import {iPopupUseOption} from "../usePopup/utils/popup.utils";
-
-export const ColorPicker = designComponent({
-  name: '-color',
-  expose: {
-    ColorPanel,
-    ColorSvPanel,
-    ColorHueSlider,
-    ColorAlphaSlider,
-  },
-  inheritPropsType: Input,
-  props: {
-    ...EditProps,
-    ...StyleProps,
-    ...ColorPanelPublicPropOptions,
-    popperAttrs: { type: Object as PropType<iPopupUseOption> },
-    type: { type: 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('color-picker'),]);
-    const { refs, onRef } = useRefs({ input: Input });
-
-    const scopedSlotsRender = (() => {
-      const state = reactive({
-        el: null as null | HTMLElement
-      });
-      const render = (defaultRender: () => RenderNode) => {
-        if (scopeSlots.default.isExist() || props.type === 'button') {
-          const content = scopeSlots.default.isExist() ? scopeSlots.default({ color: model.value || props.defaultColor }) : renderColorButton({ size: styleComputed.value.size, value: model.value });
-          return (<Reference onElementDetected={el => state.el = el}>{content}</Reference>);
-        } else {
-          return defaultRender();
-        }
-      };
-      return { state, render };
-    })();
-
-    const popper = usePopperEditor({
-      popperAttrs: () => ({
-        offset: 1,
-        noArrow: true,
-        noPadding: true,
-        ...props.popperAttrs,
-      }),
-      reference: () => !editComputed.value.editable ? null : (scopedSlotsRender.state.el || refs.input?.refs.el),
-      popper: () => (
-        <ColorPanel
-          v-model={model.value}
-          enableAlpha={props.enableAlpha}
-          format={props.format}
-          defaultColor={props.defaultColor}
-          onChange={val => state.inputValue = val}
-          onDblclickSvPanel={popper.methods.hide}
-          onMouseDown={(e: any) => {
-            if (e.target.nodeName === 'INPUT') {return;}
-            delay().then(() => {refs.input?.focus();});
-          }}
-        />
-      )
-    });
-
-    const { inputAttrs, state, model } = createInputPopperAttrs({
-      getValue: () => props.modelValue,
-      emitChange: emit.onUpdateModelValue,
-      disableHideOnBlur: true,
-      emit,
-      popper,
-      isValidInputValue: (val) => {
-        if (!val) {return true;}
-        try {
-          Color(val);
-          return true;
-        } catch (e) {
-          return false;
-        }
-      },
-    });
-
-    onBeforeUnmount(() => {popper.methods.dispose();});
-
-    return {
-      render: () => {
-        return scopedSlotsRender.render(() =>
-          <Input
-            ref={onRef.input}
-            {...mergeAttrs(
-              { class: classes.value },
-              inputAttrs.value,
-            )}
-          >
-            {{
-              prefix: () => (
-                <div className="color-picker-tag" style={{ backgroundImage: `url(${opacityImage})` }}>
-                  <div className="color-picker-tag-inner" style={{ backgroundColor: model.value }}/>
-                </div>
-              )
-            }}
-          </Input>
-        );
-      }
-    };
-  },
-});
+import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, PropType, reactive, RenderNode, useClasses, useRefs} from "@peryl/react-compose";
+import {ColorPanel} from "./ColorPanel";
+import {ColorSvPanel} from "./sub/ColorSvPanel";
+import {ColorHueSlider} from "./sub/ColorHueSlider";
+import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";
+import {Input} from "../Input";
+import './color-picker.scss';
+import Color from "color";
+import {delay} from "@peryl/utils/delay";
+//@ts-ignore
+import opacityImage from './utils/opacity.png';
+import {Reference} from "../Reference";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {createInputPopperAttrs} from "../../uses/createInputPopperAttrs";
+import {ColorPanelPublicPropOptions, renderColorButton} from "./utils/color-picker.utils";
+import {usePopperEditor} from "../usePopupEditor";
+import {iPopupUseOption} from "../usePopup/utils/popup.utils";
+
+export const ColorPicker = designComponent({
+  name: '-color',
+  expose: {
+    ColorPanel,
+    ColorSvPanel,
+    ColorHueSlider,
+    ColorAlphaSlider,
+  },
+  inheritPropsType: Input,
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    ...ColorPanelPublicPropOptions,
+    popperAttrs: { type: Object as PropType<iPopupUseOption> },
+    type: { type: String },
+    strict: { type: Boolean, default: true },
+  },
+  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('color-picker'),]);
+    const { refs, onRef } = useRefs({ input: Input });
+
+    const scopedSlotsRender = (() => {
+      const state = reactive({
+        el: null as null | HTMLElement
+      });
+      const render = (defaultRender: () => RenderNode) => {
+        if (scopeSlots.default.isExist() || props.type === 'button') {
+          const content = scopeSlots.default.isExist() ? scopeSlots.default({ color: model.value || props.defaultColor }) : renderColorButton({ size: styleComputed.value.size, value: model.value });
+          return (<Reference onElementDetected={el => state.el = el}>{content}</Reference>);
+        } else {
+          return defaultRender();
+        }
+      };
+      return { state, render };
+    })();
+
+    const popper = usePopperEditor({
+      popperAttrs: () => ({
+        offset: 1,
+        noArrow: true,
+        noPadding: true,
+        ...props.popperAttrs,
+      }),
+      reference: () => !editComputed.value.editable ? null : (scopedSlotsRender.state.el || refs.input?.refs.el),
+      popper: () => {
+        const validColorString = (() => {
+          try {
+            Color(model.value);
+            return model.value;
+          } catch (e) {
+            return undefined;
+          }
+        })();
+        return (
+          <ColorPanel
+            modelValue={validColorString}
+            onUpdateModelValue={val => model.value = val}
+            enableAlpha={props.enableAlpha}
+            format={props.format}
+            defaultColor={props.defaultColor}
+            onChange={val => state.inputValue = val}
+            onDblclickSvPanel={popper.methods.hide}
+            onMouseDown={(e: any) => {
+              if (e.target.nodeName === 'INPUT') {return;}
+              delay().then(() => {refs.input?.focus();});
+            }}
+          />
+        );
+      }
+    });
+
+    const { inputAttrs, state, model } = createInputPopperAttrs({
+      getValue: () => props.modelValue,
+      emitChange: emit.onUpdateModelValue,
+      disableHideOnBlur: true,
+      emit,
+      popper,
+      isValidInputValue: (val) => {
+        if (!props.strict) {return true;}
+        if (!val) {return true;}
+        try {
+          Color(val);
+          return true;
+        } catch (e) {
+          return false;
+        }
+      },
+    });
+
+    onBeforeUnmount(() => {popper.methods.dispose();});
+
+    return {
+      render: () => {
+        return scopedSlotsRender.render(() =>
+          <Input
+            ref={onRef.input}
+            {...mergeAttrs(
+              { class: classes.value },
+              inputAttrs.value,
+            )}
+          >
+            {{
+              prefix: () => (
+                <div className="color-picker-tag" style={{ backgroundImage: `url(${opacityImage})` }}>
+                  <div className="color-picker-tag-inner" style={{ backgroundColor: model.value }}/>
+                </div>
+              )
+            }}
+          </Input>
+        );
+      }
+    };
+  },
+});

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

@@ -97,5 +97,11 @@ export const IconExternal: Record<string, () => RenderNode> = {
     <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/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/VirtualList/useVirtualList.tsx

@@ -214,7 +214,7 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       start = startIndex * props.size;
     } else {
-      start = nodes.value[startIndex].start;
+      start = nodes.value[startIndex]?.start ?? 0;
     }
 
     if (!props.horizontal) {