@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.4 → 8.7.4

package/README.md

@@ -1,29 +1,29 @@
-# eturnity_reusable_components
-
-## To use in a project:
-
-```
-npm install @eturnity/eturnity_reusable_components
-```
-
-### To run locally
-
-```
-npm run dev
-```
-
-### To use storybook
-
-```
-npm run storybook
-```
-
-### To publish a new version
-
-```
-Follow correct semantic versioning
-https://docs.npmjs.com/about-semantic-versioning
-
-
-npm publish
-```
+# eturnity_reusable_components
+
+## To use in a project:
+
+```
+npm install @eturnity/eturnity_reusable_components
+```
+
+### To run locally
+
+```
+npm run dev
+```
+
+### To use storybook
+
+```
+npm run storybook
+```
+
+### To publish a new version
+
+```
+Follow correct semantic versioning
+https://docs.npmjs.com/about-semantic-versioning
+
+
+npm publish
+```

package/package.json

@@ -1,84 +1,84 @@
-{
-  "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.4--EPDM-12729.4",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "main": "./dist/main.umd.js",
-  "module": "./dist/main.es.js",
-  "private": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "vue-cli-service lint",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prettier": "prettier --write 'src/**/*.{js,vue}'",
-    "test": "jest",
-    "test-coverage": "jest --coverage"
-  },
-  "dependencies": {
-    "@originjs/vite-plugin-commonjs": "1.0.3",
-    "@vue/compat": "3.3.4",
-    "@vueform/slider": "2.1.10",
-    "@vuepic/vue-datepicker": "6.1.0",
-    "click-outside-vue3": "4.0.1",
-    "storybook": "8.2.9",
-    "vite-plugin-require": "1.1.14",
-    "vue": "3.3.4",
-    "vue-router": "4.2.2",
-    "vue3-styled-components": "1.2.1",
-    "vuedraggable": "4.1.0"
-  },
-  "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/preset-env": "7.25.3",
-    "@chromatic-com/storybook": "1.6.1",
-    "@storybook/addon-essentials": "8.2.9",
-    "@storybook/addon-interactions": "8.2.9",
-    "@storybook/addon-links": "8.2.9",
-    "@storybook/addon-onboarding": "8.2.8",
-    "@storybook/blocks": "8.2.8",
-    "@storybook/test": "8.2.8",
-    "@storybook/vue3-vite": "8.2.9",
-    "@types/node": "22.1.0",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/compiler-sfc": "3.3.4",
-    "@vue/test-utils": "2.4.6",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "26.6.3",
-    "eslint": "8.0.1",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-vue": "9.14.1",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.3",
-    "jest-styled-components": "7.2.0",
-    "jsdom": "24.1.1",
-    "prettier": "2.8.4",
-    "vite": "4.0.0",
-    "vite-svg-loader": "5.1.0",
-    "vue-jest": "5.0.0-alpha.10",
-    "vue-loader": "17.4.2",
-    "vue-svg-loader": "0.16.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "description": "## Project setup ``` npm install ```",
-  "repository": {
-    "type": "git",
-    "url": "git+https://aaronenser@bitbucket.org/eturnitydevs/eturnity_reusable_components.git"
-  },
-  "author": "Aaron Enser",
-  "license": "ISC",
-  "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+{
+  "name": "@eturnity/eturnity_reusable_components",
+  "version": "8.7.4",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/main.umd.js",
+  "module": "./dist/main.es.js",
+  "private": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "vue-cli-service lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prettier": "prettier --write 'src/**/*.{js,vue}'",
+    "test": "jest",
+    "test-coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@originjs/vite-plugin-commonjs": "1.0.3",
+    "@vue/compat": "3.3.4",
+    "@vueform/slider": "2.1.10",
+    "@vuepic/vue-datepicker": "6.1.0",
+    "click-outside-vue3": "4.0.1",
+    "storybook": "8.2.9",
+    "vite-plugin-require": "1.1.14",
+    "vue": "3.3.4",
+    "vue-router": "4.2.2",
+    "vue3-styled-components": "1.2.1",
+    "vuedraggable": "4.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/plugin-syntax-import-meta": "7.10.4",
+    "@babel/preset-env": "7.25.3",
+    "@chromatic-com/storybook": "1.6.1",
+    "@storybook/addon-essentials": "8.2.9",
+    "@storybook/addon-interactions": "8.2.9",
+    "@storybook/addon-links": "8.2.9",
+    "@storybook/addon-onboarding": "8.2.8",
+    "@storybook/blocks": "8.2.8",
+    "@storybook/test": "8.2.8",
+    "@storybook/vue3-vite": "8.2.9",
+    "@types/node": "22.1.0",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/compiler-sfc": "3.3.4",
+    "@vue/test-utils": "2.4.6",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "26.6.3",
+    "eslint": "8.0.1",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-vue": "9.14.1",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.6.3",
+    "jest-styled-components": "7.2.0",
+    "jsdom": "24.1.1",
+    "prettier": "2.8.4",
+    "vite": "4.0.0",
+    "vite-svg-loader": "5.1.0",
+    "vue-jest": "5.0.0-alpha.10",
+    "vue-loader": "17.4.2",
+    "vue-svg-loader": "0.16.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "description": "## Project setup ``` npm install ```",
+  "repository": {
+    "type": "git",
+    "url": "git+https://aaronenser@bitbucket.org/eturnitydevs/eturnity_reusable_components.git"
+  },
+  "author": "Aaron Enser",
+  "license": "ISC",
+  "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
+}

package/src/App.vue

