@eturnity/eturnity_reusable_components 7.30.3 → 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>
-  <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>
-// 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 ListItem = styled('div', ListAttrs)`
-  cursor: pointer;
-  &:hover {
-    color: ${(props) =>
-      props.hoverColor
-        ? props.theme.colors[props.hoverColor]
-        : props.theme.colors.green};
+  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 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: '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,
+    },
+    props: {
+      optionsList: {
+        required: true,
+      },
+      numberSelected: {
+        required: true,
+        default: 0,
+      },
     },
-    numberSelected: {
-      required: true,
-      default: 0
-    }
   }
-}
 </script>