@rhino-design/vue 0.2.1 → 0.2.3

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

@@ -13,18 +13,18 @@ type __VLS_Props = {
     formatter?: (inputValue: string, index: number, value: string) => string | boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: string) => any;
     input: (inputValue: string, index: number, event: Event) => any;
+    change: (value: string) => any;
     "update:modelValue": (value: string) => any;
     finish: (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: string) => any) | undefined;
     onInput?: ((inputValue: string, index: number, event: Event) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onFinish?: ((value: string) => any) | undefined;
 }>, {
-    length: number;
     error: boolean;
+    length: number;
     defaultValue: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;

package/dist/components/XVerificationCode.vue.js

@@ -0,0 +1,149 @@
+import { defineComponent as E, ref as y, computed as i, watch as T, openBlock as p, createElementBlock as g, Fragment as F, renderList as q, createElementVNode as I, normalizeClass as H, unref as A, createBlock as $, createCommentVNode as G } from "vue";
+import { sizeClass as J } from "../composables/config.js";
+import { useXFormField as O } from "../composables/form.js";
+const Q = ["id", "type", "value", "disabled", "readonly", "onFocus", "onInput", "onKeydown", "onPaste"], Z = /* @__PURE__ */ E({
+  name: "XVerificationCode",
+  __name: "XVerificationCode",
+  props: {
+    modelValue: {},
+    defaultValue: { default: "" },
+    length: { default: 6 },
+    size: {},
+    disabled: { type: Boolean },
+    masked: { type: Boolean },
+    readonly: { type: Boolean },
+    error: { type: Boolean, default: !1 },
+    separator: {},
+    formatter: {}
+  },
+  emits: ["update:modelValue", "change", "finish", "input"],
+  setup(c, { emit: D }) {
+    const r = c, f = D, R = E({
+      name: "XVerificationCodeSeparatorRenderer",
+      props: {
+        node: {
+          type: null,
+          default: null
+        }
+      },
+      setup(e) {
+        return () => e.node;
+      }
+    }), a = O(), V = y(null), B = y([]), k = i(() => !!(r.disabled || a != null && a.disabled.value)), _ = i(() => !!(r.error || a != null && a.error.value)), z = i(() => r.size ?? (a == null ? void 0 : a.size.value) ?? "medium"), b = i(() => r.modelValue ?? r.defaultValue), L = i(() => r.masked ? "password" : "text"), S = i(() => [
+      "x-input",
+      J(z.value),
+      {
+        "is-error": _.value,
+        "is-disabled": k.value,
+        "is-readonly": r.readonly
+      }
+    ]), C = i(() => {
+      const e = String(b.value).split("");
+      return new Array(r.length).fill("").map((t, o) => e[o] ?? "");
+    }), l = y(C.value);
+    T(b, () => {
+      l.value = C.value;
+    });
+    function X(e, t) {
+      B.value[t] = e instanceof HTMLInputElement ? e : null;
+    }
+    function d(e) {
+      var t;
+      (t = B.value[e]) == null || t.focus();
+    }
+    function w(e) {
+      if (!(e !== void 0 && l.value[e])) {
+        for (let t = 0; t < l.value.length; t += 1)
+          if (!l.value[t]) {
+            d(t);
+            break;
+          }
+      }
+    }
+    function m() {
+      const e = l.value.join("").trim();
+      f("update:modelValue", e), f("change", e), a == null || a.notifyChange(), e.length === r.length && f("finish", e), w();
+    }
+    function j(e, t) {
+      var n;
+      e.preventDefault();
+      const o = (n = e.clipboardData) == null ? void 0 : n.getData("text");
+      o && (o.split("").forEach((s, u) => {
+        if (t + u >= r.length)
+          return;
+        let v = s;
+        if (r.formatter) {
+          const h = r.formatter(v, t + u, l.value.join(""));
+          if (h === !1) {
+            t -= 1;
+            return;
+          }
+          typeof h == "string" && (v = h.charAt(0));
+        }
+        l.value[t + u] = v;
+      }), m());
+    }
+    function K(e, t) {
+      const o = t.code || t.key;
+      o === "Backspace" && !l.value[e] ? (t.preventDefault(), l.value[Math.max(e - 1, 0)] = "", m()) : o === "ArrowLeft" && e > 0 ? (t.preventDefault(), d(e - 1)) : o === "ArrowRight" && l.value[e] && e < r.length - 1 && (t.preventDefault(), d(e + 1));
+    }
+    function N(e, t, o) {
+      let n = (t || "").trim().charAt(t.length - 1);
+      if (f("input", n, e, o), a == null || a.notifyInput(o), r.formatter) {
+        const s = r.formatter(n, e, l.value.join(""));
+        if (s === !1)
+          return;
+        typeof s == "string" && (n = s.charAt(0));
+      }
+      l.value[e] = n, m();
+    }
+    function P(e, t) {
+      const o = t.target.value;
+      N(e, o, t);
+    }
+    function M(e) {
+      requestAnimationFrame(() => {
+        var o;
+        const t = document.activeElement;
+        t && ((o = V.value) != null && o.contains(t)) || a == null || a.notifyBlur(e);
+      });
+    }
+    return (e, t) => (p(), g("div", {
+      ref_key: "rootRef",
+      ref: V,
+      class: "x-verification-code"
+    }, [
+      (p(!0), g(F, null, q(l.value, (o, n) => {
+        var s;
+        return p(), g(F, { key: n }, [
+          I("label", {
+            class: H(S.value)
+          }, [
+            I("input", {
+              id: n === 0 ? (s = A(a)) == null ? void 0 : s.id : void 0,
+              ref_for: !0,
+              ref: (u) => X(u, n),
+              class: "x-input__inner",
+              type: L.value,
+              value: o,
+              disabled: k.value,
+              readonly: c.readonly,
+              onFocus: (u) => w(n),
+              onInput: (u) => P(n, u),
+              onKeydown: (u) => K(n, u),
+              onPaste: (u) => j(u, n),
+              onBlur: M
+            }, null, 40, Q)
+          ], 2),
+          c.separator ? (p(), $(A(R), {
+            key: 0,
+            node: c.separator(n, o)
+          }, null, 8, ["node"])) : G("", !0)
+        ], 64);
+      }), 128))
+    ], 512));
+  }
+});
+export {
+  Z as default
+};

package/dist/components/XVerificationCode.vue2.js

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

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

@@ -1,24 +1,50 @@
+interface WatermarkFont {
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    textAlign?: 'start' | 'end' | 'left' | 'right' | 'center';
+    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
+}
 type __VLS_Props = {
     content?: string | string[];
+    image?: string;
+    width?: number;
+    height?: number;
     gap?: [number, number];
+    offset?: [number, number];
     rotate?: number;
+    font?: WatermarkFont;
+    zIndex?: number;
     alpha?: number;
+    antiTamper?: boolean;
+    grayscale?: boolean;
+    repeat?: boolean;
+    staggered?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        containerRef: HTMLDivElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    content: string | string[];
+    repeat: boolean;
+    alpha: number;
+    zIndex: number;
     rotate: number;
     gap: [number, number];
-    alpha: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    antiTamper: boolean;
+    grayscale: boolean;
+    staggered: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/XWatermark.vue.js

@@ -0,0 +1,204 @@
+import { defineComponent as le, toRefs as ue, shallowRef as se, ref as L, computed as l, onMounted as ie, onUnmounted as ce, watch as de, openBlock as fe, createElementBlock as me, mergeProps as he, renderSlot as pe } from "vue";
+const ve = /* @__PURE__ */ le({
+  __name: "XWatermark",
+  props: {
+    content: {},
+    image: {},
+    width: {},
+    height: {},
+    gap: { default: () => [90, 90] },
+    offset: {},
+    rotate: { default: -22 },
+    font: {},
+    zIndex: { default: 6 },
+    alpha: { default: 1 },
+    antiTamper: { type: Boolean, default: !0 },
+    grayscale: { type: Boolean, default: !1 },
+    repeat: { type: Boolean, default: !0 },
+    staggered: { type: Boolean, default: !0 }
+  },
+  setup(N) {
+    const r = N, { width: F, height: P, image: x, rotate: X, alpha: _, grayscale: H } = ue(r), i = typeof window > "u" ? 1 : window.devicePixelRatio || 1, p = se(), g = L(/* @__PURE__ */ new Map()), d = L("light");
+    let s = null, u = null;
+    const w = l(() => {
+      var e;
+      return ((e = r.font) == null ? void 0 : e.fontSize) ?? 16;
+    }), U = l(() => {
+      var e;
+      return ((e = r.font) == null ? void 0 : e.fontWeight) ?? "normal";
+    }), Y = l(() => {
+      var e;
+      return ((e = r.font) == null ? void 0 : e.fontStyle) ?? "normal";
+    }), A = l(() => {
+      var e;
+      return ((e = r.font) == null ? void 0 : e.fontFamily) ?? "sans-serif";
+    }), j = l(() => {
+      var e;
+      return ((e = r.font) == null ? void 0 : e.textAlign) ?? "center";
+    }), v = l(() => Array.isArray(r.content) ? r.content : [r.content]), O = l(() => {
+      var e;
+      return (e = r.font) != null && e.color ? r.font.color : d.value === "dark" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)";
+    }), k = l(() => {
+      var e;
+      return ((e = r.gap) == null ? void 0 : e[0]) ?? 90;
+    }), y = l(() => {
+      var e;
+      return ((e = r.gap) == null ? void 0 : e[1]) ?? 90;
+    }), M = l(() => k.value / 2), T = l(() => y.value / 2), G = l(() => {
+      var e;
+      return ((e = r.offset) == null ? void 0 : e[0]) ?? M.value;
+    }), K = l(() => {
+      var e;
+      return ((e = r.offset) == null ? void 0 : e[1]) ?? T.value;
+    }), Z = l(() => {
+      const e = G.value - M.value, t = K.value - T.value;
+      return {
+        position: "absolute",
+        left: e > 0 ? `${e}px` : 0,
+        top: t > 0 ? `${t}px` : 0,
+        width: e > 0 ? `calc(100% - ${e}px)` : "100%",
+        height: t > 0 ? `calc(100% - ${t}px)` : "100%",
+        pointerEvents: "none",
+        backgroundRepeat: r.repeat ? "repeat" : "no-repeat",
+        backgroundPosition: `${e > 0 ? 0 : e}px ${t > 0 ? 0 : t}px`,
+        zIndex: r.zIndex ?? 6
+      };
+    }), S = l(() => r.repeat && r.staggered);
+    function q(e) {
+      return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    function J(e) {
+      return Object.entries(e).map(([t, a]) => `${q(t)}:${a}`).join(";");
+    }
+    function Q(e) {
+      const t = e.getContext("2d");
+      if (!t) return;
+      const a = t.getImageData(0, 0, e.width, e.height), { data: n } = a;
+      for (let o = 0; o < n.length; o += 4) {
+        const f = (n[o] + n[o + 1] + n[o + 2]) / 3;
+        n[o] = f, n[o + 1] = f, n[o + 2] = f;
+      }
+      t.putImageData(a, 0, 0);
+    }
+    function V(e, t) {
+      const a = p.value;
+      if (!a)
+        return;
+      const n = g.value.get(a);
+      n && (a.contains(n) && a.removeChild(n), g.value.delete(a));
+      const o = document.createElement("div");
+      o.setAttribute(
+        "style",
+        J({
+          ...Z.value,
+          backgroundImage: `url('${e}')`,
+          backgroundSize: `${t}px`
+        })
+      ), a.append(o), g.value.set(a, o);
+    }
+    function ee(e) {
+      let t = 120, a = 28;
+      if (!x.value && e.measureText) {
+        e.font = `${w.value}px ${A.value}`;
+        const n = v.value.map((o) => e.measureText(o ?? "").width);
+        t = Math.ceil(Math.max(...n)), a = w.value * v.value.length + (v.value.length - 1) * 3;
+      }
+      return [F.value ?? t, P.value ?? a];
+    }
+    function b() {
+      if (typeof document > "u")
+        return;
+      const e = document.createElement("canvas"), t = e.getContext("2d");
+      if (!t)
+        return;
+      const [a, n] = ee(t), o = a * i, f = n * i, m = (k.value + a) * i, h = (y.value + n) * i, z = k.value / 2 * i, E = y.value / 2 * i, C = m / 2, R = h / 2, $ = S.value ? 2 : 1, re = (k.value + a) * $;
+      e.width = m * $, e.height = h * $, t.globalAlpha = _.value, t.save(), t.translate(C, R), t.rotate(Math.PI / 180 * X.value), t.translate(-C, -R);
+      const B = () => {
+        t.restore(), S.value && t.drawImage(
+          e,
+          0,
+          0,
+          m,
+          h,
+          m,
+          h,
+          m,
+          h
+        ), H.value && Q(e), V(e.toDataURL(), re);
+      };
+      if (x.value) {
+        const c = new Image();
+        c.onload = () => {
+          t.drawImage(c, z, E, o, f), B();
+        }, c.crossOrigin = "anonymous", c.referrerPolicy = "no-referrer", c.src = x.value;
+        return;
+      }
+      const D = Number(w.value) * i;
+      t.font = `${Y.value} normal ${U.value} ${D}px/${n}px ${A.value}`, t.fillStyle = O.value, t.textAlign = j.value, t.textBaseline = "top", t.translate(o / 2, 0), v.value.forEach((c, oe) => {
+        t.fillText(c ?? "", z, E + oe * (D + 3 * i));
+      }), B();
+    }
+    function W(e) {
+      return Array.from(g.value.values()).includes(e);
+    }
+    function te(e) {
+      if (r.antiTamper)
+        for (const t of e) {
+          const a = Array.from(t.removedNodes).some((o) => W(o)), n = t.type === "attributes" && W(t.target);
+          if (a || n) {
+            b();
+            break;
+          }
+        }
+    }
+    function I() {
+      if (typeof document > "u") {
+        d.value = "light";
+        return;
+      }
+      const e = document.body, t = document.documentElement, a = (e == null ? void 0 : e.getAttribute("arco-theme")) === "dark" || (e == null ? void 0 : e.getAttribute("theme")) === "dark" || (e == null ? void 0 : e.getAttribute("data-theme")) === "dark" || (t == null ? void 0 : t.getAttribute("arco-theme")) === "dark" || (t == null ? void 0 : t.getAttribute("theme")) === "dark" || (t == null ? void 0 : t.getAttribute("data-theme")) === "dark" || (e == null ? void 0 : e.classList.contains("x-theme-dark")) || (t == null ? void 0 : t.classList.contains("x-theme-dark"));
+      d.value = a ? "dark" : "light";
+    }
+    function ae() {
+      typeof MutationObserver > "u" || !p.value || (s == null || s.disconnect(), s = new MutationObserver(te), s.observe(p.value, {
+        attributes: !0,
+        childList: !0,
+        characterData: !0,
+        subtree: !0
+      }));
+    }
+    function ne() {
+      typeof MutationObserver > "u" || typeof document > "u" || (u == null || u.disconnect(), u = new MutationObserver((e) => {
+        if (!e.some(
+          (n) => n.type === "attributes" && (n.attributeName === "arco-theme" || n.attributeName === "theme" || n.attributeName === "data-theme" || n.attributeName === "class")
+        ))
+          return;
+        const a = d.value;
+        I(), d.value !== a && b();
+      }), u.observe(document.body, {
+        attributes: !0,
+        attributeFilter: ["arco-theme", "theme", "data-theme", "class"]
+      }), u.observe(document.documentElement, {
+        attributes: !0,
+        attributeFilter: ["arco-theme", "theme", "data-theme", "class"]
+      }));
+    }
+    return ie(() => {
+      I(), b(), ae(), ne();
+    }), ce(() => {
+      s == null || s.disconnect(), u == null || u.disconnect(), s = null, u = null;
+    }), de(r, b, {
+      deep: !0,
+      flush: "post"
+    }), (e, t) => (fe(), me("div", he({
+      ref_key: "containerRef",
+      ref: p,
+      class: "x-watermark"
+    }, e.$attrs), [
+      pe(e.$slots, "default")
+    ], 16));
+  }
+});
+export {
+  ve as default
+};

package/dist/components/XWatermark.vue2.js

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