@taole/dev-helper 0.1.7 → 0.1.8

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 (3) hide show
  1. package/Tdiv/index.js +17 -3
  2. package/dist/tdiv.umd.js +17 -3
  3. package/package.json +1 -1
package/Tdiv/index.js CHANGED
@@ -58,7 +58,7 @@ class Tdiv extends HTMLElement {
58
58
  '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute', 'fixed',
59
59
  'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
60
60
  'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
61
- 'dot9', 'dot9Border', 'bold', 'textEllipsis'
61
+ 'dot9', 'dot9Border', 'bold', 'textEllipsis', 'bgColor'
62
62
  ];
63
63
  }
64
64
 
@@ -119,6 +119,7 @@ class Tdiv extends HTMLElement {
119
119
  const usePx = this._getAttr('usePx', 'boolean');
120
120
  const styleAttr = this._getAttr('_style') || '';
121
121
  const src = this._getAttr('src') || '';
122
+ const bgColor = this._getAttr('bgColor') || '';
122
123
  const width = this._getAttr('width');
123
124
  const height = this._getAttr('height');
124
125
  const absolute = this._getAttr('absolute', 'boolean');
@@ -186,9 +187,15 @@ class Tdiv extends HTMLElement {
186
187
  }
187
188
  if (hasValue(radius)) layoutStyle += `border-radius: ${calc(radius, calcOpt)};`;
188
189
  if (hasValue(border)) {
189
- layoutStyle += `border: ${calc(border, calcOpt)} solid ${borderColor || "#000"};`;
190
+ const bColor = borderColor || "#000";
191
+ const bColorReal = bColor.indexOf('--') == 0 ? `var(${bColor})` : bColor;
192
+ layoutStyle += `border: ${calc(border, calcOpt)} solid ${bColorReal};`;
190
193
  } else if (hasValue(borderColor)) {
191
- layoutStyle += `border-color: ${borderColor};`;
194
+ if(borderColor.indexOf('--') == 0){
195
+ layoutStyle += `border-color: var(${borderColor});`;
196
+ } else {
197
+ layoutStyle += `border-color: ${borderColor};`;
198
+ }
192
199
  }
193
200
  if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
194
201
  if (pointer === true) {
@@ -260,6 +267,13 @@ class Tdiv extends HTMLElement {
260
267
  layoutStyle += `color: ${color};`;
261
268
  }
262
269
  }
270
+ if (bgColor) {
271
+ if(bgColor.indexOf('--') == 0){
272
+ layoutStyle += `background-color: var(${bgColor});`;
273
+ } else {
274
+ layoutStyle += `background-color: ${bgColor};`;
275
+ }
276
+ }
263
277
  if (styleAttr) layoutStyle += styleAttr;
264
278
  if (debug) {
265
279
  console.log('layoutStyle', layoutStyle);
package/dist/tdiv.umd.js CHANGED
@@ -142,7 +142,7 @@
142
142
  '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute', 'fixed',
143
143
  'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
144
144
  'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
145
- 'dot9', 'dot9Border', 'bold', 'textEllipsis'
145
+ 'dot9', 'dot9Border', 'bold', 'textEllipsis', 'bgColor'
146
146
  ];
147
147
  }
148
148
 
@@ -203,6 +203,7 @@
203
203
  const usePx = this._getAttr('usePx', 'boolean');
204
204
  const styleAttr = this._getAttr('_style') || '';
205
205
  const src = this._getAttr('src') || '';
206
+ const bgColor = this._getAttr('bgColor') || '';
206
207
  const width = this._getAttr('width');
207
208
  const height = this._getAttr('height');
208
209
  const absolute = this._getAttr('absolute', 'boolean');
@@ -270,9 +271,15 @@
270
271
  }
271
272
  if (hasValue(radius)) layoutStyle += `border-radius: ${calc(radius, calcOpt)};`;
272
273
  if (hasValue(border)) {
273
- layoutStyle += `border: ${calc(border, calcOpt)} solid ${borderColor || "#000"};`;
274
+ const bColor = borderColor || "#000";
275
+ const bColorReal = bColor.indexOf('--') == 0 ? `var(${bColor})` : bColor;
276
+ layoutStyle += `border: ${calc(border, calcOpt)} solid ${bColorReal};`;
274
277
  } else if (hasValue(borderColor)) {
275
- layoutStyle += `border-color: ${borderColor};`;
278
+ if(borderColor.indexOf('--') == 0){
279
+ layoutStyle += `border-color: var(${borderColor});`;
280
+ } else {
281
+ layoutStyle += `border-color: ${borderColor};`;
282
+ }
276
283
  }
277
284
  if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
278
285
  if (pointer === true) {
@@ -344,6 +351,13 @@
344
351
  layoutStyle += `color: ${color};`;
345
352
  }
346
353
  }
354
+ if (bgColor) {
355
+ if(bgColor.indexOf('--') == 0){
356
+ layoutStyle += `background-color: var(${bgColor});`;
357
+ } else {
358
+ layoutStyle += `background-color: ${bgColor};`;
359
+ }
360
+ }
347
361
  if (styleAttr) layoutStyle += styleAttr;
348
362
  if (debug) {
349
363
  console.log('layoutStyle', layoutStyle);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taole/dev-helper",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "build": "npx -y rimraf dist && rollup -c",