@likable-hair/svelte 3.1.29 → 3.1.31

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 (9) hide show
  1. package/dist/components/composed/progress/HorizontalStackedProgress.css +7 -1
  2. package/dist/components/composed/progress/HorizontalStackedProgress.svelte +98 -33
  3. package/dist/components/composed/progress/HorizontalStackedProgress.svelte.d.ts +7 -0
  4. package/dist/components/simple/progress/ProgressBar.css +2 -0
  5. package/dist/components/simple/progress/ProgressBar.svelte +28 -1
  6. package/dist/components/simple/progress/ProgressBar.svelte.d.ts +2 -0
  7. package/dist/index.d.ts +2 -0
  8. package/dist/index.js +2 -0
  9. package/package.json +1 -1
package/dist/components/composed/progress/HorizontalStackedProgress.css CHANGED
@@ -1,3 +1,9 @@
1
1
  :root {
2
- --horizontal-stacked-progress-default-gap: 4px
2
+ --horizontal-stacked-progress-default-gap: 4px;
3
+ --horizontal-stacked-progress-default-dot-height: 10px;
4
+ --horizontal-stacked-progress-default-dot-width: 10px;
5
+ --horizontal-stacked-progress-default-dot-min-width: 10px;
6
+ --horizontal-stacked-progress-label-gap: 12px;
7
+ --horizontal-stacked-progress-legend-margin-top: 8px;
8
+ --progress-bar-default-tooltip-padding: 8px;
3
9
  }
package/dist/components/composed/progress/HorizontalStackedProgress.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  <script>import "./HorizontalStackedProgress.css";
7
7
  import ProgressBar from "../../simple/progress/ProgressBar.svelte";
8
- export let progresses = [], labelVisible = true;
8
+ export let progresses = [], labelVisible = true, labelValueVisible = true, labelTextVisible = true, legendVisible = false, legendValueVisible = true, legendTextVisible = true, hideLabelUnderPercentage = void 0;
9
9
  let colors = [
10
10
  "rgb(var(--global-color-primary-500))",
11
11
  "rgb(var(--global-color-primary-300))",
@@ -38,38 +38,77 @@ $:
38
38
  }).filter((p) => p.value !== 0);
39
39
  </script>
40
40
 
