x-next 1.0.1 → 1.1.0

package/dist/es/components/_components/select-view/select-view.js

@@ -0,0 +1,226 @@
+import { defineComponent as E, toRefs as I, ref as K, computed as i, watch as L, createVNode as o, Fragment as H } from "vue";
+import { isArray as M } from "../../../_utils/is.js";
+import P from "../feedback-icon/index.vue.js";
+import q from "../input-label/input-label.js";
+import { InputTag as O } from "../../form-input-tag/index.js";
+import _ from "../icon-hover/index.vue.js";
+import $ from "../../../icons/_self/down.js";
+import G from "../../../icons/animation/animation-loading.js";
+import J from "../../../icons/default/close.js";
+import Q from "../../../icons/_self/search.js";
+import { useFormItem as U } from "../../../_hooks/use-form-item.js";
+import { useLocale as W } from "../../../locale/index.js";
+import { useSize as X } from "../../../_hooks/use-size.js";
+import { getClassNameMixin as Y } from "../../../_utils/config.js";
+const pe = /* @__PURE__ */ E({
+  name: "SelectView",
+  props: {
+    modelValue: {
+      type: Array,
+      required: !0
+    },
+    inputValue: String,
+    placeholder: String,
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    opened: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String
+    },
+    bordered: {
+      type: Boolean,
+      default: !0
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    allowClear: {
+      type: Boolean,
+      default: !1
+    },
+    allowCreate: {
+      type: Boolean,
+      default: !1
+    },
+    allowSearch: {
+      type: Boolean,
+      default: (e) => M(e.modelValue)
+    },
+    maxTagCount: {
+      type: Number,
+      default: 0
+    },
+    tagNowrap: {
+      type: Boolean,
+      default: !1
+    },
+    retainInputValue: {
+      type: Boolean,
+      default: !1
+    },
+    inputAttrs: Object
+  },
+  emits: {
+    remove: (e) => !0,
+    clear: (e) => !0,
+    focus: (e) => !0,
+    blur: (e) => !0,
+    inputValueChange: (e, r) => !0,
+    keydown: (e) => !0
+  },
+  setup(e, {
+    emit: r,
+    slots: n
+  }) {
+    const {
+      size: B,
+      disabled: S,
+      error: x
+    } = I(e), u = Y("select--view"), {
+      feedback: p,
+      eventHandlers: c,
+      mergedDisabled: g,
+      mergedSize: R,
+      mergedError: b
+    } = U({
+      size: B,
+      disabled: S,
+      error: x
+    }), {
+      t: F
+    } = W(), {
+      mergedSize: h
+    } = X(R), {
+      opened: z
+    } = I(e), f = K(), d = i(
+      // @ts-ignore
+      () => {
+        var l;
+        return (l = f.value) == null ? void 0 : l.inputRef;
+      }
+    ), A = i(() => e.modelValue.length === 0), N = i(() => e.allowSearch || e.allowCreate), k = i(() => e.allowClear && !e.disabled && !A.value && e.modelValue.some((l) => l.closable !== !1)), m = (l) => {
+      var a, t;
+      r("focus", l), (t = (a = c.value) == null ? void 0 : a.onFocus) == null || t.call(a, l);
+    }, s = (l) => {
+      var a, t;
+      r("blur", l), (t = (a = c.value) == null ? void 0 : a.onBlur) == null || t.call(a, l);
+    }, T = (l) => {
+      r("remove", String(l));
+    }, j = (l) => {
+      l.stopPropagation(), r("clear", l);
+    }, v = (l, a) => {
+      var t, C;
+      r("inputValueChange", l, a), (C = (t = c.value) == null ? void 0 : t.onInput) == null || C.call(t, a);
+    }, w = (l) => {
+      r("keydown", l);
+    }, D = () => {
+      var l, a;
+      return e.loading ? ((l = n["loading-icon"]) == null ? void 0 : l.call(n)) ?? o(G, null, null) : e.allowSearch && e.opened ? ((a = n["search-icon"]) == null ? void 0 : a.call(n)) ?? o(Q, null, null) : n["arrow-icon"] ? n["arrow-icon"]() : o($, {
+        class: u.element("arrow-icon")
+      }, null);
+    }, V = () => o(H, null, [k.value && o(_, {
+      as: "button",
+      "aria-label": F("common.clearTarget", {
+        target: "选择"
+      }),
+      class: u.element("clear-btn"),
+      onClick: j,
+      onMousedown: (l) => l.stopPropagation()
+    }, {
+      default: () => [o(J, null, null)]
+    }), o("span", {
+      class: u.element("icon")
+    }, [D()]), !!p.value && o(P, {
+      type: p.value
+    }, null)]);
+    L(z, (l) => {
+      !l && d.value && d.value.isSameNode(document.activeElement) && d.value.blur();
+    });
+    const y = i(() => [u.modifier(`${e.multiple ? "multiple" : "single"}`), {
+      [u.modifier("opened")]: e.opened,
+      [u.modifier("borderless")]: !e.bordered
+    }]);
+    return {
+      inputRef: d,
+      handleFocus: m,
+      handleBlur: s,
+      render: () => e.multiple ? o(O, {
+        ref: f,
+        baseCls: u.block,
+        class: y.value,
+        modelValue: e.modelValue,
+        inputValue: e.inputValue,
+        focused: e.opened,
+        placeholder: e.placeholder,
+        disabled: g.value,
+        size: h.value,
+        error: b.value,
+        maxTagCount: e.maxTagCount,
+        disabledInput: !e.allowSearch && !e.allowCreate,
+        tagNowrap: e.tagNowrap,
+        retainInputValue: !0,
+        inputAttrs: e.inputAttrs,
+        uninjectFormItemContext: !0,
+        onRemove: T,
+        onInputValueChange: v,
+        onKeydown: w,
+        onFocus: m,
+        onBlur: s
+      }, {
+        prefix: n.prefix,
+        suffix: V,
+        tag: n.label
+      }) : o(q, {
+        ref: f,
+        baseCls: u.block,
+        class: y.value,
+        modelValue: e.modelValue[0],
+        inputValue: e.inputValue,
+        focused: e.opened,
+        placeholder: e.placeholder,
+        disabled: g.value,
+        size: h.value,
+        error: b.value,
+        enabledInput: N.value,
+        inputAttrs: e.inputAttrs,
+        uninjectFormItemContext: !0,
+        onInputValueChange: v,
+        onKeydown: w,
+        onFocus: m,
+        onBlur: s
+      }, {
+        default: n.label,
+        prefix: n.prefix,
+        suffix: V
+      })
+    };
+  },
+  methods: {
+    focus() {
+      this.inputRef && this.inputRef.focus();
+    },
+    blur() {
+      this.inputRef && this.inputRef.blur();
+    }
+  },
+  render() {
+    return this.render();
+  }
+});
+export {
+  pe as default
+};

