@thednp/color-picker 0.0.1-alpha1 → 0.0.1-alpha2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +40 -19
  3. package/dist/css/color-picker.css +481 -337
  4. package/dist/css/color-picker.min.css +2 -0
  5. package/dist/css/color-picker.rtl.css +506 -0
  6. package/dist/css/color-picker.rtl.min.css +2 -0
  7. package/dist/js/color-picker-element-esm.js +3810 -2
  8. package/dist/js/color-picker-element-esm.min.js +2 -0
  9. package/dist/js/color-picker-element.js +2009 -1242
  10. package/dist/js/color-picker-element.min.js +2 -2
  11. package/dist/js/color-picker-esm.js +3704 -0
  12. package/dist/js/color-picker-esm.min.js +2 -0
  13. package/dist/js/color-picker.js +1962 -1256
  14. package/dist/js/color-picker.min.js +2 -2
  15. package/package.json +18 -9
  16. package/src/js/color-palette.js +62 -0
  17. package/src/js/color-picker-element.js +55 -13
  18. package/src/js/color-picker.js +686 -595
  19. package/src/js/color.js +615 -349
  20. package/src/js/index.js +0 -9
  21. package/src/js/util/colorNames.js +2 -152
  22. package/src/js/util/colorPickerLabels.js +22 -0
  23. package/src/js/util/getColorControls.js +103 -0
  24. package/src/js/util/getColorForm.js +27 -19
  25. package/src/js/util/getColorMenu.js +95 -0
  26. package/src/js/util/isValidJSON.js +13 -0
  27. package/src/js/util/nonColors.js +5 -0
  28. package/src/js/util/templates.js +1 -0
  29. package/src/scss/color-picker.rtl.scss +23 -0
  30. package/src/scss/color-picker.scss +430 -0
  31. package/types/cp.d.ts +263 -160
  32. package/types/index.d.ts +9 -2
  33. package/types/source/source.ts +2 -1
  34. package/types/source/types.d.ts +28 -5
  35. package/dist/js/color-picker.esm.js +0 -2998
  36. package/dist/js/color-picker.esm.min.js +0 -2
  37. package/src/js/util/getColorControl.js +0 -49
  38. package/src/js/util/init.js +0 -14
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2016 thednp
3
+ Copyright (c) 2022 thednp
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,23 +1,38 @@
1
1
  # ColorPicker Web Component
2
- The feature rich color picker component for the modern web built with TypeScript definition, WAI-ARIA compliant.
2
+ The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
3
+
4
+ ![image](./docs/img/color-picker.png)
3
5
 
