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

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>
-  <PageContainer>
-    <BoxContainer>
-      <SelectedContainer>
-        {{ numberSelected }} {{ $gettext('selected') }}
-      </SelectedContainer>
-      <ListContainer v-if="optionsList.length">
-        <ListItem
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container v-if="optionsList.length">
+        <list-item
           v-for="item in optionsList"
           :key="item.type"
-          :hover-color="item.hoverColor"
+          :hoverColor="item.hoverColor"
           @click="$emit('on-' + item.type)"
         >
           {{ item.name }}
-        </ListItem>
-      </ListContainer>
-      <EmptyText v-if="!optionsList.length">
+        </list-item>
+      </list-container>
+      <empty-text v-if="!optionsList.length">
         {{ $gettext('no_batch_actions_available') }}
-      </EmptyText>
-      <IconContainer @click="$emit('on-close')">
-        <Icon
-          color="white"
-          cursor="pointer"
+      </empty-text>
+      <icon-container @click="$emit('on-close')">
+        <icon
           name="close_for_modals,_tool_tips"
+          color="white"
           size="14px"
+          cursor="pointer"
         />
-      </IconContainer>
-    </BoxContainer>
-  </PageContainer>
+      </icon-container>
+    </box-container>
+  </page-container>
 </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 @@
   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 @@
   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 EmptyText = styled.div`
+const EmptyText = styled.div`
   color: ${(props) => props.theme.colors.white};
   font-size: 13px;
   padding-left: 16px;
 `
 
-  export default {
-    name: 'SelectedOptions',
-    components: {
-      PageContainer,
-      BoxContainer,
-      SelectedContainer,
-      ListContainer,
-      ListItem,
-      Icon,
-      IconContainer,
-      EmptyText
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer,
+    EmptyText
+  },
+  props: {
+    optionsList: {
+      required: true
     },
-    props: {
-      optionsList: {
-        required: true
-      },
-      numberSelected: {
-        required: true,
-        default: 0
-      }
+    numberSelected: {
+      required: true,
+      default: 0
     }
   }
+}
 </script>

package/src/components/sideMenu/index.vue

@@ -1,58 +1,50 @@
 <template>
-  <PageContainer :is-loading="!tabsData.length">
-    <SpinnerContainer v-if="!tabsData.length">
-      <Spinner />
-    </SpinnerContainer>
-    <ListContainer v-else>
+  <page-container :isLoading="!tabsData.length">
+    <spinner-container v-if="!tabsData.length">
+      <spinner />
+    </spinner-container>
+    <list-container v-else>
       <template v-for="(item, idx) in tabsData">
-        <ListItem
+        <list-item
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
-          :is-active="activeTab === item.key"
+          :isActive="activeTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <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
+          <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
             :data-id="`sub_menu_settings_${item.key}`"
             @click="toggleActiveDropdown(item.key)"
           >
-            <IconContainer :is-active="activeParentTab === item.key">
-              <Icon
+            <icon-container :isActive="activeParentTab === item.key">
+              <icon
+                :name="item.icon"
                 color="#fff"
                 cursor="pointer"
-                :name="item.icon"
                 size="18px"
               />
-            </IconContainer>
-            <ListText>{{ $gettext(item.label) }}</ListText>
-            <ArrowContainer>
-              <Icon
-                color="white"
+            </icon-container>
+            <list-text>{{ $gettext(item.label) }}</list-text>
+            <arrow-container>
+              <icon
                 :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+                color="white"
                 size="10px"
               />
-            </ArrowContainer>
-          </CollapseContainer>
+            </arrow-container>
+          </collapse-container>
           <template v-if="activeDropdown === item.key">
-            <SubRouter
+            <sub-router
               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,
@@ -61,39 +53,39 @@
               "
             >
               {{ $gettext(subItem.label) }}
-            </SubRouter>
+            </sub-router>
           </template>
-        </CollapseWrapper>
+        </collapse-wrapper>
       </template>
-    </ListContainer>
-    <BottomSection v-if="hasLogout">
-      <IconContainer
+    </list-container>
+    <bottom-section v-if="hasLogout">
+      <icon-container
+        :isActive="false"
+        :isButton="true"
         data-id="button_settings_logout"
-        :is-active="false"
-        :is-button="true"
         @click="$emit('on-logout')"
       >
-        <RotateIcon
+        <rotate-icon
+          name="initial_situation"
           color="#fff"
           cursor="pointer"
-          name="initial_situation"
           size="18px"
         />
-      </IconContainer>
-      <AppVersion>{{ appVersion }}</AppVersion>
-    </BottomSection>
-  </PageContainer>
+      </icon-container>
+      <app-version>{{ appVersion }}</app-version>
+    </bottom-section>
+  </page-container>
 </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;
@@ -101,14 +93,14 @@
   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;
@@ -117,27 +109,27 @@
   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 }) =>
@@ -150,28 +142,28 @@
   `}
 `
 
-  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;
@@ -194,7 +186,7 @@
   }
 `
 
-  const CollapseContainer = styled.div`
+const CollapseContainer = styled.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 20px;
@@ -207,7 +199,7 @@
   }
 `
 
-  const CollapseWrapper = styled.div`
+const CollapseWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 10px;
@@ -215,64 +207,64 @@
   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
+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
     },
-    props: {
-      tabsData: {
-        required: true
-      },
-      activeTab: {
-        required: true
-      },
-      activeParentTab: {
-        required: false
-      },
-      hasLogout: {
-        required: false,
-        default: true
-      },
-      appVersion: {
-        required: false,
-        type: String
-      }
+    activeTab: {
+      required: true
     },
-    data() {
-      return {
-        activeDropdown: null
-      }
+    activeParentTab: {
+      required: false
     },
-    mounted() {
-      this.activeDropdown = this.activeParentTab
+    hasLogout: {
+      required: false,
+      default: true
     },
-    methods: {
-      toggleActiveDropdown(value) {
-        if (this.activeDropdown === value) {
-          this.activeDropdown = null
-        } else {
-          this.activeDropdown = value
-        }
+    appVersion: {
+      required: false,
+      type: String
+    }
+  },
+  methods: {
+    toggleActiveDropdown(value) {
+      if (this.activeDropdown === value) {
+        this.activeDropdown = null
+      } else {
+        this.activeDropdown = value
       }
     }
   }
+}
 </script>

package/src/components/spinner/index.vue

@@ -1,24 +1,21 @@
 <template>
-  <SpinnerContainer v-if="fullWidth">
-    <Container>
-      <SpinnerWrapper :size="size" />
-    </Container>
-  </SpinnerContainer>
-  <Container
-    v-else
-    :limited-to-modal="limitedToModal"
-  >
-    <SpinnerWrapper :size="size" />
-  </Container>
+  <spinner-container v-if="fullWidth">
+    <container>
+      <spinner-wrapper :size="size" />
+    </container>
+  </spinner-container>
+  <container v-else :limitedToModal="limitedToModal">
+    <spinner-wrapper :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;
@@ -30,8 +27,8 @@
   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;
@@ -40,32 +37,32 @@
   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
+export default {
+  name: 'spinner',
+  components: {
+    Container,
+    SpinnerWrapper,
+    SpinnerContainer
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: false
     },
-    props: {
-      fullWidth: {
-        required: false,
-        default: false
-      },
-      limitedToModal: {
-        required: false,
-        default: false
-      },
-      size: {
-        required: false,
-        default: null
-      }
+    limitedToModal: {
+      required: false,
+      default: false
+    },
+    size: {
+      required: false,
+      default: null
     }
   }
+}
 </script>