@eturnity/eturnity_reusable_components 6.42.1 → 6.42.2-EPDM-6921.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.42.1",
+  "version": "6.42.2-EPDM-6921.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,107 +1,109 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <br />
 
-     {{ alignItems }}
-          <input-number
-            :value="value"
-            :minNumber="0"
-            unitName="mm"
-            :numberPrecision="0"
-            backgroundColor="transparent"
-            borderColor="eturnityGrey"
-            inputHeight="34px"
-            inputWidth="420px"
-            textAlign="left"
-            :isInteractive="true"
-            :interactionStep="1"
-            @on-input="value = $event"
-            @input-change="changeHandler"
-            @input-focus="focusHandler"
-            @input-blur="blurHandler"
-          >
-            <template v-slot:label>
-              <div>Interactive Label</div>
-            </template>
-          </input-number>
-         
-          <dropdown-component openingMode="hover" gap="30px">
-            <template #trigger><i>Click Me</i></template>
-            <template #dropdown>
-              <div>
-              <a href="">test1</a>
-              <button href="">test2</button><br>
-              <p>Text</p>
-              </div>
-            </template>
-          </dropdown-component>
-        
-          <videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080" 
-            playIconColor="red"
-            playIconSize="20px"
-            width="400px"
-            height="600px"
-            />
+      <br/>
+      <input-number
+          :value="value"
+          :minNumber="0"
+          unitName="mm"
+          :numberPrecision="0"
+          backgroundColor="transparent"
+          borderColor="eturnityGrey"
+          inputHeight="34px"
+          inputWidth="420px"
+          textAlign="left"
+          :isInteractive="true"
+          :interactionStep="1"
+          @on-input="value = $event"
+          @input-change="changeHandler"
+          @input-focus="focusHandler"
+          @input-blur="blurHandler"
+      >
+        <template v-slot:label>
+          <div>Interactive Label</div>
+        </template>
+      </input-number>
+
+      <dropdown-component openingMode="hover" gap="30px">
+        <template #trigger><i>Click Me</i></template>
+        <template #dropdown>
+          <div>
+            <a href="">test1</a>
+            <button href="">test2</button>
+            <br>
+            <p>Text</p>
+          </div>
+        </template>
+      </dropdown-component>
+
+      <videoThumbnail
+          src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
+          playIconColor="red"
+          playIconSize="20px"
+          width="400px"
+          height="600px"
+      />
 
-          <SwitchField
-            @on-switch-change="onInputChange($event)"
-            :options="[
+      <SwitchField
+          @on-switch-change="onInputChange($event)"
+          :options="[
               { value: 0, content: 'zero' },
               { value: 1, content: 'one' },
               { value: 2, content: 'two' }
             ]"
-            :value="value"
-            label="label"
-            toggleColor="red"
-            size="large"
-            backgroundColor="blue"
-            labelAlign="left"
-            fontColor="black"
-            :disabled="false"
-          />
-          <icon
-            name="opacity"
-            color="red"
-            hoveredColor="blue"
-            size="60px"
-            cursor="default"
-            isStriked = "true"
-          />
-          <Select
-            :value="value"
-            selectWidth="100%"
-            optionWidth="50%"
-            label="that is a label"
-            alignItems="vertical"
-            colorMode="dark"
-            isSearchable="true"
-            @input-change="value = $event"
-            @search-change="searchValue = $event"
+          :value="value"
+          label="label"
+          toggleColor="red"
+          size="large"
+          backgroundColor="blue"
+          labelAlign="left"
+          fontColor="black"
+          :disabled="false"
+      />
+      <icon
+          name="opacity"
+          color="red"
+          hoveredColor="blue"
+          size="60px"
+          cursor="default"
+          isStriked="true"
+      />
+      <Select
+          :value="value"
+          selectWidth="100%"
+          optionWidth="50%"
+          label="that is a label"
+          alignItems="vertical"
+          colorMode="dark"
+          isSearchable="true"
+          @input-change="value = $event"
+          @search-change="searchValue = $event"
+      >
+        <template #selector="{ selectedValue }">
+          value selected: {{ selectedValue }}
+        </template>
+        <template #dropdown>
+          <Option
+              v-for="opt in filteredOptionList"
+              :key="opt.id"
+              :value="opt.val"
+          >{{ opt.lookFor }}
+          </Option
           >
