@ulu/frontend-vue 0.1.1-beta.1 → 0.1.1-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 (7) hide show
  1. package/dist/{breakpoints-DM-CBTtb.js → breakpoints-DfGETUy5.js} +1 -1
  2. package/dist/frontend-vue.js +1 -1
  3. package/dist/{index-BNRZ3Apw.js → index-94HkwBnP.js} +1115 -1061
  4. package/lib/components/visualizations/UluProgressBar.vue +57 -14
  5. package/lib/components/visualizations/UluProgressCircle.vue +124 -111
  6. package/package.json +3 -3
  7. package/lib/components/visualizations/progress-bar-examples.html +0 -175
package/lib/components/visualizations/UluProgressBar.vue CHANGED
@@ -1,13 +1,26 @@
1
1
  <template>
2
2
  <div :class="componentClasses">
3
- <div v-if="label || $slots.icon" class="progress-bar__header">
4
- <strong
3
+ <div
4
+ v-if="label || $slots.label || $slots.icon || amountInHeader"
5
+ class="progress-bar__header"
6
+ >
7
+ <component
5
8
  v-if="label"
9
+ :is="labelElement"
6
10
  class="progress-bar__label"
7
- :class="{ 'hidden-visually': labelHidden }"
11
+ :class="[classes.label, { 'hidden-visually': labelHidden }]"
8
12
  >
9
- {{ label }}
10
- </strong>
13
+ <slot name="label">
14
+ {{ label }}
15
+ </slot>
16
+ </component>
17
+ <div
18
+ v-if="amountInHeader"
19
+ class="progress-bar__value progress-bar__value--amount"
20
+ >
21
+ <strong class="hidden-visually">Amount:</strong>
22
+ <slot name="valueAmount" :value="amount">{{ formatValue(amount, 'amount') }}</slot>
23
+ </div>
11
24
  <div v-if="$slots.icon" class="progress-bar__icon">
12
25
  <slot name="icon" />
13
26
  </div>
@@ -20,21 +33,21 @@
20
33
  :style="{ width: deficitBarWidth }"
21
34
  ></div>
22
35
  </div>
23
- <div v-if="!loader && !indeterminate" class="progress-bar__values">
36
+ <div
37
+ v-if="!noValues && !amountInHeader && (!loader && !indeterminate)"
38
+ class="progress-bar__values"
39
+ >
24
40
  <div class="progress-bar__value progress-bar__value--amount">
25
41
  <strong class="hidden-visually">Amount:</strong>
26
- {{ amount }}
42
+ <slot name="valueAmount" :value="amount">{{ formatValue(amount, 'amount') }}</slot>
27
43
  </div>
28
- <div
29
- v-if="deficit > 0"
30
- class="progress-bar__value progress-bar__value--deficit"
31
- >
44
+ <div v-if="deficit > 0" class="progress-bar__value progress-bar__value--deficit">
32
45
  <strong class="hidden-visually">Deficit: </strong>
33
- -{{ deficit }}
46
+ <slot name="valueDeficit" :value="deficit">-{{ formatValue(deficit, 'deficit') }}</slot>
34
47
  </div>
35
48
  <div class="progress-bar__value progress-bar__value--total">
36
49
  <strong class="hidden-visually">Total:</strong>
37
- {{ total }}
50
+ <slot name="valueTotal" :value="total">{{ formatValue(total, 'total') }}</slot>
38
51
  </div>
39
52
  </div>
40
53
  </div>
@@ -49,13 +62,27 @@ import { computed } from "vue";
49
62
  */
