plain-design 1.0.0-beta.73 → 1.0.0-beta.74

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

@@ -1,27 +1,27 @@
-//@ts-ignore
-import opacityImage from "./opacity.png";
-import {classnames, ExtractPropTypes, getComponentCls, PropType} from "plain-design-composition";
-
-export function renderColorButton({ size, value }: { size: string, value: any }) {
-  return (
-    <span className={classnames([
-      getComponentCls('color-button'),
-      `color-button-size-${size}`
-    ])}>
-      <span style={{ backgroundImage: `url(${opacityImage})` }}>
-        <span style={{ backgroundColor: value }}/>
-      </span>
-      <span>{value}</span>
-    </span>
-  );
-}
-
-export const ColorPanelPublicPropOptions = {
-  modelValue: { type: String },                                 // 当前颜色值
-  enableAlpha: { type: Boolean },                               // 是否启用透明度
-  format: { type: String as PropType<'hex' | 'rgb'> },          // 格式类型：hex、rgb
-  defaultColor: { type: String },                               // 默认颜色
-  disableSvPanel: { type: Boolean },
-} as const;
-
-export type iColorPublicPropsType = ExtractPropTypes<typeof ColorPanelPublicPropOptions>
+//@ts-ignore
+import opacityImage from "./opacity.png";
+import {classnames, ExtractPropTypes, getComponentCls, PropType} from "plain-design-composition";
+
+export function renderColorButton({ size, value }: { size: string, value: any }) {
+  return (
+    <span className={classnames([
+      getComponentCls('color-button'),
+      `color-button-size-${size}`
+    ])}>
+      <span style={{ backgroundImage: `url(${opacityImage})` }}>
+        <span style={{ backgroundColor: value }}/>
+      </span>
+      <span>{value}</span>
+    </span>
+  );
+}
+
+export const ColorPanelPublicPropOptions = {
+  modelValue: { type: String },                                 // 当前颜色值
+  enableAlpha: { type: Boolean },                               // 是否启用透明度
+  format: { type: String as PropType<'hex' | 'rgb'> },          // 格式类型：hex、rgb
+  defaultColor: { type: String },                               // 默认颜色
+  disableSvPanel: { type: Boolean },
+} as const;
+
+export type iColorPublicPropsType = ExtractPropTypes<typeof ColorPanelPublicPropOptions>

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

