Vben
1 year ago
committed by
GitHub
GitHub
210 changed files with 75 additions and 410 deletions
@ -1,3 +1,4 @@ |
|||
export { default as Menu } from './menu.vue'; |
|||
export { default as MenuBadge } from './menu-badge.vue'; |
|||
export { default as MenuItem } from './menu-item.vue'; |
|||
export { default as SubMenu } from './sub-menu.vue'; |
|||
|
|||
@ -1 +0,0 @@ |
|||
export { default as VbenLink } from './link.vue'; |
|||
@ -1,28 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
import { cn } from '@vben-core/shared/utils'; |
|||
|
|||
import { Primitive, type PrimitiveProps } from 'radix-vue'; |
|||
|
|||
interface Props extends PrimitiveProps { |
|||
class?: any; |
|||
href: string; |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<Props>(), { |
|||
as: 'a', |
|||
class: '', |
|||
href: '', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Primitive |
|||
:as="as" |
|||
:as-child="asChild" |
|||
:class="cn('text-primary hover:text-primary-hover', props.class)" |
|||
:href="href" |
|||
target="_blank" |
|||
> |
|||
<slot></slot> |
|||
</Primitive> |
|||
</template> |
|||
@ -1 +0,0 @@ |
|||
export { default as VbenMenuBadge } from './menu-badge.vue'; |
|||
@ -1,2 +0,0 @@ |
|||
export type { PaginationProps as VbenPaginationProps } from './pagination'; |
|||
export { default as VbenPagination } from './pagination.vue'; |
|||
@ -1,41 +0,0 @@ |
|||
export interface PaginationProps { |
|||
/** |
|||
* 是否禁用 |
|||
*/ |
|||
disabled?: boolean; |
|||
/** |
|||
* 每页记录数选项 |
|||
*/ |
|||
pageSizeOptions?: number[]; |
|||
/** |
|||
* 当 时true，始终显示第一页、最后一页和省略号 |
|||
*/ |
|||
showEdges?: boolean; |
|||
/** |
|||
* 显示当前页选择下拉框 |
|||
*/ |
|||
showRowsPerPage?: boolean; |
|||
/** |
|||
* 显示总条数文本 |
|||
*/ |
|||
showTotalText?: boolean; |
|||
/** |
|||
* 当前页面周围应显示的兄弟页面数量 |
|||
*/ |
|||
siblingCount?: number; |
|||
/** |
|||
* 组件尺寸 |
|||
*/ |
|||
size?: 'default' | 'large' | 'small'; |
|||
|
|||
/** |
|||
* 总条数 |
|||
*/ |
|||
total?: number; |
|||
} |
|||
|
|||
export const SIZE_CLASS_MAP = { |
|||
default: 'size-8', |
|||
large: 'size-9', |
|||
small: 'size-7', |
|||
}; |
|||
@ -1,121 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
import { computed, watch } from 'vue'; |
|||
|
|||
import { cn } from '@vben-core/shared/utils'; |
|||
|
|||
import { Button } from '../ui/button'; |
|||
import { |
|||
Pagination, |
|||
PaginationEllipsis, |
|||
PaginationFirst, |
|||
PaginationLast, |
|||
PaginationList, |
|||
PaginationListItem, |
|||
PaginationNext, |
|||
PaginationPrev, |
|||
} from '../ui/pagination'; |
|||
import { |
|||
Select, |
|||
SelectContent, |
|||
SelectItem, |
|||
SelectTrigger, |
|||
SelectValue, |
|||
} from '../ui/select'; |
|||
import { type PaginationProps, SIZE_CLASS_MAP } from './pagination'; |
|||
|
|||
interface Props extends PaginationProps {} |
|||
|
|||
const { |
|||
disabled = false, |
|||
pageSizeOptions = [10, 20, 30, 50, 100, 200], |
|||
showEdges = true, |
|||
showRowsPerPage = true, |
|||
showTotalText = true, |
|||
siblingCount = 1, |
|||
size = 'small', |
|||
total = 500, |
|||
} = defineProps<Props>(); |
|||
|
|||
const emit = defineEmits<{ |
|||
pageChange: [currentPage: number, pageSize: number]; |
|||
}>(); |
|||
const currentPage = defineModel<number>('currentPage', { default: 1 }); |
|||
const itemPerPage = defineModel<number>('itemPerPage', { default: 20 }); |
|||
|
|||
const itemSize = computed(() => { |
|||
return SIZE_CLASS_MAP[size]; |
|||
}); |
|||
|
|||
const options = computed(() => { |
|||
return pageSizeOptions.map((item) => ({ |
|||
label: `${item} 条/页`, |
|||
value: `${item}`, |
|||
})); |
|||
}); |
|||
|
|||
function handleUpdateModelValue(value: string) { |
|||
itemPerPage.value = Number(value); |
|||
} |
|||
|
|||
watch( |
|||
[() => itemPerPage.value, () => currentPage.value], |
|||
([itemPerPage, currentPage]) => { |
|||
emit('pageChange', currentPage, itemPerPage); |
|||
}, |
|||
); |
|||
</script> |
|||
|
|||
<template> |
|||
<Pagination |
|||
v-model:page="currentPage" |
|||
:disabled="disabled" |
|||
:items-per-page="itemPerPage" |
|||
:show-edges="showEdges" |
|||
:sibling-count="siblingCount" |
|||
:total="total" |
|||
> |
|||
<PaginationList |
|||
v-slot="{ items }" |
|||
class="flex w-full items-center justify-end gap-1" |
|||
> |
|||
<span v-if="showTotalText" class="mr-2">共 {{ total }} 条</span> |
|||
|
|||
<Select |
|||
v-if="showRowsPerPage" |
|||
:model-value="`${itemPerPage}`" |
|||
@update:model-value="handleUpdateModelValue" |
|||
> |
|||
<SelectTrigger class="w-30 mr-auto h-8"> |
|||
<SelectValue /> |
|||
</SelectTrigger> |
|||
<SelectContent> |
|||
<template v-for="item in options" :key="item.value"> |
|||
<SelectItem :value="item.value"> {{ item.label }} </SelectItem> |
|||
</template> |
|||
</SelectContent> |
|||
</Select> |
|||
|
|||
<PaginationFirst :class="cn('size-8', itemSize)" /> |
|||
<PaginationPrev :class="cn('size-8', itemSize)" /> |
|||
<template v-for="(item, index) in items"> |
|||
<PaginationListItem |
|||
v-if="item.type === 'page'" |
|||
:key="index" |
|||
:value="item.value" |
|||
as-child |
|||
> |
|||
<Button |
|||
:class="cn('size-8 p-0 shadow-none', itemSize)" |
|||
:variant="item.value === currentPage ? 'default' : 'outline'" |
|||
> |
|||
{{ item.value }} |
|||
</Button> |
|||
</PaginationListItem> |
|||
<PaginationEllipsis v-else :key="item.type" :index="index" /> |
|||
</template> |
|||
|
|||
<PaginationNext :class="cn('size-8', itemSize)" /> |
|||
<PaginationLast :class="cn('size-8', itemSize)" /> |
|||
</PaginationList> |
|||
</Pagination> |
|||
</template> |
|||
@ -1 +0,0 @@ |
|||
export { default as VbenSwap } from './swap.vue'; |
|||
@ -1,126 +0,0 @@ |
|||
<script lang="ts" setup> |
|||
interface Props { |
|||
/** |
|||
* @zh_CN 交换模式 |
|||
*/ |
|||
mode?: 'flip' | 'rotate'; |
|||
/** |
|||
* @zh_CN 开启时的样式 |
|||
*/ |
|||
offClass?: string; |
|||
/** |
|||
* @zh_CN 关闭时的样式 |
|||
*/ |
|||
onClass?: string; |
|||
} |
|||
|
|||
defineOptions({ |
|||
name: 'Swap', |
|||
}); |
|||
|
|||
withDefaults(defineProps<Props>(), { |
|||
mode: 'rotate', |
|||
onClass: '', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<label |
|||
:class="{ |
|||
'swap-flip': mode === 'flip', |
|||
'swap-rotate': mode === 'rotate', |
|||
}" |
|||
class="swap" |
|||
> |
|||
<input class="hidden" type="checkbox" /> |
|||
|
|||
<div :class="onClass" class="swap-on"> |
|||
<slot name="swap-on"></slot> |
|||
</div> |
|||
|
|||
<div :class="offClass" class="swap-off"> |
|||
<slot name="swap-off"></slot> |
|||
</div> |
|||
</label> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.swap { |
|||
@apply relative inline-grid cursor-pointer select-none place-content-center; |
|||
} |
|||
|
|||
.swap > * { |
|||
@apply col-start-1 row-start-1 duration-300 ease-out; |
|||
|
|||
transition-property: transform, opacity; |
|||
} |
|||
|
|||
.swap-rotate .swap-on, |
|||
.swap-rotate .swap-indeterminate, |
|||
.swap-rotate input:indeterminate ~ .swap-on { |
|||
@apply rotate-45; |
|||
} |
|||
|
|||
.swap-rotate input:checked ~ .swap-off, |
|||
.swap-active:where(.swap-rotate) .swap-off, |
|||
.swap-rotate input:indeterminate ~ .swap-off { |
|||
@apply -rotate-45; |
|||
} |
|||
|
|||
.swap-rotate input:checked ~ .swap-on, |
|||
.swap-active:where(.swap-rotate) .swap-on, |
|||
.swap-rotate input:indeterminate ~ .swap-indeterminate { |
|||
@apply rotate-0; |
|||
} |
|||
|
|||
.swap-flip { |
|||
transform-style: preserve-3d; |
|||
perspective: 16em; |
|||
} |
|||
|
|||
.swap-flip .swap-on, |
|||
.swap-flip .swap-indeterminate, |
|||
.swap-flip input:indeterminate ~ .swap-on { |
|||
@apply opacity-100; |
|||
|
|||
transform: rotateY(180deg); |
|||
backface-visibility: hidden; |
|||
} |
|||
|
|||
.swap-flip input:checked ~ .swap-off, |
|||
.swap-active:where(.swap-flip) .swap-off, |
|||
.swap-flip input:indeterminate ~ .swap-off { |
|||
@apply opacity-100; |
|||
|
|||
transform: rotateY(-180deg); |
|||
backface-visibility: hidden; |
|||
} |
|||
|
|||
.swap-flip input:checked ~ .swap-on, |
|||
.swap-active:where(.swap-flip) .swap-on, |
|||
.swap-flip input:indeterminate ~ .swap-indeterminate { |
|||
transform: rotateY(0deg); |
|||
} |
|||
|
|||
.swap input { |
|||
@apply appearance-none; |
|||
} |
|||
|
|||
.swap .swap-on, |
|||
.swap .swap-indeterminate, |
|||
.swap input:indeterminate ~ .swap-on { |
|||
@apply opacity-0; |
|||
} |
|||
|
|||
.swap input:checked ~ .swap-off, |
|||
.swap-active .swap-off, |
|||
.swap input:indeterminate ~ .swap-off { |
|||
@apply opacity-0; |
|||
} |
|||
|
|||
.swap input:checked ~ .swap-on, |
|||
.swap-active .swap-on, |
|||
.swap input:indeterminate ~ .swap-indeterminate { |
|||
@apply opacity-100; |
|||
} |
|||
</style> |
|||
@ -1,2 +1,3 @@ |
|||
export * from './components'; |
|||
export * from './ui'; |
|||
export { createContext, Slot, VisuallyHidden } from 'radix-vue'; |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue