energy-components 1.11.0 → 1.12.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/dist/components/filterTag.es.js +70 -0
- package/dist/components/index.es.js +88 -85
- package/dist/components/modal.es.js +29 -27
- package/dist/components/style/button.css +1 -1
- package/dist/components/style/filterTag.css +1 -0
- package/dist/components/style/modal.css +1 -1
- package/dist/components/style/sidedrawer.css +1 -1
- package/dist/components/style/tabBar.css +1 -1
- package/dist/components/style/textArea.css +1 -1
- package/dist/components/style/textField.css +1 -1
- package/dist/components/tabBar.es.js +103 -98
- package/dist/components/textArea.es.js +96 -86
- package/dist/components/textField.es.js +116 -108
- package/dist/energy-components.es.js +3851 -3761
- package/dist/energy-components.umd.js +2 -2
- package/dist/style.css +1 -1
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/input/filter-tag/filter-tag.vue.d.ts +53 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-v-
|
|
1
|
+
[data-v-c84ec649]:root{--rds-caption-01: .875rem/1.125rem RepsolSoleTextRegular;--rds-caption-01-bold: .875rem/1.125rem RepsolSoleTextBold;--rds-caption-01-underline: .875rem/1.125rem RepsolSoleTextRegular;--rds-caption-02: .75rem/1rem RepsolSoleTextRegular;--rds-caption-02-bold: .75rem/1rem RepsolSoleTextBold;--rds-caption-02-underline: .75rem/1rem RepsolSoleTextRegular;--rds-caption-tag: .75rem/1rem RepsolSoleTextRegular;--rds-body-01: 1rem/1.5rem RepsolSoleTextRegular;--rds-body-02: .875rem/1.25rem RepsolSoleTextRegular;--rds-body-01-bold: 1rem/1.5rem RepsolSoleTextBold;--rds-body-01-underline: 1rem/1.3125rem RepsolSoleTextRegular;--rds-body-02-bold: .875rem/1.25rem RepsolSoleTextBold;--rds-body-02-underline: .875rem/1.25rem RepsolSoleTextRegular;--rds-button-01: 1rem/1.5rem RepsolSoleTextBold;--rds-button-02: .875rem/1.25rem RepsolSoleTextBold;--rds-title-01: 1.125rem/1.625rem RepsolSoleTextBold;--rds-title-02: 1rem/1.5rem RepsolSoleTextBold;--rds-headline-00-sd: 2.5rem/3rem RepsolSoleDisplayRegular;--rds-headline-00-md: 3.5rem/4.25rem RepsolSoleDisplayRegular;--rds-headline-00-ld: 4rem/5rem RepsolSoleDisplayRegular;--rds-headline-00-xd: 4.5rem/5.75rem RepsolSoleDisplayRegular;--rds-headline-01-sd: 2rem/2.5rem RepsolSoleDisplayRegular;--rds-headline-01-md: 2.5rem/3rem RepsolSoleDisplayRegular;--rds-headline-01-ld: 3rem/3.75rem RepsolSoleDisplayRegular;--rds-headline-01-xd: 3.5rem/4.25rem RepsolSoleDisplayRegular;--rds-headline-02-sd: 1.75rem/2.25rem RepsolSoleDisplayRegular;--rds-headline-02-md: 2rem/2.5rem RepsolSoleDisplayRegular;--rds-headline-02-ld: 2.25rem/3rem RepsolSoleDisplayRegular;--rds-headline-02-xd: 2.75rem/3.5rem RepsolSoleDisplayRegular;--rds-headline-03-sd: 1.375rem/1.875rem RepsolSoleDisplayRegular;--rds-headline-03-md: 1.5rem/2rem RepsolSoleDisplayRegular;--rds-headline-03-ld: 1.75rem/2.25rem RepsolSoleDisplayRegular;--rds-headline-03-xd: 2rem/2.5rem RepsolSoleDisplayRegular;--rds-headline-04-sd: 1.125rem/1.625rem RepsolSoleDisplayRegular;--rds-headline-04-md: 1.125rem/1.625rem RepsolSoleDisplayRegular;--rds-headline-04-ld: 1.25rem/1.75rem RepsolSoleDisplayRegular;--rds-headline-04-xd: 1.5rem/2rem RepsolSoleDisplayRegular;--rds-numbers-00-sd: 3.5rem/4.25rem RepsolSoleDisplayRegular;--rds-numbers-00-md: 3.5rem/4.25rem RepsolSoleDisplayRegular;--rds-numbers-00-ld: 7rem/8.5rem RepsolSoleDisplayRegular;--rds-numbers-00-xd: 7rem/8.5rem RepsolSoleDisplayRegular;--rds-numbers-01-sd: 2.25rem/2.75rem RepsolSoleDisplayRegular;--rds-numbers-01-md: 2.25rem/2.75rem RepsolSoleDisplayRegular;--rds-numbers-01-ld: 3rem/3.75rem RepsolSoleDisplayRegular;--rds-numbers-01-xd: 3rem/3.75rem RepsolSoleDisplayRegular;--rds-numbers-02-sd: 1.75rem/2.25rem RepsolSoleDisplayRegular;--rds-numbers-02-md: 1.75rem/2.25rem RepsolSoleDisplayRegular;--rds-numbers-02-ld: 2.5rem/3rem RepsolSoleDisplayRegular;--rds-numbers-02-xd: 2.5rem/3rem RepsolSoleDisplayRegular;--rds-numbers-03-sd: 1.5rem/2rem RepsolSoleDisplayRegular;--rds-numbers-03-md: 1.5rem/2rem RepsolSoleDisplayRegular;--rds-numbers-03-ld: 1.75rem/2.25rem RepsolSoleDisplayRegular;--rds-numbers-03-xd: 1.75rem/2.25rem RepsolSoleDisplayRegular}.rds-e-textfield[data-v-c84ec649]{min-width:292px;position:relative}.rds-e-textfield input[type=number][data-v-c84ec649]::-webkit-outer-spin-button,.rds-e-textfield input[type=number][data-v-c84ec649]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.rds-e-textfield input[type=number][data-v-c84ec649]{-moz-appearance:textfield}.rds-e-textfield--full-width[data-v-c84ec649]{min-width:unset}.rds-e-textfield__container[data-v-c84ec649]{align-items:center;background-color:#fff;border:solid 1px #95b0c6;border-radius:.75rem;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;height:52px;justify-content:space-around;position:relative}.rds-e-textfield__container--keyboard-focus[data-v-c84ec649]{border:solid 1px #00badb;box-shadow:inset 0 0 0 1px #00badb}.rds-e-textfield:not(.rds-e-textfield--disabled):hover .rds-e-textfield__container[data-v-c84ec649]{border:solid 1px #001e37;cursor:pointer}.rds-e-textfield__container--active[data-v-c84ec649]{border:solid 1px #001e37;color:#001e37;outline:none}.rds-e-textfield--error .rds-e-textfield__container[data-v-c84ec649]{border:solid 1px #dE1c2e}.rds-e-textfield--disabled .rds-e-textfield__container[data-v-c84ec649]{opacity:.3;cursor:not-allowed;pointer-events:none}.rds-e-textfield__input-container[data-v-c84ec649]{display:flex;flex-direction:column;overflow:hidden;padding:1px;position:relative;width:100%}.rds-e-textfield__label[data-v-c84ec649]{font:.875rem/1.25rem RepsolSoleTextRegular;color:#43637d;left:.75rem;max-width:90%;overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;text-wrap:nowrap;top:14px;transition:all .2s ease-in-out}.rds-e-textfield--error .rds-e-textfield__label[data-v-c84ec649]{color:#de1c2e}.rds-e-textfield__input:not([readonly]):focus+.rds-e-textfield__label[data-v-c84ec649],.rds-e-textfield--filled .rds-e-textfield__label[data-v-c84ec649]{font:.75rem/1rem RepsolSoleTextRegular;left:.8125rem;top:4px}@keyframes onAutoFillStart-c84ec649{}.rds-e-textfield__input[data-v-c84ec649]{font:.875rem/1.25rem RepsolSoleTextRegular;border:none;border-radius:.75rem;color:#001e37;height:48px;overflow:auto;padding:.75rem 1rem 0rem .75rem;text-overflow:ellipsis}.rds-e-textfield:not(.rds-e-textfield--full-width) .rds-e-textfield__input[data-v-c84ec649]{min-width:fit-content}.rds-e-textfield__input[data-v-c84ec649]::-ms-reveal,.rds-e-textfield__input[data-v-c84ec649]::-ms-clear{display:none}.rds-e-textfield__input[data-v-c84ec649]:hover,.rds-e-textfield__input[data-v-c84ec649]:focus-visible,.rds-e-textfield__input[data-v-c84ec649]:active,.rds-e-textfield__input[data-v-c84ec649]:disabled{border:0!important;box-shadow:none;cursor:pointer;outline:0!important}.rds-e-textfield__input[data-v-c84ec649]:-webkit-autofill{animation-duration:.01s;animation-iteration-count:1;animation-name:onAutoFillStart-c84ec649;-webkit-box-shadow:0 0 0 5000px #ffffff inset}.rds-e-textfield__input--error[data-v-c84ec649]{border:solid 1px #dE1c2e}.rds-e-textfield__icon[data-v-c84ec649]{align-items:center;display:flex;height:1.5rem;justify-content:center;min-height:unset;min-width:unset;opacity:1;padding:0;position:relative;transform:scale(1);transition:opacity .3s ease,transform .3s ease,width .3s ease,margin .3s ease;width:1.5rem}.rds-e-textfield__icon--hidden[data-v-c84ec649]{margin-left:0;opacity:0;pointer-events:none;transform:scale(.8);width:0}.rds-e-textfield__icon--left[data-v-c84ec649]{color:#43637d;margin-left:.875rem}.rds-e-textfield__icon--right[data-v-c84ec649]{color:#001e37;margin-right:.875rem}.rds-e-textfield__input:focus+.rds-e-textfield__icon[data-v-c84ec649]{color:#00badb}.rds-e-textfield--error .rds-e-textfield__icon[data-v-c84ec649]{color:#de1c2e}.rds-e-textfield--error .rds-e-textfield__icon--clear[data-v-c84ec649],.rds-e-textfield--error .rds-e-textfield__icon--password[data-v-c84ec649]{color:#43637d}.rds-e-textfield__helper[data-v-c84ec649]{font:.875rem/1.125rem RepsolSoleTextRegular;color:#43637d;padding:.125rem;text-align:left}.rds-e-textfield__helper--error[data-v-c84ec649]{color:#de1c2e}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { R as
|
|
3
|
-
import { d as
|
|
4
|
-
import { _ as
|
|
5
|
-
import './style/tabBar.css';const
|
|
1
|
+
import { defineComponent as F, mergeModels as E, toRefs as P, useModel as q, ref as _, computed as B, onMounted as H, onUnmounted as O, watch as $, createElementBlock as b, openBlock as f, normalizeClass as p, createCommentVNode as C, createElementVNode as g, createVNode as M, Fragment as U, renderList as j, unref as G, withKeys as h, withModifiers as m, createBlock as J, createTextVNode as Q, toDisplayString as X, renderSlot as Y } from "vue";
|
|
2
|
+
import { R as L } from "./icon-svg-DuzOdbk1.js";
|
|
3
|
+
import { d as Z } from "./functions-DIHwdgF0.js";
|
|
4
|
+
import { _ as ee } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
5
|
+
import './style/tabBar.css';const te = ["aria-selected", "tabindex", "onClick", "onKeydown"], ae = { class: "rds-e-top-bar__item-title" }, ne = {
|
|
6
6
|
class: "rds-e-top-bar__content",
|
|
7
7
|
role: "tabpanel"
|
|
8
|
-
},
|
|
8
|
+
}, re = /* @__PURE__ */ F({
|
|
9
9
|
__name: "tab-bar",
|
|
10
|
-
props: /* @__PURE__ */
|
|
10
|
+
props: /* @__PURE__ */ E({
|
|
11
11
|
/**
|
|
12
12
|
* Pestaña activa
|
|
13
13
|
*/
|
|
@@ -56,8 +56,8 @@ import './style/tabBar.css';const Z = ["aria-selected", "tabindex", "onClick", "
|
|
|
56
56
|
*/
|
|
57
57
|
beforeTabChange: {
|
|
58
58
|
type: Function,
|
|
59
|
-
default: (
|
|
60
|
-
if (
|
|
59
|
+
default: (s, w) => {
|
|
60
|
+
if (s === w.id) return Promise.resolve(!0);
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
}, {
|
|
@@ -67,142 +67,147 @@ import './style/tabBar.css';const Z = ["aria-selected", "tabindex", "onClick", "
|
|
|
67
67
|
},
|
|
68
68
|
activeTabModifiers: {}
|
|
69
69
|
}),
|
|
70
|
-
emits: /* @__PURE__ */
|
|
71
|
-
setup(
|
|
72
|
-
const
|
|
73
|
-
options:
|
|
74
|
-
} =
|
|
75
|
-
|
|
76
|
-
) : []),
|
|
77
|
-
const t =
|
|
70
|
+
emits: /* @__PURE__ */ E(["activeTabChanged"], ["update:activeTab"]),
|
|
71
|
+
setup(s, { emit: w }) {
|
|
72
|
+
const l = s, N = w, {
|
|
73
|
+
options: i
|
|
74
|
+
} = P(l), V = q(s, "activeTab"), r = _(""), T = _(null), d = _(null), y = B(() => T.value ? Array.from(
|
|
75
|
+
T.value.children
|
|
76
|
+
) : []), u = _(!1), z = B(() => i.value.findIndex((t) => t.id === r.value) > 0 && u.value), D = B(() => d.value ? i.value.findIndex((t) => t.id === r.value) < l.options.length - 1 && u.value : !1), S = (e) => {
|
|
77
|
+
const t = l.options.find((a) => a.id === r.value);
|
|
78
78
|
return e ? t : t == null ? void 0 : t.id;
|
|
79
|
-
},
|
|
80
|
-
const t =
|
|
81
|
-
return t ? await
|
|
82
|
-
},
|
|
83
|
-
let e =
|
|
84
|
-
for (; e > 0 && (e--, !await
|
|
79
|
+
}, c = async (e) => {
|
|
80
|
+
const t = i.value.find((n) => n.id === e);
|
|
81
|
+
return t ? await l.beforeTabChange(e, t) ? (r.value = e, !0) : !1 : (console.error(`[RDSTabBar]: Tab with id ${e} not found`), !1);
|
|
82
|
+
}, R = async () => {
|
|
83
|
+
let e = i.value.findIndex((t) => t.id === r.value);
|
|
84
|
+
for (; e > 0 && (e--, !await c(i.value[e].id)); )
|
|
85
85
|
;
|
|
86
|
-
},
|
|
87
|
-
let e =
|
|
88
|
-
for (; e <
|
|
86
|
+
}, W = async () => {
|
|
87
|
+
let e = i.value.findIndex((t) => t.id === r.value);
|
|
88
|
+
for (; e < l.options.length - 1 && (e++, !await c(i.value[e].id)); )
|
|
89
89
|
;
|
|
90
|
-
},
|
|
91
|
-
let
|
|
92
|
-
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
const
|
|
96
|
-
|
|
90
|
+
}, K = async (e, t) => {
|
|
91
|
+
let n = e.shiftKey ? t - 1 : t + 1;
|
|
92
|
+
n < 0 ? n = i.value.length - 1 : n >= i.value.length && (n = 0);
|
|
93
|
+
const o = i.value[n];
|
|
94
|
+
o && await c(o.id) && setTimeout(() => {
|
|
95
|
+
const v = y.value[n];
|
|
96
|
+
v && (v.focus(), x(o.id));
|
|
97
97
|
}, 0);
|
|
98
98
|
};
|
|
99
|
-
function
|
|
100
|
-
const t =
|
|
101
|
-
y.value[t] &&
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
function x(e) {
|
|
100
|
+
const t = i.value.findIndex((a) => a.id === e);
|
|
101
|
+
if (y.value[t] && d.value) {
|
|
102
|
+
const a = y.value[t], n = d.value, o = a.offsetLeft, I = a.offsetWidth, v = n.scrollLeft, A = n.clientWidth;
|
|
103
|
+
o < v ? n.scrollTo({
|
|
104
|
+
left: o,
|
|
105
|
+
behavior: "smooth"
|
|
106
|
+
}) : o + I > v + A && n.scrollTo({
|
|
107
|
+
left: o + I - A,
|
|
108
|
+
behavior: "smooth"
|
|
109
|
+
});
|
|
110
|
+
}
|
|
106
111
|
}
|
|
107
112
|
const k = () => {
|
|
108
113
|
var e, t;
|
|
109
|
-
|
|
114
|
+
d.value ? (u.value = ((e = d.value) == null ? void 0 : e.scrollWidth) > ((t = d.value) == null ? void 0 : t.clientWidth), u.value && x(r.value)) : u.value = !1;
|
|
110
115
|
};
|
|
111
|
-
if (
|
|
112
|
-
const e =
|
|
113
|
-
e ?
|
|
116
|
+
if (l.activeTab) {
|
|
117
|
+
const e = i.value.find((t) => t.id === l.activeTab);
|
|
118
|
+
e ? r.value = e.id : (console.error(`[RDSTabBar]: Tab with id ${l.activeTab} not found. Picking the first tab instead.`), r.value = l.options[0].id ?? "");
|
|
114
119
|
} else
|
|
115
|
-
|
|
116
|
-
return
|
|
117
|
-
k(), window.addEventListener("resize",
|
|
118
|
-
}),
|
|
120
|
+
r.value = l.options[0].id ?? "";
|
|
121
|
+
return H(async () => {
|
|
122
|
+
k(), window.addEventListener("resize", Z(k, 200));
|
|
123
|
+
}), O(() => {
|
|
119
124
|
window.removeEventListener("resize", k);
|
|
120
|
-
}),
|
|
121
|
-
|
|
122
|
-
}), V
|
|
123
|
-
|
|
124
|
-
}, { immediate: !0 }), (e, t) => (
|
|
125
|
-
class:
|
|
126
|
-
"rds-e-top-bar--fluid":
|
|
127
|
-
"rds-e-top-bar--divider":
|
|
128
|
-
"rds-e-top-bar--inverse":
|
|
125
|
+
}), $(r, (e) => {
|
|
126
|
+
u.value && x(e), N("activeTabChanged", S(!1));
|
|
127
|
+
}), $(V, (e) => {
|
|
128
|
+
c(e);
|
|
129
|
+
}, { immediate: !0 }), (e, t) => (f(), b("div", {
|
|
130
|
+
class: p(["rds-e-top-bar", {
|
|
131
|
+
"rds-e-top-bar--fluid": s.fluid,
|
|
132
|
+
"rds-e-top-bar--divider": s.divider,
|
|
133
|
+
"rds-e-top-bar--inverse": s.inverse
|
|
129
134
|
}])
|
|
130
135
|
}, [
|
|
131
|
-
|
|
136
|
+
z.value ? (f(), b("div", {
|
|
132
137
|
key: 0,
|
|
133
|
-
class:
|
|
138
|
+
class: p([
|
|
134
139
|
"rds-e-top-bar__button",
|
|
135
|
-
|
|
140
|
+
s.backgroundAlternative ? "rds-e-top-bar__button--left-bg2" : "rds-e-top-bar__button--left"
|
|
136
141
|
]),
|
|
137
|
-
onClick:
|
|
142
|
+
onClick: R
|
|
138
143
|
}, [
|
|
139
|
-
|
|
144
|
+
M(L, {
|
|
140
145
|
class: "rds-e-top-bar__icon",
|
|
141
146
|
name: "arrow_left"
|
|
142
147
|
})
|
|
143
|
-
], 2)) :
|
|
144
|
-
|
|
148
|
+
], 2)) : C("", !0),
|
|
149
|
+
g("div", {
|
|
145
150
|
ref_key: "tabsListWrapper",
|
|
146
|
-
ref:
|
|
151
|
+
ref: d,
|
|
147
152
|
class: "rds-e-top-bar__wrapper"
|
|
148
153
|
}, [
|
|
149
|
-
|
|
154
|
+
g("ul", {
|
|
150
155
|
ref_key: "tabsList",
|
|
151
|
-
ref:
|
|
152
|
-
class:
|
|
153
|
-
"rds-e-top-bar__list-inverse":
|
|
156
|
+
ref: T,
|
|
157
|
+
class: p(["rds-e-top-bar__list", {
|
|
158
|
+
"rds-e-top-bar__list-inverse": s.inverse
|
|
154
159
|
}]),
|
|
155
160
|
role: "tablist"
|
|
156
161
|
}, [
|
|
157
|
-
(
|
|
158
|
-
key:
|
|
159
|
-
class:
|
|
160
|
-
active:
|
|
162
|
+
(f(!0), b(U, null, j(G(i), (a, n) => (f(), b("li", {
|
|
163
|
+
key: n,
|
|
164
|
+
class: p(["rds-e-top-bar__item", {
|
|
165
|
+
active: r.value === a.id
|
|
161
166
|
}]),
|
|
162
167
|
role: "tab",
|
|
163
|
-
"aria-selected":
|
|
164
|
-
tabindex:
|
|
165
|
-
onClick: (
|
|
168
|
+
"aria-selected": r.value === a.id,
|
|
169
|
+
tabindex: r.value === a.id ? 0 : -1,
|
|
170
|
+
onClick: (o) => c(a.id),
|
|
166
171
|
onKeydown: [
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
+
h(m(R, ["prevent"]), ["left"]),
|
|
173
|
+
h(m(W, ["prevent"]), ["right"]),
|
|
174
|
+
h(m((o) => K(o, n), ["prevent"]), ["tab"]),
|
|
175
|
+
h(m((o) => c(a.id), ["prevent"]), ["enter"]),
|
|
176
|
+
h(m((o) => c(a.id), ["prevent"]), ["space"])
|
|
172
177
|
]
|
|
173
178
|
}, [
|
|
174
|
-
|
|
175
|
-
|
|
179
|
+
g("span", ae, [
|
|
180
|
+
a.icon ? (f(), J(L, {
|
|
176
181
|
key: 0,
|
|
177
182
|
class: "rds-e-top-bar__item-title--icon rds-flex rds-flex-center-center",
|
|
178
|
-
name:
|
|
179
|
-
}, null, 8, ["name"])) :
|
|
180
|
-
|
|
183
|
+
name: a.icon
|
|
184
|
+
}, null, 8, ["name"])) : C("", !0),
|
|
185
|
+
Q(" " + X(a.title), 1)
|
|
181
186
|
])
|
|
182
|
-
], 42,
|
|
187
|
+
], 42, te))), 128))
|
|
183
188
|
], 2)
|
|
184
189
|
], 512),
|
|
185
|
-
|
|
190
|
+
D.value ? (f(), b("div", {
|
|
186
191
|
key: 1,
|
|
187
|
-
class:
|
|
192
|
+
class: p([
|
|
188
193
|
"rds-e-top-bar__button",
|
|
189
|
-
|
|
194
|
+
s.backgroundAlternative ? "rds-e-top-bar__button--right-bg2" : "rds-e-top-bar__button--right"
|
|
190
195
|
]),
|
|
191
|
-
onClick:
|
|
196
|
+
onClick: W
|
|
192
197
|
}, [
|
|
193
|
-
|
|
198
|
+
M(L, {
|
|
194
199
|
class: "rds-e-top-bar__icon",
|
|
195
200
|
name: "arrow_right"
|
|
196
201
|
})
|
|
197
|
-
], 2)) :
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
tab:
|
|
202
|
+
], 2)) : C("", !0),
|
|
203
|
+
g("div", ne, [
|
|
204
|
+
Y(e.$slots, r.value, {
|
|
205
|
+
tab: S(!0)
|
|
201
206
|
}, void 0, !0)
|
|
202
207
|
])
|
|
203
208
|
], 2));
|
|
204
209
|
}
|
|
205
|
-
}),
|
|
210
|
+
}), de = /* @__PURE__ */ ee(re, [["__scopeId", "data-v-0cf4e6d5"]]);
|
|
206
211
|
export {
|
|
207
|
-
|
|
212
|
+
de as default
|
|
208
213
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { R as
|
|
3
|
-
import { _ as
|
|
4
|
-
import './style/textArea.css';function
|
|
5
|
-
return
|
|
1
|
+
import { defineComponent as Q, mergeModels as W, useModel as X, toRefs as Y, ref as k, computed as o, createElementBlock as h, openBlock as s, normalizeClass as u, createElementVNode as r, withDirectives as Z, unref as e, vModelText as ee, renderSlot as S, createTextVNode as te, createBlock as T, createCommentVNode as i, mergeProps as $, toHandlers as A, toDisplayString as d } from "vue";
|
|
2
|
+
import { R as F } from "./icon-svg-DuzOdbk1.js";
|
|
3
|
+
import { _ as ae } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
4
|
+
import './style/textArea.css';function V(t, g = !0, c = !0) {
|
|
5
|
+
return g && !t.trim() ? (console.warn("Advertencia: El valor no puede estar vacío"), !1) : c && !/^[\w\-:]+$/.test(t) ? (console.warn("Advertencia: El valor contiene caracteres inválidos"), !1) : !0;
|
|
6
6
|
}
|
|
7
|
-
const
|
|
7
|
+
const re = { class: "rds-e-textarea__input-container" }, le = ["id", "name", "maxlength", "minlength", "rows", "disabled"], ne = ["for"], se = { key: 0 }, oe = { key: 0 }, ue = { key: 1 }, ie = { key: 0 }, de = /* @__PURE__ */ Q({
|
|
8
8
|
__name: "text-area",
|
|
9
|
-
props: /* @__PURE__ */
|
|
9
|
+
props: /* @__PURE__ */ W({
|
|
10
10
|
/**
|
|
11
11
|
* Etiqueta que se muestra sobre el campo de entrada. y Placeholder
|
|
12
12
|
*/
|
|
@@ -14,7 +14,7 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
|
|
|
14
14
|
type: String,
|
|
15
15
|
required: !0,
|
|
16
16
|
validator(t) {
|
|
17
|
-
return
|
|
17
|
+
return V(t, !0, !0);
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
/**
|
|
@@ -24,7 +24,7 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
|
|
|
24
24
|
type: String,
|
|
25
25
|
required: !1,
|
|
26
26
|
validator(t) {
|
|
27
|
-
return
|
|
27
|
+
return V(t, !1, !0);
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
/**
|
|
@@ -34,7 +34,7 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
|
|
|
34
34
|
type: String,
|
|
35
35
|
required: !1,
|
|
36
36
|
validator(t) {
|
|
37
|
-
return
|
|
37
|
+
return V(t, !1, !0);
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
/**
|
|
@@ -136,133 +136,143 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
|
|
|
136
136
|
}),
|
|
137
137
|
emits: ["update:modelValue"],
|
|
138
138
|
setup(t) {
|
|
139
|
-
const
|
|
140
|
-
label:
|
|
141
|
-
id:
|
|
142
|
-
disabled:
|
|
139
|
+
const g = t, c = X(t, "modelValue"), {
|
|
140
|
+
label: B,
|
|
141
|
+
id: M,
|
|
142
|
+
disabled: x,
|
|
143
143
|
maxlength: m,
|
|
144
|
-
minlength:
|
|
145
|
-
modelValue:
|
|
146
|
-
icon:
|
|
147
|
-
rightIcon:
|
|
148
|
-
helper:
|
|
149
|
-
error:
|
|
150
|
-
helperText:
|
|
151
|
-
clearable:
|
|
152
|
-
lengthError:
|
|
153
|
-
} =
|
|
154
|
-
|
|
155
|
-
},
|
|
156
|
-
|
|
157
|
-
},
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
144
|
+
minlength: y,
|
|
145
|
+
modelValue: v,
|
|
146
|
+
icon: R,
|
|
147
|
+
rightIcon: E,
|
|
148
|
+
helper: z,
|
|
149
|
+
error: b,
|
|
150
|
+
helperText: P,
|
|
151
|
+
clearable: w,
|
|
152
|
+
lengthError: j
|
|
153
|
+
} = Y(g), f = k(!1), _ = k(!1), p = k(!1), H = () => {
|
|
154
|
+
p.value = !0;
|
|
155
|
+
}, K = () => {
|
|
156
|
+
f.value = !1, _.value = !1, p.value = !1;
|
|
157
|
+
}, U = () => {
|
|
158
|
+
f.value = !0, _.value = !p.value, p.value = !1;
|
|
159
|
+
}, N = o(() => v.value.length === m.value), C = o(() => v.value.length === 0 ? !1 : v.value.length < y.value), I = o(() => j.value && (N.value || C.value)), G = o(() => {
|
|
160
|
+
const a = [];
|
|
161
|
+
return v.value && a.push("rds-e-textarea--filled"), b.value && a.push("rds-e-textarea--error"), x.value && a.push("rds-e-textarea--disabled"), I.value && a.push("rds-e-textarea--error"), a.join(" ");
|
|
162
|
+
}), J = () => {
|
|
163
|
+
c.value = "";
|
|
164
|
+
}, l = o(() => {
|
|
165
|
+
const a = {
|
|
166
|
+
name: R.value,
|
|
163
167
|
class: "",
|
|
164
168
|
events: {
|
|
165
169
|
click: () => {
|
|
166
170
|
}
|
|
167
171
|
}
|
|
168
172
|
}, n = {
|
|
169
|
-
left: { ...
|
|
170
|
-
right: { ...
|
|
173
|
+
left: { ...a },
|
|
174
|
+
right: { ...a, name: E.value }
|
|
171
175
|
};
|
|
172
|
-
return
|
|
173
|
-
...
|
|
176
|
+
return w.value && (n.right = {
|
|
177
|
+
...a,
|
|
174
178
|
name: "close",
|
|
175
179
|
class: "rds-e-textfield__icon--clear",
|
|
176
180
|
events: {
|
|
177
|
-
click: () =>
|
|
181
|
+
click: () => J()
|
|
178
182
|
}
|
|
179
183
|
}), n;
|
|
180
|
-
}),
|
|
181
|
-
return (
|
|
182
|
-
var
|
|
183
|
-
return s(),
|
|
184
|
-
class:
|
|
184
|
+
}), L = o(() => v.value.length);
|
|
185
|
+
return (a, n) => {
|
|
186
|
+
var D, q;
|
|
187
|
+
return s(), h("div", {
|
|
188
|
+
class: u(["rds-e-textarea", G.value])
|
|
185
189
|
}, [
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
190
|
+
r("div", {
|
|
191
|
+
class: u(["rds-e-textarea__container", {
|
|
192
|
+
"rds-e-textarea__container--keyboard-focus": _.value,
|
|
193
|
+
"rds-e-textarea__container--active": f.value && !_.value
|
|
194
|
+
}]),
|
|
195
|
+
onMousedown: H
|
|
196
|
+
}, [
|
|
197
|
+
r("div", re, [
|
|
198
|
+
Z(r("textarea", {
|
|
199
|
+
id: (D = e(M)) == null ? void 0 : D.toString(),
|
|
200
|
+
"onUpdate:modelValue": n[0] || (n[0] = (O) => c.value = O),
|
|
191
201
|
type: "text",
|
|
192
|
-
class:
|
|
202
|
+
class: u(["rds-e-textarea__input", { "rds-e-textarea__input--active": f.value }]),
|
|
193
203
|
name: t.name,
|
|
194
204
|
maxlength: e(m),
|
|
195
|
-
minlength: e(
|
|
205
|
+
minlength: e(y),
|
|
196
206
|
rows: t.rows,
|
|
197
|
-
disabled: e(
|
|
198
|
-
onBlur:
|
|
199
|
-
onFocus:
|
|
200
|
-
}, null, 42,
|
|
201
|
-
[
|
|
207
|
+
disabled: e(x),
|
|
208
|
+
onBlur: K,
|
|
209
|
+
onFocus: U
|
|
210
|
+
}, null, 42, le), [
|
|
211
|
+
[ee, c.value]
|
|
202
212
|
]),
|
|
203
|
-
n[1] || (n[1] =
|
|
204
|
-
|
|
213
|
+
n[1] || (n[1] = r("div", { class: "rds-e-textarea__resize-handle" }, [
|
|
214
|
+
r("svg", {
|
|
205
215
|
width: "12",
|
|
206
216
|
height: "14",
|
|
207
217
|
viewBox: "0 0 12 14",
|
|
208
218
|
fill: "none",
|
|
209
219
|
xmlns: "http://www.w3.org/2000/svg"
|
|
210
220
|
}, [
|
|
211
|
-
|
|
221
|
+
r("path", {
|
|
212
222
|
d: "M11 1V3C11 8.52285 6.52285 13 1 13V13",
|
|
213
223
|
"stroke-width": "1.2",
|
|
214
224
|
"stroke-linecap": "round"
|
|
215
225
|
})
|
|
216
226
|
])
|
|
217
227
|
], -1)),
|
|
218
|
-
|
|
219
|
-
for: (
|
|
220
|
-
class:
|
|
228
|
+
r("label", {
|
|
229
|
+
for: (q = e(M)) == null ? void 0 : q.toString(),
|
|
230
|
+
class: u(["rds-e-textarea__label", {
|
|
221
231
|
"rds-e-textarea__label--with-icon": l.value.left.name,
|
|
222
|
-
"rds-e-textarea__label--active":
|
|
232
|
+
"rds-e-textarea__label--active": f.value
|
|
223
233
|
}])
|
|
224
234
|
}, [
|
|
225
|
-
|
|
226
|
-
l.value.left.name ? (s(),
|
|
235
|
+
S(a.$slots, "left-icon", {}, () => [
|
|
236
|
+
l.value.left.name ? (s(), T(F, $({
|
|
227
237
|
key: 0,
|
|
228
|
-
class:
|
|
238
|
+
class: "rds-e-textarea__icon rds-e-textarea__icon--left",
|
|
229
239
|
"aria-hidden": "true"
|
|
230
|
-
}, l.value.left,
|
|
240
|
+
}, l.value.left, A(l.value.left.events)), null, 16)) : i("", !0)
|
|
231
241
|
], !0),
|
|
232
|
-
|
|
233
|
-
], 10,
|
|
234
|
-
|
|
235
|
-
class:
|
|
236
|
-
"rds-e-textarea__counter--disabled": e(
|
|
237
|
-
"rds-e-textarea__counter--clearable": e(
|
|
242
|
+
te(" " + d(e(B)), 1)
|
|
243
|
+
], 10, ne),
|
|
244
|
+
r("div", {
|
|
245
|
+
class: u(["rds-e-textarea__counter", {
|
|
246
|
+
"rds-e-textarea__counter--disabled": e(x),
|
|
247
|
+
"rds-e-textarea__counter--clearable": e(w)
|
|
238
248
|
}])
|
|
239
249
|
}, [
|
|
240
|
-
t.counter && !e(
|
|
241
|
-
|
|
242
|
-
l.value.right.name
|
|
250
|
+
t.counter && !e(E) && !e(w) ? (s(), h("p", se, d(L.value) + "/" + d(e(m)), 1)) : i("", !0),
|
|
251
|
+
S(a.$slots, "right-icon", {}, () => [
|
|
252
|
+
l.value.right.name ? (s(), T(F, $({
|
|
243
253
|
key: 0,
|
|
244
254
|
class: "rds-e-textarea__icon rds-e-textarea__icon--right",
|
|
245
255
|
"aria-hidden": "true"
|
|
246
|
-
}, l.value.right,
|
|
256
|
+
}, l.value.right, A(l.value.right.events)), null, 16)) : i("", !0)
|
|
247
257
|
], !0)
|
|
248
258
|
], 2)
|
|
249
259
|
])
|
|
250
|
-
]),
|
|
251
|
-
|
|
252
|
-
class:
|
|
260
|
+
], 34),
|
|
261
|
+
r("ul", {
|
|
262
|
+
class: u(["rds-e-textarea__helper", e(b) || I.value ? "rds-e-textarea__helper--error" : ""])
|
|
253
263
|
}, [
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
e(
|
|
264
|
+
N.value ? (s(), h("li", oe, " Max text length is " + d(e(m)), 1)) : i("", !0),
|
|
265
|
+
C.value ? (s(), h("li", ue, " Min text length is " + d(e(y)), 1)) : i("", !0),
|
|
266
|
+
r("li", null, [
|
|
267
|
+
S(a.$slots, "helper-text", {}, () => [
|
|
268
|
+
e(z) || e(b) ? (s(), h("span", ie, d(e(P)), 1)) : i("", !0)
|
|
259
269
|
], !0)
|
|
260
270
|
])
|
|
261
271
|
], 2)
|
|
262
272
|
], 2);
|
|
263
273
|
};
|
|
264
274
|
}
|
|
265
|
-
}),
|
|
275
|
+
}), he = /* @__PURE__ */ ae(de, [["__scopeId", "data-v-cdbbf388"]]);
|
|
266
276
|
export {
|
|
267
|
-
|
|
277
|
+
he as default
|
|
268
278
|
};
|