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

package/src/components/inputs/toggle/index.vue

@@ -1,66 +1,56 @@
 <template>
-  <Container>
-    <FlexWrapper
-      :data-id="dataId"
-      :disabled="disabled"
+  <container>
+    <flex-wrapper
       :size="size"
+      :disabled="disabled"
       @click="onToggleChange"
+      :data-id="dataId"
     >
-      <LabelContainer
+      <label-container
         v-if="label && labelAlign === 'left'"
-        :has-info-message="!!infoTextMessage"
+        :hasInfoMessage="!!infoTextMessage"
       >
-        <LabelText
-          :font-color="fontColor"
-          :size="size"
-        >
-          {{ label }}
-        </LabelText>
-        <InfoText
+        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+        <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
         />
-      </LabelContainer>
-      <ToggleWrapper
-        :background-color="backgroundColor"
-        :checked="isChecked"
-        :disabled="disabled"
-        :is-checked="isChecked"
+      </label-container>
+      <toggle-wrapper
         role="checkbox"
+        :checked="isChecked"
         :size="size"
         tabindex="0"
         @keydown.space.prevent="onToggleChange"
+        :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
       >
-        <ToggleBackground
-          :background-color="backgroundColor"
+        <toggle-background
+          :backgroundColor="backgroundColor"
+          :isChecked="isChecked"
           :disabled="disabled"
-          :is-checked="isChecked"
         />
-        <ToggleDot
-          :disabled="disabled"
-          :is-checked="isChecked"
+        <toggle-dot
+          :isChecked="isChecked"
+          :toggleColor="toggleColor"
           :size="size"
-          :toggle-color="toggleColor"
+          :disabled="disabled"
         />
-      </ToggleWrapper>
-      <LabelContainer
+      </toggle-wrapper>
+      <label-container
         v-if="label && labelAlign === 'right'"
-        :has-info-message="!!infoTextMessage"
+        :hasInfoMessage="!!infoTextMessage"
       >
-        <LabelText
-          :font-color="fontColor"
-          :size="size"
-        >
-          {{ label }}
-        </LabelText>
-        <InfoText
+        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+        <info-text
+          @click.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          @click.stop
         />
-      </LabelContainer>
-    </FlexWrapper>
-  </Container>
+      </label-container>
+    </flex-wrapper>
+  </container>
 </template>
 
 <script>
@@ -80,15 +70,15 @@
 //   data-id="test_data_id"
 // />
 
-  import styled from 'vue3-styled-components'
-  import InfoText from '../../infoText'
+import styled from 'vue3-styled-components'
+import InfoText from '../../infoText'
 
-  const Container = styled.div`
+const Container = styled.div`
   display: inline-block;
 `
 
-  const flexAttrs = { size: String, disabled: Boolean }
-  const FlexWrapper = styled('div', flexAttrs)`
+const flexAttrs = { size: String, disabled: Boolean }
+const FlexWrapper = styled('div', flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${(props) =>
@@ -96,30 +86,30 @@
       ? '20px'
       : props.size === 'small'
       ? '10px'
-  : '20px'};
+      : '20px'};
   align-items: center;
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
 `
 
-  const toggleAttrs = {
-    size: String,
-    fontColor: String,
-    disabled: Boolean,
-    backgroundColor: String,
-    isChecked: Boolean
-  }
-  const LabelText = styled('div', toggleAttrs)`
+const toggleAttrs = {
+  size: String,
+  fontColor: String,
+  disabled: Boolean,
+  backgroundColor: String,
+  isChecked: Boolean
+}
+const LabelText = styled('div', toggleAttrs)`
   color: ${(props) =>
-  props.fontColor ? props.fontColor : props.theme.colors.darkGray};
+    props.fontColor ? props.fontColor : props.theme.colors.darkGray};
   font-size: ${(props) =>
     props.size === 'medium'
       ? '16px'
       : props.size === 'small'
       ? '13px'
-  : '16px'};
+      : '16px'};
 `
 
-  const ToggleWrapper = styled('span', toggleAttrs)`
+const ToggleWrapper = styled('span', toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
     props.disabled
@@ -128,7 +118,7 @@
       ? props.backgroundColor
         ? '1px solid ' + props.backgroundColor
         : '1px solid ' + props.theme.colors.green
-  : '1px solid ' + props.theme.colors.grey3}
+      : '1px solid ' + props.theme.colors.grey3}
   position: relative;
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   width: ${(props) =>
@@ -136,13 +126,13 @@
       ? '50px'
       : props.size === 'small'
       ? '29px'
-  : '50px'};
+      : '50px'};
   height: ${(props) =>
     props.size === 'medium'
       ? '24px'
       : props.size === 'small'
       ? '16px'
-  : '24px'};
+      : '24px'};
   border-radius: 100px;
 
   &:focus {
@@ -155,12 +145,12 @@
   }
 `
 
-  const backgroundAttrs = {
-    backgroundColor: String,
-    isChecked: Boolean,
-    disabled: Boolean
-  }
-  const ToggleBackground = styled('span', backgroundAttrs)`
+const backgroundAttrs = {
+  backgroundColor: String,
+  isChecked: Boolean,
+  disabled: Boolean
+}
+const ToggleBackground = styled('span', backgroundAttrs)`
   display: block;
   border-radius: 100px;
   height: 100%;
