css-color-parser-h 3.0.2 → 3.0.4

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 (4) hide show
  1. package/@types/index.d.ts +16 -16
  2. package/example.html +6 -7
  3. package/package.json +1 -2
  4. package/readme.md +31 -48
package/@types/index.d.ts CHANGED
@@ -239,48 +239,48 @@ declare module 'css-color-parser-h' {
239
239
  * @param {string} color
240
240
  * @return {boolean}
241
241
  */
242
- equals(color: CssColorParser | string): boolean
242
+ equals(color: CssColorParserPlus | string): boolean
243
243
  /**
244
244
  * @description: 实例相加
245
- * @param {CssColorParser} colorParser
245
+ * @param {CssColorParserPlus} colorParser
246
246
  * @param {boolean} isSetAlpha 透明度值是否参与计算（默认：是）
247
- * @return {CssColorParser}
247
+ * @return {CssColorParserPlus}
248
248
  */
249
- add(color: CssColorParser | string, isSetAlpha?: boolean): CssColorParser
249
+ add(color: CssColorParserPlus | string, isSetAlpha?: boolean): CssColorParserPlus
250
250
  /**
251
251
  * @description: 实例相减
252
- * @param {CssColorParser} colorParser
252
+ * @param {CssColorParserPlus} colorParser
253
253
  * @param {boolean} isSetAlpha 透明度值是否参与计算（默认：是）
254
- * @return {CssColorParser}
254
+ * @return {CssColorParserPlus}
255
255
  */
256
256
  subtract(
257
- color: CssColorParser | string,
257
+ color: CssColorParserPlus | string,
258
258
  isSetAlpha?: boolean
259
- ): CssColorParser
259
+ ): CssColorParserPlus
260
260
  /**
261
261
  * @description: 实例相乘
262
- * @param {CssColorParser} colorParser
262
+ * @param {CssColorParserPlus} colorParser
263
263
  * @param {boolean} isSetAlpha 透明度值是否参与计算（默认：是）
264
- * @return {CssColorParser}
264
+ * @return {CssColorParserPlus}
265
265
  */
266
266
  multiply(
267
- color: CssColorParser | string,
267
+ color: CssColorParserPlus | string,
268
268
  isSetAlpha?: boolean
269
- ): CssColorParser
269
+ ): CssColorParserPlus
270
270
  /**
271
271
  * @description: 实例相除
272
- * @param {CssColorParser} colorParser
272
+ * @param {CssColorParserPlus} colorParser
273
273
  * @param {boolean} isSetAlpha 透明度值是否参与计算（默认：是）
274
- * @return {CssColorParser}
274
+ * @return {CssColorParserPlus}
275
275
  */
276
- divide(color: CssColorParser | string, isSetAlpha?: boolean): CssColorParser
276
+ divide(color: CssColorParserPlus | string, isSetAlpha?: boolean): CssColorParserPlus
277
277
  /**
278
278
  * @description: 解析css颜色
279
279
  * @param {string} v
280
280
  * @return {CssColorParserPlus}
281
281
  * @example: parseCssColorStr('rgba(255,255,255,1)')
282
282
  */
283
- static parseColor(v: string | CssColorParser): CssColorParser
283
+ static parseColor(v: string | CssColorParserPlus): CssColorParserPlus
284
284
  /**
285
285
  * @description: 将css字符串转换为解析对象
286
286
  * @param {string} v
package/example.html CHANGED
@@ -23,14 +23,13 @@
23
23
  <body>
24
24
  <h2>f12 to view console log</h2>
25
25
  <script>
26
- const cssColorParser = new Parser.CssColorParser()
27
- const cssColorParserPlus = new Parser.CssColorParserPlus()
26
+ const cssColorParser = new Parser.CssColorParserPlus()
28
27
  console.log(cssColorParser.toHEX())
29
- console.log(cssColorParserPlus.toRGBA())
30
- cssColorParserPlus.add('#333').add('red')
31
- console.log(cssColorParserPlus.toRGBA())
32
- cssColorParserPlus.subtract('blue', false)
33
- console.log(cssColorParserPlus.toRGBA())
28
+ console.log(cssColorParser.toRGBA())
29
+ cssColorParser.add('#333').add('red')
30
+ console.log(cssColorParser.toRGBA())
31
+ cssColorParser.subtract('blue', false)
32
+ console.log(cssColorParser.toRGBA())
34
33
  </script>
35
34
  </body>
36
35
  </html>
package/package.json CHANGED
@@ -1,9 +1,8 @@
1
1
  {
2
2
  "name": "css-color-parser-h",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "description": "A tool for parsing css color",
5
5
  "main": "dist/css-color-parser-h.cjs",
6
- "module": "dist/css-color-parser-h.esm.js",
7
6
  "types": "@types/index.d.ts",
8
7
  "scripts": {
9
8
  "build": "webpack && node release.js",
package/readme.md CHANGED
@@ -23,18 +23,17 @@ You can then use it as a window global or as an CommonJs module
23
23
 
24
24
  ```js
25
25
  // plain javascript in browser
26
- new Parser.CssColorParser(255,255,255,1)
27
- new Parser.CssColorParserPlus(255,255,255,1) // 增强版本(推荐使用)
26
+ new Parser.CssColorParserPlus(255,255,255,1)
28
27
 
29
28
  // commonJs
30
- const {CssColorParser, CssColorParserPlus} = require('css-color-parser-h')
29
+ const {CssColorParserPlus} = require('css-color-parser-h')
31
30
 
32
31
  // es6 module 使用ES6模块，需要在项目中集成webpack等打包工具
33
32
  /**
34
33
  * If you want to use this library by esm, you must ensure that your project
35
34
  * has used webpack, vite, rollup or other packaging tools.
36
35
  */
