@eturnity/eturnity_reusable_components 7.12.6 → 7.12.7--EPDM-5518.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.12.6",
+  "version": "7.12.7--EPDM-5518.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -3,10 +3,11 @@
     <container
       :checkColor="checkColor"
       :size="size"
-      :hasLabel="!!label.length"
+      :hasLabel="label && !!label.length"
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
+      :cursorType="cursorType"
     >
       <input-checkbox
         type="checkbox"
@@ -17,7 +18,7 @@
       <div>
         <span class="checkmark"></span>
       </div>
-      <label-text v-if="!!label.length">{{ label }}</label-text>
+      <label-text v-if="label && !!label.length">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -33,6 +34,7 @@
 //     size="small"
 //     backgroundColor="red"
 //     :isDisabled="true"
+//     cursorType="default"
 // />
 import styled from 'vue-styled-components'
 
@@ -46,7 +48,8 @@ const containerAttrs = {
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean
+  isDisabled: Boolean,
+  cursorType: String
 }
 const Container = styled('label', containerAttrs)`
   display: grid;
@@ -55,7 +58,7 @@ const Container = styled('label', containerAttrs)`
   align-content: center;
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
   font-size: 16px;
   user-select: none;
 
@@ -80,7 +83,7 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : '#fff'};
+        : props.theme.colors.white};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -173,6 +176,10 @@ export default {
     dataId: {
       type: String,
       default: ''
+    },
+    cursorType: {
+      type: String,
+      default: 'pointer'
     }
   },
   methods: {

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

@@ -469,7 +469,7 @@ export default {
     }
   },
   methods: {
-    onEnterPress(){
+    onEnterPress() {
       this.$emit('on-enter-click')
       this.$refs.inputField1.$el.blur()
     },

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

@@ -328,7 +328,7 @@ export default {
     }
   },
   methods: {
-    onEnterPress(event){
+    onEnterPress() {
       this.$emit('on-enter-click')
       this.$refs.inputElement.$el.blur()
     },

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

@@ -46,7 +46,10 @@
           :data-id="dataId"
           :paddingLeft="paddingLeft"
         >
-          <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
+          <draggableInputHandle
+            v-if="isDraggable && !isSearchBarVisible"
+            :height="selectHeight"
+          />
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -63,7 +66,13 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector v-else :selectWidth="selectWidth" :paddingLeft="paddingLeft">
+          <selector
+            v-else
+            :selectWidth="selectWidth"
+            :paddingLeft="paddingLeft"
+            :noMaxWidth="noMaxWidth"
+            :showBorder="showBorder"
+          >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -158,8 +167,17 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
-const Selector = styled('div', { selectWidth: String, paddingLeft: String })`
-  width: ${(props) => `calc(${props.selectWidth} - (${CARET_WIDTH} + ${props.paddingLeft} + (${BORDER_WIDTH} * 2)))`};
+const selectorProps = {
+  selectWidth: String,
+  paddingLeft: String,
+  showBorder: Boolean,
+  noMaxWidth: Boolean
+}
+const Selector = styled('div', selectorProps)`
+  max-width: ${(props) =>
+    props.noMaxWidth
+      ? '100%'
+      : `calc(${props.selectWidth} - (${CARET_WIDTH} + ${props.paddingLeft} + (${BORDER_WIDTH} * 2)))`};
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -214,7 +232,8 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  ${(props) => (props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}` )};
+  ${(props) =>
+    props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -230,7 +249,9 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
-    border: ${BORDER_WIDTH} solid ${hasError ? theme.colors.red : theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${
+      hasError ? theme.colors.red : theme.colors.grey4
+    }
   `}
   background-color:${(props) =>
     props.disabled
@@ -244,8 +265,10 @@ const selectButton = styled('div', selectButtonAttrs)`
       : props.fontColor};
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
   overflow: hidden;
-  & >.handle{
-    border-right:${(props) =>props.hasError ? props.theme.colors.red : props.theme.colors.grey4} 1px solid;
+  & > .handle {
+    border-right: ${(props) =>
+        props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
+      1px solid;
   }
 `
 const selectDropdownAttrs = {
@@ -258,34 +281,34 @@ const selectDropdownAttrs = {
   selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
-    box-sizing: border-box;
-    z-index:${(props) => (props.isActive ? '2' : '1')};
-    position:absolute;
-    top:5px;
-    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
-    border-radius:4px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
-    background-color:${(props) =>
-      props.theme.colors[props.bgColor]
-        ? props.theme.colors[props.bgColor]
-        : props.bgColor};
-    color:${(props) =>
-      props.theme.colors[props.fontColor]
-        ? props.theme.colors[props.fontColor]
-        : props.fontColor};
-    max-height:300px;
-    overflow-y:auto;
-    &>div[data-value="${(props) => props.hoveredValue}"]{
-        background-color:${(props) =>
-          props.theme.colors[props.hoveredBgColor]
-            ? props.theme.colors[props.hoveredBgColor]
-            : props.hoveredBgColor};
-    }
+  box-sizing: border-box;
+  z-index: ${(props) => (props.isActive ? '2' : '1')};
+  position: absolute;
+  top: 5px;
+  border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+  background-color: ${(props) =>
+    props.theme.colors[props.bgColor]
+      ? props.theme.colors[props.bgColor]
+      : props.bgColor};
+  color: ${(props) =>
+    props.theme.colors[props.fontColor]
+      ? props.theme.colors[props.fontColor]
+      : props.fontColor};
+  max-height: 300px;
+  overflow-y: auto;
+  & > div[data-value='${(props) => props.hoveredValue}'] {
+    background-color: ${(props) =>
+      props.theme.colors[props.hoveredBgColor]
+        ? props.theme.colors[props.hoveredBgColor]
+        : props.hoveredBgColor};
+  }
 `
 const DropdownWrapper = styled('div')`
   position: relative;
@@ -413,6 +436,10 @@ export default {
     isDraggable: {
       type: Boolean,
       default: false
+    },
+    noMaxWidth: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -508,7 +535,7 @@ export default {
           if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
             el.style.display = 'none'
           } else {
-            el.style.display = 'inherit'
+            el.style.display = 'grid'
           }
         })
     },

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

@@ -49,7 +49,7 @@
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
-// .   fontSize="13px"
+//     fontSize="13px"
 // />
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'

package/src/components/markerItem/index.vue

@@ -0,0 +1,96 @@
+<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'
+import Modal from '../modals/modal'
+import PageTitle from '../pageTitle'
+import DeleteIcon from '../deleteIcon'
+import PageSubtitle from '../pageSubtitle'
+import MainButton from '../buttons/mainButton'
+
+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)};
+`
+
+// const IconContainer = styled.div`
+//   padding: 8px;
+//   line-height: 0;
+// `
+
+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/pagination/index.vue

@@ -81,8 +81,6 @@ const paginationWrapper = styled.nav`
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
-  margin-bottom: 2px;
-  margin-top: 10px;
 `
 const paginationLink = styled.div`
   display: flex;
@@ -94,8 +92,8 @@ const paginationLink = styled.div`
   cursor: pointer;
 
   &.active {
-    color: #fff;
-    background-color: ${(props) => props.theme.brightBlue};
+    color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) => props.theme.colors.brightBlue};
     padding: 7px 12px;
     border-radius: 4px;
   }

