@aplus-frontend/ui 0.4.34 → 0.5.0-beta.1

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

@@ -0,0 +1,264 @@
+import { ApFormSearchFormProps } from '../ap-form/interface';
+import { ApTablePaginationConfig, ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, ExtraProColumnType, FieldPropsType, RequestData, ValueEnum } from '../ap-table/interface';
+import { Recordable } from '../type';
+import { TableProps } from '@aplus-frontend/antdv';
+import { ColumnFilterItem, SortOrder, TableRowSelection } from '@aplus-frontend/antdv/es/table/interface';
+import { ComputedRef, CSSProperties, Ref, VNode } from 'vue';
+import { VxeTablePropTypes, VxeColumnPropTypes, VxeTableProps, VxeTableDefines, VxeColumnSlots } from 'vxe-table';
+export type ColConfigType = VxeTableDefines.ColumnOptions;
+export type ApGridColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ExtraProColumnType<RecordType>, 'sorter' | 'rowSpan' | 'customCell' | 'customHeaderCell' | 'minWidth'> & {
+    children?: ApGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>[];
+    /**
+     * 表单项所占据的格子数（1-24格）
+     */
+    span?: number;
+    /**
+     * 列的最小宽度
+     */
+    minWidth?: string | number;
+    /**
+     * 在title之后展示一个icon并触发tooltip
+     */
+    tooltip?: string;
+    /**
+     * 是否可以复制
+     * @deprecated 暂未实现
+     */
+    copyable?: boolean;
+    /**
+     * 配置溢出隐藏的方式
+     */
+    ellipsis?: VxeTablePropTypes.ShowOverflow;
+    /**
+     * 是否搜索表单中隐藏
+     */
+    hideInSearch?: boolean;
+    /**
+     * 是否在表格中隐藏
+     */
+    hideInTable?: boolean;
+    /**
+     * 值的枚举，会自动转化把值当成 key 来取出要显示的内容（也会作为select等组件的选项）
+     */
+    valueEnum?: ValueEnum;
+    /**
+     * 自定义查询表单渲染
+     */
+    customRenderFormItem?: (config: ApGridColumnType<RecordType>) => any;
+    /**
+     * 自定义渲染文本，和customRender相比，其必须返回字符串，并且后续的渲染（例如copy/ellipsis）都将使用这个值
+     */
+    renderText?: (option: {
+        value: any;
+        text: any;
+        record: RecordType;
+        index: number;
+        renderIndex: number;
+        column: ApGridColumnType<RecordType>;
+    }) => string;
+    /**
+     * 指定值类型（将会用于默认渲染和查询表单生成）
+     */
+    valueType?: MergedValueType;
+    /**
+     * 值类型额外配置的参数（用于查询表单渲染）
+     */
+    fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>;
+    /**
+     * 用于表单项排序的字段
+     * @description 值越大，越排在前面，请设置正整数，设置为0或负数将会无效
+     */
+    order?: number;
+    /**
+     * 用于指定列排序，设置为true表示后端排序，否则为前端排序
+     * Table同时只能设置一种排序类型，当至少有一个后端排序列时，显式设置为前端排序的列将不会生效
+     */
+    sorter?: true | {
+        type?: VxeColumnPropTypes.SortType;
+        by?: VxeColumnPropTypes.SortBy;
+    };
+    /**
+     * 表头的菜单筛选项，设置为true后会尝试使用valueEnum生成filters
+     */
+    filters?: Omit<ColumnFilterItem, 'children'>[] | true;
+    /**
+     * 自定义渲染，添加了`originalNode、originalText`
+     * @param opt
+     * @returns
+     */
+    customRender?: (opt: {
+        value: any;
+        text: any;
+        record: RecordType;
+        index: number;
+        renderIndex: number;
+        column: ApGridColumnType<RecordType>;
+        originalNode?: VNode;
+        originalText?: any;
+    }) => any;
+} : never;
+export type ApGridRowSelection<RecordType> = Pick<TableRowSelection<RecordType>, 'defaultSelectedRowKeys' | 'type' | 'preserveSelectedRowKeys' | 'onChange' | 'fixed' | 'columnWidth' | 'columnTitle'> & {
+    /**
+     * 设置禁用的列
+     * @param row
+     * @returns
+     */
+    disabled?: (row: RecordType) => boolean;
+};
+export type ApGridProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size' | 'rowSelection' | 'rowKey' | 'rowClassName' | 'footer'> & Pick<VxeTableProps<RecordType>, 'rowClassName' | 'stripe' | 'headerRowClassName' | 'footerRowClassName' | 'cellClassName' | 'headerCellClassName' | 'footerCellClassName' | 'rowStyle' | 'headerRowStyle' | 'footerRowStyle' | 'cellStyle' | 'headerCellStyle' | 'footerCellStyle' | 'height' | 'minHeight' | 'maxHeight' | 'mergeCells' | 'mergeFooterItems' | 'cellConfig'> & {
+    /**
+     * 列配置
+     */
+    columns?: ApGridColumnType<RecordType, any>[];
+    /**
+     * 行选中配置
+     */
+    rowSelection?: true | ApGridRowSelection<RecordType>;
+    /**
+     * 是否启用卡片样式
+     */
+    card?: boolean;
+    /**
+     * request额外请求的参数
+     * 如果传入响应式数据，将会在变更后重新执行
+     */
+    params?: ParamsType | Ref<ParamsType>;
+    /**
+     * 请求获取dataSource
+     * @param params
+     * @returns
+     */
+    request?: (params: Partial<ParamsType> & {
+        pageSize: number;
+        current: number;
+        sort?: Record<string, SortOrder>;
+        filter?: Recordable<any>;
+    }) => Promise<Partial<RequestData<RecordType>>>;
+    /**
+     * 表格的默认数据源，这些数据源将会在第一次请求后被替换
+     */
+    defaultData?: RecordType[];
+    /**
+     * 表格的最终数据源（设置后request和defaultData都不会生效），离线表格的效果
+     */
+    dataSource?: RecordType[];
+    /**
+     * 表格loading状态变更后触发
+     * @param loading
+     * @returns
+     */
+    onLoadingChange?: (loading: boolean) => void;
+    /**
+     * 查询表单配置，设置为false表示不渲染查询表单
+     */
+    searchForm?: false | ApFormSearchFormProps;
+    /**
+     * 查询表单提交之前，一般用于自定义对查询数据进行变更
+     * @param params
+     * @returns
+     */
+    beforeSearchSubmit?: (params: Partial<ParamsType>) => any;
+    /**
+     * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize
+     */
+    pagination?: false | ApTablePaginationConfig;
+    /**
+     * 自定义查询表单容器样式
+     */
+    searchFormWrapperStyle?: CSSProperties;
+    /**
+     * 自定义表格样式
+     */
+    tableWrapperStyle?: CSSProperties;
+    /**
+     * 是否手动发起第一次网络请求
+     */
+    manual?: boolean;
+    /**
+     * 表格尺寸（只支持中等大小和小尺寸）
+     */
+    size?: 'medium' | 'small' | 'mini';
+    /**
+     * 表格是否自适应高度
+     * @deprecated 暂未实现
+     */
+    adaptive?: boolean;
+    /**
+     * 设置表格列是否可以resize，还可以进行更多可变尺寸配置
+     */
+    columnResizable?: boolean | VxeTablePropTypes.ResizableConfig;
+    rowKey?: string;
+    /**
+     * 指定用于渲染footer的数据，支持函数
+     */
+    footer?: VxeTablePropTypes.FooterData | VxeTablePropTypes.FooterMethod<RecordType>;
+    /**
+     * 设置虚拟滚动
+     */
+    virtual?: false | ApGridVirtualConfig;
+    /**
+     * 设置可展开及其配置
+     */
+    expandable?: VxeTablePropTypes.ExpandConfig<RecordType> & {
+        /**
+         * 自定义渲染内容
+         */
+        renderContent: VxeColumnSlots<RecordType>['content'];
+        /**
+         * 展开列占据的宽度，默认为auto
+         */
+        width?: string | number;
+        /**
+         * 展开列的title
+         */
+        title?: string;
+    };
+};
+export type ApGridVirtualConfig = {
+    x?: false | number;
+    y?: false | number;
+};
+export type ApGridColumnProps<RecordType> = {
+    column: ApGridColumnType<RecordType>;
+};
+export type ApGridExpose<SearchParamsType = Recordable, RecordType = any> = {
+    /**
+     * 表格查询提交（重制页码但查询参数不会重置）
+     * @returns
+     */
+    submit: () => void;
+    /**
+     * 表格查询重置（重置页码和查询参数）
+     * @returns
+     */
+    reset: () => void;
+    /**
+     * 表格刷新当页数据
+     * @returns
+     */
+    refresh: () => void;
+    /**
+     * 设置查询表单数据
+     * @param values
+     * @returns
+     */
+    setSearchFormValues: (values: Partial<SearchParamsType>) => void;
+    /**
+     * 获取查询表单数据
+     * @param transform 是否获取转换后的数据 默认为`false`
+     * @returns
+     */
+    getSearchFormValues: (transform?: boolean) => (Partial<SearchParamsType> & Recordable<any>) | undefined;
+    /**
+     * 获取最终现实的列配置
+     * @returns
+     */
+    getShowColumns: () => ApGridColumnType<RecordType>[];
+    /**
+     * 行选中相关
+     */
+    rowSelection: {
+        selectedRows: ComputedRef<RecordType[]>;
+        clearAll: () => void;
+    };
+};

