@eturnity/eturnity_reusable_components 1.1.37 → 1.1.40

package/package.json

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

package/src/App.vue

@@ -44,6 +44,8 @@
         :value="inputValue"
         @input-change="onInputChange($event)"
       />
+      <br />
+      <page-subtitle text="My Subtitle" infoText="My info Text" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -56,6 +58,7 @@ import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
 import Toggle from "@/components/inputs/toggle"
 import InputNumber from "@/components/inputs/inputNumber"
+import PageSubtitle from "@/components/pageSubtitle"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -71,6 +74,7 @@ export default {
     ThreeDots,
     Toggle,
     InputNumber,
+    PageSubtitle,
     // TableDropdown,
   },
   data() {

package/src/components/infoText/index.vue

@@ -38,7 +38,7 @@
 <script>
 // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
 //To use:
-// <info-component
+// <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
 //     borderColor="#ccc"
 //     size="20"

package/src/components/pageSubtitle/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <subtitle-text :color="color">{{ text }}</subtitle-text>
+  <subtitle-text :color="color" :hasInfoText="!!infoText">
+    <span>
+      {{ text }}
+    </span>
+    <info-text :text="infoText" v-if="!!infoText" borderColor="#ccc" />
+  </subtitle-text>
 </template>
 
 <script>
@@ -8,21 +13,29 @@
 // <page-subtitle
 //   text="My Page Subitle"
 //   color="red"
+//   infoText="My info text"
 // />
 import styled from "vue-styled-components"
+import InfoText from "../infoText"
 
-const textAttrs = { color: String }
+const textAttrs = { color: String, hasInfoText: Boolean }
 const SubtitleText = styled("div", textAttrs)`
+  display: grid;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
   margin-bottom: 30px;
   line-height: 1.5;
+  position: relative;
 `
 
 export default {
   name: "page-subtitle",
   components: {
     SubtitleText,
+    InfoText,
   },
   props: {
     text: {
@@ -31,6 +44,10 @@ export default {
     color: {
       required: false,
     },
+    infoText: {
+      required: false,
+      default: null,
+    },
   },
 }
 </script>

package/src/components/tableDropdown/index.vue

@@ -49,7 +49,9 @@
             @input-change="onCustomInputChange($event)"
           />
         </input-container>
-        <span v-else> {{ item.value }}</span>
+        <text-container v-else>
+          <span> {{ item.value }}</span>
+        </text-container>
       </component-item>
       <arrow-container class="arrow-container">
         <arrow-wrapper :showArchived="showArchived">
@@ -182,7 +184,6 @@ const ComponentItem = styled.td`
 
     span {
       padding-left: 15px;
-      vertical-align: middle;
     }
   }
 `
@@ -346,6 +347,12 @@ const CustomSubtext = styled.div`
   color: ${(props) => props.theme.colors.grey3};
 `
 
+const TextContainer = styled.div`
+  height: 100%;
+  display: grid;
+  align-items: center;
+`
+
 export default {
   name: "table-dropdown",
   components: {
@@ -371,6 +378,7 @@ export default {
     CustomName,
     CustomSubtext,
     ArrowContainer,
+    TextContainer,
   },
   props: {
     colSpan: {