ant-design-x-vue/es/bubble/style/index.mjs

Craft AI-driven interfaces effortlessly

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