@eturnity/eturnity_reusable_components 1.1.5 → 1.1.8

package/package.json

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

package/src/App.vue

@@ -21,9 +21,7 @@
               :optionItems="itemOptions"
               :optionsDisplay="['display_name', 'company_item_number', 'model']"
             /> -->
-            <td>
-              <search-input />
-            </td>
+            <td>Test</td>
             <div class="icons-container">
               <three-dots :options="listOptions" :isLoading="false" />
             </div>
@@ -50,7 +48,6 @@ import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
 import Toggle from "@/components/inputs/toggle"
-import SearchInput from "@/components/inputs/searchInput"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -65,7 +62,6 @@ export default {
     MainTable,
     ThreeDots,
     Toggle,
-    SearchInput,
     // TableDropdown,
   },
   data() {
@@ -84,20 +80,7 @@ export default {
         {
           name: "Option 1",
           value: "option_1",
-          children: [
-            {
-              name: "Option 1 Child",
-              value: "option_1_child",
-            },
-            {
-              name: "Option 2 Child",
-              value: "option_2_child",
-            },
-            {
-              name: "Option 3 Child",
-              value: "option_3_child",
-            },
-          ],
+          disabled: true,
         },
         {
           name: "Option 2",
@@ -106,20 +89,6 @@ export default {
         {
           name: "Option 3",
           value: "option_3",
-          children: [
-            {
-              name: "Option 3 Child",
-              value: "option_3_child",
-            },
-            {
-              name: "Option 4 Child",
-              value: "option_4_child",
-            },
-            {
-              name: "Option 5 Child",
-              value: "option_5_child",
-            },
-          ],
         },
         {
           name: "Option 4",

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

@@ -17,6 +17,7 @@
         :rows="rowHeight"
         :value="value"
         :disabled="isDisabled"
+        :fontSize="fontSize"
         @input="onChangeHandler"
       />
     </input-wrapper>
@@ -56,7 +57,7 @@ const LabelWrapper = styled.div`
   margin-bottom: 12px;
 `
 
-const inputProps = { isError: Boolean, disabled: Boolean }
+const inputProps = { isError: Boolean, disabled: Boolean, fontSize: String }
 const InputContainer = styled("textarea", inputProps)`
   border: ${(props) =>
     props.isError
@@ -65,7 +66,7 @@ const InputContainer = styled("textarea", inputProps)`
   padding: ${(props) =>
     props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
   border-radius: 4px;
-  font-size: 16px;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
   color: ${(props) => props.theme.colors.black};
   width: 100%;
   max-width: 100%;
@@ -99,6 +100,10 @@ const ErrorMessage = styled.div`
   bottom: -18px;
 `
 
+const InputLabel = styled.div`
+  font-weight: bold;
+`
+
 export default {
   name: "text-area-input",
   components: {
@@ -108,6 +113,7 @@ export default {
     ErrorMessage,
     InfoText,
     LabelWrapper,
+    InputLabel,
   },
   props: {
     placeholder: {
@@ -146,6 +152,10 @@ export default {
     label: {
       required: false,
     },
+    fontSize: {
+      required: false,
+      default: "16px",
+    },
   },
   methods: {
     onChangeHandler($event) {

package/src/components/tableDropdown/index.vue

@@ -262,14 +262,14 @@ const TemplateLink = styled.div`
 
 const InputContainer = styled.div`
   .inputField input {
-    padding: 0 10px;
+    padding: 0;
 
     &:focus {
-      padding: 5px 10px;
+      padding: 5px 0px;
     }
 
     &:hover {
-      padding: 0 10px !important;
+      padding: 5px 0 !important;
     }
   }
 `

package/src/components/threeDots/index.vue

@@ -43,6 +43,7 @@
             onSelect({ item: item, hasChildren: hasChildren(item) })
           "
           @mouseover="onItemHover({ index, item })"
+          :isDisabled="item.disabled"
         >
           <arrow-left :hasChildren="hasChildren(item)" />
           <span>
@@ -117,25 +118,27 @@ const PageContainer = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
-  width: 30px;
-  height: 30px;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
-  }
 `
 
 const ButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: 5px;
   cursor: pointer;
+  width: 20px;
+  height: 20px;
 
   div {
     // This is the dot color
     background-color: #263238;
   }
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
+  }
 `
 
 const DotItem = styled.div`
@@ -179,9 +182,10 @@ const OptionsContainer = styled.div`
   height: max-content;
 `
 
-const OptionItem = styled.div`
+const optionAttrs = { isDisabled: Boolean }
+const OptionItem = styled("div", optionAttrs)`
   padding: 12px;
-  cursor: pointer;
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 13px;
   position: relative;
 
@@ -288,7 +292,7 @@ export default {
         item.children && item.children.length ? item.children : null
     },
     onSelect({ item, hasChildren }) {
-      if (hasChildren) {
+      if (hasChildren || item.disabled) {
         return
       }
       this.$emit("on-select", item)