@vrx-arco/use
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
289 lines (277 loc) • 8.53 kB
JavaScript
import { createSharedComposable, useBreakpoints } from "@vueuse/core";
import { Comment, Fragment, Text, computed, inject, onBeforeUnmount, provide, ref, toValue, unref } from "vue";
//#region src/useShareBreakpoints/index.ts
const useShareBreakpoints = () => {
const _useShareBreakpoints = createSharedComposable(useBreakpoints);
return _useShareBreakpoints({
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1600
});
};
//#endregion
//#region src/propsSlot/index.ts
const propsSlot = (slots, props, key, slotKey) => {
var _props$key, _slots;
return (_props$key = props[key]) !== null && _props$key !== void 0 ? _props$key : (_slots = slots[slotKey || key]) === null || _slots === void 0 ? void 0 : _slots.call(slots);
};
//#endregion
//#region src/useProPagination/useAutoProPagination.ts
/**
* 自动数据分页
* @param originData
* @param paginationProps
*/
const useAutoProPagination = (originData, paginationProps) => {
const defaultPageSize = computed(() => {
var _paginationProps$valu;
return ((_paginationProps$valu = paginationProps.value) === null || _paginationProps$valu === void 0 ? void 0 : _paginationProps$valu.defaultPageSize) || 10;
});
const total = computed(() => originData.value.length);
const current = ref(1);
const pageSize = ref(defaultPageSize.value || 10);
const getPaginationList = () => {
const pageRange = [0, 0];
pageRange[0] = (current.value - 1) * pageSize.value;
pageRange[1] = pageRange[0] + pageSize.value;
if (pageRange[1] > total.value) pageRange[1] = total.value;
return originData.value.slice(...pageRange);
};
const data = computed(() => getPaginationList());
const pageChange = (value) => {
current.value = value;
getPaginationList();
};
const pageSizeChange = (value) => {
current.value = 1;
pageSize.value = value;
getPaginationList();
};
return {
data,
total,
current,
pageSize,
pageChange,
pageSizeChange
};
};
//#endregion
//#region src/useProPagination/useProPagination.ts
const useProPagination = (data, pagination, paginationProps) => {
if (pagination.value === true) return useAutoProPagination(data, paginationProps);
const total = computed(() => {
var _pagination$value;
return ((_pagination$value = pagination.value) === null || _pagination$value === void 0 ? void 0 : _pagination$value.total) || 0;
});
const current = computed({
get: () => {
var _pagination$value2;
return ((_pagination$value2 = pagination.value) === null || _pagination$value2 === void 0 ? void 0 : _pagination$value2.pageNum) || 1;
},
set: (value) => {
if (typeof pagination.value !== "object") return;
pagination.value.pageNum = value;
}
});
const pageSize = computed({
get: () => {
var _pagination$value3;
return ((_pagination$value3 = pagination.value) === null || _pagination$value3 === void 0 ? void 0 : _pagination$value3.pageSize) || 10;
},
set: (value) => {
if (typeof pagination.value !== "object") return;
pagination.value.pageSize = value;
}
});
const pageChange = (value) => {
current.value = value;
};
const pageSizeChange = (value) => {
current.value = 1;
pageSize.value = value;
};
return {
total,
current,
pageSize,
pageChange,
pageSizeChange,
data
};
};
//#endregion
//#region src/useGrid/index.ts
const useGrid = (useColumn, column, gutter) => {
const getColumn = (column$1) => useColumn ? Math.ceil(24 / column$1) : column$1;
const { xxl, xl, lg, md, sm, smaller } = useShareBreakpoints();
const xs = smaller("sm");
const grid = computed(() => {
const grid$1 = {
xxl: xxl.value,
xl: xl.value,
lg: lg.value,
md: md.value,
sm: sm.value,
xs: xs.value
};
return Object.keys(grid$1).find((key) => grid$1[key]) || "span";
});
const gridProps = computed(() => {
if (typeof column.value === "number") return {
span: getColumn(column.value),
gutter: unref(gutter)
};
return {
gutter: unref(gutter),
span: getColumn(column.value[grid.value]) || 6
};
});
return {
gridProps,
grid
};
};
//#endregion
//#region src/controlVModel/index.ts
const controlVModel = (props, name, emit, init) => {
const value = ref(init());
return computed({
get() {
var _props$name;
return (_props$name = props[name]) !== null && _props$name !== void 0 ? _props$name : value.value;
},
set(v) {
emit(`update:${name}`, v);
value.value = v;
}
});
};
//#endregion
//#region src/filterEmptyChildren/index.ts
const isEmptyElement = (c) => c && (c.type === Comment || c.type === Fragment && c.children.length === 0 || c.type === Text && c.children.trim() === "");
const filterEmptyChildren = (children = []) => {
const res = [];
children.forEach((child) => {
if (Array.isArray(child)) {
res.push(...child);
return;
}
if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) {
res.push(...filterEmptyChildren(child.children));
return;
}
res.push(child);
});
return res.filter((c) => !isEmptyElement(c));
};
//#endregion
//#region src/useEmptyComponent/index.ts
const EmptyComponentContext = Symbol("EmptyComponent");
const useEmptyComponentProvide = () => {
const empty = ref(false);
provide(EmptyComponentContext, { empty });
return { empty };
};
const useEmptyComponentInject = () => inject(EmptyComponentContext, { empty: ref(false) });
//#endregion
//#region src/createTreeSelectFilterNode.ts
/**
* 解决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
*/
const createTreeSelectFilterNode = (fieldNames) => {
const filterTreeNode = (searchKey, nodeData) => {
if (!searchKey) return true;
const _fieldNames = toValue(fieldNames);
const value = nodeData[_fieldNames.title || "title"];
return String(value).includes(searchKey);
};
return {
fieldNames,
filterTreeNode
};
};
//#endregion
//#region src/useRangePickerValue.ts
/**
* 解决在使用 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
*/
const useRangePickerObjectValue = (model, startKey, endKey) => {
return computed({
get: () => {
const data = toValue(model);
const start = data[startKey];
const end = data[endKey];
if (start && end) return [start, end];
return [];
},
set: (list = []) => {
const data = toValue(model);
data[startKey] = list[0];
data[endKey] = list[1];
}
});
};
//#endregion
//#region src/useAbortController.ts
function useAbortController(options) {
const supportAbort = typeof AbortController === "function";
let contoller = null;
const abort = () => {
if (!supportAbort) return;
contoller === null || contoller === void 0 || contoller.abort();
contoller = new AbortController();
if (options === null || options === void 0 ? void 0 : options.onabort) contoller.signal.onabort = options.onabort;
};
abort();
onBeforeUnmount(() => {
contoller === null || contoller === void 0 || contoller.abort();
contoller = null;
});
return {
abort,
get signal() {
return contoller === null || contoller === void 0 ? void 0 : contoller.signal;
}
};
}
//#endregion
export { controlVModel, createTreeSelectFilterNode, filterEmptyChildren, propsSlot, useAbortController, useEmptyComponentInject, useEmptyComponentProvide, useGrid, useProPagination, useRangePickerObjectValue, useShareBreakpoints };