bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
276 lines (275 loc) • 9.99 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_object = require("./object-BN7QwMcz.js");
const require_stringUtils = require("./stringUtils-BwKOASdU.js");
let vue = require("vue");
//#region src/utils/isLink.ts
var isLink = (props) => !!(props.href || props.to);
//#endregion
//#region src/composables/useBLinkHelper.ts
var useBLinkHelper = (props, pickProps) => {
const pickPropsResolved = (0, vue.readonly)((0, vue.toRef)(pickProps));
const resolvedProps = (0, vue.readonly)((0, vue.toRef)(props));
const computedLink = (0, vue.computed)(() => isLink(resolvedProps.value));
return {
computedLink,
computedLinkProps: (0, vue.computed)(() => computedLink.value ? require_object.pick(resolvedProps.value, pickPropsResolved.value ?? [
"active",
"activeClass",
"disabled",
"exactActiveClass",
"href",
"icon",
"noRel",
"opacity",
"opacityHover",
"noPrefetch",
"prefetch",
"prefetchOn",
"prefetchedClass",
"rel",
"replace",
"routerComponentName",
"routerTag",
"stretched",
"target",
"to",
"underlineOffset",
"underlineOffsetHover",
"underlineOpacity",
"underlineOpacityHover",
"underlineVariant",
"variant"
]) : {})
};
};
var useBLinkTagResolver = ({ to, disabled, href, replace, routerComponentName }) => {
const instance = (0, vue.getCurrentInstance)();
const router = instance?.appContext?.app?.config?.globalProperties?.$router;
const route = instance?.appContext?.app?.config?.globalProperties?.$route;
const RouterLinkComponent = (0, vue.resolveDynamicComponent)("RouterLink");
const resolvedTo = (0, vue.computed)(() => (0, vue.toValue)(to) || "");
const resolvedReplace = (0, vue.readonly)((0, vue.toRef)(replace));
const routerName = (0, vue.computed)(() => {
const routerComponent = (0, vue.toValue)(routerComponentName);
if (typeof routerComponent === "string") return require_stringUtils.toPascalCase(routerComponent);
return routerComponent;
});
const useLink = typeof routerName.value !== "string" && "useLink" in routerName.value ? routerName.value.useLink : typeof RouterLinkComponent !== "string" && "useLink" in RouterLinkComponent ? RouterLinkComponent.useLink : null;
const isNuxtLink = (0, vue.computed)(() => typeof instance?.appContext?.app?.$nuxt !== "undefined");
const isRouterLink = (0, vue.computed)(() => routerName.value === "RouterLink");
const tag = (0, vue.computed)(() => {
if ((0, vue.toValue)(disabled) || !resolvedTo.value) return "a";
if (typeof routerName.value !== "string") return routerName.value;
if (isRouterLink.value && typeof RouterLinkComponent !== "string") return RouterLinkComponent;
return instance?.appContext?.app?.component(routerName.value) || "a";
});
const isNonStandardTag = (0, vue.computed)(() => tag.value !== "a" && !isRouterLink.value && !isNuxtLink.value);
const isOfRouterType = (0, vue.computed)(() => isRouterLink.value || isNuxtLink.value);
const linkProps = (0, vue.computed)(() => ({
to: resolvedTo.value,
replace: resolvedReplace.value
}));
const _link = useLink?.({
to: resolvedTo,
replace: resolvedReplace
});
const link = (0, vue.computed)(() => isOfRouterType.value && (0, vue.toValue)(to) ? _link : null);
return {
isNonStandardTag,
tag,
isRouterLink,
isNuxtLink,
computedHref: (0, vue.computed)(() => {
if (link.value?.href.value && resolvedTo.value) return link.value.href.value;
const toFallback = "#";
const resolvedHref = (0, vue.toValue)(href);
if (resolvedHref) return resolvedHref;
if (typeof resolvedTo.value === "string") return resolvedTo.value || toFallback;
const stableTo = resolvedTo.value;
if (stableTo !== void 0 && "path" in stableTo) return `${stableTo.path || ""}${stableTo.query ? `?${Object.keys(stableTo.query).map((e) => `${e}=${stableTo.query?.[e]}`).join("=")}` : ""}${!stableTo.hash || stableTo.hash.charAt(0) === "#" ? stableTo.hash || "" : `#${stableTo.hash}`}` || toFallback;
return toFallback;
}),
routerName,
router,
route,
link,
linkProps
};
};
//#endregion
//#region src/composables/useLinkClasses.ts
var useLinkClasses = (linkProps) => (0, vue.computed)(() => {
const props = (0, vue.toValue)(linkProps);
return {
[`link-${props.variant}`]: props.variant !== null,
[`link-opacity-${props.opacity}`]: props.opacity !== void 0,
[`link-opacity-${props.opacityHover}-hover`]: props.opacityHover !== void 0,
[`link-underline-${props.underlineVariant}`]: props.underlineVariant !== null,
[`link-offset-${props.underlineOffset}`]: props.underlineOffset !== void 0,
[`link-offset-${props.underlineOffsetHover}-hover`]: props.underlineOffsetHover !== void 0,
["link-underline"]: props.underlineVariant === null && (props.underlineOpacity !== void 0 || props.underlineOpacityHover !== void 0),
[`link-underline-opacity-${props.underlineOpacity}`]: props.underlineOpacity !== void 0,
[`link-underline-opacity-${props.underlineOpacityHover}-hover`]: props.underlineOpacityHover !== void 0,
"icon-link": props.icon === true
};
});
//#endregion
//#region src/components/BLink/BLink.vue?vue&type=script&setup=true&lang.ts
var defaultActiveClass = "active";
//#endregion
//#region src/components/BLink/BLink.vue
var BLink_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BLink",
props: {
active: {
type: Boolean,
default: void 0
},
activeClass: { default: "router-link-active" },
disabled: {
type: Boolean,
default: false
},
exactActiveClass: { default: "router-link-exact-active" },
href: { default: void 0 },
icon: {
type: Boolean,
default: false
},
noRel: {
type: Boolean,
default: false
},
opacity: { default: void 0 },
opacityHover: { default: void 0 },
prefetch: {
type: Boolean,
default: void 0
},
prefetchOn: { default: void 0 },
noPrefetch: {
type: Boolean,
default: void 0
},
prefetchedClass: { default: void 0 },
rel: { default: void 0 },
replace: {
type: Boolean,
default: false
},
routerComponentName: { default: "router-link" },
routerTag: { default: "a" },
stretched: {
type: Boolean,
default: false
},
target: { default: void 0 },
to: { default: void 0 },
underlineOffset: { default: void 0 },
underlineOffsetHover: { default: void 0 },
underlineOpacity: { default: void 0 },
underlineOpacityHover: { default: void 0 },
underlineVariant: { default: null },
variant: { default: null }
},
emits: ["click"],
setup(__props, { emit: __emit }) {
const props = require_useDefaults.useDefaults(__props, "BLink");
const emit = __emit;
const attrs = (0, vue.useAttrs)();
const { computedHref, tag, link, isNuxtLink, isRouterLink, linkProps, isNonStandardTag } = useBLinkTagResolver({
routerComponentName: () => props.routerComponentName,
disabled: () => props.disabled,
to: () => props.to,
replace: () => props.replace,
href: () => props.href
});
const collapseData = (0, vue.inject)(require_keys.collapseInjectionKey, null);
const navbarData = (0, vue.inject)(require_keys.navbarInjectionKey, null);
/**
* Not to be confused with computedLinkClasses
*/
const linkValueClasses = useLinkClasses(props);
const computedClasses = (0, vue.computed)(() => [
linkValueClasses.value,
attrs.class,
computedLinkClasses.value,
{
[defaultActiveClass]: props.active,
[props.activeClass]: link.value?.isActive.value || false,
[props.exactActiveClass]: link.value?.isExactActive.value || false,
"stretched-link": props.stretched
}
]);
const computedLinkClasses = (0, vue.computed)(() => ({
[defaultActiveClass]: props.active,
disabled: props.disabled
}));
const clicked = (e) => {
if (props.disabled) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
if (collapseData?.isNav?.value === true && navbarData === null || navbarData !== null && navbarData.noAutoClose?.value !== true) collapseData?.hide?.();
emit("click", e);
};
const computedRel = (0, vue.computed)(() => props.target === "_blank" ? !props.rel && props.noRel ? "noopener" : props.rel : void 0);
const computedTabIndex = (0, vue.computed)(() => props.disabled ? "-1" : typeof attrs.tabindex === "undefined" ? null : attrs.tabindex);
const nuxtSpecificProps = (0, vue.computed)(() => ({
...props.noPrefetch ? { noPrefetch: props.noPrefetch } : { prefetch: props.prefetch },
prefetchOn: props.prefetchOn,
prefetchedClass: props.prefetchedClass,
...linkProps.value
}));
const computedSpecificProps = (0, vue.computed)(() => ({
...isRouterLink.value ? linkProps.value : void 0,
...isNuxtLink.value || isNonStandardTag.value ? nuxtSpecificProps.value : void 0
}));
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
class: computedClasses.value,
target: (0, vue.unref)(props).target,
href: (0, vue.unref)(computedHref),
rel: computedRel.value,
tabindex: computedTabIndex.value,
"aria-disabled": (0, vue.unref)(props).disabled ? true : null
}, computedSpecificProps.value, { onClick: _cache[0] || (_cache[0] = (e) => {
clicked(e);
(0, vue.unref)(link)?.navigate(e);
}) }), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 16, [
"class",
"target",
"href",
"rel",
"tabindex",
"aria-disabled"
]);
};
}
});
//#endregion
Object.defineProperty(exports, "BLink_default", {
enumerable: true,
get: function() {
return BLink_default;
}
});
Object.defineProperty(exports, "useBLinkHelper", {
enumerable: true,
get: function() {
return useBLinkHelper;
}
});
Object.defineProperty(exports, "useLinkClasses", {
enumerable: true,
get: function() {
return useLinkClasses;
}
});
//# sourceMappingURL=BLink-uemyYKst.js.map