@eturnity/eturnity_reusable_components 1.1.1 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/inputs/inputText/index.vue +14 -3
  3. package/src/components/inputs/textAreaInput/index.vue +47 -3
  4. package/src/components/tableDropdown/index.vue +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.1.1",
3
+ "version": "1.1.4",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/components/inputs/inputText/index.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <container>
3
- <input-wrapper>
3
+ <input-wrapper :alignItems="alignItems">
4
4
  <label-wrapper v-if="label">
5
5
  <input-label>{{ label }}</input-label>
6
6
  <info-text
@@ -85,8 +85,14 @@ const InputContainer = styled("input", inputProps)`
85
85
  }
86
86
  `
87
87
 
88
- const InputWrapper = styled.span`
89
- position: relative;,
88
+ const inputAttrs = { alignItems: String }
89
+ const InputWrapper = styled("div", inputAttrs)`
90
+ position: relative;
91
+ display: grid;
92
+ align-items: center;
93
+ gap: 14px;
94
+ grid-template-columns: ${(props) =>
95
+ props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
90
96
  `
91
97
 
92
98
  const ErrorMessage = styled.div`
@@ -108,6 +114,7 @@ export default {
108
114
  // infoTextAlign="right" // left by default
109
115
  // infoTextMessage="My info message"
110
116
  // label="Question 5"
117
+ // alignItems="horizontal" // horizontal, vertical
111
118
  // />
112
119
  name: "input-text",
113
120
  components: {
@@ -124,6 +131,10 @@ export default {
124
131
  required: false,
125
132
  default: "",
126
133
  },
134
+ alignItems: {
135
+ required: false,
136
+ default: "horizontal",
137
+ },
127
138
  isError: {
128
139
  required: false,
129
140
  default: false,
package/src/components/inputs/textAreaInput/index.vue CHANGED
@@ -1,6 +1,16 @@
1
1
  <template>
2
2
  <container>
3
- <input-wrapper>
3
+ <input-wrapper :alignItems="alignItems">
4
+ <label-wrapper>
5
+ <input-label>{{ label }}</input-label>
6
+ <info-text
7
+ v-if="infoTextMessage"
8
+ :text="infoTextMessage"
9
+ borderColor="#ccc"
10
+ size="16"
11
+ :alignText="infoTextAlign"
12
+ />
13
+ </label-wrapper>
4
14
  <input-container
5
15
  :placeholder="placeholder"
6
16
  :isError="isError"
@@ -24,8 +34,13 @@
24
34
  // rowHeight="4" //optional
25
35
  // :isError="false"
26
36
  // :errorText="$gettext('field_required')"
37
+ // infoTextAlign="right" // left by default
38
+ // infoTextMessage="My info message"
39
+ // label="Question 5"
40
+ // alignItems="horizontal" // horizontal, vertical
27
41
  // />
28
42
  import styled from "vue-styled-components"
43
+ import InfoText from "../../infoText"
29
44
 
30
45
  const Container = styled.div`
31
46
  width: 100%;
@@ -33,6 +48,14 @@ const Container = styled.div`
33
48
  margin-bottom: 20px;
34
49
  `
35
50
 
51
+ const LabelWrapper = styled.div`
52
+ display: inline-grid;
53
+ grid-template-columns: auto 1fr;
54
+ grid-gap: 12px;
55
+ align-items: center;
56
+ margin-bottom: 12px;
57
+ `
58
+
36
59
  const inputProps = { isError: Boolean, disabled: Boolean }
37
60
  const InputContainer = styled("textarea", inputProps)`
38
61
  border: ${(props) =>
@@ -59,8 +82,14 @@ const InputContainer = styled("textarea", inputProps)`
59
82
  }
60
83
  `
61
84
 
62
- const InputWrapper = styled.span`
63
- position: relative;,
85
+ const inputAttrs = { alignItems: String }
86
+ const InputWrapper = styled("div", inputAttrs)`
87
+ position: relative;
88
+ display: grid;
89
+ align-items: center;
90
+ gap: 14px;
91
+ grid-template-columns: ${(props) =>
92
+ props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
64
93
  `
65
94
 
66
95
  const ErrorMessage = styled.div`
@@ -77,6 +106,8 @@ export default {
77
106
  InputContainer,
78
107
  InputWrapper,
79
108
  ErrorMessage,
109
+ InfoText,
110
+ LabelWrapper,
80
111
  },
81
112
  props: {
82
113
  placeholder: {
@@ -102,6 +133,19 @@ export default {
102
133
  required: false,
103
134
  default: false,
104
135
  },
136
+ alignItems: {
137
+ required: false,
138
+ default: "horizontal",
139
+ },
140
+ infoTextMessage: {
141
+ required: false,
142
+ },
143
+ infoTextAlign: {
144
+ required: false,
145
+ },
146
+ label: {
147
+ required: false,
148
+ },
105
149
  },
106
150
  methods: {
107
151
  onChangeHandler($event) {
package/src/components/tableDropdown/index.vue CHANGED
@@ -52,11 +52,11 @@
52
52
  <arrow-down
53
53
  v-if="!isOpen"
54
54
  class="arrow-dropdown"
55
- :src="require('../../assets/images/collapse_arrow_icon.svg')"
55
+ :src="require('../../assets/icons/collapse_arrow_icon.svg')"
56
56
  />
57
57
  <arrow-up
58
58
  v-else
59
- :src="require('../../assets/images/collapse_arrow_icon.svg')"
59
+ :src="require('../../assets/icons/collapse_arrow_icon.svg')"
60
60
  />
61
61
  </component-container>
62
62
  <options-container
@@ -111,7 +111,7 @@
111
111
  v-if="inputText.length && allowFreeInputs"
112
112
  @click="onCustomNameClick()"
113
113
  >
114
- <custom-name>{{ getCustomName }}!!</custom-name>
114
+ <custom-name>{{ getCustomName }}</custom-name>
115
115
  <custom-subtext>({{ $gettext("custom_component") }})</custom-subtext>
116
116
  </custom-container>
117
117
  </options-container>