vue-uswds
Version:
Vue 3 implementation of the USWDS (U.S. Web Design System) component library
1,721 lines • 272 kB
JavaScript
import { createBlock as H, openBlock as r, resolveDynamicComponent as Oe, withCtx as N, renderSlot as p, createElementBlock as f, mergeProps as fe, withKeys as re, withModifiers as oe, ref as P, reactive as nt, toRef as ue, watch as se, provide as ae, computed as d, normalizeClass as k, getCurrentInstance as fa, inject as q, onBeforeUnmount as Ne, Fragment as Y, createVNode as ve, createElementVNode as $, unref as l, createTextVNode as A, toDisplayString as I, createCommentVNode as B, readonly as we, useSlots as Me, renderList as ie, withDirectives as xe, vModelCheckbox as va, nextTick as Ce, isRef as ma, vModelText as lt, vShow as Ze, useAttrs as Ht, onMounted as Pe, vModelDynamic as Ot, vModelSelect as ga, defineComponent as pa, onScopeDispose as ha, h as wt, shallowRef as Be, toRaw as ba, normalizeStyle as xt, Teleport as Ft, createSlots as Lt, vModelRadio as ya, resolveComponent as $a, createStaticVNode as ka } from "vue";
import Sa from "just-kebab-case";
import Ca from "just-split";
import { watchDebounced as _a, useActiveElement as wa, onClickOutside as Ke, onKeyStroke as qe, useFocus as xa, unrefElement as zt, useMediaQuery as Mt, useMutationObserver as La, useIntersectionObserver as Ma, tryOnScopeDispose as Da, refDebounced as Ia } from "@vueuse/core";
import { createFocusTrap as Gt } from "focus-trap";
import { startOfWeek as Tt, startOfMonth as Ua, endOfWeek as Nt, endOfMonth as Aa, isSameMonth as ze, differenceInCalendarDays as Ba, addDays as Re, subDays as He, addYears as $t, setDate as Pt, isSameDay as Rt, subYears as kt, addMonths as Xe, subMonths as Qe, isBefore as mt, startOfDay as Oa, isAfter as gt } from "date-fns";
import { createNewSortInstance as Ta } from "fast-sort";
import { autoUpdate as Na, computePosition as Pa, offset as Ra, inline as qa, flip as Va } from "@floating-ui/dom";
const De = {
__name: "BaseHeading",
props: {
tag: {
type: String,
default: "h2",
validator(e) {
const t = ["h1", "h2", "h3", "h4", "h5", "h6"].includes(e);
return t || console.warn(`'${e}' is not a valid HTML heading element`), t;
}
}
},
setup(e) {
return (t, a) => (r(), H(Oe(e.tag), null, {
default: N(() => [
p(t.$slots, "default")
]),
_: 3
}));
}
}, Ve = ":", Ue = "grid-", ot = "/assets/img", Dt = "/assets/img/sprite.svg", Wt = null, Kt = "64em", Ea = "30em", Ya = "0000-01-01", ja = "9999-12-31", Ha = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/, Fa = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/, za = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
], Ga = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
], Wa = [
"S",
"M",
"T",
"W",
"Th",
"Fr",
"S"
], Ge = 12, Jt = "vuswds-id-", Je = (e, t) => {
const a = e.__vccOpts || e;
for (const [s, n] of t)
a[s] = n;
return a;
}, Ka = {
name: "BaseLink",
inject: {
globalRouterComponentName: {
from: "vueUswds.routerComponentName",
default: Wt
}
},
inheritAttrs: !1,
props: {
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
}
},
data() {
return {
// Router link checks here instead of computed to avoid Vue warning
// about $nuxt and $router not being defined on the instance when they
// are not installed.
isNuxt: this == null ? void 0 : this.$nuxt,
isVueRouter: this == null ? void 0 : this.$router
};
},
computed: {
isHrefLink() {
return !!this.href || typeof this.to == "string" && this.to.startsWith("http");
},
linkComponent() {
return this.routerComponentName ? this.routerComponentName : this.globalRouterComponentName ? this.globalRouterComponentName : this.isNuxt ? "nuxt-link" : this.isVueRouter ? "router-link" : "a";
}
},
methods: {
handleSpaceKeydown(e) {
var t, a;
(a = (t = this.$attrs) == null ? void 0 : t.class) != null && a.includes("usa-button") && e.target.click();
}
}
}, Ja = ["href"];
function Xa(e, t, a, s, n, o) {
return o.isHrefLink ? (r(), f("a", fe({ key: 0 }, e.$attrs, {
href: a.href || a.to,
onKeydown: t[0] || (t[0] = re(oe((...i) => o.handleSpaceKeydown && o.handleSpaceKeydown(...i), ["prevent"]), ["space"]))
}), [
p(e.$slots, "default")
], 16, Ja)) : (r(), H(Oe(o.linkComponent), fe({ key: 1 }, e.$attrs, {
to: a.to,
onKeydown: re(oe(o.handleSpaceKeydown, ["prevent"]), ["space"])
}), {
default: N(() => [
p(e.$slots, "default")
]),
_: 3
}, 16, ["to", "onKeydown"]));
}
const _e = /* @__PURE__ */ Je(Ka, [["render", Xa]]);
function It(e, t = !1) {
const a = P(t), s = nt(e), n = (g, S) => {
if (s[g] === void 0 && (s[g] = S), !a.value)
for (const v in s)
v !== g && S && (s[v] = !1);
}, o = (g) => {
delete s[g];
}, i = (g) => {
s[g] = !1;
}, u = (g) => {
if (s[g] = !0, !a.value)
for (const S in s)
S !== g && i(S);
};
return {
registerAccordionItem: n,
unregisterAccordionItem: o,
openItem: u,
closeItem: i,
toggleItem: (g) => {
s[g] ? i(g) : u(g);
},
closeAllItems: () => {
for (const g in s)
i(g);
}
};
}
const Qa = ["aria-multiselectable"], _u = {
__name: "UsaAccordion",
props: {
bordered: {
type: Boolean,
default: !1
},
multiselectable: {
type: Boolean,
default: !1
},
headingTag: {
type: String,
default: "h2"
}
},
emits: ["update:accordionItems"],
setup(e, { expose: t, emit: a }) {
const s = a, n = e, o = nt({}), i = ue(n, "multiselectable"), {
registerAccordionItem: u,
unregisterAccordionItem: m,
openItem: c,
closeItem: g,
toggleItem: S
} = It(o, i);
se(o, () => {
s("update:accordionItems", o);
}), ae(
"accordionHeadingTag",
d(() => n.headingTag)
), ae("registerAccordionItem", u), ae("unregisterAccordionItem", m), ae("toggleItem", S), ae("accordionItems", o);
const v = d(() => [{ "usa-accordion--bordered": n.bordered }]);
return t({
openItem: c,
closeItem: g,
toggleItem: S
}), (h, y) => (r(), f("div", {
class: k(["usa-accordion", v.value]),
"aria-multiselectable": i.value || null
}, [
p(h.$slots, "default")
], 10, Qa));
}
}, tt = (e, t) => Object.prototype.hasOwnProperty.call(e, t), We = (e) => Sa(e), St = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), Ut = (e, t) => Ca(e, t), pt = {};
function ye(e = "") {
var n, o, i;
const t = fa(), a = (i = (o = (n = t == null ? void 0 : t.appContext) == null ? void 0 : n.config) == null ? void 0 : o.globalProperties) == null ? void 0 : i.$route, s = a != null && a.path && We(a.path) ? We(a.path) : "global";
return pt[s] || (pt[s] = 0), `${Jt}${s}-${We(e)}-${++pt[s]}`;
}
const Za = ["aria-expanded", "aria-controls"], es = ["id", "hidden"], wu = {
__name: "UsaAccordionItem",
props: {
id: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
open: {
type: Boolean,
default: !1
},
customClasses: {
type: Object,
default: () => ({
heading: [],
button: [],
content: []
})
}
},
setup(e) {
const t = q("accordionHeadingTag"), a = q("registerAccordionItem"), s = q("unregisterAccordionItem"), n = q("toggleItem"), o = q("accordionItems"), i = e, u = d(() => i.id || ye("usa-accordion-item")), m = ue(o, u.value);
return a(u.value, i.open), Ne(() => {
s(u.value);
}), (c, g) => {
var S, v;
return r(), f(Y, null, [
ve(l(De), fe(c.$attrs, {
class: ["usa-accordion__heading", (S = e.customClasses) == null ? void 0 : S.heading],
tag: l(t)
}), {
default: N(() => {
var h;
return [
$("button", {
type: "button",
class: k(["usa-accordion__button", (h = e.customClasses) == null ? void 0 : h.button]),
"aria-expanded": m.value,
"aria-controls": u.value,
onClick: g[0] || (g[0] = (y) => l(n)(u.value))
}, [
p(c.$slots, "label", {}, () => [
A(I(e.label), 1)
])
], 10, Za)
];
}),
_: 3
}, 16, ["class", "tag"]),
$("div", {
id: u.value,
class: k(["usa-accordion__content", (v = e.customClasses) == null ? void 0 : v.content]),
hidden: !m.value
}, [
p(c.$slots, "default")
], 10, es)
], 64);
};
}
}, ts = ["role"], as = { class: "usa-alert__text" }, Xt = {
__name: "UsaAlert",
props: {
variant: {
type: String,
default: "",
validator(e) {
const t = [
"",
"info",
"warning",
"error",
"success",
"emergency",
"validation"
].includes(e);
return t || console.warn(`'${e}' is not a valid alert variant`), t;
}
},
slim: {
type: Boolean,
default: !1
},
noIcon: {
type: Boolean,
default: !1
},
role: {
type: String,
default: ""
},
heading: {
type: String,
default: ""
},
headingTag: {
type: String,
default: "h2"
},
customClasses: {
type: Object,
default: () => ({
body: [],
heading: []
})
}
},
setup(e) {
const t = e, a = d(() => ({
"usa-alert--no-icon": t.noIcon,
"usa-alert--slim": t.slim,
"usa-alert--info": t.variant === "info" || t.variant === "validation",
"usa-alert--warning": t.variant === "warning",
"usa-alert--error": t.variant === "error",
"usa-alert--success": t.variant === "success",
"usa-alert--emergency": t.variant === "emergency",
"usa-alert--validation": t.variant === "validation"
})), s = d(() => t.role ? t.role : !t.role && t.variant === "error" ? "alert" : null);
return (n, o) => {
var i, u;
return r(), f("div", {
class: k(["usa-alert", a.value]),
role: s.value
}, [
$("div", {
class: k(["usa-alert__body", (i = e.customClasses) == null ? void 0 : i.body])
}, [
e.heading || n.$slots.heading ? (r(), H(l(De), {
key: 0,
tag: e.headingTag,
class: k(["usa-alert__heading", [{ "usa-sr-only": e.slim }, (u = e.customClasses) == null ? void 0 : u.heading]])
}, {
default: N(() => [
p(n.$slots, "heading", {}, () => [
A(I(e.heading), 1)
])
]),
_: 3
}, 8, ["tag", "class"])) : B("", !0),
p(n.$slots, "message", {}, () => [
$("p", as, [
p(n.$slots, "default")
])
])
], 2)
], 10, ts);
};
}
};
function Qt(e, t = "", a = !1, s) {
const n = P(a), o = d(() => e || ye(t)), i = () => {
n.value = !1, s && s("update:open", n.value);
}, u = () => {
n.value = !0, s && s("update:open", n.value);
}, m = () => {
n.value ? i() : u();
};
return se(n, (c) => {
n.value !== c && m();
}), {
isOpen: we(n),
toggleId: we(o),
closeContent: i,
openContent: u,
toggleContent: m
};
}
const ss = ["src"], ns = { class: "usa-media-block__body" }, ls = { key: 2 }, os = ["src"], rs = { class: "usa-media-block__body" }, us = { key: 2 }, is = {
__name: "UsaBannerContent",
setup(e) {
const t = Me();
t != null && t.tldIcon && console.warn("The 'tldIcon' slot is deprecated, use 'tld-icon' instead."), t != null && t.tldDescription && console.warn(
"The 'tldDescription' slot is deprecated, use 'tld-description' instead."
), t != null && t.httpsIcon && console.warn("The 'httpsIcon' slot is deprecated, use 'https-icon' instead."), t != null && t.httpsDescription && console.warn(
"The 'httpsDescription' slot is deprecated, use 'https-description' instead."
);
const a = q("vueUswds.prefixSeparator", Ve), s = q("vueUswds.gridNamespace", Ue), n = q("vueUswds.imagePath", ot);
return (o, i) => (r(), f("div", {
class: k(`${l(s)}row ${l(s)}gap-lg`)
}, [
$("div", {
class: k(`usa-banner__guidance tablet${l(a)}${l(s)}col-6`)
}, [
o.$slots["tld-icon"] ? p(o.$slots, "tld-icon", { key: 0 }) : o.$slots.tldIcon ? p(o.$slots, "tldIcon", { key: 1 }) : (r(), f("img", {
key: 2,
class: "usa-banner__icon usa-media-block__img",
src: `${l(n)}/icon-dot-gov.svg`,
role: "img",
alt: "",
"aria-hidden": "true"
}, null, 8, ss)),
$("div", ns, [
o.$slots["tld-description"] ? p(o.$slots, "tld-description", { key: 0 }) : o.$slots.tldDescription ? p(o.$slots, "tldDescription", { key: 1 }) : (r(), f("p", ls, i[0] || (i[0] = [
$("strong", null, "Official websites use .gov", -1),
$("br", null, null, -1),
A(" A "),
$("strong", null, ".gov", -1),
A(" website belongs to an official government organization in the United States. ")
])))
])
], 2),
$("div", {
class: k(`usa-banner__guidance tablet${l(a)}${l(s)}col-6`)
}, [
o.$slots["https-icon"] ? p(o.$slots, "https-icon", { key: 0 }) : o.$slots.httpsIcon ? p(o.$slots, "httpsIcon", { key: 1 }) : (r(), f("img", {
key: 2,
class: "usa-banner__icon usa-media-block__img",
src: `${l(n)}/icon-https.svg`,
role: "img",
alt: "",
"aria-hidden": "true"
}, null, 8, os)),
$("div", rs, [
o.$slots["https-description"] ? p(o.$slots, "https-description", { key: 0 }) : o.$slots.httpsDescription ? p(o.$slots, "httpsDescription", { key: 1 }) : (r(), f("p", us, i[1] || (i[1] = [
$("strong", null, "Secure .gov websites use HTTPS", -1),
$("br", null, null, -1),
A(" A "),
$("strong", null, "lock", -1),
A(" ( "),
$("span", { class: "icon-lock" }, [
$("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "52",
height: "64",
viewBox: "0 0 52 64",
class: "usa-banner__lock-image",
role: "img",
"aria-labelledby": "banner-lock-description",
focusable: "false"
}, [
$("title", { id: "banner-lock-title" }, "Lock"),
$("desc", { id: "banner-lock-description" }, "Locked padlock icon"),
$("path", {
fill: "#000000",
"fill-rule": "evenodd",
d: "M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
})
])
], -1),
A(" ) or "),
$("strong", null, "https://", -1),
A(" means you've safely connected to the .gov website. Share sensitive information only on official, secure websites. ")
])))
])
], 2)
], 2));
}
}, ds = ["aria-label"], cs = ["src"], fs = { class: "usa-banner__header-text" }, vs = { class: "usa-banner__header-action" }, ms = ["aria-expanded", "aria-controls"], gs = { class: "usa-banner__button-text" }, ps = ["id", "hidden"], xu = {
__name: "UsaBanner",
props: {
open: {
type: Boolean,
default: !1
},
id: {
type: String,
default: ""
},
ariaLabel: {
type: String,
default: "Official website of the United States government"
},
headerText: {
type: String,
default: "An official website of the United States government"
},
actionText: {
type: String,
default: "Here's how you know"
},
customClasses: {
type: Object,
default: () => ({
accordion: [],
bannerHeader: [],
bannerInner: [],
button: [],
bannerContent: []
})
}
},
emits: ["update:open"],
setup(e, { expose: t, emit: a }) {
const s = q("vueUswds.prefixSeparator", Ve), n = q("vueUswds.gridNamespace", Ue), o = q("vueUswds.imagePath", ot), i = a, u = e, { isOpen: m, toggleId: c, openContent: g, closeContent: S, toggleContent: v } = Qt(u.id, "usa-banner", u.open, i), h = d(() => {
var y;
return [
{ "usa-banner__header--expanded": m.value },
...((y = u.customClasses) == null ? void 0 : y.bannerHeader) || []
];
});
return t({
openContent: g,
closeContent: S,
toggleContent: v
}), (y, w) => {
var b, C, _, U;
return r(), f("section", {
class: "usa-banner",
"aria-label": e.ariaLabel
}, [
$("div", {
class: k(["usa-accordion", (b = e.customClasses) == null ? void 0 : b.accordion])
}, [
$("header", {
class: k(["usa-banner__header", h.value])
}, [
$("div", {
class: k(["usa-banner__inner", (C = e.customClasses) == null ? void 0 : C.bannerInner])
}, [
$("div", {
class: k(`${l(n)}col-auto`)
}, [
p(y.$slots, "flag", {}, () => [
$("img", {
"aria-hidden": "true",
class: "usa-banner__header-flag",
src: `${l(o)}/us_flag_small.png`,
alt: ""
}, null, 8, cs)
])
], 2),
$("div", {
"aria-hidden": "true",
class: k(`${l(n)}col-fill tablet${l(s)}${l(n)}col-auto`)
}, [
$("p", fs, I(e.headerText), 1),
$("p", vs, I(e.actionText), 1)
], 2),
$("button", {
type: "button",
class: k(["usa-accordion__button usa-banner__button", (_ = e.customClasses) == null ? void 0 : _.button]),
"aria-expanded": l(m),
"aria-controls": l(c),
onClick: w[0] || (w[0] = (O) => l(v)())
}, [
p(y.$slots, "button", {
isOpen: l(m),
actionText: e.actionText
}, () => [
$("span", gs, I(e.actionText), 1)
])
], 10, ms)
], 2)
], 2),
$("div", {
id: l(c),
hidden: !l(m),
class: k(["usa-banner__content usa-accordion__content", (U = e.customClasses) == null ? void 0 : U.bannerContent])
}, [
p(y.$slots, "default", {}, () => [
ve(l(is))
])
], 10, ps)
], 2)
], 8, ds);
};
}
}, hs = ["aria-current"], bs = {
__name: "UsaBreadcrumbItem",
props: {
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
},
current: {
type: Boolean,
default: !1
},
customClasses: {
type: Object,
default: () => ({
link: [],
span: []
})
}
},
setup(e) {
const t = e, a = d(() => t.current ? "page" : null);
return (s, n) => {
var o, i;
return r(), f("li", {
class: "usa-breadcrumb__list-item",
"aria-current": a.value
}, [
e.current ? (r(), f("span", {
key: 0,
class: k((o = e.customClasses) == null ? void 0 : o.span)
}, [
p(s.$slots, "default")
], 2)) : (r(), H(l(_e), {
key: 1,
href: e.href,
to: e.to,
"router-component-name": e.routerComponentName,
class: k(["usa-breadcrumb__link", (i = e.customClasses) == null ? void 0 : i.link])
}, {
default: N(() => {
var u;
return [
$("span", {
class: k((u = e.customClasses) == null ? void 0 : u.span)
}, [
p(s.$slots, "default")
], 2)
];
}),
_: 3
}, 8, ["href", "to", "router-component-name", "class"]))
], 8, hs);
};
}
}, ys = ["aria-label"], Lu = {
__name: "UsaBreadcrumb",
props: {
items: {
type: Array,
default: () => []
},
wrap: {
type: Boolean,
default: !1
},
ariaLabel: {
type: String,
default: "Breadcrumbs"
},
customClasses: {
type: Object,
default: () => ({
list: [],
item: [],
link: [],
span: []
})
}
},
setup(e) {
const t = e, a = d(() => [
{
"usa-breadcrumb--wrap": t.wrap
}
]), s = d(() => t.items.some((o) => o == null ? void 0 : o.current)), n = d(() => {
if (!t.items.length)
return [];
if (s.value)
return t.items;
const o = [...t.items];
return o[o.length - 1].current = !0, o;
});
return (o, i) => {
var u;
return r(), f("nav", {
class: k(["usa-breadcrumb", a.value]),
"aria-label": e.ariaLabel
}, [
$("ol", {
class: k(["usa-breadcrumb__list", (u = e.customClasses) == null ? void 0 : u.list])
}, [
p(o.$slots, "default", { items: n.value }, () => [
(r(!0), f(Y, null, ie(n.value, (m) => {
var c, g, S;
return r(), H(l(bs), {
key: (m == null ? void 0 : m.id) || m.text,
class: k((c = e.customClasses) == null ? void 0 : c.item),
to: m.to,
href: m.href,
"router-component-name": m.routerComponentName,
current: m.current,
"custom-classes": {
link: (g = e.customClasses) == null ? void 0 : g.link,
span: (S = e.customClasses) == null ? void 0 : S.span
}
}, {
default: N(() => [
A(I(m.text), 1)
]),
_: 2
}, 1032, ["class", "to", "href", "router-component-name", "current", "custom-classes"]);
}), 128))
])
], 2)
], 10, ys);
};
}
}, $s = ["type", "disabled"], at = {
__name: "UsaButton",
props: {
variant: {
type: String,
default: "",
validator(e) {
return [
"",
"secondary",
"accent-cool",
"accent-warm",
"base",
"outline",
"inverse",
"unstyled"
].includes(e);
}
},
size: {
type: String,
default: "",
validator(e) {
return ["", "big"].includes(e);
}
},
type: {
type: String,
default: "button",
validator(e) {
return ["button", "submit", "reset"].includes(e);
}
},
disabled: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = d(() => [
{
"usa-button--secondary": t.variant === "secondary",
"usa-button--accent-cool": t.variant === "accent-cool",
"usa-button--accent-warm": t.variant === "accent-warm",
"usa-button--base": t.variant === "base",
"usa-button--outline": t.variant === "outline" || t.variant === "inverse",
"usa-button--inverse": t.variant === "inverse",
"usa-button--unstyled": t.variant === "unstyled",
"usa-button--big": t.size === "big"
}
]);
return (s, n) => (r(), f("button", fe(s.$attrs, {
class: ["usa-button", a.value],
type: e.type,
disabled: e.disabled
}), [
p(s.$slots, "before"),
p(s.$slots, "default"),
p(s.$slots, "after")
], 16, $s));
}
}, Mu = {
__name: "UsaButtonGroup",
props: {
segmented: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = d(() => [
{ "usa-button-group--segmented": t.segmented }
]);
return (s, n) => (r(), f("ul", {
class: k(["usa-button-group", a.value])
}, [
p(s.$slots, "default")
], 2));
}
}, ks = {}, Ss = { class: "usa-button-group__item" };
function Cs(e, t) {
return r(), f("li", Ss, [
p(e.$slots, "default")
]);
}
const Du = /* @__PURE__ */ Je(ks, [["render", Cs]]), Iu = {
__name: "UsaCard",
props: {
cardTag: {
type: String,
default: "div"
},
heading: {
type: String,
default: ""
},
headingTag: {
type: String,
default: "h2"
},
flag: {
type: Boolean,
default: !1
},
headerFirst: {
type: Boolean,
default: !1
},
insetMedia: {
type: Boolean,
default: !1
},
mediaPosition: {
type: String,
default: "left",
validator(e) {
return ["left", "right"].includes(e);
}
},
headerExdent: {
type: Boolean,
default: !1
},
mediaExdent: {
type: Boolean,
default: !1
},
bodyExdent: {
type: Boolean,
default: !1
},
footerExdent: {
type: Boolean,
default: !1
},
customClasses: {
type: Object,
default: () => ({
container: [],
header: [],
heading: [],
media: [],
img: [],
body: [],
footer: []
})
}
},
setup(e) {
const t = e, a = d(() => [
{
"usa-card--header-first": t.headerFirst,
"usa-card--flag": t.flag,
"usa-card--media-right": t.mediaPosition === "right"
}
]), s = d(() => {
var u;
return [
{ "usa-card__header--exdent": t.headerExdent },
...((u = t.customClasses) == null ? void 0 : u.header) || []
];
}), n = d(() => {
var u;
return [
{
"usa-card__media--inset": t.insetMedia,
"usa-card__media--exdent": t.mediaExdent
},
...((u = t.customClasses) == null ? void 0 : u.media) || []
];
}), o = d(() => {
var u;
return [
{ "usa-card__body--exdent": t.bodyExdent },
...((u = t.customClasses) == null ? void 0 : u.body) || []
];
}), i = d(() => {
var u;
return [
{ "usa-card__footer--exdent": t.footerExdent },
...((u = t.customClasses) == null ? void 0 : u.footer) || []
];
});
return (u, m) => (r(), H(Oe(e.cardTag), {
class: k(["usa-card", a.value])
}, {
default: N(() => {
var c, g, S;
return [
$("div", {
class: k(["usa-card__container", (c = e.customClasses) == null ? void 0 : c.container])
}, [
e.heading || u.$slots.heading ? (r(), f("header", {
key: 0,
class: k(["usa-card__header", s.value])
}, [
ve(l(De), {
tag: e.headingTag,
class: k(["usa-card__heading", (g = e.customClasses) == null ? void 0 : g.heading])
}, {
default: N(() => [
p(u.$slots, "heading", {}, () => [
A(I(e.heading), 1)
])
]),
_: 3
}, 8, ["tag", "class"])
], 2)) : B("", !0),
u.$slots.media ? (r(), f("div", {
key: 1,
class: k(["usa-card__media", n.value])
}, [
$("div", {
class: k(["usa-card__img", (S = e.customClasses) == null ? void 0 : S.img])
}, [
p(u.$slots, "media")
], 2)
], 2)) : B("", !0),
u.$slots.default ? (r(), f("div", {
key: 2,
class: k(["usa-card__body", o.value])
}, [
p(u.$slots, "default")
], 2)) : B("", !0),
u.$slots.footer ? (r(), f("div", {
key: 3,
class: k(["usa-card__footer", i.value])
}, [
p(u.$slots, "footer")
], 2)) : B("", !0)
], 2)
];
}),
_: 3
}, 8, ["class"]));
}
}, _s = { class: "usa-character-count" }, ws = ["id"], xs = {
class: "usa-character-count__sr-status usa-sr-only",
"aria-live": "polite"
}, Uu = {
__name: "UsaCharacterCount",
props: {
maxlength: {
type: Number,
required: !0,
validator(e) {
const t = e > 0;
return t || console.warn(`${e} is not a valid maxlength`), t;
}
},
id: {
type: String,
default: ""
}
},
setup(e) {
const t = e, a = P(""), s = P(""), n = P(t.maxlength), o = d(
() => n.value < 0 ? n.value * -1 : 0
), i = d(() => n.value === t.maxlength ? "equal" : o.value > 0 ? "over" : "under"), u = d(() => t.id || ye("usa-character-count")), m = d(() => [
{ "usa-character-count__message--invalid": i.value === "over" }
]), c = (g) => n.value = t.maxlength - `${g}`.length;
return _a(
n,
() => {
var g;
s.value = (g = a.value) == null ? void 0 : g.textContent;
},
{ debounce: 1e3, immediate: !0 }
), ae("updateCharacterCount", c), ae(
"characterCountMaxlength",
d(() => t.maxlength)
), ae(
"characterCountMessageId",
d(() => u.value)
), (g, S) => (r(), f("div", _s, [
p(g.$slots, "default"),
$("span", {
id: u.value,
class: "usa-character-count__message usa-sr-only"
}, [
p(g.$slots, "default-message", {}, () => [
A("You can enter up to " + I(e.maxlength) + " characters", 1)
])
], 8, ws),
$("div", {
ref_key: "statusMessageRef",
ref: a,
class: k(["usa-character-count__status usa-hint", m.value]),
"aria-hidden": "true"
}, [
i.value === "equal" ? p(g.$slots, "equal-message", {
key: 0,
maxlength: e.maxlength
}, () => [
A(I(e.maxlength) + " character", 1),
e.maxlength !== 1 ? (r(), f(Y, { key: 0 }, [
A("s")
], 64)) : B("", !0),
S[0] || (S[0] = A(" allowed"))
]) : i.value === "under" ? p(g.$slots, "remaining-message", {
key: 1,
charactersRemaining: n.value,
maxlength: e.maxlength
}, () => [
A(I(n.value) + " character", 1),
n.value !== 1 ? (r(), f(Y, { key: 0 }, [
A("s")
], 64)) : B("", !0),
S[1] || (S[1] = A(" left"))
]) : i.value === "over" ? p(g.$slots, "over-message", {
key: 2,
charactersOver: o.value,
maxlength: e.maxlength
}, () => [
A(I(o.value) + " character", 1),
o.value !== 1 ? (r(), f(Y, { key: 0 }, [
A("s")
], 64)) : B("", !0),
S[2] || (S[2] = A(" over limit"))
]) : B("", !0)
], 2),
$("div", xs, I(s.value), 1)
]));
}
}, Ls = ["id"], Ms = ["htmlFor"], Ds = {
inheritAttrs: !1
}, Au = /* @__PURE__ */ Object.assign(Ds, {
__name: "UsaCheckbox",
props: {
tile: {
type: Boolean,
default: !1
},
modelValue: {
type: Boolean,
default: !1
},
label: {
type: String,
default: ""
},
description: {
type: String,
default: ""
},
id: {
type: String,
default: ""
},
customClasses: {
type: Object,
default: () => ({
component: [],
label: [],
description: []
})
}
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const a = t, s = e, n = d(() => s.id || ye("usa-checkbox")), o = d({
get() {
return s.modelValue;
},
set(u) {
a("update:modelValue", u);
}
}), i = d(() => [
{
"usa-checkbox__input--tile": s.tile
}
]);
return (u, m) => {
var c, g, S;
return r(), f("div", {
class: k(["usa-checkbox", (c = e.customClasses) == null ? void 0 : c.component])
}, [
xe($("input", fe(u.$attrs, {
id: n.value,
"onUpdate:modelValue": m[0] || (m[0] = (v) => o.value = v),
class: ["usa-checkbox__input", i.value],
type: "checkbox"
}), null, 16, Ls), [
[va, o.value]
]),
$("label", {
class: k(["usa-checkbox__label", (g = e.customClasses) == null ? void 0 : g.label]),
htmlFor: n.value
}, [
p(u.$slots, "default", {}, () => [
A(I(e.label), 1)
]),
e.description || u.$slots.description ? (r(), f("span", {
key: 0,
class: k(["usa-checkbox__label-description", (S = e.customClasses) == null ? void 0 : S.description])
}, [
p(u.$slots, "description", {}, () => [
A(I(e.description), 1)
])
], 2)) : B("", !0)
], 10, Ms)
], 2);
};
}
}), Is = ["aria-label"], Us = {
__name: "UsaChecklistItem",
props: {
checked: {
type: Boolean,
default: !1
},
ariaLabel: {
type: String,
default: ""
}
},
setup(e) {
const t = e, a = d(() => [
{ "usa-checklist__item--checked": t.checked }
]);
return (s, n) => (r(), f("li", {
class: k(["usa-checklist__item", a.value]),
"aria-label": e.ariaLabel
}, [
p(s.$slots, "default")
], 10, Is));
}
}, As = { class: "usa-checklist" }, Bs = {
__name: "UsaChecklist",
props: {
items: {
type: Array,
default: () => []
}
},
setup(e) {
return (t, a) => (r(), f("ul", As, [
p(t.$slots, "default", {}, () => [
(r(!0), f(Y, null, ie(e.items, (s) => (r(), H(l(Us), {
key: (s == null ? void 0 : s.id) || s.text,
checked: s.checked,
"aria-label": s.ariaLabel
}, {
default: N(() => [
A(I(s.text), 1)
]),
_: 2
}, 1032, ["checked", "aria-label"]))), 128))
])
]));
}
}, Bu = {
__name: "UsaCollection",
props: {
condensed: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = d(() => [
{ "usa-collection--condensed": t.condensed }
]);
return (s, n) => (r(), f("ul", {
class: k(["usa-collection", a.value])
}, [
p(s.$slots, "default")
], 2));
}
}, Os = { class: "usa-collection__calendar-date" }, Ou = {
__name: "UsaCollectionCalendar",
props: {
month: {
type: String,
required: !0
},
day: {
type: [String, Number],
required: !0
},
datetime: {
type: String,
default: ""
},
customClasses: {
type: Object,
default: () => ({
datetime: [],
month: [],
day: []
})
}
},
setup(e) {
const t = e, a = d(() => t.datetime ? "time" : "div");
return (s, n) => {
var o;
return r(), f("div", Os, [
(r(), H(Oe(a.value), {
datetime: e.datetime || null,
class: k((o = e.customClasses) == null ? void 0 : o.datetime)
}, {
default: N(() => {
var i, u;
return [
$("span", {
class: k(["usa-collection__calendar-date-month", (i = e.customClasses) == null ? void 0 : i.month])
}, I(e.month), 3),
$("span", {
class: k(["usa-collection__calendar-date-day", (u = e.customClasses) == null ? void 0 : u.day])
}, I(e.day), 3)
];
}),
_: 1
}, 8, ["datetime", "class"]))
]);
};
}
}, Ts = {
__name: "UsaCollectionHeading",
props: {
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
},
headingTag: {
type: String,
default: "h2"
},
heading: {
type: String,
default: ""
},
customClasses: {
type: Object,
default: () => ({
link: []
})
}
},
setup(e) {
return (t, a) => (r(), H(l(De), {
tag: e.headingTag,
class: "usa-collection__heading"
}, {
default: N(() => {
var s;
return [
ve(l(_e), {
href: e.href,
to: e.to,
"router-component-name": e.routerComponentName,
class: k(["usa-link", (s = e.customClasses) == null ? void 0 : s.link])
}, {
default: N(() => [
p(t.$slots, "default", {}, () => [
A(I(e.heading), 1)
])
]),
_: 3
}, 8, ["href", "to", "router-component-name", "class"])
];
}),
_: 3
}, 8, ["tag"]));
}
}, Ns = { class: "usa-collection__item" }, Ps = { class: "usa-collection__body" }, Tu = {
__name: "UsaCollectionItem",
props: {
heading: {
type: String,
default: ""
},
headingTag: {
type: String,
default: "h2"
},
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
},
customClasses: {
type: Object,
default: () => ({
media: [],
heading: [],
link: [],
description: []
})
}
},
setup(e) {
return (t, a) => {
var s;
return r(), f("li", Ns, [
t.$slots.media ? (r(), f("div", {
key: 0,
class: k(["usa-collection__img", (s = e.customClasses) == null ? void 0 : s.media])
}, [
p(t.$slots, "media")
], 2)) : p(t.$slots, "calendar", { key: 1 }),
$("div", Ps, [
p(t.$slots, "heading", {}, () => {
var n, o;
return [
ve(l(Ts), {
heading: e.heading,
"heading-tag": e.headingTag,
href: e.href,
to: e.to,
class: k((n = e.customClasses) == null ? void 0 : n.heading),
"router-component-name": e.routerComponentName,
"custom-classes": { link: ((o = e.customClasses) == null ? void 0 : o.link) || [] }
}, {
default: N(() => [
A(I(e.heading), 1)
]),
_: 1
}, 8, ["heading", "heading-tag", "href", "to", "class", "router-component-name", "custom-classes"])
];
}),
p(t.$slots, "description", {}, () => {
var n;
return [
t.$slots.default ? (r(), f("p", {
key: 0,
class: k(["usa-collection__description", (n = e.customClasses) == null ? void 0 : n.description])
}, [
p(t.$slots, "default")
], 2)) : B("", !0)
];
}),
p(t.$slots, "meta")
])
]);
};
}
}, Rs = ["aria-label"], Nu = {
__name: "UsaCollectionMeta",
props: {
ariaLabel: {
type: String,
required: !0
}
},
setup(e) {
return (t, a) => (r(), f("ul", {
class: "usa-collection__meta",
"aria-label": e.ariaLabel
}, [
p(t.$slots, "default")
], 8, Rs));
}
}, qs = {}, Vs = { class: "usa-collection__meta-item" };
function Es(e, t) {
return r(), f("li", Vs, [
p(e.$slots, "default")
]);
}
const Pu = /* @__PURE__ */ Je(qs, [["render", Es]]);
function Ys(e, t, a, s, n, o) {
const i = P(e), u = P(a), m = P(s), c = P(n), g = d({
get() {
return t.value;
},
set(z) {
o("update:modelValue", z);
}
}), S = wa(), v = P(!1), h = P(""), y = P(""), w = P(!1), b = d(() => {
if (g.value === "")
return "";
const z = u.value.find(
(me) => me.value === g.value
);
return (z == null ? void 0 : z.label) || "";
});
se(b, (z) => {
z !== "" && (h.value = z);
}), se(h, (z) => {
w.value && z !== "" && (v.value = !0);
}), b.value && (h.value = b.value);
const C = d(() => h.value === "" || !v.value && h.value === b.value ? u.value : u.value.filter((z) => new RegExp(St(h.value), "gi").test(z.label))), _ = d(() => {
var z;
return (z = C.value) == null ? void 0 : z.length;
}), U = d(() => i.value || ye("usa-combo-box")), O = d(() => `${U.value}-label`), x = d(
() => `${U.value}-error-message`
), M = d(() => `${U.value}-hint`), R = d(
() => `${U.value}-assistive-hint`
), V = d(() => `${U.value}-list`), L = (z) => `${V.value}-option-${z}`, D = P(null), J = P(null), K = P(null), le = P([]), W = (z) => le.value.find((me) => me.id === z), te = (z) => le.value.find((me) => me.dataset.value === z), ce = d(() => _.value ? C.value[0].value : ""), $e = d(() => {
const z = _.value ? le.value[0].id : null;
return z ? W(z) : null;
}), T = d(() => {
if (g.value === "")
return null;
const z = le.value.find(
(me) => me.dataset.value === g.value
);
return z || null;
}), E = d(() => {
if (y.value === "")
return null;
const z = le.value.find((me) => me.dataset.value === y.value);
return z || null;
}), j = d(() => C.value.findIndex(
(me) => me.value === y.value
) === 0), Q = d(() => C.value.findIndex(
(me) => me.value === y.value
) === _.value - 1), ge = d(() => {
const z = S.value.id;
return z === he.value || _.value && g.value !== "" && w.value && z === U.value ? he.value : null;
}), be = (z) => {
if (!z || !(K != null && K.value))
return;
const me = z.offsetTop + z.offsetHeight, vt = K.value.scrollTop + K.value.offsetHeight;
me > vt && (K.value.scrollTop = me - K.value.offsetHeight), z.offsetTop < K.value.scrollTop && (K.value.scrollTop = z.offsetTop);
}, Se = () => {
J.value.focus();
}, Z = (z) => {
g.value = z;
const me = u.value.find((vt) => vt.value === z);
h.value = (me == null ? void 0 : me.label) || "", v.value = !1;
}, pe = () => {
Z("");
}, ke = (z) => {
y.value = z;
}, Ae = () => {
y.value = "";
}, G = () => {
!m.value && !c.value && (w.value = !0);
}, ne = () => {
w.value = !1, v.value = !1, Ae(), K.value.scrollTop = 0;
}, ee = (z) => y.value === z || g.value === z ? 0 : -1, he = d(() => {
if (!y.value)
return null;
const z = C.value.findIndex(
(me) => me.value === y.value
);
return L(z);
}), X = d(
() => g.value !== "" && h.value === b.value && !m.value && !c.value
), je = () => {
w.value || G(), g.value !== "" ? ke(g.value) : ke(ce.value);
}, Le = () => {
const z = C.value.find(
(me) => me.label === h.value
);
h.value !== "" && z.value && Z(z.value), ne();
}, ea = () => {
w.value ? (ne(), Ae()) : (G(), g.value !== "" ? (ke(g.value), Ce(() => {
be(T.value);
})) : ke(ce.value)), Se();
}, ta = () => {
pe(), Ae(), Se();
}, aa = (z) => {
ke(z), E.value && E.value.focus({ preventScroll: !0 });
}, sa = (z) => {
Z(z), ne(), Se();
}, na = (z) => {
Z(z), ne(), Se();
}, la = (z) => {
if (!Q.value) {
ke(C.value[z + 1].value);
const me = te(y.value);
be(me.value), E.value && E.value.focus();
}
}, oa = (z) => {
if (j.value)
ne(), Ae(), Se();
else {
ke(C.value[z - 1].value);
const me = te(y.value);
be(me.value), E.value && E.value.focus();
}
}, ra = () => {
w.value && (Z(g.value), ne(), Ae());
}, ua = (z) => {
Z(z), ne(), Se();
}, ia = () => {
Z(g.value), ne(), Ae(), Se();
}, da = () => {
w.value || G(), _.value && (g.value ? (ke(g.value), Ce(() => {
T.value.focus(), be(T.value);
})) : (ke(ce.value), Ce(() => {
E.value.focus(), be(E.value);
})));
}, ca = () => {
w.value || G(), g.value ? (ke(g.value), Ce(() => {
be(T.value);
})) : y.value === "" && (ke(ce.value), Ce(() => {
be($e.value);
}));
};
return Ke(D, () => ra()), qe("Escape", () => {
ia();
}), {
activeDescendent: ge,
clearButtonIsVisible: X,
componentElement: D,
computedAssistiveHintId: R,
computedErrorMessageId: x,
computedHintId: M,
computedId: U,
computedLabelId: O,
computedListId: V,
filteredOptions: C,
getListItemIdByIndex: L,
handleClearInput: ta,
handleClickOnInput: ca,
handleClickOnListOption: ua,
handleDownOnInput: da,
handleDownOnListOption: la,
handleEnterOnInput: Le,
handleEnterOnListOption: na,
handleFilterOnInput: je,
handleHoverOnListOption: aa,
handleListToggle: ea,
handleSpaceOnListOption: sa,
handleUpOnListOption: oa,
highlightedOption: we(y),
inputElement: J,
isDisabled: we(m),
isOpen: we(w),
isReadonly: we(c),
listElement: K,
listItemElements: le,
listItemTabIndex: ee,
searchTerm: h,
selectedOption: g,
totalFilteredOptions: _
};
}
const js = {
inheritAttrs: !1
}, Ee = /* @__PURE__ */ Object.assign(js, {
__name: "UsaFormGroup",
props: {
group: {
type: Boolean,
default: !1
},
error: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = d(() => [{ "usa-form-group--error": t.error }]);
return (s, n) => e.group ? (r(), f("div", fe({ key: 0 }, s.$attrs, {
class: ["usa-form-group", a.value]
}), [
p(s.$slots, "default")
], 16)) : p(s.$slots, "default", { key: 1 });
}
}), Hs = ["htmlFor"], Ye = {
__name: "UsaLabel",
props: {
for: {
type: String,
required: !0
},
required: {
type: Boolean,
default: !1
},
error: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = d(() => [{ "usa-label--error": t.error }]);
return (s, n) => (r(), f("label", {
htmlFor: t.for,
class: k(["usa-label", a.value])
}, [
p(s.$slots, "default"),
e.required ? (r(), f(Y, { key: 0 }, [
n[1] || (n[1] = A(" ")),
p(s.$slots, "required", {}, () => [
n[0] || (n[0] = $("abbr", {
title: "required",
class: "usa-hint usa-hint--required"
}, "*", -1))
])
], 64)) : B("", !0)
], 10, Hs));
}
}, Fs = ["id"], zs = ["id"], Gs = ["id", "required", "disabled", "readonly", "aria-owns", "aria-controls", "aria-describedby", "aria-expanded", "aria-activedescendant"], Ws = {
class: "usa-combo-box__clear-input__wrapper",
tabindex: "-1"
}, Ks = ["aria-label", "disabled"], Js = {
class: "usa-combo-box__toggle-list__wrapper",
tabindex: "-1"
}, Xs = ["aria-label", "disabled"], Qs = ["id", "aria-labelledby", "hidden"], Zs = ["id", "aria-setsize", "aria-posinset", "aria-selected", "tabindex", "data-value", "onClick", "onKeydown", "onMouseover"], en = {
key: 1,
class: "usa-combo-box__list-option--no-results"
}, tn = {
class: "usa-combo-box__status usa-sr-only",
role: "status"
}, an = ["id"], sn = {
inheritAttrs: !1
}, nn = /* @__PURE__ */ Object.assign(sn, {
__name: "UsaComboBox",
props: {
options: {
type: Array,
default: () => []
},
modelValue: {
type: [String, Number],
default: ""
},
label: {
type: String,
default: ""
},
required: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
error: {
type: Boolean,
default: !1
},
id: {
type: String,
default: ""
},
clearButtonAriaLabel: {
type: String,
default: "Clear the select contents"
},
toggleButtonAriaLabel: {
type: String,
default: "Toggle the dropdown list"
},
customClasses: {
type: Object,
default: () => ({
formGroup: [],
component: [],
label: [],
input: [],
list: []
})
}
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const a = Me(), s = t, n = e, {
activeDescendent: o,
clearButtonIsVisible: i,
componentElement: u,
computedAssistiveHintId: m,
computedErrorMessageId: c,
computedHintId: g,
computedId: S,
computedLabelId: v,
computedListId: h,
filteredOptions: y,
getListItemIdByIndex: w,
handleClearInput: b,
handleClickOnInput: C,
handleClickOnListOption: _,
handleDownOnInput: U,
handleDownOnListOption: O,
handleEnterOnInput: x,
handleEnterOnListOption: M,
handleFilterOnInput: R,
handleHoverOnListOption: V,
handleListToggle: L,
handleSpaceOnListOption: D,
handleUpOnListOption: J,
highlightedOption: K,
inputElement: le,
isOpen: W,
isDisabled: te,
isReadonly: ce,
listElement: $e,
listItemElements: T,
listItemTabIndex: E,
searchTerm: j,
selectedOption: Q,
totalFilteredOptions: ge
} = Ys(
ue(n, "id"),
ue(n, "modelValue"),
ue(n, "options"),
ue(n, "disabled"),
ue(n, "readonly"),
s
), be = d(() => {
const Z = [m.value];
return a.hint && Z.push(g.value), n.error && a["error-message"] && Z.push(c.value), Z.join(" ");
}), Se = d(() => {
var Z;
return [
{ "usa-combo-box--pristine": Q.value !== "" },
...((Z = n.customClasses)