@eturnity/eturnity_reusable_components 1.2.19-dev03.2 → 1.2.19-v.5.42.0

package/src/components/infoText/index.vue

@@ -1,166 +1,166 @@
-<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" 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:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
-const TextOverlay = styled('div', textAttrs)`
-  position: absolute;
-  top: ${(props) => 'calc('+props.iconSize+' + 15px)'};
-  ${(props) => (props.alignArrow === 'left' 
-    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
-    : props.alignArrow === 'center' 
-    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
-    : 'right: calc('+props.iconSize+' /2 - 17px)')};
-  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: String, borderColor: String }
-
-const IconWrapper = styled('div', iconAttrs)`
-  position: relative;
-  top: 1px;
-  height: ${(props) => props.size};
-`
-const IconImg = styled('div', iconAttrs)`
-  cursor: pointer;
-  height: ${(props) => props.size};
-`
-
-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: '14px'
-    },
-    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;
-    }
-  }
-}
+<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" 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:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
+const TextOverlay = styled('div', textAttrs)`
+  position: absolute;
+  top: ${(props) => 'calc('+props.iconSize+' + 15px)'};
+  ${(props) => (props.alignArrow === 'left' 
+    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
+    : props.alignArrow === 'center' 
+    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
+    : 'right: calc('+props.iconSize+' /2 - 17px)')};
+  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: String, borderColor: String }
+
+const IconWrapper = styled('div', iconAttrs)`
+  position: relative;
+  top: 1px;
+  height: ${(props) => props.size};
+`
+const IconImg = styled('div', iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size};
+`
+
+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: '14px'
+    },
+    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>

package/src/components/inputs/checkbox/Checkbox.stories.js

@@ -1,57 +1,57 @@
-import Checkbox from "./index.vue"
-
-export default {
-  title: "Checkbox",
-  component: Checkbox,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Checkbox },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<checkbox v-bind="$props" />',
-
-  // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
-  //To use:
-  // <checkbox
-  //     label="Do you accept the Terms?"
-  //     :isChecked="isChecked" //required
-  //     @on-event-handler="onInputChange($event)" //required
-  //     checkColor="blue"
-  //     size="small"
-  //     backgroundColor="red"
-  //     :isDisabled="true"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isChecked: true,
-  size: "medium", // "small" or "medium"
-  isDisabled: false,
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  isChecked: true,
-  size: "small", // "small" or "medium"
-  isDisabled: false,
-}
-
-export const CustomColor = Template.bind({})
-CustomColor.args = {
-  isChecked: true,
-  size: "medium", // "small" or "medium"
-  checkColor: "blue",
-  backgroundColor: "red",
-  isDisabled: false,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  isChecked: false,
-  size: "medium", // "small" or "medium"
-  isDisabled: true,
-}
+import Checkbox from "./index.vue"
+
+export default {
+  title: "Checkbox",
+  component: Checkbox,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Checkbox },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<checkbox v-bind="$props" />',
+
+  // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
+  //To use:
+  // <checkbox
+  //     label="Do you accept the Terms?"
+  //     :isChecked="isChecked" //required
+  //     @on-event-handler="onInputChange($event)" //required
+  //     checkColor="blue"
+  //     size="small"
+  //     backgroundColor="red"
+  //     :isDisabled="true"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isChecked: true,
+  size: "medium", // "small" or "medium"
+  isDisabled: false,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  isChecked: true,
+  size: "small", // "small" or "medium"
+  isDisabled: false,
+}
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  isChecked: true,
+  size: "medium", // "small" or "medium"
+  checkColor: "blue",
+  backgroundColor: "red",
+  isDisabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isChecked: false,
+  size: "medium", // "small" or "medium"
+  isDisabled: true,
+}