8000 refactor(components)!: change `size` prop to `mini,small,normal,large… · ano-ui/ano-ui@3c4ac6b · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 3c4ac6b

Browse files
nei1eenei1ee
authored
refactor(components)!: change size prop to mini,small,normal,large (#27)
* feat(components): `AButton` `square` and `round` props * refactor(ACell)!: change props `inset` and `arrow` * styles(AToast): background color * feat(components): `ACheckboxGroup` `direction` prop * refactor(components)!: change `AInput` to `AField` * refactor(ACell): change dom * fix(ACell): hover style * refactor(AField): change default style * fix(ACell): hover class * feat(components): `ARadioGroup` `direction` prop * feat(components): `ACellGroup` `clickable` prop * chore(playground): `ACheckbox` and `Radio` example with `ACellGroup` * refactor(ASwitch)!: change `size` prop * chore(playground): update * refactor(ATag)!: change `size` prop
1 parent c6b092f commit 3c4ac6b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+1198
-1131
lines changed

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@
2424
"devDependencies": {
2525
"@antfu/eslint-config": "^0.34.1",
2626
"bumpp": "^8.2.1",
27-
"eslint": "^8.31.0",
27+
"eslint": "^8.32.0",
2828
"esno": "^0.16.3",
29-
"rimraf": "^4.0.5",
29+
"rimraf": "^4.1.1",
3030
"typescript": "^4.9.4",
3131
"unbuild": "^1.1.1",
32-
"vitest": "^0.27.1",
32+
"vitest": "^0.27.3",
3333
"vue-tsc": "^1.0.24"
3434
}
3535
}

‎packages/components/AButton/AButton.vue

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,16 @@ import { useButton } from './use-button'
55
const props = defineProps(buttonProps)
66
const emit = defineEmits(buttonEmits)
77
8-
const { disabled, clickHandler } = useButton(props, emit)
8+
const { className, disabled, clickHandler } = useButton(props, emit)
99
</script>
1010

1111
<template>
1212
<button
13-
class="a-button-wrapper-base"
14-
:class="[`a-${type}`, { block }, `a-button-${size}`, { 'a-button-icon': iconOnly }, `a-${variant}`, { 'a-disabled': disabled }, cc]"
15-
:hover-class="disabled ? '' : 'a-button-hover'" hover-stay-time="100" :open-type="openType" :style="cs"
16-
@click="clickHandler"
13+
class="a-button-wrapper-base" :class="[className, cc]" :hover-class="disabled ? '' : 'a-button-hover'"
14+
hover-stay-time="60" :open-type="openType" :style="cs" @click="clickHandler"
1715
>
1816
<div class="a-button-content-base">
19-
<div v-if="loading" class="i-carbon-circle-dash animate-spin" />
17+
<div v-if="loading" class="i-carbon-circle-dash animate-spin mr-1" />
2018
<div v-else-if="icon" class="mr-1" :class="[icon]" />
2119
<slot />
2220
</div>

‎packages/components/AButton/button.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type { ExtractPropTypes, PropType } from 'vue'
2-
import { useCustomClassProp, useCustomStyleProp, useSizeProp, useVariantProp } from '../composables'
2+
import { useCustomClassProp, useCustomStyleProp, useVariantProp } from '../composables'
33
import { CLICK_EVENT } from '../constants'
4-
5-
export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'danger'
4+
import type { ButtonSize, ButtonType } from './types'
65

76
export const useButtonProp = {
87
type: String as PropType<ButtonType>,
@@ -11,15 +10,23 @@ export const useButtonProp = {
1110
default: 'primary',
1211
}
1312

13+
export const useButtonSizeProp = {
14+
type: String as PropType<ButtonSize>,
15+
validator: (value: string) =>
16+
['mini', 'small', 'normal', 'large'].includes(value),
17+
default: 'normal',
18+
}
19+
1420
export const buttonProps = {
1521
cc: useCustomClassProp,
1622
cs: useCustomStyleProp,
1723
type: useButtonProp,
18-
size: useSizeProp,
24+
size: useButtonSizeProp,
1925
variant: useVariantProp,
26+
square: Boolean,
27+
round: Boolean,
2028
disabled: Boolean,
2129
icon: String,
22-
iconOnly: Boolean,
2330
openType: String,
2431
block: Boolean,
2532
loading: Boolean,

‎packages/components/AButton/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './button'
22
export * from './use-button'
3+
export * from './types'

‎packages/components/AButton/types.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'danger'
2+
3+
export type ButtonSize = 'mini' | 'small' | 'normal' | 'large'

‎packages/components/AButton/use-button.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@ export const useButton = (
88
emit: SetupContext<ButtonEmits>['emit'],
99
) => {
1010
const disabled = computed(() => props.disabled || props.loading)
11+
const className = computed(() => {
12+
const { type, size, variant, block, square, round } = props
13+
return [
14+
`a-${type}`,
15+
{ block },
16+
`a-button-${size}`,
17+
`a-${variant}`,
18+
{ 'a-button-disabled': disabled.value },
19+
{ 'rounded-none': square },
20+
{ 'rounded-full': round },
21+
] as const
22+
})
1123

1224
const clickHandler = (evt: MouseEvent) => {
1325
if (disabled.value)
@@ -18,6 +30,7 @@ export const useButton = (
1830

1931
return {
2032
disabled,
33+
className,
2134

2235
clickHandler,
2336
}

‎packages/components/ACell/ACell.vue

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,53 @@
11
<script setup lang="ts">
2+
import { computed } from 'vue'
23
import { cellEmits, cellProps } from './cell'
34
import { useCell } from './use-cell'
45
56
const props = defineProps(cellProps)
67
const emit = defineEmits(cellEmits)
78
8-
const { disabled, clickHandler } = useCell(props, emit)
9+
const { arrow, center, clickable, clickHandler } = useCell(props, emit)
10+
11+
const className = computed(() => {
12+
const _className = { 'items-center': center.value }
13+
14+
// #ifdef H5
15+
Object.assign(_className, { 'a-cell-hover-h5': arrow.value || clickable.value })
16+
// #endif
17+
return _className
18+
})
919
</script>
1020

1121
<template>
1222
<div
13-
class="a-bg-base-second a-cell-base" :class="[{ 'a-cell-disabled': disabled }, cc]" hover-class="a-cell-hover"
E30A 14-
hover-stay-time="100" :style="cs" @click="clickHandler"
23+
class="a-cell-base" :class="[className, cc]" :hover-class="arrow ? 'a-cell-hover' : '' " hover-stay-time="60"
24+
:style="cs" @click="clickHandler"
1525
>
16-
<div class="flex justify-center items-center gap1">
17-
<div class="flex items-center gap1">
18-
<div v-if="icon" :class="icon" />
19-
<slot v-else name="icon" />
20-
<template v-if="title">
21-
{{ title }}
22-
</template>
23-
<slot v-else name="title" />
24-
</div>
25-
<div class="flex-1 text-right text-darkText text-sm">
26-
<div v-if="value">
27-
{{ value }}
28-
</div>
29-
<slot v-else name="value" />
26+
<div class="a-cell-icon">
27+
<div v-if="icon" :class="icon" />
28+
<slot v-else name="icon" />
29+
</div>
30+
<div class="a-cell-title">
31+
<template v-if="title">
32+
{{ title }}
33+
</template>
34+
<slot v-else name="title" />
35+
<div v-if="label" class="a-cell-label">
36+
{{ label }}
3037
</div>
31-
<div v-if="arrow" class="i-carbon-chevron-right" />
32-
<slot name="right" />
38+
39+
<slot v-else name="label" />
3340
</div>
34-
<div v-if="label" class="text-darkText text-sm">
35-
{{ label }}
41+
<slot />
42+
<div class="a-cell-value">
43+
<template v-if="value">
44+
{{ value }}
45+
</template>
46+
<slot v-else name="value" />
47+
</div>
48+
<div class="a-cell-right-icon">
49+
<div v-if="arrow" class="i-carbon-chevron-right" />
50+
<slot name="right-icon" />
3651
</div>
37-
38-
<slot v-else name="label" />
3952
</div>
4053
</template>

‎packages/components/ACell/cell.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ export const cellProps = {
88
title: String,
99
value: String,
1010
label: String,
11-
disabled: Boolean,
1211
icon: String,
1312
arrow: Boolean,
13+
center: Boolean,
14+
clickable: Boolean,
1415
}
1516

1617
export const cellEmits = {

‎packages/components/ACell/use-cell.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,18 @@ export const useCell = (
99
emit: SetupContext<CellEmits>['emit'],
1010
) => {
1111
const cellGroup = inject(cellGroupKey, undefined)
12-
const disabled = computed(() => cellGroup?.disabled ?? props.disabled)
12+
const arrow = computed(() => cellGroup?.arrow || props.arrow)
13+
const center = computed(() => cellGroup?.center || props.center)
14+
const clickable = computed(() => cellGroup?.clickable || props.clickable)
1315

1416
const clickHandler = (evt: MouseEvent) => {
15-
if (disabled.value)
16-
return
17-
1817
emit(CLICK_EVENT, evt)
1918
}
2019

2120
return {
22-
disabled,
21+
arrow,
22+
center,
23+
clickable,
2324

2425
clickHandler,
2526
}

‎packages/components/ACellGroup/ACellGroup.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang='ts'>
2-
import { provide, reactive, toRefs } from 'vue'
2+
import { computed, provide, reactive, toRefs } from 'vue'
33
import { cellGroupKey } from '../tokens'
44
import { cellGroupProps } from './cell-group'
55
@@ -10,13 +10,23 @@ provide(cellGroupKey,
1010
...toRefs(props),
1111
}),
1212
)
13+
14+
const className = computed(() => {
15+
const { inset, divider } = props
16+
17+
const _className = {
18+
'a-cell-group-inset': inset,
19+
'a-cell-group-divider': divider,
20+
}
21+
// #ifdef H5
22+
Object.assign(_className, { 'a-cell-group-divider-h5': true })
23+
// #endif
24+
return _className
25+
})
1326
</script>
1427

1528
<template>
16-
<div
17-
class="a-cell-group-base" :class="[{ 'a-cell-group-card': card, 'a-cell-group-divider': divider }, cc]"
18-
:style="cs"
19-
>
29+
<div :class="[className, cc]" :style="cs">
2030
<slot />
2131
</div>
2232
</template>

0 commit comments

Comments
 (0)
0