@@ -172,33 +162,33 @@
       ? props.backgroundColor
         ? props.backgroundColor
         : props.theme.colors.green
-  : props.theme.colors.grey3};
+      : props.theme.colors.grey3};
   transition: 0.4s ease;
 `
 
-  const toggleProps = {
-    isChecked: Boolean,
-    toggleColor: String,
-    size: String,
-    disabled: Boolean
-  }
-  const ToggleDot = styled('span', toggleProps)`
+const toggleProps = {
+  isChecked: Boolean,
+  toggleColor: String,
+  size: String,
+  disabled: Boolean
+}
+const ToggleDot = styled('span', toggleProps)`
   position: absolute;
   height: ${(props) =>
     props.size === 'medium'
       ? '14px'
       : props.size === 'small'
       ? '10px'
-  : '14px'};
+      : '14px'};
   width: ${(props) =>
     props.size === 'medium'
       ? '14px'
       : props.size === 'small'
       ? '10px'
-  : '14px'};
+      : '14px'};
   left: 3px;
   bottom: ${(props) =>
-  props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
+    props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
     props.disabled
       ? props.theme.colors.disabled
@@ -206,7 +196,7 @@
       ? props.toggleColor
         ? props.toggleColor
         : props.theme.colors.white
-  : props.theme.colors.white};
+      : props.theme.colors.white};
   border-radius: 100%;
   transition: transform 0.4s ease;
   transform: ${(props) =>
@@ -216,83 +206,83 @@
         : props.size === 'small'
         ? 'translateX(12px)'
         : 'translateX(25px)'
-  : 'translateX(0)'};
+      : 'translateX(0)'};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
     width: 24px;
     transform: ${(props) =>
-  props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
+      props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
     bottom: 8px;
   }
 `
 
-  const labelAttrs = { hasInfoMessage: Boolean }
-  const LabelContainer = styled('div', labelAttrs)`
+const labelAttrs = { hasInfoMessage: Boolean }
+const LabelContainer = styled('div', labelAttrs)`
   display: inline-grid;
   grid-template-columns: ${(props) =>
-  props.hasInfoMessage ? 'auto 1fr' : 'auto'};
+    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
   grid-gap: 12px;
   align-items: center;
 `
 
-  export default {
-    name: 'Toggle',
-    components: {
-      Container,
-      ToggleBackground,
-      ToggleDot,
-      ToggleWrapper,
-      FlexWrapper,
-      LabelText,
-      InfoText,
-      LabelContainer
+export default {
+  name: 'toggle',
+  components: {
+    Container,
+    ToggleBackground,
+    ToggleDot,
+    ToggleWrapper,
+    FlexWrapper,
+    LabelText,
+    InfoText,
+    LabelContainer
+  },
+  props: {
+    label: {
+      required: false,
+      default: ''
     },
-    props: {
-      label: {
-        required: false,
-        default: ''
-      },
-      isChecked: {
-        required: true,
-        default: false
-      },
-      toggleColor: {
-        required: false
-      },
-      backgroundColor: {
-        required: false
-      },
-      size: {
-        required: false,
-        default: 'small'
-      },
-      labelAlign: {
-        required: false,
-        default: 'right'
-      },
-      fontColor: {
-        required: false
-      },
-      disabled: {
-        required: false,
-        default: false
-      },
-      infoTextMessage: {
-        required: false
-      },
-      dataId: {
-        type: String,
-        default: ''
-      }
+    isChecked: {
+      required: true,
+      default: false
+    },
+    toggleColor: {
+      required: false
+    },
+    backgroundColor: {
+      required: false
     },
-    methods: {
-      onToggleChange() {
-        if (this.disabled) {
-          return
-        }
-        this.$emit('on-toggle-change', !this.isChecked)
+    size: {
+      required: false,
+      default: 'small'
+    },
+    labelAlign: {
+      required: false,
+      default: 'right'
+    },
+    fontColor: {
+      required: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    infoTextMessage: {
+      required: false
+    },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onToggleChange() {
+      if (this.disabled) {
+        return
       }
+      this.$emit('on-toggle-change', !this.isChecked)
     }
   }
+}
 </script>

package/src/components/label/index.vue

@@ -1,102 +1,99 @@
 <template>
-  <LabelWrapper :label-align="labelAlign">
-    <InputLabel
-      :font-size="fontSize"
-      :label-font-color="labelFontColor"
-    >
+  <label-wrapper :labelAlign="labelAlign">
+    <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">
       <slot></slot>
-      <OptionalLabel v-if="labelOptional">
-        ({{ $gettext('Optional') }})
-      </OptionalLabel>
-    </InputLabel>
-    <InfoText
+      <optionalLabel v-if="labelOptional"
+        >({{ $gettext('Optional') }})</optionalLabel
+      ></input-label
+    >
+    <info-text
       v-if="infoTextMessage"
-      :align-arrow="infoTextAlign"
-      border-color="#ccc"
-      :size="fontSize ? fontSize : '16px'"
       :text="infoTextMessage"
+      borderColor="#ccc"
+      :size="fontSize ? fontSize : '16px'"
+      :alignArrow="infoTextAlign"
     />
-  </LabelWrapper>
+  </label-wrapper>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
+import styled from 'vue3-styled-components'
+import InfoText from '../infoText'
 
-  const labelAttrs = { fontSize: String, labelFontColor: String }
-  const InputLabel = styled('div', labelAttrs)`
+const labelAttrs = { fontSize: String, labelFontColor: String }
+const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
     props.theme.colors[props.labelFontColor]
       ? props.theme.colors[props.labelFontColor]
       : props.labelFontColor
       ? props.labelFontColor
