@eturnity/eturnity_reusable_components 7.20.0--EPDM-10564.2 → 7.20.0-EPDM-10528.0

package/babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
-}
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.20.0--EPDM-10564.2",
+  "version": "7.20.0-EPDM-10528.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.12.16",
+    "@babel/eslint-parser": "7.12.16",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",

package/src/assets/svgIcons/house_3d-1.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <mask id="path-1-inside-1_57915_53334" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0303 2.75757L0 5.30302V11.2424L3.41022 12.4091V8.96996L4.53143 9.41845V12.7926L8.0606 14V8.0606L4.0303 2.75757Z"/>
+  </mask>
+  <path d="M0 5.30302L-0.694191 4.20389L-1.3 4.5865V5.30302H0ZM4.0303 2.75757L5.06531 1.97096L4.344 1.02187L3.33611 1.65843L4.0303 2.75757ZM0 11.2424H-1.3V12.1716L-0.420794 12.4724L0 11.2424ZM3.41022 12.4091L2.98943 13.6391L4.71022 14.2278V12.4091H3.41022ZM3.41022 8.96996L3.89303 7.76294L2.11022 7.04982V8.96996H3.41022ZM4.53143 9.41845H5.83143V8.5383L5.01424 8.21143L4.53143 9.41845ZM4.53143 12.7926H3.23143V13.7219L4.11064 14.0227L4.53143 12.7926ZM8.0606 14L7.63981 15.23L9.3606 15.8187V14H8.0606ZM8.0606 8.0606H9.3606V7.62266L9.09561 7.27399L8.0606 8.0606ZM0.694191 6.40216L4.72449 3.8567L3.33611 1.65843L-0.694191 4.20389L0.694191 6.40216ZM1.3 11.2424V5.30302H-1.3V11.2424H1.3ZM3.83102 11.1791L0.420794 10.0124L-0.420794 12.4724L2.98943 13.6391L3.83102 11.1791ZM4.71022 12.4091V8.96996H2.11022V12.4091H4.71022ZM2.92741 10.177L4.04862 10.6255L5.01424 8.21143L3.89303 7.76294L2.92741 10.177ZM3.23143 9.41845V12.7926H5.83143V9.41845H3.23143ZM8.48139 12.77L4.95223 11.5626L4.11064 14.0227L7.63981 15.23L8.48139 12.77ZM6.7606 8.0606V14H9.3606V8.0606H6.7606ZM2.99529 3.54418L7.02559 8.8472L9.09561 7.27399L5.06531 1.97096L2.99529 3.54418Z" fill="#0068DE" mask="url(#path-1-inside-1_57915_53334)"/>
+  <path d="M8.55859 13.2165V8.37967L13.498 6.08638V10.9232L8.55859 13.2165Z" fill="#0068DE" stroke="#0068DE"/>
+  <path d="M8.21608 7.43759L4.80515 2.94953L9.81611 0.623007L13.227 5.11107L8.21608 7.43759Z" fill="#0068DE" stroke="#0068DE"/>
+</svg>

package/src/assets/svgIcons/house_3d.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="none">
+  <mask id="path-1-inside-1_57915_3657" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.03081 3.71851L0 6.28736V12.2814L3.41065 13.4587V9.98801L4.532 10.4406V13.8458L8.06161 15.0643V9.07028L4.03081 3.71851Z"/>
+  </mask>
+  <path d="M0 6.28736L-0.698673 5.19107L-1.3 5.5743V6.28736H0ZM4.03081 3.71851L5.06922 2.9364L4.34595 1.9761L3.33213 2.62221L4.03081 3.71851ZM0 12.2814H-1.3V13.2079L-0.424205 13.5102L0 12.2814ZM3.41065 13.4587L2.98645 14.6876L4.71065 15.2828V13.4587H3.41065ZM3.41065 9.98801L3.89722 8.78251L2.11065 8.0614V9.98801H3.41065ZM4.532 10.4406H5.832V9.56343L5.01858 9.23511L4.532 10.4406ZM4.532 13.8458H3.232V14.7723L4.1078 15.0747L4.532 13.8458ZM8.06161 15.0643L7.63741 16.2931L9.36161 16.8883V15.0643H8.06161ZM8.06161 9.07028H9.36161V8.63549L9.10003 8.28818L8.06161 9.07028ZM0.698673 7.38365L4.72948 4.8148L3.33213 2.62221L-0.698673 5.19107L0.698673 7.38365ZM1.3 12.2814V6.28736H-1.3V12.2814H1.3ZM3.83485 12.2299L0.424205 11.0525L-0.424205 13.5102L2.98645 14.6876L3.83485 12.2299ZM4.71065 13.4587V9.98801H2.11065V13.4587H4.71065ZM2.92408 11.1935L4.04543 11.6461L5.01858 9.23511L3.89722 8.78251L2.92408 11.1935ZM3.232 10.4406V13.8458H5.832V10.4406H3.232ZM8.48582 13.8354L4.95621 12.617L4.1078 15.0747L7.63741 16.2931L8.48582 13.8354ZM6.76161 9.07028V15.0643H9.36161V9.07028H6.76161ZM2.99239 4.50061L7.0232 9.85239L9.10003 8.28818L5.06922 2.9364L2.99239 4.50061Z" fill="white" mask="url(#path-1-inside-1_57915_3657)"/>
+  <path d="M8.5625 14.2779V9.38818L13.5026 7.07375V11.9634L8.5625 14.2779Z" fill="white" stroke="white"/>
+  <path d="M8.21735 8.44534L4.80134 3.90984L9.81609 1.56045L13.2321 6.09596L8.21735 8.44534Z" fill="white" stroke="white"/>
+</svg>

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

