Merge pull request #158 from ownego/dev

HOTFIX: rangeslider prefix & suffix prop

Author: juzser

src/components/RangeSlider/components/DualThumb/DualThumb.vue

@@ -10,8 +10,9 @@ Labelled(
   template(#help-text, v-if="hasSlot(slots['help-text'])")
     slot(name="help-text")
   div(:class="classNames(styles.DualThumb, sharedStyles.RangeSlider)")
-    div(v-if="slots.prefix", :class="styles.Prefix")
-      slot(name="prefix")
+    div(v-if="hasSlot(slots.prefix) || prefix", :class="styles.Prefix")
+      slot(v-if="hasSlot(slots.prefix)", name="prefix")
+      template(v-else) {{ prefix }}
     div(
       :class="trackWrapperClassName",
       ref="trackWrapper",
@@ -79,8 +80,9 @@ Labelled(
       )
         div(:class="styles.OutputBubble")
           span(:class="styles.OutputText") {{ value[1] }}
-    div(v-if="slots.suffix", :class="styles.Suffix")
-      slot(name="suffix")
+    div(v-if="hasSlot(slots.suffix) || suffix", :class="styles.Suffix")
+      slot(v-if="hasSlot(slots.suffix)", name="suffix")
+      template(v-else) {{ suffix }}
 EventListener(
   event="resize",
   :handler="setTrackPosition",
@@ -121,6 +123,10 @@ interface DualThumbProps {
   error?: ErrorType;
   /** Disable input */
   disabled?: boolean;
+  /** Element to display before the input. This prop will be overriden by `prefix` slot. */
+  prefix?: string;
+  /** Element to display after the input. This prop will be overriden by `suffix` slot. */
+  suffix?: string;
 }
 
 interface KeyHandlers {

src/components/RangeSlider/components/SingleThumb/SingleThumb.vue

@@ -13,8 +13,10 @@ Labelled(
     :class="className",
     :style="cssVars",
   )
-    div(v-if="hasSlot(slots.prefix)", :class="styles.Prefix")
-      slot(name="prefix")
+    div(v-if="hasSlot(slots.prefix) || prefix", :class="styles.Prefix")
+      slot(v-if="hasSlot(slots.prefix)", name="prefix")
+      template(v-else) {{ prefix }}
+
     div(:class="styles.InputWrapper")
       input(
         type="range",
@@ -43,8 +45,9 @@ Labelled(
         div(:class="styles.OutputBubble")
           span(:class="styles.OutputText")
             | {{ clampedValue }}
-    div(v-if="hasSlot(slots.suffix)", :class="styles.Suffix")
-      slot(name="suffix")
+    div(v-if="hasSlot(slots.suffix) || suffix", :class="styles.Suffix")
+      slot(v-if="hasSlot(slots.suffix)", name="suffix")
+      template(v-else) {{ suffix }}
 </template>
 
 <script setup lang="ts">
@@ -83,6 +86,10 @@ interface SingleThumbProps {
   error?: ErrorType;
   /** Disable input */
   disabled?: boolean;
+  /** Element to display before the input. This prop will be overriden by `prefix` slot. */
+  prefix?: string;
+  /** Element to display after the input. This prop will be overriden by `suffix` slot. */
+  suffix?: string;
 }
 
 const props = defineProps<SingleThumbProps>();