@nixweb/nixloc-ui 1.14.0 → 1.15.0

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nixweb/nixloc-ui",
3
- "version": "1.14.0",
3
+ "version": "1.15.0",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -2,23 +2,48 @@
2
2
  <div class="form-group">
3
3
  <label v-if="title">
4
4
  <span class="title">{{ title }}</span>
5
- <span class="required" v-if="required">*</span>
6
- <Tip :field="field" :formName="formName" />
5
+ <span
6
+ class="required"
7
+ v-if="required"
8
+ >*</span>
9
+ <Tip
10
+ :field="field"
11
+ :formName="formName"
12
+ />
7
13
  </label>
8
14
  <div class="inner-addon right-addon">
9
- <vue-numeric :style="_style" class="form-control" v-on:keyup.enter.native="pressedEnter"
10
- :class="{ 'is-invalid': notifications.length > 0 && formDirty }" :placeholder="placeholder" :disabled="disabled"
11
- currency="R$" separator="." :minus="allowNegative" v-bind:precision="precision" v-model="valueLocal">
15
+ <vue-numeric
16
+ :style="_style"
17
+ class="form-control"
18
+ v-on:keyup.enter.native="pressedEnter"
19
+ :class="{ 'is-invalid': notifications.length > 0 && formDirty }"
20
+ :placeholder="placeholder"
21
+ :disabled="disabled"
22
+ currency="R$"
23
+ separator="."
24
+ :minus="allowNegative"
25
+ v-bind:precision="precision"
26
+ v-model="valueLocal"
27
+ >
12
28
  </vue-numeric>
13
- <span class="currency-icon" v-if="notifications.length == 0 || !formDirty">
29
+ <span
30
+ class="currency-icon"
31
+ v-if="notifications.length == 0 || !formDirty"
32
+ >
14
33
  <i class="fa-light fa-circle-dollar"></i>
15
34
  </span>
16
- <div class="required glyphicon" v-if="notifications.length > 0 && formDirty">
35
+ <div
36
+ class="required glyphicon"
37
+ v-if="notifications.length > 0 && formDirty"
38
+ >
17
39
  <i class="fas fa-exclamation-triangle"></i>
18
40
  </div>
19
41
  </div>
20
42
  <div v-if="formDirty">
21
- <div v-for="message in notifications" :key="message">
43
+ <div
44
+ v-for="message in notifications"
45
+ :key="message"
46
+ >
22
47
  <span class="invalid">{{ message }}</span>
23
48
  </div>
24
49
  </div>
@@ -67,7 +92,7 @@ export default {
67
92
  formDirty: false,
68
93
  _value: 0,
69
94
  valueLocal: 20,
70
- isPrecision: false
95
+ isPrecision: false,
71
96
  };
72
97
  },
73
98
  created() {
@@ -159,7 +184,7 @@ export default {
159
184
  right: 1px;
160
185
  top: 50%;
161
186
  transform: translateY(-50%);
162
- background: #F3F4F6;
187
+ background: #f3f4f6;
163
188
  padding: 1px 12px;
164
189
  border-radius: 0 4px 4px 0;
165
190
  }
@@ -1,21 +1,62 @@
1
1
  <template>
2
- <div>
3
- <InputDecimal v-if="!discount.discountByPercentage" :markFormDirty="markFormDirty" :title="title"
4
- :precision="precision" field="discount" :required="required" :formName="formName" _style="color:red;"
5
- :disabled="disabled" v-model="discount.discount">
6
- <div class="glyphicon margin-button">
7
- <Button _key="btnDiscount" type="danger" classIcon="fa-solid fa-brazilian-real-sign" size="small"
8
- :disabled="disabled" :clicked="change" />
2
+ <div class="discount-row">
3
+ <div class="input-wrapper">
4
+ <InputDecimal
5
+ v-if="!discount.discountByPercentage"
6
+ :markFormDirty="markFormDirty"
7
+ :title="title"
8
+ :precision="precision"
9
+ field="discount"
10
+ :required="required"
11
+ :formName="formName"
12
+ _style="color:red;"
13
+ :disabled="disabled"
14
+ v-model="discount.discount"
15
+ >
16
+ </InputDecimal>
17
+ <InputNumber
18
+ v-if="discount.discountByPercentage"
19
+ :markFormDirty="markFormDirty"
20
+ :title="title"
21
+ field="discount"
22
+ :formName="formName"
23
+ :required="false"
24
+ :disabled="disabled"
25
+ _style="color:red;"
26
+ :maxLength="5"
27
+ type="float"
28
+ v-model="discount.discount"
29
+ >
30
+ </InputNumber>
31
+ </div>
32
+ <div class="div-toggle">
33
+ <div
34
+ v-if="!discount.discountByPercentage"
35
+ class="glyphicon margin-button"
36
+ >
37
+ <Button
38
+ _key="btnDiscount"
39
+ type="danger"
40
+ classIcon="fa-solid fa-brazilian-real-sign"
41
+ size="small"
42
+ :disabled="disabled"
43
+ :clicked="change"
44
+ />
9
45
  </div>
10
- </InputDecimal>
11
- <InputNumber v-if="discount.discountByPercentage" :markFormDirty="markFormDirty" :title="title" field="discount"
12
- :formName="formName" :required="false" :disabled="disabled" _style="color:red;" :maxLength="5" type="float"
13
- v-model="discount.discount">
14
- <div class="glyphicon margin-button">
15
- <Button _key="btnDiscount" type="danger" :disabled="disabled" classIcon="fa-solid fa-percent" size="small"
16
- :clicked="change" />
46
+ <div
47
+ v-else
48
+ class="glyphicon margin-button"
49
+ >
50
+ <Button
51
+ _key="btnDiscount"
52
+ type="danger"
53
+ :disabled="disabled"
54
+ classIcon="fa-solid fa-percent"
55
+ size="small"
56
+ :clicked="change"
57
+ />
17
58
  </div>
18
- </InputNumber>
59
+ </div>
19
60
  </div>
20
61
  </template>
21
62
 
@@ -33,7 +74,15 @@ export default {
33
74
  InputDecimal,
34
75
  Button,
35
76
  },
36
- props: ["formName", "disabled", "_style", "required", "precision", "markFormDirty", "value"],
77
+ props: [
78
+ "formName",
79
+ "disabled",
80
+ "_style",
81
+ "required",
82
+ "precision",
83
+ "markFormDirty",
84
+ "value",
85
+ ],
37
86
  data() {
38
87
  return {
39
88
  title: "Desconto em R$",
@@ -57,7 +106,7 @@ export default {
57
106
  titleName() {
58
107
  if (this.discount.discountByPercentage) this.title = "Desconto em %";
59
108
  if (!this.discount.discountByPercentage) this.title = "Desconto em R$";
60
- }
109
+ },
61
110
  },
62
111
  watch: {
63
112
  discount: {
@@ -75,4 +124,24 @@ export default {
75
124
  },
76
125
  },
77
126
  };
78
- </script>
127
+ </script>
128
+
129
+ <style scoped>
130
+ .discount-row {
131
+ position: relative;
132
+ width: 100%;
133
+ }
134
+
135
+ .input-wrapper {
136
+ display: inline-block;
137
+ width: calc(100% - 50px);
138
+ vertical-align: top;
139
+ }
140
+
141
+ .div-toggle {
142
+ display: inline-block;
143
+ vertical-align: top;
144
+ margin-left: 8px;
145
+ margin-top: 38px;
146
+ }
147
+ </style>