plain-design 0.0.97 → 1.0.0-beta.2

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

@@ -0,0 +1,131 @@
+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>
+        );
+      }
+    };
+  },
+});

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

@@ -0,0 +1,43 @@
+import {designComponent, getComponentCls, useStyles} from 'plain-design-composition';
+import './color-alpha-slider.scss';
+// @ts-ignore
+import opacityImage from '../utils/opacity.png';
+import {ColorSlider} from "./ColorSlider";
+
+export const ColorAlphaSlider = designComponent({
+  name: 'color-alpha-slider',
+  props: {
+    color: { type: String },                                      // 当前颜色
+  },
+  inheritPropsType: ColorSlider,
+  setup({ props }) {
+
+    /**
+     * 根节点行内样式
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const styles = useStyles((styles) => {
+      styles.backgroundImage = `url(${opacityImage})`;
+    });
+
+    /**
+     * 透明背景样式
+     * @author  韦胜健
+     * @date    2022.12.10 23:00
+     */
+    const shadowStyles = useStyles(styles => {
+      styles.background = `linear-gradient(to left, ${props.color}, rgba(255,255,255,0))`;
+    });
+
+    return () => (
+      <ColorSlider
+        className={getComponentCls('color-alpha-slider')}
+        total={100}
+        style={styles.value}
+      >
+        <div className="color-alpha-shadow" style={shadowStyles.value}/>
+      </ColorSlider>
+    );
+  },
+});

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

@@ -0,0 +1,17 @@
+import {designComponent, getComponentCls} from 'plain-design-composition';
+import './color-hue-slider.scss';
+import {ColorSlider} from "./ColorSlider";
+
+export const ColorHueSlider = designComponent({
+  name: 'color-hue-slider',
+  props: {},
+  inheritPropsType: ColorSlider,
+  setup() {
+    return () => (
+      <ColorSlider
+        className={getComponentCls('color-hue-slider')}
+        total={360}
+      />
+    );
+  },
+});

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