37
- import {CssColorParser, CssColorParserPlus} from 'css-color-parser-h'
36
+ import {CssColorParserPlus} from 'css-color-parser-h'
38
37
 
39
38
  //parse from '#4c90f0cc' to: CssColorParser { r: 76, g: 144, b: 240, a: 0.8 }
40
39
  CssColorParserPlus.parseColor('#4c90f0cc')
@@ -43,56 +42,44 @@ CssColorParserPlus.parseColor('#4c90f0cc')
43
42
  * */
44
43
  // CssColorParser类
45
44
  // 实例方法
46
- import {CssColorParser} from 'css-color-parser-h'
47
- const colorParser = new CssColorParser()
45
+ import { CssColorParserPlus } from 'css-color-parser-h'
46
+ const colorParser = new CssColorParserPlus()
48
47
  // 设置输出值的精度
49
- colorParser.setOutPrecision(colorPrecision: number, outAlphaPrecision: number): CssColorParser;
50
- colorParser.setColor(red?: number | string,green?: number | string,blue?: number | string,alpha?: number | string): CssColorParser
51
- colorParser.setAlpha(alpha?: number | string): CssColorParser
52
- colorParser.setRed(red?: number | string): CssColorParser;
53
- colorParser.setGreen(green?: number | string): CssColorParser;
54
- colorParser.setBlue(blue?: number | string): CssColorParser;
48
+ colorParser.setOutPrecision(colorPrecision: number, outAlphaPrecision: number): CssColorParserPlus
49
+ colorParser.setColor(red?: number | string,green?: number | string,blue?: number | string,alpha?: number | string): CssColorParserPlus
50
+ colorParser.setAlpha(alpha?: number | string): CssColorParserPlus
51
+ colorParser.setRed(red?: number | string): CssColorParserPlus
52
+ colorParser.setGreen(green?: number | string): CssColorParserPlus
53
+ colorParser.setBlue(blue?: number | string): CssColorParserPlus
55
54
  // 设置反色
56
- colorParser.setInvert(): CssColorParser;
55
+ colorParser.setInvert(): CssColorParserPlus
57
56
  colorParser.toRGBA(): string
58
57
  colorParser.toHEX(): string
59
58
  // 获取反色的值（输出一个新的实例）
60
- colorParser.toInvert(): CssColorParser;
59
+ colorParser.toInvert(): CssColorParserPlus
61
60
  colorParser.toString(): string
62
61
  colorParser.toNormalize(): ColorJson
63
62
  colorParser.toArray(): number[]
64
63
  colorParser.toJson(): ColorJson
65
64
  // 颜色相加
