@wikicasa-dev/components 1.9.6 → 1.9.7
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/AccessibleSelect.js +1 -1
- package/dist/BaseAutocomplete.js +1 -1
- package/dist/BaseCard.js +1 -1
- package/dist/BaseComplexToggle.js +1 -1
- package/dist/UIKit/BaseCard.vue.d.ts +1 -1
- package/dist/UIKit/BaseComplexToggle.vue.d.ts +2 -1
- package/dist/UIKit/types.d.ts +26 -0
- package/dist/assets/BaseCard.css +1 -1
- package/dist/assets/BaseComplexToggle.css +1 -1
- package/dist/chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.Dex-5kju.js +222 -0
- package/dist/chunks/{BaseAutocomplete.vue_vue_type_script_setup_true_lang.CMkn7bj5.js → BaseAutocomplete.vue_vue_type_script_setup_true_lang.CVHgONL9.js} +33 -33
- package/dist/chunks/useKeyboardController.lxE4H7Vf.js +41 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -2
- package/dist/types.d.ts +0 -26
- package/package.json +1 -1
- package/dist/chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.Bq9DN0Vj.js +0 -257
- package/dist/composables/useKeyboardController.d.ts +0 -12
- package/dist/useKeyboardController.js +0 -39
package/dist/AccessibleSelect.js
CHANGED
package/dist/BaseAutocomplete.js
CHANGED
package/dist/BaseCard.js
CHANGED
|
@@ -32,7 +32,7 @@ import './assets/BaseCard.css';const g = /* @__PURE__ */ p({
|
|
|
32
32
|
_: 3
|
|
33
33
|
}, 8, ["class"]));
|
|
34
34
|
}
|
|
35
|
-
}), I = /* @__PURE__ */ y(g, [["__scopeId", "data-v-
|
|
35
|
+
}), I = /* @__PURE__ */ y(g, [["__scopeId", "data-v-c71d0a69"]]);
|
|
36
36
|
export {
|
|
37
37
|
I as default
|
|
38
38
|
};
|
|
@@ -99,7 +99,7 @@ import './assets/BaseComplexToggle.css';const $ = ["id", "data-cy"], B = ["data-
|
|
|
99
99
|
}, null, 2)
|
|
100
100
|
], 10, $));
|
|
101
101
|
}
|
|
102
|
-
}), N = /* @__PURE__ */ C(H, [["__scopeId", "data-v-
|
|
102
|
+
}), N = /* @__PURE__ */ C(H, [["__scopeId", "data-v-1884a47a"]]);
|
|
103
103
|
export {
|
|
104
104
|
N as default
|
|
105
105
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Nullable } from '@wikicasa-dev/types';
|
|
2
|
-
import { ComplexToggleType, ToggleType
|
|
2
|
+
import { ComplexToggleType, ToggleType } from './types';
|
|
3
|
+
import { TwPrefix } from '../types';
|
|
3
4
|
|
|
4
5
|
type BgPrefix = "bg-w-";
|
|
5
6
|
type BorderPrefix = "border-w-";
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ClassType, Icon } from '@wikicasa-dev/types';
|
|
2
|
+
|
|
3
|
+
export type CardTypes = "mini" | "vertical" | "news" | "";
|
|
4
|
+
export type CardRootTypes = "div" | "article";
|
|
5
|
+
/** Toggle types */
|
|
6
|
+
export type ToggleType<TPayload = unknown, TId = string | number> = {
|
|
7
|
+
id?: TId;
|
|
8
|
+
label: string;
|
|
9
|
+
icon?: Icon;
|
|
10
|
+
checked?: boolean;
|
|
11
|
+
payload?: TPayload;
|
|
12
|
+
};
|
|
13
|
+
export type ComplexToggleType<T = unknown> = {
|
|
14
|
+
leftToggle: ToggleType<T>;
|
|
15
|
+
rightToggle: ToggleType<T>;
|
|
16
|
+
};
|
|
17
|
+
export type BaseTabProps = Partial<{
|
|
18
|
+
"header-title": string;
|
|
19
|
+
class: string;
|
|
20
|
+
"active-tab-panel-idx": number;
|
|
21
|
+
"tab-panel-classes": ClassType;
|
|
22
|
+
}>;
|
|
23
|
+
export type TabType = {
|
|
24
|
+
renderFn: any;
|
|
25
|
+
tabId: string;
|
|
26
|
+
} & BaseTabProps;
|
package/dist/assets/BaseCard.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.card[data-v-
|
|
1
|
+
.card[data-v-c71d0a69]{--card-height: 240px;position:relative;z-index:0;display:flex;max-width:930px;overflow:hidden;border-radius:20px;--tw-shadow: 0 0 8px #2222221F;--tw-shadow-colored: 0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media (min-width: 576px){.card[data-v-c71d0a69]{height:var(--card-height)}}.card .card-body[data-v-c71d0a69]{width:100%;padding:10px 15px}.card .card-img[data-v-c71d0a69]{height:var(--card-height);width:100%;max-width:none}@media (min-width: 576px){.card .card-img[data-v-c71d0a69]{max-width:300px}}.card.vertical[data-v-c71d0a69]{flex-direction:column}@media not all and (min-width: 576px){.card.vertical[data-v-c71d0a69]{min-height:100px;min-width:335px}}@media (min-width: 576px){.card.vertical[data-v-c71d0a69]{height:-moz-fit-content;height:fit-content}}.card.vertical .card-img[data-v-c71d0a69]{width:100%;max-width:100%}@media not all and (min-width: 576px){.card.vertical .card-img[data-v-c71d0a69]{max-width:100%}}.card.mini[data-v-c71d0a69]{max-height:100px;max-width:370px}.card.mini .card-img[data-v-c71d0a69]{max-height:110px;max-width:120px}.card.news-card[data-v-c71d0a69]{height:100px}@media not all and (min-width: 576px){.card.news-card[data-v-c71d0a69]{width:320px}}@media (min-width: 576px){.card.news-card[data-v-c71d0a69]{height:270px;flex-direction:column}}@media not all and (min-width: 576px){.card.news-card .card-img[data-v-c71d0a69]{width:100px;height:100px}}@media (min-width: 576px){.card.news-card .card-img[data-v-c71d0a69]{height:150px;max-width:100%}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.base-complex-toggle[data-v-
|
|
1
|
+
.base-complex-toggle[data-v-1884a47a]{--base-complex-toggle-height: 42px;--base-complex-toggle-width: 230px;--base-complex-toggle-radius: 23px;--base-complex-toggle-border-width: 1px;--base-complex-toggle-active: #E9EFFE;--base-complex-border-color: #B4C2F0;--padding-x-bg: 7px;--padding-y-bg: 8px;--base-complex-toggle-bg-height: var(--base-complex-toggle-height);--base-complex-toggle-bg-width: calc(var(--base-complex-toggle-width) / 2);--base-complex-toggle-bg-padded-width: calc( var(--base-complex-toggle-bg-width) - var(--padding-x-bg) );--base-complex-toggle-bg-padded-height: calc( var(--base-complex-toggle-bg-height) - var(--padding-y-bg) );--padded-bg-dist-from-top: calc(var(--padding-y-bg) / 2);--round-interval: 1px;--translateX-value: calc(var(--base-complex-toggle-bg-width) / 2);--left-translateX: translateX(calc(var(--translateX-value) * -1));--right-translateX: translateX(var(--translateX-value));--toggle-width: var(--base-complex-toggle-width);--toggle-height: var(--base-complex-toggle-height);--toggle-border: var(--base-complex-toggle-border-width) var(--base-complex-toggle-active) solid;--toggle-border-radius: var(--base-complex-toggle-radius)}.base-complex-toggle.lg[data-v-1884a47a]{--base-complex-toggle-height: 56px;--base-complex-toggle-width: 342px;--base-complex-toggle-radius: 28px}@media screen and (max-width: 576px){.base-complex-toggle.mobile[data-v-1884a47a]{--base-complex-toggle-width: 342px }}.base-complex-toggle[data-v-1884a47a]{width:var(--toggle-width);height:var(--toggle-height);border:var(--toggle-border);border-radius:var(--toggle-border-radius)}.base-complex-toggle-active[data-v-1884a47a]{font-weight:500;cursor:default;color:#fff}.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-warning][data-v-1884a47a],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-lavender][data-v-1884a47a],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-secondary][data-v-1884a47a]{color:#222}.base-complex-toggle-active-bg[data-v-1884a47a]{--toggle-bg-width: var(--base-complex-toggle-bg-width);--toggle-bg-height: calc( var(--base-complex-toggle-bg-height) - (2 * var(--base-complex-toggle-border-width)) )}@media screen and (max-width: 576px){.base-complex-toggle-active-bg .mobile[data-v-1884a47a]{--toggle-bg-width: var(--base-complex-toggle-bg-lg-width) }}.base-complex-toggle-active-bg[data-v-1884a47a]{width:var(--toggle-bg-width);height:var(--toggle-bg-height);border-radius:var(--base-complex-toggle-radius);z-index:1}.base-complex-toggle-active-padded-bg[data-v-1884a47a]{--toggle-bg-width: var(--base-complex-toggle-bg-padded-width);--toggle-bg-height: calc( var(--base-complex-toggle-bg-padded-height) - (2 * var(--base-complex-toggle-border-width)) )}@media screen and (max-width: 576px){.base-complex-toggle-active-padded-bg.mobile[data-v-1884a47a]{--toggle-bg-width: var(--base-complex-toggle-bg-padded-width) }}.base-complex-toggle-active-padded-bg[data-v-1884a47a]{border-radius:var(--base-complex-toggle-radius);z-index:1;top:var(--padded-bg-dist-from-top);width:var(--toggle-bg-width);height:var(--toggle-bg-height)}.translateX-left[data-v-1884a47a]{transform:var(--left-translateX)}@media screen and (max-width: 576px){.translateX-left.mobile[data-v-1884a47a]{transform:var(--left-translateX)}}.translateX-right[data-v-1884a47a]{transform:var(--right-translateX)}@media screen and (max-width: 576px){.translateX-right.mobile[data-v-1884a47a]{transform:var(--right-translateX)}}.uikit-bg-w-lavender-bordered[data-v-1884a47a]{--tw-border-opacity: 1;border-color:rgb(180 194 240 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(233 239 254 / var(--tw-bg-opacity))}.uikit-bg-w-cultured-bordered[data-v-1884a47a]{border-width:1px;--tw-border-opacity: 1;border-color:rgb(180 194 240 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(244 247 255 / var(--tw-bg-opacity))}.uikit-bg-facile[data-v-1884a47a]{--tw-bg-opacity: 1;background-color:rgb(255 102 0 / var(--tw-bg-opacity))}.border-facile[data-v-1884a47a]{--tw-border-opacity: 1;border-color:rgb(255 102 0 / var(--tw-border-opacity))}
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
import { h as f, defineComponent as B, ref as w, computed as H, watch as T, onMounted as C, onUnmounted as F, openBlock as a, createElementBlock as s, normalizeClass as l, createElementVNode as o, createCommentVNode as u, withModifiers as k, renderSlot as z, unref as b, createBlock as E, createVNode as P, Fragment as g, renderList as A } from "vue";
|
|
2
|
+
import { Y as O } from "./useKeyboardController.lxE4H7Vf.js";
|
|
3
|
+
import { d as q } from "./ArrowIcon.GDkXwpPs.js";
|
|
4
|
+
import { o as N } from "./DownloadIcon.DHCHRETy.js";
|
|
5
|
+
const j = (d, { attrs: p }) => {
|
|
6
|
+
d = { ...N(), ...d };
|
|
7
|
+
const { width: t, height: e } = d;
|
|
8
|
+
return f(
|
|
9
|
+
"svg",
|
|
10
|
+
{
|
|
11
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
12
|
+
viewBox: "0 0 11.175 13.409",
|
|
13
|
+
width: `${t}`,
|
|
14
|
+
height: `${e}`,
|
|
15
|
+
class: d.class ?? "",
|
|
16
|
+
"aria-hidden": p["aria-hidden"] ?? "true",
|
|
17
|
+
fill: "none",
|
|
18
|
+
stroke: p["stroke-color"] ?? "#FA4F64"
|
|
19
|
+
},
|
|
20
|
+
[
|
|
21
|
+
f("circle", {
|
|
22
|
+
cx: 6,
|
|
23
|
+
cy: 6,
|
|
24
|
+
r: 4.5
|
|
25
|
+
}),
|
|
26
|
+
f("path", {
|
|
27
|
+
"stroke-linejoin": "round",
|
|
28
|
+
d: "M5.8 3.6h.4L6 6.5z"
|
|
29
|
+
}),
|
|
30
|
+
f("circle", {
|
|
31
|
+
cx: 6,
|
|
32
|
+
cy: 8.2,
|
|
33
|
+
r: 0.6,
|
|
34
|
+
fill: p["stroke-color"] ?? "#FA4F64",
|
|
35
|
+
stroke: "none"
|
|
36
|
+
})
|
|
37
|
+
]
|
|
38
|
+
);
|
|
39
|
+
}, D = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" }, S = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], Y = ["innerHTML"], G = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, I = ["innerHTML"], J = ["data-cy"], K = ["id", "aria-selected", "onClick", "onMouseover"], Q = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, R = ["name", "checked", "onInput"], W = ["innerHTML"], X = ["id", "arial-live", "innerHTML"], Z = ["id", "arial-live", "innerHTML"], ti = /* @__PURE__ */ B({
|
|
40
|
+
inheritAttrs: !1,
|
|
41
|
+
__name: "AccessibleSelect",
|
|
42
|
+
props: {
|
|
43
|
+
label: { default: "" },
|
|
44
|
+
dropdownPosition: { default: "bottom" },
|
|
45
|
+
namespace: {},
|
|
46
|
+
options: {},
|
|
47
|
+
modelValue: { default: () => ({
|
|
48
|
+
id: "",
|
|
49
|
+
label: ""
|
|
50
|
+
}) },
|
|
51
|
+
isValid: { type: [Boolean, null], default: null },
|
|
52
|
+
feedback: {},
|
|
53
|
+
closeOnBodyPressed: { type: Boolean, default: !0 },
|
|
54
|
+
border: { type: Boolean, default: !0 }
|
|
55
|
+
},
|
|
56
|
+
emits: ["update:modelValue"],
|
|
57
|
+
setup(d, { emit: p }) {
|
|
58
|
+
const t = d, e = w(!1), V = w(null), v = H(() => !!t.modelValue.label), L = p, { activeIdx: c, selectedIdx: M } = O({
|
|
59
|
+
optionsLength: t.options.length,
|
|
60
|
+
isDropdownOpen: e
|
|
61
|
+
}), h = (i) => {
|
|
62
|
+
e.value = !1, L("update:modelValue", i);
|
|
63
|
+
};
|
|
64
|
+
T(M, (i) => {
|
|
65
|
+
h(t.options[i]), e.value = !1;
|
|
66
|
+
});
|
|
67
|
+
const $ = ({ target: i }) => {
|
|
68
|
+
`${t.namespace}_btn` !== i.id && (e.value = !1);
|
|
69
|
+
};
|
|
70
|
+
return C(() => {
|
|
71
|
+
t.closeOnBodyPressed && document && document.addEventListener("click", $);
|
|
72
|
+
}), F(() => {
|
|
73
|
+
t.closeOnBodyPressed && document && document.removeEventListener("click", $);
|
|
74
|
+
}), (i, n) => (a(), s("div", {
|
|
75
|
+
class: l([i.$attrs.class])
|
|
76
|
+
}, [
|
|
77
|
+
o("div", D, [
|
|
78
|
+
i.label ? (a(), s("label", {
|
|
79
|
+
key: 0,
|
|
80
|
+
id: `${i.namespace}_label`,
|
|
81
|
+
class: l(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
|
|
82
|
+
v.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-top-4 uikit-text-w-gray",
|
|
83
|
+
i.$attrs["label-classes"],
|
|
84
|
+
{ "uikit-left-9": i.$slots.lefticon && !v.value },
|
|
85
|
+
{ "uikit-left-4": !i.$slots.lefticon && !v.value }
|
|
86
|
+
]]),
|
|
87
|
+
innerHTML: i.label
|
|
88
|
+
}, null, 10, S)) : u("", !0),
|
|
89
|
+
i.$slots.lefticon ? (a(), s("span", {
|
|
90
|
+
key: 1,
|
|
91
|
+
class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
|
|
92
|
+
onClick: n[0] || (n[0] = k((r) => e.value = !e.value, ["stop"]))
|
|
93
|
+
}, [
|
|
94
|
+
z(i.$slots, "lefticon")
|
|
95
|
+
])) : u("", !0),
|
|
96
|
+
o("button", {
|
|
97
|
+
id: `${i.namespace}_btn`,
|
|
98
|
+
ref_key: "btnEl",
|
|
99
|
+
ref: V,
|
|
100
|
+
type: "button",
|
|
101
|
+
"data-cy": i.$attrs["data-cy"],
|
|
102
|
+
class: l(["uikit-peer uikit-relative uikit-z-10 uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-transparent uikit-pr-4 uikit-text-left focus-visible:uikit-outline-0", [
|
|
103
|
+
i.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4",
|
|
104
|
+
i.$attrs["btn-classes"]
|
|
105
|
+
]]),
|
|
106
|
+
"aria-required": !!i.$attrs.required,
|
|
107
|
+
role: "combobox",
|
|
108
|
+
"aria-haspopup": "listbox",
|
|
109
|
+
"aria-controls": `${i.namespace}_dropdown`,
|
|
110
|
+
"aria-labelledby": `${i.namespace}_label ${i.namespace}_btn`,
|
|
111
|
+
"aria-expanded": e.value,
|
|
112
|
+
"aria-activedescendant": b(c) >= 0 && e.value ? `${i.namespace}_element_${i.options[b(c)].label}` : "",
|
|
113
|
+
"aria-invalid": t.isValid === !1,
|
|
114
|
+
"aria-describedby": t.isValid === !1 ? `${i.namespace}_invalid_msg` : void 0,
|
|
115
|
+
onClick: n[1] || (n[1] = (r) => e.value = !e.value)
|
|
116
|
+
}, [
|
|
117
|
+
o("span", {
|
|
118
|
+
class: l(["uikit-pointer-events-none uikit-mt-1", i.$attrs["btn-text-classes"]]),
|
|
119
|
+
innerHTML: i.modelValue.visibleLabel || i.modelValue.label
|
|
120
|
+
}, null, 10, Y),
|
|
121
|
+
o("span", G, [
|
|
122
|
+
t.isValid == !1 ? (a(), E(b(j), {
|
|
123
|
+
key: 0,
|
|
124
|
+
class: "uikit-mr-1",
|
|
125
|
+
width: 20,
|
|
126
|
+
height: 20
|
|
127
|
+
})) : u("", !0),
|
|
128
|
+
P(b(q), {
|
|
129
|
+
class: l(["uikit-transition-transform motion-reduce:uikit-transition-none", e.value ? "uikit-rotate-180" : ""]),
|
|
130
|
+
width: 18,
|
|
131
|
+
height: 18,
|
|
132
|
+
"stroke-color": i.isValid ? "#2B5DFF" : i.isValid === !1 ? "#FA4F64" : "#222"
|
|
133
|
+
}, null, 8, ["class", "stroke-color"])
|
|
134
|
+
])
|
|
135
|
+
], 10, U),
|
|
136
|
+
o("fieldset", {
|
|
137
|
+
"aria-hidden": "true",
|
|
138
|
+
class: l(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-cursor-pointer uikit-rounded-xs uikit-bg-white uikit-px-2 uikit-py-0 peer-focus:uikit-border-2", [
|
|
139
|
+
i.$attrs["fieldset-classes"],
|
|
140
|
+
i.isValid ? "uikit-border-w-primary" : i.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary",
|
|
141
|
+
{
|
|
142
|
+
"uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger": i.border
|
|
143
|
+
},
|
|
144
|
+
{ "uikit-border-0 peer-focus:uikit-border-0": !i.border }
|
|
145
|
+
]])
|
|
146
|
+
}, [
|
|
147
|
+
o("legend", {
|
|
148
|
+
class: l([[i.$attrs["legend-classes"], { "uikit-m-0 uikit-w-0": !i.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
|
|
149
|
+
}, [
|
|
150
|
+
i.label ? (a(), s("span", {
|
|
151
|
+
key: 0,
|
|
152
|
+
class: l(["uikit-mx-5px", [i.modelValue.label ? "uikit-invisible" : "uikit-hidden"]]),
|
|
153
|
+
innerHTML: i.label
|
|
154
|
+
}, null, 10, I)) : u("", !0)
|
|
155
|
+
], 2)
|
|
156
|
+
], 2),
|
|
157
|
+
o("ul", {
|
|
158
|
+
"data-cy": i.$attrs["data-cy"] && `${i.$attrs["data-cy"]}_dropdown`,
|
|
159
|
+
role: "listbox",
|
|
160
|
+
tabindex: -1,
|
|
161
|
+
"aria-multiselectable": !1,
|
|
162
|
+
class: l(["uikit-absolute uikit-z-30 uikit-m-0 uikit-max-h-[225px] uikit-w-full uikit-min-w-full uikit-list-none uikit-overflow-y-auto uikit-p-0 uikit-no-scrollbar", [
|
|
163
|
+
{ "uikit-h-0 uikit-w-0 uikit-overflow-hidden": !e.value },
|
|
164
|
+
{
|
|
165
|
+
"uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": e.value
|
|
166
|
+
},
|
|
167
|
+
{ "uikit-bottom-[55px]": i.dropdownPosition === "top" },
|
|
168
|
+
{ "uikit-top-[55px]": i.dropdownPosition === "bottom" },
|
|
169
|
+
i.$attrs["dropdown-classes"]
|
|
170
|
+
]]),
|
|
171
|
+
onClick: n[3] || (n[3] = k(() => {
|
|
172
|
+
}, ["stop"]))
|
|
173
|
+
}, [
|
|
174
|
+
(a(!0), s(g, null, A(i.options, (r, m) => (a(), s("li", {
|
|
175
|
+
id: `${i.namespace}_element_${i.options[m].label}`,
|
|
176
|
+
key: `${r.label}_${m}`,
|
|
177
|
+
role: "option",
|
|
178
|
+
"aria-selected": b(c) === m,
|
|
179
|
+
class: l(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", i.$attrs["dropdown-item-classes"]]),
|
|
180
|
+
onClick: k((y) => h(r), ["stop"]),
|
|
181
|
+
onMouseover: k((y) => c.value = m, ["stop"]),
|
|
182
|
+
onBlur: n[2] || (n[2] = k(() => {
|
|
183
|
+
}, ["stop"]))
|
|
184
|
+
}, [
|
|
185
|
+
o("label", Q, [
|
|
186
|
+
o("input", {
|
|
187
|
+
tabindex: "-1",
|
|
188
|
+
class: "uikit-m-0 uikit-appearance-none",
|
|
189
|
+
name: `${i.namespace}_radio`,
|
|
190
|
+
type: "radio",
|
|
191
|
+
checked: r.label === i.modelValue.label,
|
|
192
|
+
onInput: k((y) => h(r), ["stop"])
|
|
193
|
+
}, null, 40, R),
|
|
194
|
+
o("span", {
|
|
195
|
+
innerHTML: r.label
|
|
196
|
+
}, null, 8, W)
|
|
197
|
+
])
|
|
198
|
+
], 42, K))), 128))
|
|
199
|
+
], 10, J)
|
|
200
|
+
]),
|
|
201
|
+
i.feedback ? (a(), s(g, { key: 0 }, [
|
|
202
|
+
i.feedback.valid ? (a(), s("span", {
|
|
203
|
+
key: 0,
|
|
204
|
+
id: `${i.namespace}_valid_msg`,
|
|
205
|
+
"arial-live": i.$attrs["aria-live"],
|
|
206
|
+
class: "uikit-mt-1 uikit-inline-block uikit-text-12",
|
|
207
|
+
innerHTML: i.isValid ? i.feedback.valid : ""
|
|
208
|
+
}, null, 8, X)) : u("", !0),
|
|
209
|
+
i.feedback.invalid ? (a(), s("span", {
|
|
210
|
+
key: 1,
|
|
211
|
+
id: `${i.namespace}_invalid_msg`,
|
|
212
|
+
"arial-live": i.$attrs["aria-live"],
|
|
213
|
+
class: "uikit-mt-1 uikit-inline-block uikit-text-12 uikit-text-w-danger",
|
|
214
|
+
innerHTML: i.isValid === !1 ? i.feedback.invalid : ""
|
|
215
|
+
}, null, 8, Z)) : u("", !0)
|
|
216
|
+
], 64)) : u("", !0)
|
|
217
|
+
], 2));
|
|
218
|
+
}
|
|
219
|
+
});
|
|
220
|
+
export {
|
|
221
|
+
ti as _
|
|
222
|
+
};
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { defineComponent as L, mergeModels as B, useModel as H, ref as s, computed as k, onBeforeMount as
|
|
2
|
-
import
|
|
3
|
-
import { _ as
|
|
1
|
+
import { defineComponent as L, mergeModels as B, useModel as H, ref as s, computed as k, onBeforeMount as z, watch as f, openBlock as y, createBlock as S, normalizeClass as A, withCtx as c, createVNode as K, renderSlot as V, createElementBlock as N, Fragment as U, renderList as F, unref as W, createElementVNode as Y } from "vue";
|
|
2
|
+
import j from "../BaseInput.js";
|
|
3
|
+
import { _ as q } from "./BaseDropDown.vue_vue_type_script_setup_true_lang.CLzTJaGp.js";
|
|
4
4
|
import "./js.cookie.CkZE2oaL.js";
|
|
5
|
-
import { _ as
|
|
6
|
-
import {
|
|
7
|
-
function
|
|
5
|
+
import { _ as G } from "./SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
|
|
6
|
+
import { Y as J } from "./useKeyboardController.lxE4H7Vf.js";
|
|
7
|
+
function Q(r, m) {
|
|
8
8
|
return (...v) => new Promise((l, d) => {
|
|
9
9
|
r.id && clearTimeout(r.id), r.id = setTimeout(() => {
|
|
10
10
|
try {
|
|
11
|
-
const
|
|
12
|
-
l(
|
|
13
|
-
} catch (
|
|
14
|
-
d(
|
|
11
|
+
const a = m(...v);
|
|
12
|
+
l(a);
|
|
13
|
+
} catch (a) {
|
|
14
|
+
d(a);
|
|
15
15
|
}
|
|
16
16
|
}, r.delay);
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
|
-
const
|
|
19
|
+
const R = ["innerHTML"], oe = /* @__PURE__ */ L({
|
|
20
20
|
__name: "BaseAutocomplete",
|
|
21
21
|
props: /* @__PURE__ */ B({
|
|
22
22
|
border: { type: Boolean, default: !0 },
|
|
@@ -40,11 +40,11 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ L({
|
|
|
40
40
|
}),
|
|
41
41
|
emits: /* @__PURE__ */ B(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
|
|
42
42
|
setup(r, { expose: m, emit: v }) {
|
|
43
|
-
const l = r, d = H(r, "modelValue"),
|
|
44
|
-
|
|
45
|
-
h.value =
|
|
43
|
+
const l = r, d = H(r, "modelValue"), a = v, u = s(""), n = s([]), h = s(null), p = s(!1), o = s(!1), g = s(null), O = k(() => n.value.length);
|
|
44
|
+
z(() => {
|
|
45
|
+
h.value = Q({ delay: 300 }, l.onInputChangeCb);
|
|
46
46
|
});
|
|
47
|
-
const { activeIdx: w, selectedIdx: C } =
|
|
47
|
+
const { activeIdx: w, selectedIdx: C } = J({
|
|
48
48
|
optionsLength: O,
|
|
49
49
|
isDropdownOpen: o,
|
|
50
50
|
disableSpaceHandler: !0
|
|
@@ -83,7 +83,7 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ L({
|
|
|
83
83
|
return "";
|
|
84
84
|
}
|
|
85
85
|
}), D = async (e) => {
|
|
86
|
-
if (console.log("BaseAutocomplete", { v: e }), u.value !== e && (
|
|
86
|
+
if (console.log("BaseAutocomplete", { v: e }), u.value !== e && (a("changedValue", e), u.value = e, !!l.onInputChangeCb)) {
|
|
87
87
|
if (!e || p.value) {
|
|
88
88
|
n.value = [], p.value = !1, C.value = -1, w.value = -1, d.value && (d.value.label = ""), o.value = !1, await h.value(null);
|
|
89
89
|
return;
|
|
@@ -111,13 +111,13 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ L({
|
|
|
111
111
|
e === "closed" ? (o.value = !1, l.cleanupOnClose && (n.value = [])) : e === "open" && n.value.length && (o.value = !0);
|
|
112
112
|
}
|
|
113
113
|
), f(o, (e) => {
|
|
114
|
-
|
|
114
|
+
a("update:dropdownState", e);
|
|
115
115
|
}), m({
|
|
116
116
|
select: () => {
|
|
117
117
|
g.value?.select();
|
|
118
118
|
}
|
|
119
|
-
}), (e, t) => (y(), S(
|
|
120
|
-
class:
|
|
119
|
+
}), (e, t) => (y(), S(q, {
|
|
120
|
+
class: A(e.$attrs["root-classes"]),
|
|
121
121
|
"data-cy": `ac_${e.$attrs.id}`,
|
|
122
122
|
"dropdown-element": "ul",
|
|
123
123
|
"dropdown-classes": [
|
|
@@ -133,14 +133,14 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ L({
|
|
|
133
133
|
],
|
|
134
134
|
"open-dropdown": o.value,
|
|
135
135
|
"keep-state": !n.value.length || l.keepState === "closed" ? "closed" : "opened",
|
|
136
|
-
"onUpdate:dropdownState": t[3] || (t[3] = (
|
|
137
|
-
onClick: t[4] || (t[4] = (
|
|
138
|
-
|
|
136
|
+
"onUpdate:dropdownState": t[3] || (t[3] = (i) => o.value = i),
|
|
137
|
+
onClick: t[4] || (t[4] = (i) => {
|
|
138
|
+
a("click"), E();
|
|
139
139
|
}),
|
|
140
140
|
"close-when-clicked-outside": e.closeDropdownOnBodyPressed
|
|
141
141
|
}, {
|
|
142
142
|
btn_slot: c(() => [
|
|
143
|
-
|
|
143
|
+
K(j, {
|
|
144
144
|
id: `ac_input_${e.$attrs.id}`,
|
|
145
145
|
ref_key: "baseInput",
|
|
146
146
|
ref: g,
|
|
@@ -158,31 +158,31 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ L({
|
|
|
158
158
|
"!uikit-ml-0 !uikit-w-full"
|
|
159
159
|
],
|
|
160
160
|
"fieldset-classes": [I.value, e.$attrs["fieldset-classes"]],
|
|
161
|
-
"onUpdate:modelValue": t[0] || (t[0] = (
|
|
162
|
-
onKeydown: t[1] || (t[1] = (
|
|
163
|
-
onKeydownEnterPressed: t[2] || (t[2] = () =>
|
|
161
|
+
"onUpdate:modelValue": t[0] || (t[0] = (i) => D(i === void 0 ? "" : `${i}`)),
|
|
162
|
+
onKeydown: t[1] || (t[1] = (i) => a("keydown", i)),
|
|
163
|
+
onKeydownEnterPressed: t[2] || (t[2] = () => a("keydownEnterPressed"))
|
|
164
164
|
}, {
|
|
165
165
|
leftIcon: c(() => [
|
|
166
166
|
V(e.$slots, "lefticon")
|
|
167
167
|
]),
|
|
168
|
-
righticon: c(({ handleClean:
|
|
169
|
-
V(e.$slots, "righticon", { handleClean:
|
|
168
|
+
righticon: c(({ handleClean: i }) => [
|
|
169
|
+
V(e.$slots, "righticon", { handleClean: i })
|
|
170
170
|
]),
|
|
171
171
|
_: 3
|
|
172
172
|
}, 8, ["id", "data-cy", "label-text", "model-value", "is-valid", "disabled", "placeholder", "with-left-icon", "with-right-icon", "input-class", "fieldset-classes"])
|
|
173
173
|
]),
|
|
174
174
|
default: c(() => [
|
|
175
|
-
(y(!0), N(U, null, F(n.value, (
|
|
175
|
+
(y(!0), N(U, null, F(n.value, (i, b) => (y(), S(G, {
|
|
176
176
|
key: b,
|
|
177
177
|
active: W(w) === b,
|
|
178
178
|
class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
|
|
179
|
-
onClick: (T) => $(
|
|
179
|
+
onClick: (T) => $(i, b),
|
|
180
180
|
onMouseover: (T) => w.value = b
|
|
181
181
|
}, {
|
|
182
182
|
default: c(() => [
|
|
183
|
-
|
|
184
|
-
innerHTML:
|
|
185
|
-
}, null, 8,
|
|
183
|
+
Y("span", {
|
|
184
|
+
innerHTML: i.label
|
|
185
|
+
}, null, 8, R)
|
|
186
186
|
]),
|
|
187
187
|
_: 2
|
|
188
188
|
}, 1032, ["active", "onClick", "onMouseover"]))), 128))
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { ref as f, onMounted as w, onUnmounted as E, unref as g } from "vue";
|
|
2
|
+
const x = (r) => {
|
|
3
|
+
const { isDropdownOpen: o, disableSpaceHandler: m } = r, n = f(-1), t = f(-1), l = (e) => {
|
|
4
|
+
const v = "ArrowUp", d = "ArrowDown", s = "Enter", i = "Escape", u = " ", c = "PageUp", y = "Home", k = "PageDown", p = "End";
|
|
5
|
+
if (!o.value || ![
|
|
6
|
+
v,
|
|
7
|
+
d,
|
|
8
|
+
s,
|
|
9
|
+
i,
|
|
10
|
+
u,
|
|
11
|
+
c,
|
|
12
|
+
y,
|
|
13
|
+
k,
|
|
14
|
+
p
|
|
15
|
+
].includes(e.key))
|
|
16
|
+
return;
|
|
17
|
+
const a = g(r.optionsLength);
|
|
18
|
+
if (e.key === v)
|
|
19
|
+
n.value = n.value === 0 ? a - 1 : n.value - 1;
|
|
20
|
+
else if (e.key === d)
|
|
21
|
+
n.value = (n.value + 1) % a;
|
|
22
|
+
else if (e.key === s || e.key === u) {
|
|
23
|
+
if (e.key === u && m)
|
|
24
|
+
return;
|
|
25
|
+
t.value = n.value, o.value = !1;
|
|
26
|
+
} else
|
|
27
|
+
e.key === i ? (n.value = t.value, o.value = !1) : e.key === c || e.key === y ? n.value = 0 : (e.key === k || e.key === p) && (n.value = a - 1);
|
|
28
|
+
e.stopPropagation(), e.preventDefault();
|
|
29
|
+
};
|
|
30
|
+
return w(() => {
|
|
31
|
+
document && document.addEventListener("keydown", l);
|
|
32
|
+
}), E(() => {
|
|
33
|
+
document && document.removeEventListener("keydown", l);
|
|
34
|
+
}), {
|
|
35
|
+
activeIdx: n,
|
|
36
|
+
selectedIdx: t
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
export {
|
|
40
|
+
x as Y
|
|
41
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -41,5 +41,6 @@ import { default as SwiperCarousel } from './components/carousel/SwiperCarousel.
|
|
|
41
41
|
import { default as SwiperSlide } from './components/carousel/SwiperSlide.vue';
|
|
42
42
|
import { useValidator } from './composables/useValidator';
|
|
43
43
|
|
|
44
|
+
export * from './UIKit/types';
|
|
44
45
|
export type { ChartOptions, ChartData } from 'chart.js';
|
|
45
46
|
export { DoughnutChart, LineChart, BaseAccordion, BaseAccordionBtn, BaseAccordionContent, BaseAccordionItem, SelectItem, BaseAlert, BaseAutocomplete, BaseBadge, BaseButton, AccessibleSelect, BaseComplexToggle, BaseDropDown, BaseFloatingLabel, BaseCard, BaseIcon, BaseInput, BaseNavItem, BasePagination, BasePaper, BaseSlider, BaseTab, BaseTextarea, BaseToggle, BaseTooltip, BaseUploadFile, CheckboxBtn, CheckboxGroup, RadioButton, RadioGroup, SwiperCarousel, SwiperSlide, IntersectionObservable, IntersectionObserver, useValidator, BaseModal, BaseSnackbar, BaseTabView, BaseShimmerLoader, ShimmerMultiLine, StaticSpinner, };
|
package/dist/index.js
CHANGED
|
@@ -9,9 +9,9 @@ import { _ } from "./chunks/BaseTab.vue_vue_type_script_setup_true_lang.Cu67jd8K
|
|
|
9
9
|
import { _ as S } from "./chunks/BaseTabView.vue_vue_type_script_setup_true_lang.DSlvTOkB.js";
|
|
10
10
|
import { _ as g } from "./chunks/RadioButton.vue_vue_type_script_setup_true_lang.DR6a7QAi.js";
|
|
11
11
|
import { _ as h } from "./chunks/RadioGroup.vue_vue_type_script_setup_true_lang.BYlMCUWP.js";
|
|
12
|
-
import { _ as I } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.
|
|
12
|
+
import { _ as I } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.Dex-5kju.js";
|
|
13
13
|
import { _ as w } from "./chunks/BaseAlert.vue_vue_type_style_index_0_lang.BtqP_iYL.js";
|
|
14
|
-
import { _ as k } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.
|
|
14
|
+
import { _ as k } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.CVHgONL9.js";
|
|
15
15
|
import { _ as D } from "./chunks/BaseBadge.vue_vue_type_style_index_0_lang.BOA1gBKu.js";
|
|
16
16
|
import { _ as G } from "./chunks/BaseButton.vue_vue_type_script_setup_true_lang.dlLTK59i.js";
|
|
17
17
|
import { default as O } from "./BaseCard.js";
|
package/dist/types.d.ts
CHANGED
|
@@ -1,27 +1 @@
|
|
|
1
|
-
import { ClassType, Icon } from '@wikicasa-dev/types';
|
|
2
|
-
|
|
3
1
|
export type TwPrefix = "uikit-";
|
|
4
|
-
export type BaseTabProps = Partial<{
|
|
5
|
-
"header-title": string;
|
|
6
|
-
class: string;
|
|
7
|
-
"active-tab-panel-idx": number;
|
|
8
|
-
"tab-panel-classes": ClassType;
|
|
9
|
-
}>;
|
|
10
|
-
export type TabType = {
|
|
11
|
-
renderFn: any;
|
|
12
|
-
tabId: string;
|
|
13
|
-
} & BaseTabProps;
|
|
14
|
-
export type CardTypes = "mini" | "vertical" | "news" | "";
|
|
15
|
-
export type CardRootTypes = "div" | "article";
|
|
16
|
-
/** Toggle types */
|
|
17
|
-
export type ToggleType<TPayload = unknown, TId = string | number> = {
|
|
18
|
-
id?: TId;
|
|
19
|
-
label: string;
|
|
20
|
-
icon?: Icon;
|
|
21
|
-
checked?: boolean;
|
|
22
|
-
payload?: TPayload;
|
|
23
|
-
};
|
|
24
|
-
export type ComplexToggleType<T = unknown> = {
|
|
25
|
-
leftToggle: ToggleType<T>;
|
|
26
|
-
rightToggle: ToggleType<T>;
|
|
27
|
-
};
|
package/package.json
CHANGED
|
@@ -1,257 +0,0 @@
|
|
|
1
|
-
import { h as V, ref as L, onMounted as B, onUnmounted as E, unref as y, defineComponent as T, computed as C, watch as F, openBlock as n, createElementBlock as k, normalizeClass as s, createElementVNode as r, createCommentVNode as b, withModifiers as f, renderSlot as P, createBlock as A, createVNode as z, Fragment as H, renderList as D } from "vue";
|
|
2
|
-
import { d as O } from "./ArrowIcon.GDkXwpPs.js";
|
|
3
|
-
import { o as q } from "./DownloadIcon.DHCHRETy.js";
|
|
4
|
-
const N = (u, { attrs: d }) => {
|
|
5
|
-
u = { ...q(), ...u };
|
|
6
|
-
const { width: a, height: i } = u;
|
|
7
|
-
return V(
|
|
8
|
-
"svg",
|
|
9
|
-
{
|
|
10
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
11
|
-
viewBox: "0 0 11.175 13.409",
|
|
12
|
-
width: `${a}`,
|
|
13
|
-
height: `${i}`,
|
|
14
|
-
class: u.class ?? "",
|
|
15
|
-
"aria-hidden": d["aria-hidden"] ?? "true",
|
|
16
|
-
fill: "none",
|
|
17
|
-
stroke: d["stroke-color"] ?? "#FA4F64"
|
|
18
|
-
},
|
|
19
|
-
[
|
|
20
|
-
V("circle", {
|
|
21
|
-
cx: 6,
|
|
22
|
-
cy: 6,
|
|
23
|
-
r: 4.5
|
|
24
|
-
}),
|
|
25
|
-
V("path", {
|
|
26
|
-
"stroke-linejoin": "round",
|
|
27
|
-
d: "M5.8 3.6h.4L6 6.5z"
|
|
28
|
-
}),
|
|
29
|
-
V("circle", {
|
|
30
|
-
cx: 6,
|
|
31
|
-
cy: 8.2,
|
|
32
|
-
r: 0.6,
|
|
33
|
-
fill: d["stroke-color"] ?? "#FA4F64",
|
|
34
|
-
stroke: "none"
|
|
35
|
-
})
|
|
36
|
-
]
|
|
37
|
-
);
|
|
38
|
-
}, S = (u) => {
|
|
39
|
-
const { isDropdownOpen: d, disableSpaceHandler: a } = u, i = L(-1), h = L(-1), m = (t) => {
|
|
40
|
-
const p = "ArrowUp", g = "ArrowDown", v = "Enter", w = "Escape", e = " ", l = "PageUp", o = "Home", c = "PageDown", $ = "End";
|
|
41
|
-
if (!d.value || ![
|
|
42
|
-
p,
|
|
43
|
-
g,
|
|
44
|
-
v,
|
|
45
|
-
w,
|
|
46
|
-
e,
|
|
47
|
-
l,
|
|
48
|
-
o,
|
|
49
|
-
c,
|
|
50
|
-
$
|
|
51
|
-
].includes(t.key))
|
|
52
|
-
return;
|
|
53
|
-
const M = y(u.optionsLength);
|
|
54
|
-
if (t.key === p)
|
|
55
|
-
i.value = i.value === 0 ? M - 1 : i.value - 1;
|
|
56
|
-
else if (t.key === g)
|
|
57
|
-
i.value = (i.value + 1) % M;
|
|
58
|
-
else if (t.key === v || t.key === e) {
|
|
59
|
-
if (t.key === e && a)
|
|
60
|
-
return;
|
|
61
|
-
h.value = i.value, d.value = !1;
|
|
62
|
-
} else
|
|
63
|
-
t.key === w ? (i.value = h.value, d.value = !1) : t.key === l || t.key === o ? i.value = 0 : (t.key === c || t.key === $) && (i.value = M - 1);
|
|
64
|
-
t.stopPropagation(), t.preventDefault();
|
|
65
|
-
};
|
|
66
|
-
return B(() => {
|
|
67
|
-
document && document.addEventListener("keydown", m);
|
|
68
|
-
}), E(() => {
|
|
69
|
-
document && document.removeEventListener("keydown", m);
|
|
70
|
-
}), {
|
|
71
|
-
activeIdx: i,
|
|
72
|
-
selectedIdx: h
|
|
73
|
-
};
|
|
74
|
-
}, U = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" }, j = ["id", "innerHTML"], I = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], Y = ["innerHTML"], G = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, J = ["innerHTML"], K = ["data-cy"], Q = ["id", "aria-selected", "onClick", "onMouseover"], R = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, W = ["name", "checked", "onInput"], X = ["innerHTML"], Z = ["id", "arial-live", "innerHTML"], _ = ["id", "arial-live", "innerHTML"], te = /* @__PURE__ */ T({
|
|
75
|
-
inheritAttrs: !1,
|
|
76
|
-
__name: "AccessibleSelect",
|
|
77
|
-
props: {
|
|
78
|
-
label: { default: "" },
|
|
79
|
-
dropdownPosition: { default: "bottom" },
|
|
80
|
-
namespace: {},
|
|
81
|
-
options: {},
|
|
82
|
-
modelValue: { default: () => ({
|
|
83
|
-
id: "",
|
|
84
|
-
label: ""
|
|
85
|
-
}) },
|
|
86
|
-
isValid: { type: [Boolean, null], default: null },
|
|
87
|
-
feedback: {},
|
|
88
|
-
closeOnBodyPressed: { type: Boolean, default: !0 },
|
|
89
|
-
border: { type: Boolean, default: !0 }
|
|
90
|
-
},
|
|
91
|
-
emits: ["update:modelValue"],
|
|
92
|
-
setup(u, { emit: d }) {
|
|
93
|
-
const a = u, i = L(!1), h = L(null), m = C(() => !!a.modelValue.label), t = d, { activeIdx: p, selectedIdx: g } = S({
|
|
94
|
-
optionsLength: a.options.length,
|
|
95
|
-
isDropdownOpen: i
|
|
96
|
-
}), v = (e) => {
|
|
97
|
-
i.value = !1, t("update:modelValue", e);
|
|
98
|
-
};
|
|
99
|
-
F(g, (e) => {
|
|
100
|
-
v(a.options[e]), i.value = !1;
|
|
101
|
-
});
|
|
102
|
-
const w = ({ target: e }) => {
|
|
103
|
-
`${a.namespace}_btn` !== e.id && (i.value = !1);
|
|
104
|
-
};
|
|
105
|
-
return B(() => {
|
|
106
|
-
a.closeOnBodyPressed && document && document.addEventListener("click", w);
|
|
107
|
-
}), E(() => {
|
|
108
|
-
a.closeOnBodyPressed && document && document.removeEventListener("click", w);
|
|
109
|
-
}), (e, l) => (n(), k("div", {
|
|
110
|
-
class: s([e.$attrs.class])
|
|
111
|
-
}, [
|
|
112
|
-
r("div", U, [
|
|
113
|
-
e.label ? (n(), k("label", {
|
|
114
|
-
key: 0,
|
|
115
|
-
id: `${e.namespace}_label`,
|
|
116
|
-
class: s(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
|
|
117
|
-
m.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-top-4 uikit-text-w-gray",
|
|
118
|
-
e.$attrs["label-classes"],
|
|
119
|
-
{ "uikit-left-9": e.$slots.lefticon && !m.value },
|
|
120
|
-
{ "uikit-left-4": !e.$slots.lefticon && !m.value }
|
|
121
|
-
]]),
|
|
122
|
-
innerHTML: e.label
|
|
123
|
-
}, null, 10, j)) : b("", !0),
|
|
124
|
-
e.$slots.lefticon ? (n(), k("span", {
|
|
125
|
-
key: 1,
|
|
126
|
-
class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
|
|
127
|
-
onClick: l[0] || (l[0] = f((o) => i.value = !i.value, ["stop"]))
|
|
128
|
-
}, [
|
|
129
|
-
P(e.$slots, "lefticon")
|
|
130
|
-
])) : b("", !0),
|
|
131
|
-
r("button", {
|
|
132
|
-
id: `${e.namespace}_btn`,
|
|
133
|
-
ref_key: "btnEl",
|
|
134
|
-
ref: h,
|
|
135
|
-
type: "button",
|
|
136
|
-
"data-cy": e.$attrs["data-cy"],
|
|
137
|
-
class: s(["uikit-peer uikit-relative uikit-z-10 uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-transparent uikit-pr-4 uikit-text-left focus-visible:uikit-outline-0", [
|
|
138
|
-
e.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4",
|
|
139
|
-
e.$attrs["btn-classes"]
|
|
140
|
-
]]),
|
|
141
|
-
"aria-required": !!e.$attrs.required,
|
|
142
|
-
role: "combobox",
|
|
143
|
-
"aria-haspopup": "listbox",
|
|
144
|
-
"aria-controls": `${e.namespace}_dropdown`,
|
|
145
|
-
"aria-labelledby": `${e.namespace}_label ${e.namespace}_btn`,
|
|
146
|
-
"aria-expanded": i.value,
|
|
147
|
-
"aria-activedescendant": y(p) >= 0 && i.value ? `${e.namespace}_element_${e.options[y(p)].label}` : "",
|
|
148
|
-
"aria-invalid": a.isValid === !1,
|
|
149
|
-
"aria-describedby": a.isValid === !1 ? `${e.namespace}_invalid_msg` : void 0,
|
|
150
|
-
onClick: l[1] || (l[1] = (o) => i.value = !i.value)
|
|
151
|
-
}, [
|
|
152
|
-
r("span", {
|
|
153
|
-
class: s(["uikit-pointer-events-none uikit-mt-1", e.$attrs["btn-text-classes"]]),
|
|
154
|
-
innerHTML: e.modelValue.visibleLabel || e.modelValue.label
|
|
155
|
-
}, null, 10, Y),
|
|
156
|
-
r("span", G, [
|
|
157
|
-
a.isValid == !1 ? (n(), A(y(N), {
|
|
158
|
-
key: 0,
|
|
159
|
-
class: "uikit-mr-1",
|
|
160
|
-
width: 20,
|
|
161
|
-
height: 20
|
|
162
|
-
})) : b("", !0),
|
|
163
|
-
z(y(O), {
|
|
164
|
-
class: s(["uikit-transition-transform motion-reduce:uikit-transition-none", i.value ? "uikit-rotate-180" : ""]),
|
|
165
|
-
width: 18,
|
|
166
|
-
height: 18,
|
|
167
|
-
"stroke-color": e.isValid ? "#2B5DFF" : e.isValid === !1 ? "#FA4F64" : "#222"
|
|
168
|
-
}, null, 8, ["class", "stroke-color"])
|
|
169
|
-
])
|
|
170
|
-
], 10, I),
|
|
171
|
-
r("fieldset", {
|
|
172
|
-
"aria-hidden": "true",
|
|
173
|
-
class: s(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-cursor-pointer uikit-rounded-xs uikit-bg-white uikit-px-2 uikit-py-0 peer-focus:uikit-border-2", [
|
|
174
|
-
e.$attrs["fieldset-classes"],
|
|
175
|
-
e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary",
|
|
176
|
-
{
|
|
177
|
-
"uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger": e.border
|
|
178
|
-
},
|
|
179
|
-
{ "uikit-border-0 peer-focus:uikit-border-0": !e.border }
|
|
180
|
-
]])
|
|
181
|
-
}, [
|
|
182
|
-
r("legend", {
|
|
183
|
-
class: s([[e.$attrs["legend-classes"], { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
|
|
184
|
-
}, [
|
|
185
|
-
e.label ? (n(), k("span", {
|
|
186
|
-
key: 0,
|
|
187
|
-
class: s(["uikit-mx-5px", [e.modelValue.label ? "uikit-invisible" : "uikit-hidden"]]),
|
|
188
|
-
innerHTML: e.label
|
|
189
|
-
}, null, 10, J)) : b("", !0)
|
|
190
|
-
], 2)
|
|
191
|
-
], 2),
|
|
192
|
-
r("ul", {
|
|
193
|
-
"data-cy": e.$attrs["data-cy"] && `${e.$attrs["data-cy"]}_dropdown`,
|
|
194
|
-
role: "listbox",
|
|
195
|
-
tabindex: -1,
|
|
196
|
-
"aria-multiselectable": !1,
|
|
197
|
-
class: s(["uikit-absolute uikit-z-30 uikit-m-0 uikit-max-h-[225px] uikit-w-full uikit-min-w-full uikit-list-none uikit-overflow-y-auto uikit-p-0 uikit-no-scrollbar", [
|
|
198
|
-
{ "uikit-h-0 uikit-w-0 uikit-overflow-hidden": !i.value },
|
|
199
|
-
{
|
|
200
|
-
"uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": i.value
|
|
201
|
-
},
|
|
202
|
-
{ "uikit-bottom-[55px]": e.dropdownPosition === "top" },
|
|
203
|
-
{ "uikit-top-[55px]": e.dropdownPosition === "bottom" },
|
|
204
|
-
e.$attrs["dropdown-classes"]
|
|
205
|
-
]]),
|
|
206
|
-
onClick: l[3] || (l[3] = f(() => {
|
|
207
|
-
}, ["stop"]))
|
|
208
|
-
}, [
|
|
209
|
-
(n(!0), k(H, null, D(e.options, (o, c) => (n(), k("li", {
|
|
210
|
-
id: `${e.namespace}_element_${e.options[c].label}`,
|
|
211
|
-
key: `${o.label}_${c}`,
|
|
212
|
-
role: "option",
|
|
213
|
-
"aria-selected": y(p) === c,
|
|
214
|
-
class: s(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", e.$attrs["dropdown-item-classes"]]),
|
|
215
|
-
onClick: f(($) => v(o), ["stop"]),
|
|
216
|
-
onMouseover: f(($) => p.value = c, ["stop"]),
|
|
217
|
-
onBlur: l[2] || (l[2] = f(() => {
|
|
218
|
-
}, ["stop"]))
|
|
219
|
-
}, [
|
|
220
|
-
r("label", R, [
|
|
221
|
-
r("input", {
|
|
222
|
-
tabindex: "-1",
|
|
223
|
-
class: "uikit-m-0 uikit-appearance-none",
|
|
224
|
-
name: `${e.namespace}_radio`,
|
|
225
|
-
type: "radio",
|
|
226
|
-
checked: o.label === e.modelValue.label,
|
|
227
|
-
onInput: f(($) => v(o), ["stop"])
|
|
228
|
-
}, null, 40, W),
|
|
229
|
-
r("span", {
|
|
230
|
-
innerHTML: o.label
|
|
231
|
-
}, null, 8, X)
|
|
232
|
-
])
|
|
233
|
-
], 42, Q))), 128))
|
|
234
|
-
], 10, K)
|
|
235
|
-
]),
|
|
236
|
-
e.feedback ? (n(), k(H, { key: 0 }, [
|
|
237
|
-
e.feedback.valid ? (n(), k("span", {
|
|
238
|
-
key: 0,
|
|
239
|
-
id: `${e.namespace}_valid_msg`,
|
|
240
|
-
"arial-live": e.$attrs["aria-live"],
|
|
241
|
-
class: "uikit-mt-1 uikit-inline-block uikit-text-12",
|
|
242
|
-
innerHTML: e.isValid ? e.feedback.valid : ""
|
|
243
|
-
}, null, 8, Z)) : b("", !0),
|
|
244
|
-
e.feedback.invalid ? (n(), k("span", {
|
|
245
|
-
key: 1,
|
|
246
|
-
id: `${e.namespace}_invalid_msg`,
|
|
247
|
-
"arial-live": e.$attrs["aria-live"],
|
|
248
|
-
class: "uikit-mt-1 uikit-inline-block uikit-text-12 uikit-text-w-danger",
|
|
249
|
-
innerHTML: e.isValid === !1 ? e.feedback.invalid : ""
|
|
250
|
-
}, null, 8, _)) : b("", !0)
|
|
251
|
-
], 64)) : b("", !0)
|
|
252
|
-
], 2));
|
|
253
|
-
}
|
|
254
|
-
});
|
|
255
|
-
export {
|
|
256
|
-
te as _
|
|
257
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Ref } from 'vue';
|
|
2
|
-
|
|
3
|
-
interface KeyboardControllerProps {
|
|
4
|
-
optionsLength: Ref<number> | number;
|
|
5
|
-
isDropdownOpen: Ref<boolean>;
|
|
6
|
-
disableSpaceHandler?: boolean;
|
|
7
|
-
}
|
|
8
|
-
export declare const useKeyboardController: (props: KeyboardControllerProps) => {
|
|
9
|
-
activeIdx: Ref<number>;
|
|
10
|
-
selectedIdx: Ref<number>;
|
|
11
|
-
};
|
|
12
|
-
export {};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { ref as k, onMounted as p, onUnmounted as K, unref as m } from "vue";
|
|
2
|
-
const Y = (l) => {
|
|
3
|
-
const { isDropdownOpen: o, disableSpaceHandler: _ } = l, n = k(-1), t = k(-1), u = (e) => {
|
|
4
|
-
const r = "ArrowUp", c = "ArrowDown", E = "Enter", d = "Escape", s = " ", v = "PageUp", i = "Home", y = "PageDown", f = "End";
|
|
5
|
-
if (!o.value || ![
|
|
6
|
-
r,
|
|
7
|
-
c,
|
|
8
|
-
E,
|
|
9
|
-
d,
|
|
10
|
-
s,
|
|
11
|
-
v,
|
|
12
|
-
i,
|
|
13
|
-
y,
|
|
14
|
-
f
|
|
15
|
-
].includes(e.key))
|
|
16
|
-
return;
|
|
17
|
-
const a = m(l.optionsLength);
|
|
18
|
-
if (e.key === r)
|
|
19
|
-
n.value = n.value === 0 ? a - 1 : n.value - 1;
|
|
20
|
-
else if (e.key === c)
|
|
21
|
-
n.value = (n.value + 1) % a;
|
|
22
|
-
else if (e.key === E || e.key === s) {
|
|
23
|
-
if (e.key === s && _) return;
|
|
24
|
-
t.value = n.value, o.value = !1;
|
|
25
|
-
} else e.key === d ? (n.value = t.value, o.value = !1) : e.key === v || e.key === i ? n.value = 0 : (e.key === y || e.key === f) && (n.value = a - 1);
|
|
26
|
-
e.stopPropagation(), e.preventDefault();
|
|
27
|
-
};
|
|
28
|
-
return p(() => {
|
|
29
|
-
document && document.addEventListener("keydown", u);
|
|
30
|
-
}), K(() => {
|
|
31
|
-
document && document.removeEventListener("keydown", u);
|
|
32
|
-
}), {
|
|
33
|
-
activeIdx: n,
|
|
34
|
-
selectedIdx: t
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
export {
|
|
38
|
-
Y as useKeyboardController
|
|
39
|
-
};
|