ant-design-x-vue-next/es/think/Think.mjs

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

import { defineComponent as O, useSlots as P, ref as f, computed as o, watch as V, createVNode as s, mergeProps as j, withDirectives as R, vShow as X } from "vue";
import { f as A, b as r, R as H } from "../chunks/module-chunk.mjs";
import I from "../_util/pick-attrs.mjs";
import T from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import "../transition-collapse/index.mjs";
import D from "./ThinkIcon.mjs";
import L from "./style/index.mjs";
import q from "../x-provider/hooks/use-x-provider-context.mjs";
import z from "../transition-collapse/TransitionCollapse.mjs";
const ee = /* @__PURE__ */ O({
  name: "AXThink",
  __name: "Think",
  props: {
    prefixCls: null,
    rootClassName: null,
    className: null,
    class: null,
    style: null,
    classNames: {
      default: () => ({})
    },
    styles: {
      default: () => ({})
    },
    title: null,
    icon: null,
    loading: null,
    defaultExpanded: {
      type: Boolean,
      default: !0
    },
    expanded: {
      type: Boolean,
      default: void 0
    },
    onExpand: {
      type: Function
    },
    blink: {
      type: Boolean
    },
    destroyOnHidden: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["expand"],
  setup(m, {
    expose: v,
    emit: y
  }) {
    const e = m, a = P(), x = y, p = f(null), C = o(() => {
      const t = I(e, {
        attr: !0,
        aria: !0,
        data: !0
      }), {
        title: l,
        ...S
      } = t;
      return S;
    }), {
      getPrefixCls: N,
      direction: h
    } = q(), n = o(() => N("think", e.prefixCls)), i = T("think"), [k, g, _] = L(n), d = f(e.expanded ?? e.defaultExpanded ?? !0);
    V(() => e.expanded, (t) => {
      t !== void 0 && (d.value = t);
    });
    const u = o(() => e.expanded !== void 0 ? !!e.expanded : !!d.value), $ = (t) => {
      var l;
      e.expanded === void 0 && (d.value = t), (l = e.onExpand) == null || l.call(e, t), x("expand", t);
    }, c = (t, l) => l ? l() : typeof t == "function" ? t() : t, b = o(() => {
      const t = c(e.loading, a.loading);
      return t ? t === !0 ? s(A, null, null) : t : c(e.icon, a.icon) || s(D, null, null);
    }), w = o(() => c(e.title, a.title)), B = o(() => r(n.value, i.value.className, e.className, e.class, e.rootClassName, e.classNames.root, g.value, _, {
      [`${n.value}-rtl`]: h.value === "rtl"
    })), E = o(() => !e.destroyOnHidden || u.value);
    return v({
      nativeElement: p
    }), () => {
      var t;
      return k(s("div", j(C.value, {
        ref: p,
        class: B.value,
        style: {
          ...typeof i.value.style == "object" ? i.value.style : {},
          ...typeof ((t = i.value.styles) == null ? void 0 : t.root) == "object" ? i.value.styles.root : {},
          ...typeof e.style == "object" ? e.style : {},
          ...e.styles.root
        }
      }), [s("div", {
        class: r(`${n.value}-status-wrapper`, e.classNames.status),
        style: e.styles.status,
        onClick: () => $(!u.value)
      }, [s("div", {
        class: `${n.value}-status-icon`
      }, [b.value]), s("div", {
        class: r(`${n.value}-status-text`, {
          [`${n.value}-motion-blink`]: e.blink
        })
      }, [w.value]), s(H, {
        class: `${n.value}-status-down-icon`,
        rotate: u.value ? 90 : 0
      }, null)]), s(z, {
        prefixCls: n.value
      }, {
        default: () => {
          var l;
          return [E.value ? R(s("div", {
            key: "think-content"
          }, [s("div", {
            class: r(`${n.value}-content`, e.classNames.content),
            style: e.styles.content
          }, [(l = a.default) == null ? void 0 : l.call(a)])]), [[X, u.value]]) : null];
        }
      })]));
    };
  }
});
export {
  ee as default
};