ant-design-x-vue 1.1.1 → 1.2.0

package/es/bubble/Bubble.mjs

@@ -0,0 +1,126 @@
+import { defineComponent as j, mergeDefaults as D, toRef as N, useSlots as H, ref as g, watch as x, unref as k, watchEffect as q, computed as o, createVNode as l, isVNode as z, Fragment as G, toValue as r, mergeProps as J } from "vue";
+import { a as K } from "../attachments/Attachments2.mjs";
+import { Avatar as L } from "ant-design-vue";
+import M from "../_util/hooks/use-x-component-config.mjs";
+import O from "../x-provider/hooks/use-x-provider-context.mjs";
+import "../x-provider/context.mjs";
+import Q from "./hooks/useTypedEffect.mjs";
+import W from "./hooks/useTypingConfig.mjs";
+import Y from "./loading.mjs";
+import Z from "./style/index.mjs";
+import { useBubbleContextInject as U } from "./context.mjs";
+const ce = /* @__PURE__ */ j({
+  name: "AXBubble",
+  __name: "Bubble",
+  props: D({
+    prefixCls: null,
+    rootClassName: null,
+    styles: null,
+    classNames: null,
+    avatar: null,
+    placement: null,
+    loading: {
+      type: Boolean
+    },
+    typing: null,
+    content: null,
+    messageRender: {
+      type: Function
+    },
+    loadingRender: {
+      type: Function
+    },
+    variant: null,
+    shape: null,
+    onTypingComplete: null,
+    header: null,
+    footer: {
+      type: Function
+    }
+  }, {
+    classNames: () => ({}),
+    styles: () => ({}),
+    placement: "start",
+    loading: !1,
+    content: "",
+    variant: "filled"
+  }),
+  setup(e, {
+    expose: $
+  }) {
+    const b = K(e, ["prefixCls", "rootClassName", "classNames", "styles", "avatar", "placement", "loading", "loadingRender", "typing", "content", "messageRender", "variant", "shape", "onTypingComplete", "header", "footer"]);
+    N(e, "content"), N(e, "prefixCls");
+    const a = H(), y = g(e.content);
+    x(() => e.content, () => {
+      y.value = e.content;
+    });
+    const {
+      onUpdate: c
+    } = k(U()), C = g(null), {
+      direction: R,
+      getPrefixCls: T
+    } = O(), t = T("bubble", e.prefixCls), n = M("bubble"), [P, S, V, h] = W(() => e.typing), [i, u] = Q(y, P, S, V), m = g(!1);
+    x(i, () => {
+      c == null || c();
+    }), q(() => {
+      var s;
+      !u.value && !e.loading ? m.value || (m.value = !0, (s = e.onTypingComplete) == null || s.call(e)) : m.value = !1;
+    });
+    const [w, B, E] = Z(() => t), F = o(() => [t, e.rootClassName, n.value.className, B.value, E, `${t}-${e.placement}`, {
+      [`${t}-rtl`]: R.value === "rtl"
+    }, {
+      [`${t}-typing`]: u.value && !e.loading && !e.messageRender && !a.message && !h.value
+    }]), I = o(() => a.avatar ? a.avatar() : z(e.avatar) ? e.avatar : l(L, e.avatar, null)), f = o(() => a.message ? a.message({
+      content: i.value
+    }) : e.messageRender ? e.messageRender(i.value) : i.value), X = o(() => e.loading ? a.loading ? a.loading() : e.loadingRender ? e.loadingRender() : l(Y, {
+      prefixCls: t
+    }, null) : l(G, null, [f.value, u.value && r(h)])), A = o(() => {
+      const s = l("div", {
+        style: {
+          ...n.value.styles.content,
+          ...e.styles.content
+        },
+        class: [`${t}-content`, `${t}-content-${e.variant}`, {
+          [`${t}-content-${e.shape}`]: e.shape
+        }, n.value.classNames.content, e.classNames.content]
+      }, [r(X)]), v = a.header ? a.header() : e.header, d = a.footer ? a.footer({
+        content: f.value
+      }) : typeof e.footer == "function" ? e.footer(f.value) : e.footer;
+      return v || d ? l("div", {
+        class: `${t}-content-wrapper`
+      }, [v && l("div", {
+        class: [`${t}-header`, n.value.classNames.header, e.classNames.header],
+        style: {
+          ...n.value.styles.header,
+          ...e.styles.header
+        }
+      }, [v]), s, d && l("div", {
+        class: [`${t}-footer`, n.value.classNames.footer, e.classNames.footer],
+        style: {
+          ...n.value.styles.footer,
+          ...e.styles.footer
+        }
+      }, [d])]) : s;
+    });
+    return $({
+      nativeElement: C
+    }), () => w(l("div", J({
+      style: {
+        ...n.value.style
+        // ...(style as object),
+      },
+      class: r(F)
+    }, b, {
+      ref: C
+    }), [(a.avatar || e.avatar) && l("div", {
+      style: {
+        ...n.value.styles.avatar,
+        ...e.styles.avatar
+      },
+      class: [`${t}-avatar`, n.value.classNames.avatar, e.classNames.avatar]
+    }, [r(I)]), r(A)]));
+  }
+});
+export {
+  ce as default
+};

