refactor(slider): rename customFormatter prop to formatter prop (#…

…1033)
oruga-ui · Aug 8, 2024 · e0635f8 · e0635f8
1 parent 9bcc478
commit e0635f8
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/packages/oruga/src/components/slider/Slider.vue b/packages/oruga/src/components/slider/Slider.vue
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<SelectProps<IsRange>>(), {
     rounded: () => getOption("slider.rounded", false),
     disabled: false,
     lazy: false,
-    customFormatter: undefined,
+    formatter: undefined,
     biggerSliderFocus: false,
     indicator: false,
     format: () => getOption("slider.format", "raw"),

diff --git a/packages/oruga/src/components/slider/SliderThumb.vue b/packages/oruga/src/components/slider/SliderThumb.vue
@@ -88,8 +88,8 @@ const currentPosition = computed(
 const wrapperStyle = computed(() => ({ left: currentPosition.value }));
 
 const formattedValue = computed(() => {
-    if (typeof slider.value.customFormatter !== "undefined")
-        return slider.value.customFormatter(props.modelValue);
+    if (typeof slider.value.formatter !== "undefined")
+        return slider.value.formatter(props.modelValue);
 
     if (slider.value.format === "percent")
         return new Intl.NumberFormat(slider.value.locale, {

diff --git a/packages/oruga/src/components/slider/examples/base.vue b/packages/oruga/src/components/slider/examples/base.vue
@@ -29,9 +29,7 @@ const sliderType = computed(() => {
         </o-field>
 
         <o-field label="Custom tooltip label">
-            <o-slider
-                :model-value="30"
-                :custom-formatter="(val) => val + '%'" />
+            <o-slider :model-value="30" :formatter="(val) => val + '%'" />
         </o-field>
 
         <o-field label="Rounded thumb">

diff --git a/packages/oruga/src/components/slider/props.ts b/packages/oruga/src/components/slider/props.ts
@@ -41,7 +41,7 @@ export type SelectProps<IsRange extends boolean> = {
     /** Update v-model only when dragging is finished */
     lazy?: boolean;
     /** Function to format the tooltip label for display */
-    customFormatter?: Function;
+    formatter?: (value: number) => string;
     /** Increases slider size on focus */
     biggerSliderFocus?: boolean;
     /** Show indicators */

diff --git a/packages/oruga/src/components/tabs/Tabs.vue b/packages/oruga/src/components/tabs/Tabs.vue
@@ -401,6 +401,7 @@ function itemHeaderClasses(
                 @slot Additional slot before tabs
             -->
             <slot name="start" />
+
             <div
                 v-for="childItem in items"
                 v-show="childItem.visible"
@@ -451,6 +452,7 @@ function itemHeaderClasses(
                     </span>
                 </component>
             </div>
+
             <!--
                 @slot Additional slot after tabs
             -->