ant-design-x-vue 1.1.1 → 1.2.0

package/es/prompts/style/index.mjs

@@ -0,0 +1,143 @@
+import { genStyleHooks as t } from "../../theme/genStyleUtils.mjs";
+import "../../_util/cssinjs/StyleContext.mjs";
+import "vue";
+import { unit as o } from "../../_util/cssinjs/util.mjs";
+import "../../_util/cssinjs/theme/ThemeCache.mjs";
+import "../../_util/warning.mjs";
+import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
+import { merge as l } from "../../_util/cssinjs-utils/util/statistic.mjs";
+const n = (r) => {
+  const { componentCls: e } = r;
+  return {
+    [e]: {
+      // ======================== Prompt ========================
+      "&, & *": {
+        boxSizing: "border-box"
+      },
+      maxWidth: "100%",
+      [`&${e}-rtl`]: {
+        direction: "rtl"
+      },
+      [`& ${e}-title`]: {
+        marginBlockStart: 0,
+        fontWeight: "normal",
+        color: r.colorTextTertiary
+      },
+      [`& ${e}-list`]: {
+        display: "flex",
+        gap: r.paddingSM,
+        overflowX: "scroll",
+        "&::-webkit-scrollbar": {
+          display: "none"
+        },
+        listStyle: "none",
+        paddingInlineStart: 0,
+        marginBlock: 0,
+        alignItems: "stretch",
+        "&-wrap": {
+          flexWrap: "wrap"
+        },
+        "&-vertical": {
+          flexDirection: "column",
+          alignItems: "flex-start"
+        }
+      },
+      // ========================= Item =========================
+      [`${e}-item`]: {
+        flex: "none",
+        display: "flex",
+        gap: r.paddingXS,
+        height: "auto",
+        paddingBlock: r.paddingSM,
+        paddingInline: r.padding,
+        alignItems: "flex-start",
+        justifyContent: "flex-start",
+        background: r.colorBgContainer,
+        borderRadius: r.borderRadiusLG,
+        transition: ["border", "background"].map((i) => `${i} ${r.motionDurationSlow}`).join(","),
+        border: `${o(r.lineWidth)} ${r.lineType} ${r.colorBorderSecondary}`,
+        [`&:not(${e}-item-has-nest)`]: {
+          "&:hover": {
+            cursor: "pointer",
+            background: r.colorFillTertiary
+          },
+          "&:active": {
+            background: r.colorFill
+          }
+        },
+        [`${e}-content`]: {
+          flex: "auto",
+          minWidth: 0,
+          display: "flex",
+          gap: r.paddingXXS,
+          flexDirection: "column",
+          alignItems: "flex-start"
+        },
+        [`${e}-icon, ${e}-label, ${e}-desc`]: {
+          margin: 0,
+          padding: 0,
+          fontSize: r.fontSize,
+          lineHeight: r.lineHeight,
+          textAlign: "start",
+          whiteSpace: "normal"
+        },
+        [`${e}-label`]: {
+          color: r.colorTextHeading,
+          fontWeight: 500
+        },
+        [`${e}-label + ${e}-desc`]: {
+          color: r.colorTextTertiary
+        },
+        // Disabled
+        [`&${e}-item-disabled`]: {
+          pointerEvents: "none",
+          background: r.colorBgContainerDisabled,
+          [`${e}-label, ${e}-desc`]: {
+            color: r.colorTextTertiary
+          }
+        }
+      }
+    }
+  };
+}, a = (r) => {
+  const { componentCls: e } = r;
+  return {
+    [e]: {
+      // ========================= Parent =========================
+      [`${e}-item-has-nest`]: {
+        [`> ${e}-content`]: {
+          // gap: token.paddingSM,
+          [`> ${e}-label`]: {
+            fontSize: r.fontSizeLG,
+            lineHeight: r.lineHeightLG
+          }
+        }
+      },
+      // ========================= Nested =========================
+      [`&${e}-nested`]: {
+        marginTop: r.paddingXS,
+        // ======================== Prompt ========================
+        alignSelf: "stretch",
+        [`${e}-list`]: {
+          alignItems: "stretch"
+        },
+        // ========================= Item =========================
+        [`${e}-item`]: {
+          border: 0,
+          background: r.colorFillQuaternary
+        }
+      }
+    }
+  };
+}, c = () => ({}), u = t(
+  "Prompts",
+  (r) => {
+    const e = l(r, {});
+    return [n(e), a(e)];
+  },
+  c
+);
+export {
+  u as default,
+  c as prepareComponentToken
+};

