x-next 1.0.1 → 1.2.0

package/dist/es/components/form-textarea/Textarea.vue2.js

@@ -0,0 +1,323 @@
+import { defineComponent as de, toRefs as he, ref as s, computed as r, watch as z, onMounted as ge, nextTick as U } from "vue";
+import Se from "../../_container/resize-observer.js";
+import { useLocale as we } from "../../locale/index.js";
+import ye from "../_components/icon-hover/index.vue.js";
+import xe from "../../icons/default/close-circle-fill.js";
+import { getSizeStyles as ze } from "./utils.js";
+import { isUndefined as be, isNull as Ce, isObject as b, isFunction as pe } from "../../_utils/is.js";
+import { omit as W } from "../../_utils/omit.js";
+import { INPUT_EVENTS as P } from "../../_utils/constant.js";
+import Le from "../../_utils/pick.js";
+import { useFormItem as Fe, useFormItemControl as Be } from "../../_hooks/use-form-item.js";
+import { useSize as He } from "../../_hooks/use-size.js";
+import { useCursor as Ie } from "../../_hooks/use-cursor.js";
+import { getClassNameMixin as Ne } from "../../_utils/config.js";
+const Pe = de({
+  name: "Textarea",
+  components: { ResizeObserver: Se, IconHover: ye, IconClose: xe },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     * @vModel
+     */
+    modelValue: String,
+    /**
+     * @zh 默认值（非受控状态）
+     * @en Default value (uncontrolled state)
+     */
+    defaultValue: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @zh 提示文字
+     * @en Placeholder
+     */
+    placeholder: String,
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否为错误状态
+     * @en Whether it is an error state
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 文本域尺寸
+     * @en Textarea size
+     * @values 'mini','small','medium','large'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 输入值的最大长度，errorOnly 属性在 2.12.0 版本添加
+     * @en Maximum length of input value, the errorOnly attribute was added in version 2.12.0
+     */
+    maxLength: {
+      type: [Number, Object],
+      default: 0
+    },
+    /**
+     * @zh 是否显示字数统计
+     * @en Whether to display word count
+     */
+    showWordLimit: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否允许清空文本域
+     * @en Whether to allow clearing the text
+     */
+    allowClear: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否让文本框自适应内容高度
+     * @en Whether to make the textarea adapt to the height of the content
+     */
+    autoSize: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    /**
+     * @zh 字符长度的计算方法
+     * @en Calculation method of word length
+     */
+    wordLength: {
+      type: Function
+    },
+    /**
+     * @zh 字符截取方法，同 wordLength 一起使用
+     * @en Character interception method, used together with wordLength
+     * @version 2.12.0
+     */
+    wordSlice: {
+      type: Function
+    },
+    /**
+     * @zh 透传给 textarea 的属性
+     * @en Attributes passed to textarea
+     */
+    textareaAttrs: {
+      type: Object
+    }
+  },
+  emits: {
+    "update:modelValue": (t) => !0,
+    /**
+     * @zh 用户输入时触发
+     * @en Emitted when the user enters
+     * @param {string} value
+     * @param {Event} ev
+     */
+    input: (t, f) => !0,
+    /**
+     * @zh 仅在文本框失焦时触发
+     * @en Only emitted when the textarea is out of focus
+     * @param {string} value
+     * @param {Event} ev
+     */
+    change: (t, f) => !0,
+    /**
+     * @zh 点击清除按钮时触发
+     * @en Emitted when the clear button is clicked
+     * @param {MouseEvent} ev
+     */
+    clear: (t) => !0,
+    /**
+     * @zh 文本框获取焦点时触发
+     * @en Emitted when the textarea gets focus
+     * @param {FocusEvent} ev
+     */
+    focus: (t) => !0,
+    /**
+     * @zh 文本框失去焦点时触发
+     * @en Emitted when the textarea loses focus
+     * @param {FocusEvent} ev
+     */
+    blur: (t) => !0
+  },
+  setup(t, { emit: f, attrs: h }) {
+    const { disabled: q, error: G, modelValue: C, size: J } = he(t), m = Ne("textarea"), {
+      formItemCtx: K,
+      mergedDisabled: p,
+      mergedError: Q,
+      mergedSize: X,
+      eventHandlers: v
+    } = Fe({ disabled: q, error: G, size: J }), { t: Y } = we(), { mergedSize: _ } = He(X), o = s(), L = s(), c = s(), F = s(), B = s(t.defaultValue), n = r(() => C.value ?? B.value), [Z, ee] = Ie(o);
+    z(C, (e) => {
+      (be(e) || Ce(e)) && (B.value = "");
+    });
+    const g = r(
+      () => b(t.maxLength) && !!t.maxLength.errorOnly
+    ), u = r(() => b(t.maxLength) ? t.maxLength.length : t.maxLength), S = (e) => pe(t.wordLength) ? t.wordLength(e) : Array.from(e).length, j = r(() => S(n.value)), M = r(
+      () => Q.value || !!(u.value && g.value && j.value > u.value)
+    ), d = s(!1), H = s(!1), $ = r(
+      () => t.allowClear && !p.value && n.value
+    ), I = s(!1), N = () => {
+      Z(), U(() => {
+        o.value && n.value !== o.value.value && (o.value.value = n.value, ee());
+      });
+    }, w = (e, l = !0) => {
+      var a;
+      u.value && !g.value && S(e) > u.value && (e = ((a = t.wordSlice) == null ? void 0 : a.call(t, e, u.value)) ?? Array.from(e).slice(0, u.value).join("")), B.value = e, l && f("update:modelValue", e), N();
+    };
+    let R = n.value;
+    const k = (e, l) => {
+      var a, i;
+      e !== R && (R = e, f("change", e, l), (i = (a = v.value) == null ? void 0 : a.onChange) == null || i.call(a, l));
+    }, te = (e) => {
+      var l, a;
+      H.value = !0, R = n.value, f("focus", e), (a = (l = v.value) == null ? void 0 : l.onFocus) == null || a.call(l, e);
+    }, ae = (e) => {
+      var l, a;
+      H.value = !1, f("blur", e), (a = (l = v.value) == null ? void 0 : l.onBlur) == null || a.call(l, e), k(n.value, e);
+    }, le = (e) => {
+      var a, i;
+      const { value: l } = e.target;
+      if (e.type === "compositionend") {
+        if (I.value = !1, u.value && !g.value && n.value.length >= u.value && S(l) > u.value) {
+          N();
+          return;
+        }
+        w(l), f("input", l, e), (i = (a = v.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
+      } else
+        I.value = !0;
+    }, oe = (e) => {
+      var a, i;
+      const { value: l } = e.target;
+      if (!I.value) {
+        if (u.value && !g.value && n.value.length >= u.value && S(l) > u.value && e.inputType === "insertText") {
+          N();
+          return;
+        }
+        w(l), f("input", l, e), (i = (a = v.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
+      }
+    }, ue = (e) => {
+      var l, a;
+      w(""), k("", e), (a = (l = v.value) == null ? void 0 : l.onInput) == null || a.call(l, e), f("clear", e);
+    };
+    z(C, (e) => {
+      e !== n.value && w(e ?? "", !1);
+    });
+    const re = r(() => W(W(h, P), ["class", "style"])), ne = r(() => h.style), ie = r(() => Le(h, P)), se = Be(K, () => ({
+      ...ie.value,
+      ...t.textareaAttrs
+    })), fe = r(() => {
+      const e = {
+        ...se.value
+      };
+      return M.value && (e["aria-invalid"] = !0), e;
+    }), me = r(() => [
+      m.element("wrapper"),
+      h.class,
+      m.modifier(`size-${_.value}`),
+      {
+        [m.modifier("focus")]: H.value,
+        [m.modifier("disabled")]: p.value,
+        [m.modifier("error")]: M.value,
+        [m.modifier("scroll")]: d.value,
+        [m.modifier("has-clear")]: $.value,
+        [m.modifier("has-word-limit")]: !!(u.value && t.showWordLimit)
+      }
+    ]);
+    let V;
+    const A = s(0), O = s(0), T = r(() => !b(t.autoSize) || !t.autoSize.minRows ? 0 : t.autoSize.minRows * A.value + O.value), E = r(() => !b(t.autoSize) || !t.autoSize.maxRows ? 0 : t.autoSize.maxRows * A.value + O.value), y = () => {
+      if (!o.value || !t.autoSize)
+        return;
+      V = window.getComputedStyle(o.value);
+      const e = ze(V);
+      A.value = Number.parseFloat(e["line-height"] || "0"), O.value = Number.parseFloat(e["border-top-width"] || "0") + Number.parseFloat(e["border-bottom-width"] || "0") + Number.parseFloat(e["padding-top"] || "0") + Number.parseFloat(e["padding-bottom"] || "0"), F.value = e, U(() => {
+        var D;
+        if (!t.autoSize || !c.value)
+          return;
+        let a = ((D = c.value) == null ? void 0 : D.offsetHeight) ?? 0, i = "hidden";
+        T.value && a < T.value && (a = T.value), E.value && a > E.value && (a = E.value, i = "auto"), L.value = {
+          height: `${a}px`,
+          resize: "none",
+          overflow: i
+        };
+      });
+    };
+    ge(() => {
+      o.value && (V = window.getComputedStyle(o.value), t.autoSize && y()), x();
+    });
+    const ve = () => {
+      t.autoSize && c.value && y(), x();
+    }, ce = (e) => {
+      o.value && e.target !== o.value && (e.preventDefault(), o.value.focus());
+    }, x = () => {
+      o.value && (o.value.scrollHeight > o.value.offsetHeight ? d.value || (d.value = !0) : d.value && (d.value = !1));
+    };
+    return z(n, () => {
+      t.autoSize && c.value && y(), x();
+    }), z(
+      () => [t.autoSize, _.value],
+      () => {
+        t.autoSize ? y() : (L.value = void 0, F.value = void 0), x();
+      },
+      { deep: !0, flush: "post" }
+    ), {
+      t: Y,
+      className: m,
+      wrapperCls: me,
+      textareaRef: o,
+      textareaStyle: L,
+      mirrorRef: c,
+      mirrorStyle: F,
+      computedValue: n,
+      showClearBtn: $,
+      valueLength: j,
+      computedMaxLength: u,
+      mergedDisabled: p,
+      mergeTextareaAttrs: fe,
+      wrapperAttrs: re,
+      wrapperStyle: ne,
+      handleInput: oe,
+      handleFocus: te,
+      handleBlur: ae,
+      handleComposition: le,
+      handleClear: ue,
+      handleResize: ve,
+      handleMousedown: ce
+    };
+  },
+  methods: {
+    /**
+     * @zh 使输入框获取焦点
+     * @en Make the input box focus
+     * @public
+     * @version 2.24.0
+     */
+    focus() {
+      var t;
+      (t = this.$refs.textareaRef) == null || t.focus();
+    },
+    /**
+     * @zh 使输入框失去焦点
+     * @en Make the input box lose focus
+     * @public
+     * @version 2.24.0
+     */
+    blur() {
+      var t;
+      (t = this.$refs.textareaRef) == null || t.blur();
+    }
+  }
+});
+export {
+  Pe as default
+};

package/dist/es/components/form-textarea/index.js

@@ -0,0 +1,8 @@
+import e from "./Textarea.vue.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as o } from "../../_utils/config.js";
+const n = t(o("Textarea"), e);
+export {
+  n as Textarea,
+  n as default
+};

package/dist/es/components/form-textarea/utils.js

@@ -0,0 +1,31 @@
+const r = [
+  "border-width",
+  "border-top-width",
+  "border-bottom-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",
+  "word-break",
+  "overflow-wrap",
+  "width"
+], i = (o) => {
+  const t = {};
+  return r.forEach((e) => {
+    t[e] = o.getPropertyValue(e);
+  }), t;
+};
+export {
+  i as getSizeStyles
+};

package/dist/es/components/grid/Col.vue.js

@@ -0,0 +1,16 @@
+import o from "./Col.vue2.js";
+import { openBlock as r, createElementBlock as s, normalizeStyle as t, normalizeClass as l, renderSlot as a, createCommentVNode as n } from "vue";
+import m from "../../_virtual/_plugin-vue_export-helper.js";
+function i(e, c, p, d, f, u) {
+  return e.visible ? (r(), s("div", {
+    key: 0,
+    class: l(e.classNames),
+    style: t(e.styles)
+  }, [
+    a(e.$slots, "default")
+  ], 6)) : n("", !0);
+}
+const k = /* @__PURE__ */ m(o, [["render", i]]);
+export {
+  k as default
+};

package/dist/es/components/grid/Col.vue2.js

@@ -0,0 +1,131 @@
+import { defineComponent as h, inject as w, computed as s } from "vue";
+import { isNumber as u, isObject as L, isString as N } from "../../_utils/is.js";
+import { RowContextInjectionKey as _ } from "./context.js";
+import { useResponsiveState as z } from "./hook/use-responsive-state.js";
+import { useResponsiveValue as B } from "./hook/use-responsive-value.js";
+import E from "../../_utils/pick.js";
+import { responsiveArray as F } from "../../_utils/responsive-observe.js";
+import { getClassNameMixin as H } from "../../_utils/config.js";
+function I(e) {
+  if (N(e) && (["initial", "auto", "none"].includes(e) || /^\d+$/.test(e)) || u(e))
+    return e;
+  if (N(e) && /^\d+(px|em|rem|%)$/.test(e))
+    return `0 0 ${e}`;
+}
+function f(e) {
+  return e !== void 0;
+}
+const Q = h({
+  name: "Col",
+  props: {
+    /**
+     * @zh 栅格占位格数
+     * @en Number of grid space
+     */
+    span: {
+      type: Number,
+      default: 24
+    },
+    /**
+     * @zh 栅格左侧的间隔格数，间隔内不可以有栅格
+     * @en The number of grids on the left side of the grid. There can be no grids in the grid.
+     */
+    offset: {
+      type: Number
+    },
+    /**
+     * @zh 对元素进行排序
+     * @en Sort elements
+     */
+    order: {
+      type: Number
+    },
+    /**
+     * @zh < 576px 响应式栅格
+     * @en <576px responsive grid
+     */
+    xs: {
+      type: [Number, Object]
+    },
+    /**
+     * @zh >= 576px 响应式栅格
+     * @en >= 576px responsive grid
+     */
+    sm: {
+      type: [Number, Object]
+    },
+    /**
+     * @zh >= 768px 响应式栅格
+     * @en >= 768px responsive grid
+     */
+    md: {
+      type: [Number, Object]
+    },
+    /**
+     * @zh >= 992px 响应式栅格
+     * @en >= 992px responsive grid
+     */
+    lg: {
+      type: [Number, Object]
+    },
+    /**
+     * @zh >= 1200px 响应式栅格
+     * @en >= 1200px responsive grid
+     */
+    xl: {
+      type: [Number, Object]
+    },
+    /**
+     * @zh >= 1600px 响应式栅格
+     * @en >= 1600px responsive grid
+     */
+    xxl: {
+      type: [Number, Object]
+    },
+    /**
+     * @zh 设置 flex 布局属性
+     * @en Set flex layout properties
+     * @version 2.10.0
+     */
+    flex: {
+      type: [Number, String]
+    }
+  },
+  setup(e) {
+    const o = H("col"), l = w(_, {}), c = s(() => I(e.flex)), j = s(() => {
+      const { div: i } = l, { span: d, offset: r, order: m, xs: p, sm: b, md: y, lg: g, xl: v, xxl: $ } = e, a = {
+        [o.block]: !i,
+        [o.modifier(`order-${m}`)]: f(m),
+        [o.modifier(String(d))]: !i && ![p, b, y, g, v, $].some((n) => f(n)),
+        [o.modifier(`offset-${r}`)]: r && r > 0
+      }, x = { xs: p, sm: b, md: y, lg: g, xl: v, xxl: $ };
+      return Object.keys(x).forEach((n) => {
+        const t = x[n];
+        u(t) ? t > 0 && (a[o.modifier(`${n}-${t}`)] = !0) : L(t) && (u(t.span) && t.span > 0 && (a[o.modifier(`${n}-${t.span}`)] = !0), a[o.modifier(`${n}-offset-${t.offset}`)] = f(t.offset), a[o.modifier(`${n}-order-${t.order}`)] = f(t.order));
+      }), a;
+    }), O = s(() => c.value ? o.block : j.value), C = s(() => {
+      const { gutter: i, div: d } = l, r = {};
+      if (Array.isArray(i) && !d) {
+        const m = i[0] && i[0] / 2 || 0, p = i[1] && i[1] / 2 || 0;
+        m && (r.paddingLeft = `${m}px`, r.paddingRight = `${m}px`), p && (r.paddingTop = `${p}px`, r.paddingBottom = `${p}px`);
+      }
+      return r;
+    }), S = s(
+      () => c.value ? { flex: c.value } : {}
+    ), k = s(() => E(e, F)), A = B(
+      s(() => ({
+        val: e.span,
+        key: "span",
+        ...k.value
+      }))
+    ), R = z(A, 24, !0);
+    return {
+      visible: s(() => !!R.value),
+      classNames: O,
+      styles: s(() => ({ ...C.value, ...S.value }))
+    };
+  }
+});
+export {
+  Q as default
+};

package/dist/es/components/grid/Grid.vue.js

@@ -0,0 +1,15 @@
+import o from "./Grid.vue2.js";
+import { openBlock as r, createElementBlock as s, normalizeStyle as t, normalizeClass as l, renderSlot as a } from "vue";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+function c(e, m, i, p, f, d) {
+  return r(), s("div", {
+    class: l(e.className.block),
+    style: t(e.style)
+  }, [
+    a(e.$slots, "default")
+  ], 6);
+}
+const k = /* @__PURE__ */ n(o, [["render", c]]);
+export {
+  k as default
+};

package/dist/es/components/grid/Grid.vue2.js

@@ -0,0 +1,98 @@
+import { defineComponent as C, toRefs as D, computed as c, reactive as r, watchEffect as i, provide as n } from "vue";
+import { GridContextInjectionKey as N, GridDataCollectorInjectionKey as R } from "./context.js";
+import { useResponsiveState as p } from "./hook/use-responsive-state.js";
+import { setItemVisible as g } from "./utils/index.js";
+import { getClassNameMixin as j } from "../../_utils/config.js";
+const _ = C({
+  name: "Grid",
+  props: {
+    /**
+     * @zh 每一行展示的列数
+     * @en Number of columns displayed in each row
+     */
+    cols: {
+      type: [Number, Object],
+      default: 24
+    },
+    /**
+     * @zh 行与行之间的间距
+     * @en The space in row-to-row
+     */
+    rowGap: {
+      type: [Number, Object],
+      default: 0
+    },
+    /**
+     * @zh 列与列之间的间距
+     * @en The space in column-to-column
+     */
+    colGap: {
+      type: [Number, Object],
+      default: 0
+    },
+    /**
+     * @zh 是否折叠
+     * @en Whether to collapsed
+     */
+    collapsed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 折叠时显示的行数
+     * @en Number of rows displayed when collapsed
+     */
+    collapsedRows: {
+      type: Number,
+      default: 1
+    }
+  },
+  setup(m) {
+    const {
+      cols: d,
+      rowGap: u,
+      colGap: f,
+      collapsedRows: v,
+      collapsed: G
+    } = D(m), o = p(d, 24), a = p(f, 0), w = p(u, 0), x = j("grid"), y = c(() => [
+      {
+        gap: `${w.value}px ${a.value}px`,
+        "grid-template-columns": `repeat(${o.value}, minmax(0px, 1fr))`
+      }
+    ]), l = r(/* @__PURE__ */ new Map()), I = c(() => {
+      const e = [];
+      for (const [s, b] of l.entries())
+        e[s] = b;
+      return e;
+    }), t = r({
+      overflow: !1,
+      displayIndexList: [],
+      cols: o.value,
+      colGap: a.value
+    });
+    return i(() => {
+      t.cols = o.value, t.colGap = a.value;
+    }), i(() => {
+      const e = g({
+        cols: o.value,
+        collapsed: G.value,
+        collapsedRows: v.value,
+        itemDataList: I.value
+      });
+      t.overflow = e.overflow, t.displayIndexList = e.displayIndexList;
+    }), n(N, t), n(R, {
+      collectItemData(e, s) {
+        l.set(e, s);
+      },
+      removeItemData(e) {
+        l.delete(e);
+      }
+    }), {
+      className: x,
+      style: y
+    };
+  }
+});
+export {
+  _ as default
+};

package/dist/es/components/grid/GridItem.vue.js

@@ -0,0 +1,16 @@
+import o from "./GridItem.vue2.js";
+import { openBlock as r, createElementBlock as s, normalizeStyle as t, normalizeClass as l, renderSlot as a } from "vue";
+import f from "../../_virtual/_plugin-vue_export-helper.js";
+function m(e, n, i, p, c, d) {
+  return r(), s("div", {
+    ref: "domRef",
+    class: l(e.classNames),
+    style: t(e.style)
+  }, [
+    a(e.$slots, "default", { overflow: e.overflow })
+  ], 6);
+}
+const v = /* @__PURE__ */ f(o, [["render", m]]);
+export {
+  v as default
+};