@eturnity/eturnity_reusable_components 7.24.3-EPDM-10576.1 → 7.24.3-EPDM-11320.0

package/src/components/buttons/mainButton/index.vue

@@ -1,21 +1,25 @@
 <template>
-  <page-container>
-    <button-container
+  <PageContainer>
+    <ButtonContainer
       :id="id"
-      :type="type"
-      :minWidth="minWidth"
-      :isDisabled="isDisabled"
-      :customColor="customColor"
-      :noWrap="noWrap"
+      :custom-color="customColor"
       :data-id="dataId"
-      :fontColor="fontColor"
+      :font-color="fontColor"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
+      :no-wrap="noWrap"
+      :type="type"
     >
-      <Label :hasIcon="Boolean(icon)">
-        <icon v-if="icon" :name="icon" size="14px" />
+      <Label :has-icon="Boolean(icon)">
+        <Icon
+          v-if="icon"
+          :name="icon"
+          size="14px"
+        />
         {{ text }}
       </Label>
-    </button-container>
-  </page-container>
+    </ButtonContainer>
+  </PageContainer>
 </template>
 
 <script>
@@ -31,24 +35,24 @@
 //   :data-id="test_data_id"
 // />
 
-import styled from 'vue3-styled-components'
-import Icon from '../../icon'
+  import styled from 'vue3-styled-components'
+  import Icon from '../../icon'
 
-const PageContainer = styled.div``
+  const PageContainer = styled.div``
 
-const ButtonAttrs = {
-  type: String,
-  isDisabled: Boolean,
-  minWidth: String,
-  customColor: String,
-  fontColor: String,
-  noWrap: Boolean
-}
-const ButtonContainer = styled('div', ButtonAttrs)`
+  const ButtonAttrs = {
+    type: String,
+    isDisabled: Boolean,
+    minWidth: String,
+    customColor: String,
+    fontColor: String,
+    noWrap: Boolean
+  }
+  const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) =>
-    props.fontColor ? props.fontColor : props.theme.colors.white};
+  props.fontColor ? props.fontColor : props.theme.colors.white};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors.disabled
@@ -60,7 +64,7 @@ const ButtonContainer = styled('div', ButtonAttrs)`
       ? props.theme.colors.grey3
       : props.type === 'cancel'
       ? props.theme.colors.red
-      : props.theme.colors.black};
+  : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -77,64 +81,64 @@ const ButtonContainer = styled('div', ButtonAttrs)`
   }
 `
 
-const LabelAttrs = {
-  hasIcon: Boolean
-}
+  const LabelAttrs = {
+    hasIcon: Boolean
+  }
 
-const Label = styled('span', LabelAttrs)`
+  const Label = styled('span', LabelAttrs)`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: ${(props) => (props.hasIcon ? '5px' : '0')};
 `
 
-export default {
-  name: 'main-button',
-  components: {
-    Icon,
-    Label,
-    PageContainer,
-    ButtonContainer
-  },
-  props: {
-    type: {
-      required: false,
-      default: 'primary'
-    },
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    icon: {
-      required: false,
-      default: null
-    },
-    text: {
-      required: true
-    },
-    customColor: {
-      required: false,
-      default: null
-    },
-    fontColor: {
-      required: false
-    },
-    noWrap: {
-      required: false,
-      default: false
-    },
-    minWidth: {
-      required: false,
-      default: null
-    },
-    id: {
-      required: false,
-      default: null
+  export default {
+    name: 'MainButton',
+    components: {
+      Icon,
+      Label,
+      PageContainer,
+      ButtonContainer
     },
-    dataId: {
-      type: String,
-      default: ''
+    props: {
+      type: {
+        required: false,
+        default: 'primary'
+      },
+      isDisabled: {
+        required: false,
+        default: false
+      },
+      icon: {
+        required: false,
+        default: null
+      },
+      text: {
+        required: true
+      },
+      customColor: {
+        required: false,
+        default: null
+      },
+      fontColor: {
+        required: false
+      },
+      noWrap: {
+        required: false,
+        default: false
+      },
+      minWidth: {
+        required: false,
+        default: null
+      },
+      id: {
+        required: false,
+        default: null
+      },
+      dataId: {
+        type: String,
+        default: ''
+      }
     }
   }
-}
 </script>

package/src/components/card/index.vue

@@ -2,17 +2,21 @@
   <Wrapper
     v-show="!isLoading"
     :class="viewCardClass"
+    :min-width="minWidth"
     :width="width"
-    :minWidth="minWidth"
   >
-    <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+    <Spinner
+      v-if="isLoading"
+      :limited-to-modal="true"
+      size="50px"
+    />
     <CardWrapper v-else>
       <CardTitle :class="titleClass">
         {{ $gettext(title) }}
-        <et-popover
+        <EtPopover
           v-if="showPopover && popoverText !== ''"
           :text="popoverText"
-        ></et-popover>
+        />
       </CardTitle>
       <slot></slot>
     </CardWrapper>
@@ -20,11 +24,11 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import Spinner from '../spinner'
+  import styled from 'vue3-styled-components'
+  import Spinner from '../spinner'
 
-const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
-const Wrapper = styled('div', WrapperProps)`
+  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+  const Wrapper = styled('div', WrapperProps)`
   max-width: ${(props) => props.width};
   min-width: ${(props) => props.minWidth};
   padding: 20px;
@@ -35,12 +39,12 @@ const Wrapper = styled('div', WrapperProps)`
   height: 100%;
 `
 
-const CardWrapper = styled('div')`
+  const CardWrapper = styled('div')`
   height: 100%;
   width: auto;
 `
 
