Skip to content

Commit

Permalink
[components] 使 ListAutoGrid 组件在 Vue3 下拥有更好的类型推导
Browse files Browse the repository at this point in the history
  • Loading branch information
Zhang-Wei-666 committed Aug 27, 2024
1 parent 1785be0 commit 00b7d07
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 3 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
## [Unreleased]
- 💄 [@mixte/components] 组件 `AutoGrid` 根节点添加 `mixte-auto-grid` 样式类
- 💄 [@mixte/components] 组件 `ListAutoGrid` 根节点添加 `mixte-list-auto-grid` 样式类
- 💄 [@mixte/components] 使 `ListAutoGrid` 组件在 `Vue3` 下拥有更好的类型推导

## [v2.4.0-beta.2]
- 📅 2024-08-26
- 💄 [@mixte/components] 组件 `ListAutoGrid``list` 传参支持传入数值

## [v2.4.0-beta.1]
- 📅 2024-08-22
- 🌟 [@mixte/components] 新增 `ListAutoGrid` 组件, 支持 Vue2.7Vue3
- 🌟 [@mixte/components] 新增 `ListAutoGrid` 组件, 支持 `Vue2.7``Vue3`

## [v2.3.0]
- 📅 2024-08-20
Expand Down
29 changes: 27 additions & 2 deletions packages/components/src/list-auto-grid/src/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,22 @@
</div>
</template>

<script lang="ts" setup>
<script
setup
lang="ts"
generic="
List extends Record<PropertyKey, any>[] | number,
Item extends List extends number ? number : Record<PropertyKey, any>
"
>
import { isVue2, useSlots } from 'vue-demi';
import { useAutoGrid } from './composables/useAutoGrid';
// @unocss-ignore
interface ListAutoGridProps {
/** 列表数据 */
list?: Record<PropertyKey, any>[] | number;
list?: List;
/**
* 组件宽度 (单位: px)
* - 正常情况无需使用, 会自动获取组件宽度
Expand All @@ -33,6 +41,23 @@
list: () => [],

Check failure on line 41 in packages/components/src/list-auto-grid/src/index.vue

View workflow job for this annotation

GitHub Actions / test-tsc

Type '() => never[]' is not assignable to type 'InferDefault<LooseRequired<ListAutoGridProps>, List | undefined> | undefined'.
});
// 为了在 Vue3 中拥有更好的类型推导, 但是 Vue2 并不支持这个 API, 先这样兼容一下
let oldDefineSlots: any;
if (isVue2) { // @ts-expect-error
oldDefineSlots = globalThis.defineSlots; // @ts-expect-error
globalThis.defineSlots = useSlots;
}
// eslint-disable-next-line vue/define-macros-order
defineSlots<{
default: (props: { item: Item; index: number }) => any;
}>();
if (isVue2) { // @ts-expect-error
globalThis.defineSlots = oldDefineSlots;
}
const {
rootRef,
rootStyle,
Expand Down

0 comments on commit 00b7d07

Please sign in to comment.