-            <template #selector="{ selectedValue }">
-              value selected: {{ selectedValue }}
-            </template>
-            <template #dropdown>
-              <Option
-                v-for="opt in filteredOptionList"
-                :key="opt.id"
-                :value="opt.val"
-                >{{ opt.lookFor }}</Option
-              >
-            </template>
-          </Select>
-         
-          
-          {{ filteredOptionList }}
-        
-      <iconCollection color="red" />
+        </template>
+      </Select>
+
+
+      {{ filteredOptionList }}
+
+      <iconCollection color="red"/>
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
+import {ThemeProvider} from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
@@ -144,14 +146,14 @@ export default {
       value2: 42,
       companyName: 'toto',
       optionList: [
-        { id: 'a', val: 'A', lookFor: 'babababa' },
-        { id: 'b', val: 'B', lookFor: 'abab' },
-        { id: 'c', val: 'C', lookFor: 'ccc' },
-        { id: 'd', val: 'D', lookFor: 'ddd' },
-        { id: 'e', val: 'E', lookFor: 'dddee' },
-        { id: 'f', val: 'F', lookFor: 'ddfff' },
-        { id: 'g', val: 'G', lookFor: 'dggg' },
-        { id: 'h', val: 'H', lookFor: 'dddhhh' },
+        {id: 'a', val: 'A', lookFor: 'babababa'},
+        {id: 'b', val: 'B', lookFor: 'abab'},
+        {id: 'c', val: 'C', lookFor: 'ccc'},
+        {id: 'd', val: 'D', lookFor: 'ddd'},
+        {id: 'e', val: 'E', lookFor: 'dddee'},
+        {id: 'f', val: 'F', lookFor: 'ddfff'},
+        {id: 'g', val: 'G', lookFor: 'dggg'},
+        {id: 'h', val: 'H', lookFor: 'dddhhh'},
       ],
       searchValue: ''
     }
@@ -159,7 +161,7 @@ export default {
   computed: {
     filteredOptionList() {
       return this.optionList.filter((opt) =>
-        opt.lookFor.includes(this.searchValue)
+          opt.lookFor.includes(this.searchValue)
       )
     }
   },
@@ -222,7 +224,7 @@ export default {
       ]
       return items
     },
-    getComponentInfo({ row, value }) {
+    getComponentInfo({row, value}) {
       let item
       if (row.selectedValue && row.selectedValue[value]) {
         item = row.selectedValue[value]

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"
@@ -30,6 +32,8 @@
           ref="select"
           @click="toggleDropdown"
           :selectHeight="selectHeight"
+          :height="height"
+          :selectMinHeight="selectMinHeight"
           :bgColor="
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
@@ -140,9 +144,7 @@ const Caret = styled.div`
   justify-content: center;
   width: 30px;
   min-width: 30px;
-  height: 100%;
-  align-items: stretch
-  padding-top: 5px;
+  padding-top: 3px;
   cursor: pointer;
   margin-left: auto;
 `
@@ -162,7 +164,6 @@ const InputLabel = styled('div', labelAttrs)`
 `
 const optionalLabel = styled.span`
   font-weight: 300;
-
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
@@ -191,6 +192,8 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
+  height: String,
+  selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean
 }
@@ -198,14 +201,14 @@ 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;
+  min-height: ${(props) => props.selectMinHeight};
   display: flex;
   align-items: center;
   max-height: ${(props) => props.selectHeight};
+  ${(props) => (props.height ? `height: ${props.height}` : '')};
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
@@ -303,9 +306,18 @@ export default {
       default: null
     },
     selectHeight: {
+      type: String,
+      required: false,
+      default: null
+    },
+    height: {
       required: false,
       default: null
     },
+    selectMinHeight: {
+      required: false,
+      default: '36px'
+    },
     optionWidth: {
       required: false,
       default: null