package/es/sender/Sender.mjs

@@ -0,0 +1,251 @@
+import { defineComponent as ee, toRef as te, useSlots as ne, computed as a, ref as d, watch as ae, createVNode as o, mergeProps as oe } from "vue";
+import { a as le, c } from "../attachments/Attachments2.mjs";
+import { Input as se, Flex as ie } from "ant-design-vue";
+import ue from "../_util/pick-attrs.mjs";
+import re from "../_util/hooks/use-x-component-config.mjs";
+import ce from "../x-provider/hooks/use-x-provider-context.mjs";
+import "../x-provider/context.mjs";
+import { SenderHeaderContextProvider as fe } from "./context.mjs";
+import { ActionButtonContextProvider as de } from "./components/ActionButton/context.mjs";
+import me from "./components/ClearButton.mjs";
+import D from "./components/LoadingButton.mjs";
+import K from "./components/SendButton.mjs";
+import R from "./components/SpeechButton/index.mjs";
+import ve from "./style/index.mjs";
+import Ce from "./useSpeech.mjs";
+import ye from "../_util/getValue.mjs";
+const Ae = /* @__PURE__ */ ee({
+  name: "AXSender",
+  __name: "Sender",
+  props: {
+    onKeyPress: {},
+    onFocus: {},
+    onBlur: {},
+    prefixCls: {},
+    defaultValue: {},
+    value: {},
+    loading: {
+      type: Boolean
+    },
+    placeholder: {},
+    readOnly: {
+      type: Boolean
+    },
+    submitType: {
+      type: [String, Boolean],
+      default: "enter"
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    onSubmit: {},
+    onChange: {},
+    onCancel: {},
+    onKeyDown: {},
+    onPaste: {},
+    onPasteFile: {},
+    components: {},
+    styles: {
+      default: () => ({})
+    },
+    rootClassName: {},
+    classNames: {
+      default: () => ({})
+    },
+    style: {},
+    className: {},
+    actions: {
+      type: [Object, Function, Boolean],
+      default: void 0
+    },
+    allowSpeech: {},
+    prefix: {},
+    footer: {},
+    header: {},
+    autoSize: {
+      default: () => ({
+        maxRows: 8
+      })
+    }
+  },
+  emits: ["update:value"],
+  setup(e, {
+    expose: I,
+    emit: F
+  }) {
+    const V = le(e, ["prefixCls", "styles", "classNames", "className", "rootClassName", "style", "defaultValue", "value", "placeholder", "readOnly", "submitType", "onSubmit", "loading", "components", "onCancel", "onChange", "actions", "onKeyPress", "onKeyDown", "disabled", "allowSpeech", "prefix", "footer", "header", "onPaste", "onPasteFile", "autoSize"]);
+    te(e, "prefixCls");
+    function A(t, n, r) {
+      return ye(t, n) || r;
+    }
+    const m = {
+      SendButton: K,
+      ClearButton: me,
+      LoadingButton: D,
+      SpeechButton: R
+    }, E = F, i = ne(), {
+      direction: O,
+      getPrefixCls: T
+    } = ce(), l = a(() => T("sender", e.prefixCls)), v = d(null), f = d(null), s = re("sender"), g = a(() => `${l.value}-input`), [k, z, X] = ve(l.value), L = a(() => c(l.value, s.value.className, e.className, e.rootClassName, z.value, X, {
+      [`${l.value}-rtl`]: O.value === "rtl",
+      [`${l.value}-disabled`]: e.disabled
+    })), M = a(() => `${l.value}-actions-btn`), S = a(() => `${l.value}-actions-list`), u = d(e.value ?? e.defaultValue ?? ""), x = (t) => {
+      u.value = t;
+    };
+    ae(() => e.value, () => {
+      x(e.value);
+    });
+    const C = (t, n) => {
+      x(t), E("update:value", t), e.onChange && e.onChange(t, n);
+    }, {
+      speechPermission: j,
+      triggerSpeech: b,
+      recording: q
+    } = Ce((t) => {
+      C(`${u.value} ${t}`);
+    }, () => e.allowSpeech), H = A(e.components, ["input"], se.TextArea), G = a(() => ue(V, {
+      attr: !0,
+      aria: !0,
+      data: !0
+    })), J = a(() => ({
+      ...G.value,
+      ref: f
+    })), y = () => {
+      u.value && e.onSubmit && !e.loading && e.onSubmit(u.value);
+    }, Q = () => {
+      C("");
+    }, h = d(!1), U = () => {
+      h.value = !0;
+    }, W = () => {
+      h.value = !1;
+    }, Y = (t) => {
+      const n = t.key === "Enter" && !h.value;
+      switch (e.submitType) {
+        case "enter":
+          n && !t.shiftKey && (t.preventDefault(), y());
+          break;
+        case "shiftEnter":
+          n && t.shiftKey && (t.preventDefault(), y());
+          break;
+      }
+      e.onKeyPress && e.onKeyPress(t);
+    }, Z = (t) => {
+      var r, B;
+      const n = (r = t.clipboardData) == null ? void 0 : r.files;
+      n != null && n.length && e.onPasteFile && (e.onPasteFile(n[0], n), t.preventDefault()), (B = e.onPaste) == null || B.call(e, t);
+    }, p = (t) => {
+      var n, r;
+      t.target !== ((n = v.value) == null ? void 0 : n.querySelector(`.${g.value}`)) && t.preventDefault(), (r = f.value) == null || r.focus();
+    }, P = a(() => {
+      let t = o(ie, {
+        class: `${S.value}-presets`
+      }, {
+        default: () => [e.allowSpeech && o(R, null, null), e.loading ? o(D, null, null) : o(K, null, null)]
+      });
+      const n = {
+        components: m
+      };
+      return i.actions ? t = i.actions({
+        ori: t,
+        info: n
+      }) : typeof e.actions == "function" ? t = e.actions(t, n) : (e.actions || e.actions === !1) && (t = e.actions), t;
+    }), _ = a(() => ({
+      prefixCls: M.value,
+      onSend: y,
+      onSendDisabled: !u.value,
+      onClear: Q,
+      onClearDisabled: !u.value,
+      onCancel: e.onCancel,
+      onCancelDisabled: !e.loading,
+      onSpeech: () => b(!1),
+      onSpeechDisabled: !j.value,
+      speechRecording: q.value,
+      disabled: e.disabled
+    })), N = a(() => {
+      let t = null;
+      const n = {
+        components: m
+      };
+      return i.footer ? t = i.footer({
+        info: n
+      }) : typeof e.footer == "function" ? t = e.footer({
+        components: m
+      }) : e.footer && (t = e.footer), t;
+    }), $ = a(() => i.header ? i.header() : e.header), w = a(() => i.prefix ? i.prefix() : e.prefix);
+    return I({
+      nativeElement: v.value,
+      // @ts-expect-error
+      focus: (t) => {
+        var n;
+        return (n = f.value) == null ? void 0 : n.focus(t);
+      },
+      // @ts-expect-error
+      blur: () => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.blur();
+      }
+    }), () => k(o("div", {
+      ref: v,
+      class: L.value,
+      style: {
+        ...s.value.style,
+        ...e.style
+      }
+    }, [$.value && o(fe, {
+      value: {
+        prefixCls: l.value
+      }
+    }, {
+      default: () => [$.value]
+    }), o(de, {
+      value: _.value
+    }, {
+      default: () => [o("div", {
+        class: `${l.value}-content`,
+        onMousedown: p
+      }, [w.value && o("div", {
+        class: c(`${l.value}-prefix`, s.value.classNames.prefix, e.classNames.prefix),
+        style: {
+          ...s.value.styles.prefix,
+          ...e.styles.prefix
+        }
+      }, [w.value]), o(H, oe(J.value, {
+        disabled: e.disabled,
+        style: {
+          ...s.value.styles.input,
+          ...e.styles.input
+        },
+        class: c(g.value, s.value.classNames.input, e.classNames.input),
+        autoSize: e.autoSize,
+        value: u.value,
+        onChange: (t) => {
+          C(t.target.value, t), b(!0);
+        },
+        onPressEnter: Y,
+        onCompositionstart: U,
+        onCompositionend: W,
+        onKeydown: e.onKeyDown,
+        placeholder: e.placeholder,
+        onPaste: Z,
+        bordered: !1,
+        readOnly: e.readOnly
+      }), null), P.value && o("div", {
+        class: c(S.value, s.value.classNames.actions, e.classNames.actions),
+        style: {
+          ...s.value.styles.actions,
+          ...e.styles.actions
+        }
+      }, [P.value])]), N.value && o("div", {
+        class: c(`${l.value}-footer`, s.value.classNames.footer, e.classNames.footer),
+        style: {
+          ...s.value.styles.footer,
+          ...e.styles.footer
+        }
+      }, [N.value])]
+    })]));
+  }
+});
+export {
+  Ae as default
+};

