@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.0

package/src/components/pagination/index.vue

@@ -1,148 +1,148 @@
-<template>
-  <!-- Check, if pages more than 1 -->
-  <PaginationWrapper v-if="paginationParams.pages > 1">
-    <!-- Back button -->
-    <PaginationLink
-      v-if="paginationParams.previous"
-      @click="fetchPage(paginationParams.previous)"
-    >
-      <ArrowIconContainer>
-        <RCIcon
-          :color="getTheme.colors.brightBlue"
-          name="arrow_left"
-          size="12px"
-        />
-      </ArrowIconContainer>
-      <ArrowText>{{ $gettext('back') }}</ArrowText>
-    </PaginationLink>
-
-    <!-- First page -->
-    <PaginationLink
-      v-if="currentPage > 2 && paginationParams.pages > 3"
-      @click="fetchPage(1)"
-    >
-      1
-    </PaginationLink>
-
-    <!-- Back tree dots -->
-    <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
-
-    <!-- Current block -->
-    <PaginationLink
-      v-for="number in paginationNumbers()"
-      :key="number"
-      :class="[currentPage === number ? 'active' : '']"
-      @click="fetchPage(number)"
-    >
-      {{ number }}
-    </PaginationLink>
-
-    <!-- Forward tree dots -->
-    <span
-      v-if="
-        paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
-      "
-      >...</span
-    >
-
-    <!-- End page -->
-    <PaginationLink
-      v-if="
-        paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
-      "
-      @click="fetchPage(paginationParams.pages)"
-    >
-      {{ paginationParams.pages }}
-    </PaginationLink>
-
-    <!-- Forward button -->
-    <PaginationLink
-      v-if="paginationParams.next"
-      @click="fetchPage(paginationParams.next)"
-    >
-      <ArrowText>{{ $gettext('forward') }}</ArrowText>
-      <ArrowIconContainer>
-        <RCIcon
-          :color="getTheme.colors.brightBlue"
-          name="arrow_right"
-          size="12px"
-        />
-      </ArrowIconContainer>
-    </PaginationLink>
-  </PaginationWrapper>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
-  import theme from '@/assets/theme.js'
-
-  const PaginationWrapper = styled.nav`
-    color: ${(props) => props.theme.colors.brightBlue};
-    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 ArrowText = styled.div`
-    color: ${(props) => props.theme.colors.brightBlue};
-  `
-  const ArrowIconContainer = styled.div`
-    margin: 0 10px;
-    display: flex;
-    align-items: center;
-  `
-  export default {
-    name: 'PaginationComponent',
-    components: {
-      PaginationWrapper,
-      PaginationLink,
-      RCIcon,
-      ArrowText,
-      ArrowIconContainer,
-    },
-    props: ['fetchPage', 'currentPage', 'paginationParams'],
-    computed: {
-      getTheme() {
-        return theme
-      },
-    },
-    methods: {
-      getNewProjects(num) {
-        this.$emit('on-pagination-change', num)
-      },
-      paginationNumbers() {
-        const prev = this.paginationParams.previous
-        const next = this.paginationParams.next
-        const n = prev + 1 || next - 1
-        if (this.paginationParams.pages === 2) {
-          return prev ? [n - 1, n] : [n, n + 1]
-        } else {
-          return prev
-            ? next
-              ? [n - 1, n, n + 1]
-              : [n - 2, n - 1, n]
-            : [n, n + 1, n + 2]
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <!-- Check, if pages more than 1 -->
+  <PaginationWrapper v-if="paginationParams.pages > 1">
+    <!-- Back button -->
+    <PaginationLink
+      v-if="paginationParams.previous"
+      @click="fetchPage(paginationParams.previous)"
+    >
+      <ArrowIconContainer>
+        <RCIcon
+          :color="getTheme.colors.brightBlue"
+          name="arrow_left"
+          size="12px"
+        />
+      </ArrowIconContainer>
+      <ArrowText>{{ $gettext('back') }}</ArrowText>
+    </PaginationLink>
+
+    <!-- First page -->
+    <PaginationLink
+      v-if="currentPage > 2 && paginationParams.pages > 3"
+      @click="fetchPage(1)"
+    >
+      1
+    </PaginationLink>
+
+    <!-- Back tree dots -->
+    <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
+
+    <!-- Current block -->
+    <PaginationLink
+      v-for="number in paginationNumbers()"
+      :key="number"
+      :class="[currentPage === number ? 'active' : '']"
+      @click="fetchPage(number)"
+    >
+      {{ number }}
+    </PaginationLink>
+
+    <!-- Forward tree dots -->
+    <span
+      v-if="
+        paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
+      "
+      >...</span
+    >
+
+    <!-- End page -->
+    <PaginationLink
+      v-if="
+        paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
+      "
+      @click="fetchPage(paginationParams.pages)"
+    >
+      {{ paginationParams.pages }}
+    </PaginationLink>
+
+    <!-- Forward button -->
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.next)"
+    >
+      <ArrowText>{{ $gettext('forward') }}</ArrowText>
+      <ArrowIconContainer>
+        <RCIcon
+          :color="getTheme.colors.brightBlue"
+          name="arrow_right"
+          size="12px"
+        />
+      </ArrowIconContainer>
+    </PaginationLink>
+  </PaginationWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+  import theme from '@/assets/theme.js'
+
+  const PaginationWrapper = styled.nav`
+    color: ${(props) => props.theme.colors.brightBlue};
+    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 ArrowText = styled.div`
+    color: ${(props) => props.theme.colors.brightBlue};
+  `
+  const ArrowIconContainer = styled.div`
+    margin: 0 10px;
+    display: flex;
+    align-items: center;
+  `
+  export default {
+    name: 'PaginationComponent',
+    components: {
+      PaginationWrapper,
+      PaginationLink,
+      RCIcon,
+      ArrowText,
+      ArrowIconContainer,
+    },
+    props: ['fetchPage', 'currentPage', 'paginationParams'],
+    computed: {
+      getTheme() {
+        return theme
+      },
+    },
+    methods: {
+      getNewProjects(num) {
+        this.$emit('on-pagination-change', num)
+      },
+      paginationNumbers() {
+        const prev = this.paginationParams.previous
+        const next = this.paginationParams.next
+        const n = prev + 1 || next - 1
+        if (this.paginationParams.pages === 2) {
+          return prev ? [n - 1, n] : [n, n + 1]
+        } else {
+          return prev
+            ? next
+              ? [n - 1, n, n + 1]
+              : [n - 2, n - 1, n]
+            : [n, n + 1, n + 2]
+        }
+      },
+    },
+  }
+</script>

package/src/components/paginationV2/index.vue

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