@eturnity/eturnity_reusable_components 7.8.1-EPDM-8441.1 → 7.8.2

package/src/components/pageSubtitle/index.vue

@@ -1,68 +1,68 @@
-<template>
-  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
-    <span>
-      {{ text }}
-    </span>
-    <info-text
-      :text="infoText"
-      v-if="!!infoText"
-      size="14px"
-      borderColor="#ccc"
-      :alignText="alignInfoText"
-    />
-  </subtitle-text>
-</template>
-
-<script>
-// import PageSubtitle from "@eturnity/eturnity_reusable_components/src/components/pageSubtitle"
-// To use:
-// <page-subtitle
-//   text="My Page Subitle"
-//   color="red"
-//   infoText="My info text"
-// />
-import styled from "vue-styled-components"
-import InfoText from "../infoText"
-
-const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
-const SubtitleText = styled("div", textAttrs)`
-  display: grid;
-  align-items: center;
-  grid-gap: 12px;
-  grid-template-columns: ${(props) =>
-    props.hasInfoText ? "auto auto 1fr" : "1fr"};
-  color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
-  font-size: 13px;
-  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
-  line-height: 1.5;
-  position: relative;
-`
-
-export default {
-  name: "page-subtitle",
-  components: {
-    SubtitleText,
-    InfoText,
-  },
-  props: {
-    text: {
-      required: true,
-    },
-    color: {
-      required: false,
-    },
-    infoText: {
-      required: false,
-      default: null,
-    },
-    alignInfoText: {
-      required: false,
-      default: "left",
-    },
-    marginBottom: {
-      required: false,
-      default: "30px",
-    }
-  },
-}
-</script>
+<template>
+  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
+    <span>
+      {{ text }}
+    </span>
+    <info-text
+      :text="infoText"
+      v-if="!!infoText"
+      size="14px"
+      borderColor="#ccc"
+      :alignText="alignInfoText"
+    />
+  </subtitle-text>
+</template>
+
+<script>
+// import PageSubtitle from "@eturnity/eturnity_reusable_components/src/components/pageSubtitle"
+// To use:
+// <page-subtitle
+//   text="My Page Subitle"
+//   color="red"
+//   infoText="My info text"
+// />
+import styled from "vue-styled-components"
+import InfoText from "../infoText"
+
+const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
+const SubtitleText = styled("div", textAttrs)`
+  display: grid;
+  align-items: center;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+  color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
+  font-size: 13px;
+  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
+  line-height: 1.5;
+  position: relative;
+`
+
+export default {
+  name: "page-subtitle",
+  components: {
+    SubtitleText,
+    InfoText,
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    color: {
+      required: false,
+    },
+    infoText: {
+      required: false,
+      default: null,
+    },
+    alignInfoText: {
+      required: false,
+      default: "left",
+    },
+    marginBottom: {
+      required: false,
+      default: "30px",
+    }
+  },
+}
+</script>

package/src/components/pageTitle/index.vue