-  : props.theme.colors.eturnityGrey};
+      : props.theme.colors.eturnityGrey};
 
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
-  const OptionalLabel = styled.span`
+const optionalLabel = styled.span`
   font-weight: 300;
 `
 
-  const LabelWrapper = styled('div', { labelAlign: String })`
+const LabelWrapper = styled('div', { labelAlign: String })`
   ${(props) =>
     props.labelAlign == 'horizontal'
       ? 'display: inline-grid;'
-  : 'display: grid;'}
+      : 'display: grid;'}
   ${(props) =>
     props.labelAlign == 'horizontal'
       ? 'margin-right: 10px;'
-  : 'margin-bottom: 8px;'}
+      : 'margin-bottom: 8px;'}
   vertical-align: center;
   grid-template-columns: auto auto;
   grid-gap: 12px;
   align-items: center;
   justify-content: start;
 `
-  export default {
-    // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
-    // To use:
-    // <label-text
-    //   infoTextAlign="right" // left by default
-    //   infoTextMessage="My info message"
-    //   label="Question 5"
-    // />
-    name: 'InputText',
-    components: {
-      InfoText,
-      InputLabel,
-      LabelWrapper,
-      OptionalLabel
+export default {
+  // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
+  // To use:
+  // <label-text
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  // />
+  name: 'input-text',
+  components: {
+    InfoText,
+    InputLabel,
+    LabelWrapper,
+    optionalLabel
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
+  },
+  props: {
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    labelOptional: {
+      required: false,
+      default: false
+    },
+    fontSize: {
+      required: false,
+      default: null
     },
-    props: {
-      infoTextMessage: {
-        required: false
-      },
-      infoTextAlign: {
-        required: false
-      },
-      labelOptional: {
-        required: false,
-        default: false
-      },
-      fontSize: {
-        required: false,
-        default: null
-      },
-      labelFontColor: {
-        required: false,
-        default: 'black'
-      },
-      labelAlign: {
-        required: false,
-        default: 'vertical'
-      }
+    labelFontColor: {
+      required: false,
+      default: 'black'
     },
-    data() {
-      return {
-        inputTypeData: 'text'
-      }
+    labelAlign: {
+      required: false,
+      default: 'vertical'
     }
   }
+}
 </script>

package/src/components/markerItem/index.vue

@@ -1,20 +1,20 @@
 <template>
-  <PageContainer>
-    <MarkerContainer
-      :background-color="backgroundColor"
+  <page-container>
+    <marker-container
+      :backgroundColor="backgroundColor"
+      :hasIcon="!!iconName"
       :cursor="cursor"
-      :has-icon="!!iconName"
     >
-      <Icon
+      <icon
         v-if="!!iconName"
-        color="white"
-        :cursor="cursor"
         :name="iconName"
+        color="white"
         size="10px"
+        :cursor="cursor"
       />
       <span>{{ label }}</span>
-    </MarkerContainer>
-  </PageContainer>
+    </marker-container>
+  </page-container>
 </template>
 
 <script>
@@ -27,22 +27,22 @@
 //   cursor="pointer"
 // />
 
-  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`
   display: flex;
   align-items: center;
   font-size: 12px;
   line-height: 14px;
 `
 
-  const MarkerAttrs = {
-    backgroundColor: String,
-    hasIcon: Boolean,
-    cursor: String
-  }
-  const MarkerContainer = styled('div', MarkerAttrs)`
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  cursor: String
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
   display: grid;
   grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
   grid-gap: 5px;
@@ -51,36 +51,36 @@
   padding: 2px 7px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
   border: 1px solid
     ${(props) =>
-  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
   border-radius: 4px;
   white-space: nowrap;
   cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
 `
 
-  export default {
-    name: 'ProjectMarker',
-    components: {
-      PageContainer,
-      MarkerContainer,
-      Icon
+export default {
+  name: 'project-marker',
+  components: {
+    PageContainer,
+    MarkerContainer,
+    Icon
+  },
+  props: {
+    backgroundColor: {
+      required: false
+    },
+    iconName: {
+      required: false
+    },
+    label: {
+      required: true
     },
-    props: {
-      backgroundColor: {
-        required: false
-      },
-      iconName: {
-        required: false
-      },
-      label: {
-        required: true
-      },
-      cursor: {
-        required: false,
-        default: 'default'
-      }
+    cursor: {
+      required: false,
+      default: 'default'
     }
   }
+}
 </script>