41
- <div
42
- class="stacked-container"
43
- >
44
- {#each progressesItems as progress}
45
- <div
46
- style:width={progress.percentage + '%'}
47
- class="single-progress-container"
48
- >
49
- <ProgressBar
50
- total={progress.value}
51
- value={progress.value}
52
- --progress-bar-highlight-color={progress.color}
53
- ></ProgressBar>
54
- {#if progress.label && labelVisible}
55
- <div class="label">
56
- <div class="label-text">{progress.label}</div>
57
- <div class="label-value">
58
- <div
59
- class="dot"
60
- style:background-color={progress.color || 'rgb(var(--global-color-background-300))'}
61
- ></div>
41
+ <div class="horizontal-stacked-progress">
42
+ <div
43
+ class="stacked-container"
44
+ >
45
+ {#each progressesItems as progress}
46
+ <div
47
+ style:width={progress.percentage + '%'}
48
+ class="single-progress-container"
49
+ >
50
+ <ProgressBar
51
+ total={progress.value}
52
+ value={progress.value}
53
+ --progress-bar-highlight-color={progress.color}
54
+ valueTooltip
55
+ valueTooltipLabel={progress.valueLabel || progress.value}
56
+ ></ProgressBar>
57
+ {#if progress.label && labelVisible && (hideLabelUnderPercentage === undefined || progress.percentage > hideLabelUnderPercentage)}
58
+ <div class="label">
59
+ {#if labelTextVisible}
60
+ <div class="label-text">
61
+ {progress.label}
62
+ </div>
63
+ {/if}
64
+ {#if labelValueVisible}
65
+ <div class="label-value">
66
+ <div
67
+ class="dot"
68
+ style:background-color={progress.color || 'rgb(var(--global-color-background-300))'}
69
+ ></div>
70
+ <div class="value-text">
71
+ {progress.valueLabel || progress.value}
72
+ </div>
73
+ </div>
74
+ {/if}
75
+ </div>
76
+ {/if}
77
+ </div>
78
+ {/each}
79
+ </div>
80
+ {#if legendVisible}
81
+ <div class="legend">
82
+ {#each progressesItems as progress}
83
+ <div class="legend-item">
84
+ <div
85
+ class="dot"
86
+ style:background-color={progress.color || 'rgb(var(--global-color-background-300))'}
87
+ ></div>
88
+ {#if legendValueVisible}
62
89
  <div class="value-text">
63
- {progress.value}
90
+ {progress.valueLabel || progress.value}
64
91
  </div>
65
- </div>
92
+ {/if}
93
+ {#if legendTextVisible}
94
+ <div class="label-text">
95
+ {progress.label}
96
+ </div>
97
+ {/if}
66
98
  </div>
67
- {/if}
99
+ {/each}
68
100
  </div>
69
- {/each}
101
+ {/if}
70
102
  </div>
71
103
 
72
104
  <style>
105
+ .horizontal-stacked-progress {
106
+ width: var(
107
+ --horizontal-stacked-progress-width,
108
+ var(--horizontal-stacked-progress-default-width)
109
+ );
110
+ }
111
+
73
112
  .stacked-container {
74
113
  overflow: hidden;
75
114
  display: flex;
@@ -77,10 +116,7 @@ $:
77
116
  --horizontal-stacked-progress-gap,
78
117
  var(--horizontal-stacked-progress-default-gap)
79
118
  );
80
- width: var(
81
- --horizontal-stacked-progress-width,
82
- var(--horizontal-stacked-progress-default-width)
83
- );
119
+ width: 100%;
84
120
  }
85
121
 
86
122
  .single-progress-container {
@@ -95,7 +131,10 @@ $:
95
131
  }
96
132
 
97
133
  .label {
98
- margin-top: 12px;
134
+ margin-top: var(
135
+ --horizontal-stacked-progress-label-gap,
136
+ var(--horizontal-stacked-progress-default-label-gap)
137
+ );
99
138
  }
100
139
 
101
140
  .label-value {
@@ -110,8 +149,34 @@ $:
110
149
  }
111
150
 
112
151
  .dot {
113
- height: 10px;
114
- width: 10px;
152
+ height: var(
153
+ --horizontal-stacked-progress-dot-height,
154
+ var(--horizontal-stacked-progress-default-dot-height)
155
+ );
156
+ width: var(
157
+ --horizontal-stacked-progress-dot-width,
158
+ var(--horizontal-stacked-progress-default-dot-width)
159
+ );
160
+ min-width: var(
161
+ --horizontal-stacked-progress-dot-min-width,
162
+ var(--horizontal-stacked-progress-default-dot-min-width)
163
+ );
115
164
  border-radius: 9999px;
116
165
  }
166
+
167
+ .legend {
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: 8px;
171
+ margin-top: var(
172
+ --horizontal-stacked-progress-legend-margin-top,
173
+ var(--horizontal-stacked-progress-default-legend-margin-top)
174
+ );
175
+ }
176
+
177
+ .legend-item {
178
+ display: flex;
179
+ gap: 8px;
180
+ align-items: center;
181
+ }
117
182
  </style>
package/dist/components/composed/progress/HorizontalStackedProgress.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@ export type ProgressItem = {
3
3
  label?: string;
4
4
  color?: string;
5
5
  value: number;
6
+ valueLabel?: string | number;
6
7
  };
7
8
  export declare function isProgressItem(obj: any): obj is ProgressItem;
8
9
  import './HorizontalStackedProgress.css';
@@ -10,6 +11,12 @@ declare const __propDef: {
10
11
  props: {
11
12
  progresses?: (number | ProgressItem)[] | undefined;
12
13
  labelVisible?: boolean | undefined;
14
+ labelValueVisible?: boolean | undefined;
15
+ labelTextVisible?: boolean | undefined;
16
+ legendVisible?: boolean | undefined;
17
+ legendValueVisible?: boolean | undefined;
18
+ legendTextVisible?: boolean | undefined;
19
+ hideLabelUnderPercentage?: number | undefined;
13
20
  };
14
21
  events: {
15
22
  [evt: string]: CustomEvent<any>;
package/dist/components/simple/progress/ProgressBar.css CHANGED
@@ -4,4 +4,6 @@
4
4
  --progress-bar-default-height: 5px;
5
5
  --progress-bar-default-width: 100%;
6
6
  --progress-bar-default-border-radius: 2px;
7
+ --progress-bar-default-tooltip-background-color: rgb(var(--global-color-background-100));
8
+ --progress-bar-default-tooltip-border-radius: 8px;
7
9
  }
package/dist/components/simple/progress/ProgressBar.svelte CHANGED
@@ -1,6 +1,8 @@
1
1
  <script>import "../../../css/main.css";
2
2
  import "./ProgressBar.css";
3
- export let value = 0, total = 100;
3
+ import ToolTip from "../../composed/common/ToolTip.svelte";
4
+ export let value = 0, total = 100, valueTooltip = false, valueTooltipLabel = void 0;
5
+ let activator;
4
6
  $:
5
7
  hundredBasedProgress = total === 0 ? 100 : value * 100 / total;
6
8
  $:
@@ -15,7 +17,17 @@ $:
15
17
  style={cssVariables}
16
18
  class="progress-bar-container"
17
19
  >
20
+ {#if valueTooltip}
21
+ <ToolTip
22
+ bind:activator
23
+ >
24
+ <div class="tooltip-card">
25
+ {valueTooltipLabel || value}
26
+ </div>
27
+ </ToolTip>
28
+ {/if}
18
29
  <div
30
+ bind:this={activator}
19
31
  style:width={hundredBasedProgress + "%"}
20
32
  class="progress"
21
33
  />
@@ -54,4 +66,19 @@ $:
54
66
  );
55
67
  transition: width 300ms cubic-bezier(0.215, 0.610, 0.355, 1);
56
68
  }
69
+
70
+ .tooltip-card {
71
+ background-color: var(
72
+ --progress-bar-tooltip-background-color,
73
+ var(--progress-bar-default-tooltip-background-color)
74
+ );
75
+ border-radius: var(
76
+ --progress-bar-tooltip-border-radius,
77
+ var(--progress-bar-default-tooltip-border-radius)
78
+ );
79
+ padding: var(
80
+ --progress-bar-tooltip-padding,
81
+ var(--progress-bar-default-tooltip-padding)
82
+ );
83
+ }
57
84
  </style>
package/dist/components/simple/progress/ProgressBar.svelte.d.ts CHANGED
@@ -5,6 +5,8 @@ declare const __propDef: {
5
5
  props: {
6
6
  value?: number | undefined;
7
7
  total?: number | undefined;
8
+ valueTooltip?: boolean | undefined;
9
+ valueTooltipLabel?: string | number | undefined;
8
10
  };
9
11
  events: {
10
12
  [evt: string]: CustomEvent<any>;
package/dist/index.d.ts CHANGED
@@ -70,6 +70,8 @@ export { default as FilterConverter } from './utils/filters/filters';
70
70
  export { default as FilterValidator } from './utils/filters/validator';
71
71
  export { countriesList, countriesOptions, getCountryInfoByAlpha2 } from './utils/countries';
72
72
  export { default as GanymedeLineChart } from './components/simple/charts/GanymedeLineChart.svelte';
73
+ export { default as GanymedeBarChart } from './components/simple/charts/GanymedeBarChart.svelte';
74
+ export { default as GanymedePieChart } from './components/simple/charts/GanymedePieChart.svelte';
73
75
  export { default as mediaQuery } from './stores/mediaQuery';
74
76
  export { default as theme, toggleTheme, setTheme } from './stores/theme';
75
77
  export { default as debounce } from './stores/debounce';
package/dist/index.js CHANGED
@@ -70,6 +70,8 @@ export { default as FilterConverter } from './utils/filters/filters';
70
70
  export { default as FilterValidator } from './utils/filters/validator';
71
71
  export { countriesList, countriesOptions, getCountryInfoByAlpha2 } from './utils/countries';
72
72
  export { default as GanymedeLineChart } from './components/simple/charts/GanymedeLineChart.svelte';
73
+ export { default as GanymedeBarChart } from './components/simple/charts/GanymedeBarChart.svelte';
74
+ export { default as GanymedePieChart } from './components/simple/charts/GanymedePieChart.svelte';
73
75
  export { default as mediaQuery } from './stores/mediaQuery';
74
76
  export { default as theme, toggleTheme, setTheme } from './stores/theme';
75
77
  export { default as debounce } from './stores/debounce';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair and others",
4
- "version": "3.1.29",
4
+ "version": "3.1.31",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",