@rhino-design/vue 0.2.1 → 0.2.3

package/dist/components/XMenuOverflowWrap.vue.js

@@ -0,0 +1,116 @@
+import { defineComponent as A, ref as g, onMounted as L, onUpdated as $, onUnmounted as E, h, cloneVNode as N, Comment as V, Fragment as k } from "vue";
+import R from "./XSubMenu.vue.js";
+import F from "../composables/menu-hooks/use-menu-context.js";
+const H = 10;
+function S(r) {
+  return r ? Number(r.getBoundingClientRect().width.toFixed(2)) : 0;
+}
+function W(r) {
+  const t = Number(r.replace("px", ""));
+  return Number.isNaN(t) ? 0 : t;
+}
+function P(r) {
+  const t = [], s = (u) => {
+    u.forEach((e) => {
+      if (!e) return;
+      if (Array.isArray(e)) {
+        s(e);
+        return;
+      }
+      if (typeof e != "object") return;
+      const n = e;
+      if (n.type !== V) {
+        if (n.type === k && Array.isArray(n.children)) {
+          s(n.children);
+          return;
+        }
+        t.push(n);
+      }
+    });
+  };
+  return s(r), t;
+}
+const j = A({
+  name: "XMenuOverflowWrap",
+  setup(r, { slots: t }) {
+    const s = F(), u = g(null), e = g(null);
+    let n = null;
+    const a = `${s.prefixCls || "x-menu"}-overflow`, _ = `${a}-wrap`, C = `${a}-sub-menu`, O = `${a}-hidden-menu-item`, x = `${a}-sub-menu-mirror`, w = () => {
+      const l = u.value;
+      if (!l) return;
+      const f = S(l), m = Array.from(l.children);
+      let d = 0, i = 0, p = 0;
+      for (let o = 0; o < m.length; o += 1) {
+        const c = m[o], v = c.className.split(" "), b = v.includes(C), I = v.includes(x);
+        if (b)
+          continue;
+        const y = getComputedStyle(c), M = S(c) + W(y.marginLeft) + W(y.marginRight);
+        if (I) {
+          p = M;
+          continue;
+        }
+        if (i += M, i + p + H > f) {
+          e.value = d - 1;
+          return;
+        }
+        d += 1;
+      }
+      e.value = null;
+    };
+    return L(() => {
+      w(), !(typeof ResizeObserver > "u" || !u.value) && (n = new ResizeObserver(() => {
+        w();
+      }), n.observe(u.value));
+    }), $(() => {
+      w();
+    }), E(() => {
+      n == null || n.disconnect(), n = null;
+    }), () => {
+      var i;
+      const l = P(((i = t.default) == null ? void 0 : i.call(t)) || []);
+      let f = null;
+      const m = h(
+        R,
+        {
+          key: "__x-menu-overflow-sub-menu-mirror",
+          class: x
+        },
+        {
+          title: () => "...",
+          default: () => null
+        }
+      ), d = l.map((p, o) => {
+        const c = N(
+          p,
+          e.value !== null && o > e.value ? { class: O } : { class: "" }
+        );
+        if (e.value !== null && o === e.value + 1) {
+          const v = l.slice(o).map((b) => N(b));
+          f = h(
+            R,
+            {
+              key: "__x-menu-overflow-sub-menu",
+              class: C
+            },
+            {
+              title: () => "...",
+              default: () => v
+            }
+          );
+        }
+        return c;
+      });
+      return h(
+        "div",
+        {
+          ref: u,
+          class: _
+        },
+        [m, ...d, f]
+      );
+    };
+  }
+});
+export {
+  j as default
+};

package/dist/components/XMenuOverflowWrap.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XMenuOverflowWrap.vue.js";
+export {
+  f as default
+};

