@eturnity/eturnity_reusable_components 7.39.2 → 7.39.4-EPDM-11314.0

package/src/components/inputs/slider/index.vue

@@ -1,126 +1,126 @@
-<template>
-  <Container>
-    <Slider
-      :max="maxValue"
-      :min="minValue"
-      :tooltips="false"
-      :value="value"
-      @update="onChange($event)"
-    />
-    <NumberText> {{ value }} {{ unit }} </NumberText>
-  </Container>
-</template>
-
-<script>
-  // import Slider from "@eturnity/eturnity_reusable_components/src/components/inputs/slider"
-  //To use:
-  // <slider
-  //     :value="sliderValue" //required from parent
-  //     unit="m" //optional
-  //     @change="onChangeSlider($event)" //required to have @change in parent
-  //     :minValue="10" //default is 0 if not specified
-  //     :maxValue="500" //default is 100 if not specified
-  // />
-  import Slider from '@vueform/slider'
-  import styled from 'vue3-styled-components'
-
-  const Container = styled.div`
-    margin: 16px 0 16px 21px;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-gap: 40px;
-    align-items: center;
-
-    .slider-touch-area {
-      background-color: ${(props) => props.theme.colors.mediumGray};
-      border-radius: 100%;
-      display: flex;
-      grid-gap: 3px;
-      align-items: center;
-      justify-items: center;
-      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-
-      span {
-        // This is for the white lines on the button
-        width: 2px;
-        height: 10px;
-        background: white;
-        display: inline-block;
-
-        &:nth-of-type(1) {
-          margin-left: 7px;
-        }
-      }
-    }
-
-    .slider-connect {
-      background: ${(props) => props.theme.colors.blue};
-    }
-
-    .slider-base {
-      background-color: ${(props) => props.theme.colors.lightGray};
-      border-radius: 0;
-    }
-
-    .slider-connects {
-      border-radius: 0;
-    }
-
-    .slider-handle {
-      //we need to override the default values coming from the package
-      height: 26px !important;
-      width: 26px !important;
-      top: -11px !important;
-    }
-  `
-
-  const NumberText = styled.div`
-    font-weight: 500;
-    font-size: 24px;
-    color: ${(props) => props.theme.colors.black};
-  `
-
-  export default {
-    name: 'Slider',
-    components: {
-      Slider,
-      Container,
-      NumberText,
-    },
-    props: {
-      value: {
-        required: false,
-        default: 0,
-      },
-      unit: {
-        required: false,
-        default: '',
-      },
-      minValue: {
-        required: false,
-        default: 0,
-      },
-      maxValue: {
-        required: false,
-        default: 100,
-      },
-    },
-    mounted() {
-      // This is to add the 3 white lines to the slider button
-      let slider = document.querySelector('.slider-touch-area')
-      let span1 = document.createElement('span')
-      let span2 = document.createElement('span')
-      let span3 = document.createElement('span')
-      slider.appendChild(span1)
-      slider.appendChild(span2)
-      slider.appendChild(span3)
-    },
-    methods: {
-      onChange(value) {
-        this.$emit('change', value)
-      },
-    },
-  }
-</script>
-
-<style src="@vueform/slider/themes/default.css"></style>
+<template>
+  <Container>
+    <Slider
+      :max="maxValue"
+      :min="minValue"
+      :tooltips="false"
+      :value="value"
+      @update="onChange($event)"
+    />
+    <NumberText> {{ value }} {{ unit }} </NumberText>
+  </Container>
+</template>
+
+<script>
+  // import Slider from "@eturnity/eturnity_reusable_components/src/components/inputs/slider"
+  //To use:
+  // <slider
+  //     :value="sliderValue" //required from parent
+  //     unit="m" //optional
+  //     @change="onChangeSlider($event)" //required to have @change in parent
+  //     :minValue="10" //default is 0 if not specified
+  //     :maxValue="500" //default is 100 if not specified
+  // />
+  import Slider from '@vueform/slider'
+  import styled from 'vue3-styled-components'
+
+  const Container = styled.div`
+    margin: 16px 0 16px 21px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-gap: 40px;
+    align-items: center;
+
+    .slider-touch-area {
+      background-color: ${(props) => props.theme.colors.mediumGray};
+      border-radius: 100%;
+      display: flex;
+      grid-gap: 3px;
+      align-items: center;
+      justify-items: center;
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+      span {
+        // This is for the white lines on the button
+        width: 2px;
+        height: 10px;
+        background: white;
+        display: inline-block;
+
+        &:nth-of-type(1) {
+          margin-left: 7px;
+        }
+      }
+    }
+
+    .slider-connect {
+      background: ${(props) => props.theme.colors.blue};
+    }
+
+    .slider-base {
+      background-color: ${(props) => props.theme.colors.lightGray};
+      border-radius: 0;
+    }
+
+    .slider-connects {
+      border-radius: 0;
+    }
+
+    .slider-handle {
+      //we need to override the default values coming from the package
+      height: 26px !important;
+      width: 26px !important;
+      top: -11px !important;
+    }
+  `
+
+  const NumberText = styled.div`
+    font-weight: 500;
+    font-size: 24px;
+    color: ${(props) => props.theme.colors.black};
+  `
+
+  export default {
+    name: 'Slider',
+    components: {
+      Slider,
+      Container,
+      NumberText,
+    },
+    props: {
+      value: {
+        required: false,
+        default: 0,
+      },
+      unit: {
+        required: false,
+        default: '',
+      },
+      minValue: {
+        required: false,
+        default: 0,
+      },
+      maxValue: {
+        required: false,
+        default: 100,
+      },
+    },
+    mounted() {
+      // This is to add the 3 white lines to the slider button
+      let slider = document.querySelector('.slider-touch-area')
+      let span1 = document.createElement('span')
+      let span2 = document.createElement('span')
+      let span3 = document.createElement('span')
+      slider.appendChild(span1)
+      slider.appendChild(span2)
+      slider.appendChild(span3)
+    },
+    methods: {
+      onChange(value) {
+        this.$emit('change', value)
+      },
+    },
+  }
+</script>
+
+<style src="@vueform/slider/themes/default.css"></style>