package/es/src/ap-grid/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/ap-grid/style/css.js

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

package/es/src/ap-grid/style/index.js

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

package/es/src/ap-grid/utils/col.d.ts

@@ -0,0 +1,20 @@
+import { ApGridColumnType, ColConfigType } from '../interface';
+import { ValueTypeRenderConfig } from '../../config-provider';
+/**
+ * 转换分组页
+ * @param columnConfig
+ * @returns
+ */
+export declare function transformToColGroup<RecordType>(columnConfig: ApGridColumnType<RecordType>, color: string, className: string): ColConfigType;
+/**
+ * 转换渲染列
+ * @param columnConfig
+ * @returns
+ */
+export declare function transformToColumn<RecordType>(columnConfig: ApGridColumnType<RecordType>, color: string, className: string, extraValueType?: Record<string, ValueTypeRenderConfig>): ColConfigType;
+/**
+ * 将ApColumn风格的列配置转换成适合VxeTable渲染的数据结构
+ * @param rawColumn
+ * @returns
+ */
+export declare function transformCol<RecordType>(rawColumn: ApGridColumnType<RecordType>, color: string, className: string, extraValueType?: Record<string, ValueTypeRenderConfig>): ColConfigType;

package/es/src/ap-grid/utils/col.mjs

@@ -0,0 +1,106 @@
+import { createVNode as E, Fragment as M } from "vue";
+import { isUndefined as S, isArray as B, isString as v, isBoolean as F, pick as w } from "lodash-unified";
+import { valueEnumToArray as W, getTableTitle as A, getTableRenderType as j, getTableRenderProps as k, getTableCellRenderNode as z } from "../../ap-table/utils.mjs";
+function O(e) {
+  if (!S(e))
+    return B(e) ? e.reduce((r, i) => v(i) ? `${r}.${i}` : `${r}[${i}]`, "") : String(e);
+}
+function R(e) {
+  if (e)
+    return e === !0 ? "left" : e;
+}
+function G(e) {
+  return F(e) ? {
+    sortable: e
+  } : e ? {
+    sortable: !0,
+    sortType: e == null ? void 0 : e.type,
+    sortBy: e == null ? void 0 : e.by
+  } : {
+    sortable: !1
+  };
+}
+function H(e) {
+  let r;
+  return F(e.filters) && e.valueEnum ? r = W(e.valueEnum) : r = e.filters, r == null ? void 0 : r.map((i) => ({
+    label: v(i.text) ? i.text : "",
+    value: i.value
+  }));
+}
+function N(e) {
+  if (e)
+    return (r) => e(r.value, r.row);
+}
+function u(e, r, i) {
+  const d = w(e, ["width", "minWidth", "align"]);
+  return d.field = O(e.dataIndex), d.fixed = R(e.fixed), d.title = e.title, d.slots = {
+    header: () => A(e, i, void 0, r)
+  }, d.headerAlign = e.align, d.showOverflow = e.ellipsis, d.showHeaderOverflow = e.ellipsis, d;
+}
+function y(e, r, i, d) {
+  const t = w(e, ["width", "minWidth", "align", "resizable"]);
+  t.field = O(e.dataIndex), t.fixed = R(e.fixed), t.headerAlign = e.align, t.footerAlign = e.align, t.showOverflow = e.ellipsis, t.showFooterOverflow = e.ellipsis, Object.assign(t, G(e.sorter)), t.filters = H(e), t.filterMultiple = e.filterMultiple, t.filterMethod = N(e.onFilter), t.title = e.title;
+  const h = ({
+    value: s,
+    ...n
+  }) => {
+    var p, x;
+    const l = j(e), a = k({
+      ...e,
+      valueType: l
+    }, {
+      value: s,
+      ...n
+    }), f = z(l, a, n.record, d), $ = ((p = e.renderText) == null ? void 0 : p.call(e, {
+      value: s,
+      ...n
+    })) || s;
+    let T = e.renderText ? E(M, null, [(x = e.renderText) == null ? void 0 : x.call(e, {
+      value: s,
+      ...n
+    })]) : f;
+    return e.customRender && (T = e.customRender({
+      value: s,
+      ...n,
+      column: e,
+      originalNode: T,
+      originalText: $
+    })), T;
+  };
+  return t.slots = {
+    header: () => A(e, i, void 0, r),
+    default: ({
+      row: s,
+      rowIndex: n
+    }) => h({
+      value: s[t.field],
+      text: s[t.field],
+      record: s,
+      index: n,
+      renderIndex: n,
+      column: e
+    })
+  }, t;
+}
+function I(e, r, i, d) {
+  var s;
+  if (!((s = e.children) != null && s.length))
+    return y(e, r, i, d);
+  function t(n) {
+    return n.map((l) => {
+      var a;
+      if ((a = l.children) != null && a.length) {
+        const f = u(l, r, i);
+        return f.children = t(l.children), f;
+      }
+      return y(l, r, i, d);
+    });
+  }
+  const h = u(e, r, i);
+  return h.children = t(e.children), h;
+}
+export {
+  I as transformCol,
+  u as transformToColGroup,
+  y as transformToColumn
+};

