@eturnity/eturnity_reusable_components 1.2.25-EPDM-5202.2 → 1.2.26

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

@@ -1,97 +1,97 @@
-<template>
-  <container>
-    <input-wrapper>
-      <input-container
-        :placeholder="placeholder"
-        :value="value"
-        @input="onChangeHandler($event)"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :inputWidth="inputWidth"
-      />
-      <img
-        class="search-icn"
-        :src="require('../../../assets/icons/search_icon_black.svg')"
-      />
-    </input-wrapper>
-  </container>
-</template>
-
-<script>
-// import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
-// To use:
-// <search-input
-//   placeholder="Company name"
-//   :value="companyName"
-//   :disabled="true"
-//   inputWidth="250px"
-// />
-import styled from "vue-styled-components"
-
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
-
-const inputAttrs = { isDisabled: Boolean, inputWidth: String }
-const InputContainer = styled("input", inputAttrs)`
-  border: 1px solid ${(props) => props.theme.colors.mediumGray};
-  padding: 11px 30px 11px 10px;
-  border-radius: 4px;
-  font-size: 16px;
-  color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
-  box-sizing: border-box;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
-  background: ${(props) => props.theme.colors.white} !important;
-  &::placeholder {
-    color: ${(props) => props.theme.colors.darkGray};
-  }
-
-  &:focus {
-    outline: none;
-  }
-`
-
-const InputWrapper = styled.span`
-  position: relative;
-
-  img {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-`
-
-export default {
-  name: "search-input",
-  components: {
-    InputContainer,
-    InputWrapper,
-    Container,
-  },
-  props: {
-    value: {
-      required: true,
-    },
-    disabled: {
-      required: false,
-      default: false,
-    },
-    placeholder: {
-      required: false,
-      default: "",
-    },
-    inputWidth: {
-      required: false,
-      default: null,
-    },
-  },
-  methods: {
-    onChangeHandler(event) {
-      this.$emit("on-change", event)
-    },
-  },
-}
-</script>
+<template>
+  <container>
+    <input-wrapper>
+      <input-container
+        :placeholder="placeholder"
+        :value="value"
+        @input="onChangeHandler($event)"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :inputWidth="inputWidth"
+      />
+      <img
+        class="search-icn"
+        :src="require('../../../assets/icons/search_icon_black.svg')"
+      />
+    </input-wrapper>
+  </container>
+</template>
+
+<script>
+// import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+// To use:
+// <search-input
+//   placeholder="Company name"
+//   :value="companyName"
+//   :disabled="true"
+//   inputWidth="250px"
+// />
+import styled from "vue-styled-components"
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+
+const inputAttrs = { isDisabled: Boolean, inputWidth: String }
+const InputContainer = styled("input", inputAttrs)`
+  border: 1px solid ${(props) => props.theme.colors.mediumGray};
+  padding: 11px 30px 11px 10px;
+  border-radius: 4px;
+  font-size: 16px;
+  color: ${(props) => props.theme.colors.black};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  box-sizing: border-box;
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  background: ${(props) => props.theme.colors.white} !important;
+  &::placeholder {
+    color: ${(props) => props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;
+
+  img {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`
+
+export default {
+  name: "search-input",
+  components: {
+    InputContainer,
+    InputWrapper,
+    Container,
+  },
+  props: {
+    value: {
+      required: true,
+    },
+    disabled: {
+      required: false,
+      default: false,
+    },
+    placeholder: {
+      required: false,
+      default: "",
+    },
+    inputWidth: {
+      required: false,
+      default: null,
+    },
+  },
+  methods: {
+    onChangeHandler(event) {
+      this.$emit("on-change", event)
+    },
+  },
+}
+</script>

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

@@ -1,126 +1,126 @@
-<template>
-  <container>
-    <Slider
-      :value="value"
-      @update="onChange($event)"
-      :tooltips="false"
-      :min="minValue"
-      :max="maxValue"
-    />
-    <number-text> {{ value }} {{ unit }} </number-text>
-  </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/dist/slider.vue2.js"
-import styled from "vue-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,
-    },
-  },
-  methods: {
-    onChange(value) {
-      this.$emit("change", value)
-    },
-  },
-  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)
-  },
-}
-</script>
-
-<style src="@vueform/slider/themes/default.css"></style>
+<template>
+  <container>
+    <Slider
+      :value="value"
+      @update="onChange($event)"
+      :tooltips="false"
+      :min="minValue"
+      :max="maxValue"
+    />
+    <number-text> {{ value }} {{ unit }} </number-text>
+  </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/dist/slider.vue2.js"
+import styled from "vue-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,
+    },
+  },
+  methods: {
+    onChange(value) {
+      this.$emit("change", value)
+    },
+  },
+  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)
+  },
+}
+</script>
+
+<style src="@vueform/slider/themes/default.css"></style>