@eturnity/eturnity_reusable_components 7.12.2 → 7.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.12.2",
+  "version": "7.12.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -14,87 +14,42 @@
         textAlign="left"
         :isInteractive="true"
         :interactionStep="1"
-        @on-input="value = $event"
+        @on-input="inputHandler"
         @input-change="changeHandler"
         @input-focus="focusHandler"
         @input-blur="blurHandler"
       >
         <template v-slot:label>
-          <div>Interactive Label</div>
+          <div>Interactive Label 1</div>
         </template>
       </input-number>
 
-      <dropdown-component openingMode="hover" gap="30px">
-        <template #trigger><i>Click Me</i></template>
-        <template #dropdown>
-          <div>
-            <a href="">test1</a>
-            <button href="">test2</button>
-            <br />
-            <p>Text</p>
-          </div>
-        </template>
-      </dropdown-component>
-
-      <videoThumbnail
-        src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-        playIconColor="red"
-        playIconSize="20px"
-        width="400px"
-        height="600px"
-      />
+      <hr>
 
-      <SwitchField
-        @on-switch-change="onInputChange($event)"
-        :options="[
-          { value: 0, content: 'zero' },
-          { value: 1, content: 'one' },
-          { value: 2, content: 'two' }
-        ]"
-        :value="value"
-        label="label"
-        toggleColor="red"
-        size="large"
-        backgroundColor="blue"
-        labelAlign="left"
-        fontColor="black"
-        :disabled="false"
-      />
-      <icon
-        name="opacity"
-        color="red"
-        hoveredColor="blue"
-        size="60px"
-        cursor="default"
-        isStriked="true"
-      />
-      <Select
+      <input-number
         :value="value"
-        selectWidth="100%"
-        optionWidth="50%"
-        label="that is a label"
-        alignItems="vertical"
-        colorMode="dark"
-        isSearchable="true"
-        @input-change="value = $event"
-        @search-change="searchValue = $event"
+        :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 #selector="{ selectedValue }">
-          value selected: {{ selectedValue }}
-        </template>
-        <template #dropdown>
-          <Option
-            v-for="opt in filteredOptionList"
-            :key="opt.id"
-            :value="opt.val"
-            >{{ opt.lookFor }}
-          </Option>
+        <template v-slot:label>
+          <div>Interactive Label 2</div>
         </template>
-      </Select>
-
-      {{ filteredOptionList }}
+      </input-number>
 
-      <iconCollection color="red" />
+      <hr>
+      <button @click="value=42">Click to set at 42</button>
     </page-container>
   </ThemeProvider>
 </template>
@@ -104,64 +59,24 @@ import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
-import Select from '@/components/inputs/select'
-import SwitchField from '@/components/inputs/switchField'
-import Option from '@/components/inputs/select/option'
-import iconCollection from '@/components/icon/iconCollection'
-import dropdownComponent from '@/components/dropdown'
-import videoThumbnail from '@/components/videoThumbnail'
-import icon from '@/components/icon'
-// import infoCard from '@/components/infoCard'
-// import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
-// const RowContainer = styled.div`
-//   display: inline-flex;
-//   gap: 10px;
-//   flex-wrap: wrap;
-// `
-
 export default {
   name: 'App',
   components: {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    Option,
-    Select,
-    SwitchField,
-    iconCollection,
-    dropdownComponent,
-    videoThumbnail,
-    icon,
   },
   data() {
     return {
       value: 42,
-      value2: 42,
-      companyName: 'toto',
-      optionList: [
-        { id: 'a', val: 'A', lookFor: 'babababa' },
-        { id: 'b', val: 'B', lookFor: 'abab' },
-        { id: 'c', val: 'C', lookFor: 'ccc' },
-        { id: 'd', val: 'D', lookFor: 'ddd' },
-        { id: 'e', val: 'E', lookFor: 'dddee' },
-        { id: 'f', val: 'F', lookFor: 'ddfff' },
-        { id: 'g', val: 'G', lookFor: 'dggg' },
-        { id: 'h', val: 'H', lookFor: 'dddhhh' }
-      ],
-      searchValue: ''
     }
   },
   computed: {
-    filteredOptionList() {
-      return this.optionList.filter((opt) =>
-        opt.lookFor.includes(this.searchValue)
-      )
-    }
   },
   methods: {
     blurHandler(e) {
@@ -174,64 +89,12 @@ export default {
       console.log('focus', e)
     },
     inputHandler(e) {
-      this.value2 = e
       console.log('input', e)
-    },
-    keydownHandler(e) {
-      console.log('test', e)
+      //this.value = e
+      setTimeout(()=>{this.value = e},1000)
     },
     getTheme() {
       return theme
-    },
-    onInputChange(event) {
-      this.inputValue = event
-    },
-    onInputBlur(event) {
-      console.log(event)
-    },
-    isDropdownOpen() {
-      return this.dropdownOpen
-    },
-    onClickButton() {
-      console.log('Test')
-    },
-    toggleDropdownOpen() {
-      this.dropdownOpen = !this.dropdownOpen
-    },
-    getDropdownValues() {
-      let items = []
-      items = [
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'display_name'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'company_item_number'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'model'
-          })
-        }
-      ]
-      return items
-    },
-    getComponentInfo({ row, value }) {
-      let item
-      if (row.selectedValue && row.selectedValue[value]) {
-        item = row.selectedValue[value]
-      } else if (row[value]) {
-        item = row[value]
-      } else {
-        item = '-'
-      }
-      return item
     }
   }
 }

