Add ColorPicker

.prettierrc

@@ -0,0 +1,5 @@
+{
+ "eslintIntegration": true,
+ "singleQuote": true,
+ "semi": false
+}

packages/veui-loader/src/index.js

@@ -5,6 +5,13 @@ import slash from 'slash'
 import loaderUtils from 'loader-utils'
 import { kebabCase, camelCase, pascalCase, getJSON, normalize } from './utils'
 import COMPONENTS from 'veui/components.json'
+import getDebug from "debug"
+
+const debug = getDebug('veui-loader:')
+const debugFilterKeyword = (process.env.DEBUG_FILTER_KEYWORD || '').toLowerCase()
+const debugFilter = function (modulePath) {
+  return debugFilterKeyword ? modulePath.toLowerCase().indexOf(debugFilterKeyword) >= 0 : true
+}
 
 const COMPONENTS_DIRNAME = 'components'
 const EXT_TYPES = {
@@ -179,6 +186,7 @@ function getParts (component, options) {
         template: fileName
       })
       let peerPath = slash(path.join(pack, packPath, peerComponent))
+      if (debugFilter(peerPath)) debug(`Peer path: ${peerPath}`)
       pushPart(acc, { path: peerPath })
       return acc
     },
@@ -278,7 +286,11 @@ async function assurePath (modulePath, resolve) {
     if (typeof resolve === 'function') {
       try {
         resolveCache[modulePath] = !!(await resolve(modulePath))
+        if (!resolveCache[modulePath]) {
+          if (debugFilter(modulePath)) debug(`Not found: ${modulePath}`)
+        }
       } catch (e) {
+        if (debugFilter(modulePath)) debug(`Can not resolve module: ${modulePath}`)
         resolveCache[modulePath] = false
       }
     }

packages/veui-theme-one/components/ColorPalette.js

@@ -0,0 +1,10 @@
+
+import config from 'veui/managers/config'
+
+config.defaults({
+  ui: {
+    size: {
+      values: ['small']
+    }
+  }
+}, 'colorpalette')

packages/veui-theme-one/components/ColorPicker.js

@@ -0,0 +1,26 @@
+
+import config from 'veui/managers/config'
+
+config.defaults({
+  ui: {
+    size: {
+      values: ['small'],
+      data: {
+        default: {
+          shadeFieldSize: [294, 294]
+        },
+        small: {
+          shadeFieldSize: [248, 180]
+        }
+      }
+    },
+    swatch: {
+      boolean: true,
+      default: false
+    },
+    tip: {
+      boolean: true,
+      default: false
+    }
+  }
+}, 'colorpicker')

packages/veui-theme-one/components/ColorSwatch.js

@@ -0,0 +1,14 @@
+
+import config from 'veui/managers/config'
+
+config.defaults({
+  ui: {
+    size: {
+      values: ['small']
+    },
+    tip: {
+      boolean: true,
+      default: false
+    }
+  }
+}, 'colorswatch')

packages/veui-theme-one/components/color-palette.less

@@ -0,0 +1,68 @@
+@import "../lib.less";
+
+.veui-color-palette {
+  padding: 10px 15px;
+  border-top: 1px solid @veui-gray-color-8;
+
+  &-colors {
+    .clearfix();
+  }
+
+  &-color {
+    float: left;
+    margin: 5px;
+    width: @veui-height-tiny;
+    height: @veui-height-tiny;
+    border: 1px solid fade(@veui-gray-color-3, 20%);
+    border-radius: 4px;
+
+    div {
+      width: 100%;
+      height: 100%;
+    }
+
+    & > div {
+      .veui-transparency-grid-background();
+    }
+
+    // add button
+    line-height: @veui-height-tiny;
+    text-align: center;
+    background: @veui-gray-color-6;
+
+    path {
+      fill: @veui-gray-color-5;
+    }
+
+    &-outside {
+      opacity: .7;
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        content: "移除";
+        position: absolute;
+        font-size: 12px;
+        width: 40px;
+        top: -20px;
+        left: -10px;
+      }
+    }
+
+    &-putback {
+      transition: transform 300ms;
+    }
+  }
+
+  &[ui~="small"] {
+    padding: 6px;
+
+    .veui-color-palette-color {
+      margin: 4px;
+      width: 17px;
+      height: 17px;
+      line-height: 17px;
+      border-radius: 2px;
+    }
+  }
+}

packages/veui-theme-one/components/color-picker.less

@@ -0,0 +1,101 @@
+@import "../lib.less";
+
+.veui-color-shade-field {
+  position: relative;
+
+  &-shade {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-aperture {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    border: 2px solid @veui-gray-color-5;
+    border-radius: 100%;
+    box-shadow: 0 2px 4px 0 fade(#000, 50%);
+  }
+}
+
+.veui-color-slider {
+  margin: 5px 0;
+  padding: 3px 0;
+
+  .veui-slider {
+    height: 18px;
+
+    .veui-slider-thumb {
+      top: -2px;
+    }
+
+    .veui-slider-custom-thumb {
+      width: 8px;
+      height: 22px;
+      border: 1px solid rgba(51, 51, 51, .8);
+      background: rgba(255, 255, 255, .9);
+      box-shadow: 1px 1px 4px rgba(0, 0, 0, .8);
+      border-radius: 2px;
+    }
+
+    .veui-slider-custom-track {
+      width: 100%;
+      height: 18px;
+    }
+  }
+}
+
+.veui-color-hue-slider {
+  .veui-slider-custom-track {
+    background: url("data:image/svg+xml;utf8;<svg xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='a' x1='0%' y1='0%' y2='0%'><stop offset='0%' stop-color='red'/><stop offset='16.7%' stop-color='%23ff0'/><stop offset='33.3%' stop-color='%230f0'/><stop offset='50%' stop-color='%230ff'/><stop offset='66.7%' stop-color='%2300f'/><stop offset='83.3%' stop-color='%23f0f'/><stop offset='100%' stop-color='red'/></linearGradient></defs><rect width='100%' height='100%' fill='url(%23a)'/></svg>");
+    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+  }
+}
+
+.veui-color-alpha-slider {
+  .veui-slider-track {
+    .veui-transparency-grid-background();
+  }
+}
+
+.veui-color-picker {
+  width: 336px;
+  color: #333;
+  border: 1px solid @veui-gray-color-3;
+  box-shadow: 0 1px 5px 0 fade(#000, 20%);
+  border-radius: 2px;
+
+  &-main {
+    padding: 20px;
+
+    &-panel {
+      &-sliders {
+        margin-top: 15px;
+      }
+    }
+
+    .veui-color-swatch {
+      margin-top: 15px;
+    }
+  }
+
+  &[ui~="small"] {
+    width: 250px + 20px;
+
+    .veui-color-picker-main {
+      padding: 10px;
+
+      &-panel {
+        &-sliders {
+          margin-top: 10px;
+        }
+      }
+
+      .veui-color-swatch {
+        margin-top: 10px;
+      }
+    }
+  }
+}