@eturnity/eturnity_reusable_components 6.37.0 → 6.38.0-EDPM-8545.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.37.0",
+  "version": "6.38.0-EDPM-8545.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/buttons/mainButton/index.vue

@@ -5,6 +5,7 @@
       :minWidth="minWidth"
       :isDisabled="isDisabled"
       :customColor="customColor"
+      :wrap="wrap"
     >
       {{ text }}
     </button-container>
@@ -26,7 +27,7 @@ import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, wrap: Boolean }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
@@ -48,6 +49,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
   ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
+  ${(props) => (props.wrap ? `white-space: nowrap;` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -80,6 +82,10 @@ export default {
       required: false,
       default: null,
     },
+    wrap: {
+      required: false,
+      default: false
+    },
     minWidth: {
       required: false,
       default: null

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/iconWrapper/index.vue

@@ -4,6 +4,8 @@
     :size="size" 
     :backgroundColor="backgroundColor" 
     :borderRadius="borderRadius"
+    :hasBorder="hasBorder"
+    :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
     >
@@ -11,7 +13,10 @@
             :size="iconSize" 
             :name="name" 
             :color="iconColor" 
-            :hoveredColor="hoveredIconColor" />
+            :hoveredColor="hoveredIconColor" 
+            :isStriked="isStriked"
+            />
+            
         <caret v-if="hasCaret">
           <iconWrapper :disabled="disabled" 
             size="10px" 
@@ -36,12 +41,13 @@
   
   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 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')};
@@ -84,6 +90,9 @@
       backgroundColor: {
         required: false,
       },
+      hasBorder: {
+        required: false,
+      },
       hoveredBackgroundColor: {
         required: false,
         default:"transparentWhite1"
@@ -102,11 +111,15 @@
       },
       borderRadius:{
         required:false,
-        default:'6px'
+        default:'4px'
       },
       isHovered:{
         required:false,
         default:false
+      },
+      isStriked:{
+        required:false,
+        default:false
       }
     },
     data() {