-const CardTitle = styled('p')`
+  const CardTitle = styled('p')`
   font-size: 14px;
   line-height: 1;
   color: ${(props) => props.theme.colors.black};
@@ -48,49 +52,49 @@ const CardTitle = styled('p')`
   margin-bottom: 10px;
 `
 
-export default {
-  name: 'Card',
-  props: {
-    title: {
-      type: String,
-      default: ''
+  export default {
+    name: 'Card',
+    components: {
+      Spinner,
+      Wrapper,
+      CardTitle,
+      CardWrapper
     },
-    width: {
-      type: [Number, String],
-      required: false,
-      default: '400px'
-    },
-    minWidth: {
-      type: [Number, String],
-      required: false,
-      default: null
-    },
-    titleClass: {
-      type: String,
-      default: ''
-    },
-    showPopover: {
-      type: Boolean,
-      default: false
-    },
-    viewCardClass: {
-      type: String,
-      default: ''
-    },
-    popoverText: {
-      type: String,
-      default: ''
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      width: {
+        type: [Number, String],
+        required: false,
+        default: '400px'
+      },
+      minWidth: {
+        type: [Number, String],
+        required: false,
+        default: null
+      },
+      titleClass: {
+        type: String,
+        default: ''
+      },
+      showPopover: {
+        type: Boolean,
+        default: false
+      },
+      viewCardClass: {
+        type: String,
+        default: ''
+      },
+      popoverText: {
+        type: String,
+        default: ''
+      },
+      isLoading: {
+        type: Boolean,
+        default: false
+      }
     }
-  },
-  components: {
-    Spinner,
-    Wrapper,
-    CardTitle,
-    CardWrapper
   }
-}
 </script>

package/src/components/collapsableInfoText/index.vue

@@ -1,18 +1,23 @@
 <template>
   <div>
-    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
+    <Text
+      :expand="showButton && showAll"
+      :font-size="fontSize"
+    >
+      {{ text }}
+    </Text>
     <ToggleContainer>
       <ToggleButton
-        @click="toggleHandler"
         v-if="showButton && !showAll"
-        :fontSize="fontSize"
+        :font-size="fontSize"
+        @click="toggleHandler"
       >
         {{ $gettext('Show more') }}
       </ToggleButton>
       <ToggleButton
-        @click="toggleHandler"
         v-if="showButton && showAll"
-        :fontSize="fontSize"
+        :font-size="fontSize"
+        @click="toggleHandler"
       >
         {{ $gettext('Show less') }}
       </ToggleButton>
@@ -21,14 +26,14 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import theme from '@/assets/theme.js'
 
-const TextAttrs = {
-  expand: Boolean,
-  fontSize: String
-}
-const Text = styled('p', TextAttrs)`
+  const TextAttrs = {
+    expand: Boolean,
+    fontSize: String
+  }
+  const Text = styled('p', TextAttrs)`
   display: block;
   display: -webkit-box;
   line-height: 1.3em;
@@ -39,87 +44,87 @@ const Text = styled('p', TextAttrs)`
   text-overflow: ellipsis;
 `
 
-const ToggleContainer = styled.div`
+  const ToggleContainer = styled.div`
   display: flex;
   width: 100%;
 `
 
-const ToggleButton = styled('p', TextAttrs)`
+  const ToggleButton = styled('p', TextAttrs)`
   font-size: ${(props) => props.fontSize}px;
   cursor: pointer;
   color: ${(props) => props.theme.colors.blue};
 `
 
-export default {
-  name: 'collapsable-info-text',
-  props: {
-    text: {
-      type: String,
-      required: true
+  export default {
+    name: 'CollapsableInfoText',
+    components: {
+      Text,
+      ToggleButton,
+      ToggleContainer
     },
-    fontSize: {
-      type: String,
-      default: '16px'
+    props: {
+      text: {
+        type: String,
+        required: true
+      },
+      fontSize: {
+        type: String,
+        default: '16px'
+      },
+      lineCount: {
+        type: Number,
+        default: 3
+      },
+      minWidth: {
+        type: String,
+        default: '100%'
+      }
     },
-    lineCount: {
-      type: Number,
-      default: 3
+    data() {
+      return {
+        showButton: true,
+        showAll: false,
+        lineBreaks: []
+      }
     },
-    minWidth: {
-      type: String,
-      default: '100%'
-    }
-  },
-  components: {
-    Text,
-    ToggleButton,
-    ToggleContainer
-  },
-  data() {
-    return {
-      showButton: true,
-      showAll: false,
-      lineBreaks: []
-    }
-  },
-  computed: {
-    theme() {
-      return theme
-    }
-  },
-  methods: {
-    displayText() {
-      if (!this.showButton) {
-        return this.text
+    computed: {
+      theme() {
+        return theme
       }
-      if (!this.showAll) {
-        let countIndex = 0
-        this.lineBreaks.forEach((el, index) => {
-          if (index < this.lineCount) {
-            countIndex += el.length
-          }
-        })
+    },
+    created() {
+      // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
+      // this.lineBreaks = this.text.split('\n')
+
+      // if (this.lineBreaks.length <= this.lineCount) {
+      //   this.showButton = false
+      // }
 
-        return this.text.slice(0, countIndex + 2) + '...'
-      } else {
-        return this.text
+      if (this.text.length <= 170) {
+        this.showButton = false
       }
     },
-    toggleHandler() {
-      this.showAll = !this.showAll
-    }
-  },
-  created() {
-    // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
-    // this.lineBreaks = this.text.split('\n')
-
-    // if (this.lineBreaks.length <= this.lineCount) {
-    //   this.showButton = false
-    // }
+    methods: {
+      displayText() {
+        if (!this.showButton) {
+          return this.text
+        }
+        if (!this.showAll) {
+          let countIndex = 0
+          this.lineBreaks.forEach((el, index) => {
+            if (index < this.lineCount) {
+              countIndex += el.length
+            }
+          })
 
-    if (this.text.length <= 170) {
-      this.showButton = false
+          return this.text.slice(0, countIndex + 2) + '...'
+        } else {
+          return this.text
+        }
+      },
+      toggleHandler() {
+        this.showAll = !this.showAll
+      }
     }
   }
-}
 </script>

package/src/components/deleteIcon/index.vue

@@ -1,19 +1,22 @@
 <template>
-  <wrapper :isDisabled="isDisabled">
-    <delete-icon-red class="icon-red" :hoverBg="hoverBg" />
-    <delete-icon-gray class="icon-gray" />
-  </wrapper>
+  <Wrapper :is-disabled="isDisabled">
+    <DeleteIconRed
+      class="icon-red"
+      :hover-bg="hoverBg"
+    />
+    <DeleteIconGray class="icon-gray" />
+  </Wrapper>
 </template>
 
 <script>
 // To use:
 // <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
-import styled from 'vue3-styled-components'
-import SvgDelete from '../../assets/icons/delete_icon.svg'
-import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
+  import styled from 'vue3-styled-components'
+  import SvgDelete from '../../assets/icons/delete_icon.svg'
+  import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
 
-const wrapperAttrs = { isDisabled: Boolean }
-const Wrapper = styled('div', wrapperAttrs)`
+  const wrapperAttrs = { isDisabled: Boolean }
+  const Wrapper = styled('div', wrapperAttrs)`
   width: 30px;
   height: 30px;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -41,38 +44,38 @@ const Wrapper = styled('div', wrapperAttrs)`
     `}
 `
 
-const IconImageAttrs = { hoverBg: String }
-const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
+  const IconImageAttrs = { hoverBg: String }
+  const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
   &:hover {
     background-color: ${(props) =>
-      props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
+  props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
     border-radius: 4px;
   }
 `
 
-const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
+  const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
     border-radius: 4px;
   }
 `
 
-export default {
-  name: 'delete-icon',
-  components: {
-    Wrapper,
-    DeleteIconRed,
-    DeleteIconGray
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false
+  export default {
+    name: 'DeleteIcon',
+    components: {
+      Wrapper,
+      DeleteIconRed,
+      DeleteIconGray
     },
-    hoverBg: {
-      required: false,
-      default: ''
+    props: {
+      isDisabled: {
+        required: false,
+        default: false
+      },
+      hoverBg: {
+        required: false,
+        default: ''
+      }
     }
   }
-}
 </script>