package/src/components/errorMessage/index.vue

@@ -9,9 +9,7 @@
 <script>
 // import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
 //To use:
-// <error-message
-//     alignText="right" // default is left
-// />
+// <error-message />
 
 import styled from 'vue-styled-components'
 

package/src/components/infoText/index.vue

@@ -10,7 +10,6 @@
       </icon-img>
       <text-overlay
         v-if="showInfo"
-        :borderColor="borderColor"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
@@ -27,7 +26,6 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
 //     size="20"
 //     alignArrow="right" // which side the arrow should be on
 // />
@@ -37,7 +35,6 @@ import icon from '../icon'
 
 const textAttrs = {
   iconSize: String,
-  borderColor: String,
   alignArrow: String,
   width: String,
   halfComputedTextInfoWidth: Number
@@ -112,10 +109,6 @@ export default {
     text: {
       required: false
     },
-    borderColor: {
-      required: false,
-      default: null
-    },
     size: {
       required: false,
       default: '14px'
@@ -157,11 +150,7 @@ export default {
   },
   computed: {
     iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
+      return theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

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

@@ -16,12 +16,10 @@
       <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
       </label-text>
-      
+
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
-        borderColor="#ccc"
-        size="14px"
         :alignArrow="labelInfoAlign"
       />
     </label-wrapper>
@@ -100,7 +98,9 @@
 //     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
-// />
+// >
+//<template name=label><img>....</template>
+//</inputNumber>
 import styled from 'vue-styled-components'
 import {
   stringToNumber,
@@ -469,7 +469,7 @@ export default {
     }
   },
   methods: {
-    onEnterPress(event){
+    onEnterPress(){
       this.$emit('on-enter-click')
       this.$refs.inputField1.$el.blur()
     },
@@ -549,6 +549,9 @@ export default {
       return array
     },
     onInput(value) {
+      // if(!this.isFocused){
+      //   return
+      // }
       if (this.isBlurred) {
         this.isBlurred = false
         return
@@ -655,7 +658,7 @@ export default {
       e.preventDefault()
       let value = parseFloat(this.value || 0)
       value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-      this.$emit('on-input', value)
+      this.$emit('on-input-drag', value)
 
       this.textInput = numberToString({
         value: value && value.length ? value : this.minNumber,

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

@@ -17,7 +17,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
           :alignArrow="infoTextAlign"
         />

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

@@ -22,9 +22,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="infoTextSize"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
@@ -327,9 +325,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     selectWidth: {
       type: String,
       required: false,

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

@@ -17,9 +17,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -51,9 +48,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -207,9 +201,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     colorMode: {
       required: false,
       default: 'light'

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -22,7 +22,6 @@ const Template = (args, { argTypes }) => ({
   //     rowHeight="4" //optional
   //     :isError="false"
   //     :errorText="$gettext('field_required')"
-  //     infoTextAlign="right" // left by default
   //     infoTextMessage="My info message"
   //     label="Question 5"
   //     alignItems="horizontal" // horizontal, vertical
@@ -37,7 +36,6 @@ Default.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -52,7 +50,6 @@ Disabled.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -67,7 +64,6 @@ Error.args = {
   rowHeight: "2",
   isError: true,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -82,7 +78,6 @@ WithLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -97,7 +92,6 @@ HorizontalLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -112,7 +106,6 @@ LargerTextArea.args = {
   rowHeight: "5",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -127,7 +120,6 @@ LargerFontSize.args = {
   fontSize: "24px",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",

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

@@ -11,9 +11,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           size="16px"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-container
@@ -47,7 +45,6 @@
 //     rowHeight="4" //optional
 //     :isError="false"
 //     :errorText="$gettext('field_required')"
-//     infoTextAlign="right" // left by default
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
@@ -167,9 +164,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },

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

@@ -14,9 +14,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -50,9 +47,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -72,7 +66,6 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
-//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
 //   data-id="test_data_id"
 // />
@@ -193,7 +186,7 @@ const ToggleDot = styled('span', toggleProps)`
       : props.size === 'small'
       ? '10px'
       : '14px'};
-  left: 3px
+  left: 3px;
   bottom: ${(props) =>
     props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
@@ -278,9 +271,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     dataId: {
       type: String,
       default: ''

package/src/components/label/index.vue

@@ -13,7 +13,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
           :alignArrow="infoTextAlign"
         />

package/src/components/navigationTabs/index.vue

@@ -13,8 +13,6 @@
             <info-text
                 v-if="tab['labelInfoText']"
                 :text="tab['labelInfoText']"
-                borderColor="#ccc"
-                size="14px"
                 :alignArrow="tab['labelInfoAlign']"
             />
         </Option>
@@ -57,7 +55,7 @@ const Option = styled('div',TabAttr)`
     justify-content: center;
     flex-direction: row;
     gap: 10px;
-    color: ${props=>props.textColor ? 
+    color: ${props=>props.textColor ?
         props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
         props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `

package/src/components/pageSubtitle/index.vue

@@ -4,11 +4,8 @@
       {{ text }}
     </span>
     <info-text
-      :text="infoText"
       v-if="!!infoText"
-      size="14px"
-      borderColor="#ccc"
-      :alignText="alignInfoText"
+      :text="infoText"
     />
   </subtitle-text>
 </template>
@@ -55,10 +52,6 @@ export default {
       required: false,
       default: null,
     },
-    alignInfoText: {
-      required: false,
-      default: "left",
-    },
     marginBottom: {
       required: false,
       default: "30px",

package/src/components/pageTitle/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <flex>
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+  <title-wrap :hasInfoText="!!infoText">
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
+      {{ text }}
+    </title-text>
     <info-text
-        v-if="infoText"
-        :text="infoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignArrow="infoAlign"
-      />
-  </flex>
+      v-if="!!infoText"
+      :text="infoText"
+      :alignArrow="infoAlign"
+    />
+  </title-wrap>
 </template>
 
 <script>
@@ -19,28 +19,32 @@
 //   color="red"
 // />
 import styled from "vue-styled-components"
-import InfoText from '../infoText'
-const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled("div", textAttrs)`
+import InfoText from "../infoText"
+
+const wrapAttrs = { hasInfoText: Boolean }
+const TitleWrap = styled("div", wrapAttrs)`
+  display: grid;
+  align-items: center;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+  margin-bottom: 20px;
+`
+
+const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
-  
-`
-const flex = styled("div", textAttrs)`
-  display: flex;
-  gap:10px;
-  margin-bottom: 20px;
-  align-items: center;
 `
 
 export default {
   name: "page-title",
   components: {
     TitleText,
-    InfoText,
-    flex
+    TitleWrap,
+    InfoText
   },
   props: {
     text: {
@@ -59,10 +63,11 @@ export default {
     },
     infoText: {
       required: false,
+      default: null,
     },
     infoAlign: {
       required: false,
-    },
+    }
   },
 }
 </script>