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

package/src/components/rangeSlider/utils/dom.js

@@ -1,6 +1,6 @@
 import { isFunction } from './fns'
 
-export function matchesSelectorToParentElements (el, selector, baseNode) {
+export function matchesSelectorToParentElements(el, selector, baseNode) {
   let node = el
 
   const matchesSelectorFunc = [
@@ -22,7 +22,7 @@ export function matchesSelectorToParentElements (el, selector, baseNode) {
   return false
 }
 
-export function addEvent (el, event, handler) {
+export function addEvent(el, event, handler) {
   if (!el) {
     return
   }
@@ -35,7 +35,7 @@ export function addEvent (el, event, handler) {
   }
 }
 
-export function removeEvent (el, event, handler) {
+export function removeEvent(el, event, handler) {
   if (!el) {
     return
   }

package/src/components/selectedOptions/index.vue

@@ -1,32 +1,32 @@
 <template>
-  <page-container>
-    <box-container>
-      <selected-container
-        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
-      >
-      <list-container v-if="optionsList.length">
-        <list-item
+  <PageContainer>
+    <BoxContainer>
+      <SelectedContainer>
+        {{ numberSelected }} {{ $gettext('selected') }}
+      </SelectedContainer>
+      <ListContainer v-if="optionsList.length">
+        <ListItem
           v-for="item in optionsList"
           :key="item.type"
-          :hoverColor="item.hoverColor"
+          :hover-color="item.hoverColor"
           @click="$emit('on-' + item.type)"
         >
           {{ item.name }}
-        </list-item>
-      </list-container>
-      <empty-text v-if="!optionsList.length">
+        </ListItem>
+      </ListContainer>
+      <EmptyText v-if="!optionsList.length">
         {{ $gettext('no_batch_actions_available') }}
-      </empty-text>
-      <icon-container @click="$emit('on-close')">
-        <icon
-          name="close_for_modals,_tool_tips"
+      </EmptyText>
+      <IconContainer @click="$emit('on-close')">
+        <Icon
           color="white"
-          size="14px"
           cursor="pointer"
+          name="close_for_modals,_tool_tips"
+          size="14px"
         />
-      </icon-container>
-    </box-container>
-  </page-container>
+      </IconContainer>
+    </BoxContainer>
+  </PageContainer>
 </template>
 
 <script>
@@ -49,17 +49,17 @@
 //   @on-close="onCloseFunction()"
 //   @on-export="function()" @on-delete="function()"
 // />
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
+  import styled from 'vue3-styled-components'
+  import Icon from '../icon'
 
-const PageContainer = styled.div`
+  const PageContainer = styled.div`
   position: fixed;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
 `
 
-const SelectedContainer = styled.div`
+  const SelectedContainer = styled.div`
   display: grid;
   align-items: center;
   height: 100%;
@@ -67,7 +67,7 @@ const SelectedContainer = styled.div`
   border-right: 1px solid rgba(255, 255, 255, 0.2);
 `
 
-const BoxContainer = styled.div`
+  const BoxContainer = styled.div`
   display: flex;
   align-items: center;
   background-color: ${(props) => props.theme.colors.black};
@@ -79,27 +79,27 @@ const BoxContainer = styled.div`
   height: 40px;
 `
 
-const ListContainer = styled.div`
+  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)`
+  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};
+  : props.theme.colors.green};
   }
 `
 
-const IconContainer = styled.div`
+  const IconContainer = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
@@ -114,32 +114,32 @@ const IconContainer = styled.div`
   }
 `
 
-const EmptyText = styled.div`
+  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
+  export default {
+    name: 'SelectedOptions',
+    components: {
+      PageContainer,
+      BoxContainer,
+      SelectedContainer,
+      ListContainer,
+      ListItem,
+      Icon,
+      IconContainer,
+      EmptyText
     },
-    numberSelected: {
-      required: true,
-      default: 0
+    props: {
+      optionsList: {
+        required: true
+      },
+      numberSelected: {
+        required: true,
+        default: 0
+      }
     }
   }
-}
 </script>

package/src/components/sideMenu/index.vue

@@ -1,50 +1,58 @@
 <template>
-  <page-container :isLoading="!tabsData.length">
-    <spinner-container v-if="!tabsData.length">
-      <spinner />
-    </spinner-container>
-    <list-container v-else>
+  <PageContainer :is-loading="!tabsData.length">
+    <SpinnerContainer v-if="!tabsData.length">
+      <Spinner />
+    </SpinnerContainer>
+    <ListContainer v-else>
       <template v-for="(item, idx) in tabsData">
-        <list-item
+        <ListItem
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
-          :isActive="activeTab === item.key"
+          :is-active="activeTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <icon-container :isActive="activeTab === item.key">
-            <icon :name="item.icon" color="#fff" cursor="pointer" size="18px" />
-          </icon-container>
-          <list-text>{{ $gettext(item.label) }}</list-text>
-        </list-item>
-        <collapse-wrapper v-else :key="idx + item.key">
-          <collapse-container
+          <IconContainer :is-active="activeTab === item.key">
+            <Icon
+              color="#fff"
+              cursor="pointer"
+              :name="item.icon"
+              size="18px"
+            />
+          </IconContainer>
+          <ListText>{{ $gettext(item.label) }}</ListText>
+        </ListItem>
+        <CollapseWrapper
+          v-else
+          :key="idx + item.key"
+        >
+          <CollapseContainer
             :data-id="`sub_menu_settings_${item.key}`"
             @click="toggleActiveDropdown(item.key)"
           >
-            <icon-container :isActive="activeParentTab === item.key">
-              <icon
-                :name="item.icon"
+            <IconContainer :is-active="activeParentTab === item.key">
+              <Icon
                 color="#fff"
                 cursor="pointer"
+                :name="item.icon"
                 size="18px"
               />
-            </icon-container>
-            <list-text>{{ $gettext(item.label) }}</list-text>
-            <arrow-container>
-              <icon
-                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+            </IconContainer>
+            <ListText>{{ $gettext(item.label) }}</ListText>
+            <ArrowContainer>
+              <Icon
                 color="white"
+                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
                 size="10px"
               />
-            </arrow-container>
-          </collapse-container>
+            </ArrowContainer>
+          </CollapseContainer>
           <template v-if="activeDropdown === item.key">
-            <sub-router
+            <SubRouter
               v-for="subItem in item.children"
               :key="subItem.key"
-              :isActive="activeTab === subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
+              :is-active="activeTab === subItem.key"
               @click="
                 $emit('tab-click', {
                   activeKey: subItem.key,
@@ -53,39 +61,39 @@
               "
             >
               {{ $gettext(subItem.label) }}
-            </sub-router>
+            </SubRouter>
           </template>
-        </collapse-wrapper>
+        </CollapseWrapper>
       </template>
-    </list-container>
-    <bottom-section v-if="hasLogout">
-      <icon-container
-        :isActive="false"
-        :isButton="true"
+    </ListContainer>
+    <BottomSection v-if="hasLogout">
+      <IconContainer
         data-id="button_settings_logout"
+        :is-active="false"
+        :is-button="true"
         @click="$emit('on-logout')"
       >
-        <rotate-icon
-          name="initial_situation"
+        <RotateIcon
           color="#fff"
           cursor="pointer"
+          name="initial_situation"
           size="18px"
         />
-      </icon-container>
-      <app-version>{{ appVersion }}</app-version>
-    </bottom-section>
-  </page-container>
+      </IconContainer>
+      <AppVersion>{{ appVersion }}</AppVersion>
+    </BottomSection>
+  </PageContainer>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
-import Spinner from '../spinner'
+  import styled from 'vue3-styled-components'
+  import Icon from '../icon'
+  import Spinner from '../spinner'
 
-const PageAttrs = { isLoading: Boolean }
-const PageContainer = styled('div', PageAttrs)`
+  const PageAttrs = { isLoading: Boolean }
+  const PageContainer = styled('div', PageAttrs)`
   background-color: ${(props) =>
-    props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+  props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
   padding: 14px 12px;
   min-width: 220px;
   display: flex;
@@ -93,14 +101,14 @@ const PageContainer = styled('div', PageAttrs)`
   justify-content: space-between;
 `
 
-const ListContainer = styled.div`
+  const ListContainer = styled.div`
   display: grid;
   grid-gap: 6px;
 `
 
-const IconAttrs = { isActive: Boolean, isButton: Boolean }
+  const IconAttrs = { isActive: Boolean, isButton: Boolean }
 
-const ListItem = styled('div', IconAttrs)`
+  const ListItem = styled('div', IconAttrs)`
   display: grid;
   align-items: center;
   grid-template-columns: auto 1fr;
@@ -109,27 +117,27 @@ const ListItem = styled('div', IconAttrs)`
   padding: 4px;
   border-radius: 6px;
   background-color: ${(props) =>
-    props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+  props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
 
   :hover {
     background-color: rgba(255, 255, 255, 0.1);
   }
 `
 
-const ListText = styled.div`
+  const ListText = styled.div`
   font-size: 16px;
   font-weight: 700;
   color: ${(props) => props.theme.colors.white};
 `
 
-const IconContainer = styled('div', IconAttrs)`
+  const IconContainer = styled('div', IconAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
   width: 32px;
   height: 32px;
   background-color: ${(props) =>
-    props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
+  props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
   border-radius: 6px;
 
   ${({ isButton = false }) =>
@@ -142,28 +150,28 @@ const IconContainer = styled('div', IconAttrs)`
   `}
 `
 
-const SpinnerContainer = styled.div`
+  const SpinnerContainer = styled.div`
   margin-top: 30px;
 `
 
-const BottomSection = styled.div`
+  const BottomSection = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `
 
-const RotateIcon = styled(Icon)`
+  const RotateIcon = styled(Icon)`
   transform: rotate(-90deg);
 `
 
-const AppVersion = styled.p`
+  const AppVersion = styled.p`
   font-size: 11px;
   line-height: 13px;
   color: ${(props) => props.theme.colors.white};
   margin-right: 6px;
 `
 
-const SubRouter = styled('div', IconAttrs)`
+  const SubRouter = styled('div', IconAttrs)`
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 10px;
@@ -186,7 +194,7 @@ const SubRouter = styled('div', IconAttrs)`
   }
 `
 
-const CollapseContainer = styled.div`
+  const CollapseContainer = styled.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 20px;
@@ -199,7 +207,7 @@ const CollapseContainer = styled.div`
   }
 `
 
-const CollapseWrapper = styled.div`
+  const CollapseWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 10px;
@@ -207,64 +215,64 @@ const CollapseWrapper = styled.div`
   margin-bottom: 2px;
 `
 
-const ArrowContainer = styled.div`
+  const ArrowContainer = styled.div`
   padding-bottom: 5px;
 `
 
-export default {
-  name: 'SideMenu',
-  components: {
-    PageContainer,
-    ListContainer,
-    ListItem,
-    ListText,
-    Icon,
-    IconContainer,
-    Spinner,
-    SpinnerContainer,
-    BottomSection,
-    RotateIcon,
-    AppVersion,
-    CollapseWrapper,
-    CollapseContainer,
-    SubRouter,
-    ArrowContainer
-  },
-  data() {
-    return {
-      activeDropdown: null
-    }
-  },
-  mounted() {
-    this.activeDropdown = this.activeParentTab
-  },
-  props: {
-    tabsData: {
-      required: true
+  export default {
+    name: 'SideMenu',
+    components: {
+      PageContainer,
+      ListContainer,
+      ListItem,
+      ListText,
+      Icon,
+      IconContainer,
+      Spinner,
+      SpinnerContainer,
+      BottomSection,
+      RotateIcon,
+      AppVersion,
+      CollapseWrapper,
+      CollapseContainer,
+      SubRouter,
+      ArrowContainer
     },
-    activeTab: {
-      required: true
+    props: {
+      tabsData: {
+        required: true
+      },
+      activeTab: {
+        required: true
+      },
+      activeParentTab: {
+        required: false
+      },
+      hasLogout: {
+        required: false,
+        default: true
+      },
+      appVersion: {
+        required: false,
+        type: String
+      }
     },
-    activeParentTab: {
-      required: false
+    data() {
+      return {
+        activeDropdown: null
+      }
     },
-    hasLogout: {
-      required: false,
-      default: true
+    mounted() {
+      this.activeDropdown = this.activeParentTab
     },
-    appVersion: {
-      required: false,
-      type: String
-    }
-  },
-  methods: {
-    toggleActiveDropdown(value) {
-      if (this.activeDropdown === value) {
-        this.activeDropdown = null
-      } else {
-        this.activeDropdown = value
+    methods: {
+      toggleActiveDropdown(value) {
+        if (this.activeDropdown === value) {
+          this.activeDropdown = null
+        } else {
+          this.activeDropdown = value
+        }
       }
     }
   }
-}
 </script>

package/src/components/spinner/index.vue

@@ -1,21 +1,24 @@
 <template>
-  <spinner-container v-if="fullWidth">
-    <container>
-      <spinner-wrapper :size="size" />
-    </container>
-  </spinner-container>
-  <container v-else :limitedToModal="limitedToModal">
-    <spinner-wrapper :size="size" />
-  </container>
+  <SpinnerContainer v-if="fullWidth">
+    <Container>
+      <SpinnerWrapper :size="size" />
+    </Container>
+  </SpinnerContainer>
+  <Container
+    v-else
+    :limited-to-modal="limitedToModal"
+  >
+    <SpinnerWrapper :size="size" />
+  </Container>
 </template>
 
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue3-styled-components'
-import SpinnerSvg from '../../assets/icons/black_spinner.svg?component'
+  import styled from 'vue3-styled-components'
+  import SpinnerSvg from '../../assets/icons/black_spinner.svg?component'
 
-const SpinnerContainer = styled.div`
+  const SpinnerContainer = styled.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -27,8 +30,8 @@ const SpinnerContainer = styled.div`
   justify-items: center;
   z-index: 100;
 `
-const containerAttrs = { limitedToModal: Boolean }
-const Container = styled('div', containerAttrs)`
+  const containerAttrs = { limitedToModal: Boolean }
+  const Container = styled('div', containerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
@@ -37,32 +40,32 @@ const Container = styled('div', containerAttrs)`
   width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
 `
 
-const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled(SpinnerSvg, spinnerAttrs)`
+  const spinnerAttrs = { size: String }
+  const SpinnerWrapper = styled(SpinnerSvg, spinnerAttrs)`
   width: ${(props) => (props.size ? props.size : '60px')};
   height: auto;
 `
 
-export default {
-  name: 'spinner',
-  components: {
-    Container,
-    SpinnerWrapper,
-    SpinnerContainer
-  },
-  props: {
-    fullWidth: {
-      required: false,
-      default: false
+  export default {
+    name: 'Spinner',
+    components: {
+      Container,
+      SpinnerWrapper,
+      SpinnerContainer
     },
-    limitedToModal: {
-      required: false,
-      default: false
-    },
-    size: {
-      required: false,
-      default: null
+    props: {
+      fullWidth: {
+        required: false,
+        default: false
+      },
+      limitedToModal: {
+        required: false,
+        default: false
+      },
+      size: {
+        required: false,
+        default: null
+      }
     }
   }
-}
 </script>