@eturnity/eturnity_reusable_components 6.33.1-EPDM-7762.0 → 6.33.1-EPDM-7762.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.33.1-EPDM-7762.0",
+  "version": "6.33.1-EPDM-7762.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -14,9 +14,11 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
-          </input-label
-        >
+          >{{ label }}
+          <optionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})</optionalLabel
+          >
+        </input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -91,9 +93,7 @@
             :hoveredIndex="hoveredIndex"
             :isActive="isActive"
             :optionWidth="optionWidth"
-            :bgColor="
-              dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
-            "
+            :hoveredBgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
             :fontColor="
               dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
@@ -151,7 +151,7 @@ const Selector = styled.div`
   width: 100%;
 `
 
-const labelAttrs = { fontSize: String }
+const labelAttrs = { fontSize: String, fontColor: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
     props.theme.colors[props.fontColor]
@@ -162,7 +162,6 @@ const InputLabel = styled('div', labelAttrs)`
 `
 const optionalLabel = styled.span`
   font-weight: 300;
-
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
@@ -198,8 +197,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) =>
-    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
+  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
   min-height: 36px;
@@ -224,7 +222,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
 `
 const selectDropdownAttrs = {
-  bgColor: String,
+  hoveredBgColor: String,
   fontColor: String,
   selectWidth: String,
   optionWidth: String,
@@ -245,20 +243,20 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
     background-color:${(props) =>
-      props.theme.colors[props.bgColor]
-        ? props.theme.colors[props.bgColor]
-        : props.bgColor};
+      props.theme.colors[props.hoveredBgColor]
+        ? props.theme.colors[props.hoveredBgColor]
+        : props.hoveredBgColor};
     color:${(props) =>
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     max-height:300px;
     overflow-y:auto;
-    & [data-value="${(props) => props.selectedValue}"]{
-        backdrop-filter: brightness(1.4);
-    }
     &>div:nth-child(${(props) => props.hoveredIndex}){
-        backdrop-filter: brightness(1.2);
+        background-color:${(props) =>
+          props.theme.colors[props.hoveredBgColor]
+            ? props.theme.colors[props.hoveredBgColor]
+            : props.hoveredBgColor};
     }
 `
 const DropdownWrapper = styled('div')`
@@ -325,7 +323,8 @@ export default {
       required: false
     },
     dropdownBgColor: {
-      required: false
+      required: false,
+      default: 'grey5'
     },
     dropdownFontColor: {
       required: false

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

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