@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
231 lines (230 loc) • 6.94 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
import { reactive, TransitionGroup, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
import { call, isFunction, isPlainObject, isString, toNumber } from "@varlet/shared";
import context from "../context/index.mjs";
import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
import VarSnackbarCore from "./core.mjs";
import { props as snackbarProps } from "./props.mjs";
import VarSnackbar from "./Snackbar.mjs";
const SNACKBAR_TYPE = ["loading", "success", "warning", "info", "error"];
let sid = 0;
let isMount = false;
let unmount;
let isAllowMultiple = false;
const defaultOptionsValue = {
type: void 0,
content: "",
icon: "",
action: "",
position: "top",
duration: 3e3,
elevation: true,
vertical: false,
contentClass: void 0,
loadingType: "circle",
loadingSize: "normal",
lockScroll: false,
teleport: "body",
forbidClick: false,
onOpen: () => {
},
onOpened: () => {
},
onClose: () => {
},
onClosed: () => {
}
};
let uniqSnackbarOptions = reactive([]);
let defaultOptions = defaultOptionsValue;
const transitionGroupProps = {
name: "var-snackbar-fade",
tag: "div",
class: "var-transition-group"
};
const getSlotValue = (value) => () => isFunction(value) ? value() : value;
const TransitionGroupHost = {
setup() {
return () => {
const snackbarList = uniqSnackbarOptions.map(({
id,
reactiveSnackOptions,
_update
}) => {
const transitionGroupEl = document.querySelector(".var-transition-group");
if (reactiveSnackOptions.forbidClick || reactiveSnackOptions.type === "loading") {
;
transitionGroupEl.classList.add("var-pointer-auto");
} else {
;
transitionGroupEl.classList.remove("var-pointer-auto");
}
const style = __spreadValues({
position: isAllowMultiple ? "relative" : "absolute"
}, getTop(reactiveSnackOptions.position));
const {
content,
icon,
action
} = reactiveSnackOptions;
const slots = {
default: getSlotValue(content),
icon: getSlotValue(icon),
action: getSlotValue(action)
};
return _createVNode(VarSnackbarCore, _mergeProps(reactiveSnackOptions, {
"key": id,
"style": style,
"data-id": id,
"_update": _update,
"show": reactiveSnackOptions.show,
"onUpdate:show": ($event) => reactiveSnackOptions.show = $event
}), slots);
});
return _createVNode(TransitionGroup, _mergeProps(transitionGroupProps, {
"style": {
zIndex: context.zIndex
},
"onAfterEnter": opened,
"onAfterLeave": removeUniqOption
}), {
default: () => [snackbarList]
});
};
}
};
const Snackbar = function(options) {
const snackOptions = normalizeOptions(options);
const reactiveSnackOptions = reactive(__spreadValues(__spreadValues({}, defaultOptions), snackOptions));
reactiveSnackOptions.show = true;
if (!isMount) {
isMount = true;
unmount = mountInstance(TransitionGroupHost).unmountInstance;
}
const {
length
} = uniqSnackbarOptions;
const uniqSnackbarOptionItem = {
id: sid++,
reactiveSnackOptions
};
if (length === 0 || isAllowMultiple) {
addUniqOption(uniqSnackbarOptionItem);
} else {
const _update = `update-${sid}`;
updateUniqOption(reactiveSnackOptions, _update);
}
return {
clear() {
if (!isAllowMultiple && uniqSnackbarOptions.length) {
uniqSnackbarOptions[0].reactiveSnackOptions.show = false;
} else {
reactiveSnackOptions.show = false;
}
}
};
};
SNACKBAR_TYPE.forEach((type) => {
Snackbar[type] = (options) => {
if (isPlainObject(options)) {
options.type = type;
} else {
options = {
content: options,
type
};
}
return Snackbar(options);
};
});
Snackbar.allowMultiple = function(bool = false) {
if (bool !== isAllowMultiple) {
uniqSnackbarOptions.forEach((option) => {
option.reactiveSnackOptions.show = false;
});
isAllowMultiple = bool;
}
};
Snackbar.clear = function() {
uniqSnackbarOptions.forEach((option) => {
option.reactiveSnackOptions.show = false;
});
};
Snackbar.setDefaultOptions = function(options) {
defaultOptions = options;
};
Snackbar.resetDefaultOptions = function() {
defaultOptions = defaultOptionsValue;
};
function opened(element) {
const id = element.getAttribute("data-id");
const option = uniqSnackbarOptions.find((option2) => option2.id === toNumber(id));
if (option) {
call(option.reactiveSnackOptions.onOpened);
}
}
function removeUniqOption(element) {
element.parentElement && element.parentElement.classList.remove("var-pointer-auto");
const id = element.getAttribute("data-id");
const option = uniqSnackbarOptions.find((option2) => option2.id === toNumber(id));
if (option) {
option.animationEnd = true;
call(option.reactiveSnackOptions.onClosed);
}
const isAllAnimationEnd = uniqSnackbarOptions.every((option2) => option2.animationEnd);
if (isAllAnimationEnd) {
call(unmount);
uniqSnackbarOptions = reactive([]);
isMount = false;
}
}
function addUniqOption(uniqSnackbarOptionItem) {
uniqSnackbarOptions.push(uniqSnackbarOptionItem);
}
function normalizeOptions(options = {}) {
return isString(options) ? {
content: options
} : options;
}
function updateUniqOption(reactiveSnackOptions, _update) {
const [firstOption] = uniqSnackbarOptions;
firstOption.reactiveSnackOptions = __spreadValues(__spreadValues({}, firstOption.reactiveSnackOptions), reactiveSnackOptions);
firstOption._update = _update;
}
function getTop(position = "top") {
if (position === "bottom") {
return {
top: "85%"
};
}
return {
top: position === "top" ? "5%" : "45%"
};
}
Snackbar.Component = VarSnackbar;
withInstall(VarSnackbar);
withInstall(VarSnackbar, Snackbar);
withPropsDefaultsSetter(Snackbar, snackbarProps);
const _SnackbarComponent = VarSnackbar;
var stdin_default = Snackbar;
export {
SNACKBAR_TYPE,
_SnackbarComponent,
stdin_default as default,
snackbarProps
};