x-next 1.0.0 → 1.1.0

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

@@ -0,0 +1,308 @@
+import { defineComponent as me, toRefs as ve, ref as s, computed as u, watch as I, onMounted as de, nextTick as D } from "vue";
+import he from "../../_container/resize-observer.js";
+import { useLocale as ge } from "../../locale/index.js";
+import Se from "../_components/icon-hover/index.vue.js";
+import ye from "../../icons/default/close-circle-fill.js";
+import { getSizeStyles as we } from "./utils.js";
+import { isUndefined as xe, isNull as pe, isObject as w, isFunction as be } from "../../_utils/is.js";
+import { omit as U } from "../../_utils/omit.js";
+import { INPUT_EVENTS as W } from "../../_utils/constant.js";
+import ze from "../../_utils/pick.js";
+import { useFormItem as Ce } from "../../_hooks/use-form-item.js";
+import { useSize as Le } from "../../_hooks/use-size.js";
+import { useCursor as Fe } from "../../_hooks/use-cursor.js";
+import { getClassNameMixin as Be } from "../../_utils/config.js";
+const De = me({
+  name: "Textarea",
+  components: { ResizeObserver: he, IconHover: Se, IconClose: ye },
+  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, c) => !0,
+    /**
+     * @zh 仅在文本框失焦时触发
+     * @en Only emitted when the textarea is out of focus
+     * @param {string} value
+     * @param {Event} ev
+     */
+    change: (t, c) => !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: c, attrs: d }) {
+    const { disabled: P, error: q, modelValue: x, size: G } = ve(t), f = Be("textarea"), {
+      mergedDisabled: p,
+      mergedError: J,
+      mergedSize: K,
+      eventHandlers: m
+    } = Ce({ disabled: P, error: q, size: G }), { t: Q } = ge(), { mergedSize: X } = Le(K), r = s(), O = s(), h = s(), T = s(), b = s(t.defaultValue), n = u(() => x.value ?? b.value), [Y, Z] = Fe(r);
+    I(x, (e) => {
+      (xe(e) || pe(e)) && (b.value = "");
+    });
+    const g = u(
+      () => w(t.maxLength) && !!t.maxLength.errorOnly
+    ), o = u(() => w(t.maxLength) ? t.maxLength.length : t.maxLength), S = (e) => be(t.wordLength) ? t.wordLength(e) : Array.from(e).length, E = u(() => S(n.value)), _ = u(
+      () => J.value || !!(o.value && g.value && E.value > o.value)
+    ), v = s(!1), z = s(!1), j = u(
+      () => t.allowClear && !p.value && n.value
+    ), C = s(!1), L = () => {
+      Y(), D(() => {
+        r.value && n.value !== r.value.value && (r.value.value = n.value, Z());
+      });
+    }, y = (e, l = !0) => {
+      var a;
+      o.value && !g.value && S(e) > o.value && (e = ((a = t.wordSlice) == null ? void 0 : a.call(t, e, o.value)) ?? Array.from(e).slice(0, o.value).join("")), b.value = e, l && c("update:modelValue", e), L();
+    };
+    let F = n.value;
+    const M = (e, l) => {
+      var a, i;
+      e !== F && (F = e, c("change", e, l), (i = (a = m.value) == null ? void 0 : a.onChange) == null || i.call(a, l));
+    }, ee = (e) => {
+      var l, a;
+      z.value = !0, F = n.value, c("focus", e), (a = (l = m.value) == null ? void 0 : l.onFocus) == null || a.call(l, e);
+    }, te = (e) => {
+      var l, a;
+      z.value = !1, c("blur", e), (a = (l = m.value) == null ? void 0 : l.onBlur) == null || a.call(l, e), M(n.value, e);
+    }, ae = (e) => {
+      var a, i;
+      const { value: l } = e.target;
+      if (e.type === "compositionend") {
+        if (C.value = !1, o.value && !g.value && n.value.length >= o.value && S(l) > o.value) {
+          L();
+          return;
+        }
+        y(l), c("input", l, e), (i = (a = m.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
+      } else
+        C.value = !0;
+    }, le = (e) => {
+      var a, i;
+      const { value: l } = e.target;
+      if (!C.value) {
+        if (o.value && !g.value && n.value.length >= o.value && S(l) > o.value && e.inputType === "insertText") {
+          L();
+          return;
+        }
+        y(l), c("input", l, e), (i = (a = m.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
+      }
+    }, oe = (e) => {
+      y(""), M("", e), c("clear", e);
+    };
+    I(x, (e) => {
+      e !== n.value && y(e ?? "", !1);
+    });
+    const re = u(() => U(U(d, W), ["class", "style"])), ue = u(() => d.style), ne = u(() => ze(d, W)), ie = u(() => {
+      const e = {
+        ...ne.value,
+        ...t.textareaAttrs
+      };
+      return _.value && (e["aria-invalid"] = !0), e;
+    }), se = u(() => [
+      f.element("wrapper"),
+      d.class,
+      f.modifier(`size-${X.value}`),
+      {
+        [f.modifier("focus")]: z.value,
+        [f.modifier("disabled")]: p.value,
+        [f.modifier("error")]: _.value,
+        [f.modifier("scroll")]: v.value,
+        [f.modifier("has-clear")]: j.value,
+        [f.modifier("has-word-limit")]: !!(o.value && t.showWordLimit)
+      }
+    ]);
+    let $;
+    const B = s(0), H = s(0), N = u(() => !w(t.autoSize) || !t.autoSize.minRows ? 0 : t.autoSize.minRows * B.value + H.value), R = u(() => !w(t.autoSize) || !t.autoSize.maxRows ? 0 : t.autoSize.maxRows * B.value + H.value), V = () => {
+      const e = we($);
+      B.value = Number.parseFloat(e["line-height"] || "0"), H.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"), T.value = e, D(() => {
+        var k;
+        let a = ((k = h.value) == null ? void 0 : k.offsetHeight) ?? 0, i = "hidden";
+        N.value && a < N.value && (a = N.value), R.value && a > R.value && (a = R.value, i = "auto"), O.value = {
+          height: `${a}px`,
+          resize: "none",
+          overflow: i
+        };
+      });
+    };
+    de(() => {
+      r.value && ($ = window.getComputedStyle(r.value), t.autoSize && V()), A();
+    });
+    const ce = () => {
+      t.autoSize && h.value && V(), A();
+    }, fe = (e) => {
+      r.value && e.target !== r.value && (e.preventDefault(), r.value.focus());
+    }, A = () => {
+      r.value && (r.value.scrollHeight > r.value.offsetHeight ? v.value || (v.value = !0) : v.value && (v.value = !1));
+    };
+    return I(n, () => {
+      t.autoSize && h.value && V(), A();
+    }), {
+      t: Q,
+      className: f,
+      wrapperCls: se,
+      textareaRef: r,
+      textareaStyle: O,
+      mirrorRef: h,
+      mirrorStyle: T,
+      computedValue: n,
+      showClearBtn: j,
+      valueLength: E,
+      computedMaxLength: o,
+      mergedDisabled: p,
+      mergeTextareaAttrs: ie,
+      wrapperAttrs: re,
+      wrapperStyle: ue,
+      handleInput: le,
+      handleFocus: ee,
+      handleBlur: te,
+      handleComposition: ae,
+      handleClear: oe,
+      handleResize: ce,
+      handleMousedown: fe
+    };
+  },
+  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 {
+  De 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
+};