@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

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

@@ -1,43 +1,43 @@
 <template>
-  <OptionContainer
-    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
-    :cursor-type="cursorType"
+  <optionContainer
     :data-value="value"
-    :disabled-bg-color="disabledBgColor"
-    :disabled-text-color="disabledTextColor"
-    :hovered-bg-color="
+    :hoveredBgColor="
       colorMode == 'dark'
         ? '#000000'
         : hoveredBgColor
-          ? hoveredBgColor
-          : 'grey5'
+        ? 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)`
+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;
@@ -54,20 +54,20 @@
         : props.disabledBgColor
       : props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
-  : props.backgroundColor} !important;
+      : props.backgroundColor} !important;
   box-sizing: inherit;
   background-color: ${(props) =>
     props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
-  : props.backgroundColor};
+      : props.backgroundColor};
   color: ${(props) =>
     props.isDisabled
-      ? props.disabledTextColor
+      ? !!props.disabledTextColor
         ? props.theme.colors[props.disabledTextColor]
           ? props.theme.colors[props.disabledTextColor]
           : props.disabledTextColor
         : props.theme.colors.grey3
-  : 'inherit'};
+      : 'inherit'};
   &:hover {
     background-color: ${(props) =>
       !!props.disabledTextColor && props.isDisabled
@@ -76,73 +76,73 @@
           : props.disabledBgColor
         : props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
-  : props.hoveredBgColor} !important;
+        : props.hoveredBgColor} !important;
   }
 `
 
-  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'
-      }
+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'
     },
-    emits: ['option-hovered', 'option-selected'],
-    data() {
-      return {}
+    backgroundColor: {
+      required: false,
+      default: 'white'
     },
-    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)
+    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'
+    }
+  },
+
+  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)
       }
+    },
+    hoverHandler() {
+      this.$parent.$emit('option-hovered', this.value)
     }
-  }
+  },
+  computed: {}
+}
 </script>

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

@@ -9,7 +9,7 @@ export default {
 
 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">
@@ -49,11 +49,11 @@ const Template = (args, { argTypes }) => ({
 
 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,14 +1,14 @@
 <template>
-  <Container>
+  <container>
     <Slider
-      :max="maxValue"
-      :min="minValue"
-      :tooltips="false"
       :value="value"
       @update="onChange($event)"
+      :tooltips="false"
+      :min="minValue"
+      :max="maxValue"
     />
-    <NumberText> {{ value }} {{ unit }} </NumberText>
-  </Container>
+    <number-text> {{ value }} {{ unit }} </number-text>
+  </container>
 </template>
 
 <script>
@@ -21,10 +21,10 @@
 //     :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'
+import Slider from '@vueform/slider'
+import styled from 'vue3-styled-components'
 
-  const Container = styled.div`
+const Container = styled.div`
   margin: 16px 0 16px 21px;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -74,53 +74,53 @@
   }
 `
 
-  const NumberText = styled.div`
+const NumberText = styled.div`
   font-weight: 500;
   font-size: 24px;
   color: ${(props) => props.theme.colors.black};
 `
 
-  export default {
-    name: 'Slider',
-    components: {
-      Slider,
-      Container,
-      NumberText
+export default {
+  name: 'slider',
+  components: {
+    Slider,
+    Container,
+    NumberText
+  },
+  props: {
+    value: {
+      required: false,
+      default: 0
     },
-    props: {
-      value: {
-        required: false,
-        default: 0
-      },
-      unit: {
-        required: false,
-        default: ''
-      },
-      minValue: {
-        required: false,
-        default: 0
-      },
-      maxValue: {
-        required: false,
-        default: 100
-      }
+    unit: {
+      required: false,
+      default: ''
     },
-    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)
+    minValue: {
+      required: false,
+      default: 0
     },
-    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>