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

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

@@ -1,125 +1,146 @@
-import './color-panel.scss';
-import {designComponent, getComponentCls, iMouseEvent, reactive, useModel} from "@peryl/react-compose";
-import {ColorSvPanel} from "./sub/ColorSvPanel";
-import {ColorHueSlider} from "./sub/ColorHueSlider";
-import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";
-import {PlainColor} from "./utils/PlainColor";
-import {useColorPanelEditor} from "./useColorPanelEditor";
-import {useColorPanelHistory} from "./useColorPanelHistory";
-import {ColorPanelPublicPropOptions} from "./utils/color-picker.utils";
-
-
-export const ColorPanel = designComponent({
-  name: 'color-panel',
-  props: {
-    ...ColorPanelPublicPropOptions
-  },
-  emits: {
-    onUpdateModelValue: (val: any) => true,
-    onDblclickSvPanel: (e: iMouseEvent) => true,
-  },
-  inheritPropsType: HTMLDivElement,
-  setup({ props, event: { emit } }) {
-
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, {
-      onChange: (value) => {
-        const prev = state.colorState;
-        const colorState = utils.getState(value, prev);
-        if (colorState !== prev) {
-          state.colorState = colorState;
-        }
-      },
-    });
-
-    const utils = {
-      getState: (value: string | null | undefined, prev?: iColorState): iColorState => {
-        if (!prev) {
-          return { color: new PlainColor(value || '#FFFFFF'), value };
-        } else {
-          if (prev.value == value) {
-            return prev;
-          } else {
-            return { color: new PlainColor(value || '#FFFFFF'), value };
-          }
-        }
-      },
-    };
-
-    const state = reactive({
-      colorState: utils.getState(model.value)
-    });
-
-    const handler = {
-      svChange: ({ value, saturation }: { value: number, saturation: number }) => {
-        const color = state.colorState.color.useHsva({ v: value, s: saturation });
-        state.colorState = { color, value: color.value };
-        model.value = state.colorState.value!;
-      },
-      hueChange: (hue: number) => {
-        const color = state.colorState.color.useHsva({ h: hue });
-        state.colorState = { color, value: color.value };
-        model.value = state.colorState.value!;
-      },
-      alphaChange: (alpha: number) => {
-        const color = state.colorState.color.useHsva({ a: alpha / 100 });
-        state.colorState = { color, value: color.value };
-        model.value = state.colorState.value!;
-      },
-    };
-
-    const editor = useColorPanelEditor({
-      props,
-      getColor: () => state.colorState.color,
-      onChange: color => {
-        state.colorState = { color, value: color.value };
-        model.value = color.value;
-      }
-    });
-
-    const history = useColorPanelHistory({
-      onChange: color => {
-        state.colorState = { color, value: color.value };
-        model.value = color.value;
-      }
-    });
-
-    return {
-      render: () => (
-        <div className={getComponentCls('color-panel')}>
-          <div className="color-panel-card">
-            <ColorSvPanel
-              hue={state.colorState.color.h}
-              modelValue={state.colorState.color.v}
-              saturation={state.colorState.color.s}
-              onChange={handler.svChange}
-              onDblclick={emit.onDblclickSvPanel}
-              disable={props.disableSvPanel}
-            />
-            <div className="color-panel-slider-bar">
-              <div className="color-panel-slider-container">
-                <ColorHueSlider
-                  modelValue={state.colorState.color.h}
-                  onChange={handler.hueChange}
-                />
-                <ColorAlphaSlider
-                  color={state.colorState.color.hex}
-                  modelValue={state.colorState.color.a * 100}
-                  onChange={handler.alphaChange}
-                  disabled={!props.enableAlpha}
-                />
-              </div>
-              <div className="color-panel-slider-color" style={{ backgroundColor: state.colorState.color.hex }}/>
-            </div>
-            {editor.renderContent.value()}
-          </div>
-          {history.renderContent.value()}
-        </div>
-      )
-    };
-  },
-});
-
-interface iColorState {
-  color: PlainColor,
-  value: string | null | undefined
-}
+import './color-panel.scss';
+import {designComponent, getComponentCls, iMouseEvent, reactive, useModel} from "@peryl/react-compose";
+import {ColorSvPanel} from "./sub/ColorSvPanel";
+import {ColorHueSlider} from "./sub/ColorHueSlider";
+import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";
+import {PlainColor} from "./utils/PlainColor";
+import {useColorPanelEditor} from "./useColorPanelEditor";
+import {useColorPanelHistory} from "./useColorPanelHistory";
+import {ColorPanelPublicPropOptions} from "./utils/color-picker.utils";
+import {Icon} from "../Icon";
+import {$message} from "../$message";
+import {i18n} from "../i18n";
+
+
+export const ColorPanel = designComponent({
+  name: 'color-panel',
+  props: {
+    ...ColorPanelPublicPropOptions
+  },
+  emits: {
+    onUpdateModelValue: (val: any) => true,
+    onDblclickSvPanel: (e: iMouseEvent) => true,
+  },
+  inheritPropsType: HTMLDivElement,
+  setup({ props, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, {
+      onChange: (value) => {
+        const prev = state.colorState;
+        const colorState = utils.getState(value, prev);
+        if (colorState !== prev) {
+          state.colorState = colorState;
+        }
+      },
+    });
+
+    const utils = {
+      getState: (value: string | null | undefined, prev?: iColorState): iColorState => {
+        if (!prev) {
+          return { color: new PlainColor(value || '#FFFFFF'), value };
+        } else {
+          if (prev.value == value) {
+            return prev;
+          } else {
+            return { color: new PlainColor(value || '#FFFFFF'), value };
+          }
+        }
+      },
+    };
+
+    const state = reactive({
+      colorState: utils.getState(model.value)
+    });
+
+    const handler = {
+      svChange: ({ value, saturation }: { value: number, saturation: number }) => {
+        const color = state.colorState.color.useHsva({ v: value, s: saturation });
+        state.colorState = { color, value: color.value };
+        model.value = state.colorState.value!;
+      },
+      hueChange: (hue: number) => {
+        const color = state.colorState.color.useHsva({ h: hue });
+        state.colorState = { color, value: color.value };
+        model.value = state.colorState.value!;
+      },
+      alphaChange: (alpha: number) => {
+        const color = state.colorState.color.useHsva({ a: alpha / 100 });
+        state.colorState = { color, value: color.value };
+        model.value = state.colorState.value!;
+      },
+      dropColor: () => {
+        if (!('EyeDropper' in window)) {
+          $message.error(i18n.$it('colorPicker.notSupportDropper').d('您的浏览器不支持颜色拾取器，推荐使用谷歌浏览器'));
+          return;
+        }
+        const close = $message(i18n.$it('colorPicker.exitDropperMode').d('按 ESC 键关闭取色吸管'), { time: null });
+        const eyeDropper = new (window as any).EyeDropper();
+        eyeDropper.open().then((result: { sRGBHex: string }) => {
+          state.colorState = utils.getState(result.sRGBHex);
+          model.value = state.colorState.value!;
+          close();
+        }).catch(() => {
+          close();
+        });
+      },
+    };
+
+    const editor = useColorPanelEditor({
+      props,
+      getColor: () => state.colorState.color,
+      onChange: color => {
+        state.colorState = { color, value: color.value };
+        model.value = color.value;
+      }
+    });
+
+    const history = useColorPanelHistory({
+      onChange: color => {
+        state.colorState = { color, value: color.value };
+        model.value = color.value;
+      }
+    });
+
+    return {
+      render: () => (
+        <div className={getComponentCls('color-panel')}>
+          <div className="color-panel-card">
+            <ColorSvPanel
+              hue={state.colorState.color.h}
+              modelValue={state.colorState.color.v}
+              saturation={state.colorState.color.s}
+              onChange={handler.svChange}
+              onDblclick={emit.onDblclickSvPanel}
+              disable={props.disableSvPanel}
+            />
+            <div className="color-panel-slider-bar">
+              <div className="color-panel-dropper" onClick={handler.dropColor}>
+                <Icon icon="ie-dropper"/>
+              </div>
+              <div className="color-panel-slider-container">
+                <ColorHueSlider
+                  modelValue={state.colorState.color.h}
+                  onChange={handler.hueChange}
+                />
+                <ColorAlphaSlider
+                  color={state.colorState.color.hex}
+                  modelValue={state.colorState.color.a * 100}
+                  onChange={handler.alphaChange}
+                  disabled={!props.enableAlpha}
+                />
+              </div>
+              <div className="color-panel-slider-color" style={{ backgroundColor: state.colorState.color.hex }}/>
+            </div>
+            {editor.renderContent.value()}
+          </div>
+          {history.renderContent.value()}
+        </div>
+      )
+    };
+  },
+});
+
+interface iColorState {
+  color: PlainColor,
+  value: string | null | undefined
+}

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