@@ -1,188 +1,188 @@
-import {computed, getComponentCls, reactive, useRefs} from "plain-design-composition";
-import Input from "../Input";
-import {delay} from "plain-utils/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";
-
-/**
- * 日期多选
- * @author  韦胜健
- * @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 { getReference, renderReference } = useRenderReference();
-
-  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 state = reactive({ input: getFormatValue() });
-
-  const popper = createPopupEditor({
-    option: {
-      alwaysShowOnClickReference: () => true,
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => !editComputed.value.editable ? null : (getReference() || refs.input?.refs.el),
-      popper: () => <>
-        <DatePanel
-          {...{
-            ...getInheritPublicDateAttrs(),
-            multiple: true,
-            modelValue: model.value,
-            onChange: handler.onPickerChange,
-            onMousedown: handler.onMousedownPicker,
-            ...formatString.value,
-          }}
-        />
-        {slots.foot.isExist() && (<div className={getComponentCls('date-foot')} onMouseDown={handler.onMousedownPicker}>{slots.foot()}</div>)}
-      </>
-    },
-  });
-
-  const utils = {
-    apply: (val: any, type: 'input' | 'picker') => {
-
-      const jdView = 'YMDHms';
-
-      if (type === "picker") {
-        model.value = (val as string[]).sort((a, b) => plainDate(a, formatString.value)[jdView] - plainDate(b, formatString.value)[jdView]);
-        state.input = getFormatValue();
-        return;
-      }
-
-      /*如果输入值得来源是input，将display格式化为value*/
-      if (type === "input") {
-        if (!val) {
-          /*没有输入值，什么事情也不做*/
-          return;
-        } else {
-          /*有值*/
-          if (!displayPattern.value.test(val)) {
-            /*输入值得格式与显示值格式不一致，不做任何处理*/
-            return;
-          } else {
-            /*将输入值格式化为实际值*/
-            let pd = today.value.useDisplay(val);
-            if (!pd.getDayJs().isValid()) {
-              /*输入值格式不正确，，什么是也不做*/
-              return;
-            }
-            val = pd.getValue();
-          }
-        }
-      }
-
-      /*检查最大最小值*/
-      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
-
-      model.value = [...format.value || [], pd].sort((a, b) => a[jdView] - b[jdView]).map(i => i.getValue());
-      state.input = getFormatValue();
-    },
-  };
-
-  const handler = {
-    /**
-     * Input enter按键，打开或者关闭picker
-     * @author  韦胜健
-     * @date    2022.7.3 12:24
-     */
-    onInputEnter: () => {popper.methods.toggle();},
-    /**
-     * Input Esc按键，关闭picker
-     * @author  韦胜健
-     * @date    2022.7.3 12:25
-     */
-    onInputEsc: () => {popper.methods.hide();},
-    /**
-     * Input Focus事件，派发事件
-     * @author  韦胜健
-     * @date    2022.7.3 12:25
-     */
-    onInputFocus: (e: FocusEvent) => {emit.onFocus(e);},
-    /**
-     * 点击picker动作，立即让input重新获取焦点
-     * @author  韦胜健
-     * @date    2022.7.3 12:25
-     */
-    onMousedownPicker: () => {delay().then(() => refs.input?.focus());},
-    /**
-     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
-     * @author  韦胜健
-     * @date    2022.7.3 12:27
-     */
-    onInputBlur: (e: FocusEvent) => {
-      state.input = getFormatValue();
-      emit.onBlur(e);
-      popper.methods.hide();
-    },
-    /**
-     * picker值变化动作
-     * @author  韦胜健
-     * @date    2022.7.3 12:27
-     */
-    onPickerChange: (val: any) => {
-      utils.apply(val, 'picker');
-    },
-    /**
-     * 处理input clear事件
-     * @author  韦胜健
-     * @date    2022.7.3 20:08
-     */
-    onInputClear: () => {
-      model.value = null as any;
-      state.input = undefined;
-    },
-    /**
-     * 处理多值输入框添加元素动作
-     * @author  韦胜健
-     * @date    2022.7.4 21:57
-     */
-    handleAddTag: (val: string) => {
-      utils.apply(val, 'input');
-    },
-    /**
-     * 处理多值输入框移除元素动作
-     * @author  韦胜健
-     * @date    2022.7.4 21:57
-     */
-    handleRemoveTag: (data: { index: number, val: string }) => {
-      model.value!.splice(data.index, 1);
-      model.value = [...model.value!];
-      state.input = getFormatValue();
-    },
-  };
-
-  hooks.onRenderInput.use(() => (
-    renderReference({
-      slotExist: slots.default.isExist,
-      slotRender: slots.default,
-      defaultRender: () => (
-        <Input
-          ref={onRef.input}
-          suffixIcon="pi-calendar"
-          multiple
-          modelValue={state.input}
-          onFocus={handler.onInputFocus}
-          onBlur={handler.onInputBlur}
-          onEnter={handler.onInputEnter}
-          onEsc={handler.onInputEsc}
-          clearHandler={handler.onInputClear}
-          handleAddTag={handler.handleAddTag}
-          handleRemoveTag={handler.handleRemoveTag}
-          {...props.inputAttrs}
-        />
-      )
-    })
-  ));
-
-  effects.push(() => {popper.methods.dispose();});
-
-  return effects.clear;
-}
+import {computed, getComponentCls, reactive, useRefs} from "plain-design-composition";
+import Input from "../Input";
+import {delay} from "plain-utils/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";
+
+/**
+ * 日期多选
+ * @author  韦胜健
+ * @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 { getReference, renderReference } = useRenderReference();
+
+  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 state = reactive({ input: getFormatValue() });
+
+  const popper = createPopupEditor({
+    option: {
+      alwaysShowOnClickReference: () => true,
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : (getReference() || refs.input?.refs.el),
+      popper: () => <>
+        <DatePanel
+          {...{
+            ...getInheritPublicDateAttrs(),
+            multiple: true,
+            modelValue: model.value,
+            onChange: handler.onPickerChange,
+            onMousedown: handler.onMousedownPicker,
+            ...formatString.value,
+          }}
+        />
+        {slots.foot.isExist() && (<div className={getComponentCls('date-foot')} onMouseDown={handler.onMousedownPicker}>{slots.foot()}</div>)}
+      </>
+    },
+  });
+
+  const utils = {
+    apply: (val: any, type: 'input' | 'picker') => {
+
+      const jdView = 'YMDHms';
+
+      if (type === "picker") {
+        model.value = (val as string[]).sort((a, b) => plainDate(a, formatString.value)[jdView] - plainDate(b, formatString.value)[jdView]);
+        state.input = getFormatValue();
+        return;
+      }
+
+      /*如果输入值得来源是input，将display格式化为value*/
+      if (type === "input") {
+        if (!val) {
+          /*没有输入值，什么事情也不做*/
+          return;
+        } else {
+          /*有值*/
+          if (!displayPattern.value.test(val)) {
+            /*输入值得格式与显示值格式不一致，不做任何处理*/
+            return;
+          } else {
+            /*将输入值格式化为实际值*/
+            let pd = today.value.useDisplay(val);
+            if (!pd.getDayJs().isValid()) {
+              /*输入值格式不正确，，什么是也不做*/
+              return;
+            }
+            val = pd.getValue();
+          }
+        }
+      }
+
+      /*检查最大最小值*/
+      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
+
+      model.value = [...format.value || [], pd].sort((a, b) => a[jdView] - b[jdView]).map(i => i.getValue());
+      state.input = getFormatValue();
+    },
+  };
+
+  const handler = {
+    /**
+     * Input enter按键，打开或者关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 12:24
+     */
+    onInputEnter: () => {popper.methods.toggle();},
+    /**
+     * Input Esc按键，关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 12:25
+     */
+    onInputEsc: () => {popper.methods.hide();},
+    /**
+     * Input Focus事件，派发事件
+     * @author  韦胜健
+     * @date    2022.7.3 12:25
+     */
+    onInputFocus: (e: FocusEvent) => {emit.onFocus(e);},
+    /**
+     * 点击picker动作，立即让input重新获取焦点
+     * @author  韦胜健
+     * @date    2022.7.3 12:25
+     */
+    onMousedownPicker: () => {delay().then(() => refs.input?.focus());},
+    /**
+     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
+     * @author  韦胜健
+     * @date    2022.7.3 12:27
+     */
+    onInputBlur: (e: FocusEvent) => {
+      state.input = getFormatValue();
+      emit.onBlur(e);
+      popper.methods.hide();
+    },
+    /**
+     * picker值变化动作
+     * @author  韦胜健
+     * @date    2022.7.3 12:27
+     */
+    onPickerChange: (val: any) => {
+      utils.apply(val, 'picker');
+    },
+    /**
+     * 处理input clear事件
+     * @author  韦胜健
+     * @date    2022.7.3 20:08
+     */
+    onInputClear: () => {
+      model.value = null as any;
+      state.input = undefined;
+    },
+    /**
+     * 处理多值输入框添加元素动作
+     * @author  韦胜健
+     * @date    2022.7.4 21:57
+     */
+    handleAddTag: (val: string) => {
+      utils.apply(val, 'input');
+    },
+    /**
+     * 处理多值输入框移除元素动作
+     * @author  韦胜健
+     * @date    2022.7.4 21:57
+     */
+    handleRemoveTag: (data: { index: number, val: string }) => {
+      model.value!.splice(data.index, 1);
+      model.value = [...model.value!];
+      state.input = getFormatValue();
+    },
+  };
+
+  hooks.onRenderInput.use(() => (
+    renderReference({
+      slotExist: slots.default.isExist,
+      slotRender: slots.default,
+      defaultRender: () => (
+        <Input
+          ref={onRef.input}
+          suffixIcon="pi-calendar"
+          multiple
+          modelValue={state.input}
+          onFocus={handler.onInputFocus}
+          onBlur={handler.onInputBlur}
+          onEnter={handler.onInputEnter}
+          onEsc={handler.onInputEsc}
+          clearHandler={handler.onInputClear}
+          handleAddTag={handler.handleAddTag}
+          handleRemoveTag={handler.handleRemoveTag}
+          {...props.inputAttrs}
+        />
+      )
+    })
+  ));
+
+  effects.push(() => {popper.methods.dispose();});
+
+  return effects.clear;
+}