package/dist/es/components/_components/transition/expand-transition.vue.js

@@ -0,0 +1,22 @@
+import o from "./expand-transition.vue2.js";
+import { openBlock as n, createBlock as r, Transition as t, withCtx as f, renderSlot as a } from "vue";
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
+function i(e, p, E, v, L, d) {
+  return n(), r(t, {
+    onBeforeEnter: e.onBeforeEnter,
+    onEnter: e.onEnter,
+    onAfterEnter: e.onAfterEnter,
+    onBeforeLeave: e.onBeforeLeave,
+    onLeave: e.onLeave,
+    onAfterLeave: e.onAfterLeave
+  }, {
+    default: f(() => [
+      a(e.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+}
+const u = /* @__PURE__ */ s(o, [["render", i]]);
+export {
+  u as default
+};

package/dist/es/components/_components/transition/expand-transition.vue2.js

@@ -0,0 +1,29 @@
+import { defineComponent as t } from "vue";
+const o = t({
+  name: "ExpandTransition",
+  setup() {
+    return {
+      onBeforeEnter(e) {
+        e.style.height = "0";
+      },
+      onEnter(e) {
+        e.style.height = `${e.scrollHeight}px`;
+      },
+      onAfterEnter(e) {
+        e.style.height = "";
+      },
+      onBeforeLeave(e) {
+        e.style.height = `${e.scrollHeight}px`;
+      },
+      onLeave(e) {
+        e.style.height = "0";
+      },
+      onAfterLeave(e) {
+        e.style.height = "";
+      }
+    };
+  }
+});
+export {
+  o as default
+};

package/dist/es/components/alert/Alert.vue.js

@@ -0,0 +1,73 @@
+import h from "./Alert.vue2.js";
+import { resolveComponent as l, openBlock as o, createBlock as t, Transition as N, withCtx as c, createElementBlock as i, mergeProps as L, normalizeClass as n, renderSlot as a, createCommentVNode as s, createElementVNode as m, createTextVNode as C, toDisplayString as b, createVNode as f } from "vue";
+import B from "../../_virtual/_plugin-vue_export-helper.js";
+function A(e, r, V, g, w, S) {
+  const d = l("icon-info-circle-fill"), p = l("icon-check-circle-fill"), y = l("icon-exclamation-circle-fill"), u = l("icon-close-circle-fill"), v = l("icon-close"), k = l("icon-hover");
+  return o(), t(N, {
+    name: "x-alert-slide",
+    onBeforeLeave: e.handleBeforeLeave,
+    onLeave: e.handleLeave,
+    onAfterLeave: e.handleAfterLeave
+  }, {
+    default: c(() => [
+      e.computedVisible ? (o(), i("div", L({ key: 0 }, e.rootAttrs, {
+        role: "alert",
+        class: e.cls,
+        style: e.rootStyle
+      }), [
+        e.showIcon && !(e.type === "normal" && !e.$slots.icon) ? (o(), i("div", {
+          key: 0,
+          class: n(e.className.element("icon"))
+        }, [
+          a(e.$slots, "icon", {}, () => [
+            e.type === "info" ? (o(), t(d, { key: 0 })) : e.type === "success" ? (o(), t(p, { key: 1 })) : e.type === "warning" ? (o(), t(y, { key: 2 })) : e.type === "error" ? (o(), t(u, { key: 3 })) : s("", !0)
+          ])
+        ], 2)) : s("", !0),
+        m("div", {
+          class: n(e.className.element("body"))
+        }, [
+          e.title || e.$slots.title ? (o(), i("div", {
+            key: 0,
+            class: n(e.className.element("title"))
+          }, [
+            a(e.$slots, "title", {}, () => [
+              C(b(e.title), 1)
+            ])
+          ], 2)) : s("", !0),
+          m("div", {
+            class: n(e.className.element("content"))
+          }, [
+            a(e.$slots, "default")
+          ], 2)
+        ], 2),
+        e.$slots.action ? (o(), i("div", {
+          key: 1,
+          class: n(e.className.element("action"))
+        }, [
+          a(e.$slots, "action")
+        ], 2)) : s("", !0),
+        e.closable ? (o(), i("button", {
+          key: 2,
+          type: "button",
+          "aria-label": "Close",
+          class: n(e.className.element("close-btn")),
+          onClick: r[0] || (r[0] = (...$) => e.handleClose && e.handleClose(...$))
+        }, [
+          a(e.$slots, "close-element", {}, () => [
+            f(k, null, {
+              default: c(() => [
+                f(v)
+              ]),
+              _: 1
+            })
+          ])
+        ], 2)) : s("", !0)
+      ], 16)) : s("", !0)
+    ]),
+    _: 3
+  }, 8, ["onBeforeLeave", "onLeave", "onAfterLeave"]);
+}
+const z = /* @__PURE__ */ B(h, [["render", A]]);
+export {
+  z as default
+};

package/dist/es/components/alert/Alert.vue2.js

@@ -0,0 +1,163 @@
+import { defineComponent as v, ref as h, computed as i } from "vue";
+import { MESSAGE_TYPES as I } from "../../_utils/constant.js";
+import B from "../_components/icon-hover/index.vue.js";
+import F from "../../icons/default/close.js";
+import x from "../../icons/default/info-circle-fill.js";
+import g from "../../icons/default/check-circle-fill.js";
+import S from "../../icons/default/exclamation-circle-fill.js";
+import A from "../../icons/default/close-circle-fill.js";
+import { getClassNameMixin as E } from "../../_utils/config.js";
+const G = v({
+  name: "Alert",
+  inheritAttrs: !1,
+  components: {
+    IconHover: B,
+    IconClose: F,
+    IconInfoCircleFill: x,
+    IconCheckCircleFill: g,
+    IconExclamationCircleFill: S,
+    IconCloseCircleFill: A
+  },
+  props: {
+    /**
+     * @zh 警告提示的类型。2.41.0 新增 `normal` 类型
+     * @en Type of the alert. 2.41.0 Added `normal` type
+     * @values info, success, warning, error, normal
+     */
+    type: {
+      type: String,
+      default: "info",
+      validator: (e) => [...I, "normal"].includes(e)
+    },
+    /**
+     * @zh 是否展示图标
+     * @en Whether to show the icon
+     */
+    showIcon: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否展示关闭按钮
+     * @en Whether to show the close button
+     */
+    closable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 警告提示的标题
+     * @en The title of the alert
+     */
+    title: String,
+    /**
+     * @zh 是否作为顶部公告使用（去除边框和圆角）
+     * @en Whether to use as the top announcement (remove the border and rounded corners)
+     */
+    banner: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 内容是否居中显示
+     * @en Whether the content is displayed in the center
+     */
+    center: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 警告提示是否可见
+     * @en Whether the alert is visible
+     * @vModel
+     */
+    visible: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 默认是否可见（非受控模式）
+     * @en Whether the alert is visible by default (uncontrolled)
+     */
+    defaultVisible: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  // 显式导入插槽
+  slots: Object,
+  emits: {
+    /**
+     * @zh 点击关闭按钮时触发
+     * @en Triggered when the close button is clicked
+     * @param {MouseEvent} ev
+     */
+    close: (e) => !0,
+    "update:visible": (e) => !0,
+    /**
+     * @zh 关闭动画结束后触发
+     * @en Triggered after the close animation ends
+     */
+    afterClose: () => !0
+  },
+  /**
+   * @zh 标题
+   * @en Title
+   * @slot title
+   */
+  /**
+   * @zh 图标
+   * @en Icon
+   * @slot icon
+   */
+  /**
+   * @zh 操作项
+   * @en Actions
+   * @slot action
+   */
+  /**
+   * @zh 关闭元素
+   * @en Close element
+   * @slot close-element
+   * @version 2.36.0
+   */
+  setup(e, { attrs: n, slots: r, emit: s }) {
+    const t = E("alert"), a = h(e.defaultVisible), c = i(() => e.visible ?? a.value), f = (o) => {
+      a.value = !1, s("update:visible", !1), s("close", o);
+    }, m = (o) => {
+      const l = o;
+      l.style.maxHeight = `${l.offsetHeight}px`, l.style.opacity = "1";
+    }, d = (o) => {
+      const l = o;
+      l.style.maxHeight = "0", l.style.opacity = "0";
+    }, u = () => {
+      s("afterClose");
+    }, p = i(() => [
+      t.block,
+      t.modifier(e.type),
+      n.class,
+      {
+        [t.modifier("with-title")]: !!(e.title || r.title),
+        [t.modifier("banner")]: e.banner,
+        [t.modifier("center")]: e.center
+      }
+    ]), y = i(() => n.style), C = i(() => {
+      const { class: o, style: l, ...b } = n;
+      return b;
+    });
+    return {
+      className: t,
+      cls: p,
+      rootAttrs: C,
+      rootStyle: y,
+      computedVisible: c,
+      handleClose: f,
+      handleBeforeLeave: m,
+      handleLeave: d,
+      handleAfterLeave: u
+    };
+  }
+});
+export {
+  G as default
+};

package/dist/es/components/alert/index.js

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

package/dist/es/components/button/Button.js

@@ -0,0 +1,73 @@
+import { defineComponent as O, getCurrentInstance as P, inject as p, reactive as x, computed as c, withDirectives as F, createVNode as o, resolveDirective as L } from "vue";
+import { getClassNameMixin as T } from "../../_utils/config.js";
+import { buttonProps as A } from "./props.js";
+import B from "../../icons/animation/animation-loading.js";
+import I from "../../directives/wave.js";
+import { buttonGroupInjectionKey as K } from "./context.js";
+import { useSize as N } from "../../_hooks/use-size.js";
+const q = /* @__PURE__ */ O({
+  name: "Button",
+  props: A,
+  // 显式导入插槽
+  slots: Object,
+  directives: {
+    wave: I
+  },
+  emits: ["click"],
+  setup(e, {
+    slots: l,
+    emit: h
+  }) {
+    const v = P(), a = p(K, void 0), {
+      mergedSize: k
+    } = N(void 0, {
+      defaultValue: "medium"
+    }), u = x({
+      clicked: !1,
+      isDebounce: !1
+    }), i = T("button"), w = (n) => n.replace(/[A-Z]/g, (d) => `-${d.toLowerCase()}`), r = (n) => {
+      const d = (v == null ? void 0 : v.vnode.props) ?? {};
+      return Object.prototype.hasOwnProperty.call(d, n) || Object.prototype.hasOwnProperty.call(d, w(n));
+    }, m = c(() => r("type") ? e.type : (a == null ? void 0 : a.type) ?? e.type), b = c(() => r("size") ? e.size : (a == null ? void 0 : a.size) ?? k.value), g = c(() => r("status") ? e.status : (a == null ? void 0 : a.status) ?? e.status), y = c(() => r("shape") ? e.shape : (a == null ? void 0 : a.shape) ?? e.shape), f = c(() => r("disabled") ? e.disabled : (a == null ? void 0 : a.disabled) ?? e.disabled), D = c(() => [i.block, m.value && m.value !== "default" && i.modifier(m.value), b.value && i.modifier(b.value), g.value && i.modifier(g.value), f.value && i.is("disabled"), e.block && i.modifier("block"), e.plain && i.modifier("plain"), y.value && i.modifier(y.value), e.link && i.modifier("link"), !e.border && i.modifier("hide-border"), t.value && i.modifier("loading"), e.loadingFill && i.modifier("loading-fill"), e.narrow && i.modifier("narrow")]), z = () => {
+      e.debounce > 0 && !u.isDebounce && (u.isDebounce = !0, setTimeout(() => {
+        u.isDebounce = !1;
+      }, e.debounce));
+    }, t = c(() => e.loading || u.clicked || u.isDebounce), S = c(() => f.value || t.value || e.link || m.value === "text"), j = (n) => {
+      var d, s;
+      (s = (d = n.target).blur) == null || s.call(d), !(f.value || t.value) && (z(), h("click", n));
+    };
+    return () => {
+      var n, d, s;
+      return F(o("button", {
+        class: D.value,
+        type: e.htmlType,
+        disabled: f.value || t.value,
+        "aria-busy": t.value || void 0,
+        onClick: j
+      }, [o("span", {
+        class: i.element("loading"),
+        style: {
+          display: "flex",
+          opacity: t.value ? 1 : 0,
+          width: t.value ? "auto" : 0,
+          marginRight: t.value && !e.loadingFill ? "4px" : "0",
+          overflow: "hidden",
+          transition: "all 0.3s ease"
+        }
+      }, [o(B, null, null)]), !!l.prefix && o("span", {
+        class: i.element("prefix")
+      }, [(n = l.prefix) == null ? void 0 : n.call(l)]), l.icon && o("span", {
+        class: i.element("prefix")
+      }, [(d = l.icon) == null ? void 0 : d.call(l)]), o("span", {
+        class: i.element("content")
+      }, [(s = l.default) == null ? void 0 : s.call(l)]), l.suffix && o("span", {
+        class: i.element("suffix")
+      }, [l.suffix()])]), [[L("wave"), {
+        disabled: S.value
+      }]]);
+    };
+  }
+});
+export {
+  q as default
+};

package/dist/es/components/button/ButtonGroup.vue.js

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

package/dist/es/components/button/ButtonGroup.vue2.js

@@ -0,0 +1,63 @@
+import { defineComponent as i, toRefs as a, provide as m, reactive as u } from "vue";
+import { buttonGroupInjectionKey as y } from "./context.js";
+import { getClassNameMixin as c } from "../../_utils/config.js";
+const l = i({
+  name: "ButtonGroup",
+  props: {
+    /**
+     * @zh 按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。
+     * @en Children button types are divided into five types: secondary, primary, dashed, outline and text.
+     */
+    type: {
+      type: String
+    },
+    /**
+     * @zh 按钮的状态
+     * @en Children button state
+     * @values 'normal','warning','success','danger'
+     */
+    status: {
+      type: String
+    },
+    /**
+     * @zh 按钮的形状
+     * @en Button shape
+     */
+    shape: {
+      type: String
+    },
+    /**
+     * @zh 按钮的尺寸
+     * @en Children button size
+     * @values 'mini','small','medium','large'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 全部子按钮是否禁用
+     * @en All children whether the button is disabled
+     */
+    disabled: {
+      type: Boolean
+    }
+  },
+  setup(t) {
+    const { type: e, size: o, status: s, disabled: p, shape: n } = a(t), r = c("button-group");
+    return m(
+      y,
+      u({
+        type: e,
+        size: o,
+        shape: n,
+        status: s,
+        disabled: p
+      })
+    ), {
+      className: r
+    };
+  }
+});
+export {
+  l as default
+};

package/dist/es/components/button/context.js

@@ -0,0 +1,4 @@
+const o = Symbol("ArcoButtonGroup");
+export {
+  o as buttonGroupInjectionKey
+};

package/dist/es/components/button/index.js

@@ -0,0 +1,10 @@
+import r from "./Button.js";
+import n from "./ButtonGroup.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as t } from "../../_utils/config.js";
+const f = o(t("Button"), r), B = o(t("ButtonGroup"), n);
+export {
+  f as Button,
+  B as ButtonGroup,
+  f as default
+};