plain-design 1.0.0-beta.99 → 3.0.1

package/src/packages/components/ColorPicker/color-panel.scss

@@ -1,97 +1,117 @@
-@include prefix(color-panel) {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  border: solid 1px plv(border-color);
-  background-color: plv(background-light);
-
-  .color-panel-card {
-    padding: 10px 10px 0;
-  }
-
-  .color-panel-slider-bar {
-    display: flex;
-
-    .color-panel-slider-container {
-      flex: 1;
-      overflow: hidden;
-
-      @include comp(color-slider) {
-        margin-top: 4px;
-      }
-    }
-
-    .color-panel-slider-color {
-      margin-top: 4px;
-      height: 24px;
-      width: 24px;
-      margin-left: 4px;
-      border-radius: plv(box-size-small-border-radius);
-      box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset, rgb(0 0 0 / 25%) 0 0 4px inset;
-    }
-  }
-
-  .color-panel-editor {
-    margin-top: 4px;
-    font-size: 12px;
-    width: 200px;
-
-    $hexWidth: 60px;
-
-    & > div {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: calc((200px - #{$hexWidth}) / 4);
-      box-sizing: border-box;
-
-      &:first-child {
-        width: $hexWidth;
-      }
-
-      &:not(:first-child) {
-        padding-left: 6px;
-      }
-
-      input {
-        margin-bottom: 4px;
-        width: 100%;
-        font-size: 12px;
-        height: 20px;
-        padding: 0;
-        border-radius: 0;
-        box-shadow: #{plv(secondary-4)} 0 0 0 1px inset;
-        border: none;
-        outline: none;
-        text-align: center;
-        background-color: plv(background-light);
-        color: plv(text-2);
-        border-radius: plv(box-size-small-border-radius);
-      }
-    }
-  }
-
-  .color-panel-history {
-    display: flex;
-    flex-wrap: wrap;
-    width: 200px;
-    margin-top: 5px;
-    border-top: solid 1px plv(border-color);
-    padding: 10px 10px 0;
-
-    .color-panel-history-item {
-      height: 16px;
-      width: 16px;
-      margin-bottom: 10px;
-      box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset, rgba(0, 0, 0, 0.25) 0 0 4px inset;
-      cursor: pointer;
-      border-radius: plv(box-size-small-border-radius);
-
-      &:not(:nth-child(8n)) {
-        margin-right: 10px;
-      }
-    }
-  }
-}
+@include prefix(color-panel) {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  border: solid 1px plv(border-color);
+  background-color: plv(background-light);
+
+  .color-panel-card {
+    padding: 10px 10px 0;
+  }
+
+  .color-panel-slider-bar {
+    display: flex;
+
+    .color-panel-slider-container {
+      flex: 1;
+      overflow: hidden;
+
+      @include comp(color-slider) {
+        margin-top: 4px;
+      }
+    }
+
+    .color-panel-slider-color {
+      margin-top: 4px;
+      height: 24px;
+      width: 24px;
+      margin-left: 4px;
+      border-radius: plv(box-size-small-border-radius);
+      box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset, rgb(0 0 0 / 25%) 0 0 4px inset;
+    }
+
+    .color-panel-dropper {
+      margin-top: 4px;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      border-radius: plv(box-size-small-border-radius);
+      //box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset, rgb(0 0 0 / 25%) 0 0 4px inset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: plv(secondary-light-2);
+      transition: all ease 300ms;
+      cursor: pointer;
+
+      &:hover {
+        background-color: plv(primary-6);
+        color: plv(pbfc);
+      }
+    }
+  }
+
+  .color-panel-editor {
+    margin-top: 4px;
+    font-size: 12px;
+    width: 200px;
+
+    $hexWidth: 60px;
+
+    & > div {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: calc((200px - #{$hexWidth}) / 4);
+      box-sizing: border-box;
+
+      &:first-child {
+        width: $hexWidth;
+      }
+
+      &:not(:first-child) {
+        padding-left: 6px;
+      }
+
+      input {
+        margin-bottom: 4px;
+        width: 100%;
+        font-size: 12px;
+        height: 20px;
+        padding: 0;
+        border-radius: 0;
+        box-shadow: #{plv(secondary-4)} 0 0 0 1px inset;
+        border: none;
+        outline: none;
+        text-align: center;
+        background-color: plv(background-light);
+        color: plv(text-2);
+        border-radius: plv(box-size-small-border-radius);
+      }
+    }
+  }
+
+  .color-panel-history {
+    display: flex;
+    flex-wrap: wrap;
+    width: 200px;
+    margin-top: 5px;
+    border-top: solid 1px plv(border-color);
+    padding: 10px 10px 0;
+
+    .color-panel-history-item {
+      height: 16px;
+      width: 16px;
+      margin-bottom: 10px;
+      box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset, rgba(0, 0, 0, 0.25) 0 0 4px inset;
+      cursor: pointer;
+      border-radius: plv(box-size-small-border-radius);
+
+      &:not(:nth-child(8n)) {
+        margin-right: 10px;
+      }
+    }
+  }
+}

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

@@ -1,131 +1,144 @@
-import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, PropType, reactive, RenderNode, useClasses, useRefs} from "plain-design-composition";
-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 "plain-utils/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/ColorPicker/sub/ColorAlphaSlider.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useStyles} from 'plain-design-composition';
+import {designComponent, getComponentCls, useStyles} from '@peryl/react-compose';
 import './color-alpha-slider.scss';
 // @ts-ignore
 import opacityImage from '../utils/opacity.png';

package/src/packages/components/ColorPicker/sub/ColorHueSlider.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls} from 'plain-design-composition';
+import {designComponent, getComponentCls} from '@peryl/react-compose';
 import './color-hue-slider.scss';
 import {ColorSlider} from "./ColorSlider";
 

package/src/packages/components/ColorPicker/sub/ColorSlider.tsx

@@ -1,9 +1,9 @@
-import {computed, designComponent, getComponentCls, iMouseEvent, useClasses, useModel, useMounted, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iMouseEvent, useClasses, useModel, useMounted, useRefs, useStyles} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../../uses/useEdit";
-import {unit} from "plain-utils/string/unit";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {unit} from "@peryl/utils/unit";
+import {createEffects} from "@peryl/utils/createEffects";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import './color-slider.scss';
 import {ClientZoom} from "../../ClientZoom";
 

package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx

@@ -1,8 +1,8 @@
 import './color-sv-panel.scss';
-import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {getRgbColor} from "../../../utils/color.utils";
 import Color from 'color';
 import {ClientZoom} from "../../..";

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

@@ -1,4 +1,4 @@
-import {computed, reactive, watch} from "plain-design-composition";
+import {computed, reactive, watch} from "@peryl/react-compose";
 import {PlainColor} from "./utils/PlainColor";
 import {iColorPublicPropsType} from "./utils/color-picker.utils";
 

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

@@ -1,4 +1,4 @@
-import {computed, reactive} from "plain-design-composition";
+import {computed, reactive} from "@peryl/react-compose";
 import {PlainColor} from "./utils/PlainColor";
 
 export function useColorPanelHistory(

package/src/packages/components/ColorPicker/utils/color-picker.utils.tsx

@@ -1,6 +1,6 @@
 //@ts-ignore
 import opacityImage from "./opacity.png";
-import {classnames, ExtractPropTypes, getComponentCls, PropType} from "plain-design-composition";
+import {classnames, ExtractPropTypes, getComponentCls, PropType} from "@peryl/react-compose";
 
 export function renderColorButton({ size, value }: { size: string, value: any }) {
   return (

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useModel} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useModel} from "@peryl/react-compose";
 import Popup from "../Popup";
 import Space from "../Space";
 import Button from "../Button";

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

@@ -1,8 +1,8 @@
-import {designComponent, getComponentCls, PropType, useClassCache, useStyleCache} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClassCache, useStyleCache} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import './corner.scss';
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 const eCornerType = createEnum([
   'bottom-left',

package/src/packages/components/DatePicker/createDateRender.multiple.tsx

@@ -1,13 +1,12 @@
-import {computed, getComponentCls, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, getComponentCls, reactive, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {DatePanel} from "./panel/DatePanel";
 import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {tDateCompositionPublicParams} from "./date.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
 import {useMultipleModel} from "../../uses/useMultipleModel";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 /**
@@ -16,13 +15,14 @@ import {createPopupEditor} from "../usePopupEditor";
  * @date    2022.7.4 14:05
  */
 export function createDateRenderMultiple({ props, emit, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, slots, displayPattern, today, hooks, maxmin, }: tDateCompositionPublicParams) {
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input });
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
   const { getReference, renderReference } = useRenderReference();
 
+  const format = effectComputed((): null | PDate[] => !model.value ? [] : model.value.map?.(i => plainDate(i, formatString.value)));
+
   const getFormatValue = () => format.value?.map(i => i.getDisplay());
-  const model = useMultipleModel(() => (props.modelValue as string[] | undefined), emit.onUpdateModelValue, props, { onChange: () => delay().then(() => state.input = getFormatValue()) });
-  const format = computed((): null | PDate[] => !model.value ? [] : model.value.map?.(i => plainDate(i, formatString.value)));
+  const model = useMultipleModel(() => (props.modelValue as string[] | undefined), emit.onUpdateModelValue, props, { onChange: () => delay().then(() => state.input = getFormatValue()) }, effects);
   const state = reactive({ input: getFormatValue() });
 
   const popper = createPopupEditor({

package/src/packages/components/DatePicker/createDateRender.single.tsx

@@ -3,23 +3,24 @@
  * @author  韦胜健
  * @date    2022.7.4 14:04
  */
-import {computed, getComponentCls, reactive, useModel, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
 import {tDateCompositionPublicParams} from "./date.utils";
 import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {DatePanel} from "./panel/DatePanel";
 import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function createDateRenderSingle({ props, emit, slots, hooks, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin }: tDateCompositionPublicParams) {
 
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input });
-  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) });
-  const format = computed((): null | PDate => !model.value ? null : plainDate(model.value as string, formatString.value));
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
+
+  const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value as string, formatString.value));
+
+  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
   const state = reactive({ input: format.value?.getDisplay() });
   const reference = useRenderReference();