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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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).