@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-8441.0

package/.prettierrc

@@ -1,7 +1,7 @@
-{
-    "semi": false,
-    "singleQuote": true,
-    "useTabs": false,
-    "trailingComma": "none",
-    "printWidth": 80
+{
+    "semi": false,
+    "singleQuote": true,
+    "useTabs": false,
+    "trailingComma": "none",
+    "printWidth": 80
   }

package/.storybook/main.js

@@ -1,8 +1,8 @@
-module.exports = {
-  stories: ["../src/components/**/*.stories.@(js|mdx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-docs",
-  ],
-}
+module.exports = {
+  stories: ["../src/components/**/*.stories.@(js|mdx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-docs",
+  ],
+}

package/.storybook/preview.js

@@ -1,46 +1,46 @@
-import { ThemeProvider } from "vue3-styled-components"
-
-const theme = {
-  colors: {
-    primary: "#48a2d0",
-    secondary: "#fdb813",
-    tertiary: "#d5d5d5",
-    black: "#353535",
-    yellow: "#fdb813",
-    darkGray: "#818181",
-    gray1: "#666",
-    mediumGray: "#d5d5d5",
-    lightGray: "#f2f2f2",
-    white: "#fff",
-    blue: "#48a2d0",
-    red: "#ff7e7e",
-    blue1: "#e4efff",
-    grey1: "#666",
-    grey2: "#c4c4c4",
-    grey3: "#b2b9c5",
-    grey4: "#ebeef4",
-    grey5: "#fafafa",
-    green: "#99db0c",
-    disabled: "#dfe1e1",
-  },
-  screen: {
-    mobileSmall: "345px",
-    mobile: "425px",
-    mobileLarge: "530px",
-    tablet: "768px",
-    tabletLarge: "950px",
-  },
-  borderRadius: "4px",
-}
-
-export const decorators = [
-  (story) => ({
-    components: { story, ThemeProvider },
-    data: () => ({ theme }),
-    template: '<theme-provider :theme="theme"><story/> </theme-provider>',
-  }),
-]
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+import { ThemeProvider } from "vue3-styled-components"
+
+const theme = {
+  colors: {
+    primary: "#48a2d0",
+    secondary: "#fdb813",
+    tertiary: "#d5d5d5",
+    black: "#353535",
+    yellow: "#fdb813",
+    darkGray: "#818181",
+    gray1: "#666",
+    mediumGray: "#d5d5d5",
+    lightGray: "#f2f2f2",
+    white: "#fff",
+    blue: "#48a2d0",
+    red: "#ff7e7e",
+    blue1: "#e4efff",
+    grey1: "#666",
+    grey2: "#c4c4c4",
+    grey3: "#b2b9c5",
+    grey4: "#ebeef4",
+    grey5: "#fafafa",
+    green: "#99db0c",
+    disabled: "#dfe1e1",
+  },
+  screen: {
+    mobileSmall: "345px",
+    mobile: "425px",
+    mobileLarge: "530px",
+    tablet: "768px",
+    tabletLarge: "950px",
+  },
+  borderRadius: "4px",
+}
+
+export const decorators = [
+  (story) => ({
+    components: { story, ThemeProvider },
+    data: () => ({ theme }),
+    template: '<theme-provider :theme="theme"><story/> </theme-provider>',
+  }),
+]
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

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/babel.config.js

@@ -1,5 +1,5 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/package.json

@@ -1,62 +1,62 @@
-{
-  "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.30.3-EPDM-10647.0",
-  "private": false,
-  "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "dependencies": {
-    "@storybook/vue3": "7.0.18",
-    "@vue/compat": "3.3.4",
-    "@vueform/slider": "2.1.10",
-    "@vuepic/vue-datepicker": "6.1.0",
-    "click-outside-vue3": "4.0.1",
-    "html-loader": "0.5.5",
-    "postcss": "8.4.25",
-    "vue": "3.3.4",
-    "vue3-styled-components": "1.2.1",
-    "vuedraggable": "4.1.0"
-  },
-  "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
-    "@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",
-    "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": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "description": "## Project setup ``` npm install ```",
-  "main": "babel.config.js",
-  "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": "7.30.3-EPDM-8441.0",
+  "private": false,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "@storybook/vue3": "7.0.18",
+    "@vue/compat": "3.3.4",
+    "@vueform/slider": "2.1.10",
+    "@vuepic/vue-datepicker": "6.1.0",
+    "click-outside-vue3": "4.0.1",
+    "html-loader": "0.5.5",
+    "postcss": "8.4.25",
+    "vue": "3.3.4",
+    "vue3-styled-components": "1.2.1",
+    "vuedraggable": "4.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.12.16",
+    "@babel/eslint-parser": "7.12.16",
+    "@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",
+    "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": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "description": "## Project setup ``` npm install ```",
+  "main": "babel.config.js",
+  "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/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-  plugins: {
-    // Add your PostCSS plugins here
-    // Example: require('autoprefixer')
-  }
-}
+module.exports = {
+  plugins: {
+    // Add your PostCSS plugins here
+    // Example: require('autoprefixer')
+  }
+}

package/public/index.html

@@ -1,17 +1,17 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -1,109 +1,109 @@
-<template>
-  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <page-container>
-      <br />
-      <input-number
-        :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-change="changeHandler"
-        @input-focus="focusHandler"
-        @input-blur="blurHandler"
-      >
-        <template v-slot:label>
-          <div>Interactive Label 1</div>
-        </template>
-      </input-number>
-
-      <hr>
-
-      <input-number
-        :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-change="changeHandler"
-        @input-focus="focusHandler"
-        @input-blur="blurHandler"
-      >
-        <template v-slot:label>
-          <div>Interactive Label 2</div>
-        </template>
-      </input-number>
-
-      <hr>
-      <button @click="value=42">Click to set at 42</button>
-    </page-container>
-  </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'
-
-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)
-    },
-    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>
-html,
-body {
-  height: 100%;
-  margin: 0;
-}
-</style>
+<template>
+  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
+    <page-container>
+      <br />
+      <input-number
+        :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-change="changeHandler"
+        @input-focus="focusHandler"
+        @input-blur="blurHandler"
+      >
+        <template v-slot:label>
+          <div>Interactive Label 1</div>
+        </template>
+      </input-number>
+
+      <hr>
+
+      <input-number
+        :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-change="changeHandler"
+        @input-focus="focusHandler"
+        @input-blur="blurHandler"
+      >
+        <template v-slot:label>
+          <div>Interactive Label 2</div>
+        </template>
+      </input-number>
+
+      <hr>
+      <button @click="value=42">Click to set at 42</button>
+    </page-container>
+  </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'
+
+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)
+    },
+    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>
+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>