UNPKG

@vrx-arco/use

Version:

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

133 lines (119 loc) 6.04 kB
import * as vue from 'vue'; import { Ref, MaybeRefOrGetter } from 'vue'; import { PaginationProps, TableData, TableColumnData, TreeFieldNames, TreeSelectInstance } from '@arco-design/web-vue'; import { MaybeRef } from '@vueuse/core'; declare const useShareBreakpoints: () => Record<"sm" | "md" | "lg" | "xl" | "xxl", vue.Ref<boolean, boolean>> & { greaterOrEqual: (k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">) => vue.Ref<boolean, boolean>; smallerOrEqual: (k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">) => vue.Ref<boolean, boolean>; greater(k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): vue.Ref<boolean, boolean>; smaller(k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): vue.Ref<boolean, boolean>; between(a: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">, b: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): vue.Ref<boolean, boolean>; isGreater(k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): boolean; isGreaterOrEqual(k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): boolean; isSmaller(k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): boolean; isSmallerOrEqual(k: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): boolean; isInBetween(a: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">, b: vue.MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "xxl">): boolean; current: () => vue.ComputedRef<string[]>; active(): vue.ComputedRef<string | undefined>; }; declare const propsSlot: <Prop extends Record<string, any> = Record<string, any>>(slots: any, props: Prop, key: keyof Prop, slotKey?: string) => any; interface ProPaginationOption { total: number; pageNum: number; pageSize: number; } type PropPaginationProps = Omit<PaginationProps, 'total' | 'current' | 'pageSize'>; declare const useProPagination: (data: Ref<any[]>, pagination: Ref<true | ProPaginationOption | undefined>, paginationProps: Ref<PaginationProps | undefined>) => { data: vue.ComputedRef<any[]>; total: vue.ComputedRef<number>; current: Ref<number, number>; pageSize: Ref<number, number>; pageChange: (value: number) => void; pageSizeChange: (value: number) => void; } | { total: vue.ComputedRef<number>; current: vue.WritableComputedRef<number, number>; pageSize: vue.WritableComputedRef<number, number>; pageChange: (value: number) => void; pageSizeChange: (value: number) => void; data: Ref<any[], any[]>; }; declare const useGrid: (useColumn: boolean, column: Ref<Record<string, any> | number>, gutter?: Ref<number | [number, number]>) => { gridProps: vue.ComputedRef<{ span: number; gutter: number | [number, number] | undefined; }>; grid: vue.ComputedRef<string>; }; declare const controlVModel: <Props extends Record<string, any>, Key extends keyof Props, Data extends Props[Key]>(props: Props, name: Key, emit: any, init: () => Data) => Ref<Data>; declare const filterEmptyChildren: (children?: any[]) => any[]; declare const useEmptyComponentProvide: () => { empty: vue.Ref<boolean, boolean>; }; declare const useEmptyComponentInject: () => { empty: vue.Ref<boolean, boolean>; }; /** * `<ATableColumn/>` cell 插槽的类型帮助方法 */ interface ATableColumnCell<Record extends TableData = TableData> { record: Record; column: TableColumnData; rowIndex: number; } interface CreateTreeSelectFilterNodeReturn { fieldNames: MaybeRef<TreeFieldNames>; filterTreeNode: TreeSelectInstance['filterTreeNode']; } /** * 解决arco tree-select反人类的默认筛选 key 的帮助方法 * 简洁的封装 tree-select 筛选 title 的逻辑 * * ```vue * <script setup lang="ts"> * import { createTreeSelectFilterNode } from '@vrx-arco/use' * const treeFilter = createTreeSelectFilterNode({title:'name'}) * </script> * <template> * <ATeeSelect v-bind="treeFilter"/> * </template> * ``` * *** 暂时不要将这个方法用到生产,现在还是半成品,可能会更改 *** * @inner */ declare const createTreeSelectFilterNode: (fieldNames: MaybeRef<TreeFieldNames>) => CreateTreeSelectFilterNodeReturn; /** * 解决在使用 arco RangePicker 向后端传递数据时常常要将数据处理成,以下形式的问题 * 要将 ['2024-11-20 11:20:00','2024-11-20 21:20:00'] 数据转换为 {startTime:'2024-11-20 11:20:00',endTime:'2024-11-20 21:20:00'} * * ```vue * <script setup lang="ts"> * import { useRangePickerObjectValue } from '@vrx-arco/use' * const model = ref({}) * const rangePickerValue = useRangePickerObjectValue(model,'startTime','endTime') * * const handleSubmit = ()=>{ * // 提交 以下格式数据{startTime:'2024-11-20 11:20:00',endTime:'2024-11-20 21:20:00'} * fetch('/api/submit',{method:'post',body:JSON.stringify(model.value)}) * } * </script> * <template> * <AForm :model="model" @submit="handleSubmit"> * <AFormItem> * <ARangePicker v-model="rangePickerValue" /> * </AFormItem> * </AForm> * </template> * ``` * *** 暂时不要将这个方法用到生产,现在还是半成品,可能会更改 *** * @inner */ declare const useRangePickerObjectValue: <Modal extends Record<string, any>>(model: MaybeRefOrGetter<Modal>, startKey: keyof Modal, endKey: keyof Modal) => vue.WritableComputedRef<(string | number | Date)[], (string | number | Date)[]>; interface IUseAbortController { onabort?: () => void; } declare function useAbortController(options?: IUseAbortController): { abort: () => void; readonly signal: AbortSignal | undefined; }; export { type ATableColumnCell, type CreateTreeSelectFilterNodeReturn, type IUseAbortController, type ProPaginationOption, type PropPaginationProps, type ATableColumnCell as TableColumnCell, controlVModel, createTreeSelectFilterNode, filterEmptyChildren, propsSlot, useAbortController, useEmptyComponentInject, useEmptyComponentProvide, useGrid, useProPagination, useRangePickerObjectValue, useShareBreakpoints };