@tagplus/components 5.2.7 → 5.2.9

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 (93) hide show
  1. package/dist/tp.common.js +1 -1
  2. package/dist/tp.common.js.map +1 -1
  3. package/dist/{tp.common.lang-tp-en-js.js → tp.common.lang-en-js.js} +2 -2
  4. package/dist/tp.common.lang-en-js.js.map +1 -0
  5. package/dist/tp.umd.js +1 -1
  6. package/dist/tp.umd.js.map +1 -1
  7. package/dist/{tp.umd.lang-tp-en-js.js → tp.umd.lang-en-js.js} +2 -2
  8. package/dist/tp.umd.lang-en-js.js.map +1 -0
  9. package/dist/tp.umd.min.js +1 -1
  10. package/dist/tp.umd.min.js.map +1 -1
  11. package/dist/{tp.umd.min.lang-tp-en-js.js → tp.umd.min.lang-en-js.js} +2 -2
  12. package/dist/tp.umd.min.lang-en-js.js.map +1 -0
  13. package/package.json +2 -7
  14. package/dist/tp.common.lang-tp-en-js.js.map +0 -1
  15. package/dist/tp.umd.lang-tp-en-js.js.map +0 -1
  16. package/dist/tp.umd.min.lang-tp-en-js.js.map +0 -1
  17. package/src/assets/scss/_fonts.scss +0 -28
  18. package/src/assets/scss/_functions.scss +0 -22
  19. package/src/assets/scss/_helpers.scss +0 -116
  20. package/src/assets/scss/_mixins.scss +0 -69
  21. package/src/assets/scss/_overrides.scss +0 -22
  22. package/src/assets/scss/_resass.scss +0 -92
  23. package/src/assets/scss/_variables.scss +0 -26
  24. package/src/assets/scss/index.scss +0 -8
  25. package/src/components/Autosuggest/Autosuggest.vue +0 -362
  26. package/src/components/Autosuggest/Multisuggest.vue +0 -22
  27. package/src/components/Autosuggest/autosuggest-props.js +0 -210
  28. package/src/components/Autosuggest/autosuggest-style.scss +0 -127
  29. package/src/components/Autosuggest/core.js +0 -63
  30. package/src/components/Autosuggest/index.js +0 -5
  31. package/src/components/Autosuggest/multisuggest-props.js +0 -9
  32. package/src/components/Autosuggest/option.vue +0 -136
  33. package/src/components/Autosuggest/select-dropdown.vue +0 -64
  34. package/src/components/Autosuggest/useOption.js +0 -120
  35. package/src/components/Autosuggest/useSelect.js +0 -1133
  36. package/src/components/AutosuggestTest.vue +0 -56
  37. package/src/components/CardExemplo.vue +0 -49
  38. package/src/components/CodeSample.vue +0 -78
  39. package/src/components/Inline/Inline.vue +0 -141
  40. package/src/components/Inline/index.js +0 -3
  41. package/src/components/InputNumber/InputNumber.vue +0 -381
  42. package/src/components/InputNumber/index.js +0 -3
  43. package/src/components/InputNumber/input-number.js +0 -135
  44. package/src/components/Loader/Loader.vue +0 -306
  45. package/src/components/Loader/animations.scss +0 -81
  46. package/src/components/Loader/index.js +0 -3
  47. package/src/components/Money/Money.vue +0 -73
  48. package/src/components/Money/index.js +0 -3
  49. package/src/components/Multisuggest/index.js +0 -2
  50. package/src/components/MultisuggestTest.vue +0 -56
  51. package/src/components/OptionsList/OptionsList.vue +0 -62
  52. package/src/components/OptionsList/index.js +0 -3
  53. package/src/components/OptionsListItem/OptionsListItem.vue +0 -195
  54. package/src/components/OptionsListItem/index.js +0 -3
  55. package/src/components/Percent/Percent.vue +0 -75
  56. package/src/components/Percent/index.js +0 -3
  57. package/src/components/Skeleton/Skeleton.vue +0 -142
  58. package/src/components/Skeleton/index.js +0 -3
  59. package/src/components/Step/Step.vue +0 -237
  60. package/src/components/Step/index.js +0 -3
  61. package/src/components/Steps/Steps.vue +0 -15
  62. package/src/components/Steps/index.js +0 -3
  63. package/src/components/TesteToCurrency.vue +0 -171
  64. package/src/components/Tip/Tip.vue +0 -210
  65. package/src/components/Tip/index.js +0 -3
  66. package/src/components/ValueSelector.vue +0 -60
  67. package/src/components/autosuggestMixin.js +0 -301
  68. package/src/components/index.js +0 -34
  69. package/src/locale/i18nCreator.js +0 -169
  70. package/src/locale/lang/en.js +0 -35
  71. package/src/locale/lang/pt-br.js +0 -35
  72. package/src/main.js +0 -21
  73. package/src/mixins/floatFormatter.js +0 -49
  74. package/src/plugins/currency.js +0 -100
  75. package/src/utils/browser.js +0 -6
  76. package/src/utils/constants.js +0 -3
  77. package/src/utils/error.js +0 -22
  78. package/src/utils/filters.js +0 -71
  79. package/src/utils/helpers.js +0 -41
  80. package/src/utils/i18n.js +0 -2
  81. package/src/utils/icon.js +0 -35
  82. package/src/utils/index.js +0 -20
  83. package/src/utils/objects.js +0 -17
  84. package/src/utils/runtime.js +0 -86
  85. package/src/utils/scroll.js +0 -100
  86. package/src/utils/strings.js +0 -17
  87. package/src/utils/style.js +0 -80
  88. package/src/utils/types.js +0 -39
  89. package/src/utils/use-derived-namespace.js +0 -112
  90. package/src/utils/use-form-common-props.js +0 -41
  91. package/src/utils/use-form-item.js +0 -80
  92. package/src/utils/use-id.js +0 -40
  93. package/src/utils/use-input.js +0 -33
