@eturnity/eturnity_reusable_components 7.18.0--EPDM-9013.1 → 7.18.0--EPDM-10564.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.18.0--EPDM-9013.1",
+  "version": "7.18.0--EPDM-10564.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/infoText/index.vue

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

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

@@ -1,12 +1,14 @@
 <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
@@ -45,6 +47,9 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
+          :tablePaddingLeft="tablePaddingLeft"
+          :noRelative="noRelative"
+          :showDisabledBackground="showDisabledBackground"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -74,7 +79,7 @@
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
-          <Caret @click.stop="toggleCaretDropdown">
+          <Caret @click.stop="toggleCaretDropdown" class="caret_dropdown">
             <icon
               v-if="isDropdownOpen"
               name="arrow_up"
@@ -97,7 +102,7 @@
             />
           </Caret>
         </selectButton>
-        <DropdownWrapper>
+        <DropdownWrapper :noRelative="noRelative">
           <selectDropdown
             ref="dropdown"
             v-show="isDropdownOpen"
@@ -110,7 +115,9 @@
             :fontColor="
               dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
+            :noRelative="noRelative"
             :selectedValue="selectedValue"
+            :minWidth="minWidth"
             @option-selected="optionSelected"
             @option-hovered="optionHovered"
             @mouseleave="optionLeave"
@@ -172,7 +179,10 @@ const selectorProps = {
   showBorder: Boolean
 }
 const Selector = styled('div', selectorProps)`
-  ${(props) => props.selectWidth === '100%' ? 'width: 100%;' : `width: calc(${props.selectWidth} -
+  ${(props) =>
+    props.selectWidth === '100%'
+      ? 'width: 100%;'
+      : `width: calc(${props.selectWidth} -
       (
         ${CARET_WIDTH} +
         ${props.paddingLeft}
@@ -181,8 +191,7 @@ const Selector = styled('div', selectorProps)`
     );
     white-space: nowrap;
     text-overflow: ellipsis;
-    overflow: hidden;`
-  }
+    overflow: hidden;`}
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -197,10 +206,14 @@ const InputLabel = styled('div', labelAttrs)`
 const optionalLabel = styled.span`
   font-weight: 300;
 `
-const inputProps = { selectWidth: String, optionWidth: String }
+const inputProps = {
+  selectWidth: String,
+  optionWidth: String,
+  noRelative: Boolean
+}
 const Container = styled('div', inputProps)`
   width: ${(props) => props.selectWidth};
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: inline-block;
 `
 const LabelWrapper = styled.div`
@@ -228,14 +241,21 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean,
-  paddingLeft: String
+  paddingLeft: String,
+  noRelative: Boolean,
+  tablePaddingLeft: String,
+  showDisabledBackground: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   box-sizing: border-box;
   border-radius: 4px;
   ${(props) =>
-    props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}`};
+    props.isSearchBarVisible
+      ? ''
+      : `padding-left: ${
+          props.tablePaddingLeft ? props.tablePaddingLeft : props.paddingLeft
+        }`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -256,7 +276,7 @@ const selectButton = styled('div', selectButtonAttrs)`
     }
   `}
   background-color:${(props) =>
-    props.disabled
+    props.disabled && props.showDisabledBackground
       ? props.theme.colors.grey5
       : props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -280,13 +300,15 @@ const selectDropdownAttrs = {
   optionWidth: String,
   hoveredIndex: Number,
   hoveredValue: Number | String,
-  selectedValue: Number | String
+  selectedValue: Number | String,
+  noRelative: Boolean,
+  minWidth: String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
   z-index: ${(props) => (props.isActive ? '2' : '1')};
   position: absolute;
-  top: 5px;
+  top: ${(props) => (props.noRelative ? 'auto' : '5px')};
   border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
   display: flex;
@@ -295,6 +317,7 @@ 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]
@@ -312,12 +335,17 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
         : props.hoveredBgColor};
   }
 `
-const DropdownWrapper = styled('div')`
-  position: relative;
+const DropdownAttrs = { noRelative: Boolean }
+const DropdownWrapper = styled('div', DropdownAttrs)`
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
 `
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const inputAttrs = {
+  alignItems: String,
+  hasLabel: Boolean,
+  noRelative: Boolean
+}
 const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: grid;
   align-items: center;
   gap: 8px;
@@ -336,6 +364,10 @@ export default {
       required: false,
       default: '13px'
     },
+    noRelative: {
+      required: false,
+      default: false
+    },
     label: {
       required: false
     },
@@ -368,6 +400,9 @@ export default {
       required: false,
       default: '36px'
     },
+    minWidth: {
+      required: false
+    },
     optionWidth: {
       required: false,
       default: null
@@ -438,6 +473,13 @@ export default {
     isDraggable: {
       type: Boolean,
       default: false
+    },
+    tablePaddingLeft: {
+      required: false
+    },
+    showDisabledBackground: {
+      required: false,
+      default: true
     }
   },
 

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

@@ -14,6 +14,7 @@
     :isDisabled="isDisabled"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
+    :minWidth="minWidth"
   >
     <slot></slot>
   </optionContainer>
@@ -27,7 +28,8 @@ const optionProps = {
   isDisabled: Boolean,
   hoveredBgColor: String,
   cursorType: String,
-  backgroundColor: String
+  backgroundColor: String,
+  minWidth: String
 }
 const optionContainer = styled('div', optionProps)`
   display: flex;
