8000 feat: CellGroup title · ano-ui/ano-ui@2b53723 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 2b53723

Browse files
nei1eenei1ee
committed
feat: CellGroup title
1 parent 99eec0d commit 2b53723

File tree

29 files changed

+945
-971
lines changed

29 files changed

+945
-971
lines changed

‎packages/ano-ui/src/components/AACollapseItem/use-a-collapse-item.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { SetupContext } from 'vue'
2-
import { computed } from 'vue'
2+
import { computed, inject } from 'vue'
33
import { CLICK_EVENT } from '../constants'
44
import { aCollapseAccordionInjectKey, aCollapseActivesInjectKey } from '../AACollapse/a-collapse'
55
import type { ACollapseItemEmits, ACollapseItemProps } from './a-collapse-item'

‎packages/ano-ui/src/components/ACellGroup/ACellGroup.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ provide(cellGroupKey,
1313
</script>
1414

1515
<template>
16+
<div v-if="title" class="p-4 a-text-color-2">
17+
{{ title }}
18+
</div>
1619
<div
1720
:class="[{ 'mx-4 rounded-lg overflow-hidden': inset },
1821
{ '[&_a-cell:last-child_.a-cell]:after:content-none [&>.a-cell+.a-cell]:after:content-none': divider }, cc]"

‎packages/ano-ui/src/components/ACellGroup/cell-group.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const cellGroupProps = {
99
arrow: Boolean,
1010
center: Boolean,
1111
clickable: Boolean,
12+
title: String,
1213
}
1314

1415
export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>

‎packages/ano-ui/src/components/ACollapseTransition/use-a-collapse-transition.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { SetupContext } from 'vue'
2+
import { computed, ref, watch } from 'vue'
23
import { CLICK_EVENT } from '../constants'
34
import { delay, guid } from '../utils'
45
import { useQuerySelector } from '../composables'

‎packages/ano-ui/src/components/ANoticeBar/ANoticeBar.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ const { handleClose } = useNoticeBar(props, emit)
1818
<slot name="icon" />
1919
</template>
2020
<div v-else-if="icon" :class="icon" />
21-
<div v-else-if="type === 'primary'" class="i-tabler-info-circle-filled" />
21+
<div v-else-if="type === 'primary'" class="i-tabler-bell-filled" />
2222
<div v-else-if="type === 'success'" class="i-tabler-circle-check-filled" />
23+
<div v-else-if="type === 'info'" class="i-tabler-info-circle-filled" />
2324
<div v-else-if="type === 'warning'" class="i-tabler-alert-circle-filled" />
2425
<div v-else-if="type === 'danger'" class="i-tabler-circle-x-filled" />
2526
<div class="relative flex-1 overflow-hidden" :class="loop ? '' : 'truncate'">

