@aplus-frontend/ui 6.20.1 → 6.21.1

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
+};

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

@@ -0,0 +1,107 @@
+import { ComputedRef, Ref, StyleValue } from 'vue';
+export interface ApValueSelectCardOption<ValueRecord extends Record<string, any> = Record<string, any>> {
+    key: string | number;
+    label: string;
+    value: string | number;
+    customClass?: string;
+    record?: ValueRecord;
+}
+export interface ApValueSelectCardProps<T extends Record<string, any> = Record<string, any>> {
+    /**
+     * 所有可用选项
+     */
+    options: ApValueSelectCardOption<T>[];
+    /**
+     * 当前选中的选项key
+     */
+    selectedKeys?: (string | number)[];
+    /**
+     * 当前高亮的选项key
+     */
+    highlightedKeys?: (string | number)[];
+    /**
+     * 最多可选数量
+     */
+    maxSelected?: number;
+    /**
+     * 一行最多可显示数量
+     */
+    maxRowDisplay?: number;
+    /**
+     * Popover标题
+     */
+    popoverTitle?: string;
+    /**
+     * 是否显示Popover标题图标
+     */
+    showTitleIcon?: boolean;
+    /**
+     * 是否显示关闭图标
+     */
+    showCloseIcon?: boolean;
+    /**
+     * 是否显示添加按钮
+     */
+    showAddButton?: boolean;
+    /**
+     * 添加按钮文本
+     */
+    addButtonText?: string;
+    /**
+     * 获取容器函数
+     */
+    getContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * 自定义卡片样式函数
+     */
+    getCardStyle?: (key: string | number) => StyleValue;
+    /**
+     * 自定义卡片外层样式函数
+     */
+    wrapperStyle?: StyleValue;
+}
+export interface ApValueSelectCardExpose<T extends Record<string, any> = Record<string, any>> {
+    /**
+     * popover是否显示
+     */
+    popoverVisible: Ref<boolean, boolean>;
+    /**
+     * 所有选项
+     */
+    allOptions: ComputedRef<ApValueSelectCardOption<T>[]>;
+    /**
+     * 当前选中的选项
+     */
+    selectedOptions: ComputedRef<ApValueSelectCardOption<T>[]>;
+    isSelected: (key: string | number) => boolean;
+    /**
+     * 检查是否高亮
+     * @param { string | number } key
+     * @returns void
+     */
+    isHighlighted: (key: string | number) => boolean;
+    /**
+     * 切换选项选择状态
+     * @param {string | number} key
+     * @returns void
+     */
+    toggleOption: (key: string | number) => void;
+    /**
+     * 添加选项
+     * @param {string | number} key
+     * @returns void
+     */
+    addOption: (key: string | number) => void;
+    /**
+     * 移除选项
+     * @param {string | number} key
+     * @returns void
+     */
+    removeOption: (key: string | number) => void;
+    /**
+     * 高亮选项
+     * @param {string | number} key
+     * @returns void
+     */
+    highlightOption: (key: string | number) => void;
+}

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

@@ -0,0 +1 @@
+

package/es/src/business/ap-value-select-card/style/css.js

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

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * Convert a hex color code to an RGBA color string.
+ * @param hex - The hex color code, e.g. "#ff00ff" or "#f0f".
+ * @param alpha - The alpha value (optional), default is 1 (fully opaque).
+ * @returns The RGBA color string.
+ */
+export declare function hexToRgba(hex: string, alpha?: number): string;

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

