ant-design-x-vue/es/thought-chain/style/index.mjs

Craft AI-driven interfaces effortlessly

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as d } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as h } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { genStyleHooks as g } from "../../theme/genStyleUtils.mjs";
import "../../transition-collapse/index.mjs";
import { THOUGHT_CHAIN_ITEM_STATUS as m } from "../interface.mjs";
import { genTransitionCollapseStyle as u } from "../../transition-collapse/style/index.mjs";
const f = (e) => {
  const { componentCls: t } = e, i = `${t}-item`, o = {
    [m.PENDING]: e.colorPrimaryText,
    [m.SUCCESS]: e.colorSuccessText,
    [m.ERROR]: e.colorErrorText
  }, l = Object.keys(o);
  return l.reduce((c, r) => {
    const s = o[r];
    return l.forEach((a) => {
      const S = `& ${i}-${r}-${a}`, p = r === a ? {} : {
        backgroundColor: "none !important",
        backgroundImage: `linear-gradient(${s}, ${o[a]})`
      };
      c[S] = {
        [`& ${i}-icon, & > *::before`]: {
          backgroundColor: `${s} !important`
        },
        "& > :last-child::before": p
      };
    }), c;
  }, {});
}, z = (e) => {
  const { calc: t, componentCls: i } = e, o = `${i}-item`, l = {
    content: '""',
    width: t(e.lineWidth).mul(2).equal(),
    display: "block",
    position: "absolute",
    insetInlineEnd: "none",
    backgroundColor: e.colorTextPlaceholder
  };
  return {
    "& > :last-child > :last-child": {
      "&::before": {
        display: "none !important"
      },
      [`&${o}-footer`]: {
        "&::before": {
          display: "block !important",
          bottom: 0
        }
      }
    },
    [`& > ${o}`]: {
      [`& ${o}-header, & ${o}-content, & ${o}-footer`]: {
        position: "relative",
        "&::before": {
          bottom: t(e.itemGap).mul(-1).equal()
        }
      },
      [`& ${o}-header, & ${o}-content`]: {
        marginInlineStart: t(e.itemSize).mul(-1).equal(),
        "&::before": {
          ...l,
          insetInlineStart: t(e.itemSize).div(2).sub(e.lineWidth).equal()
        }
      },
      [`& ${o}-header::before`]: {
        top: e.itemSize,
        bottom: t(e.itemGap).mul(-2).equal()
      },
      [`& ${o}-content::before`]: {
        top: "100%"
      },
      [`& ${o}-footer::before`]: {
        ...l,
        top: 0,
        insetInlineStart: t(e.itemSize).div(-2).sub(e.lineWidth).equal()
      }
    }
  };
}, $ = (e) => {
  const { componentCls: t } = e, i = `${t}-item`;
  return {
    [i]: {
      display: "flex",
      flexDirection: "column",
      [`& ${i}-collapsible`]: {
        cursor: "pointer"
      },
      [`& ${i}-header`]: {
        display: "flex",
        marginBottom: e.itemGap,
        gap: e.itemGap,
        alignItems: "flex-start",
        [`& ${i}-icon`]: {
          height: e.itemSize,
          width: e.itemSize,
          fontSize: e.itemFontSize,
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        },
        [`& ${i}-extra`]: {
          height: e.itemSize,
          maxHeight: e.itemSize
        },
        [`& ${i}-header-box`]: {
          flex: 1,
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
          [`& ${i}-title`]: {
            height: e.itemSize,
            lineHeight: `${d(e.itemSize)}`,
            maxHeight: e.itemSize,
            fontSize: e.itemFontSize,
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            [`& ${i}-collapse-icon`]: {
              marginInlineEnd: e.marginXS
            }
          },
          [`& ${i}-desc`]: {
            fontSize: e.itemFontSize,
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap"
          }
        }
      },
      [`& ${i}-content`]: {
        [`& ${i}-content-hidden`]: {
          display: "none"
        },
        [`& ${i}-content-box`]: {
          padding: e.itemGap,
          display: "inline-block",
          maxWidth: `calc(100% - ${e.itemSize})`,
          borderRadius: e.borderRadiusLG,
          backgroundColor: e.colorBgContainer,
          border: `${d(e.lineWidth)} ${e.lineType} ${e.colorBorderSecondary}`
        }
      },
      [`& ${i}-footer`]: {
        marginTop: e.itemGap,
        display: "inline-flex"
      }
    }
  };
}, n = (e, t = "middle") => {
  const { componentCls: i } = e, o = {
    large: {
      itemSize: e.itemSizeLG,
      itemGap: e.itemGapLG,
      itemFontSize: e.itemFontSizeLG
    },
    middle: {
      itemSize: e.itemSize,
      itemGap: e.itemGap,
      itemFontSize: e.itemFontSize
    },
    small: {
      itemSize: e.itemSizeSM,
      itemGap: e.itemGapSM,
      itemFontSize: e.itemFontSizeSM
    }
  }[t];
  return {
    [`&${i}-${t}`]: {
      paddingInlineStart: o.itemSize,
      gap: o.itemGap,
      ...$({
        ...e,
        ...o
      }),
      ...z({
        ...e,
        ...o
      })
    }
  };
}, b = (e) => {
  const { componentCls: t } = e;
  return {
    [t]: {
      display: "flex",
      flexDirection: "column",
      ...f(e),
      ...n(e),
      ...n(e, "large"),
      ...n(e, "small"),
      [`&${t}-rtl`]: {
        direction: "rtl"
      }
    }
  };
}, L = g("ThoughtChain", (e) => {
  const t = h(e, {
    // small size tokens
    itemFontSizeSM: e.fontSizeSM,
    itemSizeSM: e.calc(e.controlHeightXS).add(e.controlHeightSM).div(2).equal(),
    itemGapSM: e.marginSM,
    // default size tokens
    itemFontSize: e.fontSize,
    itemSize: e.calc(e.controlHeightSM).add(e.controlHeight).div(2).equal(),
    itemGap: e.margin,
    // large size tokens
    itemFontSizeLG: e.fontSizeLG,
    itemSizeLG: e.calc(e.controlHeight).add(e.controlHeightLG).div(2).equal(),
    itemGapLG: e.marginLG
  });
  return [
    b(t),
    u(t)
  ];
});
export {
  L as default
};