@eturnity/eturnity_reusable_components 7.24.3-EPDM-11250.0 → 7.24.3-EPDM-11320.0

package/src/components/pageTitle/index.vue

@@ -1,10 +1,18 @@
 <template>
-  <title-wrap :hasInfoText="!!infoText">
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
+  <TitleWrap :has-info-text="!!infoText">
+    <TitleText
+      :color="color"
+      :font-size="fontSize"
+      :uppercase="uppercase"
+    >
       {{ text }}
-    </title-text>
-    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
-  </title-wrap>
+    </TitleText>
+    <InfoText
+      v-if="!!infoText"
+      :align-arrow="infoAlign"
+      :text="infoText"
+    />
+  </TitleWrap>
 </template>
 
 <script>
@@ -14,55 +22,55 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from 'vue3-styled-components'
-import InfoText from '../infoText'
+  import styled from 'vue3-styled-components'
+  import InfoText from '../infoText'
 
-const wrapAttrs = { hasInfoText: Boolean }
-const TitleWrap = styled('div', wrapAttrs)`
+  const wrapAttrs = { hasInfoText: Boolean }
+  const TitleWrap = styled('div', wrapAttrs)`
   display: grid;
   align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
-    props.hasInfoText ? 'auto auto 1fr' : '1fr'};
+  props.hasInfoText ? 'auto auto 1fr' : '1fr'};
   margin-bottom: 20px;
 `
 
-const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled('span', titleAttrs)`
+  const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
+  const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `
 
-export default {
-  name: 'page-title',
-  components: {
-    TitleText,
-    TitleWrap,
-    InfoText
-  },
-  props: {
-    text: {
-      required: true
+  export default {
+    name: 'PageTitle',
+    components: {
+      TitleText,
+      TitleWrap,
+      InfoText
     },
-    color: {
-      required: false
-    },
-    fontSize: {
-      required: false
-    },
-    uppercase: {
-      required: false,
-      default: true
-    },
-    infoText: {
-      required: false,
-      default: null
-    },
-    infoAlign: {
-      required: false
+    props: {
+      text: {
+        required: true
+      },
+      color: {
+        required: false
+      },
+      fontSize: {
+        required: false
+      },
+      uppercase: {
+        required: false,
+        default: true
+      },
+      infoText: {
+        required: false,
+        default: null
+      },
+      infoAlign: {
+        required: false
+      }
     }
   }
-}
 </script>

package/src/components/pagination/index.vue

@@ -1,80 +1,82 @@
 <template>
   <!-- Check, if pages more than 1 -->
-  <paginationWrapper v-if="paginationParams.pages > 1">
+  <PaginationWrapper v-if="paginationParams.pages > 1">
     <!-- Back button -->
-    <paginationLink
+    <PaginationLink
       v-if="paginationParams.previous"
       @click="fetchPage(paginationParams.previous)"
     >
-      <arrowIconContainer>
-        <icon
-          name="arrow_left"
+      <ArrowIconContainer>
+        <RCIcon
           :color="getTheme.colors.brightBlue"
+          name="arrow_left"
           size="12px"
         />
-      </arrowIconContainer>
-      <arrowText>{{ $gettext('back') }}</arrowText>
-    </paginationLink>
+      </ArrowIconContainer>
+      <ArrowText>{{ $gettext('back') }}</ArrowText>
+    </PaginationLink>
 
     <!-- First page -->
-    <paginationLink
+    <PaginationLink
       v-if="currentPage > 2 && paginationParams.pages > 3"
       @click="fetchPage(1)"
-      >1</paginationLink
     >
+      1
+    </PaginationLink>
 
     <!-- Back tree dots -->
     <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
 
     <!-- Current block -->
-    <paginationLink
+    <PaginationLink
       v-for="number in paginationNumbers()"
       :key="number"
       :class="[currentPage === number ? 'active' : '']"
       @click="fetchPage(number)"
-      >{{ number }}</paginationLink
     >
+      {{ number }}
+    </PaginationLink>
 
     <!-- Forward tree dots -->
     <span
       v-if="
         paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
       "
-      >...</span
-    >
+    >...</span>
 
     <!-- End page -->
-    <paginationLink
+    <PaginationLink
       v-if="
         paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
       "
       @click="fetchPage(paginationParams.pages)"
-      >{{ paginationParams.pages }}</paginationLink
     >
+      {{ paginationParams.pages }}
+    </PaginationLink>
 
     <!-- Forward button -->
-    <paginationLink
+    <PaginationLink
       v-if="paginationParams.next"
       @click="fetchPage(paginationParams.next)"
     >
-      <arrowText>{{ $gettext('forward') }}</arrowText>
-      <arrowIconContainer>
-        <icon
-          name="arrow_right"
+      <ArrowText>{{ $gettext('forward') }}</ArrowText>
+      <ArrowIconContainer>
+        <RCIcon
           :color="getTheme.colors.brightBlue"
+          name="arrow_right"
           size="12px"
         />
-      </arrowIconContainer>
-    </paginationLink>
-  </paginationWrapper>
+      </ArrowIconContainer>
+    </PaginationLink>
+  </PaginationWrapper>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import icon from '../icon'
-import theme from '@/assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+  import theme from '@/assets/theme.js'
 
-const paginationWrapper = styled.nav`
+  const paginationWrapper = styled.nav`
   color: ${(props) => props.theme.colors.brightBlue};
   font-size: 13px;
   display: flex;
@@ -82,7 +84,7 @@ const paginationWrapper = styled.nav`
   justify-content: flex-end;
   align-items: center;
 `
-const paginationLink = styled.div`
+  const paginationLink = styled.div`
   display: flex;
   padding: 0px 5px;
   margin: 0 2px;
@@ -99,47 +101,47 @@ const paginationLink = styled.div`
     border-radius: 4px;
   }
 `
-const arrowText = styled.div`
+  const arrowText = styled.div`
   color: ${(props) => props.theme.colors.brightBlue};
 `