50
63
  const props = defineProps({
51
64
  /**
52
- * The label to display above the progress bar.
65
+ * The label to display above the progress bar. (or use label slot)
53
66
  */
54
67
  label: String,
55
68
  /**
56
69
  * Hides the label visually, but keeps it for screen readers.
57
70
  */
58
71
  labelHidden: Boolean,
72
+ /**
73
+ * Optional classes object (currently only allowing { label } class)
74
+ */
75
+ classes: {
76
+ type: Object,
77
+ default: () => ({})
78
+ },
79
+ /**
80
+ * Element to use for label
81
+ */
82
+ labelElement: {
83
+ type: String,
84
+ default: "strong"
85
+ },
59
86
  /**
60
87
  * The current amount of progress.
61
88
  */
@@ -97,6 +124,22 @@ const props = defineProps({
97
124
  * Applies an indeterminate animation for unknown progress.
98
125
  */
99
126
  indeterminate: Boolean,
127
+ /**
128
+ * Omit values from output (the numbers below the progress bar)
129
+ */
130
+ noValues: Boolean,
131
+ /**
132
+ * A function to format the numerical values (amount, deficit, total).
133
+ * Takes the value and type ('amount', 'deficit', 'total') as input and should return a string.
134
+ */
135
+ formatValue: {
136
+ type: Function,
137
+ default: (value, type) => value,
138
+ },
139
+ /**
140
+ * Will put the amount only in header (there is a headerValue slot it you want to format)
141
+ */
142
+ amountInHeader: Boolean
100
143
  });
101
144
 
102
145
  const getCssPercentage = (amount, total) => {
package/lib/components/visualizations/UluProgressCircle.vue CHANGED
@@ -23,124 +23,137 @@
23
23
  cy="16"
24
24
  />
25
25
  </svg>
26
- <strong v-if="!showValueOutside" class="progress-circle__chart-value">
27
- {{ percentage }}%
26
+ <strong v-if="!showValueOutside && !noValue" class="progress-circle__chart-value">
27
+ <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
28
28
  </strong>
29
29
  </div>
30
- <strong v-if="showValueOutside" class="progress-circle__value type-small-x">
31
- {{ percentage }}%
30
+ <strong v-if="showValueOutside && !noValue" class="progress-circle__value type-small-x">
31
+ <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
32
32
  </strong>
33
33
  </div>
34
34
  </template>
35
35
 
36
- <script>
36
+ <script setup>
37
+ import { ref, computed, watch, onMounted } from 'vue';
38
+
39
+ /**
40
+ * A circular progress indicator component.
41
+ * @slot value - The value display. Overrides the `formatValue` prop.
42
+ */
43
+ const props = defineProps({
44
+ /**
45
+ * The label for accessibility (visually hidden).
46
+ */
47
+ label: {
48
+ type: String,
49
+ default: "Progress"
50
+ },
51
+ /**
52
+ * The progress percentage (0-100).
53
+ */
54
+ percentage: {
55
+ type: Number,
56
+ default: 0
57
+ },
58
+ /**
59
+ * A function to format the percentage value.
60
+ * Takes the number as input and should return a string.
61
+ */
62
+ formatValue: {
63
+ type: Function,
64
+ default: (value) => `${value}%`,
65
+ },
66
+ /**
67
+ * Hides the percentage value display.
68
+ */
69
+ noValue: Boolean,
70
+ /**
71
+ * Renders a smaller version of the component.
72
+ */
73
+ small: Boolean,
74
+ /**
75
+ * Displays the percentage value outside (to the side) of the circle.
76
+ */
77
+ outside: Boolean,
78
+ /**
79
+ * Displays the percentage value below the circle.
80
+ */
81
+ outsideBelow: Boolean,
82
+ /**
83
+ * Sets the status color of the progress circle (e.g., 'low', 'incomplete', 'complete').
84
+ */
85
+ status: {
86
+ type: String,
87
+ default: ''
88
+ },
37
89
  /**
38
- * A circular progress indicator component.
90
+ * Renders the component as a solid pie chart instead of a donut.
39
91
  */
40
- export default {
41
- name: 'UluProgressCircle',
42
- props: {
43
- /**
44
- * The label for accessibility (visually hidden).
45
- */
46
- label: {
47
- type: String,
48
- default: "Progress"
49
- },
50
- /**
51
- * The progress percentage (0-100).
52
- */
53
- percentage: {
54
- type: Number,
55
- default: 0
56
- },
57
- /**
58
- * Renders a smaller version of the component.
59
- */
60
- small: Boolean,
61
- /**
62
- * Displays the percentage value outside (to the side) of the circle.
63
- */
64
- outside: Boolean,
65
- /**
66
- * Displays the percentage value below the circle.
67
- */
68
- outsideBelow: Boolean,
69
- /**
70
- * Sets the status color of the progress circle (e.g., 'low', 'incomplete', 'complete').
71
- */
72
- status: {
73
- type: String,
74
- default: ''
75
- },
76
- /**
77
- * Renders the component as a solid pie chart instead of a donut.
78
- */
79
- pieStyle: Boolean,
80
- /**
81
- * Removes the center mask, filling the entire circle.
82
- */
83
- noMask: Boolean,
84
- /**
85
- * The duration of the animation in milliseconds.
86
- */
87
- duration: {
88
- type: Number,
89
- default: 1000 // Matches SCSS animation-duration
90
- },
91
- /**
92
- * The easing function for the animation.
93
- */
94
- easing: {
95
- type: String,
96
- default: "ease-in" // Matches SCSS animation-timing
97
- }
98
- },
99
- watch: {
100
- // Need to reanimate if value changes
101
- percentage(newVal, oldVal) {
102
- if (newVal !== oldVal) {
103
- this.animate(this.normalize(oldVal));
104
- }
105
- }
106
- },
107
- computed: {
108
- endDasharray() {
109
- return `${ this.normalize(this.percentage) } 100`;
110
- },
111
- showValueOutside() {
112
- return this.outside || this.outsideBelow || this.small;
113
- },
114
- componentClasses() {
115
- const classes = {
116
- 'progress-circle': true,
117
- 'progress-circle--small': this.small,
118
- 'progress-circle--pie': this.pieStyle,
119
- 'progress-circle--outside': this.showValueOutside,
120
- 'progress-circle--outside-below': this.outsideBelow,
121
- 'progress-circle--no-mask': this.noMask,
122
- };
123
- if (this.status) {
124
- classes[`progress-circle--${this.status}`] = true;
125
- }
126
- return classes;
127
- }
128
- },
129
- methods: {
130
- normalize(percentage) {
131
- // Added the 1% extra to 100% because sometimes it renders with a tiny gap
132
- return percentage === 100 ? 101 : percentage;
133
- },
134
- animate(from = 0) {
135
- const { pie } = this.$refs;
136
- if (!pie || !pie.animate) return; // No Animation API or element not ready
137
- const { duration, easing, endDasharray } = this;
138
- const keyframes = { strokeDasharray: [`${ from } 100`, endDasharray] };
139
- pie.animate(keyframes, { duration, easing, fill: "forwards" });
140
- }
141
- },
142
- mounted() {
143
- this.animate();
144
- }
92
+ pieStyle: Boolean,
93
+ /**
94
+ * Removes the center mask, filling the entire circle.
95
+ */
96
+ noMask: Boolean,
97
+ /**
98
+ * The duration of the animation in milliseconds.
99
+ */
100
+ duration: {
101
+ type: Number,
102
+ default: 1000 // Matches SCSS animation-duration
103
+ },
104
+ /**
105
+ * The easing function for the animation.
106
+ */
107
+ easing: {
108
+ type: String,
109
+ default: "ease-in" // Matches SCSS animation-timing
110
+ }
111
+ });
112
+
113
+ const pie = ref(null);
114
+
115
+ const normalize = (percentage) => {
116
+ // Added the 1% extra to 100% because sometimes it renders with a tiny gap
117
+ return percentage === 100 ? 101 : percentage;
118
+ };
119
+
120
+ const animate = (from = 0) => {
121
+ if (!pie.value || !pie.value.animate) return; // No Animation API or element not ready
122
+
123
+ const keyframes = { strokeDasharray: [`${from} 100`, endDasharray.value] };
124
+ pie.value.animate(keyframes, { duration: props.duration, easing: props.easing, fill: "forwards" });
125
+ };
126
+
127
+ watch(() => props.percentage, (newVal, oldVal) => {
128
+ if (newVal !== oldVal) {
129
+ animate(normalize(oldVal));
130
+ }
131
+ });
132
+
133
+ const endDasharray = computed(() => {
134
+ return `${normalize(props.percentage)} 100`;
135
+ });
136
+
137
+ const showValueOutside = computed(() => {
138
+ return props.outside || props.outsideBelow || props.small;
139
+ });
140
+
141
+ const componentClasses = computed(() => {
142
+ const classes = {
143
+ 'progress-circle': true,
144
+ 'progress-circle--small': props.small,
145
+ 'progress-circle--pie': props.pieStyle,
146
+ 'progress-circle--outside': showValueOutside.value,
147
+ 'progress-circle--outside-below': props.outsideBelow,
148
+ 'progress-circle--no-mask': props.noMask,
149
+ };
150
+ if (props.status) {
151
+ classes[`progress-circle--${props.status}`] = true;
145
152
  }
153
+ return classes;
154
+ });
155
+
156
+ onMounted(() => {
157
+ animate();
158
+ });
146
159
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ulu/frontend-vue",
3
- "version": "0.1.1-beta.1",
3
+ "version": "0.1.1-beta.2",
4
4
  "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
5
5
  "type": "module",
6
6
  "files": [
@@ -59,7 +59,7 @@
59
59
  "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
60
60
  "peerDependencies": {
61
61
  "@headlessui/vue": "^1.7.23",
62
- "@ulu/frontend": "^0.1.0-beta.111",
62
+ "@ulu/frontend": "^0.1.0-beta.112",
63
63
  "@unhead/vue": "^2.0.11",
64
64
  "vue": "^3.5.17",
65
65
  "vue-router": "^4.5.1",
@@ -83,7 +83,7 @@
83
83
  "@storybook/addon-essentials": "^9.0.0-alpha.12",
84
84
  "@storybook/addon-links": "^9.1.1",
85
85
  "@storybook/vue3-vite": "^9.1.1",
86
- "@ulu/frontend": "^0.1.0-beta.111",
86
+ "@ulu/frontend": "^0.1.0-beta.112",
87
87
  "@unhead/vue": "^2.0.11",
88
88
  "@vitejs/plugin-vue": "^6.0.0",
89
89
  "ollama": "^0.5.16",
package/lib/components/visualizations/progress-bar-examples.html DELETED
@@ -1,175 +0,0 @@
1
-
2
- <h2 class="h2">Basic Example</h2>
3
- <p>The default progress bar has no modifiers.</p>
4
- <div class="progress-bar">
5
- <div class="progress-bar__header"><strong class="progress-bar__label">Label that is long test</strong>
6
- </div>
7
- <div class="progress-bar__track">
8
- <div class="progress-bar__bar" style="width: 40%;"></div>
9
- </div>
10
- <div class="progress-bar__values">
11
- <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
12
- 200</div>
13
- <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
14
- </div>
15
- </div>
16
- </div>
17
-
18
- <div class="rule rule--light"></div>
19
-
20
- <h2 class="h2">Indeterminate Modifier</h2>
21
- <p>Uses the <code>.progress-bar--indeterminate</code> modifier for an animated loading state when the progress is unknown.</p>
22
- <div class="progress-bar progress-bar--loader progress-bar--indeterminate">
23
- <div class="progress-bar__track">
24
- <div class="progress-bar__bar"></div>
25
- </div>
26
- </div>
27
-
28
- <div class="rule rule--light"></div>
29
-
30
- <h2 class="h2">Loader Style</h2>
31
- <p>Uses the <code>.progress-bar--loader</code> modifier for a thin loading bar.</p>
32
- <div class="progress-bar progress-bar--loader">
33
- <div class="progress-bar__track">
34
- <div class="progress-bar__bar" style="width: 65%;"></div>
35
- </div>
36
- </div>
37
-
38
-
39
- <div class="rule rule--light"></div>
40
-
41
- <h2 class="h2">Completed Example</h2>
42
- <p>An example of a completed progress bar with an icon.</p>
43
- <div class="progress-bar">
44
- <div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
45
- <div class="progress-bar__icon">
46
- <span class="fas fa-check" aria-hidden="true"></span>
47
- <span class="hidden-visually">Item Completed</span>
48
- </div>
49
- </div>
50
- <div class="progress-bar__track">
51
- <div class="progress-bar__bar" style="width: 100%;"></div>
52
- </div>
53
- <div class="progress-bar__values">
54
- <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
55
- 500</div>
56
- <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
57
- </div>
58
- </div>
59
- </div>
60
-
61
- <div class="rule rule--light"></div>
62
-
63
- <h2 class="h2">Deficit Example</h2>
64
- <p>An example of a progress bar with a deficit.</p>
65
- <div class="progress-bar">
66
- <div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
67
- <div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
68
- </div>
69
- <div class="progress-bar__track">
70
- <div class="progress-bar__bar" style="width: 60%;"></div>
71
- <div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
72
- </div>
73
- <div class="progress-bar__values">
74
- <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
75
- 300</div>
76
- <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
77
- class="hidden-visually">Deficit: </strong> -100</div>
78
- <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
79
- </div>
80
- </div>
81
- </div>
82
-
83
- <div class="rule rule--light"></div>
84
-
85
- <h2 class="h2">Positive Style</h2>
86
- <p>Uses the <code>.progress-bar--positive</code> modifier.</p>
87
- <div class="progress-bar progress-bar--positive">
88
- <div class="progress-bar__header"><strong class="progress-bar__label">Positive</strong></div>
89
- <div class="progress-bar__track">
90
- <div class="progress-bar__bar" style="width: 75%;"></div>
91
- </div>
92
- </div>
93
-
94
- <div class="rule rule--light"></div>
95
-
96
- <h2 class="h2">Negative Style</h2>
97
- <p>Uses the <code>.progress-bar--negative</code> modifier.</p>
98
- <div class="progress-bar progress-bar--negative">
99
- <div class="progress-bar__header"><strong class="progress-bar__label">Negative</strong></div>
100
- <div class="progress-bar__track">
101
- <div class="progress-bar__bar" style="width: 30%;"></div>
102
- </div>
103
- </div>
104
-
105
- <div class="rule rule--light"></div>
106
-
107
- <h2 class="h2">Small Modifier</h2>
108
- <p>Uses the <code>.progress-bar--small</code> modifier. Font sizing is controlled by the parent element.</p>
109
- <div class="progress-bar progress-bar--small progress-bar--positive type-small">
110
- <div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
111
- <div class="progress-bar__icon">
112
- <span class="fas fa-check" aria-hidden="true"></span>
113
- <span class="hidden-visually">Item Completed</span>
114
- </div>
115
- </div>
116
- <div class="progress-bar__track">
117
- <div class="progress-bar__bar" style="width: 100%;"></div>
118
- </div>
119
- <div class="progress-bar__values">
120
- <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
121
- 500</div>
122
- <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
123
- </div>
124
- </div>
125
- </div>
126
-
127
- <div class="progress-bar progress-bar--small progress-bar--deficit type-small">
128
- <div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
129
- <div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
130
- </div>
131
- <div class="progress-bar__track">
132
- <div class="progress-bar__bar" style="width: 60%;"></div>
133
- <div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
134
- </div>
135
- <div class="progress-bar__values">
136
- <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
137
- 300</div>
138
- <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
139
- class="hidden-visually">Deficit: </strong> -100</div>
140
- <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
141
- </div>
142
- </div>
143
- </div>
144
-
145
- <div class="rule rule--light"></div>
146
-
147
- <h2 class="h2">Icon left with rail</h2>
148
- <p>Combining with rail component for icon on left</p>
149
-
150
- <div class="progress-bar progress-bar--positive">
151
- <div class="rail">
152
- <div class="rail__item">
153
- <div class="progress-bar__icon type-large">
154
- <span class="fas fa-check" aria-hidden="true"></span>
155
- </div>
156
- </div>
157
- <div class="rail__item flex-grow">
158
- <div class="progress-bar__header">
159
- <strong class="progress-bar__label">Progress</strong>
160
- </div>
161
- <div class="progress-bar__track">
162
- <div class="progress-bar__bar" style="width: 100%;"></div>
163
- </div>
164
- <div class="progress-bar__values">
165
- <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
166
- 300</div>
167
- <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
168
- class="hidden-visually">Deficit: </strong> -100</div>
169
- <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
170
- </div>
171
- </div>
172
- </div>
173
- </div>
174
-
175
-