@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593.0 → 8.7.5-EPIC-8593.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.5-EPIC-8593.0",
+  "version": "8.7.5-EPIC-8593.2",
   "files": [
     "dist",
     "src"

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

@@ -68,7 +68,17 @@
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
           <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
-            <Icon cursor="default" name="warning" size="16px" />
+            <InfoText
+              v-if="infoErrorMessage != ''"
+              :align-arrow="infoTextAlign"
+              :app-theme="appTheme"
+              button-type="error"
+              data-test-id="info_text_message"
+              icon-name="warning"
+              :size="fontSize ? fontSize : '16px'"
+              :text="infoErrorMessage"
+            />
+            <Icon v-else cursor="default" name="warning" size="16px" />
           </IconWrapper>
           <IconWrapper
             v-if="iconName && !hasError && inputType !== 'password'"
@@ -148,10 +158,10 @@
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
+      props.noBorder
         ? 'none'
+        : props.isError
+        ? '1px solid ' + props.theme.colors.red
         : props.borderColor
         ? props.theme.colors[props.borderColor]
           ? '1px solid ' + props.theme.colors[props.borderColor]
@@ -410,6 +420,11 @@
         default: '',
         type: String,
       },
+      infoErrorMessage: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     data() {
       return {

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

@@ -8,7 +8,9 @@
     <InputWrapper
       :align-items="alignItems"
       :has-label="!!label && label.length > 0"
+      :min-width="minWidth"
       :no-relative="noRelative"
+      :text-center="textCenter"
     >
       <LabelWrapper
         v-if="label"
@@ -43,7 +45,9 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark'
+            buttonBgColor
+              ? buttonBgColor
+              : colorMode == 'dark'
               ? 'transparentBlack1'
               : colorMode == 'transparent'
               ? 'transparent'
@@ -72,6 +76,7 @@
           :show-border="showBorder"
           :show-disabled-background="showDisabledBackground"
           :table-padding-left="tablePaddingLeft"
+          :text-center="textCenter"
           @click="toggleDropdown"
           @keydown="onKeyDown"
         >
@@ -110,6 +115,7 @@
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
           <Caret
+            v-if="showCaret"
             class="caret_dropdown"
             :color-mode="colorMode"
             @click.stop="toggleCaretDropdown"
@@ -274,11 +280,13 @@
     selectWidth: String,
     optionWidth: String,
     noRelative: Boolean,
+    textCenter: Boolean,
   }
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
     display: inline-block;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
   const LabelWrapperAttrs = { infoTextMessage: Boolean }
@@ -315,6 +323,7 @@
     showDisabledBackground: Boolean,
     colorMode: String,
     isSearchBarVisible: Boolean,
+    textCenter: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -335,7 +344,7 @@
               ? props.tablePaddingLeft
               : props.paddingLeft
           }`};
-    text-align: left;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
     min-height: ${(props) =>
       props.selectHeight
         ? props.selectHeight
@@ -363,7 +372,7 @@
         ? props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
-        : props.bgColor};
+        : props.bgColor} !important;
     color: ${(props) =>
       props.colorMode === 'transparent'
         ? props.theme.colors.white
@@ -440,6 +449,7 @@
   const inputAttrs = {
     alignItems: String,
     hasLabel: Boolean,
+    minWidth: String,
     noRelative: Boolean,
   }
   const InputWrapper = styled('div', inputAttrs)`
@@ -647,6 +657,16 @@
         type: String,
         required: false,
       },
+      showCaret: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      textCenter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {

package/src/components/paginationV2/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <!-- Check, if pages more than 1 -->
+  <PaginationWrapper v-if="paginationParams.pages > 1">
+    <PaginationLink v-if="paginationParams.previous" @click="fetchPage(1)">
+      <ArrowIconContainer>
+        <RCIcon name="start_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <PaginationLink
+      v-if="paginationParams.previous"
+      @click="fetchPage(paginationParams.previous)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_left" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <!-- Current block -->
+    <SelectWrapper>
+      <RCSelect
+        :button-font-color="getTheme.colors.gray1"
+        :dropdown-font-color="getTheme.colors.gray1"
+        font-size="14px"
+        :has-select-button-padding="false"
+        :is-auto-search="false"
+        :is-searchable="false"
+        :label-font-color="getTheme.colors.gray1"
+        left-padding="0px"
+        min-width="0px"
+        no-border
+        :no-max-width="true"
+        option-width="75px"
+        select-width="100%"
+        :show-border="false"
+        :show-caret="false"
+        text-center
+        :value="currentPage"
+        @input-change="fetchPage($event)"
+      >
+        <template #selector>
+          <SelectText>
+            {{ currentPage }} of {{ paginationParams.pages }}
+          </SelectText>
+        </template>
+        <template #dropdown>
+          <RCOption
+            v-for="number in paginationNumbers()"
+            :key="number"
+            text-center
+            :value="number"
+          >
+            {{ number }}
+          </RCOption>
+        </template>
+      </RCSelect>
+    </SelectWrapper>
+
+    <!-- Forward button -->
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.next)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_right" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.pages)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="end_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+  </PaginationWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+  import RCSelect from '../inputs/select'
+  import RCOption from '../inputs/select/option'
+  import theme from '@/assets/theme.js'
+
+  const PaginationWrapper = styled.nav`
+    gap: 5px;
+    font-size: 13px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  `
+  const PaginationLink = styled.div`
+    display: flex;
+    padding: 0px 5px;
+    margin: 0 2px;
+    text-align: center;
+    border-radius: 3px;
+    white-space: nowrap;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.brightBlue};
+
+    &.active {
+      color: ${(props) => props.theme.colors.white};
+      background-color: ${(props) => props.theme.colors.brightBlue};
+      padding: 7px 12px;
+      border-radius: 4px;
+    }
+  `
+  const ArrowIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+  `
+
+  const SelectText = styled.div`
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.grey1};
+  `
+
+  const SelectWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    width: 75px;
+  `
+
+  export default {
+    name: 'PaginationV2',
+    components: {
+      PaginationWrapper,
+      PaginationLink,
+      RCIcon,
+      RCSelect,
+      RCOption,
+      SelectWrapper,
+      SelectText,
+      ArrowIconContainer,
+    },
+    props: {
+      fetchPage: {
+        type: Function,
+        required: true,
+      },
+      currentPage: {
+        type: Number,
+        required: true,
+      },
+      paginationParams: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedValue: this.currentPage,
+      }
+    },
+    computed: {
+      getTheme() {
+        return theme
+      },
+    },
+    methods: {
+      getNewProjects(num) {
+        this.$emit('on-pagination-change', num)
+      },
+      paginationNumbers() {
+        return Array.from(
+          { length: this.paginationParams.pages },
+          (_, i) => i + 1
+        )
+      },
+    },
+  }
+</script>