package/es/bubble/BubbleList.mjs

@@ -0,0 +1,136 @@
+import { defineComponent as M, mergeDefaults as O, toRef as g, useAttrs as W, mergeProps as h, ref as u, watch as m, watchEffect as j, onWatcherCleanup as q, unref as t, nextTick as F, computed as G, createVNode as x } from "vue";
+import { a as J, c as Q } from "../attachments/Attachments2.mjs";
+import { useEventCallback as Y } from "../_util/hooks/use-event-callback.mjs";
+import Z from "../_util/pick-attrs.mjs";
+import _ from "../x-provider/hooks/use-x-provider-context.mjs";
+import "../x-provider/context.mjs";
+import "ant-design-vue";
+import tt from "./Bubble.mjs";
+import et from "./hooks/useDisplayData.mjs";
+import ot from "./hooks/useListData.mjs";
+import st from "./style/index.mjs";
+import b from "../_util/hooks/use-state.mjs";
+import { BubbleContextProvider as lt } from "./context.mjs";
+const rt = 1, vt = /* @__PURE__ */ M({
+  name: "AXBubbleList",
+  inheritAttrs: !1,
+  __name: "BubbleList",
+  props: O({
+    prefixCls: null,
+    rootClassName: null,
+    items: null,
+    autoScroll: {
+      type: Boolean
+    },
+    roles: null
+  }, {
+    autoScroll: !0
+  }),
+  setup(e, {
+    expose: D
+  }) {
+    const T = J(e, ["prefixCls", "rootClassName", "items", "autoScroll", "roles"]);
+    g(e, "roles"), g(e, "items"), g(e, "prefixCls");
+    const V = W(), A = Z(h(T, V), {
+      attr: !0,
+      aria: !0
+    }), v = u(e.items), S = u(e.roles);
+    m(() => e.items, () => {
+      v.value = e.items;
+    }), m(() => e.roles, () => {
+      S.value = e.roles;
+    });
+    const n = u(null), i = u({}), {
+      getPrefixCls: N
+    } = _(), P = N("bubble", e.prefixCls), R = `${P}-list`, [w, B, L] = st(P), [H, I] = b(!1);
+    j(() => {
+      I(!0), q(() => {
+        I(!1);
+      });
+    });
+    const U = ot(v, S), [a, $] = et(U), [E, f] = b(!0), [d, y] = b(0), z = (o) => {
+      const s = o.target;
+      f(s.scrollHeight - Math.abs(s.scrollTop) - s.clientHeight <= rt);
+    };
+    m(d, () => {
+      e.autoScroll && t(n) && t(E) && F(() => {
+        t(n).scrollTo({
+          top: t(n).scrollHeight
+        });
+      });
+    }), m(() => t(a).length, () => {
+      var o;
+      if (e.autoScroll) {
+        const s = (o = t(a)[t(a).length - 2]) == null ? void 0 : o.key, l = t(i)[s];
+        if (l) {
+          const {
+            nativeElement: r
+          } = l, {
+            top: c = 0,
+            bottom: C = 0
+          } = (r == null ? void 0 : r.getBoundingClientRect()) ?? {}, {
+            top: p,
+            bottom: K
+          } = t(n).getBoundingClientRect();
+          c < K && C > p && (y(t(d) + 1), f(!0));
+        }
+      }
+    });
+    const X = Y(() => {
+      e.autoScroll && y(t(d) + 1);
+    }), k = G(() => ({
+      onUpdate: X
+    }));
+    return D({
+      nativeElement: n,
+      scrollTo: ({
+        key: o,
+        offset: s,
+        behavior: l = "smooth",
+        block: r
+      }) => {
+        if (typeof s == "number")
+          t(n).scrollTo({
+            top: s,
+            behavior: l
+          });
+        else if (o !== void 0) {
+          const c = t(i)[o];
+          if (c) {
+            const C = t(a).findIndex((p) => p.key === o);
+            f(C === t(a).length - 1), c.nativeElement.scrollIntoView({
+              behavior: l,
+              block: r
+            });
+          }
+        }
+      }
+    }), () => w(x(lt, {
+      value: k.value
+    }, {
+      default: () => [x("div", h(A, {
+        class: Q(R, e.rootClassName, B.value, L, {
+          [`${R}-reach-end`]: E.value
+        }),
+        ref: n,
+        onScroll: z
+      }), [t(a).map(({
+        key: o,
+        onTypingComplete: s,
+        ...l
+      }) => x(tt, h(l, {
+        key: o,
+        ref: (r) => {
+          r ? i.value[o] = r : delete i.value[o];
+        },
+        typing: H.value ? l.typing : !1,
+        onTypingComplete: () => {
+          s == null || s(), $(o);
+        }
+      }), null))])]
+    }));
+  }
+});
+export {
+  vt as default
+};