‎packages/ano-ui/src/components/ASwitch/ASwitch.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ const { disabled, checked, dotTranslateClasses, toggle } = useSwitch(props, emit
1010

1111
<template>
1212
<div
13-
class="relative rounded-full bg-context transition-all text-white dark:bg-op80 dark:text-op80"
13+
class="relative rounded-full bg-context transition-all duration-200 text-white dark:bg-op80 dark:text-op80"
1414
:class="[`a-switch-${size}`, `a-text-${size}`, checked ? `a-${type}` : 'a-gray3', { 'op-50': disabled }, cc]"
1515
:style="cs" @click="toggle"
1616
>
1717
<div
18-
class="absolute rounded-full transition-all top-0.5 bg-white text-context"
18+
class="absolute rounded-full transition-all duration-200 top-0.5 bg-white text-context"
1919
:class="[`a-switch-dot-${size}`, checked ? dotTranslateClasses : 'left-0.5']"
2020
>
2121
<template v-if="checked">
@@ -34,7 +34,7 @@ const { disabled, checked, dotTranslateClasses, toggle } = useSwitch(props, emit
3434

3535
<template v-if="checked">
3636
<div
37-
class="absolute top-0.5 flex animate-zoom-in animate-duration-200 items-center justify-center a-transition left-0.5 right-auto !leading-none"
37+
class="absolute top-0.5 flex animate-zoom-in animate-duration-200 items-center justify-center transition-all duration-200 left-0.5 right-auto !leading-none"
3838
:class="[`a-switch-dot-${size}`]"
3939
>
4040
<template v-if="activeLabel">
@@ -45,7 +45,7 @@ const { disabled, checked, dotTranslateClasses, toggle } = useSwitch(props, emit
4545
</template>
4646
<template v-else>
4747
<div
48-
class="absolute top-0.5 flex animate-zoom-in animate-duration-200 items-center justify-center a-transition !leading-none right-0.5"
48+
class="absolute top-0.5 flex animate-zoom-in animate-duration-200 items-center justify-center transition-all duration-200 !leading-none right-0.5"
4949
:class="[`a-switch-dot-${size}`]"
5050
>
5151
<template v-if="inactiveLabel">
@@ -59,19 +59,19 @@ const { disabled, checked, dotTranslateClasses, toggle } = useSwitch(props, emit
5959

6060
<style scoped>
6161
.a-switch-mini {
62-
--at-apply: 'min-w8 h5'
62+
--at-apply: 'min-w9 h5'
6363
}
6464
6565
.a-switch-small {
66-
--at-apply: 'min-w10 h6'
66+
--at-apply: 'min-w11 h6'
6767
}
6868
6969
.a-switch-normal {
70-
--at-apply: 'min-w12 h7'
70+
--at-apply: 'min-w13 h7'
7171
}
7272
7373
.a-switch-large {
74-
--at-apply: 'min-w14 h8'
74+
--at-apply: 'min-w15 h8'
7575
}
7676
7777
.a-switch-dot-mini {

‎packages/ano-ui/src/components/ASwitch/use-switch.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ export function useSwitch(props: SwitchProps, emit: SetupContext<SwitchEmits>['e
2222

2323
const dotTranslateClasses = computed(() => {
2424
if (props.size === 'mini')
25-
return 'translate-x-3.5'
26-
if (props.size === 'small')
2725
return 'translate-x-4.5'
26+
if (props.size === 'small')
27+
return 'translate-x-5.5'
2828
if (props.size === 'large')
29-
return 'translate-x-6.5'
30-
return 'translate-x-5.5'
29+
return 'translate-x-7.5'
30+
return 'translate-x-6.5'
3131
})
3232

3333
return {

‎packages/playground/src/components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ declare module '@vue/runtime-core' {
3434
ASwitch: typeof import('ano-ui/src/components/ASwitch/ASwitch.vue')['default']
3535
ATabBar: typeof import('ano-ui/src/components/ATabBar/ATabBar.vue')['default']
3636
ATabBarItem: typeof import('ano-ui/src/components/ATabBarItem/ATabBarItem.vue')['default']
37+
ATag: typeof import('ano-ui/src/components/ATag/ATag.vue')['default']
3738
AToast: typeof import('ano-ui/src/components/AToast/AToast.vue')['default']
3839
ATransition: typeof import('ano-ui/src/components/ATransition/ATransition.vue')['default']
3940
UBasePage: typeof import('./components/UBasePage.vue')['default']

‎packages/playground/src/components/UBasePage.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function onClickLeft() {
3030
</script>
3131

3232
<template>
3D11
33-
<APage cc="font-sans pb-10">
33+
<APage cc="font-sans pb-10 fixed inset-0 overflow-auto">
3434
<ANavBar
3535
v-if="show" :title="title ?? titleText" :left-arrow="backArrow" placeholder fixed z-index="999"
3636
@click-left="onClickLeft"

‎packages/playground/src/pages/basic/avatar.vue

Lines changed: 47 additions & 49 deletions
Original file line numberDiff line numberDiff line change
< F438 button class="Button Button--iconOnly Button--invisible ExpandableHunkHeaderDiffLine-module__expand-button-line--wZKjF ExpandableHunkHeaderDiffLine-module__expand-button-unified--Eae6C" aria-label="Expand file up from line 11" data-direction="up" aria-hidden="true" tabindex="-1">
@@ -11,57 +11,55 @@ const options = ref([
1111

1212
<template>
1313
<UBasePage>
14-
<div class="pb-safe">
15-
<div class="p-4">
16-
基础
17-
</div>
18-
<div flex="~ gap2 wrap" items-center px-4>
19-
<AAvatar :src="image" size="mini" />
20-
<AAvatar :src="image" size="small" />
21-
<AAvatar src="https://pic2.imgdb.cn/item/644bf3c40d2dde5777ab58cb.png" size="normal" />
22-
<AAvatar :src="image" size="large" />
23-
<AAvatar :src="image" cc="h-16 w-16" />
24-
</div>
14+
<div class="p-4">
15+
基础
16+
</div>
17+
<div flex="~ gap2 wrap" items-center px-4>
18+
<AAvatar :src="image" size="mini" />
19+
<AAvatar :src="image" size="small" />
20+
<AAvatar src="https://pic2.imgdb.cn/item/644bf3c40d2dde5777ab58cb.png" size="normal" />
21+
<AAvatar :src="image" size="large" />
22+
<AAvatar :src="image" cc="h-16 w-16" />
23+
</div>
2524

26-
<div class="p-4">
27-
圆形
28-
</div>
29-
<div flex="~ gap2 wrap" items-center px-4>
30-
<AAvatar :src="image" cc="rounded-full" size="mini" />
31-
<AAvatar :src="image" cc="rounded-full" size="small" />
32-
<AAvatar :src="image" cc="rounded-full" size="normal" />
33-
<AAvatar :src="image" cc="rounded-full" size="large" />
34-
</div>
25+
<div class="p-4">
26+
圆形
27+
</div>
28+
<div flex="~ gap2 wrap" items-center px-4>
29+
<AAvatar :src="image" cc="rounded-full" size="mini" />
30+
<AAvatar :src="image" cc="rounded-full" size="small" />
31+
<AAvatar :src="image" cc="rounded-full" size="normal" />
32+
<AAvatar :src="image" cc="rounded-full" size="large" />
33+
</div>
3534

36-
<div class="p-4">
37-
自定义
38-
</div>
39-
<div flex="~ gap2 wrap" items-center px-4>
40-
<AAvatar cc="rounded-full bg-primary text-white">
41-
T
42-
</AAvatar>
43-
<AAvatar cc="rounded-full bg-primary text-white">
44-
<div class="i-tabler-loader" />
45-
</AAvatar>
46-
</div>
47-
<div class="p-4">
48-
头像组
49-
</div>
50-
<div flex="~ gap2 wrap" items-center px-4>
51-
<AAvatarGroup :max="3" :options="options" />
52-
</div>
53-
<div flex="~ gap2 wrap" items-center px-4 pt-4>
54-
<AAvatarGroup :max="3" :options="options">
55-
<template #avatar="{ option: { src } }">
56-
<AAvatar cc="rounded-full" :src="src" />
57-
</template>
58-
<template #reset="{ reset }">
59-
<AAvatar cc="z-1 rounded-full bg-primary text-white">
60-
+{{ reset }}
61-
</AAvatar>
62-
</template>
63-
</AAvatarGroup>
64-
</div>
35+
<div class="p-4">
36+
自定义
37+
</div>
38+
<div flex="~ gap2 wrap" items-center px-4>
39+
<AAvatar cc="rounded-full bg-primary text-white">
40+
T
41+
</AAvatar>
42+
<AAvatar cc="rounded-full bg-primary text-white">
43+
<div class="i-tabler-loader" />
44+
</AAvatar>
45+
</div>
46+
<div class="p-4">
47+
头像组
48+
</div>
49+
<div flex="~ gap2 wrap" items-center px-4>
50+
<AAvatarGroup :max="3" :options="options" />
51+
</div>
52+
<div flex="~ gap2 wrap" items-center px-4 pt-4>
53+
<AAvatarGroup :max="3" :options="options">
54+
<template #avatar="{ option: { src } }">
55+
<AAvatar cc="rounded-full" :src="src" />
56+
</template>
57+
<template #reset="{ reset }">
58+
<AAvatar cc="z-1 rounded-full bg-primary text-white">
59+
+{{ reset }}
60+
</AAvatar>
61+
</template>
62+
</AAvatarGroup>
6563
</div>
6664
</UBasePage>
6765
</template>

0 commit comments

Comments
 (0)
0