ranui
Version:
UI Component library based on `Web Component`
159 lines (158 loc) • 9.86 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { c as create } from "./plus-BQnIzzvi.js";
import "./index-CwCtKHVs.js";
const less = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host([type="toast"]) .ran-message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}:host([type="toast"]) .ran-message-notice-content{display:inline-block;padding:10px 16px;background:#000000b3;border-radius:7px;pointer-events:all}:host([type="toast"]) .ran-message-notice-content-info{align-items:center;display:flex}:host([type="toast"]) .ran-message-notice-content-info span{margin:0;padding:0;font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none;color:#fff}.ran-message-notice{padding:var(--ran-message-notice-padding, 8px);text-align:var(--ran-message-notice-text-align, center);max-width:var(--ran-message-notice-max-width, 90%);margin:var(--ran-message-notice-margin, 0 auto);word-break:var(--ran-message-notice-word-break, break-all)}.ran-message-notice-content{display:var(--ran-message-notice-content-display, inline-block);padding:var(--ran-message-notice-content-padding, 10px 16px);background:var(--ran-message-notice-content-background, #fff);border-radius:var(--ran-message-notice-content-border-radius, 8px);box-shadow:var(--ran-message-notice-content-box-shadow, 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d);pointer-events:var(--ran-message-notice-content-pointer-events, all)}.ran-message-notice-content-info{align-items:var(--ran-message-notice-content-info-align-items, center);display:var(--ran-message-notice-content-info-display, flex)}.ran-message-notice-content-info span{margin:var(--ran-message-notice-content-info-span-margin, 0);padding:var(--ran-message-notice-content-info-span-padding, 0);color:var(--ran-message-notice-content-info-span-color, #000000d9);font-size:var(--ran-message-notice-content-info-span-font-size, 14px);font-variant:var(--ran-message-notice-content-info-span-font-variant, tabular-nums);list-style:var(--ran-message-notice-content-info-span-list-style, none);font-feature-settings:var(--ran-message-notice-content-info-span-font-feature-settings, "tnum");z-index:var(--ran-message-notice-content-info-span-z-index, 1010);width:var(--ran-message-notice-content-info-span-width, 100%);pointer-events:var(--ran-message-notice-content-info-span-pointer-events, none)}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:8px;transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:var(--ran-message-box-sizing, border-box);margin:var(--ran-message-margin, 0);padding:var(--ran-message-padding, 0);color:var(--ran-message-color, #000000d9);font-size:var(--ran-message-font-size, 14px);font-variant:var(--ran-message-font-variant, tabular-nums);line-height:var(--ran-message-line-height, 1.5715);list-style:var(--ran-message-ist-style, none);font-feature-settings:var(--ran-message-font-feature-settings, "tnum");position:var(--ran-message-position, fixed);top:var(--ran-message-top, 8px);left:var(--ran-message-left, 0);z-index:var(--ran-message-z-index, 1010);width:var(--ran-message-width, 100%);pointer-events:var(--ran-message-pointer-events, none)}.ranui-message .message-in{animation-name:var(--ran-message-in-animation-name, MessageMoveIn);animation-duration:var(--ran-message-in-animation-duration, .3s);animation-timing-function:var(--ran-message-in-animation-timing-function, cubic-bezier(.78, .14, .15, .86))}.ranui-message .message-leave{animation-name:var(--ran-message-leave-animation-name, MessageMoveOut);animation-duration:var(--ran-message-leave-animation-duration, .3s);animation-timing-function:var(--ran-message-leave-animation-timing-function, cubic-bezier(.78, .14, .15, .86))}';
const AnimationTime = 300;
const defaultDuration = 3e3;
const typeMapIcon = /* @__PURE__ */ new Map([
["success", "check-circle-fill"],
["warning", "warning-circle-fill"],
["error", "close-circle-fill"],
["info", "info-circle-fill"],
["toast", null]
]);
const typeMapColor = /* @__PURE__ */ new Map([
["success", "#52c41a"],
["warning", "#faad14"],
["error", "#ff4d4f"],
["info", "#1890ff"],
["toast", "rgba(0, 0, 0, 0.7)"]
]);
function Custom() {
if (typeof window !== "undefined" && !customElements.get("r-message")) {
class CustomMessage extends HTMLElement {
constructor() {
super();
__publicField(this, "_info");
__publicField(this, "_notice");
__publicField(this, "_content");
__publicField(this, "_icon");
__publicField(this, "_span");
__publicField(this, "timeId");
__publicField(this, "close");
/**
* @description: 设置图标
* @param {string} value
*/
__publicField(this, "setIcon", (value) => {
var _a, _b, _c, _d;
const icon = typeMapIcon.get(value);
const color = typeMapColor.get(value);
if (icon) {
(_a = this._icon) == null ? void 0 : _a.setAttribute("name", icon);
(_b = this._icon) == null ? void 0 : _b.style.setProperty("margin-right", "8px");
(_c = this._icon) == null ? void 0 : _c.setAttribute("size", "18");
color && ((_d = this._icon) == null ? void 0 : _d.setAttribute("color", color));
}
});
this._notice = document.createElement("div");
this._notice.setAttribute("class", "ran-message-notice");
this._content = document.createElement("div");
this._content.setAttribute("class", "ran-message-notice-content");
this._info = document.createElement("div");
this._info.setAttribute("class", "ran-message-notice-content-info");
this._icon = document.createElement("r-icon");
this._span = document.createElement("span");
this._info.appendChild(this._icon);
this._info.appendChild(this._span);
this._content.appendChild(this._info);
this._notice.appendChild(this._content);
const shadowRoot = this.attachShadow({ mode: "closed" });
const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = less;
shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
shadowRoot.appendChild(this._notice);
}
static get observedAttributes() {
return ["type", "content"];
}
get type() {
return this.getAttribute("type");
}
set type(value) {
if (value) this.setAttribute("type", value);
}
get content() {
return this.getAttribute("content");
}
set content(value) {
if (value) this.setAttribute("content", value);
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "content" && oldValue !== newValue) {
this._span.textContent = newValue;
}
if (name === "type" && oldValue !== newValue) {
this.setIcon(newValue);
}
}
}
customElements.define("r-message", CustomMessage);
const container = document.createElement("div");
const style = create("style").setTextContent(less);
const div = document.createElement("div");
div.setAttribute("class", "ranui-message");
document.body.appendChild(container);
container.appendChild(style.element);
container.appendChild(div);
const commonPrompt = (type) => {
return (options) => {
const message2 = new CustomMessage();
message2.setAttribute("class", "message");
message2.timeId && clearTimeout(message2.timeId);
message2.setAttribute("type", type);
let duration = defaultDuration;
let close;
if (!options) return;
if (typeof options === "string") {
message2.setAttribute("content", options);
} else {
message2.setAttribute("content", options.content);
close = options.close;
duration = options.duration || defaultDuration;
}
const time = setTimeout(() => {
message2.classList.remove("message-in");
message2.classList.add("message-leave");
clearTimeout(time);
}, duration - AnimationTime);
message2.timeId = setTimeout(() => {
message2.classList.remove("message-leave");
div.removeChild(message2);
if (close) close();
}, duration);
div.appendChild(message2);
message2.classList.add("message-in");
setTimeout(() => {
message2.classList.remove("message-in");
}, AnimationTime);
};
};
return {
info: commonPrompt("info"),
success: commonPrompt("success"),
error: commonPrompt("error"),
warning: commonPrompt("warning"),
toast: commonPrompt("toast")
};
}
return null;
}
const message = Custom();
if (typeof window !== "undefined" && message) {
window.message = message;
if (!window.ranui) {
window.ranui = {};
}
window.ranui.message = message;
}
const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: message
}, Symbol.toStringTag, { value: "Module" }));
export {
index as i,
message as m
};