package/es/src/ap-grid/utils/renderer.d.ts

@@ -0,0 +1,3 @@
+import { ApGridColumnType } from '../interface';
+import { ValueTypeRenderConfig } from '../../config-provider';
+export declare function renderWithColumns<RecordType>(columns: ApGridColumnType<RecordType>[], color: string, className: string, extraValueType?: Record<string, ValueTypeRenderConfig>): import("vue/jsx-runtime").JSX.Element[];

package/es/src/ap-grid/utils/renderer.mjs

@@ -0,0 +1,21 @@
+import { createVNode as m } from "vue";
+import { VxeColumn as u, VxeColgroup as p } from "vxe-table";
+import { transformCol as d } from "./col.mjs";
+function n(r) {
+  var e;
+  return (e = r.children) != null && e.length ? m(p, r, {
+    ...r.slots || {},
+    default: () => {
+      var t;
+      return (t = r.children) == null ? void 0 : t.map((o) => n(o));
+    }
+  }) : m(u, r, {
+    ...r.slots || {}
+  });
+}
+function C(r, e, t, o) {
+  return r.map((l) => n(d(l, e, t, o)));
+}
+export {
+  C as renderWithColumns
+};

package/es/src/ap-grid/utils/table.d.ts

@@ -0,0 +1,13 @@
+import { VxeTableEventProps, VxeTableProps } from 'vxe-table';
+import { ApGridProps, ApGridRowSelection } from '../interface';
+import { RowSelectionType } from '@aplus-frontend/antdv/es/table/interface';
+export declare function toVxeProps<RecordType>(props: any): VxeTableProps<RecordType> & VxeTableEventProps<RecordType>;
+export declare function getRowSelectionProps(rowSelection: ApGridRowSelection<any> | true): {
+    type: RowSelectionType;
+    width: string | number;
+};
+export declare function getRowExpandProps(config: ApGridProps['expandable']): {
+    readonly type: "expand";
+    readonly title: string | undefined;
+    readonly width: string | number;
+};