package/dist/components/XMessage.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     onClose?: (() => any) | undefined;
 }>, {
     type: MessageDisplayType;
+    duration: number;
     showIcon: boolean;
     closable: boolean;
-    duration: number;
     resetOnUpdate: boolean;
     resetOnHover: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;

package/dist/components/XMessage.vue.js

@@ -0,0 +1,7 @@
+import o from "./XMessage.vue2.js";
+/* empty css              */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-dda08984"]]);
+export {
+  e as default
+};

package/dist/components/XMessage.vue2.js

@@ -0,0 +1,89 @@
+import { defineComponent as b, useSlots as H, computed as r, onMounted as y, onUpdated as B, onUnmounted as V, openBlock as l, createElementBlock as i, normalizeClass as c, renderSlot as u, createElementVNode as C, createCommentVNode as h, createVNode as Z, unref as T } from "vue";
+import S from "./XIcon.js";
+import "./XIconLite.js";
+import p from "../iconfont/generated/icons/guanbi.js";
+import { XIconRegistry as w } from "./x-icon-shared.js";
+const I = {
+  key: 0,
+  class: "x-message__icon",
+  "aria-hidden": "true"
+}, O = ["innerHTML"], U = { class: "x-message__content" }, G = /* @__PURE__ */ b({
+  __name: "XMessage",
+  props: {
+    type: { default: "info" },
+    closable: { type: Boolean, default: !1 },
+    showIcon: { type: Boolean, default: !0 },
+    duration: { default: 3e3 },
+    resetOnUpdate: { type: Boolean, default: !1 },
+    resetOnHover: { type: Boolean, default: !1 }
+  },
+  emits: ["close"],
+  setup(t, { emit: g }) {
+    const e = t, m = g;
+    w.has("guanbi") || w.register("guanbi", {
+      viewBox: p.viewBox,
+      content: p.content
+    });
+    const v = H(), f = {
+      info: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM26 14C26 13.4477 25.5523 13 25 13H23C22.4477 13 22 13.4477 22 14V16C22 16.5523 22.4477 17 23 17H25C25.5523 17 26 16.5523 26 16V14ZM26 31H27C27.5523 31 28 31.4477 28 32V34C28 34.5523 27.5523 35 27 35H21C20.4477 35 20 34.5523 20 34V32C20 31.4477 20.4477 31 21 31H22V23C21.4477 23 21 22.5523 21 22V20C21 19.4477 21.4477 19 22 19H25C25.5523 19 26 19.4477 26 20V31Z" fill="currentColor" stroke="none" stroke-width="none" stroke-linecap="butt"></path></svg>',
+      success: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM34.2073 19.6214C34.5978 19.2308 34.5978 18.5977 34.2073 18.2071L32.793 16.7929C32.4025 16.4024 31.7694 16.4024 31.3788 16.7929L22.0002 26.1716L17.1215 21.2929C16.7309 20.9024 16.0978 20.9024 15.7073 21.2929L14.293 22.7071C13.9025 23.0977 13.9025 23.7308 14.293 24.1213L21.293 31.1213C21.6836 31.5119 22.3167 31.5119 22.7073 31.1213L34.2073 19.6214Z" fill="currentColor" stroke="none" stroke-width="none" stroke-linecap="butt"></path></svg>',
+      warning: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22 33C22 33.5523 22.4477 34 23 34H25C25.5523 34 26 33.5523 26 33V31C26 30.4477 25.5523 30 25 30H23C22.4477 30 22 30.4477 22 31V33ZM26 15C26 14.4477 25.5523 14 25 14H23C22.4477 14 22 14.4477 22 15L22 27C22 27.5523 22.4477 28 23 28H25C25.5523 28 26 27.5523 26 27L26 15Z" fill="currentColor" stroke="none" stroke-width="none" stroke-linecap="butt"></path></svg>',
+      error: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM28.9547 16.2287L24.005 21.1785L19.0552 16.2287C18.6647 15.8382 18.0315 15.8382 17.641 16.2287L16.2268 17.6429C15.8363 18.0335 15.8363 18.6666 16.2268 19.0571L21.1765 24.0069L16.2268 28.9566C15.8363 29.3472 15.8363 29.9803 16.2268 30.3708L17.641 31.7851C18.0315 32.1756 18.6647 32.1756 19.0552 31.7851L24.005 26.8353L28.9547 31.7851C29.3452 32.1756 29.9784 32.1756 30.3689 31.7851L31.7831 30.3708C32.1737 29.9803 32.1737 29.3472 31.7831 28.9566L26.8334 24.0069L31.7831 19.0571C32.1737 18.6666 32.1737 18.0335 31.7831 17.6429L30.3689 16.2287C29.9784 15.8382 29.3452 15.8382 28.9547 16.2287Z" fill="currentColor" stroke="none" stroke-width="none" stroke-linecap="butt"></path></svg>',
+      loading: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4"><path d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6" stroke-linecap="butt"></path></svg>'
+    }, k = r(() => e.type === "normal" ? "" : f[e.type]), L = r(() => e.showIcon && (e.type !== "normal" || !!v.icon)), x = r(() => e.type === "loading");
+    let o = 0;
+    const a = () => {
+      m("close");
+    }, n = () => {
+      e.duration > 0 && (o = window.setTimeout(a, e.duration));
+    }, s = () => {
+      o && (window.clearTimeout(o), o = 0);
+    }, M = () => {
+      e.resetOnHover && s();
+    }, _ = () => {
+      e.resetOnHover && n();
+    };
+    return y(() => {
+      n();
+    }), B(() => {
+      e.resetOnUpdate && (s(), n());
+    }), V(() => {
+      s();
+    }), (d, N) => (l(), i("li", {
+      role: "alert",
+      class: c(["x-message", [
+        `x-message--${t.type}`,
+        { "x-message--closable": t.closable }
+      ]]),
+      onMouseenter: M,
+      onMouseleave: _
+    }, [
+      L.value ? (l(), i("span", I, [
+        u(d.$slots, "icon", {}, () => [
+          C("span", {
+            class: c(["x-message__status-svg", { "x-message__status-svg--loading": x.value }]),
+            innerHTML: k.value
+          }, null, 10, O)
+        ], !0)
+      ])) : h("", !0),
+      C("span", U, [
+        u(d.$slots, "default", {}, void 0, !0)
+      ]),
+      t.closable ? (l(), i("button", {
+        key: 1,
+        type: "button",
+        class: "x-message__close-btn",
+        "aria-label": "close",
+        onClick: a
+      }, [
+        Z(T(S), {
+          name: "guanbi",
+          size: 12
+        })
+      ])) : h("", !0)
+    ], 34));
+  }
+});
+export {
+  G as default
+};

package/dist/components/XMessageList.d.ts

@@ -32,8 +32,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     onClose?: ((...args: any[]) => any) | undefined;
     onAfterClose?: ((...args: any[]) => any) | undefined;
 }>, {
+    position: "top" | "bottom";
     zIndex: number;
-    position: "bottom" | "top";
     messages: MessageItem[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/XMessageList.js

@@ -0,0 +1,61 @@
+import { defineComponent as l, h as t, TransitionGroup as u } from "vue";
+import d from "./XMessage.vue.js";
+function n(s) {
+  if (s != null)
+    return typeof s == "function" ? s : () => s;
+}
+const p = l({
+  name: "XMessageList",
+  props: {
+    messages: {
+      type: Array,
+      default: () => []
+    },
+    position: {
+      type: String,
+      default: "top"
+    },
+    zIndex: {
+      type: Number,
+      default: 2e3
+    }
+  },
+  emits: ["close", "afterClose"],
+  setup(s, { emit: o }) {
+    return () => t(
+      u,
+      {
+        class: ["x-message-list", `x-message-list--${s.position}`],
+        name: "x-fade-message",
+        tag: "ul",
+        style: { zIndex: `${s.zIndex}` },
+        onAfterLeave: () => o("afterClose")
+      },
+      {
+        default: () => s.messages.map((e) => {
+          const a = n(e.content) ?? (() => null), r = n(e.icon);
+          return t(
+            d,
+            {
+              key: e.id,
+              type: e.type,
+              duration: e.duration,
+              closable: e.closable,
+              showIcon: e.showIcon,
+              resetOnUpdate: e.resetOnUpdate,
+              resetOnHover: e.resetOnHover,
+              onClose: () => o("close", e.id)
+            },
+            {
+              default: a,
+              icon: r
+            }
+          );
+        })
+      }
+    );
+  }
+});
+export {
+  p as default
+};

package/dist/components/XMessageService.d.ts

@@ -1,4 +1,5 @@
 import { App, AppContext, VNodeChild } from 'vue';
+import { XThemeMode } from '../composables/theme-context';
 export declare const MESSAGE_POSITIONS: readonly ["top", "bottom"];
 export type MessageType = 'info' | 'success' | 'warning' | 'error';
 export type MessageDisplayType = MessageType | 'loading' | 'normal';
@@ -8,6 +9,7 @@ export type MessageRenderContent = VNodeChild | (() => VNodeChild);
 export interface MessageConfig {
     content: MessageRenderContent;
     id?: string | number;
+    theme?: XThemeMode;
     icon?: MessageRenderFunction;
     position?: MessagePosition;
     showIcon?: boolean;

package/dist/components/XMessageService.js

@@ -0,0 +1,118 @@
+var g = Object.defineProperty;
+var d = (t, e, s) => e in t ? g(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var o = (t, e, s) => d(t, typeof e != "symbol" ? e + "" : e, s);
+import { ref as f, createVNode as v, render as u } from "vue";
+import C from "./XMessageList.js";
+import { syncThemeContextToElement as h } from "../composables/theme-context.js";
+function m() {
+  return typeof document > "u" ? null : document.activeElement instanceof HTMLElement ? document.activeElement : null;
+}
+class p {
+  constructor(e, s) {
+    o(this, "messageIds");
+    o(this, "messages");
+    o(this, "position");
+    o(this, "container");
+    o(this, "messageCount", 0);
+    o(this, "setTheme", (e, s) => {
+      this.container && h(this.container, e, s);
+    });
+    o(this, "add", (e) => {
+      this.setTheme(e.theme, m()), this.messageCount += 1;
+      const s = e.id ?? `__x_message_${this.messageCount}`;
+      if (this.messageIds.has(s))
+        return this.update(s, e);
+      const n = { id: s, ...e };
+      return this.messages.value.push(n), this.messageIds.add(s), {
+        close: () => this.remove(s)
+      };
+    });
+    o(this, "update", (e, s) => {
+      for (let n = 0; n < this.messages.value.length; n += 1)
+        if (this.messages.value[n].id === e) {
+          const r = s.duration !== void 0;
+          Object.assign(this.messages.value[n], { ...s, id: e, resetOnUpdate: r });
+          break;
+        }
+      return {
+        close: () => this.remove(e)
+      };
+    });
+    o(this, "remove", (e) => {
+      for (let s = 0; s < this.messages.value.length; s += 1) {
+        const n = this.messages.value[s];
+        if (n.id === e) {
+          typeof n.onClose == "function" && n.onClose(e), this.messages.value.splice(s, 1), this.messageIds.delete(e);
+          break;
+        }
+      }
+    });
+    o(this, "clear", () => {
+      this.messages.value.splice(0);
+    });
+    o(this, "destroy", () => {
+      this.messages.value.length === 0 && this.container && (u(null, this.container), this.container.parentNode && this.container.parentNode.removeChild(this.container), this.container = null, a[this.position] = void 0);
+    });
+    const { position: n = "top" } = e;
+    this.container = document.createElement("div"), this.messageIds = /* @__PURE__ */ new Set(), this.messages = f([]), this.position = n;
+    const r = v(C, {
+      messages: this.messages.value,
+      position: n,
+      onClose: this.remove,
+      onAfterClose: this.destroy
+    });
+    s && (r.appContext = s), u(r, this.container), h(this.container, e.theme, m()), document.body.appendChild(this.container);
+  }
+}
+const a = {};
+function x(t) {
+  return typeof t == "string" ? { content: t } : t;
+}
+function c(t, e, s) {
+  const n = x(e), r = { type: t, ...n }, { position: l = "top" } = r;
+  return a[l] || (a[l] = new p(r, s ?? i._context)), a[l].setTheme(r.theme, m()), a[l].add(r);
+}
+const i = {
+  info(t, e) {
+    return c("info", t, e);
+  },
+  success(t, e) {
+    return c("success", t, e);
+  },
+  warning(t, e) {
+    return c("warning", t, e);
+  },
+  error(t, e) {
+    return c("error", t, e);
+  },
+  loading(t, e) {
+    return c("loading", t, e);
+  },
+  normal(t, e) {
+    return c("normal", t, e);
+  },
+  clear(t) {
+    var e;
+    if (t) {
+      (e = a[t]) == null || e.clear();
+      return;
+    }
+    Object.values(a).forEach((s) => s == null ? void 0 : s.clear());
+  },
+  install(t) {
+    const e = {
+      info: (s, n = t._context) => i.info(s, n),
+      success: (s, n = t._context) => i.success(s, n),
+      warning: (s, n = t._context) => i.warning(s, n),
+      error: (s, n = t._context) => i.error(s, n),
+      loading: (s, n = t._context) => i.loading(s, n),
+      normal: (s, n = t._context) => i.normal(s, n),
+      clear: i.clear
+    };
+    t.config.globalProperties.$message = e;
+  },
+  _context: null
+};
+export {
+  i as Message
+};

package/dist/components/XModal.vue.d.ts

@@ -62,37 +62,37 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    open: () => any;
     cancel: (event: Event) => any;
     close: () => any;
+    open: () => any;
     "update:open": (value: boolean) => any;
     ok: (event: Event) => any;
     beforeClose: () => any;
     "update:visible": (value: boolean) => any;
     beforeOpen: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onOpen?: (() => any) | undefined;
     onCancel?: ((event: Event) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onOk?: ((event: Event) => any) | undefined;
     onBeforeClose?: (() => any) | undefined;
     "onUpdate:visible"?: ((value: boolean) => any) | undefined;
     onBeforeOpen?: (() => any) | undefined;
 }>, {
-    top: number | string;
-    width: number | string;
-    mask: boolean;
     footer: boolean;
     title: string;
+    mask: boolean;
+    width: number | string;
+    top: number | string;
     visible: boolean;
     open: boolean;
-    closable: boolean;
-    bodyStyle: string | false | CSSProperties | StyleValue[] | null;
-    draggable: boolean;
     unmountOnClose: boolean;
     popupContainer: string | HTMLElement;
     renderToBody: boolean;
+    closable: boolean;
+    bodyStyle: string | false | CSSProperties | StyleValue[] | null;
+    draggable: boolean;
     defaultVisible: boolean;
     maskClosable: boolean;
     okText: string;

package/dist/components/XModal.vue.js

@@ -0,0 +1,7 @@
+import o from "./XModal.vue2.js";
+/* empty css            */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-65e82a63"]]);
+export {
+  p as default
+};