@eturnity/eturnity_reusable_components 7.45.5-EPDM-11314.2 → 7.45.5-EPDM-10609.1

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/roundTabs/index.vue

@@ -1,107 +1,107 @@
-<template>
-  <ContainerComponent>
-    <RoundedTabLeft
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-    />
-    <TabComponent
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-      :height="height"
-      :width="width"
-    >
-      <slot></slot>
-    </TabComponent>
-    <RoundedTabRight
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-    />
-  </ContainerComponent>
-</template>
-<script>
-  import styled from 'vue3-styled-components'
-
-  const ContainerComponent = styled.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `
-  const RoundedTabLeft = styled('div', {
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-    position:absolute;
-    bottom:0;
-    left:-${(prop) => prop.borderRadius}
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.borderRadius};
-    height: ${(prop) => prop.borderRadius};
-    -webkit-mask-image: radial-gradient(
-      circle at top left,
-      transparent 71%,
-      black 71%
-    );
-  `
-  const RoundedTabRight = styled('div', {
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-  position:absolute;
-  bottom:0;
-    right:-${(prop) => prop.borderRadius}
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.borderRadius};
-    height: ${(prop) => prop.borderRadius};
-    -webkit-mask-image: radial-gradient(
-      circle at top right,
-      transparent 71%,
-      black 71%
-    );`
-  const TabComponent = styled('div', {
-    width: String,
-    height: String,
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.width};
-    height: ${(prop) => prop.height};
-    border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
-      0 0;
-  `
-  export default {
-    name: 'RoundTabs',
-    components: {
-      ContainerComponent,
-      TabComponent,
-      RoundedTabLeft,
-      RoundedTabRight,
-    },
-    props: {
-      height: {
-        required: false,
-        default: '40px',
-        type: String,
-      },
-      width: {
-        required: false,
-        default: '200px',
-        type: String,
-      },
-      backgroundColor: {
-        required: false,
-        default: 'white',
-        type: String,
-      },
-      borderRadius: {
-        required: false,
-        default: '20px',
-        type: String,
-      },
-    },
-  }
-</script>
+<template>
+  <ContainerComponent>
+    <RoundedTabLeft
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+    <TabComponent
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+      :height="height"
+      :width="width"
+    >
+      <slot></slot>
+    </TabComponent>
+    <RoundedTabRight
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+  </ContainerComponent>
+</template>
+<script>
+  import styled from 'vue3-styled-components'
+
+  const ContainerComponent = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `
+  const RoundedTabLeft = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    position:absolute;
+    bottom:0;
+    left:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top left,
+      transparent 71%,
+      black 71%
+    );
+  `
+  const RoundedTabRight = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+  position:absolute;
+  bottom:0;
+    right:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top right,
+      transparent 71%,
+      black 71%
+    );`
+  const TabComponent = styled('div', {
+    width: String,
+    height: String,
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.width};
+    height: ${(prop) => prop.height};
+    border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
+      0 0;
+  `
+  export default {
+    name: 'RoundTabs',
+    components: {
+      ContainerComponent,
+      TabComponent,
+      RoundedTabLeft,
+      RoundedTabRight,
+    },
+    props: {
+      height: {
+        required: false,
+        default: '40px',
+        type: String,
+      },
+      width: {
+        required: false,
+        default: '200px',
+        type: String,
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white',
+        type: String,
+      },
+      borderRadius: {
+        required: false,
+        default: '20px',
+        type: String,
+      },
+    },
+  }
+</script>