x-next 1.0.1 → 1.2.0

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
+};

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

@@ -0,0 +1,60 @@
+const e = {
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  // 按钮的宽度是否随容器自适应
+  block: Boolean,
+  // 按钮是否为加载中状态
+  loading: Boolean,
+  // 按钮是否为加载中状态，且填充
+  loadingFill: {
+    type: Boolean,
+    default: !1
+  },
+  // debounce时间，即击按钮后，按钮状态保持loading状态的时间
+  debounce: {
+    type: Number,
+    default: 0
+  },
+  shape: {
+    type: String,
+    default: void 0
+  },
+  link: {
+    type: Boolean,
+    default: !1
+  },
+  type: {
+    type: String,
+    default: "default"
+  },
+  htmlType: {
+    type: String,
+    default: "button"
+  },
+  status: {
+    type: String,
+    default: "default"
+  },
+  plain: {
+    type: Boolean,
+    default: !1
+  },
+  size: {
+    type: String,
+    default: void 0
+  },
+  border: {
+    type: Boolean,
+    default: !0
+  },
+  // 按钮是否为窄按钮，无边距(padding)按钮
+  narrow: {
+    type: Boolean,
+    default: !1
+  }
+};
+export {
+  e as buttonProps
+};

package/dist/es/components/config-provider/ConfigProvider.js

@@ -0,0 +1,97 @@
+import { defineComponent as y, ref as p, provide as c, toRefs as s, computed as C, watchPostEffect as v, onBeforeUnmount as h, createVNode as m, Fragment as P, mergeProps as k } from "vue";
+import { getClassNameMixin as S } from "../../_utils/config.js";
+import { applyThemeColor as j, getThemeColorProperties as N } from "../../_utils/palette.js";
+import { localeInjectionKey as T } from "../../locale/index.js";
+import { configProviderInjectionKey as b } from "./context.js";
+const R = /* @__PURE__ */ y({
+  name: "ConfigProvider",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 全局组件尺寸，子组件未显式指定时生效
+     * @en Global component size, used when a child does not specify one
+     */
+    size: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @zh 语言包，未传入时使用全局默认语言
+     * @en Locale pack; falls back to the global default locale
+     */
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * @zh 主题色种子，会派生整条色阶并写入包裹元素
+     * @en Theme color seed; derives the whole palette onto the wrapper element
+     */
+    themeColor: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @zh 是否使用暗色色阶
+     * @en Whether to derive the dark palette
+     */
+    dark: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 包裹元素标签；不需要额外 DOM 时可设为 null
+     * @en Wrapper tag; set to null to avoid an extra DOM node
+     */
+    tag: {
+      type: [String, null],
+      default: "div"
+    }
+  },
+  setup(e, {
+    slots: t,
+    attrs: u
+  }) {
+    const g = S("config-provider"), a = p(null);
+    c(b, {
+      ...s(e),
+      slots: t
+    }), e.locale && c(T, C(() => e.locale));
+    let l = [];
+    const f = () => {
+      const r = a.value;
+      if (r)
+        for (const o of l)
+          r.style.removeProperty(o);
+      l = [];
+    };
+    return v(() => {
+      const r = e.themeColor, o = e.dark, n = a.value;
+      f(), !(!n || !r) && (j(r, {
+        target: n,
+        dark: o
+      }), l = N("primary"));
+    }), h(f), () => {
+      var i;
+      const {
+        class: r,
+        style: o,
+        ...n
+      } = u;
+      return e.tag === null ? m(P, null, [(i = t.default) == null ? void 0 : i.call(t)]) : m(e.tag, k(n, {
+        ref: a,
+        class: [g.block, r],
+        style: o,
+        "data-theme": e.dark ? "dark" : void 0
+      }), {
+        default: () => {
+          var d;
+          return [(d = t.default) == null ? void 0 : d.call(t)];
+        }
+      });
+    };
+  }
+});
+export {
+  R as default
+};

package/dist/es/components/config-provider/context.js

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

package/dist/es/components/config-provider/index.js

@@ -0,0 +1,11 @@
+import o from "./ConfigProvider.js";
+import { generateComponent as r } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const f = r(
+  e("ConfigProvider"),
+  o
+);
+export {
+  f as ConfigProvider,
+  f as default
+};