@eturnity/eturnity_reusable_components 7.12.7 → 7.16.0-qa-25.0

package/src/components/icon/iconCollection.vue

@@ -1,68 +1,68 @@
-<template>
-  <wrapper>
-    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
-      <div>
-        <icon
-          :name="iconItem.name"
-          :size="size"
-          :hoveredColor="hoveredColor"
-          :color="color"
-        />
-      </div>
-      <h3>{{ iconItem.name }}</h3>
-    </icon-wrapper>
-  </wrapper>
-</template>
-
-<script>
-import icon from './index.vue'
-import styled from 'vue-styled-components'
-
-const Wrapper = styled.div`
-  display: block;
-  text-align: center;
-  justify-items: center;
-  width: 100%;
-  background-color: #ccc;
-`
-const IconWrapper = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  background-color: white;
-  border-radius: 6px;
-  padding: 10px;
-  width: 220px;
-  text-align: center;
-  margin: 10px;
-`
-export default {
-  name: 'collection',
-  components: { icon, IconWrapper, Wrapper },
-  props: {
-    size: { required: false },
-    color: { required: false },
-    hoveredColor: { required: false }
-  },
-  data() {
-    return {
-      iconList: []
-    }
-  },
-
-  mounted() {
-    this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
-  },
-
-  methods: {
-    importAll(r) {
-      r.keys().forEach((key) =>
-        this.iconList.push({
-          pathLong: r(key),
-          pathShort: key,
-          name: key.replace('.svg', '').replace('./', '')
-        })
-      )
-    }
-  }
-}
-</script>
+<template>
+  <wrapper>
+    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
+      <div>
+        <icon
+          :name="iconItem.name"
+          :size="size"
+          :hoveredColor="hoveredColor"
+          :color="color"
+        />
+      </div>
+      <h3>{{ iconItem.name }}</h3>
+    </icon-wrapper>
+  </wrapper>
+</template>
+
+<script>
+import icon from './index.vue'
+import styled from 'vue-styled-components'
+
+const Wrapper = styled.div`
+  display: block;
+  text-align: center;
+  justify-items: center;
+  width: 100%;
+  background-color: #ccc;
+`
+const IconWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 6px;
+  padding: 10px;
+  width: 220px;
+  text-align: center;
+  margin: 10px;
+`
+export default {
+  name: 'collection',
+  components: { icon, IconWrapper, Wrapper },
+  props: {
+    size: { required: false },
+    color: { required: false },
+    hoveredColor: { required: false }
+  },
+  data() {
+    return {
+      iconList: []
+    }
+  },
+
+  mounted() {
+    this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+  },
+
+  methods: {
+    importAll(r) {
+      r.keys().forEach((key) =>
+        this.iconList.push({
+          pathLong: r(key),
+          pathShort: key,
+          name: key.replace('.svg', '').replace('./', '')
+        })
+      )
+    }
+  }
+}
+</script>

package/src/components/icon/index.vue