package/es/bubble/context.mjs

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

package/es/bubble/hooks/useDisplayData.mjs

@@ -0,0 +1,36 @@
+import { computed as s, unref as e, watch as f } from "vue";
+import { useEventCallback as c } from "../../_util/hooks/use-event-callback.mjs";
+import d from "../../_util/hooks/use-state.mjs";
+function h(a) {
+  const [r, o] = d(a.value.length), t = s(() => a.value.slice(0, e(r))), i = s(() => {
+    const l = e(t)[e(t).length - 1];
+    return l ? l.key : null;
+  });
+  f(
+    a,
+    () => {
+      var l;
+      if (!(e(t).length && e(t).every((n, y) => {
+        var u;
+        return n.key === ((u = a.value[y]) == null ? void 0 : u.key);
+      }))) {
+        if (e(t).length === 0)
+          o(1);
+        else
+          for (let n = 0; n < e(t).length; n += 1)
+            if (e(t)[n].key !== ((l = a.value[n]) == null ? void 0 : l.key)) {
+              o(n);
+              break;
+            }
+      }
+    },
+    { immediate: !0, deep: !0 }
+  );
+  const p = c((l) => {
+    l === e(i) && o(e(r) + 1);
+  });
+  return [t, p];
+}
+export {
+  h as default
+};

package/es/bubble/hooks/useListData.mjs

@@ -0,0 +1,18 @@
+import { computed as a } from "vue";
+function p(u, e) {
+  const o = (t, r) => {
+    var n;
+    return typeof e.value == "function" ? e.value(t, r) : e ? ((n = e.value) == null ? void 0 : n[t.role]) || {} : {};
+  };
+  return a(() => (u.value || []).map((t, r) => {
+    const n = t.key ?? `preset_${r}`;
+    return {
+      ...o(t, r),
+      ...t,
+      key: n
+    };
+  }));
+}
+export {
+  p as default
+};

package/es/bubble/hooks/useTypedEffect.mjs

@@ -0,0 +1,24 @@
+import p from "../../_util/hooks/use-state.mjs";
+import { computed as s, watch as f, unref as l, onWatcherCleanup as n } from "vue";
+function u(e) {
+  return typeof e == "string";
+}
+const h = (e, t, g, m) => {
+  const [d, o] = p(""), [a, i] = p(1), v = s(() => t.value && u(e.value));
+  return f(e, () => {
+    const r = l(d);
+    o(e.value), !v.value && u(e.value) ? i(e.value.length) : u(e.value) && u(r) && e.value.indexOf(r) !== 0 && i(1);
+  }), f([a, t, e], () => {
+    if (v.value && u(e.value) && l(a) < e.value.length) {
+      const r = setTimeout(() => {
+        i(l(a) + g.value);
+      }, m.value);
+      n(() => {
+        clearTimeout(r);
+      });
+    }
+  }, { immediate: !0 }), [s(() => v.value && u(e.value) ? e.value.slice(0, l(a)) : e.value), s(() => v.value && u(e.value) && l(a) < e.value.length)];
+};
+export {
+  h as default
+};

