@rhino-design/vue 0.2.2 → 0.2.6

package/dist/components/XTrigger.vue.js

@@ -0,0 +1,492 @@
+import { defineComponent as ke, useSlots as xe, inject as De, ref as c, computed as r, provide as Re, watch as L, nextTick as O, onMounted as Fe, onBeforeUnmount as Ve, openBlock as k, createElementBlock as j, normalizeClass as N, createElementVNode as oe, renderSlot as ne, createBlock as $e, Teleport as je, createVNode as Ne, Transition as We, withCtx as ze, withDirectives as Xe, normalizeStyle as le, unref as He, createCommentVNode as ae, vShow as Ie, Comment as Ke } from "vue";
+import { usePopupPosition as Ue } from "../composables/popup.js";
+import { useXConfigProvider as Ye } from "../composables/config-provider.js";
+import { hasDarkThemeContext as qe } from "../composables/theme-context.js";
+const _e = ["data-trigger-path"], Ge = { class: "x-trigger__inner" }, tt = /* @__PURE__ */ ke({
+  __name: "XTrigger",
+  props: {
+    popupVisible: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultPopupVisible: {
+      type: Boolean,
+      default: !1
+    },
+    trigger: {
+      type: [String, Array],
+      default: "hover"
+    },
+    position: {
+      type: String,
+      default: "bottom"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    offset: {
+      type: Number,
+      default: 8
+    },
+    popupOffset: {
+      type: Number,
+      default: void 0
+    },
+    popupTranslate: {
+      type: [Array, Object],
+      default: void 0
+    },
+    showArrow: {
+      type: Boolean,
+      default: !1
+    },
+    alignPoint: {
+      type: Boolean,
+      default: !1
+    },
+    popupHoverStay: {
+      type: Boolean,
+      default: !0
+    },
+    blurToClose: {
+      type: Boolean,
+      default: !0
+    },
+    clickToClose: {
+      type: Boolean,
+      default: !0
+    },
+    clickOutsideToClose: {
+      type: Boolean,
+      default: !0
+    },
+    unmountOnClose: {
+      type: Boolean,
+      default: !0
+    },
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    contentStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    arrowClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    arrowStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    popupStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    animationName: {
+      type: String,
+      default: "x-fade"
+    },
+    duration: {
+      type: [Number, Object],
+      default: void 0
+    },
+    mouseEnterDelay: {
+      type: Number,
+      default: 100
+    },
+    mouseLeaveDelay: {
+      type: Number,
+      default: 100
+    },
+    focusDelay: {
+      type: Number,
+      default: 0
+    },
+    autoFitPopupWidth: {
+      type: Boolean,
+      default: !1
+    },
+    autoFitPopupMinWidth: {
+      type: Boolean,
+      default: !1
+    },
+    autoFixPosition: {
+      type: Boolean,
+      default: !0
+    },
+    popupContainer: {
+      type: [String, Object],
+      default: "body"
+    },
+    updateAtScroll: {
+      type: Boolean,
+      default: !1
+    },
+    autoFitTransformOrigin: {
+      type: Boolean,
+      default: !1
+    },
+    hideEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    openedClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    autoFitPosition: {
+      type: Boolean,
+      default: !0
+    },
+    renderToBody: {
+      type: Boolean,
+      default: !0
+    },
+    preventFocus: {
+      type: Boolean,
+      default: !1
+    },
+    allowOverflow: {
+      type: Boolean,
+      default: !1
+    },
+    scrollToClose: {
+      type: Boolean,
+      default: !1
+    },
+    scrollToCloseDistance: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["update:popupVisible", "popupVisibleChange", "popup-visible-change", "show", "hide", "resize"],
+  setup(i, { expose: re, emit: ie }) {
+    const W = Symbol("x-trigger-context"), o = i, h = ie, x = xe(), s = De(W, null), m = Ye(), u = c(null), g = c(null), z = c(!!o.defaultPopupVisible), b = c(0), X = c(null), w = c({}), B = c(!1), v = c(null), P = c(!1), C = `x-trigger-${Math.random().toString(36).slice(2, 10)}`, H = c(C), I = r(() => o.popupVisible !== void 0), l = r(() => I.value ? !!o.popupVisible : z.value), d = r(() => new Set(Array.isArray(o.trigger) ? o.trigger : [o.trigger])), ue = r(() => o.popupOffset ?? o.offset), se = r(() => !!(o.updateAtScroll || m != null && m.updateAtScroll.value)), K = r(() => !!(o.scrollToClose || m != null && m.scrollToClose.value)), fe = r(() => typeof document > "u" ? "" : (l.value, qe(u.value, { includeDescendants: !0 }) ? "x-theme-dark" : "")), { popupStyle: D, resolvedPlacement: T, updatePosition: R } = Ue(u, g, l, {
+      placement: r(() => o.position),
+      offset: ue,
+      allowOverflow: r(() => o.allowOverflow),
+      translate: r(() => o.popupTranslate),
+      autoFitPosition: r(() => o.autoFitPosition),
+      alignPoint: r(() => o.alignPoint),
+      point: X,
+      updateAtScroll: se,
+      autoFixPosition: r(() => o.autoFixPosition)
+    });
+    function ce(e) {
+      const [t, n = "center"] = e.split("-");
+      let a = "50%", f = "50%";
+      return t === "top" && (f = "100%"), t === "bottom" && (f = "0"), t === "left" && (a = "100%"), t === "right" && (a = "0"), (t === "top" || t === "bottom") && (n === "start" && (a = "0"), n === "end" && (a = "100%")), (t === "left" || t === "right") && (n === "start" && (f = "0"), n === "end" && (f = "100%")), `${a} ${f}`;
+    }
+    const de = r(() => {
+      const e = { ...D.value };
+      return o.autoFitTransformOrigin && (e.transformOrigin = ce(T.value)), o.autoFitPopupMinWidth && u.value ? e.minWidth = `${u.value.getBoundingClientRect().width}px` : o.autoFitPopupWidth && u.value && (e.width = `${u.value.getBoundingClientRect().width}px`), Object.assign(e, o.popupStyle), e.pointerEvents = B.value ? "none" : "auto", e;
+    });
+    function pe() {
+      var t;
+      const e = ((t = x.content) == null ? void 0 : t.call(x)) ?? [];
+      return e.length ? e.some((n) => n.type === Ke ? !1 : typeof n.children == "string" ? n.children.trim().length > 0 : !0) : !1;
+    }
+    const ve = r(() => o.hideEmpty && !pe());
+    function F() {
+      b.value && (window.clearTimeout(b.value), b.value = 0);
+    }
+    function U(e) {
+      o.disabled && e || e !== l.value && (e || (v.value = null), I.value || (z.value = e), h("update:popupVisible", e), h("popupVisibleChange", e), h("popup-visible-change", e), e && O(() => {
+        R();
+      }));
+    }
+    function p(e, t = 0) {
+      if (F(), t > 0 && e !== l.value) {
+        b.value = window.setTimeout(() => {
+          b.value = 0, U(e);
+        }, t);
+        return;
+      }
+      U(e);
+    }
+    function he() {
+      p(!0);
+    }
+    function S() {
+      p(!1);
+    }
+    function Y() {
+      p(!l.value);
+    }
+    function V(e) {
+      o.alignPoint && (X.value = {
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    function q() {
+      var n;
+      const e = (n = u.value) == null ? void 0 : n.closest(".x-trigger__popup"), t = e == null ? void 0 : e.dataset.triggerPath;
+      H.value = t ? `${t},${C}` : C;
+    }
+    function me(e) {
+      if (!(e instanceof Element)) return !1;
+      const t = e.closest(".x-trigger__popup");
+      return t ? (t.dataset.triggerPath ?? "").split(",").filter(Boolean).includes(C) : !1;
+    }
+    function M(e) {
+      var n, a;
+      if (!o.clickOutsideToClose || !l.value) return;
+      const t = e.target;
+      t && ((n = u.value) != null && n.contains(t) || (a = g.value) != null && a.contains(t) || me(t) || S());
+    }
+    function _(e) {
+      e.key === "Escape" && l.value && S();
+    }
+    function ge(e) {
+      if (e === window || e === document || e === document.documentElement || e === document.body) {
+        const t = document.documentElement;
+        return [t.scrollTop, t.scrollLeft];
+      }
+      if (e && typeof e == "object" && "scrollTop" in e && "scrollLeft" in e) {
+        const t = e;
+        return [t.scrollTop, t.scrollLeft];
+      }
+      return null;
+    }
+    function G(e) {
+      if (!l.value || !K.value) return;
+      const t = e.target ?? document.documentElement, n = ge(t);
+      if (!n) return;
+      if (!v.value || v.value.target !== t) {
+        v.value = {
+          target: t,
+          position: n
+        };
+        return;
+      }
+      const [a, f] = v.value.position, [te, y] = n;
+      (Math.abs(te - a) >= o.scrollToCloseDistance || Math.abs(y - f) >= o.scrollToCloseDistance) && S();
+    }
+    function J(e) {
+      if (!(typeof window > "u")) {
+        if (e && !P.value) {
+          window.addEventListener("scroll", G, !0), P.value = !0;
+          return;
+        }
+        !e && P.value && (window.removeEventListener("scroll", G, !0), P.value = !1);
+      }
+    }
+    function ye(e) {
+      if (!o.disabled) {
+        if (d.value.has("click")) {
+          if (e.stopPropagation(), V(e), l.value && !o.clickToClose) return;
+          Y();
+          return;
+        }
+        d.value.has("contextMenu") && l.value && o.clickToClose && S();
+      }
+    }
+    function be(e) {
+      o.disabled || !d.value.has("hover") || (V(e), p(!0, o.mouseEnterDelay));
+    }
+    function we() {
+      o.disabled || !d.value.has("hover") || p(!1, o.mouseLeaveDelay);
+    }
+    function Ce() {
+      o.disabled || !d.value.has("hover") || !o.popupHoverStay || F();
+    }
+    function Se() {
+      o.disabled || !d.value.has("hover") || !o.popupHoverStay || p(!1, o.mouseLeaveDelay);
+    }
+    function Be() {
+      o.disabled || !d.value.has("focus") || p(!0, o.focusDelay);
+    }
+    function Pe(e) {
+      var n, a;
+      if (o.disabled || !d.value.has("focus") || !o.blurToClose) return;
+      const t = e.relatedTarget;
+      t && ((n = u.value) != null && n.contains(t) || (a = g.value) != null && a.contains(t)) || p(!1);
+    }
+    function Te(e) {
+      o.disabled || !d.value.has("contextMenu") || l.value && !o.clickToClose || (V(e), Y(), e.preventDefault());
+    }
+    function Me(e) {
+      s == null || s.onMouseenter(e), be(e);
+    }
+    function Ae(e) {
+      s == null || s.onMouseleave(e), we();
+    }
+    function Q(e) {
+      s == null || s.onMouseenter(e), Ce();
+    }
+    function Z(e) {
+      s == null || s.onMouseleave(e), Se();
+    }
+    function Ee(e) {
+      o.preventFocus && e.preventDefault();
+    }
+    function $() {
+      if (!o.showArrow || !l.value || !u.value || !g.value) {
+        w.value = {};
+        return;
+      }
+      const t = (u.value.querySelector('[data-trigger-anchor="true"]') ?? u.value).getBoundingClientRect(), n = g.value.getBoundingClientRect(), a = T.value.split("-")[0], f = 10, y = {
+        top: {
+          borderBottomColor: "transparent",
+          borderRightColor: "transparent",
+          clipPath: "polygon(100% 0, 100% 100%, 0 100%)"
+        },
+        bottom: {
+          borderTopColor: "transparent",
+          borderLeftColor: "transparent",
+          clipPath: "polygon(0 0, 0 100%, 100% 0)"
+        },
+        left: {
+          borderTopColor: "transparent",
+          borderRightColor: "transparent",
+          clipPath: "polygon(0 0, 100% 0, 100% 100%)"
+        },
+        right: {
+          borderLeftColor: "transparent",
+          borderBottomColor: "transparent",
+          clipPath: "polygon(0 0, 100% 100%, 0 100%)"
+        }
+      }[a];
+      if (a === "top" || a === "bottom") {
+        let E = Math.abs(t.left + t.width / 2 - n.left);
+        E > n.width - f && (E = t.width > n.width ? n.width / 2 : n.width - f), w.value = a === "top" ? {
+          left: `${E}px`,
+          bottom: "0",
+          transform: "translate(-50%, 50%) rotate(45deg)",
+          ...y
+        } : {
+          left: `${E}px`,
+          top: "0",
+          transform: "translate(-50%, -50%) rotate(45deg)",
+          ...y
+        };
+        return;
+      }
+      let A = Math.abs(t.top + t.height / 2 - n.top);
+      A > n.height - f && (A = t.height > n.height ? n.height / 2 : n.height - f), w.value = a === "left" ? {
+        top: `${A}px`,
+        right: "0",
+        transform: "translate(50%, -50%) rotate(45deg)",
+        ...y
+      } : {
+        top: `${A}px`,
+        left: "0",
+        transform: "translate(-50%, -50%) rotate(45deg)",
+        ...y
+      };
+    }
+    function ee() {
+      B.value = !0;
+    }
+    function Le() {
+      B.value = !1, l.value && h("show");
+    }
+    function Oe() {
+      B.value = !1, l.value || h("hide");
+    }
+    return Re(W, {
+      onMouseenter: Q,
+      onMouseleave: Z
+    }), L(
+      [l, D, T, () => o.showArrow],
+      async ([e, , , t]) => {
+        if (!e || !t) {
+          w.value = {};
+          return;
+        }
+        await O(), $();
+      },
+      { deep: !0 }
+    ), L(
+      D,
+      () => {
+        l.value && h("resize");
+      },
+      { deep: !0 }
+    ), L(l, (e) => {
+      e ? (v.value = null, O(() => {
+        q(), R(), o.showArrow && $();
+      })) : v.value = null;
+    }), L(
+      [l, K],
+      ([e, t]) => {
+        J(e && t);
+      },
+      { immediate: !0 }
+    ), Fe(() => {
+      document.addEventListener("mousedown", M), document.addEventListener("touchstart", M), document.addEventListener("keydown", _), l.value && O(() => {
+        q(), o.showArrow && $();
+      });
+    }), Ve(() => {
+      F(), document.removeEventListener("mousedown", M), document.removeEventListener("touchstart", M), document.removeEventListener("keydown", _), J(!1);
+    }), re({
+      show: he,
+      hide: S,
+      updatePosition: R
+    }), (e, t) => (k(), j("span", {
+      class: N(["x-trigger", [{ "is-open": l.value, "is-disabled": i.disabled }, l.value ? i.openedClass : void 0]])
+    }, [
+      oe("span", {
+        ref_key: "triggerRef",
+        ref: u,
+        class: "x-trigger__target",
+        onClick: ye,
+        onMouseenter: Me,
+        onMouseleave: Ae,
+        onFocusin: Be,
+        onFocusout: Pe,
+        onContextmenu: Te
+      }, [
+        ne(e.$slots, "default")
+      ], 544),
+      (k(), $e(je, {
+        to: i.popupContainer,
+        disabled: !i.renderToBody
+      }, [
+        Ne(We, {
+          name: i.animationName,
+          duration: i.duration,
+          appear: "",
+          onBeforeEnter: ee,
+          onBeforeLeave: ee,
+          onAfterEnter: Le,
+          onAfterLeave: Oe
+        }, {
+          default: ze(() => [
+            (!i.unmountOnClose || l.value) && !ve.value ? Xe((k(), j("div", {
+              key: 0,
+              ref_key: "popupRef",
+              ref: g,
+              "data-trigger-id": C,
+              "data-trigger-path": H.value,
+              class: N(["x-trigger__popup", [i.contentClass, fe.value, `x-trigger__popup--${He(T)}`, { "x-trigger__popup--with-arrow": i.showArrow }]]),
+              style: le([de.value, i.contentStyle]),
+              onMouseenter: Q,
+              onMouseleave: Z,
+              onMousedown: Ee
+            }, [
+              oe("div", Ge, [
+                ne(e.$slots, "content")
+              ]),
+              i.showArrow ? (k(), j("div", {
+                key: 0,
+                class: N(["x-trigger__arrow", i.arrowClass]),
+                style: le([w.value, i.arrowStyle])
+              }, null, 6)) : ae("", !0)
+            ], 46, _e)), [
+              [Ie, l.value]
+            ]) : ae("", !0)
+          ]),
+          _: 3
+        }, 8, ["name", "duration"])
+      ], 8, ["to", "disabled"]))
+    ], 2));
+  }
+});
+export {
+  tt as default
+};

package/dist/components/XTrigger.vue2.js

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

package/dist/components/XTypography.vue.js

@@ -0,0 +1,51 @@
+import n from "./XTypography.vue2.js";
+import { openBlock as r, createElementBlock as p, normalizeClass as s, withDirectives as l, withKeys as y, withModifiers as d, vModelText as m, createBlock as u, resolveDynamicComponent as f, withCtx as g, renderSlot as k, createTextVNode as b, toDisplayString as i, createCommentVNode as a } from "vue";
+import v from "../_virtual/_plugin-vue_export-helper.js";
+const w = {
+  key: 2,
+  class: "x-typography__actions"
+};
+function E(o, t, h, C, $, B) {
+  return r(), p("span", {
+    class: s(["x-typography-wrapper", { "is-block": o.block }])
+  }, [
+    o.editing ? l((r(), p("textarea", {
+      key: 0,
+      "onUpdate:modelValue": t[0] || (t[0] = (e) => o.draft = e),
+      class: "x-typography__editor",
+      rows: "3",
+      onBlur: t[1] || (t[1] = (...e) => o.commitEdit && o.commitEdit(...e)),
+      onKeydown: t[2] || (t[2] = y(d((...e) => o.commitEdit && o.commitEdit(...e), ["meta", "prevent"]), ["enter"]))
+    }, null, 544)), [
+      [m, o.draft]
+    ]) : (r(), u(f(o.component), {
+      key: 1,
+      class: s(o.classes)
+    }, {
+      default: g(() => [
+        k(o.$slots, "default", {}, () => [
+          b(i(o.textValue), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["class"])),
+    o.copyable || o.editable ? (r(), p("span", w, [
+      o.copyable ? (r(), p("button", {
+        key: 0,
+        type: "button",
+        class: "x-typography__action",
+        onClick: t[3] || (t[3] = (...e) => o.copy && o.copy(...e))
+      }, i(o.copied ? o.t("typography.copied", void 0, "已复制") : o.t("typography.copy", void 0, "复制")), 1)) : a("", !0),
+      o.editable ? (r(), p("button", {
+        key: 1,
+        type: "button",
+        class: "x-typography__action",
+        onClick: t[4] || (t[4] = (...e) => o.startEdit && o.startEdit(...e))
+      }, i(o.t("typography.edit", void 0, "编辑")), 1)) : a("", !0)
+    ])) : a("", !0)
+  ], 2);
+}
+const K = /* @__PURE__ */ v(n, [["render", E]]);
+export {
+  K as default
+};

package/dist/components/XTypography.vue2.js

@@ -0,0 +1,126 @@
+import { defineComponent as v, computed as c, ref as u, watch as s } from "vue";
+import h from "./XTypographyTitle.vue.js";
+import T from "./XTypographyParagraph.vue.js";
+import b from "./XTypographyText.vue.js";
+import { useXI18n as B } from "../composables/i18n.js";
+const d = v({
+  name: "XTypography",
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    },
+    bold: {
+      type: Boolean,
+      default: !1
+    },
+    code: {
+      type: Boolean,
+      default: !1
+    },
+    underline: {
+      type: Boolean,
+      default: !1
+    },
+    delete: {
+      type: Boolean,
+      default: !1
+    },
+    ellipsis: {
+      type: Boolean,
+      default: !1
+    },
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    mark: {
+      type: Boolean,
+      default: !1
+    },
+    copyable: {
+      type: Boolean,
+      default: !1
+    },
+    editable: {
+      type: Boolean,
+      default: !1
+    },
+    component: {
+      type: String,
+      default: "span"
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "change", "copied"],
+  setup(e, { emit: o }) {
+    const { t: r } = B(), y = c(() => [
+      "x-typography",
+      `x-typography--${e.type}`,
+      e.bold ? "is-bold" : "",
+      e.code ? "is-code" : "",
+      e.underline ? "is-underline" : "",
+      e.delete ? "is-delete" : "",
+      e.ellipsis ? "is-ellipsis" : "",
+      e.block ? "is-block" : "",
+      e.mark ? "is-mark" : ""
+    ]), n = u(!1), t = u(e.modelValue || e.content), l = u(!1), i = c(() => e.modelValue || e.content);
+    s(
+      () => e.modelValue,
+      (a) => {
+        t.value = a || e.content;
+      },
+      { immediate: !0 }
+    ), s(
+      () => e.content,
+      (a) => {
+        e.modelValue || (t.value = a);
+      }
+    );
+    async function m() {
+      var f;
+      const a = i.value;
+      if (a)
+        try {
+          (f = navigator.clipboard) != null && f.writeText && await navigator.clipboard.writeText(a), l.value = !0, o("copied", a), window.setTimeout(() => {
+            l.value = !1;
+          }, 1200);
+        } catch {
+          l.value = !1;
+        }
+    }
+    function p() {
+      t.value = i.value, n.value = !0;
+    }
+    function g() {
+      n.value = !1, o("update:modelValue", t.value), o("change", t.value);
+    }
+    return {
+      classes: y,
+      editing: n,
+      draft: t,
+      copied: l,
+      textValue: i,
+      t: r,
+      copy: m,
+      startEdit: p,
+      commitEdit: g
+    };
+  }
+});
+d.Title = h;
+d.Paragraph = T;
+d.Text = b;
+export {
+  T as XTypographyParagraph,
+  b as XTypographyText,
+  h as XTypographyTitle,
+  d as default
+};