@tuya-miniapp/smart-ui 2.3.2 → 2.3.3-beta-2

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 (11) hide show
  1. package/dist/calendar/calendar.wxml +1 -1
  2. package/dist/icon/index.wxml +5 -0
  3. package/dist/icon/index.wxs +32 -5
  4. package/dist/image/index.css +1 -1
  5. package/dist/image/index.wxss +1 -1
  6. package/lib/calendar/calendar.wxml +1 -1
  7. package/lib/icon/index.wxml +5 -0
  8. package/lib/icon/index.wxs +32 -5
  9. package/lib/image/index.css +1 -1
  10. package/lib/image/index.wxss +1 -1
  11. package/package.json +1 -1
package/dist/calendar/calendar.wxml CHANGED
@@ -45,7 +45,7 @@
45
45
  showMonthTitle="{{ index !== 0 || !showSubtitle }}"
46
46
  firstDayOfWeek="{{ firstDayOfWeek }}"
47
47
  bind:click="onClickDay"
48
- dayClassMap="{{dayClassMap}}"
48
+ day-class-map="{{dayClassMap}}"
49
49
  />
50
50
  </block>
51
51
  </block>
package/dist/icon/index.wxml CHANGED
@@ -22,4 +22,9 @@
22
22
  mode="aspectFit"
23
23
  class="smart-icon__image"
24
24
  />
25
+ <view
26
+ wx:elif="{{ computed.isSvgPath(name) }}"
27
+ style="{{ computed.svgPathStyle({ customStyle, name, color }) }}"
28
+ class="smart-icon__svg"
29
+ />
25
30
  </view>
package/dist/icon/index.wxs CHANGED
@@ -6,6 +6,10 @@ function isImage(name) {
6
6
  return name.indexOf('/') !== -1;
7
7
  }
8
8
 
9
+ function isSvgPath(name) {
10
+ return name.indexOf(' ') !== -1;
11
+ }
12
+
9
13
  function isSvg(name) {
10
14
  return name.indexOf('data:image/svg+xml') !== -1;
11
15
  }
