plain-design 1.0.0-beta.16 → 1.0.0-beta.160

package/src/packages/components/Checkbox/checkbox.scss

@@ -51,6 +51,10 @@
 
   @include sizeMixin(checkbox, (font-size)) {
     line-height: 1.7em;
+
+    .plain-click-node {
+      border-radius: $border-radius;
+    }
   }
 
   &:focus {

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

@@ -1,14 +1,14 @@
 import './checkbox.scss';
-import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {useClickWave} from "../../directives/ClickWave";
 import {CheckboxInner} from "../CheckboxInner";
 import {CheckboxGroupCollector} from "../CheckboxGroup";
 import {i18n} from "../../i18n";
-import {getKey, KEY} from "../KeyboardService";
+import {getKeyNameByKeyboardEvent, eKeyboardKeys} from "@peryl/utils/keyboard";
 import {Transition} from "../Transition";
 
 export const Checkbox = designComponent({
@@ -99,7 +99,7 @@ export const Checkbox = designComponent({
         }*/
       },
       keydown: (e: iKeyboardEvent) => {
-        if (getKey(e) === KEY.space) {
+        if (getKeyNameByKeyboardEvent(e) === eKeyboardKeys.space) {
           e.preventDefault();
           e.stopPropagation();
           handler.click(e as any);
@@ -125,14 +125,12 @@ export const Checkbox = designComponent({
           onKeyDown={handler.keydown}
           ref={onRef.el}>
           <span className="plain-click-node">
-            <Transition switch name={getComponentCls("transition-fade")} mode="out-in">
-              <CheckboxInner
-                checkStatus={checkStatus.value}
-                key={checkStatus.value}
-                disabled={editComputed.value.disabled!}/>
-            </Transition>
+            <CheckboxInner
+              checkStatus={checkStatus.value}
+              key={checkStatus.value}
+              disabled={editComputed.value.disabled!}/>
           </span>
-          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n('base.select.all').d('全选') : '')}</span>)}
+          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n.$it('base.select.all').d('全选') : '')}</span>)}
         </div>))
     };
   },

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";
@@ -116,7 +116,7 @@ export const CheckboxGroup = designComponent({
          */
         add: (val: (string | number)[]) => {
           if (utils.exceed.max(val)) {
-            $message.warn({ render: () => i18n('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
           } else {
             modelValue.value = val;
           }
@@ -128,7 +128,7 @@ export const CheckboxGroup = designComponent({
          */
         delete: (val: (string | number)[]) => {
           if (utils.exceed.min(val)) {
-            $message.warn({ render: () => i18n('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
           } else {
             modelValue.value = val;
           }

package/src/packages/components/CheckboxInner/checkbox-inner.scss

@@ -6,6 +6,7 @@
   vertical-align: -0.15em;
   border-width: 1px;
   border-style: solid;
+  border-radius: plv(box-size-small-border-radius);
   //border-radius: 2px;
 
   &.checkbox-inner-status-check {
@@ -14,7 +15,7 @@
 
     .checkbox-inner-check-polyline {
       fill: transparent;
-      stroke: white;
+      stroke: plv(pbfc);
       stroke-width: 10;
     }
   }

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {CheckboxStatus} from "../../utils/constant";
 import './checkbox-inner.scss';
 import {SVGAttributes} from "react";

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

@@ -1,5 +1,5 @@
-import {createCounter} from "plain-utils/utils/createCounter";
-import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "plain-design-composition";
+import {createCounter} from "@peryl/utils/createCounter";
+import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import CollapseGroup from "../CollapseGroup";
 import Icon from "../Icon";
 import './collapse.scss';

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useModel, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, useModel, useRefs} from "@peryl/react-compose";
 
 export const CollapseGroup = designComponent({
   name: 'collapse-group',

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

@@ -1,10 +1,10 @@
 import React from "react";
-import {designComponent, getComponentCls, onBeforeMount, onUpdated, useReference, watch} from "plain-design-composition";
+import {designComponent, getComponentCls, onBeforeMount, onUpdated, useReference, watch} from "@peryl/react-compose";
 import {findDOMNode} from "react-dom";
-import {unit} from "plain-utils/string/unit";
-import {addClass} from "plain-utils/dom/addClass";
-import {delay} from "plain-utils/utils/delay";
-import {removeClass} from "plain-utils/dom/removeClass";
+import {unit} from "@peryl/utils/unit";
+import {addClass} from "@peryl/utils/addClass";
+import {delay} from "@peryl/utils/delay";
+import {removeClass} from "@peryl/utils/removeClass";
 import {ClassWrapper} from "../Reference";
 
 type CollapseElStyles = {

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

@@ -1,125 +1,146 @@
-import './color-panel.scss';
-import {designComponent, getComponentCls, iMouseEvent, reactive, useModel} from "plain-design-composition";
-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;
+      }
+    }
+  }
+}

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

@@ -31,6 +31,12 @@
       }
     }
   }
+
+  &.input-mode-text {
+    .color-picker-tag {
+      margin-left: 0px;
+    }
+  }
 }
 
 @include prefix(color-button) {