-const arrowIconContainer = 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)
+  export default {
+    name: 'PaginationComponent',
+    components: {
+      paginationWrapper,
+      paginationLink,
+      RCIcon,
+      arrowText,
+      arrowIconContainer
+    },
+    props: ['fetchPage', 'currentPage', 'paginationParams'],
+    computed: {
+      getTheme() {
+        return theme
+      }
     },
-    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]
+    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/progressBar/index.vue

@@ -1,22 +1,25 @@
 <template>
-  <container>
-    <progress-container
-      :backgroundColor="backgroundColor"
-      :maxWidth="maxWidth"
-      :minWidth="minWidth"
+  <Container>
+    <ProgressContainer
+      :background-color="backgroundColor"
       class="progress-container"
+      :max-width="maxWidth"
+      :min-width="minWidth"
     >
-      <progress-fill
+      <ProgressFill
         class="progress-bar"
-        :fillProgress="fillProgress"
-        :fillColor="fillColor"
+        :fill-color="fillColor"
+        :fill-progress="fillProgress"
       />
-    </progress-container>
-    <label-text class="progress-text" v-if="stepNumber || labelText"
-      >{{ labelText ? labelText : "" }}
-      {{ stepNumber ? stepNumber : "" }}</label-text
+    </ProgressContainer>
+    <LabelText
+      v-if="stepNumber || labelText"
+      class="progress-text"
     >
-  </container>
+      {{ labelText ? labelText : "" }}
+      {{ stepNumber ? stepNumber : "" }}
+    </LabelText>
+  </Container>
 </template>
 
 <script>
@@ -31,9 +34,9 @@
 //   stepNumber="4"
 //   :labelText="translate('step')"
 // />
-import styled from "vue3-styled-components"
+  import styled from "vue3-styled-components"
 
-const Container = styled.div`
+  const Container = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   grid-row-gap: 16px;
@@ -43,12 +46,12 @@ const Container = styled.div`
   }
 `
 
-const containerProps = {
-  backgroundColor: String,
-  maxWidth: String,
-  minWidth: String,
-}
-const ProgressContainer = styled("div", containerProps)`
+  const containerProps = {
+    backgroundColor: String,
+    maxWidth: String,
+    minWidth: String,
+  }
+  const ProgressContainer = styled("div", containerProps)`
   width: 100%;
   min-width: ${(props) => (props.minWidth ? props.minWidth : "auto")};
   max-width: ${(props) => (props.maxWidth ? props.maxWidth : "none")};
@@ -56,21 +59,21 @@ const ProgressContainer = styled("div", containerProps)`
   background-color: ${(props) =>
     props.backgroundColor
       ? props.backgroundColor
-      : props.theme.colors.lightGray};
+  : props.theme.colors.lightGray};
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 4px;
   }
 `
 
-const fillProps = { fillColor: String, fillProgress: String | Number }
-const ProgressFill = styled("div", fillProps)`
+  const fillProps = { fillColor: String, fillProgress: String | Number }
+  const ProgressFill = styled("div", fillProps)`
   height: 100%;
   width: ${(props) => props.fillProgress + "%"};
   background-color: ${(props) =>
-    props.fillColor ? props.fillColor : props.theme.colors.secondary};
+  props.fillColor ? props.fillColor : props.theme.colors.secondary};
 `
 
-const labelText = styled.div`
+  const LabelText = styled.div`
   color: ${(props) => props.theme.colors.darkGray};
   font-size: 16px;
 
@@ -79,47 +82,47 @@ const labelText = styled.div`
   }
 `
 
-export default {
-  name: "progress-bar",
-  components: {
-    Container,
-    ProgressContainer,
-    ProgressFill,
-    labelText,
-  },
-  props: {
-    fillColor: {
-      required: false,
-      type: String,
-      default: null,
-    },
-    backgroundColor: {
-      required: false,
-      type: String,
-      default: null,
-    },
-    minWidth: {
-      required: false,
-      type: String,
-      default: null,
-    },
-    maxWidth: {
-      required: false,
-      type: String,
-      default: null,
+  export default {
+    name: "ProgressBar",
+    components: {
+      Container,
+      ProgressContainer,
+      ProgressFill,
+      LabelText,
     },
-    fillProgress: {
-      required: false,
-      default: 0,
+    props: {
+      fillColor: {
+        required: false,
+        type: String,
+        default: null,
+      },
+      backgroundColor: {
+        required: false,
+        type: String,
+        default: null,
+      },
+      minWidth: {
+        required: false,
+        type: String,
+        default: null,
+      },
+      maxWidth: {
+        required: false,
+        type: String,
+        default: null,
+      },
+      fillProgress: {
+        required: false,
+        default: 0,
+      },
+      labelText: {
+        required: false,
+        default: null,
+      },
+      stepNumber: {
+        required: false,
+        default: null,
+      },
     },
-    labelText: {
-      required: false,
-      default: null,
-    },
-    stepNumber: {
-      required: false,
-      default: null,
-    },
-  },
-}
+  }
 </script>