package/es/sender/SenderHeader.mjs

@@ -0,0 +1,82 @@
+import { defineComponent as u, mergeDefaults as m, toRef as d, useSlots as r, computed as f, useAttrs as v, createVNode as l, withDirectives as y, mergeProps as h, vShow as C } from "vue";
+import { Button as N } from "ant-design-vue";
+import { c as n } from "../attachments/Attachments2.mjs";
+import { useSenderHeaderContextInject as x } from "./context.mjs";
+import "../transition-collapse/index.mjs";
+import S from "../transition-collapse/TransitionCollapse.mjs";
+import { h as $ } from "../attachments/FileList/FileList2.mjs";
+const w = /* @__PURE__ */ u({
+  name: "AXSenderHeader",
+  inheritAttrs: !1,
+  __name: "SenderHeader",
+  props: m({
+    forceRender: {
+      type: Boolean
+    },
+    open: {
+      type: Boolean
+    },
+    onOpenChange: {
+      type: Function
+    },
+    title: null,
+    children: null,
+    className: null,
+    style: null,
+    classNames: null,
+    styles: null,
+    closable: {
+      type: Boolean
+    }
+  }, {
+    classNames: () => ({}),
+    styles: () => ({})
+  }),
+  setup(e) {
+    d(e, "classNames");
+    const a = r(), s = x(), t = f(() => `${s.value.prefixCls}-header`), i = v();
+    return () => l(S, {
+      prefixCls: s.value.prefixCls
+    }, {
+      default: () => {
+        var c;
+        return [e.open || e.forceRender ? y(l("div", h(i, {
+          class: n(t.value, e.className),
+          style: {
+            ...e.style
+          }
+        }), [(e.closable !== !1 || e.title) && l("div", {
+          class: (
+            // We follow antd naming standard here.
+            // So the header part is use `-header` suffix.
+            // Though its little bit weird for double `-header`.
+            n(`${t.value}-header`, e.classNames.header)
+          ),
+          style: {
+            ...e.styles.header
+          }
+        }, [l("div", {
+          class: `${t.value}-title`
+        }, [e.title]), e.closable !== !1 && l("div", {
+          class: `${t.value}-close`
+        }, [l(N, {
+          type: "text",
+          icon: l($, null, null),
+          size: "small",
+          onClick: () => {
+            var o;
+            (o = e.onOpenChange) == null || o.call(e, !e.open);
+          }
+        }, null)])]), a.default && l("div", {
+          class: n(`${t.value}-content`, e.classNames.content),
+          style: {
+            ...e.styles.content
+          }
+        }, [(c = a.default) == null ? void 0 : c.call(a)])]), [[C, e.open]]) : null];
+      }
+    });
+  }
+});
+export {
+  w as default
+};

