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

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

import { q as i } from "../../chunks/module-chunk.mjs";
import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as e } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { genStyleHooks as l } from "../../theme/genStyleUtils.mjs";
import { merge as a } from "../../_util/cssinjs-utils/util/statistic.mjs";
import "../../transition-collapse/index.mjs";
import { genTransitionCollapseStyle as d } from "../../transition-collapse/style/index.mjs";
const c = (o) => {
  const { componentCls: r } = o;
  return {
    [r]: {
      display: "flex",
      flexDirection: "column",
      gap: o.paddingXXS,
      overflowY: "auto",
      padding: o.paddingSM,
      margin: 0,
      listStyle: "none",
      [`&${r}-rtl`]: {
        direction: "rtl"
      },
      [`${r}-creation`]: {
        backgroundColor: o.creationBgColor,
        color: o.colorPrimary,
        border: "none",
        fontWeight: 500,
        paddingBlock: o.paddingXS,
        paddingInline: o.paddingSM,
        fontSize: o.fontSize,
        cursor: "pointer",
        display: "flex",
        touchAction: "manipulation",
        gap: o.paddingXS,
        marginBlockEnd: o.marginSM,
        lineHeight: o.lineHeight,
        borderRadius: o.borderRadiusLG,
        transition: `all ${o.motionDurationMid} ${o.motionEaseInOut}`,
        width: "100%",
        boxSizing: "border-box",
        alignItems: "center",
        [`&:not(${r}-creation-disabled):hover`]: {
          color: o.colorPrimary,
          background: o.creationHoverColor
        },
        [`&:not(${r}-creation-disabled)`]: {
          border: `${e(o.lineWidth)} ${o.lineType} ${o.creationBorderColor}`
        },
        "&-start": { justifyContent: "flex-start" },
        "&-center": { justifyContent: "center" },
        "&-end": { justifyContent: "flex-end" },
        "&-label": {
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: o.paddingXS,
          flex: 1
        },
        "&-shortcut-keys": {
          display: "inline-flex",
          gap: o.paddingXXS,
          marginInlineStart: "auto",
          opacity: 0.75,
          fontSize: o.fontSizeSM,
          fontWeight: 400
        },
        "&-shortcut-key": {
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          minWidth: o.fontSizeSM,
          paddingInline: o.paddingXXS,
          borderRadius: o.borderRadiusSM,
          background: o.colorFillSecondary,
          lineHeight: 1.2
        },
        "&-disabled": {
          cursor: "not-allowed",
          background: o.colorBgContainerDisabled,
          [`& ${r}-creation-label, ${r}-creation-icon`]: {
            color: o.colorTextDisabled
          }
        }
      },
      // 会话列表
      [`& ${r}-list`]: {
        display: "flex",
        gap: o.paddingXXS,
        flexDirection: "column",
        paddingLeft: 0,
        [`& ${r}-item`]: {
          paddingInlineStart: o.paddingXL
        },
        [`& ${r}-label`]: {
          color: o.colorTextDescription
        }
      },
      [`& ${r}-divider`]: {
        marginBlock: o.marginXXS
      },
      // 会话列表项
      [`& ${r}-item`]: {
        display: "flex",
        height: o.controlHeightLG,
        minHeight: o.controlHeightLG,
        gap: o.paddingXS,
        padding: `0 ${e(o.paddingXS)}`,
        alignItems: "center",
        borderRadius: o.borderRadiusLG,
        cursor: "pointer",
        transition: `all ${o.motionDurationMid} ${o.motionEaseInOut}`,
        // 悬浮样式
        "&:hover": {
          backgroundColor: o.colorBgTextHover
        },
        // 选中样式
        "&-active": {
          backgroundColor: o.colorBgTextHover,
          [`& ${r}-label, ${r}-menu-icon`]: {
            color: o.colorText
          }
        },
        // 禁用样式
        "&-disabled": {
          cursor: "not-allowed",
          [`& ${r}-label`]: {
            color: o.colorTextDisabled
          }
        },
        // 悬浮、选中时激活操作菜单
        "&:hover, &-active": {
          [`& ${r}-menu-icon`]: {
            opacity: 1
          }
        },
        // 移动端始终显示菜单图标（对齐 React useMobile）
        "&-menu-always": {
          [`& ${r}-menu-icon`]: {
            opacity: 1
          }
        }
      },
      // 会话名
      [`& ${r}-label`]: {
        flex: 1,
        overflow: "hidden",
        textOverflow: "ellipsis",
        color: o.colorText
      },
      // 会话操作菜单
      [`& ${r}-menu-icon`]: {
        opacity: 0,
        fontSize: o.fontSizeXL
      },
      // 分组标题
      [`& ${r}-group-title`]: {
        display: "flex",
        alignItems: "center",
        color: o.colorTextDescription,
        height: o.controlHeightLG,
        minHeight: o.controlHeightLG,
        padding: `0 ${e(o.paddingXS)}`
      },
      [`& ${r}-group-title-collapsible`]: {
        justifyContent: "space-between",
        cursor: "pointer",
        color: o.colorText,
        borderRadius: o.borderRadiusLG,
        transition: `all ${o.motionDurationMid} ${o.motionEaseInOut}`,
        touchAction: "manipulation",
        "&:hover": {
          backgroundColor: o.colorBgTextHover
        }
      },
      [`& ${r}-group-label`]: {
        flex: 1,
        minWidth: 0
      },
      [`& ${r}-group-collapse-trigger`]: {
        transition: `all ${o.motionDurationMid} ${o.motionEaseInOut}`,
        transform: "rotate(0deg)",
        transformOrigin: "center center"
      },
      [`& ${r}-group-collapse-trigger-open`]: {
        transform: "rotate(90deg)"
      },
      [`& ${r}-group-collapse-trigger-close`]: {
        transform: "rotate(0deg)"
      },
      // Align React CSSMotion leavedClassName
      [`& ${r}-content-hidden`]: {
        display: "none"
      }
    }
  };
}, s = (o) => {
  const r = new i(o.colorPrimary).setA(0.15), t = new i(o.colorPrimary).setA(0.22), n = new i(o.colorPrimary).setA(0.25);
  return {
    creationBgColor: r.toRgbString(),
    creationBorderColor: t.toRgbString(),
    creationHoverColor: n.toRgbString()
  };
}, C = l(
  "Conversations",
  (o) => {
    const r = a(o, {});
    return [c(r), d(r)];
  },
  s
);
export {
  C as default,
  s as prepareComponentToken
};