@mantine-vue/charts 2.2.0 → 2.2.1

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,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine-vue/charts",
3
- "version": "2.2.0",
3
+ "version": "2.2.1",
4
4
  "description": "Charts components built with Apache ECharts and Mantine Vue",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -38,7 +38,7 @@
38
38
  "vue-echarts": "^8.0.1"
39
39
  },
40
40
  "peerDependencies": {
41
- "@mantine-vue/core": "2.2.0",
41
+ "@mantine-vue/core": "2.2.1",
42
42
  "echarts": ">=6.0.0",
43
43
  "vue": "^3.5.0",
44
44
  "vue-echarts": ">=8.0.0"
package/styles.css CHANGED
@@ -1,12 +1,68 @@
1
- .mantine-Chart-root { position: relative; color: var(--mantine-color-text); font-family: var(--mantine-font-family); }
2
- .mantine-Chart-container { width: 100%; height: 100%; }
3
- .mantine-ChartTooltip-tooltip { min-width: 150px; padding: 8px 12px; border: 1px solid var(--mantine-color-default-border); border-radius: var(--mantine-radius-default); background: var(--mantine-color-body); box-shadow: var(--mantine-shadow-md); color: var(--mantine-color-text); font-size: var(--mantine-font-size-sm); }
4
- .mantine-ChartTooltip-tooltipLabel { margin-bottom: 4px; font-weight: 500; }
5
- .mantine-ChartTooltip-tooltipBody { display: flex; flex-direction: column; gap: 4px; }
6
- .mantine-ChartTooltip-tooltipItem { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
7
- .mantine-ChartTooltip-tooltipItemBody { display: flex; align-items: center; gap: 8px; }
8
- .mantine-ChartTooltip-tooltipItemColor, .mantine-ChartLegend-legendItemColor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
9
- .mantine-ChartTooltip-tooltipItemData { font-variant-numeric: tabular-nums; font-weight: 500; }
10
- .mantine-ChartLegend-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--mantine-color-dimmed); font-size: var(--mantine-font-size-sm); }
11
- .mantine-ChartLegend-legend[data-centered] { justify-content: center; }
12
- .mantine-ChartLegend-legendItem { display: flex; align-items: center; gap: 6px; cursor: default; }
1
+ .mantine-Chart-root {
2
+ position: relative;
3
+ color: var(--mantine-color-text);
4
+ font-family: var(--mantine-font-family);
5
+ }
6
+ .mantine-Chart-container {
7
+ width: 100%;
8
+ height: 100%;
9
+ }
10
+ .mantine-ChartTooltip-tooltip {
11
+ min-width: calc(9.375rem * var(--mantine-scale));
12
+ padding: calc(0.5rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
13
+ border: 1px solid var(--mantine-color-default-border);
14
+ border-radius: var(--mantine-radius-default);
15
+ background: var(--mantine-color-body);
16
+ box-shadow: var(--mantine-shadow-md);
17
+ color: var(--mantine-color-text);
18
+ font-size: var(--mantine-font-size-sm);
19
+ }
20
+ .mantine-ChartTooltip-tooltipLabel {
21
+ margin-bottom: calc(0.25rem * var(--mantine-scale));
22
+ font-weight: 500;
23
+ }
24
+ .mantine-ChartTooltip-tooltipBody {
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: calc(0.25rem * var(--mantine-scale));
28
+ }
29
+ .mantine-ChartTooltip-tooltipItem {
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: space-between;
33
+ gap: calc(1rem * var(--mantine-scale));
34
+ }
35
+ .mantine-ChartTooltip-tooltipItemBody {
36
+ display: flex;
37
+ align-items: center;
38
+ gap: calc(0.5rem * var(--mantine-scale));
39
+ }
40
+ .mantine-ChartTooltip-tooltipItemColor,
41
+ .mantine-ChartLegend-legendItemColor {
42
+ display: inline-block;
43
+ width: calc(0.75rem * var(--mantine-scale));
44
+ height: calc(0.75rem * var(--mantine-scale));
45
+ border-radius: 50%;
46
+ flex: 0 0 auto;
47
+ }
48
+ .mantine-ChartTooltip-tooltipItemData {
49
+ font-variant-numeric: tabular-nums;
50
+ font-weight: 500;
51
+ }
52
+ .mantine-ChartLegend-legend {
53
+ display: flex;
54
+ flex-wrap: wrap;
55
+ gap: calc(0.5rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
56
+ color: var(--mantine-color-dimmed);
57
+ font-size: var(--mantine-font-size-sm);
58
+ }
59
+ .mantine-ChartLegend-legend[data-centered] {
60
+ justify-content: center;
61
+ }
62
+ .mantine-ChartLegend-legendItem {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: calc(0.375rem * var(--mantine-scale));
66
+ cursor: default;
67
+ }
68
+ /*$vite$:1*/
package/styles.layer.css CHANGED
@@ -1,14 +1,70 @@
1
1
  @layer mantine {
2
- .mantine-Chart-root { position: relative; color: var(--mantine-color-text); font-family: var(--mantine-font-family); }
3
- .mantine-Chart-container { width: 100%; height: 100%; }
4
- .mantine-ChartTooltip-tooltip { min-width: 150px; padding: 8px 12px; border: 1px solid var(--mantine-color-default-border); border-radius: var(--mantine-radius-default); background: var(--mantine-color-body); box-shadow: var(--mantine-shadow-md); color: var(--mantine-color-text); font-size: var(--mantine-font-size-sm); }
5
- .mantine-ChartTooltip-tooltipLabel { margin-bottom: 4px; font-weight: 500; }
6
- .mantine-ChartTooltip-tooltipBody { display: flex; flex-direction: column; gap: 4px; }
7
- .mantine-ChartTooltip-tooltipItem { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
8
- .mantine-ChartTooltip-tooltipItemBody { display: flex; align-items: center; gap: 8px; }
9
- .mantine-ChartTooltip-tooltipItemColor, .mantine-ChartLegend-legendItemColor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
10
- .mantine-ChartTooltip-tooltipItemData { font-variant-numeric: tabular-nums; font-weight: 500; }
11
- .mantine-ChartLegend-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--mantine-color-dimmed); font-size: var(--mantine-font-size-sm); }
12
- .mantine-ChartLegend-legend[data-centered] { justify-content: center; }
13
- .mantine-ChartLegend-legendItem { display: flex; align-items: center; gap: 6px; cursor: default; }
2
+ .mantine-Chart-root {
3
+ position: relative;
4
+ color: var(--mantine-color-text);
5
+ font-family: var(--mantine-font-family);
6
+ }
7
+ .mantine-Chart-container {
8
+ width: 100%;
9
+ height: 100%;
10
+ }
11
+ .mantine-ChartTooltip-tooltip {
12
+ min-width: calc(9.375rem * var(--mantine-scale));
13
+ padding: calc(0.5rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
14
+ border: 1px solid var(--mantine-color-default-border);
15
+ border-radius: var(--mantine-radius-default);
16
+ background: var(--mantine-color-body);
17
+ box-shadow: var(--mantine-shadow-md);
18
+ color: var(--mantine-color-text);
19
+ font-size: var(--mantine-font-size-sm);
20
+ }
21
+ .mantine-ChartTooltip-tooltipLabel {
22
+ margin-bottom: calc(0.25rem * var(--mantine-scale));
23
+ font-weight: 500;
24
+ }
25
+ .mantine-ChartTooltip-tooltipBody {
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: calc(0.25rem * var(--mantine-scale));
29
+ }
30
+ .mantine-ChartTooltip-tooltipItem {
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: space-between;
34
+ gap: calc(1rem * var(--mantine-scale));
35
+ }
36
+ .mantine-ChartTooltip-tooltipItemBody {
37
+ display: flex;
38
+ align-items: center;
39
+ gap: calc(0.5rem * var(--mantine-scale));
40
+ }
41
+ .mantine-ChartTooltip-tooltipItemColor,
42
+ .mantine-ChartLegend-legendItemColor {
43
+ display: inline-block;
44
+ width: calc(0.75rem * var(--mantine-scale));
45
+ height: calc(0.75rem * var(--mantine-scale));
46
+ border-radius: 50%;
47
+ flex: 0 0 auto;
48
+ }
49
+ .mantine-ChartTooltip-tooltipItemData {
50
+ font-variant-numeric: tabular-nums;
51
+ font-weight: 500;
52
+ }
53
+ .mantine-ChartLegend-legend {
54
+ display: flex;
55
+ flex-wrap: wrap;
56
+ gap: calc(0.5rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
57
+ color: var(--mantine-color-dimmed);
58
+ font-size: var(--mantine-font-size-sm);
59
+ }
60
+ .mantine-ChartLegend-legend[data-centered] {
61
+ justify-content: center;
62
+ }
63
+ .mantine-ChartLegend-legendItem {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: calc(0.375rem * var(--mantine-scale));
67
+ cursor: default;
68
+ }
69
+ /*$vite$:1*/
14
70
  }