energy-components 1.18.0 → 1.19.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/breadcrumbs.es.js +32 -29
- package/dist/components/datepicker.es.js +1642 -1638
- package/dist/components/{floating-ui.vue-7LKzPqHI.js → floating-ui.vue-DWAG1g94.js} +3 -3
- package/dist/components/link.es.js +51 -49
- package/dist/components/popover.es.js +47 -47
- package/dist/components/sidebar.es.js +143 -59
- package/dist/components/style/breadcrumbs.css +1 -1
- package/dist/components/style/datepicker.css +1 -1
- package/dist/components/style/link.css +1 -1
- package/dist/components/style/modal.css +1 -1
- package/dist/components/style/overlay.css +1 -1
- package/dist/components/style/popover.css +1 -1
- package/dist/components/style/sidebar.css +1 -1
- package/dist/components/style/textField.css +1 -1
- package/dist/components/style/tooltip.css +1 -1
- package/dist/components/textField.es.js +28 -26
- package/dist/components/tooltip.es.js +135 -84
- package/dist/energy-components.es.js +4689 -4543
- package/dist/energy-components.umd.js +2 -2
- package/dist/style.css +1 -1
- package/dist/types/src/components/input/text-field/text-field.vue.d.ts +2 -0
- package/dist/types/src/components/layout/sidebar/sidebar.vue.d.ts +128 -3
- package/dist/types/src/components/navigation/breadcrumbs/breadcrumbs.vue.d.ts +18 -0
- package/dist/types/src/components/navigation/link/link.vue.d.ts +10 -6
- package/dist/types/src/components/overlay/popover/popover.vue.d.ts +2 -2
- package/dist/types/src/components/overlay/tooltip/tooltip.vue.d.ts +47 -2
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { R as
|
|
3
|
-
import { _ as
|
|
4
|
-
import './style/link.css';const
|
|
1
|
+
import { defineComponent as $, toRefs as M, computed as m, createBlock as p, openBlock as s, resolveDynamicComponent as O, unref as e, normalizeStyle as P, normalizeClass as k, withCtx as T, createCommentVNode as d, createElementBlock as I, mergeProps as v, renderSlot as D, createTextVNode as R, toDisplayString as j } from "vue";
|
|
2
|
+
import { R as y } from "./icon-svg-arye8CV8.js";
|
|
3
|
+
import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
4
|
+
import './style/link.css';const A = /* @__PURE__ */ $({
|
|
5
5
|
__name: "link",
|
|
6
6
|
props: {
|
|
7
7
|
/**
|
|
@@ -96,96 +96,98 @@ import './style/link.css';const T = /* @__PURE__ */ N({
|
|
|
96
96
|
default: void 0
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
99
|
+
emits: ["click"],
|
|
100
|
+
setup(o, { emit: w }) {
|
|
101
|
+
const z = o, E = w, {
|
|
102
|
+
text: g,
|
|
103
|
+
to: h,
|
|
103
104
|
icon: r,
|
|
104
105
|
tag: u,
|
|
105
106
|
disabled: i,
|
|
106
|
-
inverse:
|
|
107
|
+
inverse: _,
|
|
107
108
|
arrow: c,
|
|
108
|
-
right:
|
|
109
|
-
underline:
|
|
110
|
-
customClass:
|
|
109
|
+
right: n,
|
|
110
|
+
underline: b,
|
|
111
|
+
customClass: x,
|
|
111
112
|
color: l,
|
|
112
|
-
arrowSmall:
|
|
113
|
-
id:
|
|
114
|
-
} =
|
|
115
|
-
var
|
|
113
|
+
arrowSmall: S,
|
|
114
|
+
id: L
|
|
115
|
+
} = M(z), N = m(() => l.value ? { color: l.value } : void 0), V = m(() => {
|
|
116
|
+
var t, f;
|
|
116
117
|
const a = ["rds-e-link"];
|
|
117
|
-
return
|
|
118
|
-
}),
|
|
119
|
-
var
|
|
118
|
+
return _.value && a.push("rds-e-link--inverse"), b.value && a.push("rds-e-link--underline"), i.value && a.push("rds-e-style-state-disabled"), ((t = r == null ? void 0 : r.value) == null ? void 0 : t.name) !== "arrow" && a.push("rds-e-arrow-link"), ((f = r == null ? void 0 : r.value) == null ? void 0 : f.name) !== "arrow" && _.value && a.push("rds-e-arrow-link__icon--inverse"), x.value === "rds-e-breadcrumbs__link--text" && a.push("rds-e-link__breadcrumbs"), a.join(" ");
|
|
119
|
+
}), C = m(() => {
|
|
120
|
+
var t;
|
|
120
121
|
const a = ["rds-e-arrow-link__icon--arrow"];
|
|
121
|
-
return r != null && r.value && (a.push("rds-e-arrow-link__icon"), i.value && a.push("rds-e-arrow-link__icon--disabled")), ((
|
|
122
|
-
|
|
122
|
+
return r != null && r.value && (a.push("rds-e-arrow-link__icon"), i.value && a.push("rds-e-arrow-link__icon--disabled")), ((t = r == null ? void 0 : r.value) == null ? void 0 : t.name) !== "arrow" && _.value && a.push("rds-e-arrow-link__icon--inverse"), a.push(
|
|
123
|
+
n.value ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left"
|
|
123
124
|
), a.join(" ");
|
|
124
|
-
}),
|
|
125
|
+
}), B = m(() => {
|
|
125
126
|
var a;
|
|
126
127
|
return c.value || ((a = r == null ? void 0 : r.value) == null ? void 0 : a.name);
|
|
127
128
|
});
|
|
128
|
-
return (a,
|
|
129
|
-
id: e(
|
|
130
|
-
class:
|
|
131
|
-
to: e(u) === "router-link" ? e(
|
|
132
|
-
href: e(u) === "a" ? e(
|
|
129
|
+
return (a, t) => (s(), p(O(e(u) === "a" ? e(u) : "router-link"), {
|
|
130
|
+
id: e(L),
|
|
131
|
+
class: k(V.value),
|
|
132
|
+
to: e(u) === "router-link" ? e(h) : null,
|
|
133
|
+
href: e(u) === "a" ? e(h) : null,
|
|
133
134
|
disable: e(i),
|
|
134
|
-
style:
|
|
135
|
+
style: P(N.value),
|
|
135
136
|
tabindex: e(i) ? -1 : void 0,
|
|
136
|
-
"aria-disabled": e(i)
|
|
137
|
+
"aria-disabled": e(i),
|
|
138
|
+
onClick: t[0] || (t[0] = (f) => E("click", f))
|
|
137
139
|
}, {
|
|
138
|
-
default:
|
|
139
|
-
e(r).name && !e(
|
|
140
|
+
default: T(() => [
|
|
141
|
+
e(r).name && !e(n) && !e(c) ? (s(), p(y, v({
|
|
140
142
|
key: 0,
|
|
141
143
|
name: e(r).name
|
|
142
144
|
}, {
|
|
143
145
|
...e(r)
|
|
144
146
|
}, {
|
|
145
|
-
class: ["rds-e-link__icon-left",
|
|
147
|
+
class: ["rds-e-link__icon-left", C.value],
|
|
146
148
|
style: e(l) ? { color: e(l) } : void 0
|
|
147
149
|
}), null, 16, ["name", "class", "style"])) : d("", !0),
|
|
148
|
-
e(
|
|
150
|
+
e(n) ? (s(), I("span", {
|
|
149
151
|
key: 1,
|
|
150
|
-
class:
|
|
151
|
-
"rds-e-mr-xs":
|
|
152
|
-
"rds-e-link__text--underline": e(
|
|
152
|
+
class: k(["rds-e-link__text", [e(x), {
|
|
153
|
+
"rds-e-mr-xs": B.value,
|
|
154
|
+
"rds-e-link__text--underline": e(b)
|
|
153
155
|
}]])
|
|
154
156
|
}, [
|
|
155
157
|
D(a.$slots, "default", {}, () => [
|
|
156
|
-
R(j(e(
|
|
158
|
+
R(j(e(g)), 1)
|
|
157
159
|
], !0)
|
|
158
160
|
], 2)) : d("", !0),
|
|
159
|
-
e(c) ? (s(), p(
|
|
160
|
-
name: e(
|
|
161
|
-
size: e(
|
|
161
|
+
e(c) ? (s(), p(y, v({ key: 2 }, {
|
|
162
|
+
name: e(n) ? "arrow_right" : "arrow_left",
|
|
163
|
+
size: e(S) ? 16 : void 0
|
|
162
164
|
}, {
|
|
163
165
|
class: ["rds-e-arrow-link__icon--arrow", [
|
|
164
|
-
e(
|
|
165
|
-
{ "rds-flex rds-flex-center-center": e(
|
|
166
|
+
e(n) ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left",
|
|
167
|
+
{ "rds-flex rds-flex-center-center": e(S) }
|
|
166
168
|
]],
|
|
167
169
|
style: e(l) ? { color: e(l) } : void 0
|
|
168
170
|
}), null, 16, ["class", "style"])) : d("", !0),
|
|
169
|
-
e(
|
|
171
|
+
e(n) ? d("", !0) : (s(), I("span", {
|
|
170
172
|
key: 3,
|
|
171
|
-
class:
|
|
173
|
+
class: k(["rds-e-link__text", { "rds-e-ml-xs": B.value }])
|
|
172
174
|
}, [
|
|
173
175
|
D(a.$slots, "default", {}, () => [
|
|
174
|
-
R(j(e(
|
|
176
|
+
R(j(e(g)), 1)
|
|
175
177
|
], !0)
|
|
176
178
|
], 2)),
|
|
177
|
-
e(r).name && e(
|
|
179
|
+
e(r).name && e(n) && !e(c) ? (s(), p(y, v({
|
|
178
180
|
key: 4,
|
|
179
181
|
name: e(r).name
|
|
180
182
|
}, e(r), {
|
|
181
|
-
class: ["rds-e-link__icon-right",
|
|
183
|
+
class: ["rds-e-link__icon-right", C.value],
|
|
182
184
|
style: e(l) ? { color: e(l) } : void 0
|
|
183
185
|
}), null, 16, ["name", "class", "style"])) : d("", !0)
|
|
184
186
|
]),
|
|
185
187
|
_: 3
|
|
186
188
|
}, 8, ["id", "class", "to", "href", "disable", "style", "tabindex", "aria-disabled"]));
|
|
187
189
|
}
|
|
188
|
-
}),
|
|
190
|
+
}), J = /* @__PURE__ */ q(A, [["__scopeId", "data-v-16fa62ca"]]);
|
|
189
191
|
export {
|
|
190
|
-
|
|
192
|
+
J as default
|
|
191
193
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { useSlots as
|
|
2
|
-
import { o as
|
|
3
|
-
import { R as
|
|
4
|
-
import { _ as
|
|
5
|
-
import './style/popover.css';const
|
|
1
|
+
import { useSlots as $, computed as v, ref as g, onBeforeUnmount as D, createElementBlock as r, openBlock as s, createElementVNode as w, createBlock as E, renderSlot as y, Teleport as F, createCommentVNode as T, normalizeStyle as N, normalizeClass as B, unref as z, Fragment as H, renderList as M, toDisplayString as V, nextTick as A } from "vue";
|
|
2
|
+
import { o as I, f as U, s as j, b as W, u as q, a as G } from "./floating-ui.vue-DWAG1g94.js";
|
|
3
|
+
import { R as J } from "./icon-svg-arye8CV8.js";
|
|
4
|
+
import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
5
|
+
import './style/popover.css';const Q = { class: "rds-e-popover" }, X = {
|
|
6
6
|
key: 1,
|
|
7
7
|
class: "rds-e-popover__list"
|
|
8
|
-
},
|
|
8
|
+
}, Y = ["onClick"], Z = { class: "rds-e-popover__item-label" }, ee = {
|
|
9
9
|
__name: "popover",
|
|
10
10
|
props: {
|
|
11
11
|
/**
|
|
@@ -80,106 +80,106 @@ import './style/popover.css';const K = { class: "rds-e-popover" }, Q = {
|
|
|
80
80
|
*/
|
|
81
81
|
"close"
|
|
82
82
|
],
|
|
83
|
-
setup(c, { expose:
|
|
84
|
-
const o = c, u =
|
|
83
|
+
setup(c, { expose: L, emit: O }) {
|
|
84
|
+
const o = c, u = O, R = $(), _ = v(() => !!R.default), n = g(!1), l = g(null), i = g(null), C = v(() => {
|
|
85
85
|
const e = [
|
|
86
|
-
|
|
86
|
+
I(o.offsetSpace)
|
|
87
87
|
];
|
|
88
88
|
return o.autoFlip && e.push(
|
|
89
|
-
|
|
89
|
+
U({
|
|
90
90
|
fallbackPlacements: o.fallbackPlacements.length ? o.fallbackPlacements : void 0
|
|
91
91
|
})
|
|
92
92
|
), e.push(
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
apply({ availableWidth:
|
|
96
|
-
const d = Math.min(o.width,
|
|
93
|
+
j({ padding: 8 }),
|
|
94
|
+
W({
|
|
95
|
+
apply({ availableWidth: S, elements: t }) {
|
|
96
|
+
const d = Math.min(o.width, S - 32);
|
|
97
97
|
Object.assign(t.floating.style, {
|
|
98
98
|
width: `${d}px`
|
|
99
99
|
});
|
|
100
100
|
}
|
|
101
101
|
})
|
|
102
102
|
), e;
|
|
103
|
-
}), { floatingStyles: x, update:
|
|
104
|
-
|
|
103
|
+
}), { floatingStyles: x, update: P } = q(
|
|
104
|
+
l,
|
|
105
105
|
i,
|
|
106
106
|
{
|
|
107
107
|
placement: v(() => o.placement),
|
|
108
|
-
middleware:
|
|
109
|
-
whileElementsMounted:
|
|
108
|
+
middleware: C,
|
|
109
|
+
whileElementsMounted: G
|
|
110
110
|
}
|
|
111
111
|
);
|
|
112
112
|
let p, f, m;
|
|
113
113
|
const k = () => {
|
|
114
114
|
document.removeEventListener("click", p), document.removeEventListener("keydown", f), document.removeEventListener("scroll", m, !0);
|
|
115
115
|
}, a = () => {
|
|
116
|
-
|
|
116
|
+
n.value && (n.value = !1, u("close"), k());
|
|
117
117
|
};
|
|
118
118
|
p = (e) => {
|
|
119
|
-
i.value && !i.value.contains(e.target) &&
|
|
119
|
+
i.value && !i.value.contains(e.target) && l.value && !l.value.contains(e.target) && a();
|
|
120
120
|
}, f = (e) => {
|
|
121
121
|
e.key === "Escape" && a();
|
|
122
122
|
}, m = () => {
|
|
123
|
-
if (!
|
|
124
|
-
const e =
|
|
123
|
+
if (!l.value) return;
|
|
124
|
+
const e = l.value.getBoundingClientRect();
|
|
125
125
|
(e.bottom < 0 || e.top > window.innerHeight) && a();
|
|
126
126
|
};
|
|
127
|
-
const
|
|
128
|
-
|
|
127
|
+
const b = async () => {
|
|
128
|
+
n.value ? a() : (n.value = !0, u("open"), await A(), P(), setTimeout(() => {
|
|
129
129
|
document.addEventListener("click", p), document.addEventListener("keydown", f), o.closeOnTriggerHidden && document.addEventListener("scroll", m, !0);
|
|
130
130
|
}));
|
|
131
131
|
}, h = (e) => {
|
|
132
132
|
u("select", e), a();
|
|
133
133
|
};
|
|
134
|
-
return
|
|
135
|
-
toggle:
|
|
134
|
+
return D(k), L({
|
|
135
|
+
toggle: b,
|
|
136
136
|
close: a,
|
|
137
|
-
isOpen:
|
|
138
|
-
}), (e,
|
|
139
|
-
|
|
137
|
+
isOpen: n
|
|
138
|
+
}), (e, S) => (s(), r("div", Q, [
|
|
139
|
+
w("button", {
|
|
140
140
|
ref_key: "referenceRef",
|
|
141
|
-
ref:
|
|
141
|
+
ref: l,
|
|
142
142
|
class: "rds-e-popover__trigger-btn",
|
|
143
|
-
onClick:
|
|
143
|
+
onClick: b
|
|
144
144
|
}, [
|
|
145
145
|
y(e.$slots, "trigger", {}, void 0, !0)
|
|
146
146
|
], 512),
|
|
147
|
-
(
|
|
147
|
+
(s(), E(F, {
|
|
148
148
|
to: c.teleportTo,
|
|
149
149
|
disabled: !c.teleportTo
|
|
150
150
|
}, [
|
|
151
|
-
|
|
151
|
+
n.value ? (s(), r("div", {
|
|
152
152
|
key: 0,
|
|
153
153
|
ref_key: "floatingRef",
|
|
154
154
|
ref: i,
|
|
155
|
-
class: "rds-e-popover__content",
|
|
156
|
-
style: N(
|
|
155
|
+
class: B(["rds-e-popover__content", { "rds-e-popover__content--no-styles": _.value }]),
|
|
156
|
+
style: N(z(x))
|
|
157
157
|
}, [
|
|
158
|
-
|
|
159
|
-
(
|
|
158
|
+
_.value ? y(e.$slots, "default", { key: 0 }, void 0, !0) : (s(), r("ul", X, [
|
|
159
|
+
(s(!0), r(H, null, M(c.items, (t, d) => y(e.$slots, "item", {
|
|
160
160
|
item: t,
|
|
161
161
|
index: d,
|
|
162
162
|
onSelect: () => h(t)
|
|
163
163
|
}, () => [
|
|
164
|
-
(
|
|
164
|
+
(s(), r("li", {
|
|
165
165
|
key: d,
|
|
166
|
-
class: "rds-e-popover__item rds-body-02",
|
|
167
|
-
onClick: (
|
|
166
|
+
class: B(["rds-e-popover__item rds-body-02-bold", { "rds-e-popover__item--destructive": t.isDestructive }]),
|
|
167
|
+
onClick: (te) => h(t)
|
|
168
168
|
}, [
|
|
169
|
-
t.icon ? (
|
|
169
|
+
t.icon ? (s(), E(J, {
|
|
170
170
|
key: 0,
|
|
171
171
|
class: "rds-e-popover__item-icon",
|
|
172
172
|
name: t.icon
|
|
173
|
-
}, null, 8, ["name"])) :
|
|
174
|
-
|
|
175
|
-
],
|
|
173
|
+
}, null, 8, ["name"])) : T("", !0),
|
|
174
|
+
w("span", Z, V(t.label), 1)
|
|
175
|
+
], 10, Y))
|
|
176
176
|
], !0)), 256))
|
|
177
177
|
]))
|
|
178
|
-
],
|
|
178
|
+
], 6)) : T("", !0)
|
|
179
179
|
], 8, ["to", "disabled"]))
|
|
180
180
|
]));
|
|
181
181
|
}
|
|
182
|
-
},
|
|
182
|
+
}, ae = /* @__PURE__ */ K(ee, [["__scopeId", "data-v-a037baf0"]]);
|
|
183
183
|
export {
|
|
184
|
-
|
|
184
|
+
ae as default
|
|
185
185
|
};
|
|
@@ -1,68 +1,130 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { _ as
|
|
3
|
-
import './style/sidebar.css';function
|
|
4
|
-
const
|
|
1
|
+
import { ref as u, onMounted as L, onUnmounted as A, defineComponent as O, computed as i, createElementBlock as E, openBlock as B, normalizeStyle as Q, normalizeClass as w, createElementVNode as b, createCommentVNode as j, renderSlot as S } from "vue";
|
|
2
|
+
import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
3
|
+
import './style/sidebar.css';function V() {
|
|
4
|
+
const s = {
|
|
5
5
|
mobile: "(min-width: 0px) and (max-width: 719px)",
|
|
6
6
|
tablet: "(min-width: 720px) and (max-width: 1279px)",
|
|
7
7
|
desktop: "(min-width: 1280px) and (max-width: 1438px)",
|
|
8
8
|
desktopLarge: "(min-width: 1440px) and (max-width: 1599px)",
|
|
9
9
|
ultrawide: "(min-width: 1600px)"
|
|
10
|
-
},
|
|
10
|
+
}, c = u({
|
|
11
11
|
mobile: !1,
|
|
12
12
|
tablet: !1,
|
|
13
13
|
desktop: !1,
|
|
14
14
|
desktopLarge: !1,
|
|
15
15
|
ultrawide: !1
|
|
16
|
-
}),
|
|
17
|
-
for (const [
|
|
18
|
-
const
|
|
19
|
-
|
|
16
|
+
}), k = () => {
|
|
17
|
+
for (const [n, a] of Object.entries(s)) {
|
|
18
|
+
const d = window.matchMedia(a);
|
|
19
|
+
c.value[n] = d.matches;
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
return
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
const r = () =>
|
|
27
|
-
return
|
|
22
|
+
return L(() => {
|
|
23
|
+
const n = Object.entries(s).map(([a, d]) => {
|
|
24
|
+
const e = window.matchMedia(d);
|
|
25
|
+
c.value[a] = e.matches;
|
|
26
|
+
const r = () => k();
|
|
27
|
+
return e.addEventListener("change", r), { mediaQuery: e, listener: r };
|
|
28
28
|
});
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
A(() => {
|
|
30
|
+
n.forEach(({ mediaQuery: a, listener: d }) => {
|
|
31
|
+
a.removeEventListener("change", d);
|
|
32
32
|
});
|
|
33
33
|
});
|
|
34
|
-
}),
|
|
34
|
+
}), c;
|
|
35
35
|
}
|
|
36
|
-
const
|
|
36
|
+
const q = ["role", "aria-label"], H = ["aria-expanded"], I = { class: "rds-e-sidebar__sidebar__container" }, U = { class: "rds-e-sidebar__content-switch" }, F = ["aria-hidden"], G = ["aria-hidden"], J = {
|
|
37
37
|
key: 0,
|
|
38
38
|
class: "rds-e-sidebar__spacer"
|
|
39
|
-
},
|
|
39
|
+
}, K = /* @__PURE__ */ O({
|
|
40
40
|
__name: "sidebar",
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
41
|
+
props: {
|
|
42
|
+
/**
|
|
43
|
+
* Etiqueta accesible del landmark.
|
|
44
|
+
* Cambia si hay más de un landmark del mismo tipo en la página.
|
|
45
|
+
* @default 'Barra lateral'
|
|
46
|
+
*/
|
|
47
|
+
ariaLabel: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: "Barra lateral"
|
|
50
|
+
},
|
|
51
|
+
/**
|
|
52
|
+
* Activa/desactiva TODAS las animaciones estructurales (ancho, overlay, clip-path).
|
|
53
|
+
* Útil para entornos de alto rendimiento, tests o si el host gestiona animaciones.
|
|
54
|
+
* @default true
|
|
55
|
+
*/
|
|
56
|
+
enableAnimation: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
default: !0
|
|
59
|
+
},
|
|
60
|
+
/**
|
|
61
|
+
* Activa/desactiva animaciones internas del contenido (switch collapsed/expanded, fades, transforms).
|
|
62
|
+
* Independiente de la animación estructural.
|
|
63
|
+
* @default true
|
|
64
|
+
*/
|
|
65
|
+
enableContentAnimation: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
default: !0
|
|
68
|
+
},
|
|
69
|
+
/**
|
|
70
|
+
* Rol ARIA (landmark) del contenedor.
|
|
71
|
+
* 'complementary' para contenido auxiliar.
|
|
72
|
+
* 'navigation' si representa navegación principal/secundaria.
|
|
73
|
+
* @default 'complementary'
|
|
74
|
+
*/
|
|
75
|
+
landmarkRole: {
|
|
76
|
+
type: String,
|
|
77
|
+
default: "complementary",
|
|
78
|
+
validator: (s) => ["complementary", "navigation"].includes(s)
|
|
79
|
+
},
|
|
80
|
+
/**
|
|
81
|
+
* Duración base de la animación (ms). Si enableAnimation o enableContentAnimation están en false se fuerza a 0 para su ámbito.
|
|
82
|
+
* @default 320
|
|
83
|
+
*/
|
|
84
|
+
transitionDuration: {
|
|
85
|
+
type: Number,
|
|
86
|
+
default: 320
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
emits: ["sidebarChange", "sidebarContentSwitch", "sidebarContentSwitchEnd"],
|
|
90
|
+
setup(s, { expose: c, emit: k }) {
|
|
91
|
+
const n = s, a = k, d = u(), e = u(!0), r = u(!1), m = u(!1), p = u(!0), t = V(), D = i(() => n.transitionDuration ?? 320), y = i(() => n.enableAnimation === !1 ? 0 : D.value), f = i(() => n.enableContentAnimation !== !1), g = i(() => y.value / 1e3), $ = i(() => f.value ? g.value : 0), z = i(() => ({
|
|
92
|
+
"rds-e-sidebar--desktop": t.value.desktop,
|
|
93
|
+
"rds-e-sidebar--desktop-large": t.value.desktopLarge,
|
|
94
|
+
"rds-e-sidebar--mobile": t.value.mobile,
|
|
95
|
+
"rds-e-sidebar--no-content-anim": !f.value,
|
|
96
|
+
"rds-e-sidebar--tablet": t.value.tablet,
|
|
97
|
+
"rds-e-sidebar--ultrawide": t.value.ultrawide
|
|
98
|
+
})), M = i(() => ({
|
|
50
99
|
"rds-e-sidebar__sidebar--collapsed": e.value,
|
|
51
100
|
"rds-e-sidebar__sidebar--expanded": !e.value,
|
|
52
|
-
"rds-e-sidebar__sidebar--
|
|
53
|
-
"rds-e-sidebar__sidebar--
|
|
54
|
-
})),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
e.value = !0, s.value = !1, r.value = !0, l.value = !0, a.value.mobile && (s.value = !0, l.value = !1), a.value.desktop && (s.value = !1), a.value.desktopLarge && (e.value = !1, r.value = !1, l.value = !1), a.value.ultrawide && (e.value = !1, r.value = !1), m();
|
|
101
|
+
"rds-e-sidebar__sidebar--hide": r.value,
|
|
102
|
+
"rds-e-sidebar__sidebar--overlay": m.value
|
|
103
|
+
})), T = i(() => ({
|
|
104
|
+
"--rds-sidebar-transition-duration": `${g.value}s`,
|
|
105
|
+
"--rds-sidebar-content-transition-duration": `${$.value}s`
|
|
106
|
+
})), C = () => {
|
|
107
|
+
a("sidebarChange", e.value);
|
|
60
108
|
};
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
109
|
+
let o;
|
|
110
|
+
const _ = (l) => {
|
|
111
|
+
const v = e.value ? "collapsed" : "expanded", h = l ? "collapsed" : "expanded";
|
|
112
|
+
if (v !== h)
|
|
113
|
+
if (a("sidebarContentSwitch", { from: v, to: h, animated: f.value }), e.value = l, C(), o && window.clearTimeout(o), f.value) {
|
|
114
|
+
const N = y.value;
|
|
115
|
+
o = window.setTimeout(() => {
|
|
116
|
+
a("sidebarContentSwitchEnd", { from: v, to: h, animated: !0 }), o = void 0;
|
|
117
|
+
}, N);
|
|
118
|
+
} else
|
|
119
|
+
a("sidebarContentSwitchEnd", { from: v, to: h, animated: !1 });
|
|
120
|
+
}, x = () => {
|
|
121
|
+
e.value = !0, r.value = !1, m.value = !0, p.value = !0, t.value.mobile && (r.value = !0, p.value = !1), t.value.desktop && (r.value = !1), t.value.desktopLarge && (e.value = !1, m.value = !1, p.value = !1), t.value.ultrawide && (e.value = !1, m.value = !1), C();
|
|
122
|
+
};
|
|
123
|
+
return L(() => {
|
|
124
|
+
x(), window.addEventListener("resize", x);
|
|
125
|
+
}), A(() => {
|
|
126
|
+
window.removeEventListener("resize", x), o && (window.clearTimeout(o), o = void 0);
|
|
127
|
+
}), c({
|
|
66
128
|
/**
|
|
67
129
|
* { boolean } Muestra el estado actual del sidebar.
|
|
68
130
|
*/
|
|
@@ -70,33 +132,55 @@ const z = { class: "rds-e-sidebar__sidebar__container" }, M = {
|
|
|
70
132
|
/**
|
|
71
133
|
* { () => void } Abre el sidebar.
|
|
72
134
|
*/
|
|
73
|
-
openSidebar: () =>
|
|
135
|
+
openSidebar: () => _(!1),
|
|
74
136
|
/**
|
|
75
137
|
* { () => void } Cierra el sidebar.
|
|
76
138
|
*/
|
|
77
|
-
closeSidebar: () =>
|
|
139
|
+
closeSidebar: () => _(!0),
|
|
78
140
|
/**
|
|
79
141
|
* { (state: boolean) => void } Cambia el estado del sidebar.
|
|
80
142
|
*/
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
143
|
+
// Mantener compatibilidad (typo histórico)
|
|
144
|
+
toogleSidebar: () => _(!e.value),
|
|
145
|
+
/**
|
|
146
|
+
* { () => void } Alterna el estado del sidebar. (Nombre correcto)
|
|
147
|
+
*/
|
|
148
|
+
toggleSidebar: () => _(!e.value)
|
|
149
|
+
}), (l, v) => (B(), E("div", {
|
|
150
|
+
class: w(["rds-e-sidebar", z.value]),
|
|
151
|
+
role: s.landmarkRole,
|
|
152
|
+
"aria-label": s.ariaLabel,
|
|
153
|
+
style: Q(T.value)
|
|
84
154
|
}, [
|
|
85
|
-
|
|
155
|
+
b("div", {
|
|
86
156
|
ref_key: "sidebar",
|
|
87
|
-
ref:
|
|
88
|
-
class:
|
|
157
|
+
ref: d,
|
|
158
|
+
class: w(["rds-e-sidebar__sidebar", M.value]),
|
|
159
|
+
"aria-expanded": !e.value
|
|
89
160
|
}, [
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
161
|
+
S(l.$slots, "content", {}, () => [
|
|
162
|
+
b("div", I, [
|
|
163
|
+
b("div", U, [
|
|
164
|
+
b("div", {
|
|
165
|
+
class: w(["rds-e-sidebar__section rds-e-sidebar__section--collapsed", { "is-active": e.value }]),
|
|
166
|
+
"aria-hidden": !e.value
|
|
167
|
+
}, [
|
|
168
|
+
S(l.$slots, "collapsed", {}, void 0, !0)
|
|
169
|
+
], 10, F),
|
|
170
|
+
b("div", {
|
|
171
|
+
class: w(["rds-e-sidebar__section rds-e-sidebar__section--expanded", { "is-active": !e.value }]),
|
|
172
|
+
"aria-hidden": e.value
|
|
173
|
+
}, [
|
|
174
|
+
S(l.$slots, "expanded", {}, void 0, !0)
|
|
175
|
+
], 10, G)
|
|
176
|
+
])
|
|
93
177
|
])
|
|
94
178
|
], !0)
|
|
95
|
-
],
|
|
96
|
-
|
|
97
|
-
],
|
|
179
|
+
], 10, H),
|
|
180
|
+
p.value ? (B(), E("div", J)) : j("", !0)
|
|
181
|
+
], 14, q));
|
|
98
182
|
}
|
|
99
|
-
}),
|
|
183
|
+
}), X = /* @__PURE__ */ R(K, [["__scopeId", "data-v-e66b8e96"]]);
|
|
100
184
|
export {
|
|
101
|
-
|
|
185
|
+
X as default
|
|
102
186
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-v-
|
|
1
|
+
[data-v-1a87a370]: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-breadcrumbs[data-v-1a87a370]{align-items:center;display:inline-flex}.rds-e-breadcrumbs--inverse[data-v-1a87a370]{color:#ffffff4d}.rds-e-breadcrumbs__link[data-v-1a87a370]{font:.875rem/1.25rem RepsolSoleTextRegular;color:#43637d;padding-bottom:.1875rem}.rds-e-breadcrumbs__link--active[data-v-1a87a370]{border-bottom:none;color:#001e37;font-weight:700}.rds-e-breadcrumbs__link--active[data-v-1a87a370]:hover{color:#001e37;opacity:1!important}.rds-e-breadcrumbs__link--inverse[data-v-1a87a370]{border-bottom:.0625rem solid rgba(255,255,255,.3);color:#ffffff4d}.rds-e-breadcrumbs__link--inverse-active[data-v-1a87a370],.rds-e-breadcrumbs__link--inverse-active[data-v-1a87a370]:hover{border-bottom:none;color:#001e37}.rds-e-breadcrumbs__link-dots[data-v-1a87a370]{cursor:pointer}.rds-e-breadcrumbs__link[data-v-1a87a370]:hover{opacity:.75}.rds-e-breadcrumbs__divider[data-v-1a87a370]{margin:0 .5rem}.rds-e-breadcrumbs[data-v-1a87a370] .rds-e-breadcrumbs__link--text{margin-right:4px}
|