@aplus-frontend/ui 0.0.32 → 0.0.34

package/es/src/ap-table/hooks/use-table-row-selection.d.ts

@@ -0,0 +1,60 @@
+import { TableRowSelection } from 'ant-design-vue/lib/table/interface';
+import { ComputedRef, Ref } from 'vue';
+import { ApTableProps, ApTableRowSelection } from '../interface';
+import { Recordable } from '../../type';
+
+export interface RowSelectionReturnType<RecordType = any> {
+    rowSelection: ComputedRef<TableRowSelection<RecordType>>;
+    selectedRows: Ref<RecordType[]>;
+    /**
+     * 选中某行
+     * @param item
+     * @returns
+     */
+    select: (item: RecordType) => void;
+    /**
+     * 取消选中某行
+     * @param item
+     * @returns
+     */
+    unSelect: (item: RecordType) => void;
+    /**
+     * 某行是否被选中
+     * @param item
+     * @returns
+     */
+    isSelected: (item: RecordType) => boolean;
+    /**
+     * 选中当前所有数据
+     * @returns
+     */
+    selectAll: () => void;
+    /**
+     * 取消选中当前所有数据
+     * @returns
+     */
+    unSelectAll: () => void;
+    /**
+     * 清空所有选中
+     * @returns
+     */
+    clearAll: () => void;
+    /**
+     * 切换某行的选中状态
+     * @param item
+     * @returns
+     */
+    toggleSelect: (item: RecordType) => void;
+}
+type RowSelectionParams<T> = ApTableRowSelection<T> & {
+    /**
+     * 数据源（如果是后端分页，则表示当页数据，否则是全量数据）
+     */
+    dataSource: Ref<T[]>;
+    /**
+     * 同Table的rowkey
+     */
+    rowKey: ApTableProps['rowKey'];
+};
+declare const useTableRowSelection: <RecordType = Recordable>(props: RowSelectionParams<RecordType>) => RowSelectionReturnType<RecordType>;
+export default useTableRowSelection;

package/es/src/ap-table/hooks/use-table-row-selection.mjs

@@ -0,0 +1,62 @@
+import { ref as h, computed as s, unref as c } from "vue";
+import { isFunction as x } from "lodash-unified";
+const g = (o) => {
+  const n = h([]);
+  function r(e, t) {
+    n.value = t;
+  }
+  const l = (e) => x(o.rowKey) ? o.rowKey(e) : e[o.rowKey], a = s(() => {
+    const e = /* @__PURE__ */ new Map();
+    return c(n).forEach((t) => {
+      e.set(l(t), t);
+    }), e;
+  });
+  function f(e) {
+    return c(a).has(l(e));
+  }
+  function d(e) {
+    const t = c(a);
+    t.set(l(e), e), n.value = [...t.values()];
+  }
+  function S(e) {
+    const t = c(a);
+    t.delete(l(e)), n.value = [...t.values()];
+  }
+  function i() {
+    const e = c(a);
+    c(o.dataSource).forEach((t) => {
+      e.set(l(t), t);
+    }), n.value = [...e.values()];
+  }
+  function v(e) {
+    const t = c(a), u = l(e);
+    t.has(u) ? t.delete(u) : t.set(u, e), n.value = [...t.values()];
+  }
+  function w() {
+    const e = c(a);
+    c(o.dataSource).forEach((t) => {
+      e.delete(l(t));
+    }), n.value = [...e.values()];
+  }
+  function M() {
+    n.value = [];
+  }
+  return {
+    select: d,
+    unSelect: S,
+    isSelected: f,
+    selectAll: i,
+    unSelectAll: w,
+    clearAll: M,
+    toggleSelect: v,
+    selectedRows: n,
+    rowSelection: s(() => ({
+      ...o,
+      onChange: r,
+      selectedRowKeys: c(n).map((e) => l(e))
+    }))
+  };
+};
+export {
+  g as default
+};

package/es/src/ap-table/interface.d.ts

@@ -1,5 +1,5 @@
 import { ColumnType, TableProps } from 'ant-design-vue/es/table';