package/es/src/ap-grid/utils/table.mjs

@@ -0,0 +1,64 @@
+import { isUndefined as d, omit as a, isFunction as c, isNumber as f } from "lodash-unified";
+const h = 30, b = 50;
+function y(e) {
+  var i, l, n;
+  const t = {
+    ...e
+  };
+  if (e.columnResizable && (t.columnConfig ? t.columnConfig.resizable = !0 : t.columnConfig = {
+    resizable: !0
+  }), e.rowSelection) {
+    const o = e.rowSelection === !0 ? {} : e.rowSelection;
+    o.type === "radio" ? t.radioConfig = {
+      highlight: !0,
+      checkMethod({ row: r }) {
+        return o.disabled ? !o.disabled(r) : !0;
+      },
+      checkRowKey: (i = o.defaultSelectedRowKeys) == null ? void 0 : i[0],
+      reserve: d(o.preserveSelectedRowKeys) ? !0 : o.preserveSelectedRowKeys
+    } : t.checkboxConfig = {
+      highlight: !0,
+      checkMethod({ row: r }) {
+        return o.disabled ? !o.disabled(r) : !0;
+      },
+      checkRowKeys: o.defaultSelectedRowKeys,
+      reserve: d(o.preserveSelectedRowKeys) ? !0 : o.preserveSelectedRowKeys
+    };
+  }
+  return t.border = e.bordered, e.expandable && (t.expandConfig = a(e.expandable, [
+    "renderContent",
+    "width",
+    "title"
+  ])), e.footer && (t.showFooter = !0, c(e.footer) ? t.footerMethod = e.footer : t.footerData = e.footer), e.virtual === !1 ? (t.virtualXConfig = {
+    enabled: !1
+  }, t.virtualYConfig = {
+    enabled: !1
+  }) : (u(t, "X", (l = e.virtual) == null ? void 0 : l.x), u(t, "Y", (n = e.virtual) == null ? void 0 : n.y)), t;
+}
+function u(e, t, i) {
+  const l = t === "X", n = l ? "virtualXConfig" : "virtualYConfig", o = i !== !1, r = l ? h : b, s = f(i) && i >= 0 ? i : r;
+  e[n] = {
+    enabled: o,
+    gt: s
+  };
+}
+function C(e) {
+  const t = e === !0 || !e.type ? "checkbox" : e.type, i = e === !0 ? 60 : e.columnWidth || 60;
+  return {
+    type: t,
+    width: i
+  };
+}
+function R(e) {
+  const t = (e == null ? void 0 : e.width) || "auto";
+  return {
+    type: "expand",
+    title: e == null ? void 0 : e.title,
+    width: t
+  };
+}
+export {
+  R as getRowExpandProps,
+  C as getRowSelectionProps,
+  y as toVxeProps
+};

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

