@eturnity/eturnity_reusable_components 6.33.1-3d-qa-6.37.0 → 6.33.1-EDPM-8208.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.33.1-3d-qa-6.37.0",
+  "version": "6.33.1-EDPM-8208.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -60,7 +60,14 @@
             fontColor="black"
             :disabled="false"
           />
-
+          <icon
+            name="opacity"
+            color="red"
+            hoveredColor="blue"
+            size="60px"
+            cursor="default"
+            isStriked = "true"
+          />
           <Select
             :value="value"
             selectWidth="100%"
@@ -104,6 +111,7 @@ import Option from '@/components/inputs/select/option'
 import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
+import icon from '@/components/icon'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -127,7 +135,8 @@ export default {
     SwitchField,
     iconCollection,
     dropdownComponent,
-    videoThumbnail
+    videoThumbnail,
+    icon
   },
   data() {
     return {

package/src/assets/svgIcons/opacity.svg

@@ -1 +1 @@
-<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z"  /></svg>
+<svg class="svg-icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z"  /></svg>

package/src/components/icon/index.vue

@@ -9,6 +9,7 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
+    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
   </Wrapper>
 </template>
 
@@ -21,6 +22,7 @@
 //   hoveredColor="blue"
 //   size="60px" by default, this is 30px
 //   cursor="default"
+//   isStriked = "true"
 // />
 
 import styled from 'vue-styled-components'
@@ -28,6 +30,7 @@ import styled from 'vue-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
+  position:relative
   align-content: center;
   justify-content: center;
   width: ${(props) => props.size};
@@ -37,6 +40,22 @@ const Wrapper = styled('div', wrapperAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
+const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
+const strikedLine = styled('div', strikedAttrs)`
+  display: flex;
+  position: absolute;
+  bottom:0;
+  left:0;
+  align-content: center;
+  justify-content: center;
+  width: 143%;
+  height:8%;
+  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  min-height: 0;
+  line-height: 0;
+  transform-origin: 0% 100%;
+  transform: rotate(-45deg);
+`
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
   svg {
@@ -50,13 +69,17 @@ const IconImage = styled('div', IconImageProps)`
   &:hover > svg path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
+  &:hover + div {
+    background-color: ${(props)=>props.hoveredColor};
+  }
 `
 
 export default {
   name: 'icon',
   components: {
     IconImage,
-    Wrapper
+    Wrapper,
+    strikedLine
   },
   props: {
     disabled: {
@@ -79,6 +102,10 @@ export default {
     cursor: {
       required: false,
       default: null
+    },
+    isStriked: {
+      required: false,
+      default: false
     }
   },
   data() {

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

@@ -432,10 +432,6 @@ export default {
     labelFontColor: {
       required: false,
       default: 'eturnityGrey'
-    },
-    focus:{
-      required: false,
-      default: false
     }
   },
   computed: {
@@ -548,7 +544,7 @@ export default {
       }
       this.isFocused = true
       this.$nextTick(() => {
-        this.$refs.inputField1.$el.focus()
+        this.$refs.inputField1.$el.select()
       })
       this.$emit('input-focus')
     },
@@ -634,17 +630,7 @@ export default {
       })
     }
   },
-  mounted(){
-    if(this.focus){
-      this.focusInput()
-    }
-  },
   watch: {
-    focus(value){
-      if(value){
-        this.focusInput()
-      }
-    },
     clearInput: function (value) {
       if (value) {
         // If the value is typed, then we should clear the textInput on Continue

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

@@ -76,9 +76,7 @@
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import theme from '../../../assets/theme'
-const Container = styled.div`
-  width:100%
-`
+const Container = styled.div``
 
 const flexAttrs = {
   label: String,
@@ -94,7 +92,6 @@ const FlexWrapper = styled('div', flexAttrs)`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   grid-template-columns: ${(props) =>
     props.alignItems === 'vertical' || !props.label ? '1fr' : 'auto 1fr'};
-  width:100%;
 `
 
 const toggleAttrs = {
@@ -120,7 +117,6 @@ const SwitchWrapper = styled('span', toggleAttrs)`
       : props.size === 'small'
       ? '16px'
       : '24px'};
-  width:100%;
 `
 const optionAttrs = {
   isActive: Boolean,
@@ -143,10 +139,9 @@ const switchOption = styled('div', optionAttrs)`
   line-height: 1;
   text-align: center;
   padding: 10px;
-  margin-right: 0;
+  margin-right: -1px;
   transition: all 0.1s ease-in-out;
   overflow: hidden;
-  width:100%;
   & :hover {
     cursor: pointer;
   }