@rhino-design/vue 0.2.1 → 0.2.3

package/dist/components/XTag.vue.js

@@ -0,0 +1,126 @@
+import { defineComponent as A, ref as p, watch as k, computed as s, useAttrs as N, openBlock as l, createBlock as X, Transition as E, withCtx as I, createElementBlock as c, mergeProps as P, unref as u, createElementVNode as h, renderSlot as y, createCommentVNode as f, createVNode as T } from "vue";
+import j from "./XIcon.js";
+import { useXI18n as W } from "../composables/i18n.js";
+const q = {
+  key: 0,
+  class: "x-tag__icon x-tag__loading"
+}, D = {
+  key: 1,
+  class: "x-tag__icon"
+}, F = { class: "x-tag__content" }, G = ["aria-label"], L = /* @__PURE__ */ A({
+  __name: "XTag",
+  props: {
+    color: { default: "default" },
+    bordered: { type: Boolean, default: !1 },
+    round: { type: Boolean, default: !1 },
+    closable: { type: Boolean, default: !1 },
+    visible: { type: Boolean, default: void 0 },
+    size: { default: "medium" },
+    checkable: { type: Boolean, default: !1 },
+    checked: { type: Boolean, default: void 0 },
+    defaultChecked: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 }
+  },
+  emits: ["update:visible", "update:checked", "close", "check"],
+  setup(a, { emit: v }) {
+    function C(e, o = "14") {
+      if (!e.startsWith("#")) return "transparent";
+      const d = e.slice(1);
+      return d.length === 3 ? `#${d.split("").map((m) => `${m}${m}`).join("")}${o}` : d.length === 6 ? `${e}${o}` : "transparent";
+    }
+    const t = a, n = v, i = p(!0), r = p(t.defaultChecked);
+    k(
+      () => t.visible,
+      (e) => {
+        typeof e == "boolean" && (i.value = e);
+      },
+      { immediate: !0 }
+    ), k(
+      () => t.checked,
+      (e) => {
+        typeof e == "boolean" && (r.value = e);
+      },
+      { immediate: !0 }
+    );
+    const x = s(() => typeof t.visible == "boolean" ? t.visible : i.value), b = s(() => typeof t.checked == "boolean" ? t.checked : r.value), B = N(), { t: $ } = W(), w = [
+      "default",
+      "primary",
+      "success",
+      "warning",
+      "danger",
+      "red",
+      "orangered",
+      "orange",
+      "gold",
+      "lime",
+      "green",
+      "cyan",
+      "blue",
+      "blue",
+      "purple",
+      "pinkpurple",
+      "magenta",
+      "gray"
+    ], g = s(() => w.includes(t.color)), z = s(() => {
+      if (g.value) return;
+      const e = t.color;
+      return {
+        color: e,
+        borderColor: t.bordered ? e : "transparent",
+        background: t.bordered ? "transparent" : C(e, "14")
+      };
+    });
+    function V(e) {
+      e.stopPropagation(), typeof t.visible != "boolean" && (i.value = !1), n("update:visible", !1), n("close", e);
+    }
+    function S(e) {
+      if (t.checkable && !t.loading) {
+        const o = !b.value;
+        typeof t.checked != "boolean" && (r.value = o), n("update:checked", o), n("check", o, e);
+      }
+    }
+    return (e, o) => (l(), X(E, { name: "x-tag" }, {
+      default: I(() => [
+        x.value ? (l(), c("span", P({ key: 0 }, u(B), {
+          class: ["x-tag", [
+            g.value ? `x-tag--${a.color}` : "x-tag--custom",
+            a.bordered ? "is-bordered" : "",
+            a.round ? "is-round" : "",
+            a.closable ? "is-closable" : "",
+            a.checkable ? "is-checkable" : "",
+            b.value ? "is-checked" : "",
+            a.loading ? "is-loading" : "",
+            `x-tag--${a.size}`
+          ]],
+          style: z.value,
+          onClick: S
+        }), [
+          a.loading ? (l(), c("span", q, [...o[0] || (o[0] = [
+            h("span", { class: "x-tag__loading-spinner" }, null, -1)
+          ])])) : e.$slots.icon ? (l(), c("span", D, [
+            y(e.$slots, "icon")
+          ])) : f("", !0),
+          h("span", F, [
+            y(e.$slots, "default")
+          ]),
+          a.closable && !a.loading ? (l(), c("button", {
+            key: 2,
+            type: "button",
+            class: "x-tag__close",
+            onClick: V,
+            "aria-label": u($)("tag.closeAria", void 0, "关闭")
+          }, [
+            T(u(j), {
+              name: "window-close",
+              size: a.size === "small" ? 10 : 12
+            }, null, 8, ["size"])
+          ], 8, G)) : f("", !0)
+        ], 16)) : f("", !0)
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  L as default
+};

package/dist/components/XTag.vue2.js

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

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

@@ -1,8 +1,8 @@
-interface XTextareaMaxLengthObject {
+export interface XTextareaMaxLengthObject {
     length: number;
     errorOnly?: boolean;
 }
-interface XTextareaAutoSize {
+export interface XTextareaAutoSize {
     minRows?: number;
     maxRows?: number;
 }
@@ -38,27 +38,27 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     focus: typeof focus;
     blur: typeof blur;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: string, ev: Event) => any;
-    clear: (ev: MouseEvent) => any;
     input: (value: string, ev: Event) => any;
     blur: (ev: FocusEvent) => any;
+    change: (value: string, ev: Event) => any;
     focus: (ev: FocusEvent) => any;
+    clear: (ev: MouseEvent) => any;
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: string, ev: Event) => any) | undefined;
-    onClear?: ((ev: MouseEvent) => any) | undefined;
     onInput?: ((value: string, ev: Event) => any) | undefined;
     onBlur?: ((ev: FocusEvent) => any) | undefined;
+    onChange?: ((value: string, ev: Event) => any) | undefined;
     onFocus?: ((ev: FocusEvent) => any) | undefined;
+    onClear?: ((ev: MouseEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    disabled: boolean;
     error: boolean;
+    disabled: boolean;
     maxLength: number | XTextareaMaxLengthObject;
-    autoSize: boolean | XTextareaAutoSize;
-    allowClear: boolean;
     defaultValue: string;
+    allowClear: boolean;
     showWordLimit: boolean;
+    autoSize: boolean | XTextareaAutoSize;
     textareaAttrs: Record<string, unknown>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     mirrorRef: HTMLDivElement;

package/dist/components/XTextarea.vue.js

@@ -0,0 +1,261 @@
+import { defineComponent as ge, useAttrs as xe, ref as s, computed as l, watch as b, onMounted as be, onBeforeUnmount as ye, openBlock as y, createElementBlock as S, mergeProps as U, normalizeStyle as Se, toDisplayString as I, createCommentVNode as H, createElementVNode as we, unref as j, renderSlot as ze, withModifiers as Ce, createVNode as Le, nextTick as Be } from "vue";
+import { useXFormField as Ve } from "../composables/form.js";
+import { useXI18n as Fe } from "../composables/i18n.js";
+import _e from "./XIcon.js";
+const Ee = ["id", "disabled", "value", "placeholder"], Ne = {
+  key: 1,
+  class: "x-textarea__word-limit"
+}, Re = ["aria-label"], je = /* @__PURE__ */ ge({
+  inheritAttrs: !1,
+  __name: "XTextarea",
+  props: {
+    modelValue: {},
+    defaultValue: { default: "" },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    maxLength: { default: 0 },
+    showWordLimit: { type: Boolean, default: !1 },
+    allowClear: { type: Boolean, default: !1 },
+    autoSize: { type: [Boolean, Object], default: !1 },
+    wordLength: {},
+    wordSlice: {},
+    textareaAttrs: { default: void 0 }
+  },
+  emits: ["update:modelValue", "input", "change", "clear", "focus", "blur"],
+  setup(m, { expose: Z, emit: G }) {
+    const k = /* @__PURE__ */ new Set([
+      "onFocus",
+      "onFocusin",
+      "onFocusout",
+      "onBlur",
+      "onChange",
+      "onBeforeinput",
+      "onInput",
+      "onReset",
+      "onSubmit",
+      "onInvalid",
+      "onKeydown",
+      "onKeypress",
+      "onKeyup",
+      "onCopy",
+      "onCut",
+      "onPaste",
+      "onCompositionstart",
+      "onCompositionupdate",
+      "onCompositionend",
+      "onSelect",
+      "autocomplete",
+      "autofocus",
+      "maxlength",
+      "minlength",
+      "name",
+      "pattern",
+      "readonly",
+      "required"
+    ]), J = [
+      "border-width",
+      "box-sizing",
+      "font-family",
+      "font-weight",
+      "font-size",
+      "font-variant",
+      "letter-spacing",
+      "line-height",
+      "padding-top",
+      "padding-bottom",
+      "padding-left",
+      "padding-right",
+      "text-indent",
+      "text-rendering",
+      "text-transform",
+      "white-space",
+      "overflow-wrap",
+      "width"
+    ], t = m, d = G, M = xe(), n = Ve(), { t: Q } = Fe(), u = s(null), O = s(null), w = s(!1), z = s(!1), C = s(!1), X = s(), h = s(), L = s(0), B = s(0), V = s(String(t.defaultValue ?? "")), i = l(() => t.modelValue ?? V.value), F = l(() => !!(t.disabled || n != null && n.disabled.value)), K = l(() => typeof t.maxLength == "object" && t.maxLength !== null && !!t.maxLength.errorOnly), c = l(() => typeof t.maxLength == "object" && t.maxLength !== null ? Number(t.maxLength.length) || 0 : Number(t.maxLength) || 0), W = l(() => typeof t.wordLength == "function" ? t.wordLength(i.value) : i.value.length), D = l(() => !!(t.error || n != null && n.error.value) || !!(c.value && K.value && W.value > c.value)), ee = l(() => t.allowClear && !F.value && i.value.length > 0), g = l(() => typeof t.autoSize == "object" && t.autoSize !== null ? t.autoSize : {}), _ = l(() => g.value.minRows ? g.value.minRows * L.value + B.value : 0), E = l(() => g.value.maxRows ? g.value.maxRows * L.value + B.value : 0), te = l(() => {
+      const e = {};
+      return Object.entries(M).forEach(([o, a]) => {
+        k.has(o) && (e[o] = a);
+      }), e;
+    }), oe = l(() => {
+      const e = {};
+      return Object.entries(M).forEach(([o, a]) => {
+        k.has(o) || (e[o] = a);
+      }), e;
+    }), ne = l(() => {
+      const e = {
+        ...te.value,
+        ...t.textareaAttrs ?? {}
+      };
+      return D.value && (e["aria-invalid"] = !0), e;
+    }), ae = l(() => [
+      "x-textarea",
+      {
+        "is-focus": w.value,
+        "is-disabled": F.value,
+        "is-error": D.value,
+        "is-scroll": z.value
+      }
+    ]);
+    let N, v, R = i.value;
+    function ue(e) {
+      return typeof t.wordLength == "function" ? t.wordLength(e) : e.length;
+    }
+    function le(e) {
+      const o = {};
+      return J.forEach((a) => {
+        o[a] = e.getPropertyValue(a);
+      }), o;
+    }
+    function A(e) {
+      u.value && u.value.value !== e && (u.value.value = e);
+    }
+    function x(e, o = !0) {
+      let a = e;
+      c.value > 0 && !K.value && ue(a) > c.value && (a = typeof t.wordSlice == "function" ? t.wordSlice(a, c.value) : a.slice(0, c.value)), V.value = a, o && d("update:modelValue", a), A(a);
+    }
+    function P(e, o) {
+      e !== R && (R = e, d("change", e, o), n == null || n.notifyChange(o));
+    }
+    function r() {
+      if (!u.value) {
+        z.value = !1;
+        return;
+      }
+      z.value = u.value.scrollHeight > u.value.offsetHeight;
+    }
+    function f() {
+      if (!t.autoSize) {
+        h.value = void 0;
+        return;
+      }
+      if (!N)
+        return;
+      const e = le(N), o = Number.parseFloat(e["line-height"]), a = Number.parseFloat(e["font-size"]);
+      L.value = Number.isFinite(o) ? o : Number.isFinite(a) ? a : 0;
+      const $ = Number.parseFloat(e["border-width"]), pe = Number.isFinite($) ? $ : 0, me = Number.parseFloat(e["padding-top"]) || 0, he = Number.parseFloat(e["padding-bottom"]) || 0;
+      B.value = pe * 2 + me + he, X.value = e, Be(() => {
+        var q;
+        let p = ((q = O.value) == null ? void 0 : q.offsetHeight) ?? 0, Y = "hidden";
+        _.value && p < _.value && (p = _.value), E.value && p > E.value && (p = E.value, Y = "auto"), h.value = {
+          height: `${p}px`,
+          resize: "none",
+          overflow: Y
+        }, r();
+      });
+    }
+    function re(e) {
+      const o = e.target.value;
+      C.value || (d("input", o, e), x(o), n == null || n.notifyInput(e), r());
+    }
+    function T(e) {
+      if (e.type === "compositionend") {
+        C.value = !1;
+        const o = e.target.value;
+        d("input", o, e), x(o), n == null || n.notifyInput(e), r();
+        return;
+      }
+      C.value = !0;
+    }
+    function ie(e) {
+      w.value = !0, R = i.value, d("focus", e), n == null || n.notifyFocus(e);
+    }
+    function se(e) {
+      w.value = !1, d("blur", e), n == null || n.notifyBlur(e), P(i.value, e);
+    }
+    function ce(e) {
+      x(""), P("", e), d("clear", e), r();
+    }
+    function de(e) {
+      !u.value || e.target === u.value || (e.preventDefault(), u.value.focus());
+    }
+    function fe() {
+      var e;
+      (e = u.value) == null || e.focus();
+    }
+    function ve() {
+      var e;
+      (e = u.value) == null || e.blur();
+    }
+    return b(
+      () => t.modelValue,
+      (e) => {
+        if (e == null) {
+          V.value = "", A(""), t.autoSize ? f() : r();
+          return;
+        }
+        e !== i.value ? x(e, !1) : A(e), t.autoSize ? f() : r();
+      }
+    ), b(i, () => {
+      t.autoSize ? f() : r();
+    }), b(
+      () => t.autoSize,
+      () => {
+        t.autoSize ? f() : (h.value = void 0, r());
+      }
+    ), b(
+      () => t.textareaAttrs,
+      () => {
+        t.autoSize && f(), r();
+      },
+      { deep: !0 }
+    ), be(() => {
+      u.value && (N = window.getComputedStyle(u.value), t.autoSize && f(), r(), typeof ResizeObserver < "u" && (v = new ResizeObserver(() => {
+        t.autoSize && f(), r();
+      }), v.observe(u.value)));
+    }), ye(() => {
+      v == null || v.disconnect(), v = void 0;
+    }), Z({
+      focus: fe,
+      blur: ve
+    }), (e, o) => {
+      var a;
+      return y(), S("div", U(oe.value, {
+        class: ae.value,
+        onMousedown: de
+      }), [
+        m.autoSize ? (y(), S("div", {
+          key: 0,
+          ref_key: "mirrorRef",
+          ref: O,
+          class: "x-textarea__mirror",
+          style: Se(X.value)
+        }, I(`${i.value}
+`), 5)) : H("", !0),
+        we("textarea", U({
+          ref_key: "textareaRef",
+          ref: u
+        }, ne.value, {
+          id: (a = j(n)) == null ? void 0 : a.id,
+          class: "x-textarea__inner",
+          style: h.value,
+          disabled: F.value,
+          value: i.value,
+          placeholder: m.placeholder,
+          onInput: re,
+          onFocus: ie,
+          onBlur: se,
+          onCompositionstart: T,
+          onCompositionupdate: T,
+          onCompositionend: T
+        }), null, 16, Ee),
+        ze(e.$slots, "suffix"),
+        c.value && m.showWordLimit ? (y(), S("div", Ne, I(W.value) + "/" + I(c.value), 1)) : H("", !0),
+        ee.value ? (y(), S("button", {
+          key: 2,
+          class: "x-textarea__clear-btn",
+          type: "button",
+          "aria-label": j(Q)("input.clearAria", void 0, "清空"),
+          onMousedown: o[0] || (o[0] = Ce(() => {
+          }, ["prevent"])),
+          onClick: ce
+        }, [
+          Le(j(_e), { name: "guanbi" })
+        ], 40, Re)) : H("", !0)
+      ], 16);
+    };
+  }
+});
+export {
+  je as default
+};

package/dist/components/XTextarea.vue2.js

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

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

@@ -58,51 +58,51 @@ 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, {
-    change: (timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any;
-    clear: () => any;
     select: (timeString: string | (string | undefined)[], time: Date | (Date | undefined)[]) => any;
     blur: (event: FocusEvent) => any;
+    change: (timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any;
     focus: (event: FocusEvent) => any;
-    "update:modelValue": (value: string | (string | undefined)[] | undefined) => any;
+    clear: () => any;
     "update:popupVisible": (visible: boolean) => any;
     popupVisibleChange: (visible: boolean) => any;
     "popup-visible-change": (visible: boolean) => any;
     "update:open": (visible: boolean) => any;
+    "update:modelValue": (value: string | (string | undefined)[] | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any) | undefined;
-    onClear?: (() => any) | undefined;
     onSelect?: ((timeString: string | (string | undefined)[], time: Date | (Date | undefined)[]) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | (string | undefined)[] | undefined) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:popupVisible"?: ((visible: boolean) => any) | undefined;
     onPopupVisibleChange?: ((visible: boolean) => any) | undefined;
     "onPopup-visible-change"?: ((visible: boolean) => any) | undefined;
     "onUpdate:open"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | (string | undefined)[] | undefined) => any) | undefined;
 }>, {
+    error: boolean;
+    type: TimePickerType;
+    size: XSize;
     disabled: boolean;
     position: TimePickerPosition;
-    size: XSize;
     open: boolean;
-    error: boolean;
-    type: TimePickerType;
     placeholder: string | string[];
-    modelValue: TimeModelValue;
-    allowClear: boolean;
     popupVisible: boolean;
     defaultPopupVisible: boolean;
     unmountOnClose: boolean;
     popupContainer: string | HTMLElement;
+    defaultOpen: boolean;
+    modelValue: TimeModelValue;
     defaultValue: TimeModelValue;
+    allowClear: boolean;
+    readonly: boolean;
     triggerProps: Record<string, unknown>;
-    defaultOpen: boolean;
     step: {
         hour?: number;
         minute?: number;
         second?: number;
     };
     format: string;
-    readonly: boolean;
     hideDisabledOptions: boolean;
     use12Hours: boolean;
     disabledHours: () => number[];