fix: restore tooltip-formatter prop

EnergySage · Oct 7, 2024 · 4481670 · 4481670
1 parent b9c57eb
commit 4481670
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/es-ds-components/components/es-slider.vue b/es-ds-components/components/es-slider.vue
@@ -50,6 +50,15 @@ const props = defineProps({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         default: (val: any) => val,
     },
+    /**
+     * Function that modifies tooltip value
+     */
+    tooltipFormatter: {
+        type: Function,
+        required: false,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        default: (val: any) => val,
+    },
 });
 
 // allow use of v-model on this component
@@ -75,9 +84,8 @@ model.value = props.startingValue;
                 },
                 handle: {
                     class: 'slider-handle',
-                }
-            }"
-        />
+                },
+            }" />
 
         <div class="d-flex flex-row justify-content-between">
             <span>{{ labelFormatter(min) }}</span>
@@ -126,7 +134,7 @@ model.value = props.startingValue;
     bottom: 27px;
     box-shadow: 0 1px 6px 0 rgba(34, 38, 51, 0.25);
     color: variables.$white;
-    content: v-bind("`'${labelFormatter(model)}'`");
+    content: v-bind("`'${tooltipFormatter(model)}'`");
     display: flex;
     font-weight: variables.$font-weight-boldest;
     height: 52px;

diff --git a/es-ds-docs/pages/molecules/slider.vue b/es-ds-docs/pages/molecules/slider.vue
@@ -12,7 +12,8 @@ const propTableRows = [
     ['max', 'Number', '100', 'Required. Maximum value of slider.'],
     ['step', 'Number', '1', 'Step factor to increment/decrement the value.'],
     ['aria-label', 'String', '"Pick a number"', 'Aria-label for slider handle.'],
-    ['label-formatter', 'Function', 'n/a', 'Function that modifies label value.'],
+    ['label-formatter', 'Function', 'n/a', 'Function that modifies min and max labels.'],
+    ['tooltip-formatter', 'Function', 'n/a', 'Function that modifies tooltip label.'],
 ];
 
 const { $prism } = useNuxtApp();
@@ -53,10 +54,8 @@ onMounted(async () => {
                 :step="step"
                 :starting-value="startValue"
                 :aria-label="ariaLabel"
-                :label-formatter="(val) => `$${val}`" />
-            <pre>
-                sliderVal: {{ sliderVal }}
-            </pre>
+                :label-formatter="(val) => `$${val}`"
+                :tooltip-formatter="(val) => `$${val}`" />
         </div>
 
         <div class="mb-500">