@@ -1,30 +1,30 @@
-<template>
-  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
-    <RouterView />
-  </ThemeProvider>
-</template>
-
-<script>
-  import { ThemeProvider } from 'vue3-styled-components'
-  import theme from './assets/theme'
-
-  export default {
-    name: 'App',
-    components: {
-      ThemeProvider,
-    },
-    methods: {
-      getTheme() {
-        return theme
-      },
-    },
-  }
-</script>
-
-<style>
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-  }
-</style>
+<template>
+  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
+    <RouterView />
+  </ThemeProvider>
+</template>
+
+<script>
+  import { ThemeProvider } from 'vue3-styled-components'
+  import theme from './assets/theme'
+
+  export default {
+    name: 'App',
+    components: {
+      ThemeProvider,
+    },
+    methods: {
+      getTheme() {
+        return theme
+      },
+    },
+  }
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+  }
+</style>

package/src/Test.vue

@@ -1,128 +1,128 @@
-<template>
-  <PageContainer>
-    <SpinnerComponent size="60px" />
-    <IconComponent color="red" cursor="pointer" name="House" size="30px" />
-    <MainButton icon="bell" text="Click ME" type="secondary" />
-    <AddNewButton />
-    <ToggleComponent
-      :disabled="false"
-      info-text-message="My info message"
-      :is-checked="true"
-      label="My Label Text"
-      label-align="right"
-      toggle-color="red"
-    />
-    <br />
-    <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"
-      @input-blur="blurHandler"
-      @input-change="changeHandler"
-      @input-focus="focusHandler"
-      @on-input="inputHandler"
-    >
-      <template #label>
-        <div>Interactive Label 1</div>
-      </template>
-    </InputNumber>
-
-    <hr />
-
-    <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"
-      @input-blur="blurHandler"
-      @input-change="changeHandler"
-      @input-focus="focusHandler"
-      @on-input="inputHandler"
-    >
-      <template #label>
-        <div>Interactive Label 2</div>
-      </template>
-    </InputNumber>
-
-    <hr />
-    <button @click="value = 42">Click to set at 42</button>
-    <br />
-    <IconCollection />
-  </PageContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import InputNumber from '@/components/inputs/inputNumber'
-  import ToggleComponent from '@/components/inputs/toggle'
-  import IconCollection from '@/components/icon/iconCollection'
-  import AddNewButton from '@/components/addNewButton'
-  import MainButton from '@/components/buttons/mainButton'
-  import IconComponent from '@/components/icon'
-  import SpinnerComponent from '@/components/spinner'
-
-  const PageContainer = styled.div`
-    padding: 40px;
-  `
-
-  export default {
-    name: 'App',
-    components: {
-      PageContainer,
-      InputNumber,
-      ToggleComponent,
-      IconCollection,
-      AddNewButton,
-      MainButton,
-      IconComponent,
-      SpinnerComponent,
-    },
-    data() {
-      return {
-        value: 42,
-      }
-    },
-    computed: {},
-    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)
-      },
-    },
-  }
-</script>
-
-<style>
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-  }
-</style>
+<template>
+  <PageContainer>
+    <SpinnerComponent size="60px" />
+    <IconComponent color="red" cursor="pointer" name="House" size="30px" />
+    <MainButton icon="bell" text="Click ME" type="secondary" />
+    <AddNewButton />
+    <ToggleComponent
+      :disabled="false"
+      info-text-message="My info message"
+      :is-checked="true"
+      label="My Label Text"
+      label-align="right"
+      toggle-color="red"
+    />
+    <br />
+    <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"
+      @input-blur="blurHandler"
+      @input-change="changeHandler"
+      @input-focus="focusHandler"
+      @on-input="inputHandler"
+    >
+      <template #label>
+        <div>Interactive Label 1</div>
+      </template>
+    </InputNumber>
+
+    <hr />
+
+    <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"
+      @input-blur="blurHandler"
+      @input-change="changeHandler"
+      @input-focus="focusHandler"
+      @on-input="inputHandler"
+    >
+      <template #label>
+        <div>Interactive Label 2</div>
+      </template>
+    </InputNumber>
+
+    <hr />
+    <button @click="value = 42">Click to set at 42</button>
+    <br />
+    <IconCollection />
+  </PageContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import InputNumber from '@/components/inputs/inputNumber'
+  import ToggleComponent from '@/components/inputs/toggle'
+  import IconCollection from '@/components/icon/iconCollection'
+  import AddNewButton from '@/components/addNewButton'
+  import MainButton from '@/components/buttons/mainButton'
+  import IconComponent from '@/components/icon'
+  import SpinnerComponent from '@/components/spinner'
+
+  const PageContainer = styled.div`
+    padding: 40px;
+  `
+
+  export default {
+    name: 'App',
+    components: {
+      PageContainer,
+      InputNumber,
+      ToggleComponent,
+      IconCollection,
+      AddNewButton,
+      MainButton,
+      IconComponent,
+      SpinnerComponent,
+    },
+    data() {
+      return {
+        value: 42,
+      }
+    },
+    computed: {},
+    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)
+      },
+    },
+  }
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+  }
+</style>

package/src/assets/icons/arrow_down.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
+</svg>

package/src/assets/icons/arrow_up_red.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
+</svg>

package/src/assets/icons/black_spinner.svg

@@ -1,36 +1,36 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<g transform="rotate(0 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(45 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(90 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(135 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(180 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(225 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(270 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(315 50 50)">
-  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
-  </rect>
-</g>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(45 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(135 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(225 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(315 50 50)">
+  <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
 <!-- [ldio] generated by https://loading.io/ --></svg>