@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.8 → 7.4.4-EPDM-7260.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.4-EPDM-7260.8",
+  "version": "7.4.4-EPDM-7260.9",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/buttons/mainButton/index.vue

@@ -8,7 +8,10 @@
       :noWrap="noWrap"
       :data-id="dataId"
     >
-      {{ text }}
+      <Label :hasIcon="Boolean(icon)">
+        <icon v-if="icon" :name="icon" size="14px" />
+        {{ text }}
+      </Label>
     </button-container>
   </page-container>
 </template>
@@ -20,12 +23,14 @@
 //   text="Click Me"
 //   customColor="#ab5348"
 //   type="secondary" // primary, secondary, cancel
+//   icon="icon-name" // icon name from icon component
 //   :isDisabled="true"
 //   :minWidth="minWidth"
 //   :data-id="test_data_id"
 // />
 
 import styled from 'vue-styled-components'
+import Icon from '../../icon'
 
 const PageContainer = styled.div``
 
@@ -68,9 +73,22 @@ const ButtonContainer = styled('div', ButtonAttrs)`
   }
 `
 
+const LabelAttrs = {
+  hasIcon: Boolean
+}
+
+const Label = styled('span', LabelAttrs)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${(props) => (props.hasIcon ? '5px' : '0')};
+`
+
 export default {
   name: 'main-button',
   components: {
+    Icon,
+    Label,
     PageContainer,
     ButtonContainer
   },
@@ -83,6 +101,10 @@ export default {
       required: false,
       default: false
     },
+    icon: {
+      required: false,
+      default: null
+    },
     text: {
       required: true
     },

package/src/components/icon/index.vue

@@ -9,7 +9,12 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
-    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
+    <striked-line
+      v-if="isStriked"
+      :color="color"
+      :disabled="disabled"
+      :hoveredColor="hoveredColor"
+    ></striked-line>
   </Wrapper>
 </template>
 
@@ -40,17 +45,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 strikedAttrs = {
+  isDisabled: Boolean,
+  color: String,
+  hoveredColor: String
+}
 const strikedLine = styled('div', strikedAttrs)`
   display: flex;
   position: absolute;
-  bottom:0;
-  left:0;
+  bottom: 0;
+  left: 0;
   align-content: center;
   justify-content: center;
   width: 143%;
-  height:8%;
-  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  height: 8%;
+  background-color: ${(props) =>
+    props.theme.colors[props.color] || props.color};
   min-height: 0;
   line-height: 0;
   transform-origin: 0% 100%;
@@ -71,7 +81,7 @@ const IconImage = styled('div', IconImageProps)`
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
-    background-color: ${(props)=>props.hoveredColor};
+    background-color: ${(props) => props.hoveredColor};
   }
 `
 

package/src/components/rangeSlider/index.vue

@@ -11,7 +11,7 @@
         <VerticalLabel>{{ label.name }}</VerticalLabel>
         <BarSlider>
           <Bar
-            @contextmenu="
+            @click.native.stop="
               onBarRightClick({ event: $event, label, type: 'add' })
             "
           >
@@ -57,12 +57,11 @@
                     label.selectedTariffs
                   )
                 "
-                @contextmenu.native.stop="
-                  onBarRightClick({
-                    event: $event,
-                    label,
+                @click.native.stop="
+                  $emit('on-bar-tariff-click', {
                     type: 'delete',
-                    bar
+                    item: bar,
+                    label: activeLabel
                   })
                 "
                 @activated="onActivateBar({ item: bar })"
@@ -401,6 +400,7 @@ export default {
       document.addEventListener('keydown', this.onKeyDownDelete)
     },
     onDeactivateBar() {
+      this.$emit('deactivate')
       this.activeItem = null
       document.removeEventListener('keydown', this.onKeyDownDelete)
     },