package/es/sender/StopLoading.mjs

@@ -0,0 +1,52 @@
+import { defineComponent as o, createVNode as r, createTextVNode as n } from "vue";
+const a = /* @__PURE__ */ o({
+  name: "AXSenderStopLoading",
+  __name: "StopLoading",
+  props: {
+    className: null
+  },
+  setup(t) {
+    const e = t;
+    return () => r("svg", {
+      color: "currentColor",
+      viewBox: "0 0 1000 1000",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      class: e.className
+    }, [r("title", null, [n("Stop Loading")]), r("rect", {
+      fill: "currentColor",
+      height: "250",
+      rx: "24",
+      ry: "24",
+      width: "250",
+      x: "375",
+      y: "375"
+    }, null), r("circle", {
+      cx: "500",
+      cy: "500",
+      fill: "none",
+      r: "450",
+      stroke: "currentColor",
+      "stroke-width": "100",
+      opacity: "0.45"
+    }, null), r("circle", {
+      cx: "500",
+      cy: "500",
+      fill: "none",
+      r: "450",
+      stroke: "currentColor",
+      "stroke-width": "100",
+      "stroke-dasharray": "600 9999999"
+    }, [r("animateTransform", {
+      attributeName: "transform",
+      dur: "1s",
+      from: "0 500 500",
+      repeatCount: "indefinite",
+      to: "360 500 500",
+      type: "rotate"
+    }, null)])]);
+  }
+});
+export {
+  a as default
+};

