@flux-ui/components 3.0.0-next.20 → 3.0.0-next.21

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@flux-ui/components",
3
3
  "description": "A set of opiniated UI components.",
4
- "version": "3.0.0-next.20",
4
+ "version": "3.0.0-next.21",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "funding": "https://github.com/sponsors/basmilius",
@@ -52,8 +52,8 @@
52
52
  "sideEffects": false,
53
53
  "dependencies": {
54
54
  "@basmilius/utils": "^2.13.0",
55
- "@flux-ui/internals": "3.0.0-next.20",
56
- "@flux-ui/types": "3.0.0-next.20",
55
+ "@flux-ui/internals": "3.0.0-next.21",
56
+ "@flux-ui/types": "3.0.0-next.21",
57
57
  "@fortawesome/fontawesome-common-types": "^7.1.0",
58
58
  "clsx": "^2.1.1",
59
59
  "imask": "^7.6.1",
@@ -10,12 +10,21 @@
10
10
  color === 'success' && $style.isSuccess,
11
11
  color === 'warning' && $style.isWarning
12
12
  )">
13
- <div :class="$style.statisticIcon">
13
+ <div
14
+ v-if="icon"
15
+ :class="$style.statisticIcon">
14
16
  <FluxIcon
15
17
  :name="icon"
16
18
  :size="24"/>
17
19
  </div>
18
20
 
21
+ <div v-else-if="imageSrc">
22
+ <img
23
+ :class="$style.statisticImage"
24
+ :src="imageSrc"
25
+ :alt="imageAlt"/>
26
+ </div>
27
+
19
28
  <div :class="$style.statisticData">
20
29
  <span>{{ label }}</span>
21
30
  <strong>{{ value }}</strong>
@@ -61,7 +70,9 @@
61
70
  readonly changeValue?: string;
62
71
  readonly color?: FluxColor;
63
72
  readonly direction?: FluxDirection;
64
- readonly icon: FluxIconName;
73
+ readonly icon?: FluxIconName;
74
+ readonly imageSrc?: string;
75
+ readonly imageAlt?: string;
65
76
  readonly label: string;
66
77
  readonly value: string;
67
78
  }>();
@@ -96,6 +96,12 @@
96
96
  border-radius: var(--radius);
97
97
  }
98
98
 
99
+ .statisticImage {
100
+ height: 48px;
101
+ width: 48px;
102
+ border-radius: var(--radius);
103
+ }
104
+
99
105
  .statisticHorizontal {
100
106
  composes: statistic;
101
107