@aplus-frontend/ui/es/src/business/ap-value-select-card/index.vue2.mjs

import { defineComponent as z, ref as I, computed as T, createElementBlock as r, openBlock as a, normalizeStyle as A, normalizeClass as d, unref as s, createVNode as b, withCtx as V, createElementVNode as c, createCommentVNode as y, Fragment as N, renderList as R, withModifiers as f, renderSlot as u, createTextVNode as g, toDisplayString as h, createBlock as L } from "vue";
import { Popover as j } from "@aplus-frontend/antdv";
import { PlusOutlined as G, InfoCircleFilled as q } from "@ant-design/icons-vue";
import { IconApAdLinePoor as J } from "@aplus-frontend/icon";
import "../../config-provider/index.mjs";
import { useNamespace as Q } from "../../config-provider/hooks/use-namespace.mjs";
import { useGlobalConfig as U } from "../../config-provider/hooks/use-global-config.mjs";
const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onClick"], _ = ["onClick"], x = { class: "label" }, ee = { class: "value" }, te = { class: "text" }, re = /* @__PURE__ */ z({
  name: "ApValueSelectCard",
  __name: "index",
  props: {
    options: {},
    selectedKeys: { default: () => [] },
    highlightedKeys: { default: () => [] },
    maxSelected: { default: 4 },
    maxRowDisplay: { default: 4 },
    popoverTitle: { default: "" },
    showTitleIcon: { type: Boolean, default: !0 },
    showCloseIcon: { type: Boolean, default: !0 },
    showAddButton: { type: Boolean, default: !0 },
    addButtonText: { default: "" },
    getContainer: { type: Function, default: (v) => v.parentElement || document.body },
    getCardStyle: { type: Function, default: () => ({}) },
    wrapperStyle: { type: [Boolean, null, String, Object, Array] }
  },
  emits: ["update:selectedKeys", "update:highlightedKeys", "change", "select", "remove", "highlight"],
  setup(v, { expose: F, emit: H }) {
    const o = H, l = v, { b: n, m: D } = Q("ap-value-select-card"), E = U("uiMode", "aplus"), M = I(null), p = I(!1), K = T(() => l.options), C = T(() => K.value.filter(
      (e) => l.selectedKeys.includes(e.key)
    )), B = (e) => l.selectedKeys.includes(e), S = (e) => l.highlightedKeys.includes(e), $ = (e) => {
      l.selectedKeys.includes(e) ? k(e) : O(e);
    }, O = (e) => {
      if (l.maxSelected && l.selectedKeys.length >= l.maxSelected)
        return;
      const i = [...l.selectedKeys, e];
      o("update:selectedKeys", i), o("change", i), o("select", e), l.highlightedKeys.includes(e) || w(e);
    }, k = (e) => {
      if (l.selectedKeys.length <= 1 || l.highlightedKeys.length <= 1 && l.highlightedKeys.includes(e))
        return;
      const i = l.selectedKeys.filter((t) => t !== e);
      if (o("update:selectedKeys", i), o("change", i), o("remove", e), l.highlightedKeys.includes(e)) {
        const t = l.highlightedKeys.filter((m) => m !== e);
        o("update:highlightedKeys", t), o("highlight", t);
      }
    }, w = (e) => {
      let i;
      if (l.highlightedKeys.includes(e))
        if (l.highlightedKeys.length > 1)
          i = l.highlightedKeys.filter((t) => t !== e);
        else
          return;
      else
        i = [...l.highlightedKeys, e];
      o("update:highlightedKeys", i), o("highlight", i);
    }, P = (e) => {
      e || (p.value = e);
    };
    return F({
      popoverVisible: p,
      allOptions: K,
      selectedOptions: C,
      isSelected: B,
      isHighlighted: S,
      toggleOption: $,
      addOption: O,
      removeOption: k,
      highlightOption: w
    }), (e, i) => (a(), r("div", {
      class: d([s(n)(), `${s(D)(s(E))}`]),
      style: A({
        ...e.wrapperStyle,
        "--ap-value-select-card-column-count": e.maxRowDisplay
      })
    }, [
      b(s(j), {
        open: p.value,
        trigger: "click",
        placement: "bottomRight",
        arrow: !1,
        "get-popup-container": e.getContainer,
        onOpenChange: P
      }, {
        content: V(() => [
          c("div", {
            class: d(s(n)("popover"))
          }, [
            e.popoverTitle ? (a(), r("div", {
              key: 0,
              class: d(s(n)("title"))
            }, [
              e.showTitleIcon ? (a(), L(s(q), {
                key: 0,
                class: d(s(n)("title-icon"))
              }, null, 8, ["class"])) : y("", !0),
              g(" " + h(e.popoverTitle), 1)
            ], 2)) : y("", !0),
            c("div", {
              class: d(s(n)("list"))
            }, [
              (a(!0), r(N, null, R(K.value, (t) => (a(), r("div", {
                key: t.key,
                class: d([
                  s(n)("list-item"),
                  "all",
                  {
                    select: B(t.key),
                    disabled: e.maxSelected && e.selectedKeys.length >= e.maxSelected
                  }
                ]),
                onClick: f((m) => $(t.key), ["stop"])
              }, [
                c("div", X, [
                  u(e.$slots, "popover-label", { option: t }, () => [
                    g(h(t.label), 1)
                  ])
                ]),
                c("div", Y, [
                  u(e.$slots, "popover-value", { option: t }, () => [
                    g(h(t.value), 1)
                  ])
                ])
              ], 10, W))), 128))
            ], 2)
          ], 2)
        ]),
        default: V(() => [
          c("div", {
            class: d(s(n)("list"))
          }, [
            (a(!0), r(N, null, R(C.value, (t) => (a(), r("div", {
              key: t.key,
              ref_for: !0,
              ref_key: "listItemRef",
              ref: M,
              class: d([
                s(n)("list-item"),
                {
                  select: S(t.key),
                  custom: t.customClass
                },
                t.customClass
              ]),
              style: A(e.getCardStyle(t.key)),
              onClick: f((m) => w(t.key), ["stop"])
            }, [
              e.showCloseIcon && (!(e.highlightedKeys.length === 1 && S(t.key)) && C.value.length > 1) ? (a(), r("div", {
                key: 0,
                class: d(s(n)("list-item-close")),
                onClick: f((m) => k(t.key), ["stop"])
              }, [
                u(e.$slots, "close-icon", {}, () => [
                  b(s(J))
                ])
              ], 10, _)) : y("", !0),
              c("div", x, [
                u(e.$slots, "label", { option: t }, () => [
                  g(h(t.label), 1)
                ])
              ]),
              c("div", ee, [
                u(e.$slots, "value", { option: t }, () => [
                  g(h(t.value), 1)
                ])
              ])
            ], 14, Z))), 128)),
            e.showAddButton && (!e.maxSelected || e.selectedKeys.length < e.maxSelected) ? (a(), r("div", {
              key: 0,
              class: d([s(n)("list-item"), "choose"]),
              onClick: i[0] || (i[0] = f((t) => p.value = !0, ["stop"]))
            }, [
              u(e.$slots, "add-button", {}, () => [
                b(s(G)),
                c("span", te, h(e.addButtonText), 1)
              ])
            ], 2)) : y("", !0)
          ], 2)
        ]),
        _: 3
      }, 8, ["open", "get-popup-container"])
    ], 6));
  }
});
export {
  re as default
};