@@ -1,237 +0,0 @@
1
- <template>
2
- <div
3
- class="el-step"
4
- :style="style"
5
- :class="[
6
- !isSimple && `is-${$parent.direction}`,
7
- isSimple && 'is-simple',
8
- isLast && !space && !isCenter && 'is-flex',
9
- isCenter && !isVertical && !isSimple && 'is-center',
10
- ]"
11
- >
12
- <!-- icon & line -->
13
- <div
14
- class="el-step__head"
15
- :class="`is-${currentStatus === 'active' ? 'finish' : currentStatus}`"
16
- >
17
- <div
18
- class="el-step__line"
19
- :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
20
- >
21
- <em class="el-step__line-inner" :style="lineStyle" />
22
-
23
- </div>
24
-
25
- <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
26
- <slot
27
- v-if="currentStatus !== 'success' && currentStatus !== 'error'"
28
- name="icon"
29
- >
30
- <em v-if="icon" class="el-step__icon-inner" :class="[icon]" />
31
- <div v-if="!icon && !isSimple" class="el-step__icon-inner">
32
- {{ index + 1 }}
33
- </div>
34
- </slot>
35
- <em
36
- v-else
37
- :class="[
38
- 'el-icon-' + (currentStatus === 'success' ? 'check' : 'close'),
39
- ]"
40
- class="el-step__icon-inner is-status"
41
- />
42
- </div>
43
- </div>
44
- <!-- title & description -->
45
- <div class="el-step__main">
46
- <div ref="title" class="el-step__title" :class="['is-' + currentStatus]">
47
- <slot name="title">
48
- {{ title }}
49
- </slot>
50
- </div>
51
- <div v-if="isSimple" class="el-step__arrow" />
52
- <div v-else class="el-step__description" :class="['is-' + currentStatus]">
53
- <slot name="description">
54
- {{ description }}
55
- </slot>
56
- </div>
57
- </div>
58
- </div>
59
- </template>
60
-
61
- <script>
62
- import { defineComponent } from 'vue'
63
-
64
- export default defineComponent({
65
- name: 'TpStep',
66
-
67
- props: {
68
- title: {
69
- type: String,
70
- default: ''
71
- },
72
- icon: {
73
- type: String,
74
- default: ''
75
- },
76
- description: {
77
- type: String,
78
- default: ''
79
- },
80
- status: {
81
- type: String,
82
- default: ''
83
- }
84
- },
85
-
86
- data () {
87
- return {
88
- index: -1,
89
- lineStyle: {},
90
- internalStatus: ''
91
- }
92
- },
93
-
94
- computed: {
95
- currentStatus () {
96
- return this.internalStatus
97
- },
98
- prevStatus () {
99
- const prevStep = this.$parent.steps[this.index - 1]
100
-
101
- return prevStep ? prevStep.currentStatus : 'wait'
102
- },
103
- isCenter () {
104
- return this.$parent.alignCenter
105
- },
106
- isVertical () {
107
- return this.$parent.direction === 'vertical'
108
- },
109
- isSimple () {
110
- return this.$parent.simple
111
- },
112
- isLast () {
113
- const parent = this.$parent
114
-
115
- return parent.steps[parent.steps.length - 1] === this
116
- },
117
- stepsCount () {
118
- return this.$parent.steps.length
119
- },
120
- space () {
121
- const {
122
- isSimple,
123
- $parent: { space }
124
- } = this
125
-
126
- return isSimple ? '' : space
127
- },
128
- style: function () {
129
- const style = {}
130
- const parent = this.$parent
131
- const len = parent.steps.length
132
-
133
- const space =
134
- typeof this.space === 'number'
135
- ? `${this.space}px`
136
- : this.space
137
- ? this.space
138
- : `${100 / (len - (this.isCenter ? 0 : 1))}%`
139
-
140
- style.flexBasis = space
141
-
142
- if (this.isVertical) return style
143
-
144
- if (this.isLast) {
145
- style.maxWidth = `${100 / this.stepsCount}%`
146
- } else {
147
- style.marginRight = `${-this.$parent.stepOffset}px`
148
- }
149
-
150
- return style
151
- }
152
- },
153
-
154
- watch: {
155
- status () {
156
- this.updateStatus(this.$parent.active)
157
- this.internalStatus = this.status
158
- }
159
- },
160
-
161
- beforeCreate () {
162
- this.$parent.steps.push(this)
163
- },
164
-
165
- beforeUnmount () {
166
- const steps = this.$parent.steps
167
- const index = steps.indexOf(this)
168
-
169
- if (index >= 0) {
170
- steps.splice(index, 1)
171
- }
172
- },
173
-
174
- mounted () {
175
- const unwatch = this.$watch('index', () => {
176
- this.$watch('$parent.active', this.updateStatus, { immediate: true })
177
- this.$watch(
178
- '$parent.processStatus',
179
- () => {
180
- const activeIndex = this.$parent.active
181
-
182
- this.updateStatus(activeIndex)
183
- },
184
- { immediate: true }
185
- )
186
- unwatch()
187
- })
188
- },
189
-
190
- methods: {
191
- updateStatus (val) {
192
- const prevChild = this.$parent.$children[this.index - 1]
193
-
194
- if (this.status === 'error') {
195
- this.internalStatus = 'error'
196
- } else if (val > this.index) {
197
- this.internalStatus = this.$parent.finishStatus
198
- } else if (val === this.index && this.prevStatus !== 'error') {
199
- this.internalStatus = this.$parent.processStatus
200
- } else if (this.$parent.newItem && this.prevStatus !== 'error') {
201
- this.internalStatus = 'wait'
202
- }
203
-
204
- if (prevChild) prevChild.calcProgress(this.internalStatus)
205
- },
206
-
207
- calcProgress (status) {
208
- let step = 100
209
- const style = {}
210
-
211
- style.transitionDelay = `${150 * this.index}ms`
212
-
213
- // if (status === this.$parent.processStatus) {
214
- // step = this.currentStatus !== 'error' ? 0 : 0
215
- // } else
216
- if (status === 'wait') {
217
- step = 0
218
- style.transitionDelay = `${-50 * this.index}ms`
219
- }
220
-
221
- style.borderWidth = step && !this.isSimple ? '1px' : 0
222
- this.$parent.direction === 'vertical'
223
- ? (style.height = `${step}%`)
224
- : (style.width = `${step}%`)
225
-
226
- this.lineStyle = style
227
- }
228
- }
229
- })
230
- </script>
231
-
232
- <style lang="scss" scoped>
233
- .el-step__head.is-process {
234
- color: #2d6eda;
235
- border-color: #2d6eda;
236
- }
237
- </style>
@@ -1,3 +0,0 @@
1
- import Step from './Step'
2
-
3
- export default Step
@@ -1,15 +0,0 @@
1
- <script>
2
- import { defineComponent } from 'vue'
3
- import { ElSteps as Steps } from 'element-plus'
4
-
5
- export default defineComponent({
6
- name: 'TpSteps',
7
- extends: Steps,
8
- props: {
9
- newItem: {
10
- type: Boolean,
11
- default: false
12
- }
13
- }
14
- })
15
- </script>
@@ -1,3 +0,0 @@
1
- import Steps from './Steps'
2
-
3
- export default Steps
@@ -1,171 +0,0 @@
1
- <template>
2
- <div>
3
- Começo do teste com {{ decimais }} casas decimais, até o número {{ limite }}, com o locale atual {{ $t('locale.prefix') }}.
4
- <div v-if="ready">
5
- <div v-if="listaErros.length">
6
- Acabou o teste com erros, log:
7
- </div>
8
- <div v-else>
9
- Acabou o teste sem erros
10
- </div>
11
- <div
12
- v-for="(message, key) in listaErros"
13
- :key="key"
14
- >
15
- {{ message }}
16
- </div>
17
- </div>
18
- <el-button
19
- v-if="!start"
20
- type="primary"
21
- size="default"
22
- @click="startTest"
23
- >
24
- Start
25
- </el-button>
26
- </div>
27
- </template>
28
-
29
- <script>
30
- import { defineComponent } from 'vue'
31
- // import { toCurrency } from 'tp-ui/utils/filters'
32
-
33
- export default defineComponent({
34
- name: 'TesteToCurrency',
35
- // filters: { toCurrency },
36
-
37
- data () {
38
- return {
39
- start: false,
40
- ready: false,
41
- listaErros: [],
42
- testeFixo: [1000, 0, 0.1, 0.2, 0.01],
43
- max: 10000,
44
- decimais: 2,
45
- limiteErros: 100
46
- }
47
- },
48
-
49
- computed: {
50
- divisorDecimais () {
51
- return Math.pow(10, this.decimais)
52
- },
53
-
54
- limite () {
55
- return this.max * this.divisorDecimais
56
- }
57
- },
58
-
59
- mounted () {
60
- for (let i = 0; i < this.testeFixo.length; i++) {
61
- const res = this.testeNum(this.testeFixo[i])
62
-
63
- if (res !== true) {
64
- this.listaErros.push(res)
65
- }
66
- }
67
-
68
- this.ready = true
69
- },
70
-
71
- methods: {
72
- toCurrency (val) {
73
- if (val === '') {
74
- return val
75
- }
76
-
77
- try {
78
- let with2Decimals = val.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
79
-
80
- with2Decimals = Number(with2Decimals).toLocaleString(this.$t('locale.prefix'), {
81
- minimumFractionDigits: 2,
82
- maximumFractionDigits: 2
83
- })
84
-
85
- return with2Decimals
86
- } catch (Exception) {
87
- return val.toLocaleString(this.$t('locale.prefix'), {
88
- minimumFractionDigits: 2,
89
- maximumFractionDigits: 2
90
- })
91
- }
92
- },
93
-
94
- reverseString (str) {
95
- return str.split('').reverse().join('')
96
- },
97
-
98
- startTest () {
99
- this.ready = true
100
- this.listaErros = []
101
- this.start = false
102
-
103
- for (let i = 0; i < this.limite && this.listaErros.length < this.limiteErros; i++) {
104
- const num = i / this.divisorDecimais
105
- const res = this.testeNum(num)
106
-
107
- if (res !== true) {
108
- this.listaErros.push(res)
109
- }
110
- }
111
-
112
- this.ready = true
113
- },
114
-
115
- addThousandsSeparator (number) {
116
- const numStr = number.toString()
117
- const parts = numStr.split(this.$t('locale.number.decimal'))
118
-
119
- const integerPart = parts[0]
120
- let formattedInteger = ''
121
-
122
- // Insert commas for thousands separation
123
- for (let i = 0; i < integerPart.length; i++) {
124
- if (i > 0 && (integerPart.length - i) % 3 === 0) {
125
- formattedInteger += this.$t('locale.number.thousands')
126
- }
127
- formattedInteger += integerPart[i]
128
- }
129
-
130
- if (parts.length === 2) {
131
- const decimalPart = parts[1]
132
- return formattedInteger + ',' + decimalPart
133
- } else {
134
- return formattedInteger
135
- }
136
- },
137
-
138
- testeNum (num) {
139
- const newNum = `${this.toCurrency(num) }`
140
-
141
- let numF = (`${num }`).substring(0, newNum.length)
142
- let i = ''
143
- if (this.$t('locale.number.decimal') === '.') {
144
- i = this.reverseString(numF).indexOf('.')
145
- }
146
- if (this.$t('locale.number.decimal') === ',') {
147
- numF = numF.replace('.', ',')
148
- i = this.reverseString(numF).indexOf(',')
149
- }
150
-
151
- if (i === -1) {
152
- numF += `${ this.$t('locale.number.decimal') + '00' }`
153
- } else if (i !== 2) {
154
- const qntZeros = Math.abs(i - 2)
155
- if (qntZeros > 0) {
156
- numF += '0'.repeat(qntZeros)
157
- }
158
- }
159
- if (numF.split(this.$t('locale.number.decimal'))[0].length >= 4) {
160
- numF = this.addThousandsSeparator(numF)
161
- }
162
-
163
- if (numF !== newNum) {
164
- return `errado | ${ num } | ${ newNum}`
165
- }
166
-
167
- return true
168
- }
169
- }
170
- })
171
- </script>
@@ -1,210 +0,0 @@
1
- <template>
2
- <el-row
3
- v-if="!title"
4
- :id="`${_id}`"
5
- type="flex"
6
- align="middle"
7
- :class="tptipclasses"
8
- >
9
- <el-col :sm="24" :lg="3">
10
- <div
11
- style="
12
- display: flex;
13
- min-width: 25px;
14
- justify-content: center;
15
- margin: 15px;
16
- padding: auto;
17
- "
18
- >
19
- <em class="far fa-lightbulb-on" />
20
- </div>
21
- </el-col>
22
-
23
- <el-col :sm="24" :lg="21">
24
- <div
25
- :id="`${_id}-text`"
26
- style="margin: 15px; margin-left: 0"
27
- v-html="text"
28
- />
29
- </el-col>
30
- </el-row>
31
- <el-row
32
- v-else
33
- :id="`${_id}`"
34
- type="flex"
35
- align="middle"
36
- justify="space-between"
37
- :class="tptipclasses"
38
- >
39
- <el-col :span="17">
40
- <el-row
41
- align="middle"
42
- type="flex"
43
- style="min-width: 25px; margin: 15px; padding: auto"
44
- >
45
- <em class="far fa-lightbulb-on" />
46
- <b class="tp-title">{{ title }}</b>
47
- </el-row>
48
- </el-col>
49
- <el-col :span="3" class="flexContent justify-content-end">
50
- <em class="fa fa-ellipsis-h tp-close-button" @click="closed = !closed" />
51
- </el-col>
52
-
53
- <el-col :class="'tp-text ' + (closed ? 'tp-vanish' : '')" :span="24">
54
- <div
55
- :id="`${_id}-text`"
56
- style="margin: 15px; margin-left: 0"
57
- v-html="text"
58
- />
59
- </el-col>
60
- </el-row>
61
- </template>
62
-
63
- <script>
64
- import { defineComponent } from 'vue'
65
-
66
- export default defineComponent({
67
- name: 'TpTip',
68
- props: {
69
- id: {
70
- type: String,
71
- required: false,
72
- default: null
73
- },
74
-
75
- text: {
76
- type: String,
77
- required: true,
78
- default: ''
79
- },
80
-
81
- title: {
82
- type: String,
83
- default: ''
84
- },
85
-
86
- type: {
87
- type: String,
88
- default: 'default'
89
- }
90
- },
91
-
92
- data () {
93
- return {
94
- closed: true
95
- }
96
- },
97
-
98
- computed: {
99
- _id () {
100
- return this.id || this.$options.name
101
- },
102
-
103
- tptipclasses () {
104
- const classes = ['grid-content', 'pa-3']
105
-
106
- if (this.type === 'error') {
107
- classes.push('tp-tip-error')
108
- }
109
-
110
- if (this.type === 'warning') {
111
- classes.push('tp-tip-warning')
112
- }
113
-
114
- if (this.type === 'success') {
115
- classes.push('tp-tip-success')
116
- }
117
-
118
- return classes
119
- }
120
- }
121
- })
122
- </script>
123
-
124
- <style lang="scss" scoped>
125
- .far.fa-lightbulb-on {
126
- font-size: 20px;
127
- }
128
-
129
- .grid-content {
130
- flex-wrap: wrap;
131
- background-color: rgb(76 135 251 / 10%);
132
- border-radius: 4px;
133
- border: solid 1px rgb(76 135 251 / 20%);
134
- padding: 1rem;
135
- font-size: 14px;
136
- line-height: 24px;
137
- color: #586d93;
138
- }
139
-
140
- .info-text {
141
- font-size: 12px;
142
- font-stretch: normal;
143
- font-style: normal;
144
- line-height: 1.33;
145
- letter-spacing: normal;
146
- text-align: left;
147
- }
148
-
149
- .tp-tip-error {
150
- background: #f56c6c1a 0% 0% no-repeat padding-box;
151
- border: 1px solid #ff6077;
152
-
153
- :deep() {
154
- strong,
155
- b,
156
- em {
157
- color: #ff425f;
158
- }
159
- }
160
- }
161
-
162
- .tp-tip-warning {
163
- background: #fff9ea 0% 0% no-repeat padding-box;
164
- border: 1px solid #ffc437;
165
-
166
- :deep() {
167
- strong,
168
- b,
169
- em {
170
- color: #ffc437;
171
- }
172
- }
173
- }
174
-
175
- .tp-tip-success {
176
- background: #f3fcfc 0% 0% no-repeat padding-box;
177
- border: 1px solid #08a19e;
178
-
179
- :deep() {
180
- strong,
181
- b,
182
- em {
183
- color: #08a19e;
184
- }
185
- }
186
- }
187
-
188
- .tp-close-button {
189
- padding: 10px;
190
- cursor: pointer;
191
- }
192
-
193
- .tp-title {
194
- font-size: 16px;
195
- padding-left: 16px;
196
- }
197
-
198
- .tp-text {
199
- height: auto;
200
- transition: 0.4s opacity ease-out;
201
- }
202
-
203
- .tp-vanish {
204
- position: absolute;
205
- max-height: 0;
206
- transform: scale(0);
207
- opacity: 0;
208
- transition: 0s opacity linear;
209
- }
210
- </style>
@@ -1,3 +0,0 @@
1
- import Tip from './Tip'
2
-
3
- export default Tip
@@ -1,60 +0,0 @@
1
- <template>
2
- <el-row justify="center" align="middle" class="value-selector-row">
3
- <el-button
4
- v-for="item in formattedValues"
5
- :key="item.value"
6
- :type="type"
7
- class="value-selector-btn"
8
- @click="$emit('input', item.value)">
9
- {{item.label}}
10
- </el-button>
11
- </el-row>
12
- </template>
13
-
14
- <script>
15
- export default {
16
- name: 'ValueSelector',
17
-
18
- props: {
19
- modelValue: {
20
- type: Array,
21
- default: () => []
22
- },
23
-
24
- type: {
25
- type: String,
26
- default: 'primary'
27
- }
28
- },
29
-
30
- emits: ['input'],
31
-
32
- computed: {
33
- formattedValues () {
34
- return this.modelValue.map(item => {
35
- let label = item
36
- if (typeof item === 'string'){
37
- label = `'${item}'`
38
- } else if (item === null){
39
- label = 'null'
40
- }
41
- return {
42
- label,
43
- value: item
44
- }
45
- })
46
- }
47
- }
48
- }
49
- </script>
50
-
51
- <style lang="scss" scoped>
52
- .value-selector-row {
53
- flex-wrap: nowrap;
54
- }
55
-
56
- .value-selector-btn {
57
- flex-shrink: 0;
58
- min-width: 50px;
59
- }
60
- </style>