@eturnity/eturnity_reusable_components 1.2.19-EPDM-3412.5 → 1.2.19-EPDM-5310.1

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,77 +1,77 @@
-<template>
-  <wrapper :isDisabled="isDisabled" :size="size">
-    <icon-image
-      :size="size"
-      :color="color"
-      :hoveredColor="hoveredColor"
-      v-html="
-        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
-      "
-    ></icon-image>
-  </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'
-
-const wrapperAttrs = { isDisabled: Boolean, size: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-`
-const IconImageProps = { color: String, hoveredColor: String, size: String }
-const IconImage = styled('div', IconImageProps)`
-  svg {
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-  }
-  svg > path {
-    ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
-  }
-  &:hover > svg > path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
-  }
-`
-
-export default {
-  name: 'icon',
-  components: {
-    Wrapper,
-    IconImage
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    name: {
-      required: true
-    },
-    color: {
-      required: false
-    },
-    hoveredColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: '30px'
-    }
-  },
-  data() {
-    return {}
-  }
-}
+<template>
+  <wrapper :isDisabled="isDisabled" :size="size">
+    <icon-image
+      :size="size"
+      :color="color"
+      :hoveredColor="hoveredColor"
+      v-html="
+        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
+      "
+    ></icon-image>
+  </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'
+
+const wrapperAttrs = { isDisabled: Boolean, size: String }
+const Wrapper = styled('div', wrapperAttrs)`
+  display: inline-block;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+`
+const IconImageProps = { color: String, hoveredColor: String, size: String }
+const IconImage = styled('div', IconImageProps)`
+  svg {
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+  }
+  svg > path {
+    ${(props) =>
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+  }
+  &:hover > svg > path {
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  }
+`
+
+export default {
+  name: 'icon',
+  components: {
+    Wrapper,
+    IconImage
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    color: {
+      required: false
+    },
+    hoveredColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '30px'
+    }
+  },
+  data() {
+    return {}
+  }
+}
 </script>

package/src/components/infoText/index.vue

@@ -1,164 +1,151 @@
-<template>
-  <component-wrapper>
-    <icon-wrapper :size="size">
-      <icon-img
-        :isActive="showInfo"
-        :size="size"
-        :borderColor="borderColor"
-        @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-      >
-        <icon :size="size + 'px'" name="info" :color="iconColor" />
-      </icon-img>
-      <text-overlay
-        v-if="showInfo"
-        :borderColor="borderColor"
-        :alignText="alignText"
-        :width="width"
-        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
-        :alignArrow="alignArrow"
-        :iconSize="size"
-      ><slot />
-        {{ text }}
-      </text-overlay>
-    </icon-wrapper>
-  </component-wrapper>
-</template>
-
-<script>
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-//To use:
-// <info-text
-//     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
-//     size="20"
-//     alignText="right" // default is left
-// />
-import theme from '@/assets/theme.js'
-import styled from 'vue-styled-components'
-import icon from '../icon'
-
-const textAttrs = { iconSize:Number, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
-const TextOverlay = styled('div', textAttrs)`
-  position: absolute;
-  top: ${(props) => (parseInt(props.iconSize) + 15)}px;
-  ${(props) => (props.alignArrow === 'left' ? 'left: '+((props.iconSize/2)-18)+'px;' :
-    props.alignArrow === 'center' ? 'left: calc((-'+props.width+' + '+props.iconSize+'px)/2 - 7px);':
-    'right: '+((props.iconSize/2)-17)+'px;')};
-  text-align: ${(props) => props.alignText};
-  background: ${(props) => props.theme.colors.black};
-  padding: 10px;
-  width: ${(props) => props.width };
-  max-width: 400px;
-  font-size: 13px;
-  font-weight: 400;
-  border-radius: 4px;
-  z-index: 99;
-  color: ${(props) => props.theme.colors.white};
-
-  :before {
-    content: '';
-    background-color: ${(props) => props.theme.colors.black};
-    position: absolute;
-    top: 2px;
-    ${(props) => (props.alignArrow === 'left' ? 'left:40px;' : 
-    props.alignArrow=='center' ? 'left: calc(50% + 19px);' : 
-    'right:-13px;')};
-    height: 8px;
-    width: 8px;
-    transform-origin: center center;
-    transform: translate(-2em, -0.5em) rotate(45deg);
-  }
-`
-
-const iconAttrs = { isActive: Boolean, size: Number, borderColor: String }
-
-const IconWrapper = styled('div', iconAttrs)`
-  position: relative;
-  top: 1px;
-  height: ${(props) => props.size}px;
-`
-const IconImg = styled('div', iconAttrs)`
-  cursor: pointer;
-  height: ${(props) => props.size}px;
-`
-
-const ComponentWrapper = styled.div`
-  display: inline-block;
-`
-
-export default {
-  name: 'info-text',
-  components: {
-    IconWrapper,
-    TextOverlay,
-    ComponentWrapper,
-    IconImg,
-    icon
-  },
-  props: {
-    text: {
-      required: false,
-    },
-    borderColor: {
-      required: false,
-      default: null
-    },
-    size: {
-      required: false,
-      default: '14'
-    },
-    alignText: {
-      required: false,
-      default: 'left' // "left" or "right"
-    },
-    alignArrow:{
-      required:false,
-      default:'center'
-    },
-    openTrigger:{
-      required:false,
-      default: 'onClick'
-    },
-    width:{
-      required:false,
-      default:'165px'
-    }
-  },
-  methods: {
-    toggleShowInfo() {
-      this.showInfo = !this.showInfo
-
-      if (this.showInfo) {
-        document.addEventListener('click', this.clickOutside)
-      } else {
-        document.removeEventListener('click', this.clickOutside)
-      }
-    },
-    clickOutside(event) {
-      if (this.$el.contains(event.target)) {
-        return
-      }
-      this.toggleShowInfo()
-    }
-  },
-  data() {
-    return {
-      showInfo: false,
-    }
-  },
-  computed: {
-    iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
-    },
-    halfComputedTextInfoWidth() {
-      return parseInt(this.width)/2;
-    }
-  }
-}
-</script>
+<template>
+  <component-wrapper>
+    <icon-wrapper>
+      <icon-img
+        :isActive="showInfo"
+        :size="size"
+        :borderColor="borderColor"
+        @click.prevent="toggleShowInfo()"
+        @mouseenter="toggleShowInfo()"
+        @mouseleave="toggleShowInfo()"
+      >
+        <svg
+          class="img-icon"
+          :width="size"
+          :height="size"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            class="img-icon"
+            d="M20.4853 3.51469C18.2188 1.24823 15.2053 0 12 0C8.79469 0 5.78123 1.24823 3.51469 3.51469C1.24823 5.78123 0 8.79469 0 12C0 15.2053 1.24823 18.2188 3.51469 20.4853C5.78123 22.7518 8.79469 24 12 24C15.2053 24 18.2188 22.7518 20.4853 20.4853C22.7518 18.2188 24 15.2053 24 12C24 8.79469 22.7518 5.78123 20.4853 3.51469ZM12 3.28125C13.4216 3.28125 14.5781 4.4378 14.5781 5.85938C14.5781 7.28095 13.4216 8.4375 12 8.4375C10.5784 8.4375 9.42188 7.28095 9.42188 5.85938C9.42188 4.4378 10.5784 3.28125 12 3.28125ZM15.2812 19.6875H8.71875V18.2812H10.125V11.9167H8.71875V10.5104H13.875V18.2812H15.2812V19.6875Z"
+            fill="#D5D5D5"
+          />
+        </svg>
+      </icon-img>
+      <text-overlay
+        v-if="showInfo"
+        :borderColor="borderColor"
+        :alignText="alignText"
+      >
+        {{ text }}
+      </text-overlay>
+    </icon-wrapper>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <info-text
+//     text="Veritatis et quasi architecto beatae vitae"
+//     borderColor="#ccc"
+//     size="20"
+//     alignText="right" // default is left
+// />
+
+import styled from "vue-styled-components"
+
+const IconWrapper = styled.div`
+  position: relative;
+`
+
+const textAttrs = { borderColor: String, alignText: String }
+const TextOverlay = styled("div", textAttrs)`
+  position: absolute;
+  top: 26px;
+  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
+  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
+  background: ${(props) => props.theme.colors.black};
+  padding: 10px;
+  width: max-content;
+  max-width: 400px;
+  font-size: 13px;
+  font-weight: 400;
+  border-radius: 4px;
+  z-index: 99;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: "";
+    background-color: ${(props) => props.theme.colors.black};
+    position: absolute;
+    top: 2px;
+    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
+    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
+    height: 8px;
+    width: 8px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
+const IconImg = styled("div", iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size + "px"};
+
+  .img-icon {
+    fill: ${(props) =>
+      props.isActive
+        ? props.borderColor
+          ? props.borderColor
+          : props.theme.colors.secondary
+        : props.theme.colors.mediumGray};
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: inline-block;
+`
+
+export default {
+  name: "info-text",
+  components: {
+    IconWrapper,
+    TextOverlay,
+    ComponentWrapper,
+    IconImg,
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    borderColor: {
+      required: false,
+      default: null,
+    },
+    size: {
+      required: false,
+      default: "20",
+    },
+    alignText: {
+      required: false,
+      default: "left", // "left" or "right"
+    },
+  },
+  methods: {
+    toggleShowInfo() {
+      this.showInfo = !this.showInfo
+
+      if (this.showInfo) {
+        document.addEventListener("click", this.clickOutside)
+      } else {
+        document.removeEventListener("click", this.clickOutside)
+      }
+    },
+    clickOutside(event) {
+      if (this.$el.contains(event.target)) {
+        return
+      }
+      this.toggleShowInfo()
+    },
+  },
+  data() {
+    return {
+      showInfo: false,
+    }
+  },
+}
+</script>