@eturnity/eturnity_reusable_components 7.4.3 → 7.4.4

package/src/components/inputs/select/option/index.vue

@@ -1,111 +1,111 @@
-<template>
-  <optionContainer
-    :data-value="value"
-    :hoveredBgColor="
-      colorMode == 'dark'
-        ? '#000000'
-        : hoveredBgColor
-        ? hoveredBgColor
-        : 'grey5'
-    "
-    @click="clickHandler"
-    @mouseover="hoverHandler"
-    :cursorType="cursorType"
-    :isDisabled="isDisabled"
-    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
-    :title="hoverText"
-  >
-    <slot></slot>
-  </optionContainer>
-</template>
-
-<script>
-//   import selectButton from './selectButton'
-//   import selectDropdown from './selectDropDown'
-import styled from 'vue-styled-components'
-const optionProps = {
-  isDisabled: Boolean,
-  hoveredBgColor: String,
-  cursorType: String,
-  backgroundColor: String
-}
-const optionContainer = styled('div', optionProps)`
-  display: flex;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 10px;
-  gap: 14px;
-  width: 100%;
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor]
-      ? props.theme.colors[props.backgroundColor]
-      : props.backgroundColor};
-  box-sizing: inherit;
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor]
-      ? props.theme.colors[props.backgroundColor]
-      : props.backgroundColor};
-  color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey3 : 'inherit'};
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors[props.hoveredBgColor]
-        ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor} !important;
-  }
-`
-
-export default {
-  name: 'RCoption',
-
-  props: {
-    value: {
-      required: true
-    },
-    hoveredBgColor: {
-      required: false
-    },
-    colorMode: {
-      required: false,
-      default: 'light'
-    },
-    cursorType: {
-      required: false,
-      default: 'cursor'
-    },
-    backgroundColor: {
-      required: false,
-      default: 'white'
-    },
-    hoverText: {
-      required: false
-    },
-    isDisabled: {
-      required: false,
-      default: false
-    }
-  },
-
-  components: { optionContainer },
-
-  data() {
-    return {}
-  },
-  methods: {
-    clickHandler() {
-      if (this.isDisabled) {
-        // prevent emitter if the option is disabled
-        return
-      } else {
-        this.$parent.$emit('option-selected', this.value)
-      }
-    },
-    hoverHandler() {
-      this.$parent.$emit('option-hovered', this.value)
-    }
-  },
-  computed: {}
-}
-</script>
+<template>
+  <optionContainer
+    :data-value="value"
+    :hoveredBgColor="
+      colorMode == 'dark'
+        ? '#000000'
+        : hoveredBgColor
+        ? hoveredBgColor
+        : 'grey5'
+    "
+    @click="clickHandler"
+    @mouseover="hoverHandler"
+    :cursorType="cursorType"
+    :isDisabled="isDisabled"
+    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :title="hoverText"
+  >
+    <slot></slot>
+  </optionContainer>
+</template>
+
+<script>
+//   import selectButton from './selectButton'
+//   import selectDropdown from './selectDropDown'
+import styled from 'vue-styled-components'
+const optionProps = {
+  isDisabled: Boolean,
+  hoveredBgColor: String,
+  cursorType: String,
+  backgroundColor: String
+}
+const optionContainer = styled('div', optionProps)`
+  display: flex;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 10px;
+  gap: 14px;
+  width: 100%;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
+  box-sizing: inherit;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
+  color: ${(props) =>
+    props.isDisabled ? props.theme.colors.grey3 : 'inherit'};
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors[props.hoveredBgColor]
+        ? props.theme.colors[props.hoveredBgColor]
+        : props.hoveredBgColor} !important;
+  }
+`
+
+export default {
+  name: 'RCoption',
+
+  props: {
+    value: {
+      required: true
+    },
+    hoveredBgColor: {
+      required: false
+    },
+    colorMode: {
+      required: false,
+      default: 'light'
+    },
+    cursorType: {
+      required: false,
+      default: 'cursor'
+    },
+    backgroundColor: {
+      required: false,
+      default: 'white'
+    },
+    hoverText: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
+    }
+  },
+
+  components: { optionContainer },
+
+  data() {
+    return {}
+  },
+  methods: {
+    clickHandler() {
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
+    },
+    hoverHandler() {
+      this.$parent.$emit('option-hovered', this.value)
+    }
+  },
+  computed: {}
+}
+</script>

package/src/components/inputs/select/select.stories.js

@@ -1,59 +1,59 @@
-import Select from "./index.vue"
-import Option from "./option/index.vue"
-
-export default {
-  title: "select",
-  component: Select,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Select,Option },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<Select v-bind="$props">
-                <template #selector="{selectedValue}">
-                    value selected: {{selectedValue}}
-                </template>
-                <template #dropdown>
-                    <Option value="1">value one</Option>
-                    <Option value="2">value two</Option>
-                    <Option value="3">value three</Option>
-                    <Option value="4">value four</Option>
-                </template>
-            </Select>`,
-
-    // import Select from "@eturnity/eturnity_reusable_components/src/components/inputs/select"
-    // import Option from "@eturnity/eturnity_reusable_components/src/components/inputs/select/option"
-    // To use:
-    // How to use it
-    // <Select 
-    //     hoverDropdown="true"
-    //     selectWidth="100%"
-    //     optionWidth="50%"
-    //     label="that is a label"
-    //     alignItems="vertical"
-    //     >
-    //     <template #selector="{selectedValue}">
-    //     value selected: {{selectedValue}}
-    //     </template>
-    //     <template #dropdown>
-    //     <Option value="1">value one</Option>
-    //     <Option value="2">value two</Option>
-    //     <Option value="3">value three</Option>
-    //     <Option value="4">value four</Option>
-    //     </template>
-    // </Select> 
-})
-
-export const Default = Template.bind({})
-Default.args = {
-    hoverDropdown="true"
-    selectWidth="100%"
-    optionWidth="50%"
-    label="that is a label"
-    alignItems="vertical"
-    value="2"
-}
-
+import Select from "./index.vue"
+import Option from "./option/index.vue"
+
+export default {
+  title: "select",
+  component: Select,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Select,Option },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: `<Select v-bind="$props">
+                <template #selector="{selectedValue}">
+                    value selected: {{selectedValue}}
+                </template>
+                <template #dropdown>
+                    <Option value="1">value one</Option>
+                    <Option value="2">value two</Option>
+                    <Option value="3">value three</Option>
+                    <Option value="4">value four</Option>
+                </template>
+            </Select>`,
+
+    // import Select from "@eturnity/eturnity_reusable_components/src/components/inputs/select"
+    // import Option from "@eturnity/eturnity_reusable_components/src/components/inputs/select/option"
+    // To use:
+    // How to use it
+    // <Select 
+    //     hoverDropdown="true"
+    //     selectWidth="100%"
+    //     optionWidth="50%"
+    //     label="that is a label"
+    //     alignItems="vertical"
+    //     >
+    //     <template #selector="{selectedValue}">
+    //     value selected: {{selectedValue}}
+    //     </template>
+    //     <template #dropdown>
+    //     <Option value="1">value one</Option>
+    //     <Option value="2">value two</Option>
+    //     <Option value="3">value three</Option>
+    //     <Option value="4">value four</Option>
+    //     </template>
+    // </Select> 
+})
+
+export const Default = Template.bind({})
+Default.args = {
+    hoverDropdown="true"
+    selectWidth="100%"
+    optionWidth="50%"
+    label="that is a label"
+    alignItems="vertical"
+    value="2"
+}
+

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>