ant-design-x-vue-next/es/sources/Sources.mjs

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

import { defineComponent as W, useSlots as I, ref as $, computed as o, watch as j, createVNode as s, mergeProps as K, Fragment as R } from "vue";
import { b as r, R as V } from "../chunks/module-chunk.mjs";
import { Popover as X } from "ant-design-vue";
import A from "../_util/pick-attrs.mjs";
import F from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import "../transition-collapse/index.mjs";
import q from "./CarouselCard.mjs";
import z from "./style/index.mjs";
import D from "../x-provider/hooks/use-x-provider-context.mjs";
import G from "../transition-collapse/TransitionCollapse.mjs";
const le = /* @__PURE__ */ W({
  name: "AXSources",
  __name: "Sources",
  props: {
    prefixCls: null,
    rootClassName: null,
    className: null,
    class: null,
    style: null,
    classNames: {
      default: () => ({})
    },
    styles: {
      default: () => ({})
    },
    inline: {
      type: Boolean,
      default: !1
    },
    items: null,
    title: null,
    expandIconPosition: {
      default: "start"
    },
    onClick: {
      type: Function
    },
    popoverOverlayWidth: {
      default: 300
    },
    activeKey: null,
    expanded: {
      type: Boolean,
      default: void 0
    },
    onExpand: {
      type: Function
    },
    defaultExpanded: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["expand", "click"],
  setup(k, {
    expose: N,
    emit: h
  }) {
    const e = k, c = I(), v = h, f = $(null), _ = o(() => {
      const l = A(e, {
        attr: !0,
        aria: !0,
        data: !0
      }), {
        title: a,
        ...u
      } = l;
      return u;
    }), {
      getPrefixCls: g,
      direction: E
    } = D(), t = o(() => g("sources", e.prefixCls)), i = F("sources"), [P, m, y] = z(t), d = $(e.expanded ?? e.defaultExpanded ?? !0);
    j(() => e.expanded, (l) => {
      l !== void 0 && (d.value = l);
    });
    const p = o(() => e.expanded !== void 0 ? !!e.expanded : !!d.value), S = (l) => {
      var a;
      e.expanded === void 0 && (d.value = l), (a = e.onExpand) == null || a.call(e, l), v("expand", l);
    }, b = (l, a) => a ? a() : typeof l == "function" ? l() : l, x = o(() => b(e.title, c.title)), C = (l) => {
      var a;
      (a = e.onClick) == null || a.call(e, l), v("click", l);
    }, w = o(() => r(t.value, i.value.className, e.className, e.class, e.rootClassName, e.classNames.root, m.value, y, {
      [`${t.value}-inline`]: e.inline,
      [`${t.value}-rtl`]: E.value === "rtl"
    })), B = o(() => typeof e.popoverOverlayWidth == "number" ? `${e.popoverOverlayWidth}px` : e.popoverOverlayWidth);
    return N({
      nativeElement: f
    }), () => {
      var a, u;
      const l = e.items ? s("ul", {
        class: `${t.value}-list`
      }, [e.items.map((n, O) => s("li", {
        key: n.key ?? O,
        class: `${t.value}-list-item`,
        onClick: () => C(n)
      }, [s("a", {
        class: `${t.value}-link`,
        href: n.url,
        target: "_blank",
        rel: "noopener noreferrer"
      }, [n.icon && s("span", {
        class: `${t.value}-link-icon`
      }, [n.icon]), s("span", {
        class: `${t.value}-link-title`
      }, [n.title])])]))]) : (a = c.default) == null ? void 0 : a.call(c);
      return P(s("div", K(_.value, {
        ref: f,
        class: w.value,
        style: {
          ...typeof i.value.style == "object" ? i.value.style : {},
          ...typeof ((u = i.value.styles) == null ? void 0 : u.root) == "object" ? i.value.styles.root : {},
          ...typeof e.style == "object" ? e.style : {},
          ...e.styles.root
        }
      }), [e.inline ? s(X, {
        placement: "top",
        overlayStyle: {
          width: B.value
        }
      }, {
        default: () => [s("div", {
          class: r(t.value, `${t.value}-title-wrapper`, e.classNames.title),
          style: e.styles.title
        }, [s("span", {
          class: `${t.value}-title`
        }, [x.value])])],
        content: () => s(q, {
          className: r(t.value, m.value, y, e.classNames.content),
          style: e.styles.content,
          activeKey: e.activeKey,
          prefixCls: t.value,
          items: e.items,
          onClick: C
        }, null)
      }) : s(R, null, [s("div", {
        class: r(`${t.value}-title-wrapper`, `${t.value}-icon-position-${e.expandIconPosition}`, e.classNames.title),
        style: e.styles.title,
        onClick: () => S(!p.value)
      }, [s(V, {
        class: `${t.value}-title-down-icon`,
        rotate: p.value ? 90 : 0
      }, null), s("span", {
        class: `${t.value}-title`
      }, [x.value])]), s(G, {
        prefixCls: t.value
      }, {
        default: () => [p.value ? s("div", {
          key: "sources-content",
          class: r(`${t.value}-content`, e.classNames.content),
          style: e.styles.content
        }, [l]) : null]
      })])]));
    };
  }
});
export {
  le as default
};