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

package/.eslintrc.js

@@ -0,0 +1,125 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended',],
+  plugins: ['vue'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  rules: {
+    'vue/component-name-in-template-casing': ['warn', 'PascalCase', {
+      registeredComponentsOnly: false,
+      ignores: []
+    }],
+    'vue/multi-word-component-names': ['warn', {
+      ignores: [] 
+    }],
+    'vue/html-closing-bracket-newline': ['warn', {
+      singleline: 'never',
+      multiline: 'always'
+    }],
+    'vue/html-closing-bracket-spacing': ['warn', {
+      startTag: 'never',
+      endTag: 'never',
+      selfClosingTag: 'always'
+    }],
+    "vue/no-multi-spaces": ["warn", {
+      "ignoreProperties": false
+    }],
+    'vue/html-end-tags': 'warn',
+    'keyword-spacing': ['warn', {
+      before: true, // Require a space before keywords
+      after: true // Require a space after keywords
+    }],
+    // Enforce one space after comma
+    'comma-spacing': ['warn', {
+      before: false, // No space before comma
+      after: true // Require a space after comma
+    }],
+    'func-call-spacing': ['warn', 'never'],
+    // Enforce one space around binary operators (+, -, *, /, etc.)
+    'space-infix-ops': 'warn',
+    // Enforce no space inside parentheses
+    'space-in-parens': ['warn', 'never'],
+    // Enforce one space before block statements (if, else, for, etc.)
+    'space-before-blocks': 'warn',
+    // Enforce no spaces inside square brackets 
+    'array-bracket-spacing': ['warn', 'never'],
+    // Enforce one space before function parentheses
+    'space-before-function-paren': ['warn', 'never'],
+    // Enforce one space inside braces of object literals
+    'object-curly-spacing': ['warn', 'always'],
+    // Enforce one space before and after arrow functions (optional)
+    'arrow-spacing': ['warn', { before: true, after: true }],
+    // Enforce one space after colon in object literals
+    'key-spacing': ['warn', {
+      beforeColon: false, // No space before colon
+      afterColon: true, // Require one space after colon
+      mode: 'strict' // Enforce spacing between key and value
+    }],
+    'vue/html-indent': ['warn', 2],
+    'vue/html-quotes': ['warn', 'double'],
+    'vue/html-self-closing': ['warn', {
+      html: {
+        void: 'always',
+        normal: 'never',
+        component: 'always'
+      },
+      svg: 'always',
+      math: 'always'
+    }],
+    'vue/require-default-prop': 'warn',
+    'vue/require-prop-types': 'warn',
+    'vue/script-indent': ['warn', 2, {
+      baseIndent: 1,
+      switchCase: 1,
+      ignores: []
+    }],
+    'vue/v-on-event-hyphenation': ['warn', 'always', {
+      autofix: true,
+      ignore: []
+    }],
+    'vue/prop-name-casing': ['warn', 'camelCase'],
+    'vue/order-in-components': 'warn',
+    'vue/this-in-template': ['warn', 'never'],
+    'vue/attributes-order': ['warn', {
+      order: [
+        'DEFINITION',
+        'LIST_RENDERING',
+        'CONDITIONALS',
+        'RENDER_MODIFIERS',
+        'GLOBAL',
+        ['UNIQUE', 'SLOT'],
+        'TWO_WAY_BINDING',
+        'OTHER_DIRECTIVES',
+        'OTHER_ATTR',
+        'EVENTS',
+        'CONTENT'
+      ],
+      alphabetical: true
+    }],
+    'vue/no-unused-vars': 'warn',
+    'vue/no-use-v-if-with-v-for': ['warn', {
+      allowUsingIterationVar: false
+    }],
+    'no-unused-vars': 'warn',
+    'no-undef': 'warn',
+    'no-console': 'warn',
+    'no-debugger': 'warn',
+    'no-multi-spaces': 'warn',
+    'no-mixed-spaces-and-tabs': 'warn',
+    "no-redeclare": "warn",
+    "no-unsafe-finally": "warn",
+    'vue/no-v-for-template-key': 'warn',
+    'vue/no-reserved-component-names': 'warn',
+    'max-len': ['warn', { code: 80, tabWidth: 2, ignoreUrls: true }],
+  },
+  globals: {
+    _: true
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.3-EPDM-11250.0",
+  "version": "7.24.3-EPDM-11320.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -22,28 +22,14 @@
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
-    "@vue/cli-plugin-babel": "5.0.8",
+    "babel-eslint": "10.1.0",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
     "@vue/compiler-sfc": "3.3.4",
-    "eslint": "7.32.0",
-    "eslint-plugin-vue": "8.0.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
+    "eslint": "8.0.1",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.14.1"
   },
   "browserslist": [
     "> 1%",

package/src/App.vue

@@ -1,103 +1,108 @@
 <template>
-  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <page-container>
+  <ThemeProvider
+    :style="{ height: '100%' }"
+    :theme="getTheme()"
+  >
+    <PageContainer>
       <br />
-      <input-number
+      <InputNumber
+        background-color="transparent"
+        border-color="eturnityGrey"
+        input-height="34px"
+        input-width="420px"
+        :interaction-step="1"
+        :is-interactive="true"
+        :min-number="0"
+        :number-precision="0"
+        text-align="left"
+        unit-name="mm"
         :value="value"
-        :minNumber="0"
-        unitName="mm"
-        :numberPrecision="0"
-        backgroundColor="transparent"
-        borderColor="eturnityGrey"
-        inputHeight="34px"
-        inputWidth="420px"
-        textAlign="left"
-        :isInteractive="true"
-        :interactionStep="1"
-        @on-input="inputHandler"
+        @input-blur="blurHandler"
         @input-change="changeHandler"
         @input-focus="focusHandler"
-        @input-blur="blurHandler"
+        @on-input="inputHandler"
       >
-        <template v-slot:label>
+        <template #label>
           <div>Interactive Label 1</div>
         </template>
-      </input-number>
+      </InputNumber>
 
-      <hr>
+      <hr />
 
-      <input-number
+      <InputNumber
+        background-color="transparent"
+        border-color="eturnityGrey"
+        input-height="34px"
+        input-width="420px"
+        :interaction-step="1"
+        :is-interactive="true"
+        :min-number="0"
+        :number-precision="0"
+        text-align="left"
+        unit-name="mm"
         :value="value"
-        :minNumber="0"
-        unitName="mm"
-        :numberPrecision="0"
-        backgroundColor="transparent"
-        borderColor="eturnityGrey"
-        inputHeight="34px"
-        inputWidth="420px"
-        textAlign="left"
-        :isInteractive="true"
-        :interactionStep="1"
-        @on-input="inputHandler"
+        @input-blur="blurHandler"
         @input-change="changeHandler"
         @input-focus="focusHandler"
-        @input-blur="blurHandler"
+        @on-input="inputHandler"
       >
-        <template v-slot:label>
+        <template #label>
           <div>Interactive Label 2</div>
         </template>
-      </input-number>
+      </InputNumber>
 
-      <hr>
-      <button @click="value=42">Click to set at 42</button>
-    </page-container>
+      <hr />
+      <button @click="value=42">
+        Click to set at 42
+      </button>
+    </PageContainer>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue3-styled-components'
-import theme from './assets/theme'
-import styled from 'vue3-styled-components'
-import InputNumber from '@/components/inputs/inputNumber'
+  import { ThemeProvider } from 'vue3-styled-components'
+  import theme from './assets/theme'
+  import styled from 'vue3-styled-components'
+  import InputNumber from '@/components/inputs/inputNumber'
 
-const PageContainer = styled.div`
+  const PageContainer = styled.div`
   padding: 40px;
 `
 
-export default {
-  name: 'App',
-  components: {
-    ThemeProvider,
-    PageContainer,
-    InputNumber,
-  },
-  data() {
-    return {
-      value: 42,
-    }
-  },
-  computed: {
-  },
-  methods: {
-    blurHandler(e) {
-      console.log('blur', e)
+  export default {
+    name: 'App',
+    components: {
+      ThemeProvider,
+      PageContainer,
+      InputNumber,
     },
-    changeHandler(e) {
-      console.log('change', e)
+    data() {
+      return {
+        value: 42,
+      }
     },
-    focusHandler(e) {
-      console.log('focus', e)
+    computed: {
     },
-    inputHandler(e) {
-      console.log('input', e)
-      //this.value = e
-      setTimeout(()=>{this.value = e},1000)
-    },
-    getTheme() {
-      return theme
+    methods: {
+      blurHandler(e) {
+        console.log('blur', e)
+      },
+      changeHandler(e) {
+        console.log('change', e)
+      },
+      focusHandler(e) {
+        console.log('focus', e)
+      },
+      inputHandler(e) {
+        console.log('input', e)
+        //this.value = e
+        setTimeout(() => {this.value = e}, 1000)
+      },
+      getTheme() {
+        return theme
+      }
     }
   }
-}
 </script>
 
 <style>

package/src/components/addNewButton/index.vue

@@ -1,24 +1,24 @@
 <template>
-  <page-container :shouldPosition="shouldPosition">
-    <button-container :data-id="dataId">
+  <PageContainer :should-position="shouldPosition">
+    <ButtonContainer :data-id="dataId">
       <PlusButtonSvg />
-    </button-container>
-  </page-container>
+    </ButtonContainer>
+  </PageContainer>
 </template>
 
 <script>
 // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from 'vue3-styled-components'
-import PlusButtonSvg from '../../assets/icons/plus_button.svg'
+  import styled from 'vue3-styled-components'
+  import PlusButtonSvg from '../../assets/icons/plus_button.svg'
 
-const pageAttrs = { shouldPosition: Boolean }
-const PageContainer = styled('div', pageAttrs)`
+  const pageAttrs = { shouldPosition: Boolean }
+  const PageContainer = styled('div', pageAttrs)`
   position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
   bottom: 30px;
   right: 30px;
 `
 
-const ButtonContainer = styled.div`
+  const ButtonContainer = styled.div`
   height: 60px;
   width: 60px;
   background-color: ${(props) => props.theme.colors.green};
@@ -40,25 +40,22 @@ const ButtonContainer = styled.div`
   }
 `
 
-const PlusButton = styled.img``
-
-export default {
-  name: 'add-new-button',
-  components: {
-    PageContainer,
-    ButtonContainer,
-    PlusButton,
-    PlusButtonSvg
-  },
-  props: {
-    shouldPosition: {
-      required: false,
-      default: true
+  export default {
+    name: 'AddNewButton',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      PlusButtonSvg
     },
-    dataId: {
-      type: String,
-      default: ''
+    props: {
+      shouldPosition: {
+        required: false,
+        default: true
+      },
+      dataId: {
+        type: String,
+        default: ''
+      }
     }
   }
-}
 </script>

package/src/components/banner/actionBanner/index.vue

@@ -1,28 +1,30 @@
 <template>
-  <Modal :is-open="isOpen" @on-close="closeModal">
-    <modalContainer>
-      <modalTitle v-if="$slots.title">
+  <Modal
+    :is-open="isOpen"
+    @on-close="closeModal"
+  >
+    <ModalContainer>
+      <ModalTitle v-if="$slots.title">
         <slot name="title"></slot>
-      </modalTitle>
-      <textContainer v-if="$slots.body">
+      </ModalTitle>
+      <TextContainer v-if="$slots.body">
         <slot name="body"></slot>
-      </textContainer>
-      <buttonContainer v-if="$slots.buttons">
+      </TextContainer>
+      <ButtonContainer v-if="$slots.buttons">
         <slot name="buttons"></slot>
-      </buttonContainer>
-    </modalContainer>
+      </ButtonContainer>
+    </ModalContainer>
   </Modal>
 </template>
 <script>
-import styled from 'vue3-styled-components'
-import { mapActions, mapState } from 'vuex'
-import Modal from '../modal'
-const modalContainer = styled.div`
+  import styled from 'vue3-styled-components'
+  import Modal from '../modal'
+  const ModalContainer = styled.div`
   width: 450px;
   min-height: 205px;
   padding: 40px 40px 30px 40px;
 `
-const modalTitle = styled.div`
+  const ModalTitle = styled.div`
   color: ${(props) => props.theme.colors.black};
   font-family: ${(props) => props.theme.fonts.mainFont};
   font-size: 18px;
@@ -31,12 +33,12 @@ const modalTitle = styled.div`
   line-height: 120%;
   text-transform: uppercase;
 `
-const buttonContainer = styled.div`
+  const ButtonContainer = styled.div`
   display: inline-flex;
   align-items: flex-start;
   gap: 20px;
 `
-const textContainer = styled.div`
+  const TextContainer = styled.div`
   color: ${(props) => props.theme.colors.black};
   font-family: ${(props) => props.theme.fonts.mainFont};
   font-size: 13px;
@@ -46,20 +48,20 @@ const textContainer = styled.div`
   padding: 30px 0px;
   white-space: pre-wrap;
 `
-export default {
-  name: 'actionModal',
-  props: ['isOpen'],
-  components: {
-    Modal,
-    modalContainer,
-    modalTitle,
-    buttonContainer,
-    textContainer
-  },
-  methods: {
-    closeModal() {
-      this.$emit('on-close')
+  export default {
+    name: 'ActionModal',
+    components: {
+      Modal,
+      ModalContainer,
+      ModalTitle,
+      ButtonContainer,
+      TextContainer
+    },
+    props: ['isOpen'],
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      }
     }
   }
-}
 </script>