plain-design 1.0.0-beta.145 → 1.0.0-beta.147

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/color-picker.scss

@@ -1,64 +1,64 @@
-@include prefix(color-picker) {
-
-  .color-picker-tag {
-    position: absolute;
-    left: 0;
-    margin-left: 8px;
-    flex: 0 0 auto;
-    padding: 0 !important;
-    background-color: plv(secondary-light-3);
-    background-size: 10px 10px;
-    align-self: center;
-
-    .color-picker-tag-inner {
-      @include inset;
-    }
-  }
-  input {
-    padding-left: 4px;
-    border-left: none !important;
-  }
-  @include sizeMixin(input, ()) {
-    padding-left: calc(#{$height} - 12px + 8px);
-    .color-picker-tag {
-      width: calc(#{$height} - 12px);
-      height: calc(#{$height} - 12px);
-      box-sizing: border-box;
-      border-radius: $border-radius;
-
-      .color-picker-tag-inner {
-        border-radius: $border-radius;
-      }
-    }
-  }
-
-  &.input-mode-text {
-    .color-picker-tag {
-      margin-left: 0px;
-    }
-  }
-}
-
-@include prefix(color-button) {
-  display: inline-flex;
-  align-items: center;
-  @include sizeMixin(color-button, ()) {
-    span:first-child {
-      width: calc(#{$height} - 18px);
-      height: calc(#{$height} - 18px);
-      box-sizing: border-box;
-      border-radius: $border-radius;
-      background-size: 10px 10px;
-      position: relative;
-      display: inline-block;
-      vertical-align: sub;
-      margin-right: 4px;
-
-      & > span:first-child {
-        border-radius: $border-radius;
-        @include inset;
-      }
-    }
-  }
-
-}
+@include prefix(color-picker) {
+
+  .color-picker-tag {
+    position: absolute;
+    left: 0;
+    margin-left: 8px;
+    flex: 0 0 auto;
+    padding: 0 !important;
+    background-color: plv(secondary-light-3);
+    background-size: 10px 10px;
+    align-self: center;
+
+    .color-picker-tag-inner {
+      @include inset;
+    }
+  }
+  input {
+    padding-left: 4px;
+    border-left: none !important;
+  }
+  @include sizeMixin(input, ()) {
+    padding-left: calc(#{$height} - 12px + 8px);
+    .color-picker-tag {
+      width: calc(#{$height} - 12px);
+      height: calc(#{$height} - 12px);
+      box-sizing: border-box;
+      border-radius: $border-radius;
+
+      .color-picker-tag-inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+
+  &.input-mode-text {
+    .color-picker-tag {
+      margin-left: 0px;
+    }
+  }
+}
+
+@include prefix(color-button) {
+  display: inline-flex;
+  align-items: center;
+  @include sizeMixin(color-button, ()) {
+    span:first-child {
+      width: calc(#{$height} - 18px);
+      height: calc(#{$height} - 18px);
+      box-sizing: border-box;
+      border-radius: $border-radius;
+      background-size: 10px 10px;
+      position: relative;
+      display: inline-block;
+      vertical-align: sub;
+      margin-right: 4px;
+
+      & > span:first-child {
+        border-radius: $border-radius;
+        @include inset;
+      }
+    }
+  }
+
+}

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>
+        );
+      }
+    };
+  },
+});