66
- colorParser.add(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
65
+ colorParser.add(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
67
66
  // 颜色相减
68
- colorParser.subtract(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
67
+ colorParser.subtract(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
69
68
  // 颜色相乘
70
- colorParser.multiply(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
69
+ colorParser.multiply(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
71
70
  // 颜色相除
72
- colorParser.divide(colorParser: CssColorParser, isSetAlpha?: boolean): CssColorParser;
71
+ colorParser.divide(colorParser: CssColorParserPlus, isSetAlpha?: boolean): CssColorParserPlus;
73
72
  // 颜色乘以一个数值
74
- colorParser.multiplyByScalar(scalar: number, isSetAlpha?: boolean): CssColorParser;
73
+ colorParser.multiplyByScalar(scalar: number, isSetAlpha?: boolean): CssColorParserPlus;
75
74
  // 颜色除以一个数值
76
- colorParser.divideByScalar(scalar: number, isSetAlpha?: boolean): CssColorParser;
75
+ colorParser.divideByScalar(scalar: number, isSetAlpha?: boolean): CssColorParserPlus;
77
76
  // 颜色RGB属性加上一个数值
78
- colorParser.addNumberForRGB(num: number): CssColorParser;
77
+ colorParser.addNumberForRGB(num: number): CssColorParserPlus;
79
78
  // 颜色透明度属性加上一个数值
80
- colorParser.addNumberForAlpha(num: number): CssColorParser;
81
- colorParser.clone():CssColorParser
82
- colorParser.equals(color: CssColorParser):boolean
79
+ colorParser.addNumberForAlpha(num: number): CssColorParserPlus;
80
+ colorParser.clone():CssColorParserPlus
81
+ colorParser.equals(color: CssColorParserPlus):boolean
83
82
  // 静态方法
84
- CssColorParser.parseHEX(v: string): CssColorParser
85
- CssColorParser.parseRGBA(v: string): CssColorParser
86
- CssColorParser.fromJson(json: ColorJson): CssColorParser
87
- CssColorParser.fromArray(color: Array<number>): CssColorParser
88
- CssColorParser.fromRandomfromRandom(color1: CssColorParser, color2: CssColorParser): CssColorParser
89
- CssColorParser.fromNormalize(colorArr: [number, number, number, number]): CssColorParser;
90
- /**
91
- * CssColorParserPlus类
92
- * 继承CssColorParser所有方法,增加了一些静态方法，对于加减乘除、随机颜色等方法可以传入颜色字符串进行计算
93
- * 使用parseColor方法可以解析css颜色格式的字符串
94
- */
95
- import { CssColorParserPlus } from 'css-color-parser-h'
96
83
  CssColorParserPlus.parseKeyWord(v: string): CssColorParserPlus
97
84
  CssColorParserPlus.parseHEX(v: string): CssColorParserPlus
98
85
  CssColorParserPlus.parseRGBA(v: string): CssColorParserPlus
@@ -105,23 +92,18 @@ CssColorParserPlus.fromHWB(h: number, w: number, b: number, a?: number)
105
92
  CssColorParserPlus.fromRandom(color1: string | CssColorParser,color2: string | CssColorParser): CssColorParserPlus
106
93
  CssColorParserPlus.fromJson(json: ColorJson): CssColorParserPlus
107
94
  CssColorParserPlus.fromArray(color: Array<number>): CssColorParserPlus
95
+ CssColorParserPlus.fromNormalize(colorArr: [number, number, number, number]): CssColorParserPlus;
108
96
  ```
109
97
 
110
98
  ## Example
111
99
 
112
100
  ```js
113
- import { CssColorParser } from 'css-color-parser-h'
114
-
115
- const colorParser = new CssColorParser(255,255,255,1)
116
- colorParser.toHEX()
117
- CssColorParser.parseHEX('#FFF')
118
- CssColorParser.parseRGBA('rgba(255,255,255,1)')
119
- CssColorParser.fromJson({r: 255, g: 255, b: 255, a: 1})
120
- CssColorParser.fromArray([255,255,255,1])
121
- CssColorParser.fromRandom(new CssColorParser(0,0,0,0), new CssColorParser(255,255,255,1))
122
-
123
101
  import { CssColorParserPlus } from 'css-color-parser-h'
124
102
 
103
+ CssColorParserPlus.parseHEX('#FFF')
104
+ CssColorParserPlus.parseRGBA('rgba(255,255,255,1)')
105
+ CssColorParserPlus.fromJson({r: 255, g: 255, b: 255, a: 1})
106
+ CssColorParserPlus.fromArray([255,255,255,1])
125
107
  CssColorParserPlus.parseColor('blue') // CssColorParser { r: 0, g: 0, b: 255, a: 1 }
126
108
  CssColorParserPlus.parseColor('blue').toHEX() // #0000ff
127
109
  CssColorParserPlus.parseColor('blue').toRGBA() // rgb(0,0,255)
@@ -142,8 +124,9 @@ CssColorParserPlus.fromRandom('blue', '#ccffbbaa').toRGBA() // rgba(127,128,239,
142
124
  CssColorParserPlus.fromRandom(new CssColorParser(205,205,100,0.5), '#ccffbbaa').toRGBA() // rgba(205,211,152,0.53)
143
125
  CssColorParserPlus.fromRandom(Parser.fromArray([205,205,100,0.5]), '#ccffbbaa').toRGBA() // rgba(205,235,131,0.62)
144
126
  // 颜色相加
145
- const colorParserPlus = new CssColorParserPlus(0,20,0,1)
146
- colorParserPlus.add('red').toRGBA() // rgb(255,20,0)
127
+ const colorParser = new CssColorParserPlus(0,20,0,1)
128
+ colorParser.toHEX()
129
+ colorParser.add('red').toRGBA() // rgb(255,20,0)
147
130
  // 计算
148
131
  const res = CssColorParserPlus.parseColor('#000').add('red').subtract('rgba(10,20,30,0.5)').toRGBA()
149
132
  console.log(res)