x-next 1.4.0 → 1.6.0

package/dist/components/trigger/index.d.ts

@@ -158,11 +158,11 @@ export declare const Trigger: {
     }, import('vue').PublicProps, {
         disabled: boolean;
         position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+        trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
         animationName: string;
         autoFitPosition: boolean;
         popupVisible: boolean;
         defaultPopupVisible: boolean;
-        trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
         popupOffset: number;
         showArrow: boolean;
         alignPoint: boolean;
@@ -346,11 +346,11 @@ export declare const Trigger: {
     }>, () => any, {}, {}, {}, {
         disabled: boolean;
         position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+        trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
         animationName: string;
         autoFitPosition: boolean;
         popupVisible: boolean;
         defaultPopupVisible: boolean;
-        trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
         popupOffset: number;
         showArrow: boolean;
         alignPoint: boolean;
@@ -534,11 +534,11 @@ export declare const Trigger: {
 }, string, {
     disabled: boolean;
     position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+    trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
     animationName: string;
     autoFitPosition: boolean;
     popupVisible: boolean;
     defaultPopupVisible: boolean;
-    trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
     popupOffset: number;
     showArrow: boolean;
     alignPoint: boolean;

package/dist/components/watermark/Watermark.d.ts

@@ -231,13 +231,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     rotate: number;
     repeat: boolean;
     content: string | string[];
+    alpha: number;
     height: number;
     width: number;
     zIndex: number;
     font: WatermarkFont;
     gap: WatermarkGap;
     offset: WatermarkGap;
-    alpha: number;
     antiTamper: boolean;
     grayscale: boolean;
     staggered: boolean;

package/dist/components/watermark/index.d.ts

@@ -64,13 +64,13 @@ export declare const Watermark: {
         rotate: number;
         repeat: boolean;
         content: string | string[];
+        alpha: number;
         height: number;
         width: number;
         zIndex: number;
         font: import('./interface').WatermarkFont;
         gap: import('./interface').WatermarkGap;
         offset: import('./interface').WatermarkGap;
-        alpha: number;
         antiTamper: boolean;
         grayscale: boolean;
         staggered: boolean;
@@ -143,13 +143,13 @@ export declare const Watermark: {
         rotate: number;
         repeat: boolean;
         content: string | string[];
+        alpha: number;
         height: number;
         width: number;
         zIndex: number;
         font: import('./interface').WatermarkFont;
         gap: import('./interface').WatermarkGap;
         offset: import('./interface').WatermarkGap;
-        alpha: number;
         antiTamper: boolean;
         grayscale: boolean;
         staggered: boolean;
@@ -219,13 +219,13 @@ export declare const Watermark: {
     rotate: number;
     repeat: boolean;
     content: string | string[];
+    alpha: number;
     height: number;
     width: number;
     zIndex: number;
     font: import('./interface').WatermarkFont;
     gap: import('./interface').WatermarkGap;
     offset: import('./interface').WatermarkGap;
-    alpha: number;
     antiTamper: boolean;
     grayscale: boolean;
     staggered: boolean;

package/dist/es/_styles/palette-aliases.js

@@ -13,6 +13,8 @@ const r = {
     "--x-color-border-focus": "var(--x-color-primary-6)",
     "--x-color-menu-dark-hover": "var(--x-color-primary)",
     "--x-color-menu-dark-submenu-selected-bg": "color-mix(in srgb, var(--x-color-primary) 45%, transparent)",
+    "--x-color-picker-color-swatch_active": "var(--x-color-primary-text)",
+    "--x-color-picker-color-text_active": "var(--x-color-primary-text)",
     "--x-color-primary-button-text": "var(--x-color-primary-text)",
     "--x-color-primary-light-1": "var(--x-color-primary-1)",
     "--x-color-primary-light-2": "var(--x-color-primary-light-1)",
@@ -40,6 +42,11 @@ const r = {
     "--x-field-status-validating-text": "var(--x-color-primary-text)",
     "--x-focus-bc": "var(--x-color-primary)",
     "--x-form-border-color-focus": "var(--x-field-color-border-focus)",
+    "--x-heatmap-color-level-1": "var(--x-color-primary-1)",
+    "--x-heatmap-color-level-2": "var(--x-color-primary-2)",
+    "--x-heatmap-color-level-3": "var(--x-color-primary-3)",
+    "--x-heatmap-color-level-4": "var(--x-color-primary-5)",
+    "--x-heatmap-color-level-5": "var(--x-color-primary-6)",
     "--x-hover-color": "var(--x-color-primary)",
     "--x-image-preview-color-action-hover-bg": "var(--x-color-primary-subtle)",
     "--x-image-preview-color-action-hover-text": "var(--x-color-primary-solid)",
@@ -81,6 +88,7 @@ const r = {
     "--x-radio-color-bg_checked_disabled": "var(--x-color-primary-light-3)",
     "--x-select-bc": "var(--x-color-primary)",
     "--x-select-color": "var(--x-color-primary)",
+    "--x-spin-tip-shimmer-color-highlight": "color-mix( in srgb, var(--x-color-primary-text) 30%, var(--x-color-white) )",
     "--x-table-color-bg-body-row_active": "var(--x-color-primary-subtle)",
     "--x-table-color-border_resizing": "var(--x-color-primary-6)",
     "--x-table-color-header-filters-icon_active": "var(--x-color-primary-6)",

package/dist/es/_utils/color.js

@@ -0,0 +1,73 @@
+import { hslToRgb as N } from "./palette.js";
+import { rgbToHsl as w } from "./palette.js";
+const c = (n, t, r) => Math.min(r, Math.max(t, n)), T = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i, F = /^(rgba?|hsla?)\(([^)]+)\)$/i, b = /^[+-]?(?:\d+\.?\d*|\.\d+)%?$/, u = (n) => c(Math.round(n), 0, 255), v = (n) => {
+  if (n === void 0) return 1;
+  const t = n.trim();
+  if (!t) return 1;
+  if (t.endsWith("%")) return c(parseFloat(t) / 100, 0, 1);
+  const r = Number(t);
+  return Number.isFinite(r) ? c(r, 0, 1) : 1;
+}, A = (n) => {
+  const t = n.trim();
+  return t.endsWith("%") ? u(parseFloat(t) / 100 * 255) : u(Number(t));
+}, C = (n) => {
+  if (!T.test(n)) return null;
+  const t = n.slice(1), r = t.length <= 4 ? [...t].map((i) => i + i).join("") : t, a = parseInt(r.slice(0, 2), 16), s = parseInt(r.slice(2, 4), 16), e = parseInt(r.slice(4, 6), 16), o = r.length === 8 ? parseInt(r.slice(6, 8), 16) / 255 : 1;
+  return [a, s, e, o].some((i) => !Number.isFinite(i)) ? null : { r: a, g: s, b: e, a: c(o, 0, 1) };
+}, M = (n) => {
+  const t = n.trim();
+  if (!t) return null;
+  if (t.includes(",")) {
+    const e = t.split(",").map((o) => o.trim());
+    return e.length !== 3 && e.length !== 4 ? null : { channels: e.slice(0, 3), alpha: e[3] };
+  }
+  if (t.split("/").length > 2) return null;
+  const [r, a] = t.split("/"), s = r.trim().split(/\s+/);
+  return s.length !== 3 ? null : { channels: s, alpha: a };
+}, H = (n) => {
+  if (typeof n != "string") return null;
+  const t = n.trim();
+  if (!t) return null;
+  if (t.startsWith("#")) return C(t);
+  const r = t.match(F);
+  if (!r) return null;
+  const a = r[1].toLowerCase(), s = M(r[2]);
+  if (!s || s.channels.some((f) => !b.test(f)) || s.alpha !== void 0 && s.alpha !== "" && !b.test(s.alpha.trim()))
+    return null;
+  const e = v(s.alpha), o = s.channels.map((f) => parseFloat(f));
+  if (o.some((f) => !Number.isFinite(f))) return null;
+  if (a.startsWith("rgb")) {
+    const [f, $, x] = s.channels.map(A);
+    return { r: f, g: $, b: x, a: e };
+  }
+  const [i, h, l] = o, [m, g, d] = N({ h: i, s: c(h, 0, 100), l: c(l, 0, 100) });
+  return { r: u(m), g: u(g), b: u(d), a: e };
+}, I = ({ r: n, g: t, b: r }) => {
+  const a = c(n, 0, 255) / 255, s = c(t, 0, 255) / 255, e = c(r, 0, 255) / 255, o = Math.max(a, s, e), i = Math.min(a, s, e), h = o - i;
+  let l = 0;
+  h !== 0 && (o === a ? l = (s - e) / h % 6 : o === s ? l = (e - a) / h + 2 : l = (a - s) / h + 4, l *= 60, l < 0 && (l += 360));
+  const m = o === 0 ? 0 : h / o * 100;
+  return { h: l, s: m, v: o * 100 };
+}, E = ({ h: n, s: t, v: r }) => {
+  const a = c(t, 0, 100) / 100, s = c(r, 0, 100) / 100, e = (n % 360 + 360) % 360, o = s * a, i = o * (1 - Math.abs(e / 60 % 2 - 1)), h = s - o;
+  let l;
+  return e < 60 ? l = [o, i, 0] : e < 120 ? l = [i, o, 0] : e < 180 ? l = [0, o, i] : e < 240 ? l = [0, i, o] : e < 300 ? l = [i, 0, o] : l = [o, 0, i], l.map((m) => u((m + h) * 255));
+}, p = (n) => u(n).toString(16).padStart(2, "0"), P = ({ r: n, g: t, b: r, a }, s = !1) => {
+  const e = `#${p(n)}${p(t)}${p(r)}`;
+  return s && a < 1 ? `${e}${p(a * 255)}` : e;
+}, S = (n) => Math.round(c(n, 0, 1) * 100), W = (n, t, r = !1) => {
+  const { r: a, g: s, b: e, a: o } = n;
+  return P(n, r);
+}, _ = ({ r: n, g: t, b: r, a }) => `rgba(${u(n)}, ${u(t)}, ${u(r)}, ${Number(c(a, 0, 1).toFixed(3))})`, L = ({ r: n, g: t, b: r }) => `rgba(${u(n)}, ${u(t)}, ${u(r)}, 1)`;
+export {
+  S as formatAlphaPercent,
+  W as formatColor,
+  N as hslToRgb,
+  E as hsvToRgb,
+  H as parseColorAlpha,
+  w as rgbToHsl,
+  I as rgbToHsv,
+  P as rgbaToHex,
+  L as toAlphaSliderColor,
+  _ as toRgbaString
+};

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

@@ -5,7 +5,7 @@ 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({
+const H = /* @__PURE__ */ O({
   name: "Button",
   props: A,
   // 显式导入插槽
@@ -69,5 +69,5 @@ const q = /* @__PURE__ */ O({
   }
 });
 export {
-  q as default
+  H as default
 };

package/dist/es/components/color-picker/ColorPicker.js

@@ -0,0 +1,239 @@
+import { defineComponent as L, toRefs as k, ref as C, computed as c, watch as A, createVNode as n } from "vue";
+import { getClassNameMixin as R } from "../../_utils/config.js";
+import { useFormItem as j } from "../../_hooks/use-form-item.js";
+import { useSize as D } from "../../_hooks/use-size.js";
+import { useLocale as G } from "../../locale/index.js";
+import { parseColorAlpha as H, formatColor as v } from "../../_utils/color.js";
+import I from "../trigger/Trigger.js";
+import K from "./panel.js";
+const Y = /* @__PURE__ */ L({
+  name: "ColorPicker",
+  props: {
+    /**
+     * @zh 颜色值，支持 hex / rgb / hsl（含 alpha）
+     * @en Color value, supports hex / rgb / hsl with alpha
+     * @vModel
+     */
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @zh 非受控初值
+     * @en Default value for uncontrolled mode
+     */
+    defaultValue: {
+      type: String,
+      /*
+       * 不设字符串默认值：未传值时由下方 rgba 的数值兜底给出品牌蓝，
+       * 避免在组件里硬编码色值（硬编码色门禁不允许，且换主色时会失配）。
+       */
+      default: void 0
+    },
+    /**
+     * @zh 面板是否可见
+     * @en Whether the panel is visible
+     * @vModel
+     */
+    show: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 面板默认是否可见
+     * @en Whether the panel is visible by default
+     */
+    defaultShow: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 可选的颜色格式
+     * @en Available color formats
+     * @defaultValue ['hex', 'rgb', 'hsl']
+     */
+    modes: {
+      type: Array,
+      default: () => ["hex", "rgb", "hsl"]
+    },
+    /**
+     * @zh 是否启用透明度
+     * @en Whether alpha is enabled
+     * @defaultValue true
+     */
+    showAlpha: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 预设色块
+     * @en Preset swatches
+     */
+    swatches: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @zh 是否展示确认按钮
+     * @en Whether to show the confirm button
+     * @defaultValue true
+     */
+    showConfirm: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否展示清除按钮
+     * @en Whether to show the clear button
+     * @defaultValue true
+     */
+    showClear: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否禁用
+     * @en Whether the picker is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 尺寸
+     * @en Size
+     * @values 'mini', 'small', 'medium', 'large'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 面板挂载容器
+     * @en Mount container for the panel
+     */
+    popupContainer: {
+      type: [String, Object]
+    }
+  },
+  emits: {
+    "update:modelValue": (a, d) => !0,
+    change: (a, d) => !0,
+    "update:show": (a) => !0,
+    showChange: (a) => !0,
+    confirm: (a) => !0,
+    clear: () => !0
+  },
+  slots: Object,
+  setup(a, {
+    attrs: d,
+    emit: t,
+    slots: s
+  }) {
+    const f = R("color-picker"), {
+      t: u
+    } = G(), {
+      mergedDisabled: g,
+      mergedSize: x,
+      eventHandlers: B
+    } = j({
+      disabled: k(a).disabled,
+      size: k(a).size
+    });
+    D(x);
+    const h = C(a.defaultShow), i = c(() => a.show ?? h.value), m = (e) => {
+      e !== i.value && (h.value = e, t("update:show", e), t("showChange", e));
+    };
+    A(() => a.show, (e) => {
+      e !== void 0 && e !== h.value && (h.value = e);
+    });
+    const p = C(a.defaultValue), w = c(() => a.modelValue ?? p.value ?? ""), S = {
+      r: 28,
+      g: 97,
+      b: 255,
+      a: 1
+    }, b = c(() => H(w.value ?? "") ?? S), y = c(() => v(b.value, "hex", a.showAlpha)), _ = (e, l) => {
+      var r, P;
+      const o = v(e, "hex", a.showAlpha);
+      o !== w.value && (p.value = o, t("update:modelValue", o, l), t("change", o, l), (P = (r = B.value) == null ? void 0 : r.onChange) == null || P.call(r, l));
+    }, z = c(() => ({
+      clear: u("colorPicker.clear"),
+      confirm: u("colorPicker.confirm"),
+      hue: u("colorPicker.hue"),
+      alpha: u("colorPicker.alpha"),
+      saturation: u("colorPicker.saturation")
+    })), T = (e, l) => {
+      _(e, l);
+    }, F = (e) => {
+      const l = v(e, "hex", a.showAlpha);
+      p.value = l, t("update:modelValue", l), t("change", l), t("confirm", l), m(!1);
+    }, N = () => {
+      const e = a.defaultValue;
+      p.value = e, t("update:modelValue", e ?? ""), t("change", e ?? ""), t("clear");
+    }, V = C();
+    A(i, (e, l) => {
+      var o, r;
+      l && !e && ((r = (o = V.value) == null ? void 0 : o.focus) == null || r.call(o));
+    });
+    const O = () => {
+      var o;
+      if (s.trigger)
+        return s.trigger({
+          value: y.value,
+          visible: i.value
+        });
+      const e = (o = s.default) == null ? void 0 : o.call(s), l = n("button", {
+        ref: V,
+        type: "button",
+        class: f.element("trigger"),
+        disabled: g.value,
+        "aria-haspopup": "dialog",
+        "aria-expanded": i.value ? "true" : "false",
+        "aria-label": u("colorPicker.trigger")
+      }, [n("span", {
+        class: f.element("trigger-color"),
+        style: {
+          backgroundColor: y.value
+        }
+      }, null)]);
+      return e ? n("span", {
+        class: [f.element("trigger-wrapper"), d.class]
+      }, [l, n("span", {
+        class: f.element("trigger-label")
+      }, [e])]) : n("span", {
+        class: d.class
+      }, [l]);
+    };
+    return () => n(I, {
+      trigger: "click",
+      position: "bl",
+      popupOffset: 4,
+      clickToClose: !1,
+      preventFocus: !0,
+      autoFitTransformOrigin: !0,
+      animationName: "x-zoom-in-fade-out",
+      disabled: g.value,
+      popupVisible: i.value,
+      popupContainer: a.popupContainer,
+      onPopupVisibleChange: m
+    }, {
+      default: O,
+      content: () => n(K, {
+        value: b.value,
+        modes: a.modes,
+        showAlpha: a.showAlpha,
+        swatches: a.swatches,
+        disabled: g.value,
+        showConfirm: a.showConfirm,
+        showClear: a.showClear,
+        texts: z.value,
+        onChange: T,
+        onConfirm: F,
+        onClear: N,
+        onClose: () => m(!1)
+      }, null)
+    });
+  }
+});
+export {
+  Y as default
+};

package/dist/es/components/color-picker/gradient-slider.js

@@ -0,0 +1,79 @@
+import { defineComponent as b, ref as m, computed as y, watch as w, createVNode as o } from "vue";
+import { getClassNameMixin as k } from "../../_utils/config.js";
+const D = /* @__PURE__ */ b({
+  name: "ColorPickerSlider",
+  props: {
+    /** 0-100 的位置百分比 */
+    value: {
+      type: Number,
+      required: !0
+    },
+    /** 滑轨背景（CSS background 值） */
+    background: {
+      type: String,
+      required: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** 无障碍名称，由父组件传入已本地化的文案 */
+    ariaLabel: {
+      type: String
+    }
+  },
+  emits: {
+    change: (t) => !0
+  },
+  setup(t, {
+    emit: l
+  }) {
+    const n = k("color-picker"), u = m(), i = m(!1), f = y(() => ({
+      left: `${t.value}%`
+    })), s = (e) => {
+      const a = u.value;
+      if (!a || t.disabled) return;
+      const r = a.getBoundingClientRect();
+      if (!r.width) return;
+      const h = Math.min(Math.max(e - r.left, 0), r.width);
+      l("change", h / r.width * 100);
+    }, c = (e) => {
+      s(e.clientX);
+    }, d = () => {
+      i.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", d);
+    }, v = (e) => {
+      t.disabled || (e.preventDefault(), i.value = !0, s(e.clientX), document.addEventListener("mousemove", c), document.addEventListener("mouseup", d));
+    }, g = (e) => {
+      if (t.disabled) return;
+      const a = e.shiftKey ? 10 : 1;
+      e.key === "ArrowLeft" || e.key === "ArrowDown" ? (e.preventDefault(), l("change", Math.max(t.value - a, 0))) : (e.key === "ArrowRight" || e.key === "ArrowUp") && (e.preventDefault(), l("change", Math.min(t.value + a, 100)));
+    };
+    return w(() => t.disabled, (e) => {
+      e && d();
+    }), () => o("div", {
+      class: [n.element("slider"), {
+        [n.is("dragging")]: i.value
+      }],
+      role: "slider",
+      "aria-label": t.ariaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(t.value),
+      tabindex: t.disabled ? -1 : 0,
+      onMousedown: v,
+      onKeydown: g
+    }, [o("div", {
+      ref: u,
+      class: n.element("slider-track"),
+      style: {
+        background: t.background
+      }
+    }, [o("div", {
+      class: n.element("slider-handler"),
+      style: f.value
+    }, null)])]);
+  }
+});
+export {
+  D as default
+};

package/dist/es/components/color-picker/index.js

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