package/src/components/projectMarker/index.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script>
-// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
+// import ProjectMarker from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
 // To use:
 // <project-marker
 //   :activeLanguage="'en-us'"

package/src/components/selectedOptions/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container v-if="optionsList.length">
+        <list-item
+          v-for="item in optionsList"
+          :key="item.type"
+          :hoverColor="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </list-item>
+      </list-container>
+      <empty-text v-if="!optionsList.length">
+        {{ $gettext('no_batch_actions_available') }}
+      </empty-text>
+      <icon-container @click="$emit('on-close')">
+        <icon
+          name="close_for_modals,_tool_tips"
+          color="white"
+          size="14px"
+          cursor="pointer"
+        />
+      </icon-container>
+    </box-container>
+  </page-container>
+</template>
+
+<script>
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+// optionsList = [
+//   {
+//     type: 'export',
+//     name: 'Export'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// />
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+const SelectedContainer = styled.div`
+  display: grid;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+`
+
+const BoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.black};
+  opacity: 90%;
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 8px 10px 8px 20px;
+  font-size: 14px;
+  height: 40px;
+`
+
+const ListContainer = styled.div`
+  padding: 0 20px;
+  display: flex;
+  gap: 20px;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const ListAttrs = {
+  hoverColor: String
+}
+const ListItem = styled('div', ListAttrs)`
+  cursor: pointer;
+  &:hover {
+    color: ${(props) =>
+      props.hoverColor
+        ? props.theme.colors[props.hoverColor]
+        : props.theme.colors.green};
+  }
+`
+
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+`
+
+const EmptyText = styled.div`
+  color: ${(props) => props.theme.colors.white};
+  font-size: 13px;
+  padding-left: 16px;
+`
+
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer,
+    EmptyText
+  },
+  props: {
+    optionsList: {
+      required: true
+    },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>