@aplus-frontend/ui 6.20.1 → 6.21.0

package/es/src/ap-pro-card/components/card/index.vue2.mjs

@@ -0,0 +1,226 @@
+import { defineComponent as Y, useSlots as Z, computed as s, ref as ee, createVNode as u, Fragment as x, createElementBlock as b, openBlock as n, mergeProps as te, createCommentVNode as v, createElementVNode as re, normalizeStyle as w, normalizeClass as m, unref as g, renderSlot as G, createBlock as p, resolveDynamicComponent as h, withCtx as P } from "vue";
+import { Spin as oe, Tooltip as le } from "@aplus-frontend/antdv";
+import { QuestionCircleOutlined as ne } from "@ant-design/icons-vue";
+import { getProCardCssVar as ae } from "../../utils/css-var.mjs";
+import "../../../config-provider/index.mjs";
+import { mergeClass as S } from "../../../editable-table/utils.mjs";
+import ie from "@aplus-frontend/antdv/es/_util/hooks/useBreakpoint";
+import { useNamespace as se } from "../../../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as de } from "../../../config-provider/hooks/use-global-config.mjs";
+const be = /* @__PURE__ */ Y({
+  name: "ApProCard",
+  __name: "index",
+  props: {
+    headStyle: {},
+    bodyStyle: {},
+    actionsStyle: {},
+    headerBordered: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: [Object, String, Number, Boolean, null, Array]
+    },
+    tooltip: {
+      type: [Object, String, Number, Boolean, null, Array]
+    },
+    extra: {
+      type: [Object, String, Number, Boolean, null, Array]
+    },
+    layout: {},
+    type: {},
+    direction: {},
+    wrap: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: [Boolean, Object, String, Number, null, Array]
+    },
+    colSpan: {},
+    colStyle: {},
+    gutter: {
+      default: 0
+    },
+    actions: {
+      type: [Object, String, Number, Boolean, null, Array]
+    },
+    split: {},
+    bordered: {
+      type: Boolean,
+      default: !1
+    },
+    hoverable: {
+      type: Boolean,
+      default: !1
+    },
+    ghost: {
+      type: Boolean,
+      default: !1
+    },
+    boxShadow: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(E) {
+    const t = E, r = Z(), {
+      b: c
+    } = se("pro-card"), V = de("uiMode"), M = s(() => ae(V.value)), $ = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs"], f = ie(), k = (e, o) => e ? o : {}, _ = (e) => {
+      const o = [0, 0];
+      return (Array.isArray(e) ? e : [e, 0]).forEach((a, d) => {
+        if (typeof a == "object")
+          for (let i = 0; i < $.length; i += 1) {
+            const y = $[i];
+            if ({
+              lg: !0,
+              md: !0,
+              sm: !0,
+              xl: !1,
+              xs: !1,
+              xxl: !1,
+              xxxl: !1,
+              ...f == null ? void 0 : f.value
+            }[y] && a[y] !== void 0) {
+              o[d] = a[y];
+              break;
+            }
+          }
+        else
+          o[d] = a || 0;
+      }), o;
+    }, I = (e) => {
+      let o = e;
+      if (typeof e == "object")
+        for (let a = 0; a < $.length; a += 1) {
+          const d = $[a], i = {
+            lg: !0,
+            md: !0,
+            sm: !0,
+            xl: !1,
+            xs: !1,
+            xxl: !1,
+            xxxl: !1,
+            ...f == null ? void 0 : f.value
+          };
+          if (i != null && i[d] && (e == null ? void 0 : e[d]) !== void 0) {
+            o = e[d];
+            break;
+          }
+        }
+      const l = k(typeof o == "string" && /\d%|\dpx/i.test(o), {
+        width: o,
+        flexShrink: 0
+      });
+      return {
+        span: o,
+        colSpanStyle: l
+      };
+    }, D = s(() => _(t.gutter)), N = ee(!1), O = (e) => {
+      N.value = e;
+    }, F = s(() => {
+      var e;
+      return u(x, null, [t.title || ((e = r.title) == null ? void 0 : e.call(r))]);
+    }), H = s(() => u(x, null, [t.tooltip])), Q = s(() => {
+      var e;
+      return u(x, null, [t.extra || ((e = r.extra) == null ? void 0 : e.call(r))]);
+    }), T = s(() => {
+      var e;
+      return u(x, null, [t.actions || ((e = r.actions) == null ? void 0 : e.call(r))]);
+    }), q = s(() => t.loading === !0 ? u(oe, {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, null) : u(x, null, [t.loading]));
+    function J() {
+      var o;
+      const e = (o = r.default) == null ? void 0 : o.call(r);
+      return O(!1), u(x, null, [Array.isArray(e) ? e == null ? void 0 : e.map((l, a, d) => {
+        var i, y, z;
+        if (l && typeof l == "object" && "type" in l && ((i = l.type) == null ? void 0 : i.isProCard) === !0) {
+          O(!0);
+          const U = ((y = l == null ? void 0 : l.props) == null ? void 0 : y.colSpan) || ((z = l == null ? void 0 : l.props) == null ? void 0 : z["col-span"]) || {}, {
+            span: C,
+            colSpanStyle: W
+          } = I(U), B = c("col"), X = S(`${B}`, [typeof C == "number" && C >= 0 && C <= 24 ? `${B}-span-${C}` : void 0, t.split === "horizontal" && a !== d.length - 1 ? `${B}-split-horizontal` : void 0, t.split === "vertical" && a !== d.length - 1 ? `${B}-split-vertical` : void 0].filter(Boolean)), [A, j] = D.value;
+          return u("div", {
+            class: X,
+            style: {
+              ...W,
+              ...k(A > 0, {
+                paddingInlineStart: `${A / 2}px`,
+                paddingInlineEnd: `${A / 2}px`
+              }),
+              ...k(j > 0, {
+                paddingBlockStart: `${j / 2}px`,
+                paddingBlockEnd: `${j / 2}px`
+              }),
+              ...t.colStyle
+            }
+          }, [l]);
+        }
+        return l;
+      }) : e]);
+    }
+    const K = s(() => {
+      const e = c();
+      return S(`${e}`, [t.bordered ? `${e}-border` : void 0, t.boxShadow ? `${e}-box-shadow` : void 0, N.value ? `${e}-contain-card` : void 0, t.loading ? `${e}-loading` : void 0, t.split === "vertical" || t.split === "horizontal" ? `${e}-split` : void 0, t.ghost ? `${e}-ghost` : void 0, t.hoverable ? `${e}-hoverable` : void 0, t.type ? `${e}-type-${t.type}` : void 0].filter(Boolean));
+    }), L = s(() => {
+      const e = c("header");
+      return S(`${e}`, [t.headerBordered || t.type === "inner" ? `${e}-border` : void 0].filter(Boolean));
+    }), R = s(() => {
+      const e = c("body");
+      return S(`${e}`, [t.layout === "center" ? `${e}-center` : void 0, t.split === "horizontal" || t.direction === "column" ? `${e}-direction-column` : void 0, t.wrap && N.value ? `${e}-wrap` : void 0].filter(Boolean));
+    });
+    return (e, o) => (n(), b("div", te({
+      class: K.value,
+      style: {
+        ...M.value
+      }
+    }, {
+      ...e.$attrs
+    }), [t.title || r.title || t.extra || r.extra ? (n(), b("div", {
+      key: 0,
+      class: m(L.value),
+      style: w({
+        ...t.headStyle
+      })
+    }, [t.title || r.title ? (n(), b("div", {
+      key: 0,
+      class: m(g(c)("header-title"))
+    }, [G(e.$slots, "title", {}, () => [(n(), p(h(F.value)))]), t.tooltip ? (n(), p(g(le), {
+      key: 0
+    }, {
+      title: P(() => [(n(), p(h(H.value)))]),
+      default: P(() => [u(g(ne), {
+        class: m(g(c)("header-title-tooltip"))
+      }, null, 8, ["class"])]),
+      _: 1
+    })) : v("", !0)], 2)) : v("", !0), t.extra || r.extra ? (n(), b("div", {
+      key: 1,
+      class: m(g(c)("header-extra"))
+    }, [G(e.$slots, "extra", {}, () => [(n(), p(h(Q.value)))])], 2)) : v("", !0)], 6)) : v("", !0), re("div", {
+      class: m(R.value),
+      style: w({
+        ...t.bodyStyle
+      })
+    }, [t.loading ? (n(), p(h(q.value), {
+      key: 0
+    })) : (n(), p(h(J()), {
+      key: 1
+    }))], 6), t.actions || r.actions ? (n(), b("div", {
+      key: 1,
+      class: m(g(c)("actions")),
+      style: w({
+        ...t.actionsStyle
+      })
+    }, [(n(), p(h(T.value)))], 6)) : v("", !0)], 16));
+  }
+});
+export {
+  be as default
+};

