@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
218 lines (215 loc) • 8.05 kB
JavaScript
import { defineComponent, useSlots, computed, openBlock, createBlock, unref, withCtx, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, withModifiers, createVNode, createElementVNode, toDisplayString } from 'vue';
import '../../../utils/index.mjs';
import { IconPlus, IconClose } from '../../icon/index.mjs';
import { VsCollapseTransition } from '../../collapse-transition/index.mjs';
import '../../../hooks/index.mjs';
import '../../../constants/index.mjs';
import { alertProps, alertEmits } from './alert.mjs';
import { useAlertDeprecated } from './use-deprecated.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useVuesaxBaseComponent } from '../../../hooks/use-base-component/index.mjs';
import { useColor } from '../../../hooks/use-common-props/index.mjs';
import { getVsColor } from '../../../utils/color.mjs';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
import { isBoolean } from '../../../utils/types.mjs';
const __default__ = defineComponent({
name: "VsAlert"
});
const _sfc_main = defineComponent({
...__default__,
props: alertProps,
emits: alertEmits,
setup(__props, { emit }) {
const props = __props;
const slots = useSlots();
useAlertDeprecated(props);
const ns = useNamespace("alert");
const vsBaseClasses = useVuesaxBaseComponent(useColor());
const alertClasses = computed(() => [
vsBaseClasses,
ns.b(),
props.type && ns.m(props.type),
getPages.value.length > 0 && ns.m("pages")
]);
const alertStyles = computed(() => {
return ns.cssVar({
color: getVsColor(props.color)
});
});
const getTotalPages = computed(() => {
const keys = Object.keys(slots).filter((slot) => slot.includes("page-"));
return keys.length;
});
const getPages = computed(() => {
const pages = Object.keys(slots).filter((slot) => {
return slot.includes("page-");
});
const values = [];
pages.forEach((page) => {
values.push(`${props.page}` === page.split("-")[1] && slots[page]);
});
return values;
});
const handleClickClose = () => {
emit(UPDATE_MODEL_EVENT, !props.modelValue);
};
const handleClickHidden = () => {
emit("update:hiddenContent", !props.hiddenContent);
};
const handleClickPrevPage = () => {
if (props.page > 1) {
emit("update:page", props.page - 1);
}
};
const handleClickNextPage = () => {
if (props.page < getTotalPages.value) {
emit("update:page", props.page + 1);
}
};
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(VsCollapseTransition), null, {
default: withCtx(() => [
_ctx.modelValue ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(alertClasses.value),
style: normalizeStyle(alertStyles.value)
},
[
_ctx.$slots.icon ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(unref(ns).e("icon"))
},
[
renderSlot(_ctx.$slots, "icon")
],
2
)) : createCommentVNode("v-if", true),
_ctx.$slots.title ? (openBlock(), createElementBlock(
"div",
{
key: 1,
class: normalizeClass([
unref(ns).e("title"),
unref(isBoolean)(_ctx.hiddenContent) && unref(ns).em("title", "click__hidden")
]),
onClick: handleClickHidden
},
[
renderSlot(_ctx.$slots, "title"),
!_ctx.closable && unref(isBoolean)(_ctx.hiddenContent) ? (openBlock(), createBlock(unref(IconPlus), {
key: 0,
less: !_ctx.hiddenContent,
onClick: withModifiers(handleClickHidden, ["stop"])
}, null, 8, ["less", "onClick"])) : createCommentVNode("v-if", true)
],
2
)) : createCommentVNode("v-if", true),
createVNode(unref(VsCollapseTransition), null, {
default: withCtx(() => [
!_ctx.hiddenContent ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(unref(ns).e("content"))
},
[
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).em("content", "text"))
},
[
renderSlot(_ctx.$slots, "default"),
renderSlot(_ctx.$slots, `page-${_ctx.page}`)
],
2
)
],
2
)) : createCommentVNode("v-if", true)
]),
_: 3
}),
_ctx.closable ? (openBlock(), createElementBlock(
"button",
{
key: 2,
class: normalizeClass(unref(ns).e("close")),
onClick: handleClickClose
},
[
createVNode(unref(IconClose), { hover: "less" })
],
2
)) : createCommentVNode("v-if", true),
_ctx.$slots.footer ? (openBlock(), createElementBlock(
"div",
{
key: 3,
class: normalizeClass(unref(ns).e("footer"))
},
[
renderSlot(_ctx.$slots, "footer")
],
2
)) : createCommentVNode("v-if", true),
!!_ctx.progress ? (openBlock(), createElementBlock(
"div",
{
key: 4,
class: normalizeClass(unref(ns).e("progress"))
},
[
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).em("progress", "bar")),
style: normalizeStyle({ width: `${_ctx.progress}%` })
},
null,
6
)
],
2
)) : createCommentVNode("v-if", true),
getTotalPages.value > 0 ? (openBlock(), createElementBlock(
"div",
{
key: 5,
class: normalizeClass(unref(ns).e("pagination"))
},
[
createElementVNode("button", {
onClick: handleClickPrevPage,
textContent: "<"
}),
createElementVNode(
"span",
null,
toDisplayString(_ctx.page) + " / " + toDisplayString(getTotalPages.value),
1
),
createElementVNode("button", {
onClick: handleClickNextPage,
textContent: ">"
})
],
2
)) : createCommentVNode("v-if", true)
],
6
)) : createCommentVNode("v-if", true)
]),
_: 3
});
};
}
});
var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/alert/src/alert.vue"]]);
export { Alert as default };
//# sourceMappingURL=alert2.mjs.map