@@ -0,0 +1,160 @@
+import {computed, designComponent, getComponentCls, iMouseEvent, useClasses, useModel, useMounted, useRefs, useStyles} from "plain-design-composition";
+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 './color-slider.scss';
+
+export const ColorSlider = designComponent({
+  name: 'color-slider',
+  props: {
+    ...EditProps,
+    modelValue: { type: Number, default: 0 },                     // 绑定值
+    background: { type: String },                                 // 背景
+    size: { type: Number, default: 10 },                          // 高度
+    thumbSize: { type: Number, default: 4 },                      // 高度
+    total: { type: Number, required: true },                      // 总数
+  },
+  emits: {
+    onUpdateModelValue: (val: number) => true,
+  },
+  slots: ['default'],
+  inheritPropsType: HTMLDivElement,
+  setup({ props, event: { emit }, slots }) {
+
+    /**
+     * 双向绑定值
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const { editComputed } = useEdit();
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement, });
+
+    /**
+     * 总长度
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const totalLength = (() => {
+      const isMounted = useMounted();
+      return computed((): number => {
+        if (!isMounted.value) {return 0;}
+        return !!refs.el ? (refs.el.offsetWidth - props.thumbSize! - 2) : 0;
+      });
+    })();
+
+    /**
+     * 当前绑定值转换成百分比
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const percent = computed(() => (model.value || 0) / props.total);
+
+    /**
+     * 根节点样式
+     * @author  韦胜健
+     * @date    2022.12.11 13:46
+     */
+    const classes = useClasses(() => [
+      getComponentCls('color-slider'),
+      {
+        'color-slider-disabled': editComputed.value.disabled
+      }
+    ]);
+
+    /**
+     * 根节点行内样式
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const styles = useStyles((styles) => {
+      styles.height = unit(props.size);
+    });
+
+    /**
+     * 指示器行内样式
+     * @author  韦胜健
+     * @date    2022.12.10 23:00
+     */
+    const thumbStyles = useStyles((styles) => {
+      const length = percent.value * totalLength.value;
+      styles.transform = `translateX(${length}px)`;
+      styles.height = `calc(${unit(props.size)} - 2px)`;
+      styles.width = unit(props.thumbSize);
+    });
+
+    const utils = {
+      /**
+       * 设置值
+       * @author  韦胜健
+       * @date    2022.12.10 23:00
+       */
+      setOffsetX: (offsetX: number) => {
+        let val = Number(((offsetX / totalLength.value) * props.total).toFixed(0));
+        model.value = Math.max(0, Math.min(props.total, val));
+      },
+    };
+
+    const draggier = (() => {
+      const { effects: draggierEffects } = createEffects();
+      let staticState = null as null | {
+        start: {
+          x: number,
+          y: number,
+          offsetX: number
+        }
+      };
+      const handler = {
+        onMousedown: (e: iMouseEvent) => {
+          utils.setOffsetX(e.nativeEvent.offsetX);
+          staticState = {
+            start: {
+              x: e.clientX,
+              y: e.clientY,
+              offsetX: e.nativeEvent.offsetX,
+            }
+          };
+          draggierEffects.push(() => staticState = null);
+          window.addEventListener('mousemove', handler.onMousemove);
+          window.addEventListener('mouseup', handler.onMouseup);
+          draggierEffects.push(() => {window.removeEventListener('mousemove', handler.onMousemove);});
+          draggierEffects.push(() => {window.removeEventListener('mouseup', handler.onMouseup);});
+
+          disabledUserSelect();
+          draggierEffects.push(() => {enableUserSelect();});
+        },
+        onMousemove: (e: MouseEvent) => {
+          if (!staticState) {return;}
+          const durX = e.clientX - staticState.start.x;
+          const newOffsetX = durX + staticState.start.offsetX;
+          utils.setOffsetX(newOffsetX);
+        },
+        onMouseup: () => {
+          draggierEffects.clear();
+        },
+      };
+      return { onMousedown: handler.onMousedown };
+    })();
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div
+          className={classes.value}
+          style={styles.value}
+          onMouseDown={editComputed.value.editable ? draggier.onMousedown : undefined}
+          ref={onRef.el}
+        >
+          {!editComputed.value.disabled && <span className="color-slider-thumb" style={thumbStyles.value}/>}
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});

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

@@ -0,0 +1,122 @@
+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 {getRgbColor} from "../../../utils/color.utils";
+import Color from 'color';
+
+export const ColorSvPanel = designComponent({
+  name: 'color-sv-panel',
+  props: {
+    hue: { type: Number, default: 360 },                      // 色相
+    saturation: { type: Number },                             // 饱和度
+    modelValue: { type: Number },                             // 亮度
+    width: { type: Number, default: 200 },          // 面板宽度
+    height: { type: Number, default: 150 },         // 面板高度
+    disable: { type: Boolean },                               // 是否禁用sv panel
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onChange: (val: any) => true,
+    onDblclick: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const state = reactive({
+      val: props.modelValue == null ? null : 100 - Number(props.modelValue),
+      saturation: props.saturation,
+      startX: 0,
+      startY: 0,
+      tempSaturation: 0,
+      tempValue: 0,
+    });
+
+    const styles = useStyles(() => {
+      const color = Color({ h: props.hue, v: 100, s: 100 });
+      return {
+        width: unit(props.width),
+        height: unit(props.height),
+        backgroundColor: getRgbColor(color),
+      };
+    });
+
+    const thumbStyles = computed(() => {
+      let { val, saturation } = state;
+      val = val == null ? 50 : val;
+      saturation = saturation == null ? 50 : saturation;
+      return {
+        transform: `translate3d(${saturation * (props.width as number) / 100}px,${val * (props.height as number) / 100}px,0)`,
+      };
+    });
+
+    const methods = {
+      updatePosition: (x: number, y: number, isMouseDown = true): void => {
+        const durX = Number((x / (props.width as number) * 100).toFixed(0));
+        const durY = Number((y / (props.height as number) * 100).toFixed(0));
+
+        state.saturation = (isMouseDown ? 0 : state.tempSaturation) + durX;
+        state.val = (isMouseDown ? 0 : state.tempValue) + durY;
+        state.saturation = Math.max(0, Math.min(100, state.saturation));
+        state.val = Math.max(0, Math.min(100, state.val));
+
+        emit.onChange({ hue: props.hue, saturation: state.saturation, value: 100 - state.val });
+      },
+    };
+
+    const handler = {
+      mousedown: (e: iMouseEvent) => {
+        document.body.addEventListener('mousemove', handler.mousemove);
+        document.body.addEventListener('mouseup', handler.mouseup);
+        disabledUserSelect();
+        methods.updatePosition(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
+        state.startX = e.clientX;
+        state.startY = e.clientY;
+        state.tempSaturation = state.saturation as number;
+        state.tempValue = state.val as number;
+      },
+      mousemove: (e: MouseEvent) => {
+        methods.updatePosition(e.clientX - state.startX, e.clientY - state.startY, false);
+      },
+      mouseup: () => {
+        document.body.removeEventListener('mousemove', handler.mousemove);
+        document.body.removeEventListener('mouseup', handler.mouseup);
+        enableUserSelect();
+      },
+    };
+
+    watch(() => props.modelValue, (val) => {
+      if (val == null) {
+        state.val = null;
+        return;
+      }
+      if (state.val !== 100 - val) state.val = 100 - val;
+    });
+    watch(() => props.saturation, (val) => {
+      if (val == null) {
+        state.saturation = undefined;
+        return;
+      }
+      if (state.saturation !== val) state.saturation = val;
+    });
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div
+          className={getComponentCls('color-sv-panel')}
+          style={styles.value}
+          onMouseDown={props.disable ? undefined : handler.mousedown}
+          ref={onRef.el}
+          onDoubleClick={emit.onDblclick}
+        >
+          <span className="color-sv-thumb" style={thumbStyles.value}/>
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/ColorPicker/sub/color-alpha-slider.scss

@@ -0,0 +1,8 @@
+@include prefix(color-alpha-slider) {
+  background-size: 10px 10px;
+  .color-alpha-shadow {
+    pointer-events: none;
+    border-radius: plv(box-size-small-border-radius);
+    @include inset;
+  }
+}

package/src/packages/components/ColorPicker/sub/color-hue-slider.scss

@@ -0,0 +1,3 @@
+@include prefix(color-hue-slider) {
+  background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+}

package/src/packages/components/ColorPicker/sub/color-slider.scss

@@ -0,0 +1,22 @@
+@include prefix(color-slider) {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: plv(box-size-small-border-radius);
+
+  .color-slider-thumb {
+    position: relative;
+    pointer-events: none;
+    z-index: 1;
+    margin: 0 1px;
+    display: inline-block;
+    background-color: white;
+    box-sizing: border-box;
+  }
+
+  &.color-slider-disabled {
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,55 @@
+@include prefix(color-sv-panel) {
+  position: relative;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  display: inline-block;
+  border-radius: plv(box-size-small-border-radius);
+
+  &:before, &:after, & span {
+    pointer-events: none;
+  }
+
+  &, &:before, &:after {
+    border-radius: plv(box-size-small-border-radius);
+  }
+
+  &:before, &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: '';
+  }
+
+  &:before {
+    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
+  }
+
+  &:after {
+    background: linear-gradient(to top, black, rgba(255, 255, 255, 0));
+  }
+
+  .color-sv-thumb {
+    display: inline-block;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    left: 0;
+    top: 0;
+    z-index: 1;
+
+    &:after {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 10px;
+      border: solid 2px white;
+      position: absolute;
+      top: -5px;
+      left: -5px;
+      content: '';
+      box-sizing: border-box;
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+import {computed, reactive, watch} from "plain-design-composition";
+import {PlainColor} from "./utils/PlainColor";
+import {iColorPublicPropsType} from "./utils/color-picker.utils";
+
+export function useColorPanelEditor(
+  {
+    getColor,
+    onChange,
+    props,
+  }: {
+    getColor: () => PlainColor,
+    onChange: (color: PlainColor) => void,
+    props: iColorPublicPropsType,
+  }
+) {
+
+  const state = reactive({
+    editValue: (() => {
+      const { r, g, b, a, hex } = getColor();
+      return {
+        r, g, b, a, hex
+      };
+    })()
+  });
+
+  watch(() => getColor(), color => {
+    const { r, g, b, a, hex } = color;
+    state.editValue = { r, g, b, a, hex };
+  });
+
+  const handler = {
+    onHexChange: (e: any) => {
+      let hex = e.target.value;
+      state.editValue.hex = hex;
+      if (hex.length < 6) {
+        return;
+      }
+      if (hex.indexOf('#') === -1) {
+        hex = '#' + hex;
+      }
+      let color: PlainColor;
+      try {
+        color = new PlainColor(hex);
+      } catch (e) {
+        color = new PlainColor('#000000');
+      }
+      onChange(color);
+    },
+    onRChange: (e: any) => {
+      state.editValue.r = e.target.value || 0;
+      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ r: state.editValue.r }));
+    },
+    onGChange: (e: any) => {
+      state.editValue.g = e.target.value || 0;
+      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ g: state.editValue.g }));
+    },
+    onBChange: (e: any) => {
+      state.editValue.b = e.target.value || 0;
+      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ b: state.editValue.b }));
+    },
+    onAlphaChange: (e: any) => {
+      let val = e.target.value;
+      state.editValue.a = val;
+      if (!val.trim()) {
+        return;
+      }
+      if (val.charAt(val.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ a: val }));
+    },
+    onInputFocus: (e: any) => {
+      const el = e.target as HTMLInputElement;
+      const length = el.value.length;
+      el.setSelectionRange(0, length, 'backward');
+    },
+  };
+
+  const renderContent = computed(() => {
+    const { r, g, b, a, hex } = state.editValue;
+    return () => (
+      <div className="color-panel-editor">
+        <div>
+          <input type="text" value={hex.replace('#', '')} onInput={handler.onHexChange} onFocus={handler.onInputFocus}/>
+          <span>HEX</span>
+        </div>
+        <div>
+          <input type="text" value={r} onInput={handler.onRChange} onFocus={handler.onInputFocus}/>
+          <span>R</span>
+        </div>
+        <div>
+          <input type="text" value={g} onInput={handler.onGChange} onFocus={handler.onInputFocus}/>
+          <span>G</span>
+        </div>
+        <div>
+          <input type="text" value={b} onInput={handler.onBChange} onFocus={handler.onInputFocus}/>
+          <span>B</span>
+        </div>
+        <div>
+          <input type="text" value={a} onInput={handler.onAlphaChange} readOnly={!props.enableAlpha} onFocus={handler.onInputFocus}/>
+          <span>A</span>
+        </div>
+      </div>
+    );
+  });
+
+  return {
+    renderContent,
+  };
+}