@@ -8,6 +8,7 @@
       :customColor="customColor"
       :noWrap="noWrap"
       :data-id="dataId"
+      :fontColor="fontColor"
     >
       {{ text }}
     </button-container>
@@ -35,12 +36,14 @@ const ButtonAttrs = {
   isDisabled: Boolean,
   minWidth: String,
   customColor: String,
+  fontColor: String,
   noWrap: Boolean
 }
 const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
-  color: ${(props) => props.theme.colors.white};
+  color: ${(props) =>
+    props.fontColor ? props.fontColor : props.theme.colors.white};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors.disabled
@@ -91,6 +94,9 @@ export default {
       required: false,
       default: null
     },
+    fontColor: {
+      required: false
+    },
     noWrap: {
       required: false,
       default: false

package/src/components/infoText/index.vue

@@ -26,7 +26,7 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     size="20px"
+//     size="20"
 //     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'

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

@@ -1,14 +1,12 @@
 <template>
   <Container
     :selectWidth="selectWidth"
-    :noRelative="noRelative"
     @mouseenter="mouseEnterHandler"
     @mouseleave="mouseLeaveHandler"
   >
     <input-wrapper
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
-      :noRelative="noRelative"
     >
       <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
@@ -49,9 +47,6 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
-          :tablePaddingLeft="tablePaddingLeft"
-          :noRelative="noRelative"
-          :showDisabledBackground="showDisabledBackground"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -81,7 +76,7 @@
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
-          <Caret @click.stop="toggleCaretDropdown" class="caret_dropdown">
+          <Caret @click.stop="toggleCaretDropdown">
             <icon
               v-if="isDropdownOpen"
               name="arrow_up"
@@ -104,7 +99,7 @@
             />
           </Caret>
         </selectButton>
-        <DropdownWrapper ref="dropdownWrapperRef" :noRelative="noRelative">
+        <DropdownWrapper ref="dropdownWrapperRef">
           <Teleport to="#portal-target">
             <selectDropdown
               ref="dropdown"
@@ -123,13 +118,10 @@
               :fontColor="
                 dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
               "
-              :noRelative="noRelative"
               :fontSize="fontSize"
-              :minWidth="minWidth"
               :selectedValue="selectedValue"
               @option-selected="optionSelected"
               @option-hovered="optionHovered"
-              @mouseleave="optionLeave"
             >
               <slot name="dropdown"></slot>
             </selectDropdown>
@@ -220,12 +212,11 @@ const optionalLabel = styled.span`
 `
 const inputProps = {
   selectWidth: String,
-  optionWidth: String,
-  noRelative: Boolean
+  optionWidth: String
 }
 const Container = styled('div', inputProps)`
   width: ${(props) => props.selectWidth};
-  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+  position: relative;
   display: inline-block;
 `
 const LabelWrapper = styled.div`
@@ -254,22 +245,13 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   hasNoPadding: Boolean,
   showBorder: Boolean,
-  paddingLeft: String,
-  noRelative: Boolean,
-  tablePaddingLeft: String,
-  showDisabledBackground: Boolean
+  paddingLeft: String
 }
 const selectButton = styled('div', selectButtonAttrs)`
-  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+  position: relative;
   box-sizing: border-box;
   border-radius: 4px;
   max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
-  ${(props) =>
-    props.isSearchBarVisible
-      ? ''
-      : `padding-left: ${
-          props.tablePaddingLeft ? props.tablePaddingLeft : props.paddingLeft
-        }`};
   ${(props) =>
     props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
   text-align: left;
@@ -292,7 +274,7 @@ const selectButton = styled('div', selectButtonAttrs)`
     }
   `}
   background-color:${(props) =>
-    props.disabled && props.showDisabledBackground
+    props.disabled
       ? props.theme.colors.grey5
       : props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -318,16 +300,13 @@ const selectDropdownAttrs = {
   fontSize: String,
   dropdownPosition: Object,
   hoveredValue: Number | String,
-  selectedValue: Number | String,
-  noRelative: Boolean,
-  minWidth: String
+  selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
   z-index: ${(props) => (props.isActive ? '2' : '99999')};
   position: absolute;
-  top: ${(props) =>
-    props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+  top: ${(props) => props.dropdownPosition?.top}px;
   left: ${(props) => props.dropdownPosition?.left}px;
   border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
@@ -337,7 +316,6 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   padding: 0px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
-  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
   background-color: ${(props) =>
     props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -357,17 +335,12 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   font-size: ${(props) => props.fontSize};
 `
 selectDropdown.emits = ['option-hovered', 'option-selected']
-const DropdownAttrs = { noRelative: Boolean }
-const DropdownWrapper = styled('div', DropdownAttrs)`
-  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+const DropdownWrapper = styled('div')`
+  position: relative;
 `
-const inputAttrs = {
-  alignItems: String,
-  hasLabel: Boolean,
-  noRelative: Boolean
-}
+const inputAttrs = { alignItems: String, hasLabel: Boolean }
 const InputWrapper = styled('div', inputAttrs)`
-  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+  position: relative;
   display: grid;
   align-items: center;
   gap: 8px;
@@ -396,10 +369,6 @@ export default {
       required: false,
       default: '13px'
     },
-    noRelative: {
-      required: false,
-      default: false
-    },
     label: {
       required: false
     },
@@ -432,9 +401,6 @@ export default {
       required: false,
       default: '36px'
     },
-    minWidth: {
-      required: false
-    },
     optionWidth: {
       required: false,
       default: null
@@ -510,13 +476,6 @@ export default {
       type: Boolean,
       default: false
     },
-    tablePaddingLeft: {
-      required: false
-    },
-    showDisabledBackground: {
-      required: false,
-      default: true
-    },
     minOptionLength: {
       type: Number,
       default: MIN_OPTION_LENGTH

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

@@ -16,7 +16,6 @@
     :disabledTextColor="disabledTextColor"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
-    :minWidth="minWidth"
     :padding="padding"
   >
     <slot></slot>
@@ -32,7 +31,6 @@ const optionProps = {
   hoveredBgColor: String,
   cursorType: String,
   backgroundColor: String,
-  minWidth: String,
   disabledBgColor: String,
   disabledTextColor: String,
   padding: String
@@ -46,7 +44,6 @@ const optionContainer = styled('div', optionProps)`
   padding: ${(props) => props.padding};
   gap: 14px;
   width: 100%;
-  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors[props.disabledBgColor]
@@ -109,9 +106,6 @@ export default {
       required: false,
       default: false
     },
-    minWidth: {
-      required: false
-    },
     disabledBgColor: {
       required: false,
       default: 'white'

package/src/components/pageTitle/index.vue

@@ -3,7 +3,11 @@
     <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
       {{ text }}
     </title-text>
-    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
+    <info-text
+      v-if="!!infoText"
+      :text="infoText"
+      :alignArrow="infoAlign"
+    />
   </title-wrap>
 </template>
 
@@ -14,16 +18,16 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from 'vue3-styled-components'
-import InfoText from '../infoText'
+import styled from "vue3-styled-components"
+import InfoText from "../infoText"
 
 const wrapAttrs = { hasInfoText: Boolean }
-const TitleWrap = styled('div', wrapAttrs)`
+const TitleWrap = styled("div", wrapAttrs)`
   display: grid;
   align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
-    props.hasInfoText ? 'auto auto 1fr' : '1fr'};
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
   margin-bottom: 20px;
 `
 
@@ -31,7 +35,7 @@ const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `
 
@@ -50,7 +54,8 @@ export default {
       required: false
     },
     fontSize: {
-      required: false
+      required: false,
+      default: '16px'
     },
     uppercase: {
       required: false,
@@ -58,11 +63,11 @@ export default {
     },
     infoText: {
       required: false,
-      default: null
+      default: null,
     },
     infoAlign: {
-      required: false
+      required: false,
     }
-  }
+  },
 }
 </script>

package/src/components/markerItem/index.vue

@@ -1,86 +0,0 @@
-<template>
-  <page-container>
-    <marker-container
-      :backgroundColor="backgroundColor"
-      :hasIcon="!!iconName"
-      :cursor="cursor"
-    >
-      <icon
-        v-if="!!iconName"
-        :name="iconName"
-        color="white"
-        size="10px"
-        :cursor="cursor"
-      />
-      <span>{{ label }}</span>
-    </marker-container>
-  </page-container>
-</template>
-
-<script>
-// import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
-// To use:
-// <marker-item
-//   label="Label"
-//   backgroundColor="#ab5348"
-//   iconName="icon_name"
-//   cursor="pointer"
-// />
-
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
-
-const PageContainer = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 14px;
-`
-
-const MarkerAttrs = {
-  backgroundColor: String,
-  hasIcon: Boolean,
-  cursor: String
-}
-const MarkerContainer = styled('div', MarkerAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
-  grid-gap: 5px;
-  position: relative;
-  align-items: center;
-  padding: 2px 7px;
-  color: ${(props) => props.theme.colors.white};
-  background-color: ${(props) =>
-    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border: 1px solid
-    ${(props) =>
-      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: 4px;
-  white-space: nowrap;
-  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
-`
-
-export default {
-  name: 'project-marker',
-  components: {
-    PageContainer,
-    MarkerContainer,
-    Icon
-  },
-  props: {
-    backgroundColor: {
-      required: false
-    },
-    iconName: {
-      required: false
-    },
-    label: {
-      required: true
-    },
-    cursor: {
-      required: false,
-      default: 'default'
-    }
-  }
-}
-</script>