@aplus-frontend/ui 6.20.1 → 6.21.1

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 oe, normalizeStyle as A, normalizeClass as m, unref as g, renderSlot as G, createBlock as p, resolveDynamicComponent as h, withCtx as P } from "vue";
+import { Spin as re, 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, o = 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, r) => e ? r : {}, _ = (e) => {
+      const r = [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) {
+              r[d] = a[y];
+              break;
+            }
+          }
+        else
+          r[d] = a || 0;
+      }), r;
+    }, I = (e) => {
+      let r = 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) {
+            r = e[d];
+            break;
+          }
+        }
+      const l = k(typeof r == "string" && /\d%|\dpx/i.test(r), {
+        width: r,
+        flexShrink: 0
+      });
+      return {
+        span: r,
+        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 = o.title) == null ? void 0 : e.call(o))]);
+    }), H = s(() => u(x, null, [t.tooltip])), Q = s(() => {
+      var e;
+      return u(x, null, [t.extra || ((e = o.extra) == null ? void 0 : e.call(o))]);
+    }), T = s(() => {
+      var e;
+      return u(x, null, [t.actions || ((e = o.actions) == null ? void 0 : e.call(o))]);
+    }), q = s(() => t.loading === !0 ? u(re, {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, null) : u(x, null, [t.loading]));
+    function J() {
+      var r;
+      const e = (r = o.default) == null ? void 0 : r.call(o);
+      return O(!1), u(x, null, [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)), [j, w] = D.value;
+          return u("div", {
+            class: X,
+            style: {
+              ...W,
+              ...k(j > 0, {
+                paddingInlineStart: `${j / 2}px`,
+                paddingInlineEnd: `${j / 2}px`
+              }),
+              ...k(w > 0, {
+                paddingBlockStart: `${w / 2}px`,
+                paddingBlockEnd: `${w / 2}px`
+              }),
+              ...t.colStyle
+            }
+          }, [l]);
+        }
+        return l;
+      })]);
+    }
+    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, r) => (n(), b("div", te({
+      class: K.value,
+      style: {
+        ...M.value
+      }
+    }, {
+      ...e.$attrs
+    }), [t.title || o.title || t.extra || o.extra ? (n(), b("div", {
+      key: 0,
+      class: m(L.value),
+      style: A({
+        ...t.headStyle
+      })
+    }, [t.title || o.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 || o.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), oe("div", {
+      class: m(R.value),
+      style: A({
+        ...t.bodyStyle
+      })
+    }, [t.loading ? (n(), p(h(q.value), {
+      key: 0
+    })) : (n(), p(h(J()), {
+      key: 1
+    }))], 6), t.actions || o.actions ? (n(), b("div", {
+      key: 1,
+      class: m(g(c)("actions")),
+      style: A({
+        ...t.actionsStyle
+      })
+    }, [(n(), p(h(T.value)))], 6)) : v("", !0)], 16));
+  }
+});
+export {
+  be as default
+};

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

@@ -0,0 +1,13 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    /**
+     * 布局类型
+     *
+     * @default vertical
+     */
+    type?: 'horizontal' | 'vertical';
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "horizontal" | "vertical";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,29 @@
+import { defineComponent as p, computed as s, createElementBlock as a, openBlock as i, mergeProps as c } from "vue";
+import "../../../config-provider/index.mjs";
+import { mergeClass as m } from "../../../editable-table/utils.mjs";
+import { useNamespace as d } from "../../../config-provider/hooks/use-namespace.mjs";
+const _ = /* @__PURE__ */ p({
+  name: "ApProCardDivider",
+  __name: "index",
+  props: {
+    type: {
+      default: "vertical"
+    }
+  },
+  setup(t) {
+    const {
+      b: o
+    } = d("pro-card-divider"), r = t, n = s(() => {
+      const e = o();
+      return m(`${e}`, [r.type ? `${e}-${r.type}` : void 0].filter(Boolean));
+    });
+    return (e, l) => (i(), a("div", c({
+      ...e.$attrs
+    }, {
+      class: n.value
+    }), null, 16));
+  }
+});
+export {
+  _ as default
+};

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

@@ -0,0 +1,23 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    type?: 'default';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "default";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,28 @@
+import { defineComponent as a, computed as s, createElementBlock as p, openBlock as i, normalizeClass as u, renderSlot as d } from "vue";
+import "../../../config-provider/index.mjs";
+import { mergeClass as m } from "../../../editable-table/utils.mjs";
+import { useNamespace as c } from "../../../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as f } from "../../../config-provider/hooks/use-global-config.mjs";
+const B = /* @__PURE__ */ a({
+  name: "ApProCardTitle",
+  __name: "index",
+  props: {
+    type: {
+      default: "default"
+    }
+  },
+  setup(r) {
+    const {
+      b: l
+    } = c("pro-card-title"), o = f("uiMode"), t = r, n = s(() => {
+      const e = l();
+      return m(`${e}`, [t.type ? `${e}-${t.type}` : void 0, o.value ? `${e}-${t.type ?? "default"}-${o.value}` : void 0].filter(Boolean));
+    });
+    return (e, C) => (i(), p("div", {
+      class: u(n.value)
+    }, [d(e.$slots, "default")], 2));
+  }
+});
+export {
+  B as default
+};

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

@@ -0,0 +1,10 @@
+import { default as Card } from './components/card/index.vue';
+import { default as Divider } from './components/divider/index.vue';
+import { default as Title } from './components/title/index.vue';
+export type ProCardType = typeof Card & {
+    isProCard: boolean;
+    Divider: typeof Divider;
+    Title: typeof Title;
+};
+declare const ApProCard: ProCardType;
+export { ApProCard };

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

@@ -0,0 +1,13 @@
+import "./components/card/index.vue.mjs";
+import "./components/divider/index.vue.mjs";
+import "./components/title/index.vue.mjs";
+import i from "./components/card/index.vue2.mjs";
+import o from "./components/divider/index.vue2.mjs";
+import m from "./components/title/index.vue2.mjs";
+const r = i;
+r.isProCard = !0;
+r.Divider = o;
+r.Title = m;
+export {
+  r as ApProCard
+};

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

@@ -0,0 +1,61 @@
+import { CSSProperties, VNode, 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?: () => VNode[];
+    /** 标题 */
+    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
+};