@@ -20,10 +24,9 @@ function rootClass(data) {
20
24
  if (data.classPrefix != null) {
21
25
  classes.push(data.classPrefix);
22
26
  }
23
-
24
- if (isImage(data.name)) {
27
+ if (isImage(data.name) || isSvgPath(data.name)) {
25
28
  classes.push('smart-icon--image');
26
- if (isSvg(data.name)) classes.push('smart-icon--svg');
29
+ if (isSvg(data.name) || isSvgPath(data.name)) classes.push('smart-icon--svg');
27
30
  } else if (data.classPrefix != null) {
28
31
  classes.push(data.classPrefix + '-' + data.name);
29
32
  }
@@ -58,8 +61,30 @@ function svgStyle(data) {
58
61
  '-webkit-mask-position': 'center',
59
62
  'mask-image': imageBase64Src,
60
63
  'mask-size': 'contain',
61
- width: data.size,
62
- height: data.size,
64
+ background: data.color,
65
+ },
66
+ ]);
67
+ return ret;
68
+ }
69
+ function svgPathStyle(data) {
70
+ const { name, color } = data;
71
+ // 构建SVG字符串
72
+ const svg = `
73
+ <svg class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
74
+ <path d="${name}" fill="${color || 'currentColor'}" fill-rule="evenodd"></path>
75
+ </svg>
76
+ `;
77
+
78
+ const imageBase64Src = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
79
+ var ret = style([
80
+ {
81
+
82
+ '-webkit-mask-image': imageBase64Src,
83
+ '-webkit-mask-size': 'contain',
84
+ '-webkit-mask-repeat': 'no-repeat',
85
+ '-webkit-mask-position': 'center',
86
+ 'mask-image': imageBase64Src,
87
+ 'mask-size': 'contain',
63
88
  background: data.color,
64
89
  },
65
90
  ]);
@@ -69,8 +94,10 @@ function svgStyle(data) {
69
94
  module.exports = {
70
95
  isImage: isImage,
71
96
  isSvg: isSvg,
97
+ isSvgPath: isSvgPath,
72
98
  getImageSrc: getImageSrc,
73
99
  rootClass: rootClass,
74
100
  rootStyle: rootStyle,
75
101
  svgStyle: svgStyle,
102
+ svgPathStyle: svgPathStyle,
76
103
  };
package/dist/image/index.css CHANGED
@@ -1 +1 @@
1
- @import '../common/index.css';.smart-image{display:inline-block;position:relative}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
1
+ @import '../common/index.css';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
package/dist/image/index.wxss CHANGED
@@ -1 +1 @@
1
- @import '../common/index.wxss';.smart-image{display:inline-block;position:relative}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
1
+ @import '../common/index.wxss';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
package/lib/calendar/calendar.wxml CHANGED
@@ -45,7 +45,7 @@
45
45
  showMonthTitle="{{ index !== 0 || !showSubtitle }}"
46
46
  firstDayOfWeek="{{ firstDayOfWeek }}"
47
47
  bind:click="onClickDay"
48
- dayClassMap="{{dayClassMap}}"
48
+ day-class-map="{{dayClassMap}}"
49
49
  />
50
50
  </block>
51
51
  </block>
package/lib/icon/index.wxml CHANGED
@@ -22,4 +22,9 @@
22
22
  mode="aspectFit"
23
23
  class="smart-icon__image"
24
24
  />
25
+ <view
26
+ wx:elif="{{ computed.isSvgPath(name) }}"
27
+ style="{{ computed.svgPathStyle({ customStyle, name, color }) }}"
28
+ class="smart-icon__svg"
29
+ />
25
30
  </view>
package/lib/icon/index.wxs CHANGED
@@ -6,6 +6,10 @@ function isImage(name) {
6
6
  return name.indexOf('/') !== -1;
7
7
  }
8
8
 
9
+ function isSvgPath(name) {
10
+ return name.indexOf(' ') !== -1;
11
+ }
12
+
9
13
  function isSvg(name) {
10
14
  return name.indexOf('data:image/svg+xml') !== -1;
11
15
  }
@@ -20,10 +24,9 @@ function rootClass(data) {
20
24
  if (data.classPrefix != null) {
21
25
  classes.push(data.classPrefix);
22
26
  }
23
-
24
- if (isImage(data.name)) {
27
+ if (isImage(data.name) || isSvgPath(data.name)) {
25
28
  classes.push('smart-icon--image');
26
- if (isSvg(data.name)) classes.push('smart-icon--svg');
29
+ if (isSvg(data.name) || isSvgPath(data.name)) classes.push('smart-icon--svg');
27
30
  } else if (data.classPrefix != null) {
28
31
  classes.push(data.classPrefix + '-' + data.name);
29
32
  }
@@ -58,8 +61,30 @@ function svgStyle(data) {
58
61
  '-webkit-mask-position': 'center',
59
62
  'mask-image': imageBase64Src,
60
63
  'mask-size': 'contain',
61
- width: data.size,
62
- height: data.size,
64
+ background: data.color,
65
+ },
66
+ ]);
67
+ return ret;
68
+ }
69
+ function svgPathStyle(data) {
70
+ const { name, color } = data;
71
+ // 构建SVG字符串
72
+ const svg = `
73
+ <svg class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
74
+ <path d="${name}" fill="${color || 'currentColor'}" fill-rule="evenodd"></path>
75
+ </svg>
76
+ `;
77
+
78
+ const imageBase64Src = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
79
+ var ret = style([
80
+ {
81
+
82
+ '-webkit-mask-image': imageBase64Src,
83
+ '-webkit-mask-size': 'contain',
84
+ '-webkit-mask-repeat': 'no-repeat',
85
+ '-webkit-mask-position': 'center',
86
+ 'mask-image': imageBase64Src,
87
+ 'mask-size': 'contain',
63
88
  background: data.color,
64
89
  },
65
90
  ]);
@@ -69,8 +94,10 @@ function svgStyle(data) {
69
94
  module.exports = {
70
95
  isImage: isImage,
71
96
  isSvg: isSvg,
97
+ isSvgPath: isSvgPath,
72
98
  getImageSrc: getImageSrc,
73
99
  rootClass: rootClass,
74
100
  rootStyle: rootStyle,
75
101
  svgStyle: svgStyle,
102
+ svgPathStyle: svgPathStyle,
76
103
  };
package/lib/image/index.css CHANGED
@@ -1 +1 @@
1
- @import '../common/index.css';.smart-image{display:inline-block;position:relative}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
1
+ @import '../common/index.css';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
package/lib/image/index.wxss CHANGED
@@ -1 +1 @@
1
- @import '../common/index.wxss';.smart-image{display:inline-block;position:relative}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
1
+ @import '../common/index.wxss';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tuya-miniapp/smart-ui",
3
- "version": "2.3.2",
3
+ "version": "2.3.3-beta-2",
4
4
  "author": "MiniApp Team",
5
5
  "license": "MIT",
6
6
  "miniprogram": "lib",