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

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { q as n } from "../../chunks/module-chunk.mjs";
import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as d } from "../../_util/cssinjs/util.mjs";
import $ from "../../_util/cssinjs/Keyframes.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as T } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { genStyleHooks as x } from "../../theme/genStyleUtils.mjs";
import "../../transition-collapse/index.mjs";
import { THOUGHT_CHAIN_ITEM_STATUS as s } from "../interface.mjs";
import z from "./item.mjs";
import { genTransitionCollapseStyle as C } from "../../transition-collapse/style/index.mjs";
const u = new $("antXThoughtChainBlink", {
  "0%": {
    backgroundPositionX: "-200%",
    backgroundPositionY: "100%"
  },
  "25%": {
    backgroundPositionX: "-100%",
    backgroundPositionY: "100%"
  },
  "50%": {
    backgroundPositionX: "0%",
    backgroundPositionY: "100%"
  },
  "75%": {
    backgroundPositionX: "100%",
    backgroundPositionY: "100%"
  },
  "100%": {
    backgroundPositionX: "200%",
    backgroundPositionY: "100%"
  }
}), y = (e) => {
  const { componentCls: t } = e, o = `${t}-item`, i = {
    [s.LOADING]: e.colorPrimaryText,
    [s.SUCCESS]: e.colorSuccessText,
    [s.ERROR]: e.colorErrorText,
    [s.ABORT]: e.colorTextSecondary,
    // deprecated alias of loading
    [s.PENDING]: e.colorPrimaryText
  }, r = Object.keys(i);
  return r.reduce((l, a) => {
    const m = i[a];
    return r.forEach((c) => {
      const g = `& ${o}-${a}-${c}`, p = a === c ? {} : {
        backgroundColor: "none !important",
        backgroundImage: `linear-gradient(${m}, ${i[c]})`
      };
      l[g] = {
        [`& ${o}-icon, & > *::before`]: {
          backgroundColor: `${m} !important`
        },
        "& > :last-child::before": p
      };
    }), l;
  }, {});
}, G = (e) => {
  const { calc: t, componentCls: o } = e, i = `${o}-item`, r = {
    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"
      },
      [`&${i}-footer`]: {
        "&::before": {
          display: "block !important",
          bottom: 0
        }
      }
    },
    [`& > ${i}`]: {
      [`& ${i}-header, & ${i}-content, & ${i}-footer`]: {
        position: "relative",
        "&::before": {
          bottom: t(e.itemGap).mul(-1).equal()
        }
      },
      [`& ${i}-header, & ${i}-content`]: {
        marginInlineStart: t(e.itemSize).mul(-1).equal(),
        "&::before": {
          ...r,
          insetInlineStart: t(e.itemSize).div(2).sub(e.lineWidth).equal()
        }
      },
      [`& ${i}-header::before`]: {
        top: e.itemSize,
        bottom: t(e.itemGap).mul(-2).equal()
      },
      [`& ${i}-content::before`]: {
        top: "100%"
      },
      [`& ${i}-footer::before`]: {
        ...r,
        top: 0,
        insetInlineStart: t(e.itemSize).div(-2).sub(e.lineWidth).equal()
      }
    }
  };
}, w = (e) => {
  const { componentCls: t } = e, o = `${t}-item`;
  return {
    [o]: {
      display: "flex",
      flexDirection: "column",
      [`& ${o}-collapsible`]: {
        cursor: "pointer"
      },
      [`& ${o}-header`]: {
        display: "flex",
        marginBottom: e.itemGap,
        gap: e.itemGap,
        alignItems: "flex-start",
        [`& ${o}-icon`]: {
          height: e.itemSize,
          width: e.itemSize,
          fontSize: e.itemFontSize,
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        },
        [`& ${o}-extra`]: {
          height: e.itemSize,
          maxHeight: e.itemSize
        },
        [`& ${o}-header-box`]: {
          flex: 1,
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
          [`& ${o}-title`]: {
            height: e.itemSize,
            lineHeight: `${d(e.itemSize)}`,
            maxHeight: e.itemSize,
            fontSize: e.itemFontSize,
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            [`& ${o}-collapse-icon`]: {
              marginInlineEnd: e.marginXS
            }
          },
          [`& ${o}-desc`]: {
            fontSize: e.itemFontSize,
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap"
          }
        }
      },
      [`& ${o}-content`]: {
        [`& ${o}-content-hidden`]: {
          display: "none"
        },
        [`& ${o}-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}`
        }
      },
      [`& ${o}-footer`]: {
        marginTop: e.itemGap,
        display: "inline-flex"
      }
    }
  };
}, S = (e, t = "middle") => {
  const { componentCls: o } = e, i = {
    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 {
    [`&${o}-${t}`]: {
      paddingInlineStart: i.itemSize,
      gap: i.itemGap,
      ...w({
        ...e,
        ...i
      }),
      ...G({
        ...e,
        ...i
      })
    }
  };
}, B = (e) => {
  const { calc: t, componentCls: o } = e, i = `${o}-item`, r = t(e.lineWidth).mul(2).equal(), l = {
    width: 0,
    backgroundColor: "transparent !important",
    backgroundImage: "none !important"
  };
  return {
    [`&${o}-line-false`]: {
      [`& > ${i}`]: {
        [`& ${i}-header, & ${i}-content, & ${i}-footer`]: {
          "&::before": {
            display: "none !important"
          }
        }
      }
    },
    [`&${o}-line-dashed`]: {
      [`& > ${i}`]: {
        [`& ${i}-header::before, & ${i}-content::before, & ${i}-footer::before`]: {
          ...l,
          borderInlineStart: `${d(r)} dashed ${e.colorTextPlaceholder}`
        }
      }
    },
    [`&${o}-line-dotted`]: {
      [`& > ${i}`]: {
        [`& ${i}-header::before, & ${i}-content::before, & ${i}-footer::before`]: {
          ...l,
          borderInlineStart: `${d(r)} dotted ${e.colorTextPlaceholder}`
        }
      }
    }
  };
}, D = (e) => {
  const { componentCls: t } = e;
  return {
    [t]: {
      display: "flex",
      flexDirection: "column",
      ...y(e),
      ...S(e),
      ...S(e, "large"),
      ...S(e, "small"),
      ...B(e),
      [`${t}-motion-blink`]: {
        backgroundClip: "text",
        color: e.colorTextBlinkDefault,
        WebkitBackgroundClip: "text",
        backgroundImage: `linear-gradient(90deg,transparent,${e.colorTextBlink},transparent)`,
        animationDuration: "1s",
        animationIterationCount: "infinite",
        animationTimingFunction: "linear",
        animationFillMode: "forwards",
        backgroundSize: "50%",
        backgroundRepeat: "no-repeat",
        animationName: u
      },
      [`&${t}-rtl`]: {
        direction: "rtl"
      }
    }
  };
}, I = (e) => {
  const t = new n(e.colorTextDescription).setA(0.25).toRgbString(), o = e.colorTextDescription, i = e.colorTextBase, r = new n(e.colorErrorText).setA(0.45).toRgbString(), l = new n(e.colorErrorText).setA(0.45).toRgbString(), a = new n(e.colorFillTertiary).setA(0.06).toRgbString(), m = new n(e.colorErrorText).setA(0.25).toRgbString(), c = new n(e.colorTextDescription).setA(0.25).toRgbString(), g = new n(e.colorText).setA(0.45).toRgbString(), p = new n(e.colorErrorBg).setA(0.25).toRgbString(), b = a, h = new n(e.colorSuccess).setA(0.45).toRgbString(), f = new n(e.colorPrimary).setA(0.45).toRgbString();
  return {
    colorDescriptionDisabled: c,
    colorPrimaryDisabled: f,
    colorSuccessDisabled: h,
    colorTitleDisabled: g,
    colorErrorTextDisabled: l,
    colorErrorBgDisabled: p,
    colorErrorTextDescriptionDisabled: m,
    itemMotionDescription: t,
    colorTextBlinkDefault: o,
    colorTextBlink: i,
    itemSolidBg: e.colorFillTertiary,
    itemSolidHoverBg: a,
    itemOutlinedBg: e.colorBgContainer,
    itemOutlinedHoverBg: b,
    itemBorderRadius: e.borderRadius,
    colorErrorTextDescription: r
  };
}, Y = x(
  "ThoughtChain",
  (e) => {
    const t = T(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 [
      u,
      D(t),
      z(t),
      C(t)
    ];
  },
  I
);
export {
  Y as default,
  I as prepareComponentToken
};