@@ -0,0 +1,9 @@
+function g(n, t = 1) {
+  if (n = n == null ? void 0 : n.replace(/^#/, ""), n.length === 3 && (n = n.split("").map((r) => r + r).join("")), n.length !== 6)
+    throw new Error("Invalid hex color code");
+  const s = parseInt(n.substring(0, 2), 16), o = parseInt(n.substring(2, 4), 16), i = parseInt(n.substring(4, 6), 16);
+  return `rgba(${s}, ${o}, ${i}, ${t})`;
+}
+export {
+  g as hexToRgba
+};

package/es/src/business/index.d.ts

@@ -25,4 +25,5 @@ export * from './ap-view';
 export * from './ap-radio-group';
 export * from './ap-keep-alive';
 export * from './ap-draggable-grid';
+export * from './ap-value-select-card';
 export { ApTransformDataHelper } from '../utils/ap-trans-data';

package/es/src/business/index.mjs

@@ -2,19 +2,19 @@ import { default as m } from "./ap-table-modal/index.mjs";
 import { ApAttachment as f } from "./ap-attachment/index.mjs";
 import { ApBatchAction as a } from "./ap-batch-action/index.mjs";
 import { ApBatchActionGroup as i } from "./ap-batch-action-group/index.mjs";
-import { ApButtonGroup as l } from "./ap-button-group/index.mjs";
+import { ApButtonGroup as d } from "./ap-button-group/index.mjs";
 import { ApCard as c } from "./ap-card/index.mjs";
 import { ApExpandAlert as S } from "./ap-expand-alert/index.mjs";
 import { ApExportGroup as s } from "./ap-export-group/index.mjs";
 import { ApImage as L } from "./ap-image/index.mjs";
 import { ApInputRadio as h } from "./ap-input-radio/index.mjs";
-import { ApLabel as B, ApLabelGroup as T } from "./ap-label/index.mjs";
+import { ApLabel as B, ApLabelGroup as C } from "./ap-label/index.mjs";
 import { ApLadder as D } from "./ap-ladder/index.mjs";
 import { ApSelectLayout as R } from "./ap-select-layout/index.mjs";
-import { ApStatus as w, ApStatusGroup as z } from "./ap-status/index.mjs";
-import { ApTitle as K } from "./ap-title/index.mjs";
+import { ApStatus as v, ApStatusGroup as w } from "./ap-status/index.mjs";
+import { ApTitle as H } from "./ap-title/index.mjs";
 import "./hooks/index.mjs";
-import { ApSummary as P } from "./ap-summary/index.mjs";
+import { ApSummary as M } from "./ap-summary/index.mjs";
 import { ApAppendix as j } from "./ap-appendix/index.mjs";
 import "./ap-upload-file/index.mjs";
 import "./batch-input-group/index.mjs";
@@ -25,13 +25,14 @@ import { ApView as U } from "./ap-view/index.mjs";
 import { ApRadioGroup as X } from "./ap-radio-group/index.mjs";
 import { ApKeepAlive as Z } from "./ap-keep-alive/index.mjs";
 import { ApDraggableGrid as $ } from "./ap-draggable-grid/index.mjs";
-import { ApTransformDataHelper as po } from "../utils/ap-trans-data/index.mjs";
+import { ApValueSelectCard as ro } from "./ap-value-select-card/index.mjs";
+import { ApTransformDataHelper as to } from "../utils/ap-trans-data/index.mjs";
 export {
   j as ApAppendix,
   f as ApAttachment,
   a as ApBatchAction,
   i as ApBatchActionGroup,
-  l as ApButtonGroup,
+  d as ApButtonGroup,
   c as ApCard,
   O as ApCopy,
   $ as ApDraggableGrid,
@@ -41,17 +42,18 @@ export {
   h as ApInputRadio,
   Z as ApKeepAlive,
   B as ApLabel,
-  T as ApLabelGroup,
+  C as ApLabelGroup,
   D as ApLadder,
   J as ApProductInfo,
   X as ApRadioGroup,
   R as ApSelectLayout,
   q as ApSizeInput,
-  w as ApStatus,
-  z as ApStatusGroup,
-  P as ApSummary,
+  v as ApStatus,
+  w as ApStatusGroup,
+  M as ApSummary,
   m as ApTableModal,
-  K as ApTitle,
-  po as ApTransformDataHelper,
+  H as ApTitle,
+  to as ApTransformDataHelper,
+  ro as ApValueSelectCard,
   U as ApView
 };

package/es/src/index.d.ts

@@ -12,6 +12,7 @@ export * from './ap-modal';
 export * from './ap-list';
 export * from './ap-button';
 export * from './ap-drawer';
+export * from './ap-pro-card';
 export * from './business';
 export * from './ap-table';
 export * from './editable-table';