package/es/sender/components/ActionButton/context.mjs

@@ -0,0 +1,31 @@
+import { shallowRef as i, defineComponent as c, computed as r, provide as p, watch as a, unref as d, triggerRef as m, inject as f } from "vue";
+import { objectType as x } from "../../../_util/type.mjs";
+const u = Symbol("ActionButtonContext"), o = i(), A = (t) => {
+  p(u, t), a(
+    t,
+    () => {
+      o.value = d(t), m(o);
+    },
+    { immediate: !0, deep: !0 }
+  );
+}, l = () => f(
+  u,
+  r(() => o.value || {})
+), v = c({
+  props: {
+    value: x()
+  },
+  setup(t, { slots: e }) {
+    return A(r(() => t.value)), () => {
+      var n;
+      return (n = e.default) == null ? void 0 : n.call(e);
+    };
+  }
+});
+export {
+  v as ActionButtonContextProvider,
+  v as default,
+  o as globalActionButtonContextApi,
+  l as useActionButtonContextInject,
+  A as useActionButtonContextProvider
+};

package/es/sender/components/ActionButton/index.mjs

@@ -0,0 +1,65 @@
+import { defineComponent as d, toRef as u, useSlots as f, computed as s, createVNode as m, mergeProps as y } from "vue";
+import { a as b, c as p } from "../../../attachments/Attachments2.mjs";
+import { Button as C } from "ant-design-vue";
+import { useActionButtonContextInject as x } from "./context.mjs";
+const A = /* @__PURE__ */ d({
+  name: "AXSenderActionButton",
+  __name: "index",
+  props: {
+    action: {},
+    prefixCls: {},
+    type: {
+      default: "text"
+    },
+    htmlType: {},
+    shape: {},
+    size: {},
+    loading: {
+      type: [Boolean, Object]
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    ghost: {
+      type: Boolean
+    },
+    block: {
+      type: Boolean
+    },
+    danger: {
+      type: Boolean
+    },
+    icon: {},
+    href: {},
+    target: {},
+    title: {},
+    onClick: {},
+    onMousedown: {}
+  },
+  setup(e) {
+    const c = b(e, ["action", "type", "disabled", "onClick"]);
+    u(e, "disabled");
+    const r = f(), n = x(), l = s(() => {
+      var o;
+      const a = n.value.disabled, t = (o = n.value) == null ? void 0 : o[`${e.action}Disabled`];
+      return e.disabled ?? a ?? t;
+    }), i = s(() => n.value.prefixCls);
+    return () => m(C, y({
+      type: e.type
+    }, c, {
+      onClick: (a) => {
+        var t, o;
+        l.value || ((o = (t = n.value) == null ? void 0 : t[e.action]) == null || o.call(t), e.onClick && !Array.isArray(e.onClick) && e.onClick(a));
+      },
+      class: p(i.value, {
+        [`${i.value}-disabled`]: l.value
+      })
+    }), {
+      icon: () => r.default()
+    });
+  }
+});
+export {
+  A as default
+};

package/es/sender/components/ClearButton.mjs

@@ -0,0 +1,41 @@
+import { defineComponent as r, mergeDefaults as t, createVNode as e, mergeProps as o } from "vue";
+import { a as u } from "../../attachments/Attachments2.mjs";
+import a from "./ActionButton/index.mjs";
+import { i as s } from "../../attachments/FileList/FileList2.mjs";
+const f = /* @__PURE__ */ r({
+  name: "AXSenderClearButton",
+  __name: "ClearButton",
+  props: t({
+    prefixCls: null,
+    type: null,
+    htmlType: null,
+    shape: null,
+    size: null,
+    loading: null,
+    disabled: null,
+    ghost: null,
+    block: null,
+    danger: null,
+    icon: null,
+    href: null,
+    target: null,
+    title: null,
+    onClick: null,
+    onMousedown: null
+  }, {
+    disabled: void 0
+  }),
+  setup(l) {
+    const n = u(l, ["disabled"]);
+    return () => e(a, o({
+      disabled: l.disabled
+    }, n, {
+      action: "onClear"
+    }), {
+      default: () => [e(s, null, null)]
+    });
+  }
+});
+export {
+  f as default
+};