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

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

import { defineComponent as V, useAttrs as j, useId as w, ref as B, computed as o, createVNode as n, mergeProps as T } from "vue";
import { b as r } from "../chunks/module-chunk.mjs";
import X from "../_util/pick-attrs.mjs";
import "../x-provider/index.mjs";
import D from "./Status.mjs";
import E from "./style/index.mjs";
import F from "../x-provider/hooks/use-x-provider-context.mjs";
const M = /* @__PURE__ */ V({
  name: "AXThoughtChainItem",
  inheritAttrs: !1,
  __name: "ThoughtChainItem",
  props: {
    prefixCls: null,
    icon: null,
    title: null,
    description: null,
    rootClassName: {
      default: ""
    },
    status: null,
    variant: {
      default: "solid"
    },
    blink: {
      type: Boolean,
      default: !1
    },
    className: null,
    class: null,
    classNames: {
      default: () => ({})
    },
    style: null,
    styles: {
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    onClick: {
      type: Function
    }
  },
  setup(y, {
    expose: h
  }) {
    const e = y, a = j(), k = w(), c = B(), {
      getPrefixCls: $,
      direction: b
    } = F(), i = o(() => $("thought-chain", e.prefixCls)), [N, x, _] = E(i), t = o(() => `${i.value}-item`), g = o(() => !!(a.onClick || e.onClick)), A = o(() => {
      const s = {
        ...a,
        ...e
      };
      return X(s, {
        attr: !0,
        aria: !0,
        data: !0
      });
    }), I = o(() => {
      var s;
      return r(i.value, x.value, _, e.className, a.class, e.rootClassName, (s = e.classNames) == null ? void 0 : s.root, t.value, {
        [`${t.value}-${e.variant}`]: e.variant,
        [`${t.value}-click`]: !e.disabled && g.value,
        [`${t.value}-error`]: e.status === "error",
        [`${t.value}-rtl`]: b.value === "rtl",
        [`${t.value}-disabled`]: e.disabled
      });
    }), P = (s) => {
      if (e.disabled) return;
      const l = a.onClick || e.onClick;
      l == null || l(s);
    };
    return h({
      nativeElement: c
    }), () => {
      var u, d, m, p, f, v, C;
      const {
        class: s,
        style: l,
        onClick: R,
        ...S
      } = {
        ...A.value,
        ...a
      };
      return N(n("div", T(S, {
        ref: c,
        key: k,
        onClick: e.disabled ? void 0 : P,
        style: {
          ...typeof l == "object" ? l : {},
          ...typeof e.style == "object" ? e.style : {},
          ...(u = e.styles) == null ? void 0 : u.root
        },
        class: I.value
      }), [(e.status || e.icon) && n(D, {
        style: (d = e.styles) == null ? void 0 : d.icon,
        className: (m = e.classNames) == null ? void 0 : m.icon,
        prefixCls: i.value,
        icon: e.icon,
        status: e.status
      }, null), n("div", {
        class: r(`${t.value}-content`, {
          [`${i.value}-motion-blink`]: e.blink
        })
      }, [e.title ? n("div", {
        style: (p = e.styles) == null ? void 0 : p.title,
        class: r(`${t.value}-title`, (f = e.classNames) == null ? void 0 : f.title, {
          [`${t.value}-title-with-description`]: e.description
        })
      }, [e.title]) : null, e.description ? n("div", {
        style: (v = e.styles) == null ? void 0 : v.description,
        class: r(`${t.value}-description`, (C = e.classNames) == null ? void 0 : C.description)
      }, [e.description]) : null])]));
    };
  }
});
export {
  M as default
};