4
6
  [![NPM Version](https://img.shields.io/npm/v/@thednp/color-picker.svg?style=flat-square)](https://www.npmjs.com/package/@thednp/color-picker)
5
7
  [![NPM Downloads](https://img.shields.io/npm/dm/@thednp/color-picker.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@thednp/color-picker)
6
8
  [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/color-picker/badge)](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
7
9
 
10
+ As shown, **ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration.
11
+
8
12
  # Demo
9
- Download the package and check the demo folder, or check it online [here](http://thednp.github.io/color-picker).
13
+ Download the package and check the `index.html`, or check it online [here](http://thednp.github.io/color-picker).
14
+
10
15
 
11
16
  # Highlights
12
- * Accessibility Focus
17
+ * Accessibility Focus for WAI-ARIA compliance
13
18
  * ES6+ sources with TypeScript definitions
14
- * SCSS sources
15
- * very light footprint, `5kb` in size when minified
16
- * 3 sets of positions top (main), left or right
17
- * provides a set of options for JavaScript initialization
18
- * DATA API allows you to automatically initiate without JS invocation
19
- * modern browsers supported and semi-modern alike with a special polyfill for IE10+ provided
20
-
19
+ * Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
20
+ * Supports keyboard and touch events
21
+ * Automatic repositioning of the popup dropdown on show / window scroll
22
+ * SCSS sources with minimal style required
23
+ * Right To Left Languages Supported
24
+ * light footprint, `10kb` in size when minified and gZipped
25
+
26
+ # Wiki
27
+ For an in depth guide on all things **ColorPicker**, check out the wiki pages:
28
+ * [Home](https://github.com/thednp/color-picker/wiki) - the **ColorPicker** wiki home.
29
+ * [NPM](https://github.com/thednp/color-picker/wiki/NPM) - quick installation guide.
30
+ * [CDN Link](https://github.com/thednp/color-picker/wiki/CDN) - quick implementation guide.
31
+ * [Usage](https://github.com/thednp/color-picker/wiki/Usage) - an in-depth browser usage.
32
+ * [ES6+](https://github.com/thednp/color-picker/wiki/ES6) - your usual quick ES6+ guide.
33
+ * [Node.js](https://github.com/thednp/color-picker/wiki/Node.js) - is this a thing?
34
+
35
+ **Note** - the wiki pages are still under construction.
21
36
 
22
37
  # NPM
23
38
  You can install **ColorPicker** through NPM:
@@ -41,6 +56,10 @@ OR use the `ColorPickerElement` custom element:
41
56
  ```html
42
57
  <script src="../assets/js/color-picker-element.js"></script>
43
58
  ```
59
+ OR use the `ColorPickerElement` custom element ESM module:
60
+ ```html
61
+ <script type="module" src="../assets/js/color-picker-element-esm.js"></script>
62
+ ```
44
63
 
45
64
  If you don't want to use the custom element, you can initialize the function for your elements at the end of your `<body>` tag
46
65
  ```html
@@ -53,27 +72,26 @@ To use the DATA-API, you need to provide the `data-function="color-picker"` attr
53
72
  ```html
54
73
  <label for="myPicker">Color Label</label>
55
74
  <div class="color-picker">
56
- <input id="myPicker" name="myPicker" class="color-preview" value="#069" data-function="color-picker">
75
+ <input id="myPicker" name="myPicker" data-function="color-picker" class="color-preview" value="#069">
57
76
  </div>
58
77
  ```
78
+ The `data-function="color-picker"` attribute is useful for mass initialization, [check this usage section of the wiki](https://github.com/thednp/color-picker/wiki/Usage).
59
79
 
60
80
  Alternatively you can use the `ColorPickerElement` custom element:
61
81
  ```html
62
82
  <label for="myPicker">Color Label</label>
63
83
  <color-picker>
64
- <input id="myPicker" name="myPicker" class="color-preview" value="#069">
84
+ <input id="myPicker" name="myPicker" class="color-preview" value="#069" data-format="rgb">
65
85
  </color-picker>
66
86
 
67
- <script type="module" src="../path-to/color-picker-element.js"></script>
87
+ <script type="module" src="../path-to/color-picker-element-esm.js"></script>
68
88
  ```
69
89
  In this case the `data-function="color-picker"` attribute is no longer required.
70
90
 
71
- Other initialization and markup options apply, explained in [the demo](http://thednp.github.io/color-picker/).
72
-
73
91
 
74
92
  # ES6+
75
93
  ```javascript
76
- import ColorPicker from '@thednp/color-picker'
94
+ import ColorPicker from '@thednp/color-picker';
77
95
 
78
96
  let myPicker = new ColorPicker('#myPicker')
79
97
  ```
@@ -82,8 +100,11 @@ let myPicker = new ColorPicker('#myPicker')
82
100
  # Thanks
83
101
  * Dimitris Grammatikogiannis for his [initial project](https://codepen.io/dgrammatiko/pen/zLvXwR) as well as testing and contributions
84
102
  * Serhii Kulykov for his [Vanilla Colorful](https://github.com/web-padawan/vanilla-colorful)
85
- * @see https://www.eyecon.ro/colorpicker/
86
- * @see http://www.dematte.at/colorPicker/
103
+ * Brian Grinstead for his [TinyColor](https://github.com/bgrins/TinyColor)
104
+ * Jonathan Neal for his [convert-colors](https://github.com/jonathantneal/convert-colors)
105
+ * Peter Dematté for his [colorPicker](http://www.dematte.at/colorPicker/)
106
+ * Ștefan Petre at eyecon for his [colorPicker](https://www.eyecon.ro/colorpicker/)
107
+ * Brian Teeman for his [patience](https://github.com/joomla/joomla-cms/pull/35639)
87
108
 
88
109
  # License
89
- [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE)
110
+ **ColorPicker** is released under the [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE).