@eturnity/eturnity_reusable_components 1.1.56 → 1.1.59

package/README.md

@@ -15,7 +15,7 @@ npm run dev
 ### To use storybook
 
 ```
-ToDo
+npm run storybook
 ```
 
 ### To publish a new version

package/package.json

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

package/src/App.vue

@@ -46,6 +46,7 @@
       />
       <br />
       <page-subtitle text="My Subtitle" infoText="My info Text" />
+      <spinner size="30px" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -59,6 +60,7 @@ import ThreeDots from "@/components/threeDots"
 import Toggle from "@/components/inputs/toggle"
 import InputNumber from "@/components/inputs/inputNumber"
 import PageSubtitle from "@/components/pageSubtitle"
+import Spinner from "@/components/spinner"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -75,6 +77,7 @@ export default {
     Toggle,
     InputNumber,
     PageSubtitle,
+    Spinner,
     // TableDropdown,
   },
   data() {

package/src/components/spinner/index.vue

@@ -1,16 +1,23 @@
 <template>
   <spinner-container v-if="fullWidth">
     <container>
-      <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
+      <spinner-wrapper
+        :size="size"
+        :src="require('../../assets/icons/black_spinner.svg')"
+      />
     </container>
   </spinner-container>
   <container v-else>
-    <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
+    <spinner-wrapper
+      :size="size"
+      :src="require('../../assets/icons/black_spinner.svg')"
+    />
   </container>
 </template>
 
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+// <spinner size="30px" />
 import styled from "vue-styled-components"
 
 const SpinnerContainer = styled.div`
@@ -32,8 +39,9 @@ const Container = styled.div`
   justify-items: center;
 `
 
-const SpinnerWrapper = styled.img`
-  width: 60px;
+const spinnerAttrs = { size: String }
+const SpinnerWrapper = styled("img", spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : "60px")};
 `
 
 export default {
@@ -48,6 +56,10 @@ export default {
       required: false,
       default: false,
     },
+    size: {
+      required: false,
+      default: null,
+    },
   },
 }
 </script>

package/src/components/tableDropdown/index.vue

@@ -41,9 +41,13 @@
         </no-template>
         <input-container
           v-if="item.type === 'input'"
-          @click.stop="onInputClick()"
+          @click.native.stop="onInputClick()"
         >
+          <text-container v-if="customInputDisabled" class="input-placeholder">
+            <span> {{ item.value }}</span>
+          </text-container>
           <input-text
+            v-else
             class="inputField"
             :value="item.value"
             :noBorder="true"
@@ -181,6 +185,11 @@ const DropdownRow = styled("div", rowAttrs)`
   input {
     cursor: ${(props) => (!props.isOpen ? "pointer !important" : "inherit")};
   }
+
+  .input-placeholder {
+    height: 25px;
+    padding-left: 12px;
+  }
 `
 
 const ComponentItem = styled.td`

package/src/components/tables/mainTable/index.vue

@@ -84,6 +84,7 @@ const TableContainer = styled.table`
         cursor: pointer;
 
         .arrow-container,
+        .input-placeholder,
         .table-dropdown-item {
           background-color: ${(props) => props.theme.colors.grey5};
         }