@rhino-design/vue 0.2.2 → 0.2.3

package/dist/components/XNotificationList.js

@@ -0,0 +1,70 @@
+import { defineComponent as c, h as i, TransitionGroup as r } from "vue";
+import f from "./XNotification.vue.js";
+function u(t) {
+  return t.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function n(t) {
+  if (t != null)
+    return typeof t == "function" ? t : () => t;
+}
+const y = c({
+  name: "XNotificationList",
+  props: {
+    notifications: {
+      type: Array,
+      default: () => []
+    },
+    position: {
+      type: String,
+      default: "topRight"
+    },
+    zIndex: {
+      type: Number,
+      default: 2003
+    }
+  },
+  emits: ["close", "afterClose"],
+  setup(t, { emit: e }) {
+    const s = t.position.includes("Right"), l = `x-notification-list--${u(t.position)}`;
+    return () => i(
+      r,
+      {
+        class: ["x-notification-list", l],
+        style: { zIndex: `${t.zIndex}` },
+        name: s ? "slide-right-notification" : "slide-left-notification",
+        onAfterLeave: () => e("afterClose"),
+        tag: "ul"
+      },
+      {
+        default: () => t.notifications.map((o) => {
+          const a = {
+            default: n(o.title),
+            content: n(o.content),
+            icon: n(o.icon),
+            footer: n(o.footer),
+            closeIcon: n(o.closeIcon),
+            closeIconElement: n(o.closeIconElement)
+          };
+          return i(
+            f,
+            {
+              key: o.id,
+              type: o.type,
+              style: o.style,
+              class: o.class,
+              duration: o.duration,
+              closable: o.closable,
+              showIcon: o.showIcon,
+              resetOnUpdate: o.resetOnUpdate,
+              onClose: () => e("close", o.id)
+            },
+            a
+          );
+        })
+      }
+    );
+  }
+});
+export {
+  y as default
+};

package/dist/components/XNotificationService.js

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

package/dist/components/XOptgroup.vue.js

@@ -0,0 +1,14 @@
+import { defineComponent as t, renderSlot as r } from "vue";
+const s = /* @__PURE__ */ t({
+  __name: "XOptgroup",
+  props: {
+    theme: {},
+    label: {}
+  },
+  setup(o) {
+    return (e, p) => r(e.$slots, "default");
+  }
+});
+export {
+  s as default
+};

package/dist/components/XOptgroup.vue2.js

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

package/dist/components/XOption.vue.js

@@ -0,0 +1,21 @@
+import { defineComponent as a, renderSlot as o, createTextVNode as n, toDisplayString as r } from "vue";
+const p = /* @__PURE__ */ a({
+  __name: "XOption",
+  props: {
+    theme: {},
+    value: { type: [String, Number, Boolean, Object] },
+    label: {},
+    disabled: { type: Boolean },
+    tagProps: {},
+    extra: {},
+    index: {}
+  },
+  setup(e) {
+    return (t, l) => o(t.$slots, "default", {}, () => [
+      n(r(e.label ?? e.value), 1)
+    ]);
+  }
+});
+export {
+  p as default
+};

package/dist/components/XOption.vue2.js

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

package/dist/components/XOverflowList.vue.js

@@ -0,0 +1,149 @@
+import { defineComponent as z, ref as b, computed as C, watch as N, onMounted as F, onBeforeUnmount as M, mergeProps as L, h as R, isVNode as P, Comment as S, Fragment as j } from "vue";
+import k from "./XTag.vue.js";
+const G = 1, H = 6;
+function T(n) {
+  const s = [];
+  for (let l = 0; l < n.length; l += 1)
+    s[l] = n[n.length - 1 - l];
+  return s;
+}
+function B(n) {
+  const s = [], l = (a) => {
+    var m, g, W, u;
+    for (const e of a ?? [])
+      if (e) {
+        if (Array.isArray(e)) {
+          l(e);
+          continue;
+        }
+        if (P(e) && e.type !== S) {
+          if (e.type === j) {
+            Array.isArray(e.children) ? l(e.children) : e.children && typeof e.children == "object" && "default" in e.children && typeof e.children.default == "function" && l((g = (m = e.children).default) == null ? void 0 : g.call(m));
+            continue;
+          }
+          if (e.shapeFlag & G || e.shapeFlag & H) {
+            s.push(e);
+            continue;
+          }
+          Array.isArray(e.children) ? l(e.children) : e.children && typeof e.children == "object" && "default" in e.children && typeof e.children.default == "function" && l((u = (W = e.children).default) == null ? void 0 : u.call(W));
+        }
+      }
+  };
+  return l(n), s;
+}
+const X = z({
+  name: "XOverflowList",
+  props: {
+    min: {
+      type: Number,
+      default: 0
+    },
+    margin: {
+      type: Number,
+      default: 8
+    },
+    from: {
+      type: String,
+      default: "end"
+    }
+  },
+  emits: {
+    change: (n) => typeof n == "number"
+  },
+  setup(n, { attrs: s, emit: l, slots: a }) {
+    const m = "x-overflow-list", g = b(), W = b(), u = b(), e = { value: [] }, A = [], c = b(0), t = b(0), $ = C(() => t.value > 0), E = b(0), d = C(() => n.from === "start");
+    let w = null, _ = !1;
+    N(c, (i, f) => {
+      t.value > 0 && (t.value += i - f, t.value < 0 && (t.value = 0));
+    }), N(t, (i) => {
+      l("change", i);
+    });
+    const p = () => {
+      var v;
+      if (!g.value || !u.value)
+        return;
+      if (c.value === 0) {
+        t.value !== 0 && (t.value = 0);
+        return;
+      }
+      const i = u.value.offsetWidth;
+      if (i > 1 && (t.value === 0 || i < E.value))
+        return;
+      for (let o = 0; o < e.value.length; o += 1) {
+        const h = e.value[o].el;
+        h && h.offsetWidth && (A[o] = h.offsetWidth + n.margin);
+      }
+      let f = g.value.clientWidth - (((v = W.value) == null ? void 0 : v.offsetWidth) ?? 0) - (d.value ? n.margin : 0);
+      const y = d.value ? T(A) : A;
+      let r = 0;
+      for (let o = 0; o < y.length; o += 1) {
+        const h = y[o] ?? 0;
+        if (h < f - 1)
+          f -= h, r += 1;
+        else {
+          E.value = h;
+          break;
+        }
+      }
+      r < n.min && n.min < c.value && (r = n.min);
+      const x = c.value - r;
+      t.value !== x && (t.value = x);
+    };
+    N($, () => p(), { flush: "post" }), N(() => [n.from, n.margin, n.min], () => p(), { flush: "post" }), F(() => {
+      typeof ResizeObserver < "u" && u.value ? (w = new ResizeObserver(() => {
+        p();
+      }), w.observe(u.value)) : typeof window < "u" && (_ = !0, window.addEventListener("resize", p)), u.value && u.value.offsetWidth < 1 && p();
+    }), M(() => {
+      w == null || w.disconnect(), w = null, _ && typeof window < "u" && window.removeEventListener("resize", p);
+    });
+    const O = () => {
+      var f;
+      const i = (f = a.overflow) == null ? void 0 : f.call(a, { number: t.value });
+      return R(
+        "div",
+        {
+          ref: W,
+          class: `${m}-overflow`,
+          style: d.value ? { marginRight: `${n.margin}px` } : void 0
+        },
+        i && i.length > 0 ? i : [
+          R(
+            k,
+            null,
+            {
+              default: () => `+${t.value}`
+            }
+          )
+        ]
+      );
+    };
+    return () => {
+      var x;
+      e.value = B((x = a.default) == null ? void 0 : x.call(a)), c.value !== e.value.length && (c.value = e.value.length, A.length = c.value);
+      let i = e.value;
+      t.value > 0 && (i = d.value ? e.value.slice(t.value) : e.value.slice(0, -t.value));
+      const f = t.value === 0 || d.value ? i.length - 1 : i.length, y = [...i];
+      for (let v = 0; v < f; v += 1)
+        y[v].props = L(y[v].props ?? {}, {
+          style: { marginRight: `${n.margin}px` }
+        });
+      const r = [];
+      return d.value && t.value > 0 && r.push(O()), r.push(...y), !d.value && t.value > 0 && r.push(O()), r.push(
+        R("div", {
+          ref: u,
+          class: `${m}-spacer`
+        })
+      ), R(
+        "div",
+        L(s, {
+          ref: g,
+          class: m
+        }),
+        r
+      );
+    };
+  }
+});
+export {
+  X as default
+};

package/dist/components/XOverflowList.vue2.js

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

package/dist/components/XPageHeader.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent as k, useSlots as g, computed as c, openBlock as t, createElementBlock as a, mergeProps as f, createElementVNode as l, renderSlot as s, createCommentVNode as o, normalizeClass as x, createVNode as B, unref as $, createTextVNode as i, toDisplayString as u } from "vue";
+import v from "./XIcon.js";
+const y = { class: "x-page-header__wrapper" }, w = {
+  key: 0,
+  class: "x-page-header__breadcrumb"
+}, C = { class: "x-page-header__header" }, N = { class: "x-page-header__title" }, S = {
+  key: 1,
+  class: "x-page-header__divider"
+}, V = {
+  key: 2,
+  class: "x-page-header__subtitle"
+}, z = {
+  key: 0,
+  class: "x-page-header__extra"
+}, E = {
+  key: 0,
+  class: "x-page-header__content"
+}, H = /* @__PURE__ */ k({
+  __name: "XPageHeader",
+  props: {
+    title: {},
+    subtitle: {},
+    showBack: { type: Boolean, default: !0 }
+  },
+  emits: ["back"],
+  setup(r, { emit: h }) {
+    const p = r, _ = h, n = g(), d = c(() => !!(n.subtitle || p.subtitle)), b = c(() => [
+      "x-page-header",
+      {
+        "x-page-header--with-breadcrumb": !!n.breadcrumb,
+        "x-page-header--with-content": !!n.default
+      }
+    ]);
+    function m(e) {
+      _("back", e);
+    }
+    return (e, P) => (t(), a("div", f({ class: b.value }, e.$attrs), [
+      l("div", y, [
+        e.$slots.breadcrumb ? (t(), a("div", w, [
+          s(e.$slots, "breadcrumb")
+        ])) : o("", !0),
+        l("div", C, [
+          l("span", {
+            class: x(["x-page-header__main", { "x-page-header__main--with-back": r.showBack }])
+          }, [
+            r.showBack ? (t(), a("button", {
+              key: 0,
+              type: "button",
+              class: "x-page-header__back-btn x-page-header__back",
+              onClick: m
+            }, [
+              s(e.$slots, "back-icon", {}, () => [
+                B($(v), {
+                  name: "fanhui",
+                  size: 14
+                })
+              ])
+            ])) : o("", !0),
+            l("span", N, [
+              s(e.$slots, "title", {}, () => [
+                i(u(r.title), 1)
+              ])
+            ]),
+            d.value ? (t(), a("span", S)) : o("", !0),
+            d.value ? (t(), a("span", V, [
+              s(e.$slots, "subtitle", {}, () => [
+                i(u(r.subtitle), 1)
+              ])
+            ])) : o("", !0)
+          ], 2),
+          e.$slots.extra ? (t(), a("span", z, [
+            s(e.$slots, "extra")
+          ])) : o("", !0)
+        ])
+      ]),
+      e.$slots.default ? (t(), a("div", E, [
+        s(e.$slots, "default")
+      ])) : o("", !0)
+    ], 16));
+  }
+});
+export {
+  H as default
+};

