@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

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

@@ -1,148 +1,148 @@
 <template>
-  <optionContainer
+  <OptionContainer
+    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :cursor-type="cursorType"
     :data-value="value"
-    :hoveredBgColor="
+    :disabled-bg-color="disabledBgColor"
+    :disabled-text-color="disabledTextColor"
+    :hovered-bg-color="
       colorMode == 'dark'
         ? '#000000'
         : hoveredBgColor
         ? hoveredBgColor
         : 'grey5'
     "
+    :is-disabled="isDisabled"
+    :min-width="minWidth"
+    :padding="padding"
+    :title="hoverText"
     @click="clickHandler"
     @mouseover="hoverHandler"
-    :cursorType="cursorType"
-    :isDisabled="isDisabled"
-    :disabledBgColor="disabledBgColor"
-    :disabledTextColor="disabledTextColor"
-    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
-    :title="hoverText"
-    :minWidth="minWidth"
-    :padding="padding"
   >
     <slot></slot>
-  </optionContainer>
+  </OptionContainer>
 </template>
 
 <script>
-//   import selectButton from './selectButton'
-//   import selectDropdown from './selectDropDown'
-import styled from 'vue3-styled-components'
-const optionProps = {
-  isDisabled: Boolean,
-  hoveredBgColor: String,
-  cursorType: String,
-  backgroundColor: String,
-  minWidth: String,
-  disabledBgColor: String,
-  disabledTextColor: String,
-  padding: 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: ${(props) => props.padding};
-  gap: 14px;
-  width: 100%;
-  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
-  background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors[props.disabledBgColor]
-        ? props.theme.colors[props.disabledBgColor]
-        : props.disabledBgColor
-      : props.theme.colors[props.backgroundColor]
-      ? props.theme.colors[props.backgroundColor]
-      : props.backgroundColor} !important;
-  box-sizing: inherit;
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor]
-      ? props.theme.colors[props.backgroundColor]
-      : props.backgroundColor};
-  color: ${(props) =>
-    props.isDisabled
-      ? !!props.disabledTextColor
-        ? props.theme.colors[props.disabledTextColor]
-          ? props.theme.colors[props.disabledTextColor]
-          : props.disabledTextColor
-        : props.theme.colors.grey3
-      : 'inherit'};
-  &:hover {
+  //   import selectButton from './selectButton'
+  //   import selectDropdown from './selectDropDown'
+  import styled from 'vue3-styled-components'
+  const optionProps = {
+    isDisabled: Boolean,
+    hoveredBgColor: String,
+    cursorType: String,
+    backgroundColor: String,
+    minWidth: String,
+    disabledBgColor: String,
+    disabledTextColor: String,
+    padding: 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: ${(props) => props.padding};
+    gap: 14px;
+    width: 100%;
+    min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
     background-color: ${(props) =>
-      !!props.disabledTextColor && props.isDisabled
+      props.isDisabled
         ? props.theme.colors[props.disabledBgColor]
           ? props.theme.colors[props.disabledBgColor]
           : props.disabledBgColor
-        : props.theme.colors[props.hoveredBgColor]
-        ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor} !important;
-  }
-`
+        : props.theme.colors[props.backgroundColor]
+        ? props.theme.colors[props.backgroundColor]
+        : props.backgroundColor} !important;
+    box-sizing: inherit;
+    background-color: ${(props) =>
+      props.theme.colors[props.backgroundColor]
+        ? props.theme.colors[props.backgroundColor]
+        : props.backgroundColor};
+    color: ${(props) =>
+      props.isDisabled
+        ? props.disabledTextColor
+          ? props.theme.colors[props.disabledTextColor]
+            ? props.theme.colors[props.disabledTextColor]
+            : props.disabledTextColor
+          : props.theme.colors.grey3
+        : 'inherit'};
+    &:hover {
+      background-color: ${(props) =>
+        !!props.disabledTextColor && props.isDisabled
+          ? props.theme.colors[props.disabledBgColor]
+            ? props.theme.colors[props.disabledBgColor]
+            : props.disabledBgColor
+          : props.theme.colors[props.hoveredBgColor]
+          ? props.theme.colors[props.hoveredBgColor]
+          : props.hoveredBgColor} !important;
+    }
+  `
 
-export default {
-  name: 'RCoption',
-  emits: ['option-hovered', 'option-selected'],
-  props: {
-    value: {
-      required: true
-    },
-    hoveredBgColor: {
-      required: false
-    },
-    colorMode: {
-      required: false,
-      default: 'light'
-    },
-    cursorType: {
-      required: false,
-      default: 'pointer'
-    },
-    backgroundColor: {
-      required: false,
-      default: 'white'
-    },
-    hoverText: {
-      required: false
-    },
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    minWidth: {
-      required: false
-    },
-    disabledBgColor: {
-      required: false,
-      default: 'white'
+  export default {
+    name: 'RCoption',
+
+    components: { OptionContainer },
+    props: {
+      value: {
+        required: true,
+      },
+      hoveredBgColor: {
+        required: false,
+      },
+      colorMode: {
+        required: false,
+        default: 'light',
+      },
+      cursorType: {
+        required: false,
+        default: 'pointer',
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white',
+      },
+      hoverText: {
+        required: false,
+      },
+      isDisabled: {
+        required: false,
+        default: false,
+      },
+      minWidth: {
+        required: false,
+      },
+      disabledBgColor: {
+        required: false,
+        default: 'white',
+      },
+      disabledTextColor: {
+        required: false,
+        default: null,
+      },
+      padding: {
+        required: false,
+        default: '12px 10px',
+      },
     },
-    disabledTextColor: {
-      required: false,
-      default: null
+    emits: ['option-hovered', 'option-selected'],
+    data() {
+      return {}
     },
-    padding: {
-      required: false,
-      default: '12px 10px'
-    }
-  },
-
-  components: { optionContainer },
-  data() {
-    return {}
-  },
-  methods: {
-    clickHandler(e) {
-      if (this.isDisabled) {
-        // prevent emitter if the option is disabled
-        return
-      } else {
-        this.$parent.$emit('option-selected', this.value, e)
-      }
+    computed: {},
+    methods: {
+      clickHandler(e) {
+        if (this.isDisabled) {
+          // prevent emitter if the option is disabled
+          return
+        } else {
+          this.$parent.$emit('option-selected', this.value, e)
+        }
+      },
+      hoverHandler() {
+        this.$parent.$emit('option-hovered', this.value)
+      },
     },
-    hoverHandler() {
-      this.$parent.$emit('option-hovered', this.value)
-    }
-  },
-  computed: {}
-}
+  }
 </script>

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

@@ -1,15 +1,15 @@
-import Select from "./index.vue"
-import Option from "./option/index.vue"
+import Select from './index.vue'
+import Option from './option/index.vue'
 
 export default {
-  title: "select",
+  title: 'select',
   component: Select,
   // argTypes: {},
 }
 
 const Template = (args, { argTypes }) => ({
   // Components used in your story `template` are defined in the `components` object
-  components: { Select,Option },
+  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">
@@ -24,36 +24,35 @@ const Template = (args, { argTypes }) => ({
                 </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> 
+  // 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"
+  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>
+  <Container>
     <Slider
+      :max="maxValue"
+      :min="minValue"
+      :tooltips="false"
       :value="value"
       @update="onChange($event)"
-      :tooltips="false"
-      :min="minValue"
-      :max="maxValue"
     />
-    <number-text> {{ value }} {{ unit }} </number-text>
-  </container>
+    <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;
+  // 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'
 
-  .slider-touch-area {
-    background-color: ${(props) => props.theme.colors.mediumGray};
-    border-radius: 100%;
-    display: flex;
-    grid-gap: 3px;
+  const Container = styled.div`
+    margin: 16px 0 16px 21px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-gap: 40px;
     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;
+    .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;
+        &:nth-of-type(1) {
+          margin-left: 7px;
+        }
       }
     }
-  }
 
-  .slider-connect {
-    background: ${(props) => props.theme.colors.blue};
-  }
+    .slider-connect {
+      background: ${(props) => props.theme.colors.blue};
+    }
 
-  .slider-base {
-    background-color: ${(props) => props.theme.colors.lightGray};
-    border-radius: 0;
-  }
+    .slider-base {
+      background-color: ${(props) => props.theme.colors.lightGray};
+      border-radius: 0;
+    }
 
-  .slider-connects {
-    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;
-  }
-`
+    .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};
-`
+  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
+  export default {
+    name: 'Slider',
+    components: {
+      Slider,
+      Container,
+      NumberText,
     },
-    unit: {
-      required: false,
-      default: ''
+    props: {
+      value: {
+        required: false,
+        default: 0,
+      },
+      unit: {
+        required: false,
+        default: '',
+      },
+      minValue: {
+        required: false,
+        default: 0,
+      },
+      maxValue: {
+        required: false,
+        default: 100,
+      },
     },
-    minValue: {
-      required: false,
-      default: 0
+    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)
+      },
     },
-    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>