@eturnity/eturnity_reusable_components 6.43.5 → 6.43.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.43.5",
+  "version": "6.43.6",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -18,7 +18,7 @@
     "vue-styled-components": "1.6.0",
     "vue2-datepicker": "3.11.1",
     "vuedraggable": "2.24.3",
-    "core-js": "3.31.1"
+    "core-js": "^3.31.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "6.2.8",

package/src/components/iconWrapper/index.vue

@@ -8,77 +8,63 @@
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
-  >
-    <icon
-      :disabled="disabled"
-      :size="iconSize"
-      :name="name"
-      :color="iconColor"
-      :hoveredColor="hoveredIconColor"
-    />
-    <caret v-if="hasCaret">
-      <iconWrapper
-        :disabled="disabled"
-        size="10px"
-        name="arrow_down"
-        :iconColor="iconColor"
-        :hoveredBackgroundColor="hoveredIconColor"
-        borderRadius="1px"
-      />
-    </caret>
-  </Wrapper>
-</template>
-
-<script>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<icon
-//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-//   color="red"
-//   hoveredColor="blue"
-//   size="60px" by default, this is 30px
-// />
-
-import styled from 'vue-styled-components'
-import icon from '../icon'
-const wrapperAttrs = {
-  isHovered: Boolean,
-  borderRadius: String,
-  disabled: Boolean,
-  size: String,
-  backgroundColor: String,
-  hoveredBackgroundColor: String
-}
-const Wrapper = styled('div', wrapperAttrs)`
-  position: relative;
-  display: inline-flex;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  justify-content: center;
-  align-items: center;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor] || props.backgroundColor};
-  border-radius: ${(props) => props.borderRadius};
-  ${(props) =>
-    props.isHovered
-      ? 'background-color:' +
-          props.theme.colors[props.hoveredBackgroundColor] ||
-        props.hoveredBackgroundColor
-      : ''};
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors[props.hoveredBackgroundColor] ||
-      props.hoveredBackgroundColor};
-  }
-`
-const caret = styled.div`
-  position: absolute;
-  bottom: 3px;
-  right: 2px;
-  height: 10px;
-`
-
+    >
+        <icon :disabled="disabled" 
+            :size="iconSize" 
+            :name="name" 
+            :color="iconColor" 
+            :hoveredColor="hoveredIconColor" 
+            :isStriked="isStriked"
+            />
+            
+        <caret v-if="hasCaret">
+          <iconWrapper :disabled="disabled" 
+            size="10px" 
+            name="arrow_down" 
+            :iconColor="iconColor" 
+            :hoveredBackgroundColor="hoveredIconColor"
+            borderRadius="1px"
+            />  
+        </caret>
+    </Wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+   
+  import styled from 'vue-styled-components'
+  import icon from '../icon'
+  const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
+  const Wrapper = styled('div', wrapperAttrs)`
+    position:relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
+    justify-content:center;
+    align-items:center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
+    &:hover{
+        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
+    }
+  `
+  const caret=styled.div`
+  position:absolute;
+  bottom:3px;
+  right:2px;
+  height:10px;
+  `
+  
 export default {
   name: 'iconWrapper',
   components: {

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

@@ -205,10 +205,11 @@ const selectButton = styled('div', selectButtonAttrs)`
   padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
-  min-height: ${(props) => props.height};
+  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 &&
     `