package/es/src/ap-pro-card/index.d.ts

@@ -0,0 +1,42 @@
+import { CreateComponentPublicInstanceWithMixins, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
+import { ApProCardProps, ApProCardGutter, ApProCardSolts } from './interface';
+declare const ApProCard: {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ApProCardProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+        wrap: boolean;
+        boxShadow: boolean;
+        gutter: ApProCardGutter | ApProCardGutter[];
+        ghost: boolean;
+        bordered: boolean;
+        headerBordered: boolean;
+        hoverable: boolean;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly< ApProCardProps> & Readonly<{}>, {}, {}, {}, {}, {
+        wrap: boolean;
+        boxShadow: boolean;
+        gutter: ApProCardGutter | ApProCardGutter[];
+        ghost: boolean;
+        bordered: boolean;
+        headerBordered: boolean;
+        hoverable: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & ComponentOptionsBase<Readonly< ApProCardProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+    wrap: boolean;
+    boxShadow: boolean;
+    gutter: ApProCardGutter | ApProCardGutter[];
+    ghost: boolean;
+    bordered: boolean;
+    headerBordered: boolean;
+    hoverable: boolean;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+    $slots: Readonly< ApProCardSolts> & ApProCardSolts;
+});
+export { ApProCard };

package/es/src/ap-pro-card/index.mjs

@@ -0,0 +1,7 @@
+import "./components/card/index.vue.mjs";
+import r from "./components/card/index.vue2.mjs";
+const o = r;
+o.isProCard = !0;
+export {
+  o as ApProCard
+};

package/es/src/ap-pro-card/interface.d.ts

@@ -0,0 +1,61 @@
+import { CSSProperties, VNodeChild } from 'vue';
+export type ApProCardBreakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type ApProCardGutter = number | Partial<Record<ApProCardBreakpoint, number>>;
+export type ApProCardColSpanType = number | string;
+export interface ApProCardProps {
+    /** 标题样式 */
+    headStyle?: CSSProperties;
+    /** 内容样式 */
+    bodyStyle?: CSSProperties;
+    /** 操作区样式 */
+    actionsStyle?: CSSProperties;
+    /** 页头是否有分割线 */
+    headerBordered?: boolean;
+    /** 卡片标题 */
+    title?: VNodeChild;
+    /** 标题说明 */
+    tooltip?: VNodeChild;
+    /** 右上角自定义区域 */
+    extra?: VNodeChild;
+    /** 布局，center 代表垂直居中 */
+    layout?: 'default' | 'center';
+    /** 卡片类型 */
+    type?: 'default' | 'inner';
+    /** 指定 Flex 方向，仅在嵌套子卡片时有效 */
+    direction?: 'column' | 'row';
+    /** 是否自动换行，仅在嵌套子卡片时有效 */
+    wrap?: boolean;
+    /** 加载中 */
+    loading?: boolean | VNodeChild;
+    /** 栅格布局宽度，24 栅格，支持指定宽度或百分，需要支持响应式 colSpan={{ xs: 12, sm: 6 }} */
+    colSpan?: ApProCardColSpanType | Partial<Record<ApProCardBreakpoint, ApProCardColSpanType>>;
+    colStyle?: CSSProperties;
+    /** 栅格间距 */
+    gutter?: ApProCardGutter | ApProCardGutter[];
+    /** 操作区 */
+    actions?: VNodeChild;
+    /** 拆分卡片方式 */
+    split?: 'vertical' | 'horizontal';
+    /** 是否有边框 */
+    bordered?: boolean;
+    /**
+     * 鼠标移过时可浮起
+     *
+     * @default false
+     */
+    hoverable?: boolean;
+    /** 幽灵模式，即是否取消卡片内容区域的 padding 和 背景颜色。 */
+    ghost?: boolean;
+    /** card的阴影 */
+    boxShadow?: boolean;
+}
+export type ApProCardSolts = {
+    /** 内容区 */
+    default?: () => VNodeChild;
+    /** 标题 */
+    title?: () => VNodeChild;
+    /** 右上角自定义区域 */
+    extra?: () => VNodeChild;
+    /** 卡片操作组，位置在卡片底部 */
+    actions?: () => VNodeChild;
+};

package/es/src/ap-pro-card/style/css.js

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/ap-pro-card/index.css';

package/es/src/ap-pro-card/style/index.js

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/ap-pro-card/index.less';

package/es/src/ap-pro-card/utils/css-var.d.ts

@@ -0,0 +1,17 @@
+export declare const getProCardCssVar: (uiMode: "aplus" | "admin") => {
+    '--ap-pro-card-border-color-split': string;
+    '--ap-pro-card-box-shadow': string;
+    '--ap-pro-card-tooltip-color': string;
+    '--ap-pro-card-header-title-font-color': string;
+    '--ap-pro-card-area-color': string;
+    '--ap-pro-card-colo-bg-container': string;
+    '--ap-pro-card-border-radius': string;
+    '--ap-pro-card-header-padding': string;
+    '--ap-pro-card-header-padding-bottom': string;
+    '--ap-pro-card-body-padding': string;
+    '--ap-pro-card-actions-padding': string;
+    '--ap-pro-card-border-line-width': string;
+    '--ap-pro-card-border-line-type': string;
+    '--ap-pro-card-header-title-font-size': string;
+    '--ap-pro-card-split-line-height': string;
+};

package/es/src/ap-pro-card/utils/css-var.mjs

@@ -0,0 +1,29 @@
+const r = {
+  "--ap-pro-card-colo-bg-container": "transparent",
+  "--ap-pro-card-border-radius": "4px",
+  "--ap-pro-card-header-padding": "12px 16px 0",
+  "--ap-pro-card-header-padding-bottom": "12px",
+  "--ap-pro-card-body-padding": "12px 16px",
+  "--ap-pro-card-actions-padding": "12px 16px",
+  "--ap-pro-card-border-line-width": "1px",
+  "--ap-pro-card-border-line-type": "solid",
+  "--ap-pro-card-border-color-split": "#e9edf3",
+  "--ap-pro-card-box-shadow": "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
+  "--ap-pro-card-tooltip-color": "#8896b0",
+  "--ap-pro-card-header-title-font-size": "16px",
+  "--ap-pro-card-header-title-font-color": "#182948",
+  "--ap-pro-card-area-color": "#f1f7ff",
+  "--ap-pro-card-split-line-height": "100%"
+}, a = {
+  "--ap-pro-card-border-color-split": "#e9e9e9",
+  "--ap-pro-card-box-shadow": "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
+  "--ap-pro-card-tooltip-color": "#999",
+  "--ap-pro-card-header-title-font-color": "#333",
+  "--ap-pro-card-area-color": "#eff9f5"
+}, o = (p) => ({
+  ...r,
+  ...p === "admin" ? a : {}
+});
+export {
+  o as getProCardCssVar
+};

package/es/src/business/ap-value-select-card/index.d.ts

@@ -0,0 +1,8 @@
+import { default as _ApValueSelectCard } from './index.vue';
+import { hexToRgba } from './utils';
+type ApValueSelectCardInstance = typeof _ApValueSelectCard & {
+    hexToRgba: typeof hexToRgba;
+};
+export * from './interface';
+declare const ApValueSelectCard: ApValueSelectCardInstance;
+export { ApValueSelectCard };

package/es/src/business/ap-value-select-card/index.mjs

@@ -0,0 +1,9 @@
+import "./index.vue.mjs";
+import { hexToRgba as r } from "./utils.mjs";
+import "./interface.mjs";
+import o from "./index.vue2.mjs";
+const a = o;
+o.hexToRgba = r;
+export {
+  a as ApValueSelectCard
+};

package/es/src/business/ap-value-select-card/index.vue.d.ts

@@ -0,0 +1,48 @@
+import { ApValueSelectCardProps, ApValueSelectCardOption } from './interface';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, Ref, ComputedRef, VNode } from 'vue';
+declare const _default: <T extends Record<string, any> = Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onChange?: ((keys: (string | number)[]) => any) | undefined;
+        readonly onSelect?: ((key: string | number) => any) | undefined;
+        readonly onRemove?: ((key: string | number) => any) | undefined;
+        readonly onHighlight?: ((keys: (string | number)[]) => any) | undefined;
+        readonly "onUpdate:selectedKeys"?: ((keys: (string | number)[]) => any) | undefined;
+        readonly "onUpdate:highlightedKeys"?: ((keys: (string | number)[]) => any) | undefined;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onChange" | "onSelect" | "onUpdate:selectedKeys" | "onRemove" | "onHighlight" | "onUpdate:highlightedKeys"> & ApValueSelectCardProps<T> & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<{
+        popoverVisible: Ref<boolean, boolean>;
+        allOptions: ComputedRef< ApValueSelectCardOption<T>[]>;
+        selectedOptions: ComputedRef< ApValueSelectCardOption<T>[]>;
+        isSelected: (key: string | number) => boolean;
+        isHighlighted: (key: string | number) => boolean;
+        toggleOption: (key: string | number) => void;
+        addOption: (key: string | number) => void;
+        removeOption: (key: string | number) => void;
+        highlightOption: (key: string | number) => void;
+    }>): void;
+    attrs: any;
+    slots: {
+        'close-icon'?(_: {}): any;
+        label?(_: {
+            option: ApValueSelectCardOption<T>;
+        }): any;
+        value?(_: {
+            option: ApValueSelectCardOption<T>;
+        }): any;
+        'add-button'?(_: {}): any;
+    };
+    emit: {
+        (e: "update:selectedKeys", keys: (string | number)[]): void;
+        (e: "update:highlightedKeys", keys: (string | number)[]): void;
+        (e: "change", keys: (string | number)[]): void;
+        (e: "select", key: string | number): void;
+        (e: "remove", key: string | number): void;
+        (e: "highlight", keys: (string | number)[]): void;
+    };
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/es/src/business/ap-value-select-card/index.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./index.vue2.mjs";
+export {
+  f as default
+};

package/es/src/business/ap-value-select-card/index.vue2.mjs

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