From d15babb5b779bb17ce9fad8455b13ed83663a2a1 Mon Sep 17 00:00:00 2001 From: SlaneYang Date: Thu, 21 Nov 2019 18:03:08 +0800 Subject: [PATCH 1/3] feat(twitter): Add Twitter color pick --- example/App.vue | 11 +- src/components/Twitter.vue | 221 +++++++++++++++++++++++++++++++++++++ src/index.js | 2 + 3 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 src/components/Twitter.vue diff --git a/example/App.vue b/example/App.vue index 2a78ce5..93812eb 100644 --- a/example/App.vue +++ b/example/App.vue @@ -52,7 +52,12 @@

Swatches

- +
+
+ +

Twitter

+
+
@@ -67,6 +72,7 @@ import slider from '../src/components/Slider.vue' import sketch from '../src/components/Sketch.vue' import chrome from '../src/components/Chrome.vue' import photoshop from '../src/components/Photoshop.vue' +import twitter from '../src/components/Twitter.vue' let defaultProps = { hex: '#194d33e6', @@ -100,7 +106,8 @@ export default { 'slider-picker': slider, 'sketch-picker': sketch, 'chrome-picker': chrome, - 'photoshop-picker': photoshop + 'photoshop-picker': photoshop, + 'twitter-picker': twitter }, data () { return { diff --git a/src/components/Twitter.vue b/src/components/Twitter.vue new file mode 100644 index 0000000..d92a56e --- /dev/null +++ b/src/components/Twitter.vue @@ -0,0 +1,221 @@ + + + + + diff --git a/src/index.js b/src/index.js index 6055644..ed0a813 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ import Swatches from './components/Swatches.vue' import Photoshop from './components/Photoshop.vue' import Sketch from './components/Sketch.vue' import Chrome from './components/Chrome.vue' +import Twitter from './components/Twitter.vue' import Alpha from './components/common/Alpha.vue' import Checkboard from './components/common/Checkboard.vue' import EditableInput from './components/common/EditableInput.vue' @@ -17,6 +18,7 @@ const VueColor = { version: '2.7.0', Compact, Grayscale, + Twitter, Material, Slider, Swatches, From 74239685f67d8de2c6a0a6b9ae0f4058e7f564be Mon Sep 17 00:00:00 2001 From: SlaneYang Date: Thu, 21 Nov 2019 20:49:22 +0800 Subject: [PATCH 2/3] fix(twitter): remove unused code --- src/components/Twitter.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Twitter.vue b/src/components/Twitter.vue index d92a56e..e816b4f 100644 --- a/src/components/Twitter.vue +++ b/src/components/Twitter.vue @@ -83,8 +83,6 @@ export default { return hex && hex.replace('#', '') } }, - mounted () { - }, methods: { equal (color) { return color.toLowerCase() === this.colors.hex.toLowerCase() From 592bcd006885879bc0f7d5aba64de615cf06817d Mon Sep 17 00:00:00 2001 From: SlaneYang Date: Thu, 21 Nov 2019 20:57:53 +0800 Subject: [PATCH 3/3] feat(twitter): build release --- dist/vue-color.js | 496 +++++++++++++++++++++++++++++++++--------- dist/vue-color.min.js | 2 +- 2 files changed, 390 insertions(+), 108 deletions(-) diff --git a/dist/vue-color.js b/dist/vue-color.js index a51dd1f..0c0186b 100644 --- a/dist/vue-color.js +++ b/dist/vue-color.js @@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 22); +/******/ return __webpack_require__(__webpack_require__.s = 23); /******/ }) /************************************************************************/ /******/ ([ @@ -175,7 +175,7 @@ if (typeof DEBUG !== 'undefined' && DEBUG) { ) } } -var listToStyles = __webpack_require__(26) +var listToStyles = __webpack_require__(27) /* type StyleObject = { @@ -503,7 +503,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _tinycolor = __webpack_require__(27); +var _tinycolor = __webpack_require__(28); var _tinycolor2 = _interopRequireDefault(_tinycolor); @@ -615,11 +615,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_EditableInput_vue__ = __webpack_require__(10); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_EditableInput_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_EditableInput_vue__); /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_EditableInput_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_EditableInput_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__)); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_441174dc_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_EditableInput_vue__ = __webpack_require__(30); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_441174dc_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_EditableInput_vue__ = __webpack_require__(31); var disposed = false function injectStyle (ssrContext) { if (disposed) return - __webpack_require__(28) + __webpack_require__(29) } var normalizeComponent = __webpack_require__(2) /* script */ @@ -673,11 +673,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Hue_vue__ = __webpack_require__(14); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Hue_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Hue_vue__); /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Hue_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Hue_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__)); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_7b9aea78_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Hue_vue__ = __webpack_require__(45); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_7b9aea78_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Hue_vue__ = __webpack_require__(46); var disposed = false function injectStyle (ssrContext) { if (disposed) return - __webpack_require__(43) + __webpack_require__(44) } var normalizeComponent = __webpack_require__(2) /* script */ @@ -731,11 +731,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Saturation_vue__ = __webpack_require__(17); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Saturation_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Saturation_vue__); /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Saturation_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Saturation_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__)); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_ba139894_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Saturation_vue__ = __webpack_require__(60); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_ba139894_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Saturation_vue__ = __webpack_require__(61); var disposed = false function injectStyle (ssrContext) { if (disposed) return - __webpack_require__(55) + __webpack_require__(56) } var normalizeComponent = __webpack_require__(2) /* script */ @@ -789,11 +789,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Alpha_vue__ = __webpack_require__(18); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Alpha_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Alpha_vue__); /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Alpha_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Alpha_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__)); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1af1f1ac_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Alpha_vue__ = __webpack_require__(66); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1af1f1ac_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Alpha_vue__ = __webpack_require__(67); var disposed = false function injectStyle (ssrContext) { if (disposed) return - __webpack_require__(61) + __webpack_require__(62) } var normalizeComponent = __webpack_require__(2) /* script */ @@ -847,11 +847,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Checkboard_vue__ = __webpack_require__(19); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Checkboard_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Checkboard_vue__); /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Checkboard_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Checkboard_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__)); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5b6dc0c2_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Checkboard_vue__ = __webpack_require__(65); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5b6dc0c2_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Checkboard_vue__ = __webpack_require__(66); var disposed = false function injectStyle (ssrContext) { if (disposed) return - __webpack_require__(63) + __webpack_require__(64) } var normalizeComponent = __webpack_require__(2) /* script */ @@ -1333,7 +1333,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _materialColors = __webpack_require__(50); +var _materialColors = __webpack_require__(51); var _materialColors2 = _interopRequireDefault(_materialColors); @@ -1552,11 +1552,11 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _clamp = __webpack_require__(57); +var _clamp = __webpack_require__(58); var _clamp2 = _interopRequireDefault(_clamp); -var _lodash = __webpack_require__(58); +var _lodash = __webpack_require__(59); var _lodash2 = _interopRequireDefault(_lodash); @@ -2035,38 +2035,148 @@ exports.default = { "use strict"; -var _Compact = __webpack_require__(23); +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _EditableInput = __webpack_require__(4); + +var _EditableInput2 = _interopRequireDefault(_EditableInput); + +var _color = __webpack_require__(3); + +var _color2 = _interopRequireDefault(_color); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var defaultColors = ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']; + +exports.default = { + name: 'Twitter', + mixins: [_color2.default], + components: { + editableInput: _EditableInput2.default + }, + data: function data() { + return { + currentColor: '#fff' + }; + }, + + props: { + width: { + type: [String, Number], + default: 276 + }, + defaultColors: { + type: Array, + default: function _default() { + return defaultColors; + } + }, + triangle: { + default: 'top-left', + validator: function validator(value) { + return ['hide', 'top-left', 'top-right'].includes(value); + } + } + }, + computed: { + hsv: function hsv() { + var hsv = this.colors.hsv; + return { + h: hsv.h.toFixed(), + s: (hsv.s * 100).toFixed(), + v: (hsv.v * 100).toFixed() + }; + }, + hex: function hex() { + var hex = this.colors.hex; + return hex && hex.replace('#', ''); + } + }, + methods: { + equal: function equal(color) { + return color.toLowerCase() === this.colors.hex.toLowerCase(); + }, + handlerClick: function handlerClick(color) { + this.colorChange({ + hex: color, + source: 'hex' + }); + }, + inputChange: function inputChange(data) { + if (!data) { + return; + } + if (data['#']) { + this.isValidHex(data['#']) && this.colorChange({ + hex: data['#'], + source: 'hex' + }); + } else if (data.r || data.g || data.b || data.a) { + this.colorChange({ + r: data.r || this.colors.rgba.r, + g: data.g || this.colors.rgba.g, + b: data.b || this.colors.rgba.b, + a: data.a || this.colors.rgba.a, + source: 'rgba' + }); + } else if (data.h || data.s || data.v) { + this.colorChange({ + h: data.h || this.colors.hsv.h, + s: data.s / 100 || this.colors.hsv.s, + v: data.v / 100 || this.colors.hsv.v, + source: 'hsv' + }); + } + } + } +}; + +/***/ }), +/* 23 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +var _Compact = __webpack_require__(24); var _Compact2 = _interopRequireDefault(_Compact); -var _Grayscale = __webpack_require__(32); +var _Grayscale = __webpack_require__(33); var _Grayscale2 = _interopRequireDefault(_Grayscale); -var _Material = __webpack_require__(36); +var _Material = __webpack_require__(37); var _Material2 = _interopRequireDefault(_Material); -var _Slider = __webpack_require__(40); +var _Slider = __webpack_require__(41); var _Slider2 = _interopRequireDefault(_Slider); -var _Swatches = __webpack_require__(47); +var _Swatches = __webpack_require__(48); var _Swatches2 = _interopRequireDefault(_Swatches); -var _Photoshop = __webpack_require__(52); +var _Photoshop = __webpack_require__(53); var _Photoshop2 = _interopRequireDefault(_Photoshop); -var _Sketch = __webpack_require__(68); +var _Sketch = __webpack_require__(69); var _Sketch2 = _interopRequireDefault(_Sketch); -var _Chrome = __webpack_require__(72); +var _Chrome = __webpack_require__(73); var _Chrome2 = _interopRequireDefault(_Chrome); +var _Twitter = __webpack_require__(77); + +var _Twitter2 = _interopRequireDefault(_Twitter); + var _Alpha = __webpack_require__(7); var _Alpha2 = _interopRequireDefault(_Alpha); @@ -2097,6 +2207,7 @@ var VueColor = { version: '2.7.0', Compact: _Compact2.default, Grayscale: _Grayscale2.default, + Twitter: _Twitter2.default, Material: _Material2.default, Slider: _Slider2.default, Swatches: _Swatches2.default, @@ -2114,7 +2225,7 @@ var VueColor = { module.exports = VueColor; /***/ }), -/* 23 */ +/* 24 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -2122,11 +2233,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Compact_vue__ = __webpack_require__(9); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Compact_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Compact_vue__); /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Compact_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Compact_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__)); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_648423a3_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Compact_vue__ = __webpack_require__(31); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_648423a3_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Compact_vue__ = __webpack_require__(32); var disposed = false function injectStyle (ssrContext) { if (disposed) return - __webpack_require__(24) + __webpack_require__(25) } var normalizeComponent = __webpack_require__(2) /* script */ @@ -2172,13 +2283,13 @@ if (false) {(function () { /***/ }), -/* 24 */ +/* 25 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a