package/es/bubble/hooks/useTypingConfig.mjs

@@ -0,0 +1,24 @@
+import { computed as e, toValue as o } from "vue";
+function i(n) {
+  const r = e(() => !!o(n)), f = {
+    step: 1,
+    interval: 50,
+    // set default suffix is empty
+    suffix: null
+  }, t = e(() => {
+    const u = o(n);
+    return {
+      ...f,
+      ...typeof u == "object" ? u : {}
+    };
+  });
+  return [
+    r,
+    e(() => t.value.step),
+    e(() => t.value.interval),
+    e(() => t.value.suffix)
+  ];
+}
+export {
+  i as default
+};

package/es/bubble/index.mjs

@@ -0,0 +1,10 @@
+import s from "./Bubble.mjs";
+import t from "./BubbleList.mjs";
+const m = Object.assign(s, {
+  List: t
+});
+export {
+  m as Bubble,
+  t as BubbleList,
+  m as default
+};

package/es/bubble/interface.mjs

@@ -0,0 +1 @@
+

package/es/bubble/loading.mjs

@@ -0,0 +1,25 @@
+import { defineComponent as i, createVNode as l } from "vue";
+const n = /* @__PURE__ */ i({
+  name: "AXBubbleLoading",
+  __name: "loading",
+  props: {
+    prefixCls: null
+  },
+  setup(e) {
+    return () => l("span", {
+      class: `${e.prefixCls}-dot`
+    }, [l("i", {
+      class: `${e.prefixCls}-dot-item`,
+      key: "item-1"
+    }, null), l("i", {
+      class: `${e.prefixCls}-dot-item`,
+      key: "item-2"
+    }, null), l("i", {
+      class: `${e.prefixCls}-dot-item`,
+      key: "item-3"
+    }, null)]);
+  }
+});
+export {
+  n as default
+};

package/es/bubble/style/content.mjs

@@ -0,0 +1,59 @@
+import "../../_util/cssinjs/StyleContext.mjs";
+import "vue";
+import { unit as i } from "../../_util/cssinjs/util.mjs";
+import "../../_util/cssinjs/theme/ThemeCache.mjs";
+import "../../_util/warning.mjs";
+import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
+const g = (r) => {
+  const { componentCls: d, paddingSM: o, padding: n } = r;
+  return {
+    [d]: {
+      [`${d}-content`]: {
+        // Shared: filled, outlined, shadow
+        "&-filled,&-outlined,&-shadow": {
+          padding: `${i(o)} ${i(n)}`,
+          borderRadius: r.borderRadiusLG
+        },
+        // Filled:
+        "&-filled": {
+          backgroundColor: r.colorFillContent
+        },
+        // Outlined:
+        "&-outlined": {
+          border: `1px solid ${r.colorBorderSecondary}`
+        },
+        // Shadow:
+        "&-shadow": {
+          boxShadow: r.boxShadowTertiary
+        }
+      }
+    }
+  };
+}, h = (r) => {
+  const { componentCls: d, fontSize: o, lineHeight: n, paddingSM: a, padding: l, calc: e } = r, s = e(o).mul(n).div(2).add(a).equal(), t = `${d}-content`;
+  return {
+    [d]: {
+      [t]: {
+        // round:
+        "&-round": {
+          borderRadius: {
+            _skip_check_: !0,
+            value: s
+          },
+          paddingInline: e(l).mul(1.25).equal()
+        }
+      },
+      // corner:
+      [`&-start ${t}-corner`]: {
+        borderStartStartRadius: r.borderRadiusXS
+      },
+      [`&-end ${t}-corner`]: {
+        borderStartEndRadius: r.borderRadiusXS
+      }
+    }
+  };
+};
+export {
+  h as genShapeStyle,
+  g as genVariantStyle
+};

package/es/bubble/style/index.mjs

