@taole/dev-helper 0.1.6 → 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 +35 -10
  2. package/dist/tdiv.umd.js +35 -10
  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'
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) {
@@ -228,19 +235,24 @@ class Tdiv extends HTMLElement {
228
235
  }
229
236
  if (src) {
230
237
  let realSrc = src;
231
- if (src.indexOf('https://') === -1) {
232
- realSrc = `https://dynamics-share.tuwan.com/${src}`;
233
- if (isSupportWebp) {
234
- realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
238
+ if(src.indexOf('--') == 0){
239
+ realSrc = `var(${src})`;
240
+ } else {
241
+ if (src.indexOf('https://') === -1 && src.indexOf('http://') === -1) {
242
+ realSrc = `https://dynamics-share.tuwan.com/${src}`;
243
+ if (isSupportWebp) {
244
+ realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
245
+ }
235
246
  }
247
+ realSrc = `url(${realSrc})`;
236
248
  }
237
249
  if (useDot9) {
238
- layoutStyle += `border-image: url(${realSrc}) ${dot9.join(" ")} fill;`;
250
+ layoutStyle += `border-image: ${realSrc} ${dot9.join(" ")} fill;`;
239
251
  layoutStyle += `border-width: ${dot9Border.join(" ")};`;
240
252
  layoutStyle += `border-style: solid;`;
241
253
  layoutStyle += `box-sizing: border-box;`;
242
254
  } else {
243
- layoutStyle += `background-image: url(${realSrc});`;
255
+ layoutStyle += `background-image: ${realSrc};`;
244
256
  if (srcMode === 'fill') {
245
257
  layoutStyle += 'background-size: 100% 100%;';
246
258
  } else if (srcMode === 'cover') {
@@ -248,7 +260,20 @@ class Tdiv extends HTMLElement {
248
260
  }
249
261
  }
250
262
  }
251
- if (color) layoutStyle += `color: ${color};`;
263
+ if (color) {
264
+ if(color.indexOf('--') == 0){
265
+ layoutStyle += `color: var(${color});`;
266
+ } else {
267
+ layoutStyle += `color: ${color};`;
268
+ }
269
+ }
270
+ if (bgColor) {
271
+ if(bgColor.indexOf('--') == 0){
272
+ layoutStyle += `background-color: var(${bgColor});`;
273
+ } else {
274
+ layoutStyle += `background-color: ${bgColor};`;
275
+ }
276
+ }
252
277
  if (styleAttr) layoutStyle += styleAttr;
253
278
  if (debug) {
254
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'
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) {
@@ -312,19 +319,24 @@
312
319
  }
313
320
  if (src) {
314
321
  let realSrc = src;
315
- if (src.indexOf('https://') === -1) {
316
- realSrc = `https://dynamics-share.tuwan.com/${src}`;
317
- if (isSupportWebp) {
318
- realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
322
+ if(src.indexOf('--') == 0){
323
+ realSrc = `var(${src})`;
324
+ } else {
325
+ if (src.indexOf('https://') === -1 && src.indexOf('http://') === -1) {
326
+ realSrc = `https://dynamics-share.tuwan.com/${src}`;
327
+ if (isSupportWebp) {
328
+ realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
329
+ }
319
330
  }
331
+ realSrc = `url(${realSrc})`;
320
332
  }
321
333
  if (useDot9) {
322
- layoutStyle += `border-image: url(${realSrc}) ${dot9.join(" ")} fill;`;
334
+ layoutStyle += `border-image: ${realSrc} ${dot9.join(" ")} fill;`;
323
335
  layoutStyle += `border-width: ${dot9Border.join(" ")};`;
324
336
  layoutStyle += `border-style: solid;`;
325
337
  layoutStyle += `box-sizing: border-box;`;
326
338
  } else {
327
- layoutStyle += `background-image: url(${realSrc});`;
339
+ layoutStyle += `background-image: ${realSrc};`;
328
340
  if (srcMode === 'fill') {
329
341
  layoutStyle += 'background-size: 100% 100%;';
330
342
  } else if (srcMode === 'cover') {
@@ -332,7 +344,20 @@
332
344
  }
333
345
  }
334
346
  }
335
- if (color) layoutStyle += `color: ${color};`;
347
+ if (color) {
348
+ if(color.indexOf('--') == 0){
349
+ layoutStyle += `color: var(${color});`;
350
+ } else {
351
+ layoutStyle += `color: ${color};`;
352
+ }
353
+ }
354
+ if (bgColor) {
355
+ if(bgColor.indexOf('--') == 0){
356
+ layoutStyle += `background-color: var(${bgColor});`;
357
+ } else {
358
+ layoutStyle += `background-color: ${bgColor};`;
359
+ }
360
+ }
336
361
  if (styleAttr) layoutStyle += styleAttr;
337
362
  if (debug) {
338
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.6",
3
+ "version": "0.1.8",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "build": "npx -y rimraf dist && rollup -c",