@easyv/react-components 0.1.0 → 0.2.1

package/dist/ColorsPicker/style/index.less

@@ -0,0 +1,515 @@
+// panel
+.colors-picker-panel-container {
+  width: 244px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-2);
+  background: var(--color-bg-1);
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
+}
+
+.colors-picker-panel {
+  padding: 12px;
+}
+
+.colors-picker-control-wrapper {
+  margin: 12px 0;
+  display: flex;
+  gap: 8px;
+}
+
+.colors-picker-control-bars {
+  flex: 1;
+}
+
+.colors-picker-input-wrapper {
+  display: flex;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.colors-picker-input {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+
+  &.colors-picker-input-hex {
+    flex: 2.1875;
+  }
+
+  .arco-input {
+    font-size: 12px;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+  }
+}
+
+.colors-picker-input-label {
+  margin-top: 4px;
+  color: var(--color-text-3);
+}
+
+// 色板
+.colors-picker-palette {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  cursor: pointer;
+  background-image: linear-gradient(0deg, #000, transparent),
+    linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
+  border-radius: 2px;
+}
+
+.colors-picker-handler {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 2px solid #fff;
+  transform: translate(-50%, -50%);
+}
+
+// 色相、透明度的控制条
+.colors-picker-control-bar {
+  position: relative;
+  padding: 0 5px;
+  height: 10px;
+  border-radius: 5px;
+  border: 1px solid #17171a;
+  margin: 3px 0;
+
+  .colors-picker-control-bar-inner {
+    position: relative;
+    height: 100%;
+  }
+
+  .colors-picker-handler {
+    width: 10px;
+    height: 10px;
+    top: -1px;
+    transform: translateX(-50%);
+  }
+
+  &.colors-picker-control-hue {
+    background-image: linear-gradient(
+      90deg,
+      red,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      red
+    );
+
+    .colors-picker-control-bar-inner {
+      background-image: linear-gradient(
+        90deg,
+        red,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        red
+      );
+    }
+  }
+
+  &.colors-picker-control-alpha {
+    background-image: conic-gradient(
+      #ccc 0,
+      #ccc 90deg,
+      #fff 90deg,
+      #fff 180deg,
+      #ccc 180deg,
+      #ccc 270deg,
+      #fff 270deg,
+      #fff 360deg
+    );
+    background-size: 6px 6px;
+  }
+}
+
+.colors-picker-control-alpha {
+  margin-top: 7px;
+}
+
+.colors-picker-control-bar-right-box {
+  position: absolute;
+  right: -5px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  top: 0;
+  width: 5px;
+  height: 8px;
+}
+
+// 最近使用
+.colors-picker-history {
+  border-top: 1px solid var(--color-border-1);
+  padding: 12px;
+}
+
+.colors-picker-history-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.colors-picker-history-icon {
+  width: 12px;
+  height: 12px;
+  color: var(--color-text-2);
+  transition: transform linear 200ms;
+
+  &.colors-picker-history-collapsed {
+    transform: rotate(-90deg);
+  }
+}
+
+.colors-picker-history-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+.colors-picker-history-type-title {
+  margin-top: 12px;
+  color: var(--color-text-2);
+}
+
+// 最近使用 - 纯色
+.colors-picker-history-pure-wrapper {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+// 预览颜色
+.colors-picker-preview {
+  position: relative;
+  overflow: hidden;
+  width: 28px;
+  height: 28px;
+  border-radius: 1px;
+  background-image: conic-gradient(
+    #ccc 0,
+    #ccc 90deg,
+    #fff 90deg,
+    #fff 180deg,
+    #ccc 180deg,
+    #ccc 270deg,
+    #fff 270deg,
+    #fff 360deg
+  );
+  background-size: 8px 8px;
+
+  .colors-picker-preview-color {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.colors-picker-preview-circle {
+    border-radius: 50%;
+  }
+
+  &.colors-picker-preview-border {
+    border: 1px solid #333;
+  }
+}
+
+// 多色
+.pures-color-picker-trigger {
+  position: relative;
+  width: 100%;
+  height: 28px;
+  padding: 7px;
+  border: 1px solid var(--color-border-2);
+  border-radius: 4px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    top: 7px;
+    left: 7px;
+    width: calc(100% - 14px);
+    height: calc(100% - 14px);
+    border-radius: 1px;
+    background-image: conic-gradient(
+      #ccc 0,
+      #ccc 90deg,
+      #fff 90deg,
+      #fff 180deg,
+      #ccc 180deg,
+      #ccc 270deg,
+      #fff 270deg,
+      #fff 360deg
+    );
+    background-size: 8px 8px;
+  }
+
+  .pures-color-picker-trigger-color {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 1px;
+  }
+}
+
+.pures-color-picker-cards {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 6px 11px;
+  border-bottom: 1px solid var(--color-border-1);
+  gap: 4px;
+
+  .pures-color-picker-card {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    border-width: 2px;
+    border-style: solid;
+    cursor: pointer;
+  }
+
+  .pures-color-picker-add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.08);
+    cursor: pointer;
+    font-size: 14px;
+  }
+}
+
+// 取色器
+.colors-picker-eye-dropper {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: var(--color-text-2);
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(var(--primary-6));
+    color: var(--color-text-1);
+  }
+}
+
+// 纯色输入框
+.pure-color-picker {
+  display: flex;
+  gap: 12px;
+
+  .pure-color-picker-hex {
+    font-size: 12px;
+  }
+
+  .pure-color-picker-alpha {
+    width: 64px;
+    flex-shrink: 0;
+    font-size: 12px;
+  }
+}
+
+.pure-color-picker-preview {
+  width: 28px;
+  height: 28px;
+  padding: 7px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-2);
+  background: var(--color-bg-white);
+}
+
+.pure-color-picker-preview-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 1px;
+  background-image: conic-gradient(
+    #ccc 0deg,
+    #ccc 90deg,
+    #fff 90deg,
+    #fff 180deg,
+    #ccc 180deg,
+    #ccc 270deg,
+    #fff 270deg,
+    #fff 360deg,
+    #ccc 360deg
+  );
+  background-size: 8px 8px;
+
+  div {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// 多种类型的颜色选择 Tab
+.colors-picker-tabs {
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid var(--color-border-1);
+
+  .colors-picker-tab {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    cursor: pointer;
+
+    &.active {
+      width: 18px;
+      height: 18px;
+      border: 1px solid rgb(var(--primary-6));
+    }
+
+    &.colors-picker-tab-pure {
+      background-color: rgba(180, 183, 193, 0.8);
+
+      &.active {
+        background-color: rgba(var(--primary-6), 0.8);
+      }
+    }
+
+    &.colors-picker-tab-pures {
+      background-image: linear-gradient(
+        to right,
+        rgba(180, 183, 193, 0.8) 0%,
+        rgba(180, 183, 193, 0.8) 33.3%,
+        rgba(180, 183, 193, 0.6) 33.3%,
+        rgba(180, 183, 193, 0.6) 66.6%,
+        rgba(180, 183, 193, 0.4) 66.6%,
+        rgba(180, 183, 193, 0.4) 100%
+      );
+
+      &.active {
+        background-image: linear-gradient(
+          to right,
+          rgba(var(--primary-6), 0.8) 0%,
+          rgba(var(--primary-6), 0.8) 33.3%,
+          rgba(var(--primary-6), 0.6) 33.3%,
+          rgba(var(--primary-6), 0.6) 66.6%,
+          rgba(var(--primary-6), 0.4) 66.6%,
+          rgba(var(--primary-6), 0.4) 100%
+        );
+      }
+    }
+
+    &.colors-picker-tab-linear {
+      background-image: linear-gradient(
+        to bottom,
+        rgba(180, 183, 193, 1),
+        rgba(180, 183, 193, 0.1)
+      );
+
+      &.active {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(var(--primary-6), 1),
+          rgba(var(--primary-6), 0.1)
+        );
+      }
+    }
+  }
+}
+
+// 渐变的点控制
+.colors-picker-linear-points-bar-wrapper {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .colors-picker-linear-points-bar {
+    position: relative;
+    flex: 1;
+    height: 8px;
+    border-radius: 4px;
+    padding: 0 4px;
+    background-image: conic-gradient(
+      #ccc 0deg,
+      #ccc 90deg,
+      #fff 90deg,
+      #fff 180deg,
+      #ccc 180deg,
+      #ccc 270deg,
+      #fff 270deg,
+      #fff 360deg,
+      #ccc 360deg
+    );
+    background-size: 8px 8px;
+  }
+
+  .colors-picker-points-bar-prev-half,
+  .colors-picker-points-bar-next-half {
+    position: absolute;
+    width: 4px;
+    height: 8px;
+    top: 0;
+  }
+
+  .colors-picker-points-bar-prev-half {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    left: 0;
+  }
+
+  .colors-picker-points-bar-next-half {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    right: 0;
+  }
+
+  .colors-picker-linear-points-bar-color {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .colors-picker-linear-point {
+    position: absolute;
+    top: -1px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    cursor: pointer;
+    transform: translateX(-50%);
+
+    &.active {
+      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.5);
+    }
+  }
+
+  .colors-picker-linear-points-switch {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: var(--color-text-2);
+    background: rgba(255, 255, 255, 0.08);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-text-1);
+    }
+  }
+}

package/dist/ColorsPicker/utils.d.ts

@@ -0,0 +1,29 @@
+import { ColorValueMap } from './interface';
+export declare function toHex(x: any): string;
+export declare function resolveColor(colorParam: string): {
+    r?: undefined;
+    g?: undefined;
+    b?: undefined;
+    a?: undefined;
+    hex?: undefined;
+} | {
+    r: any;
+    g: any;
+    b: any;
+    a: any;
+    hex: string;
+};
+export declare function transformColor(color: any, a: any): string | undefined;
+export declare function getBackgroundAccordingColor(color: any, fixedAngle?: number): {
+    backgroundImage: string;
+    background?: undefined;
+} | {
+    background: any;
+    backgroundImage?: undefined;
+} | undefined;
+export declare function getMiddleColor(colors: any, offset: any): any;
+export declare function getHexValue(hex: string): string;
+export declare function getLinearGradientStyle(color: ColorValueMap['linear']): {
+    backgroundImage: string;
+    opacity: number;
+};