@@ -20,6 +20,8 @@ declare const _default: <RecordType>(__VLS_props: NonNullable<Awaited<typeof __V
             unSelectAll: () => void;
             clearAll: () => void;
             toggleSelect: (item: RecordType) => void;
+            selectMulti: (items: RecordType[]) => void;
+            unSelectMulti: (items: RecordType[]) => void;
             selectedRows: ComputedRef<RecordType[]>;
         };
         scrollBar: {

package/es/src/ap-table/components/setting/select-group/index.vue2.mjs

@@ -1,21 +1,21 @@
-import { defineComponent as E, ref as P, computed as f, unref as r, watch as U, createElementBlock as p, openBlock as s, createElementVNode as v, normalizeClass as x, createVNode as u, withCtx as i, createBlock as h, resolveDynamicComponent as k, Fragment as D, renderList as L, mergeProps as j } from "vue";
-import { Checkbox as w, Row as z, Col as F } from "@aplus-frontend/antdv";
+import { defineComponent as P, ref as U, computed as p, unref as l, watch as x, createElementBlock as v, openBlock as s, createElementVNode as k, normalizeClass as D, createVNode as u, withCtx as i, createBlock as h, resolveDynamicComponent as w, Fragment as L, renderList as j, mergeProps as z } from "vue";
+import { Checkbox as b, Row as F, Col as I } from "@aplus-frontend/antdv";
 import "../../../../config-provider/index.mjs";
-import { useInjectApTable as I } from "../../../context.mjs";
-import { cloneLabelNode as b } from "../utils.mjs";
-import { useNamespace as R } from "../../../../config-provider/hooks/use-namespace.mjs";
-const K = /* @__PURE__ */ E({
+import { useInjectApTable as R } from "../../../context.mjs";
+import { getLabelNode as C } from "../utils.mjs";
+import { useNamespace as T } from "../../../../config-provider/hooks/use-namespace.mjs";
+const M = /* @__PURE__ */ P({
   __name: "index",
   props: {
     value: {}
   },
   setup(y) {
-    const t = y, { b: C } = R("select-group"), c = P(!1), { columnsBackup: _ } = I(), m = f(() => {
+    const t = y, { b: _ } = T("select-group"), d = U(!1), { columnsBackup: g, renderConfig: m } = R(), f = p(() => {
       var e;
-      return (e = r(_)) == null ? void 0 : e.find(
+      return (e = l(g)) == null ? void 0 : e.find(
         (n) => {
-          var l;
-          return n.key === ((l = t.value) == null ? void 0 : l.key);
+          var r;
+          return n.key === ((r = t.value) == null ? void 0 : r.key);
         }
       );
     });
@@ -26,24 +26,24 @@ const K = /* @__PURE__ */ E({
         disabled: t.value.disabled || (e == null ? void 0 : e.disabled)
       };
     }
-    function g(o) {
+    function A(o) {
       const e = t.value;
-      e.children.forEach((n) => n.show = o), e.show = o, c.value = !1;
+      e.children.forEach((n) => n.show = o), e.show = o, d.value = !1;
     }
-    function A(o, e) {
-      const n = t.value, l = n.children.find((a) => a.key === o);
-      if (!l)
+    function B(o, e) {
+      const n = t.value, r = n.children.find((a) => a.key === o);
+      if (!r)
         return;
-      l.show = e;
-      const d = n.children.every((a) => a.show), N = n.children.some((a) => a.show);
-      n.show = d, c.value = N && !d;
+      r.show = e;
+      const c = n.children.every((a) => a.show), E = n.children.some((a) => a.show);
+      n.show = c, d.value = E && !c;
     }
-    const B = f(() => t.value.disabled || t.value.children.every((o) => o.disabled));
-    return U(
+    const N = p(() => t.value.disabled || t.value.children.every((o) => o.disabled));
+    return x(
       () => t.value,
       (o) => {
-        const e = o.children.every((l) => l.show), n = o.children.some((l) => l.show);
-        c.value = n && !e, o.show !== e && (o.show = e);
+        const e = o.children.every((r) => r.show), n = o.children.some((r) => r.show);
+        d.value = n && !e, o.show !== e && (o.show = e);
       },
       {
         deep: !0,
@@ -51,35 +51,35 @@ const K = /* @__PURE__ */ E({
       }
     ), (o, e) => {
       var n;
-      return s(), p("div", null, [
-        v("div", {
-          class: x(r(C)("header"))
+      return s(), v("div", null, [
+        k("div", {
+          class: D(l(_)("header"))
         }, [
-          u(r(w), {
-            indeterminate: c.value,
+          u(l(b), {
+            indeterminate: d.value,
             checked: (n = o.value) == null ? void 0 : n.show,
-            disabled: B.value,
-            "onUpdate:checked": g
+            disabled: N.value,
+            "onUpdate:checked": A
           }, {
             default: i(() => [
-              (s(), h(k(r(b)(m.value.title))))
+              (s(), h(w(l(C)(f.value, l(m)))))
             ]),
             _: 1
           }, 8, ["indeterminate", "checked", "disabled"])
         ], 2),
-        v("div", null, [
-          u(r(z), { align: "middle" }, {
+        k("div", null, [
+          u(l(F), { align: "middle" }, {
             default: i(() => [
-              (s(!0), p(D, null, L(m.value.children, (l) => (s(), h(r(F), {
-                key: l.key,
+              (s(!0), v(L, null, j(f.value.children, (r) => (s(), h(l(I), {
+                key: r.key,
                 span: 8
               }, {
                 default: i(() => [
-                  u(r(w), j({ ref_for: !0 }, S(l), {
-                    "onUpdate:checked": (d) => A(l.key, d)
+                  u(l(b), z({ ref_for: !0 }, S(r), {
+                    "onUpdate:checked": (c) => B(r.key, c)
                   }), {
                     default: i(() => [
-                      (s(), h(k(r(b)(l.title))))
+                      (s(), h(w(l(C)(r, l(m)))))
                     ]),
                     _: 2
                   }, 1040, ["onUpdate:checked"])
@@ -95,5 +95,5 @@ const K = /* @__PURE__ */ E({
   }
 });
 export {
-  K as default
+  M as default
 };