@eturnity/eturnity_reusable_components 7.37.3 → 7.37.5

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

@@ -1,49 +1,49 @@
-import { isFunction } from './fns'
-
-export function matchesSelectorToParentElements(el, selector, baseNode) {
-  let node = el
-
-  const matchesSelectorFunc = [
-    'matches',
-    'webkitMatchesSelector',
-    'mozMatchesSelector',
-    'msMatchesSelector',
-    'oMatchesSelector',
-  ].find((func) => isFunction(node[func]))
-
-  if (!isFunction(node[matchesSelectorFunc])) return false
-
-  do {
-    if (node[matchesSelectorFunc](selector)) return true
-    if (node === baseNode) return false
-    node = node.parentNode
-  } while (node)
-
-  return false
-}
-
-export function addEvent(el, event, handler) {
-  if (!el) {
-    return
-  }
-  if (el.attachEvent) {
-    el.attachEvent('on' + event, handler)
-  } else if (el.addEventListener) {
-    el.addEventListener(event, handler, true)
-  } else {
-    el['on' + event] = handler
-  }
-}
-
-export function removeEvent(el, event, handler) {
-  if (!el) {
-    return
-  }
-  if (el.detachEvent) {
-    el.detachEvent('on' + event, handler)
-  } else if (el.removeEventListener) {
-    el.removeEventListener(event, handler, true)
-  } else {
-    el['on' + event] = null
-  }
-}
+import { isFunction } from './fns'
+
+export function matchesSelectorToParentElements(el, selector, baseNode) {
+  let node = el
+
+  const matchesSelectorFunc = [
+    'matches',
+    'webkitMatchesSelector',
+    'mozMatchesSelector',
+    'msMatchesSelector',
+    'oMatchesSelector',
+  ].find((func) => isFunction(node[func]))
+
+  if (!isFunction(node[matchesSelectorFunc])) return false
+
+  do {
+    if (node[matchesSelectorFunc](selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}
+
+export function addEvent(el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler)
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, true)
+  } else {
+    el['on' + event] = handler
+  }
+}
+
+export function removeEvent(el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler)
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, true)
+  } else {
+    el['on' + event] = null
+  }
+}

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

@@ -1,26 +1,26 @@
-export function isFunction(func) {
-  return (
-    typeof func === 'function' ||
-    Object.prototype.toString.call(func) === '[object Function]'
-  )
-}
-
-export function snapToGrid(grid, pendingX) {
-  return Math.round(pendingX / grid) * grid
-}
-
-export function computeWidth(left, right) {
-  return right - left
-}
-
-export function restrictToBounds(value, min, max) {
-  if (min !== null && value < min) {
-    return min
-  }
-
-  if (max !== null && max < value) {
-    return max
-  }
-
-  return value
-}
+export function isFunction(func) {
+  return (
+    typeof func === 'function' ||
+    Object.prototype.toString.call(func) === '[object Function]'
+  )
+}
+
+export function snapToGrid(grid, pendingX) {
+  return Math.round(pendingX / grid) * grid
+}
+
+export function computeWidth(left, right) {
+  return right - left
+}
+
+export function restrictToBounds(value, min, max) {
+  if (min !== null && value < min) {
+    return min
+  }
+
+  if (max !== null && max < value) {
+    return max
+  }
+
+  return value
+}

package/src/components/selectedOptions/index.vue

@@ -1,145 +1,145 @@
-<template>
-  <PageContainer>
-    <BoxContainer>
-      <SelectedContainer>
-        {{ numberSelected }} {{ $gettext('selected') }}
-      </SelectedContainer>
-      <ListContainer v-if="optionsList.length">
-        <ListItem
-          v-for="item in optionsList"
-          :key="item.type"
-          :hover-color="item.hoverColor"
-          @click="$emit('on-' + item.type)"
-        >
-          {{ item.name }}
-        </ListItem>
-      </ListContainer>
-      <EmptyText v-if="!optionsList.length">
-        {{ $gettext('no_batch_actions_available') }}
-      </EmptyText>
-      <IconContainer @click="$emit('on-close')">
-        <Icon
-          color="white"
-          cursor="pointer"
-          name="close_for_modals,_tool_tips"
-          size="14px"
-        />
-      </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'
-
-  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 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 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;
-
-    &: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;
-  `
-
-  export default {
-    name: 'SelectedOptions',
-    components: {
-      PageContainer,
-      BoxContainer,
-      SelectedContainer,
-      ListContainer,
-      ListItem,
-      Icon,
-      IconContainer,
-      EmptyText,
-    },
-    props: {
-      optionsList: {
-        required: true,
-      },
-      numberSelected: {
-        required: true,
-        default: 0,
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer>
+    <BoxContainer>
+      <SelectedContainer>
+        {{ numberSelected }} {{ $gettext('selected') }}
+      </SelectedContainer>
+      <ListContainer v-if="optionsList.length">
+        <ListItem
+          v-for="item in optionsList"
+          :key="item.type"
+          :hover-color="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </ListItem>
+      </ListContainer>
+      <EmptyText v-if="!optionsList.length">
+        {{ $gettext('no_batch_actions_available') }}
+      </EmptyText>
+      <IconContainer @click="$emit('on-close')">
+        <Icon
+          color="white"
+          cursor="pointer"
+          name="close_for_modals,_tool_tips"
+          size="14px"
+        />
+      </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'
+
+  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 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 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;
+
+    &: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;
+  `
+
+  export default {
+    name: 'SelectedOptions',
+    components: {
+      PageContainer,
+      BoxContainer,
+      SelectedContainer,
+      ListContainer,
+      ListItem,
+      Icon,
+      IconContainer,
+      EmptyText,
+    },
+    props: {
+      optionsList: {
+        required: true,
+      },
+      numberSelected: {
+        required: true,
+        default: 0,
+      },
+    },
+  }
+</script>