@@ -0,0 +1,148 @@
+import "../../_util/cssinjs/StyleContext.mjs";
+import "vue";
+import { unit as m } from "../../_util/cssinjs/util.mjs";
+import r from "../../_util/cssinjs/Keyframes.mjs";
+import "../../_util/cssinjs/theme/ThemeCache.mjs";
+import "../../_util/warning.mjs";
+import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
+import { merge as s } from "../../_util/cssinjs-utils/util/statistic.mjs";
+import { genStyleHooks as c } from "../../theme/genStyleUtils.mjs";
+import { genVariantStyle as p, genShapeStyle as d } from "./content.mjs";
+import f from "./list.mjs";
+const g = new r("loadingMove", {
+  "0%": {
+    transform: "translateY(0)"
+  },
+  "10%": {
+    transform: "translateY(4px)"
+  },
+  "20%": {
+    transform: "translateY(0)"
+  },
+  "30%": {
+    transform: "translateY(-4px)"
+  },
+  "40%": {
+    transform: "translateY(0)"
+  }
+}), u = new r("cursorBlink", {
+  "0%": {
+    opacity: 1
+  },
+  "50%": {
+    opacity: 0
+  },
+  "100%": {
+    opacity: 1
+  }
+}), h = (n) => {
+  const { componentCls: t, fontSize: e, lineHeight: o, paddingSM: i, colorText: l, calc: a } = n;
+  return {
+    [t]: {
+      display: "flex",
+      columnGap: i,
+      [`&${t}-end`]: {
+        justifyContent: "end",
+        flexDirection: "row-reverse",
+        [`& ${t}-content-wrapper`]: {
+          alignItems: "flex-end"
+        }
+      },
+      [`&${t}-rtl`]: {
+        direction: "rtl"
+      },
+      [`&${t}-typing ${t}-content:last-child::after`]: {
+        content: '"|"',
+        fontWeight: 900,
+        userSelect: "none",
+        opacity: 1,
+        marginInlineStart: "0.1em",
+        animationName: u,
+        animationDuration: "0.8s",
+        animationIterationCount: "infinite",
+        animationTimingFunction: "linear"
+      },
+      // ============================ Avatar =============================
+      [`& ${t}-avatar`]: {
+        display: "inline-flex",
+        justifyContent: "center",
+        alignSelf: "flex-start"
+      },
+      // ======================== Header & Footer ========================
+      [`& ${t}-header, & ${t}-footer`]: {
+        fontSize: e,
+        lineHeight: o,
+        color: n.colorText
+      },
+      [`& ${t}-header`]: {
+        marginBottom: n.paddingXXS
+      },
+      [`& ${t}-footer`]: {
+        marginTop: i
+      },
+      // =========================== Content =============================
+      [`& ${t}-content-wrapper`]: {
+        flex: "auto",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        minWidth: 0,
+        maxWidth: "100%"
+      },
+      [`& ${t}-content`]: {
+        position: "relative",
+        boxSizing: "border-box",
+        minWidth: 0,
+        maxWidth: "100%",
+        color: l,
+        fontSize: n.fontSize,
+        lineHeight: n.lineHeight,
+        minHeight: a(i).mul(2).add(a(o).mul(e)).equal(),
+        wordBreak: "break-word",
+        [`& ${t}-dot`]: {
+          position: "relative",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          columnGap: n.marginXS,
+          padding: `0 ${m(n.paddingXXS)}`,
+          "&-item": {
+            backgroundColor: n.colorPrimary,
+            borderRadius: "100%",
+            width: 4,
+            height: 4,
+            animationName: g,
+            animationDuration: "2s",
+            animationIterationCount: "infinite",
+            animationTimingFunction: "linear",
+            "&:nth-child(1)": {
+              animationDelay: "0s"
+            },
+            "&:nth-child(2)": {
+              animationDelay: "0.2s"
+            },
+            "&:nth-child(3)": {
+              animationDelay: "0.4s"
+            }
+          }
+        }
+      }
+    }
+  };
+}, y = () => ({}), H = c(
+  "Bubble",
+  (n) => {
+    const t = s(n, {});
+    return [
+      h(t),
+      f(t),
+      p(t),
+      d(t)
+    ];
+  },
+  y
+);
+export {
+  H as default,
+  y as prepareComponentToken
+};

package/es/bubble/style/list.mjs

@@ -0,0 +1,14 @@
+const o = (e) => {
+  const { componentCls: t, padding: l } = e;
+  return {
+    [`${t}-list`]: {
+      display: "flex",
+      flexDirection: "column",
+      gap: l,
+      overflowY: "auto"
+    }
+  };
+};
+export {
+  o as default
+};