@eturnity/eturnity_reusable_components 7.20.0--EPDM-5518.5 → 7.20.0--EPDM-9013.1

package/package.json

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

package/src/assets/svgIcons/bexio.svg

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,3 @@
+<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>

package/src/components/filter/filterSettings.vue

@@ -268,12 +268,6 @@
         :text="buttonText.cancel"
         @click="$emit('on-cancel-view')"
       />
-      <reset-container v-if="!filterViews || !filterViews.length">
-        <reset-button @click="$emit('on-reset-filters')">
-          <icon :name="'update'" size="14px" :color="theme.colors.blue" />
-          <div>{{ $gettext('reset_filters') }}</div>
-        </reset-button>
-      </reset-container>
     </button-container>
   </container-wrapper>
 </template>
@@ -335,16 +329,6 @@ const ButtonContainer = styled.div`
   padding: 15px;
 `
 
-const ResetContainer = styled.div`
-  display: grid;
-  align-content: center;
-  margin-left: auto;
-  div {
-    margin-top: 0;
-    align-self: center;
-  }
-`
-
 const ColumnContainer = styled.div``
 
 const DragContainer = styled.div`
@@ -471,7 +455,6 @@ export default {
     DeleteIcon,
     UpperContainer,
     ResetButton,
-    ResetContainer,
     VueDatePicker
   },
   props: {

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

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

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

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

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

@@ -8,11 +8,7 @@
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
     >
-      <label-wrapper
-        v-if="label"
-        :data-id="labelDataId"
-        :shownDropdown="shownDropdown"
-      >
+      <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -51,7 +47,6 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
-          :shownDropdown="shownDropdown"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -75,10 +70,9 @@
           />
           <selector
             v-else
+            :showBorder="showBorder"
             :selectWidth="selectWidth"
             :paddingLeft="paddingLeft"
-            :noMaxWidth="noMaxWidth"
-            :showBorder="showBorder"
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
@@ -186,17 +180,22 @@ const Caret = styled.div`
 const selectorProps = {
   selectWidth: String,
   paddingLeft: String,
-  showBorder: Boolean,
-  noMaxWidth: Boolean
+  showBorder: 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;
+  ${(props) =>
+    props.selectWidth === '100%'
+      ? 'width: 100%;'
+      : `width: calc(${props.selectWidth} -
+      (
+        ${CARET_WIDTH} +
+        ${props.paddingLeft}
+        ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ''}
+      )
+    );
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;`}
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -220,12 +219,10 @@ const Container = styled('div', inputProps)`
   position: relative;
   display: inline-block;
 `
-
-const LabelAttrs = { shownDropdown: Boolean }
-const LabelWrapper = styled('div', LabelAttrs)`
+const LabelWrapper = styled.div`
   display: inline-grid;
   grid-template-columns: auto auto;
-  grid-gap: ${(props) => (props.shownDropdown ? '0' : '12px')};
+  grid-gap: 12px;
   align-items: center;
   justify-content: start;
 `
@@ -248,8 +245,7 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   hasNoPadding: Boolean,
   showBorder: Boolean,
-  paddingLeft: String,
-  shownDropdown: Boolean
+  paddingLeft: String
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
@@ -257,9 +253,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   border-radius: 4px;
   max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
   ${(props) =>
-    props.isSearchBarVisible || props.hasNoPadding
-      ? ''
-      : `padding-left: ${props.shownDropdown ? '0' : props.paddingLeft}`};
+    props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -482,14 +476,6 @@ export default {
       type: Boolean,
       default: false
     },
-    noMaxWidth: {
-      type: Boolean,
-      default: false
-    },
-    shownDropdown: {
-      type: Boolean,
-      default: false
-    },
     minOptionLength: {
       type: Number,
       default: MIN_OPTION_LENGTH
@@ -605,22 +591,15 @@ export default {
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
-      const children =
-        this.$refs.dropdown.$children &&
-        this.$refs.dropdown.$children[0] &&
-        this.$refs.dropdown.$children.length === 1 &&
-        this.$refs.dropdown.$children[0].$children.length
-          ? this.$refs.dropdown.$children[0].$children
-          : this.$refs.dropdown.$children
-      children
-        .map((component) => component.$el)
-        .forEach((el) => {
-          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-            el.style.display = 'none'
-          } else {
-            el.style.display = 'grid'
-          }
-        })
+      const dropdownChildren = [...this.$refs.dropdown.$el.children]
+      dropdownChildren.forEach((el) => {
+        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+          el.style.display = 'none'
+
+          return
+        }
+        el.style.display = 'inherit'
+      })
     },
     clickOutside(event) {
       const dropdownRef = this.$refs.dropdown

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 'vue3-styled-components'
 import InfoText from '../../infoText'

package/src/components/pagination/index.vue

@@ -81,6 +81,8 @@ 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;
@@ -90,18 +92,15 @@ const paginationLink = styled.div`
   border-radius: 3px;
   white-space: nowrap;
   cursor: pointer;
-  color: ${(props) => props.theme.colors.brightBlue};
 
   &.active {
-    color: ${(props) => props.theme.colors.white};
+    color: #fff;
     background-color: ${(props) => props.theme.colors.brightBlue};
     padding: 7px 12px;
     border-radius: 4px;
   }
 `
-const arrowText = styled.div`
-  color: ${(props) => props.theme.colors.brightBlue};
-`
+const arrowText = styled.div``
 const arrowIconContainer = styled.div`
   margin: 0 10px;
   display: flex;

package/src/components/projectMarker/index.vue

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

package/src/assets/svgIcons/clock_full.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM5.875 5.05243V2.125H4.125V5.92743L6.19061 7.47663L7.24061 6.07663L5.875 5.05243Z" fill="white"/>
-</svg>

package/src/components/markerItem/index.vue

@@ -1,96 +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'
-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/selectedOptions/index.vue

@@ -1,145 +0,0 @@
-<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 'vue3-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>