@@ -37,7 +39,8 @@ const optionContainer = styled('div', optionProps)`
   align-items: center;
   padding: 12px 10px;
   gap: 14px;
-  width: 100%;
+  width: max-content;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
   background-color: ${(props) =>
     props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
@@ -85,6 +88,9 @@ export default {
     isDisabled: {
       required: false,
       default: false
+    },
+    minWidth: {
+      required: false
     }
   },
 

package/src/components/markerItem/index.vue

@@ -0,0 +1,86 @@
+<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 'vue-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>

package/src/components/pageTitle/index.vue

@@ -3,11 +3,7 @@
     <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>
 
@@ -18,16 +14,16 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue-styled-components"
-import InfoText from "../infoText"
+import styled from 'vue-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;
 `
 
@@ -35,12 +31,12 @@ 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 : '16px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `
 
 export default {
-  name: "page-title",
+  name: 'page-title',
   components: {
     TitleText,
     TitleWrap,
@@ -48,14 +44,13 @@ export default {
   },
   props: {
     text: {
-      required: true,
+      required: true
     },
     color: {
-      required: false,
+      required: false
     },
     fontSize: {
-      required: false,
-      default: '16px'
+      required: false
     },
     uppercase: {
       required: false,
@@ -63,11 +58,11 @@ export default {
     },
     infoText: {
       required: false,
-      default: null,
+      default: null
     },
     infoAlign: {
-      required: false,
+      required: false
     }
-  },
+  }
 }
 </script>

package/src/assets/svgIcons/bexio.svg

@@ -1,4 +0,0 @@
-<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.462 8.46H12.894C12.7848 8.46 12.697 8.4327 12.6307 8.37809C12.5683 8.32349 12.5176 8.26108 12.4786 8.19087L10.5186 4.94378C10.4874 5.04129 10.4504 5.12514 10.4075 5.19535L8.52943 8.19087C8.48263 8.25718 8.42802 8.31958 8.36562 8.37809C8.30711 8.4327 8.2291 8.46 8.13159 8.46H6.66309L9.47138 4.10714L6.77425 0H8.34221C8.45143 0 8.52943 0.0156017 8.57624 0.0468051C8.62694 0.0741079 8.67375 0.120913 8.71665 0.18722L10.6415 3.28805C10.6805 3.19054 10.7273 3.09303 10.7819 2.99552L12.5488 0.216473C12.5917 0.142365 12.6385 0.0877595 12.6892 0.052656C12.7399 0.017552 12.8043 0 12.8823 0H14.3859L11.6654 4.04278L14.462 8.46Z" fill="#263238"/>
-<path d="M3.16519 7.23137C3.45772 7.23137 3.70344 7.19627 3.90237 7.12606C4.10129 7.05585 4.25925 6.96224 4.37627 6.84523C4.49718 6.72822 4.58299 6.5917 4.63369 6.43569C4.6883 6.27967 4.7156 6.1139 4.7156 5.93838C4.7156 5.75506 4.68635 5.59124 4.62784 5.44693C4.56934 5.29871 4.47768 5.1739 4.35286 5.07249C4.22805 4.96718 4.06618 4.88722 3.86726 4.83261C3.67224 4.77801 3.43627 4.75071 3.15934 4.75071H1.57382V7.23137H3.16519ZM1.57382 1.21693V3.66249H2.82585C3.36411 3.66249 3.76975 3.56498 4.04278 3.36996C4.31971 3.17494 4.45817 2.86486 4.45817 2.43971C4.45817 1.99896 4.33336 1.68498 4.08373 1.49776C3.83411 1.31054 3.44407 1.21693 2.91361 1.21693H1.57382ZM2.91361 0C3.46747 0 3.94137 0.0526557 4.33531 0.157967C4.72925 0.263278 5.05104 0.413444 5.30066 0.608465C5.55419 0.803486 5.73946 1.03946 5.85647 1.31639C5.97349 1.59332 6.03199 1.90535 6.03199 2.25249C6.03199 2.45141 6.00274 2.64253 5.94423 2.82585C5.88573 3.00527 5.79407 3.17494 5.66925 3.33485C5.54834 3.49087 5.39232 3.63324 5.2012 3.76195C5.01398 3.89066 4.78971 3.99988 4.52838 4.08959C5.69071 4.35091 6.27187 4.97888 6.27187 5.97349C6.27187 6.33232 6.20361 6.66386 6.0671 6.96809C5.93058 7.27232 5.73166 7.5356 5.47033 7.75793C5.209 7.97635 4.88722 8.14797 4.50498 8.27278C4.12274 8.39759 3.68589 8.46 3.19444 8.46H0V0H2.91361Z" fill="#263238"/>
-</svg>

package/src/assets/svgIcons/data_transfer.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H6V16H2V2H16V16H12V18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0ZM9 6L5 10H8V18H10V10H13L9 6Z" fill="#263238"/>
-</svg>