@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.3 → 7.24.3-qa-elisee-7.32.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 = [
@@ -8,8 +8,8 @@ export function matchesSelectorToParentElements(el, selector, baseNode) {
     'webkitMatchesSelector',
     'mozMatchesSelector',
     'msMatchesSelector',
-    'oMatchesSelector',
-  ].find((func) => isFunction(node[func]))
+    'oMatchesSelector'
+  ].find(func => isFunction(node[func]))
 
   if (!isFunction(node[matchesSelectorFunc])) return false
 
@@ -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,145 +1,145 @@
 <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>
-  // import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
-  // optionsList = [
-  //   {
-  //     type: 'export',
-  //     name: 'Export'
-  //   },
-  //   {
-  //     type: 'delete',
-  //     name: 'Delete',
-  //     hoverColor: 'red' // default is green
-  //   }
-  // ]
-  // @on-${type}="function" should $emit the callback for the 'type' in the optionsList
-  // <selected-options
-  //   :numberSelected="numberSelected"
-  //   :optionsList="optionsList"
-  //   @on-close="onCloseFunction()"
-  //   @on-export="function()" @on-delete="function()"
-  // />
-  import styled from 'vue3-styled-components'
-  import Icon from '../icon'
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+// optionsList = [
+//   {
+//     type: 'export',
+//     name: 'Export'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// />
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
 
-  const PageContainer = styled.div`
-    position: fixed;
-    bottom: 30px;
-    left: 50%;
-    transform: translateX(-50%);
-  `
+const PageContainer = styled.div`
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+`
 
-  const SelectedContainer = styled.div`
-    display: grid;
-    align-items: center;
-    height: 100%;
-    padding-right: 20px;
-    border-right: 1px solid rgba(255, 255, 255, 0.2);
-  `
+const SelectedContainer = styled.div`
+  display: grid;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+`
 
-  const BoxContainer = styled.div`
-    display: flex;
-    align-items: center;
-    background-color: ${(props) => props.theme.colors.black};
-    opacity: 90%;
-    color: ${(props) => props.theme.colors.white};
-    border-radius: 4px;
-    padding: 8px 10px 8px 20px;
-    font-size: 14px;
-    height: 40px;
-  `
+const BoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.black};
+  opacity: 90%;
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 8px 10px 8px 20px;
+  font-size: 14px;
+  height: 40px;
+`
 
-  const ListContainer = styled.div`
-    padding: 0 20px;
-    display: flex;
-    gap: 20px;
-    color: ${(props) => props.theme.colors.white};
-  `
+const ListContainer = styled.div`
+  padding: 0 20px;
+  display: flex;
+  gap: 20px;
+  color: ${(props) => props.theme.colors.white};
+`
 
-  const ListAttrs = {
-    hoverColor: String,
+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};
   }
-  const ListItem = styled('div', ListAttrs)`
-    cursor: pointer;
-    &:hover {
-      color: ${(props) =>
-        props.hoverColor
-          ? props.theme.colors[props.hoverColor]
-          : props.theme.colors.green};
-    }
-  `
+`
 
-  const IconContainer = styled.div`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    height: 30px;
-    width: 30px;
-    cursor: pointer;
-    margin-left: 20px;
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
 
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 4px;
-    }
-  `
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+`
 
-  const EmptyText = styled.div`
-    color: ${(props) => props.theme.colors.white};
-    font-size: 13px;
-    padding-left: 16px;
-  `
+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,
-    },
-    props: {
-      optionsList: {
-        required: true,
-      },
-      numberSelected: {
-        required: true,
-        default: 0,
-      },
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer,
+    EmptyText
+  },
+  props: {
+    optionsList: {
+      required: true
     },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
   }
+}
 </script>