package/dist/components/XPageHeader.vue2.js

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

package/dist/components/XPagination.vue.js

@@ -0,0 +1,121 @@
+import { defineComponent as B, computed as f, ref as T, watch as N, openBlock as s, createElementBlock as u, normalizeClass as b, toDisplayString as r, createCommentVNode as y, createElementVNode as x, unref as d, Fragment as z, renderList as S, createTextVNode as M, withDirectives as V, withKeys as J, vModelText as O } from "vue";
+import { useXI18n as j } from "../composables/i18n.js";
+const D = {
+  key: 0,
+  class: "x-pagination__total"
+}, E = ["disabled"], K = {
+  key: 1,
+  class: "x-pagination__simple"
+}, X = ["disabled", "onClick"], A = ["disabled"], F = {
+  key: 3,
+  class: "x-pagination__size"
+}, I = ["value"], L = ["value"], U = {
+  key: 4,
+  class: "x-pagination__jumper"
+}, q = ["max"], Q = /* @__PURE__ */ B({
+  __name: "XPagination",
+  props: {
+    current: { default: 1 },
+    total: { default: 0 },
+    pageSize: { default: 10 },
+    pageSizeOptions: { default: () => [10, 20, 50, 100] },
+    showTotal: { type: Boolean, default: !1 },
+    showJumper: { type: Boolean, default: !1 },
+    showPageSize: { type: Boolean, default: !1 },
+    simple: { type: Boolean, default: !1 },
+    size: { default: "medium" }
+  },
+  emits: ["update:current", "update:pageSize", "change", "pageSizeChange"],
+  setup(l, { emit: k }) {
+    const a = l, c = k, { t: p } = j(), n = f(() => Math.max(1, a.current)), o = f(() => Math.max(1, Math.ceil(a.total / a.pageSize))), g = T(String(n.value));
+    N(
+      () => n.value,
+      (i) => {
+        g.value = String(i);
+      },
+      { immediate: !0 }
+    );
+    const C = f(() => {
+      if (a.simple) return [];
+      if (o.value <= 7)
+        return Array.from({ length: o.value }, (h, P) => P + 1);
+      const i = Math.min(n.value, o.value), t = [1], e = Math.max(2, i - 1), m = Math.min(o.value - 1, i + 1);
+      e > 2 && t.push("ellipsis-left");
+      for (let h = e; h <= m; h += 1)
+        t.push(h);
+      return m < o.value - 1 && t.push("ellipsis-right"), t.push(o.value), t;
+    }), w = f(() => {
+      const i = Math.min((n.value - 1) * a.pageSize + 1, a.total || 0), t = Math.min(n.value * a.pageSize, a.total || 0), e = p("pagination.totalText", { total: a.total }, `共 ${a.total} 条`);
+      if (!a.total) return e;
+      const m = p("pagination.rangeText", { start: i, end: t }, `，第 ${i}-${t} 条`);
+      return `${e}${m}`;
+    });
+    function v(i) {
+      const t = Math.min(o.value, Math.max(1, i));
+      t !== n.value && (c("update:current", t), c("change", t, a.pageSize));
+    }
+    function $(i) {
+      const t = Number(i.target.value) || a.pageSize;
+      c("update:pageSize", t), c("pageSizeChange", t);
+      const e = Math.min(Math.max(1, n.value), Math.max(1, Math.ceil(a.total / t)));
+      c("update:current", e), c("change", e, t);
+    }
+    function _() {
+      v(Number(g.value) || 1);
+    }
+    return (i, t) => (s(), u("div", {
+      class: b(["x-pagination", [`x-pagination--${l.size}`, { "is-simple": l.simple }]])
+    }, [
+      l.showTotal ? (s(), u("span", D, r(w.value), 1)) : y("", !0),
+      x("button", {
+        type: "button",
+        class: "x-pagination__control",
+        disabled: n.value <= 1,
+        onClick: t[0] || (t[0] = (e) => v(n.value - 1))
+      }, r(d(p)("pagination.prevPage", void 0, "上一页")), 9, E),
+      l.simple ? (s(), u("span", K, r(n.value) + " / " + r(o.value), 1)) : (s(!0), u(z, { key: 2 }, S(C.value, (e) => (s(), u("button", {
+        key: String(e),
+        type: "button",
+        class: b(["x-pagination__page", { "is-active": e === n.value, "is-ellipsis": typeof e != "number" }]),
+        disabled: typeof e != "number",
+        onClick: (m) => typeof e == "number" && v(e)
+      }, r(typeof e == "number" ? e : "..."), 11, X))), 128)),
+      x("button", {
+        type: "button",
+        class: "x-pagination__control",
+        disabled: n.value >= o.value,
+        onClick: t[1] || (t[1] = (e) => v(n.value + 1))
+      }, r(d(p)("pagination.nextPage", void 0, "下一页")), 9, A),
+      l.showPageSize ? (s(), u("label", F, [
+        x("select", {
+          class: "x-pagination__select",
+          value: l.pageSize,
+          onChange: $
+        }, [
+          (s(!0), u(z, null, S(l.pageSizeOptions, (e) => (s(), u("option", {
+            key: e,
+            value: e
+          }, r(d(p)("pagination.pageSizeOption", { size: e }, `${e} / 页`)), 9, L))), 128))
+        ], 40, I)
+      ])) : y("", !0),
+      l.showJumper ? (s(), u("label", U, [
+        M(r(d(p)("pagination.goto", void 0, "跳至")) + " ", 1),
+        V(x("input", {
+          "onUpdate:modelValue": t[2] || (t[2] = (e) => g.value = e),
+          class: "x-pagination__input",
+          type: "number",
+          min: "1",
+          max: o.value,
+          onKeydown: J(_, ["enter"]),
+          onBlur: _
+        }, null, 40, q), [
+          [O, g.value]
+        ]),
+        M(" " + r(d(p)("pagination.page", void 0, "页")), 1)
+      ])) : y("", !0)
+    ], 2));
+  }
+});
+export {
+  Q as default
+};

package/dist/components/XPagination.vue2.js

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