-import { CompareFn, SortOrder } from 'ant-design-vue/es/table/interface';
+import { CompareFn, SortOrder, TableRowSelection } from 'ant-design-vue/es/table/interface';
 import { ApFormSearchFormProps } from '../ap-form';
 import { ApFormItemCheckboxProps, ApFormItemDateProps, ApFormItemDateRangeProps, ApFormItemNumberProps, ApFormItemRadioProps, ApFormItemSelectProps, ApFormItemSwitchProps, ApFormItemTextAreaProps, ApFormItemTextPasswordProps, ApFormItemTextProps } from '../ap-form/items/interface';
 import { Recordable } from '../type';
@@ -7,6 +7,7 @@ import { ComputedRef, CSSProperties, VNode } from 'vue';
 import { ApActionGroupProps } from '../ap-action';
 import { ApTableIndexProps } from './components/interface';
 import { EllipsisConfig } from 'ant-design-vue/es/typography/Base';
+import { RowSelectionReturnType } from './hooks/use-table-row-selection';
 
 export type ValueEnumType = {
     text: string;
@@ -64,6 +65,7 @@ export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children' | 'filters' |
         multiple?: number;
     };
 };
+export type ApTableRowSelection<RecordType = any> = Omit<TableRowSelection<RecordType>, 'selectedRowKeys' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectInvert' | 'onSelectNone'>;
 export type ApColumnType<RecordType = any, ValueType extends ApTableValueTypes = ApTableValueTypes> = ValueType extends ApTableValueTypes ? ExtraProColumnType<RecordType> & {
     children?: ApColumnType<RecordType, ValueType>[];
     /**
@@ -141,11 +143,15 @@ export type RequestData<T> = {
     data: T[] | undefined;
     total: number;
 } & Record<string, any>;
-export type ApTableProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size'> & {
+export type ApTableProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size' | 'rowSelection'> & {
     /**
      * 列配置
      */
     columns?: ApColumnType<RecordType, any>[];
+    /**
+     * 行选中配置
+     */
+    rowSelection?: true | ApTableRowSelection<RecordType>;
     /**
      * 是否启用卡片样式
      */
@@ -252,4 +258,10 @@ export type ApTableExpose<SearchParamsType = Recordable, RecordType = any> = {
      * 表格数据源
      */
     dataSource: ComputedRef<RecordType>;
+    /**
+     * 行选中相关的数据和API
+     */
+    rowSelection?: Omit<RowSelectionReturnType<RecordType>, 'rowSelection'> & {
+        selectedRows: ComputedRef<RecordType[]>;
+    };
 };

package/es/src/ap-table/style/ap-table.css

@@ -90,12 +90,14 @@
 }
 .aplus-ap-table .ant-table-column-sorters {
   justify-content: unset;
+  display: inline-flex;
 }
 .aplus-ap-table .ant-table-column-sorters .ant-table-column-title {
   flex: unset;
 }
 .aplus-ap-table .ant-table-filter-column {
   justify-content: unset;
+  display: inline-flex;
 }
 .aplus-ap-table .ant-table-filter-column .ant-table-column-title {
   flex: unset;

package/es/src/ap-tag/ap-tag-group.vue.d.ts

@@ -1,19 +1,24 @@
-import { ApTagGroupProps, ApTagProps } from './interface';
+import { ApTagGroupProps, ApTagProps, EllipsisProps } from './interface';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
 
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ApTagGroupProps>, {
+type ApTagGroupSlots = {
+    tooltip?: (props: {
+        tags: ApTagProps[];
+    }) => void;
+};
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ApTagGroupProps>, {
     list: () => ApTagProps[];
     space: number;
-    ellipsisColor: string;
+    ellipsis: () => {};
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ApTagGroupProps>, {
     list: () => ApTagProps[];
     space: number;
-    ellipsisColor: string;
+    ellipsis: () => {};
 }>>>, {
+    ellipsis: EllipsisProps;
     space: number;
     list: ApTagProps[];
-    ellipsisColor: string;
-}, {}>;
+}, {}>, Readonly<ApTagGroupSlots> & ApTagGroupSlots>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -32,3 +37,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/src/ap-tag/ap-tag-group.vue.mjs

@@ -1,12 +1,15 @@
-import { createElementVNode as e, defineComponent as z, ref as p, computed as m, unref as l, nextTick as g, watch as L, onMounted as W, onUnmounted as b, openBlock as f, createBlock as v, withCtx as y, normalizeClass as F, normalizeStyle as w, createElementBlock as N, Fragment as T, renderList as q, mergeProps as A, createCommentVNode as M } from "vue";
-import { Tooltip as P } from "ant-design-vue";
-import V from "@ant-design/icons-vue";
+import { createElementVNode as t, defineComponent as N, ref as v, computed as s, unref as o, nextTick as g, watch as P, onMounted as S, onUnmounted as j, openBlock as u, createBlock as h, mergeProps as _, withCtx as y, renderSlot as q, createTextVNode as G, toDisplayString as k, normalizeClass as b, normalizeStyle as E, createElementBlock as B, Fragment as R, renderList as I, createCommentVNode as U } from "vue";
+import { Tooltip as H } from "ant-design-vue";
+import J from "@ant-design/icons-vue";
 import "./ap-tag.vue2.mjs";
 import "../config-provider/index.mjs";
+import { omit as K } from "lodash-unified";
 import "./style/ap-tag-group.css";
-import { useNamespace as $ } from "../config-provider/hooks/use-namespace.mjs";
-import j from "./ap-tag.vue.mjs";
-const I = /* @__PURE__ */ e("svg", {
+import { useLocale as O } from "../config-provider/hooks/use-locale.mjs";
+import { useGlobalConfig as Q } from "../config-provider/hooks/use-global-config.mjs";
+import { useNamespace as X } from "../config-provider/hooks/use-namespace.mjs";
+import Y from "./ap-tag.vue.mjs";
+const Z = /* @__PURE__ */ t("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink",
   fill: "none",
@@ -15,9 +18,9 @@ const I = /* @__PURE__ */ e("svg", {
   height: "16",
   viewBox: "0 0 16 16"
 }, [
-  /* @__PURE__ */ e("defs", null, [
-    /* @__PURE__ */ e("clipPath", { id: "master_svg0_1133_24991" }, [
-      /* @__PURE__ */ e("rect", {
+  /* @__PURE__ */ t("defs", null, [
+    /* @__PURE__ */ t("clipPath", { id: "master_svg0_1133_24991" }, [
+      /* @__PURE__ */ t("rect", {
         x: "0",
         y: "0",
         width: "16",
@@ -26,9 +29,9 @@ const I = /* @__PURE__ */ e("svg", {
       })
     ])
   ]),
-  /* @__PURE__ */ e("g", { "clip-path": "url(#master_svg0_1133_24991)" }, [
-    /* @__PURE__ */ e("g", null, [
-      /* @__PURE__ */ e("ellipse", {
+  /* @__PURE__ */ t("g", { "clip-path": "url(#master_svg0_1133_24991)" }, [
+    /* @__PURE__ */ t("g", null, [
+      /* @__PURE__ */ t("ellipse", {
         cx: "8",
         cy: "8",
         rx: "1",
@@ -37,8 +40,8 @@ const I = /* @__PURE__ */ e("svg", {
         "fill-opacity": "1"
       })
     ]),
-    /* @__PURE__ */ e("g", null, [
-      /* @__PURE__ */ e("ellipse", {
+    /* @__PURE__ */ t("g", null, [
+      /* @__PURE__ */ t("ellipse", {
         cx: "3.25",
         cy: "8",
         rx: "1",
@@ -47,8 +50,8 @@ const I = /* @__PURE__ */ e("svg", {
         "fill-opacity": "1"
       })
     ]),
-    /* @__PURE__ */ e("g", null, [
-      /* @__PURE__ */ e("ellipse", {
+    /* @__PURE__ */ t("g", null, [
+      /* @__PURE__ */ t("ellipse", {
         cx: "12.75",
         cy: "8",
         rx: "1",
@@ -58,80 +61,97 @@ const I = /* @__PURE__ */ e("svg", {
       })
     ])
   ])
-], -1), O = /* @__PURE__ */ z({
+], -1), pe = /* @__PURE__ */ N({
   __name: "ap-tag-group",
   props: {
     list: { default: () => [] },
     space: { default: 4 },
-    ellipsisColor: { default: "#34B77C" }
+    ellipsisColor: {},
+    ellipsis: { default: () => ({}) }
   },
-  setup(_) {
-    const r = _, { b: x } = $("tag-group"), a = p(), h = m(() => l(o) < r.list.length), C = m(() => r.list.slice(0, l(o))), o = p(0), c = p(0), u = p(r.list.length), k = m(() => r.list.map((t) => t.text).join("、")), B = m(() => [x()].filter(Boolean)), i = () => {
-      if (!a.value)
+  setup(T) {
+    const { t: V } = O(), l = T, z = Q("uiMode"), { b: L, bm: x } = X("tag-group"), c = v(), r = s(() => ({
+      ...{
+        iconColor: "#34B77C",
+        symbol: "icon",
+        text: V("ap.common.more")
+      },
+      ...l.ellipsis
+    })), M = s(() => r.value.tooltip && typeof r.value.tooltip == "object" ? K(r.value.tooltip, ["trigger", "title"]) : {}), d = s(() => o(n) < l.list.length), $ = s(() => l.list.slice(0, o(n))), n = v(0), p = v(0), m = v(l.list.length), W = s(() => l.list.map((e) => e.text).join("、")), A = s(() => [L()].filter(Boolean)), D = s(() => z.value === "aplus" ? [x("ellipsis-text", "aplus")] : [x("ellipsis-text", "admin")]), f = () => {
+      if (!c.value)
         return;
-      const t = a.value.scrollWidth, n = a.value.clientWidth;
-      if (l(c) <= l(u)) {
-        const s = Math.floor((l(c) + l(u)) / 2);
-        t <= n ? (o.value = s, c.value = s + 1) : u.value = s - 1, g(() => {
-          requestAnimationFrame(i);
+      const e = c.value.scrollWidth, i = c.value.clientWidth;
+      if (o(p) <= o(m)) {
+        const a = Math.floor((o(p) + o(m)) / 2);
+        e <= i ? (n.value = a, p.value = a + 1) : m.value = a - 1, g(() => {
+          requestAnimationFrame(f);
         });
       } else
-        t > n && (o.value = o.value - 1, g(() => {
-          requestAnimationFrame(i);
+        e > i && (n.value = n.value - 1, g(() => {
+          requestAnimationFrame(f);
         }));
-    }, d = () => {
-      c.value = 0, u.value = r.list.length, o.value = 0;
+    }, w = () => {
+      p.value = 0, m.value = l.list.length, n.value = 0;
     };
-    return L(
-      () => r.list,
-      (t, n) => {
-        t !== n && (d(), g(() => i()));
+    P(
+      () => l.list,
+      (e, i) => {
+        e !== i && (w(), g(() => f()));
       },
       {
         immediate: !0
       }
-    ), W(() => {
-      window.addEventListener("resize", () => {
-        d(), i();
-      });
-    }), b(() => {
-      window.removeEventListener("resize", () => {
-        d(), i();
-      });
-    }), (t, n) => (f(), v(l(P), {
-      title: k.value,
-      trigger: "hover"
-    }, {
+    );
+    const C = () => {
+      w(), f();
+    };
+    return S(() => {
+      [["ellipsisColor", "ellipse.color"]].forEach(([e, i]) => {
+        l[e] && console.error(
+          `[ApTagGroup]: \`${e}\` is deprecated, please use \`${i}\` instead.`
+        );
+      }), window.addEventListener("resize", C);
+    }), j(() => {
+      window.removeEventListener("resize", C);
+    }), (e, i) => (u(), h(o(H), _({ trigger: "hover" }, M.value), {
+      title: y(() => [
+        q(e.$slots, "tooltip", { tags: e.list }, () => [
+          G(k(W.value), 1)
+        ])
+      ]),
       default: y(() => [
-        e("div", {
-          class: F(B.value),
+        t("div", {
+          class: b(A.value),
           ref_key: "container",
-          ref: a,
-          style: w({
-            pointerEvents: h.value ? "auto" : "none"
+          ref: c,
+          style: E({
+            pointerEvents: d.value ? "auto" : "none"
           })
         }, [
-          (f(!0), N(T, null, q(C.value, (s, E) => (f(), v(j, A({ ref_for: !0 }, s, {
-            key: E,
+          (u(!0), B(R, null, I($.value, (a, F) => (u(), h(Y, _({ ref_for: !0 }, a, {
+            key: F,
             style: {
-              marginRight: `${t.space}px`
+              marginRight: `${e.space}px`
             }
           }), null, 16, ["style"]))), 128)),
-          h.value ? (f(), v(l(V), {
+          d.value && r.value.symbol === "icon" ? (u(), h(o(J), {
             key: 0,
-            style: w({ color: t.ellipsisColor })
+            style: E({ color: e.ellipsisColor || r.value.iconColor })
           }, {
             component: y(() => [
-              I
+              Z
             ]),
             _: 1
-          }, 8, ["style"])) : M("", !0)
+          }, 8, ["style"])) : d.value && r.value.symbol === "text" ? (u(), B("span", {
+            key: 1,
+            class: b(D.value)
+          }, k(r.value.text), 3)) : U("", !0)
         ], 6)
       ]),
-      _: 1
-    }, 8, ["title"]));
+      _: 3
+    }, 16));
   }
 });
 export {
-  O as default
+  pe as default
 };

package/es/src/ap-tag/interface.d.ts

@@ -1,3 +1,5 @@
+import { TooltipProps } from 'ant-design-vue/es/tooltip';
+
 export interface ApTagProps {
     /**
      * 标签内容
@@ -17,6 +19,27 @@ export interface ApTagProps {
      */
     disabled?: boolean;
 }
+export type EllipsisProps = {
+    /**
+     * 省略号标志
+     * @default 'icon' - 内置图标不能自定义
+     * @type 'icon' | 'text'
+     */
+    symbol?: 'icon' | 'text';
+    /**
+     * 省略号文本 - symbol为text时生效
+     */
+    text?: string;
+    /**
+     * 省略号颜色 - symbol为icon时生效
+     * @default #34B77C
+     */
+    iconColor?: string;
+    /**
+     * 省略号气泡内容
+     */
+    tooltip?: Omit<TooltipProps, 'trigger' | 'title'>;
+};
 export interface ApTagGroupProps {
     /**
      * 标签组内容
@@ -32,4 +55,5 @@ export interface ApTagGroupProps {
      * @default #34B77C
      */
     ellipsisColor?: string;
+    ellipsis?: EllipsisProps;
 }

package/es/src/ap-tag/style/ap-tag-group.css

@@ -5,3 +5,11 @@
   white-space: nowrap;
   align-items: center;
 }
+.aplus-tag-group-ellipsis-text--admin {
+  font-size: 12px;
+  color: #1890FF;
+}
+.aplus-tag-group-ellipsis-text--aplus {
+  font-size: 12px;
+  color: #0070FF;
+}

package/es/src/ap-upload/apUpload.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType, VNode, DefineComponent, ComputedRef, ComponentOptionsMixin, PublicProps, ExtractPropTypes, RendererNode, RendererElement } from 'vue';
 import { FileUploadType, BeforeUpload, CustomRequest } from './apUploadTypes';
-import { accessCreate } from '@aplus-frontend/oss';
+import { GetOssAccess } from './hooks/useOss';
 
 declare function clear(): void;
 declare const _default: DefineComponent<{
@@ -42,7 +42,7 @@ declare const _default: DefineComponent<{
         type: PropType<CustomRequest>;
     };
     getOssAccess: {
-        type: PropType<() => Promise< accessCreate>>;
+        type: PropType<GetOssAccess>;
     };
 }, {
     done: ComputedRef<boolean>;
@@ -88,7 +88,7 @@ declare const _default: DefineComponent<{
         type: PropType<CustomRequest>;
     };
     getOssAccess: {
-        type: PropType<() => Promise< accessCreate>>;
+        type: PropType<GetOssAccess>;
     };
 }>> & {
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;

package/es/src/ap-upload/hooks/useOss.d.ts

@@ -1,9 +1,9 @@
-import { client, Oss } from '@aplus-frontend/oss';
+import { accessCreate, Oss } from '@aplus-frontend/oss';
 import { Translator } from '../../config-provider';
 import { Ref } from 'vue';
 
 export type { Oss } from '@aplus-frontend/oss';
-export type GetOssAccess = Parameters<typeof client.initOssClient>[0]['getOssAccess'];
+export type GetOssAccess = () => Promise<accessCreate>;
 export declare function injectLocaleToOss(tValue: Translator, langValue: Ref<string>): void;
 declare function put({ file, dirName, oss, successCallBack, errorCallBack, progressCallBack }: {
     file: File;
@@ -21,4 +21,4 @@ export declare function useOssInit(getOssAccess: GetOssAccess): Promise<{
     client: Oss;
     put: typeof put;
 }>;
-export declare function getOssInstance(getOssAccess: Parameters<typeof client.initOssClient>[0]['getOssAccess']): Promise<Oss>;
+export declare function getOssInstance(getOssAccess: GetOssAccess): Promise<Oss>;

package/es/src/business/ap-select-layout/index.css

@@ -0,0 +1,117 @@
+.aplus-ap-select-layout {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+.aplus-ap-select-layout .v-enter-active,
+.aplus-ap-select-layout .v-leave-active {
+  transition: all 0.2s, background 0s;
+}
+.aplus-ap-select-layout .v-enter-from,
+.aplus-ap-select-layout .v-leave-to {
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  margin-right: 0;
+}
+.aplus-ap-select-layout-side {
+  display: flex;
+  flex-direction: column;
+  width: 214px;
+  min-width: 214px;
+  max-width: 214px;
+  margin-right: 16px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.aplus-ap-select-layout-side__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e9e9e9;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.aplus-ap-select-layout-side__header > h3 {
+  margin: 0;
+  color: #333;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 18px;
+}
+.aplus-ap-select-layout-side__header--imgWrap {
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 24px;
+}
+.aplus-ap-select-layout-side__header--imgWrap:hover {
+  background: #f5f5f5;
+}
+.aplus-ap-select-layout-side__header--imgWrap > img {
+  width: 24px;
+  height: 24px;
+}
+.aplus-ap-select-layout-side__body {
+  position: relative;
+  flex: 1;
+}
+.aplus-ap-select-layout-side__body--search {
+  margin: 10px 0;
+  padding: 0 16px;
+}
+.aplus-ap-select-layout-side__body--scroll {
+  position: absolute;
+  inset: 52px 0 0;
+  overflow-y: auto;
+  padding: 0 16px;
+}
+.aplus-ap-select-layout-side__body--scroll-item {
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  overflow: hidden;
+  color: #333;
+  line-height: 22px;
+  width: calc(214px - 32px);
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.aplus-ap-select-layout-side__body--scroll-item:hover {
+  background: #f5f5f5;
+}
+.aplus-ap-select-layout-side__body--scroll-item.active {
+  background-color: #e4faf1;
+  color: #34b77c;
+  font-weight: bold;
+}
+.aplus-ap-select-layout-content {
+  flex: 1;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.aplus-ap-select-layout-content__header {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 16px 16px 0;
+  box-sizing: content-box;
+  background: #fff;
+}
+.aplus-ap-select-layout-content__header--imgWrap {
+  margin-right: 10px;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 24px;
+}
+.aplus-ap-select-layout-content__header--imgWrap:hover {
+  background: #f5f5f5;
+}
+.aplus-ap-select-layout-content__header--title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 32px;
+}

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

@@ -0,0 +1,4 @@
+import { default as SelectLayout } from './select-layout.vue';
+
+export * from './interface';
+export { SelectLayout };

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

@@ -0,0 +1,9 @@
+export interface ApSelectItem {
+    name: string;
+    value: string;
+}
+export interface ApSelectLayoutProps<T extends ApSelectItem> {
+    title: string;
+    request: () => Promise<T[]>;
+    defaultFold?: boolean;
+}