@@ -1,116 +1,116 @@
-<template>
-  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
-    <icon-image
-      :disabled="disabled"
-      :size="size"
-      :color="color"
-      :hoveredColor="hoveredColor"
-      v-html="
-        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
-      "
-    ></icon-image>
-    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
-  </Wrapper>
-</template>
-
-<script>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<icon
-//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-//   color="red"
-//   hoveredColor="blue"
-//   size="60px" by default, this is 30px
-//   cursor="default"
-//   isStriked = "true"
-// />
-
-import styled from 'vue-styled-components'
-
-const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: flex;
-  position: relative;
-  align-content: center;
-  justify-content: center;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  min-width: ${(props) => props.size};
-  min-height: ${(props) => props.size};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
-  line-height: 0;
-`
-const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
-const strikedLine = styled('div', strikedAttrs)`
-  display: flex;
-  position: absolute;
-  bottom:0;
-  left:0;
-  align-content: center;
-  justify-content: center;
-  width: 143%;
-  height:8%;
-  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
-  min-height: 0;
-  line-height: 0;
-  transform-origin: 0% 100%;
-  transform: rotate(-45deg);
-`
-const IconImageProps = { color: String, hoveredColor: String, size: String }
-const IconImage = styled('div', IconImageProps)`
-  width: 100%;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-  svg path {
-    ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
-  }
-  &:hover > svg path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
-  }
-  &:hover + div {
-    background-color: ${(props)=>props.hoveredColor};
-  }
-`
-
-export default {
-  name: 'icon',
-  components: {
-    IconImage,
-    Wrapper,
-    strikedLine
-  },
-  props: {
-    disabled: {
-      required: false,
-      default: false
-    },
-    name: {
-      required: true
-    },
-    color: {
-      required: false
-    },
-    hoveredColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: '30px'
-    },
-    cursor: {
-      required: false,
-      default: null
-    },
-    isStriked: {
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  }
-}
-</script>
+<template>
+  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
+      :disabled="disabled"
+      :size="size"
+      :color="color"
+      :hoveredColor="hoveredColor"
+      v-html="
+        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
+      "
+    ></icon-image>
+    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
+  </Wrapper>
+</template>
+
+<script>
+// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+//  How to use:
+//<icon
+//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+//   color="red"
+//   hoveredColor="blue"
+//   size="60px" by default, this is 30px
+//   cursor="default"
+//   isStriked = "true"
+// />
+
+import styled from 'vue-styled-components'
+
+const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
+const Wrapper = styled('div', wrapperAttrs)`
+  display: flex;
+  position: relative;
+  align-content: center;
+  justify-content: center;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  min-width: ${(props) => props.size};
+  min-height: ${(props) => props.size};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
+  line-height: 0;
+`
+const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
+const strikedLine = styled('div', strikedAttrs)`
+  display: flex;
+  position: absolute;
+  bottom:0;
+  left:0;
+  align-content: center;
+  justify-content: center;
+  width: 143%;
+  height:8%;
+  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  min-height: 0;
+  line-height: 0;
+  transform-origin: 0% 100%;
+  transform: rotate(-45deg);
+`
+const IconImageProps = { color: String, hoveredColor: String, size: String }
+const IconImage = styled('div', IconImageProps)`
+  width: 100%;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+  svg path {
+    ${(props) =>
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+  }
+  &:hover > svg path {
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  }
+  &:hover + div {
+    background-color: ${(props)=>props.hoveredColor};
+  }
+`
+
+export default {
+  name: 'icon',
+  components: {
+    IconImage,
+    Wrapper,
+    strikedLine
+  },
+  props: {
+    disabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    color: {
+      required: false
+    },
+    hoveredColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '30px'
+    },
+    cursor: {
+      required: false,
+      default: null
+    },
+    isStriked: {
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/iconWrapper/index.vue

@@ -1,156 +1,156 @@
-<template>
-  <Wrapper
-    :disabled="disabled"
-    :size="size"
-    :backgroundColor="backgroundColor"
-    :borderRadius="borderRadius"
-    :hasBorder="hasBorder"
-    :color="iconColor"
-    :hoveredBackgroundColor="hoveredBackgroundColor"
-    :isHovered="isHovered"
-    :data-id="dataId"
-  >
-    <icon
-      :disabled="disabled"
-      :size="iconSize"
-      :name="name"
-      :color="iconColor"
-      :hoveredColor="hoveredIconColor"
-      :isStriked="isStriked"
-    />
-
-    <caret v-if="hasCaret">
-      <iconWrapper
-        :disabled="disabled"
-        size="10px"
-        name="arrow_down"
-        :iconColor="iconColor"
-        :hoveredBackgroundColor="hoveredIconColor"
-        borderRadius="1px"
-      />
-    </caret>
-  </Wrapper>
-</template>
-
-<script>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<icon
-//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-//   color="red"
-//   hoveredColor="blue"
-//   size="60px" by default, this is 30px
-// />
-
-import styled from 'vue-styled-components'
-import icon from '../icon'
-const wrapperAttrs = {
-  color: String,
-  isHovered: Boolean,
-  borderRadius: String,
-  disabled: Boolean,
-  size: String,
-  backgroundColor: String,
-  hoveredBackgroundColor: String,
-  hasBorder: Boolean
-}
-const Wrapper = styled('div', wrapperAttrs)`
-  position: relative;
-  display: inline-flex;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  border: ${(props) =>
-    props.hasBorder
-      ? 'solid 1px ' + props.theme.colors[props.color] || props.color
-      : ''};
-  justify-content: center;
-  align-items: center;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor] || props.backgroundColor};
-  border-radius: ${(props) => props.borderRadius};
-  ${(props) =>
-    props.isHovered
-      ? 'background-color:' +
-          props.theme.colors[props.hoveredBackgroundColor] ||
-        props.hoveredBackgroundColor
-      : ''};
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors[props.hoveredBackgroundColor] ||
-      props.hoveredBackgroundColor};
-  }
-`
-const caret = styled.div`
-  position: absolute;
-  bottom: 3px;
-  right: 2px;
-  height: 10px;
-`
-
-export default {
-  name: 'iconWrapper',
-  components: {
-    Wrapper,
-    icon,
-    caret
-  },
-  props: {
-    disabled: {
-      required: false,
-      default: false
-    },
-    name: {
-      required: true
-    },
-    iconColor: {
-      required: false,
-      default: 'white'
-    },
-    hoveredIconColor: {
-      required: false
-    },
-    backgroundColor: {
-      required: false
-    },
-    hasBorder: {
-      required: false
-    },
-    hoveredBackgroundColor: {
-      required: false,
-      default: 'transparentWhite2'
-    },
-    size: {
-      required: false,
-      default: '32px'
-    },
-    iconSize: {
-      required: false,
-      default: '18px'
-    },
-    hasCaret: {
-      required: false,
-      default: false
-    },
-    borderRadius: {
-      required: false,
-      default: '6px'
-    },
-    dataId: {
-      type: String,
-      default: ''
-    },
-    isHovered: {
-      required: false,
-      default: false
-    },
-    isStriked: {
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  }
-}
-</script>
+<template>
+  <Wrapper
+    :disabled="disabled"
+    :size="size"
+    :backgroundColor="backgroundColor"
+    :borderRadius="borderRadius"
+    :hasBorder="hasBorder"
+    :color="iconColor"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    :data-id="dataId"
+  >
+    <icon
+      :disabled="disabled"
+      :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+    />
+
+    <caret v-if="hasCaret">
+      <iconWrapper
+        :disabled="disabled"
+        size="10px"
+        name="arrow_down"
+        :iconColor="iconColor"
+        :hoveredBackgroundColor="hoveredIconColor"
+        borderRadius="1px"
+      />
+    </caret>
+  </Wrapper>
+</template>
+
+<script>
+// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+//  How to use:
+//<icon
+//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+//   color="red"
+//   hoveredColor="blue"
+//   size="60px" by default, this is 30px
+// />
+
+import styled from 'vue-styled-components'
+import icon from '../icon'
+const wrapperAttrs = {
+  color: String,
+  isHovered: Boolean,
+  borderRadius: String,
+  disabled: Boolean,
+  size: String,
+  backgroundColor: String,
+  hoveredBackgroundColor: String,
+  hasBorder: Boolean
+}
+const Wrapper = styled('div', wrapperAttrs)`
+  position: relative;
+  display: inline-flex;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  border: ${(props) =>
+    props.hasBorder
+      ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+      : ''};
+  justify-content: center;
+  align-items: center;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor] || props.backgroundColor};
+  border-radius: ${(props) => props.borderRadius};
+  ${(props) =>
+    props.isHovered
+      ? 'background-color:' +
+          props.theme.colors[props.hoveredBackgroundColor] ||
+        props.hoveredBackgroundColor
+      : ''};
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors[props.hoveredBackgroundColor] ||
+      props.hoveredBackgroundColor};
+  }
+`
+const caret = styled.div`
+  position: absolute;
+  bottom: 3px;
+  right: 2px;
+  height: 10px;
+`
+
+export default {
+  name: 'iconWrapper',
+  components: {
+    Wrapper,
+    icon,
+    caret
+  },
+  props: {
+    disabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    iconColor: {
+      required: false,
+      default: 'white'
+    },
+    hoveredIconColor: {
+      required: false
+    },
+    backgroundColor: {
+      required: false
+    },
+    hasBorder: {
+      required: false
+    },
+    hoveredBackgroundColor: {
+      required: false,
+      default: 'transparentWhite2'
+    },
+    size: {
+      required: false,
+      default: '32px'
+    },
+    iconSize: {
+      required: false,
+      default: '18px'
+    },
+    hasCaret: {
+      required: false,
+      default: false
+    },
+    borderRadius: {
+      required: false,
+      default: '6px'
+    },
+    dataId: {
+      type: String,
+      default: ''
+    },
+    isHovered: {
+      required: false,
+      default: false
+    },
+    isStriked: {
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>