@@ -1,68 +1,68 @@
-<template>
-  <flex>
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
-    <info-text
-        v-if="infoText"
-        :text="infoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignArrow="infoAlign"
-      />
-  </flex>
-</template>
-
-<script>
-// import PageTitle from "@eturnity/eturnity_reusable_components/src/components/pageTitle"
-// To use:
-// <page-title
-//   text="My Page Title"
-//   color="red"
-// />
-import styled from "vue-styled-components"
-import InfoText from '../infoText'
-const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled("div", textAttrs)`
-  color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-  font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-  text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
-  
-`
-const flex = styled("div", textAttrs)`
-  display: flex;
-  gap:10px;
-  margin-bottom: 20px;
-  align-items: center;
-`
-
-export default {
-  name: "page-title",
-  components: {
-    TitleText,
-    InfoText,
-    flex
-  },
-  props: {
-    text: {
-      required: true,
-    },
-    color: {
-      required: false,
-    },
-    fontSize: {
-      required: false,
-      default: '16px'
-    },
-    uppercase: {
-      required: false,
-      default: true
-    },
-    infoText: {
-      required: false,
-    },
-    infoAlign: {
-      required: false,
-    },
-  },
-}
-</script>
+<template>
+  <flex>
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+    <info-text
+        v-if="infoText"
+        :text="infoText"
+        borderColor="#ccc"
+        size="14px"
+        :alignArrow="infoAlign"
+      />
+  </flex>
+</template>
+
+<script>
+// import PageTitle from "@eturnity/eturnity_reusable_components/src/components/pageTitle"
+// To use:
+// <page-title
+//   text="My Page Title"
+//   color="red"
+// />
+import styled from "vue-styled-components"
+import InfoText from '../infoText'
+const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const TitleText = styled("div", textAttrs)`
+  color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
+  font-weight: bold;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+  
+`
+const flex = styled("div", textAttrs)`
+  display: flex;
+  gap:10px;
+  margin-bottom: 20px;
+  align-items: center;
+`
+
+export default {
+  name: "page-title",
+  components: {
+    TitleText,
+    InfoText,
+    flex
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    color: {
+      required: false,
+    },
+    fontSize: {
+      required: false,
+      default: '16px'
+    },
+    uppercase: {
+      required: false,
+      default: true
+    },
+    infoText: {
+      required: false,
+    },
+    infoAlign: {
+      required: false,
+    },
+  },
+}
+</script>

package/src/components/pagination/index.vue

@@ -1,144 +1,144 @@
-<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>
-        <icon
-          name="arrow_left"
-          :color="getTheme.colors.brightBlue"
-          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>
-        <icon
-          name="arrow_right"
-          :color="getTheme.colors.brightBlue"
-          size="12px"
-        />
-      </arrowIconContainer>
-    </paginationLink>
-  </paginationWrapper>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import icon from '../icon'
-import theme from '@/assets/theme.js'
-
-const paginationWrapper = styled.nav`
-  color: ${(props) => props.theme.brightBlue};
-  font-size: 13px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-items: center;
-  margin-bottom: 2px;
-  margin-top: 10px;
-`
-const paginationLink = styled.div`
-  display: flex;
-  padding: 0px 5px;
-  margin: 0 2px;
-  text-align: center;
-  border-radius: 3px;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &.active {
-    color: #fff;
-    background-color: ${(props) => props.theme.brightBlue};
-    padding: 7px 12px;
-    border-radius: 4px;
-  }
-`
-const arrowText = styled.div``
-const arrowIconContainer = styled.div`
-  margin: 0 10px;
-  display: flex;
-  align-items: center;
-`
-export default {
-  name: 'pagination-component',
-  components: {
-    paginationWrapper,
-    paginationLink,
-    icon,
-    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>
+        <icon
+          name="arrow_left"
+          :color="getTheme.colors.brightBlue"
+          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>
+        <icon
+          name="arrow_right"
+          :color="getTheme.colors.brightBlue"
+          size="12px"
+        />
+      </arrowIconContainer>
+    </paginationLink>
+  </paginationWrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import icon from '../icon'
+import theme from '@/assets/theme.js'
+
+const paginationWrapper = styled.nav`
+  color: ${(props) => props.theme.brightBlue};
+  font-size: 13px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 2px;
+  margin-top: 10px;
+`
+const paginationLink = styled.div`
+  display: flex;
+  padding: 0px 5px;
+  margin: 0 2px;
+  text-align: center;
+  border-radius: 3px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &.active {
+    color: #fff;
+    background-color: ${(props) => props.theme.brightBlue};
+    padding: 7px 12px;
+    border-radius: 4px;
+  }
+`
+const arrowText = styled.div``
+const arrowIconContainer = styled.div`
+  margin: 0 10px;
+  display: flex;
+  align-items: center;
+`
+export default {
+  name: 'pagination-component',
+  components: {
+    paginationWrapper,
+    paginationLink,
+    icon,
+    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>