Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 3a4e0cb

Browse files
codebender828codebender828
committed
fix: linting issues
1 parent 1980aa5 commit 3a4e0cb

File tree

17 files changed

+243
-172
lines changed

17 files changed

+243
-172
lines changed

‎packages/c-accordion/tests/accordion.test.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ import {
55
CAccordionIcon,
66
CAccordionPanel,
77
} from "../src"
8-
import { Component, defineComponent, getCurrentInstance, h, nextTick } from "vue"
8+
import {
9+
Component,
10+
defineComponent,
11+
getCurrentInstance,
12+
h,
13+
nextTick,
14+
} from "vue"
915
import {
1016
render,
1117
screen,

‎packages/c-avatar/src/c-avatar-badge.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1-
import { SystemStyleObject } from '@chakra-ui/styled-system'
2-
import { warn } from '@chakra-ui/utils'
3-
import { chakra, HTMLChakraProps } from '@chakra-ui/vue-system'
4-
import { computed, defineComponent, getCurrentInstance, PropType, h, Fragment } from 'vue'
5-
import { useAvatarStyles } from './c-avatar'
1+
import { SystemStyleObject } from "@chakra-ui/styled-system"
2+
import { warn } from "@chakra-ui/utils"
3+
import { chakra, HTMLChakraProps } from "@chakra-ui/vue-system"
4+
import {
5+
computed,
6+
defineComponent,
7+
getCurrentInstance,
8+
PropType,
9+
h,
10+
Fragment,
11+
} from "vue"
12+
import { useAvatarStyles } from "./c-avatar"
613

714
type BadgePlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end"
815

@@ -44,7 +51,7 @@ export const CAvatarBadge = defineComponent({
4451
placement: {
4552
type: String as PropType<BadgePlacement>,
4653
default: "bottom-end",
47-
}
54+
},
4855
},
4956
setup(props, { attrs, slots }) {
5057
const styles = useAvatarStyles()
@@ -53,15 +60,17 @@ export const CAvatarBadge = defineComponent({
5360

5461
warn.bind(instance)({
5562
condition: !Object.keys(placementMap).includes(props.placement),
56-
message: `<CAvatarBadge /> expects a placement value of ${Object.keys(placementMap).join(", ")}. Instead got "${props.placement}"`
63+
message: `<CAvatarBadge /> expects a placement value of ${Object.keys(
64+
placementMap
65+
).join(", ")}. Instead got "${props.placement}"`,
5766
})
5867

5968
const badgeStyles = computed<SystemStyleObject>(() => ({
6069
position: "absolute",
6170
display: "flex",
6271
alignItems: "center",
6372
justifyContent: "center",
64-
...placementMap[props.placement] || {},
73+
...(placementMap[props.placement] || {}),
6574
...styles.value.badge,
6675
}))
6776

@@ -74,5 +83,5 @@ export const CAvatarBadge = defineComponent({
7483
{slots?.default?.()}
7584
</chakra.div>
7685
)
77-
}
78-
})
86+
},
87+
})

‎packages/c-avatar/src/c-avatar-group.tsx

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint vue/no-side-effects-in-computed-properties: 0 */
12
import {
23
ThemingProps,
34
useMultiStyleConfig,
@@ -10,11 +11,19 @@ import {
1011
getValidChildren,
1112
SNAO,
1213
vueThemingProps,
13-
useThemingProps
14+
useThemingProps,
1415
} from "@chakra-ui/vue-utils"
1516
import { filterUndefined, mergeWith } from "@chakra-ui/utils"
16-
import { h, Fragment, defineComponent, computed, ComputedRef, PropType, cloneVNode } from "vue"
17-
import { baseStyle } from './c-avatar'
17+
import {
18+
h,
19+
Fragment,
20+
defineComponent,
21+
computed,
22+
ComputedRef,
23+
PropType,
24+
cloneVNode,
25+
} from "vue"
26+
import { baseStyle } from "./c-avatar"
1827

1928
type AvatarGroupContext = ComputedRef<ThemingProps>
2029

@@ -27,19 +36,18 @@ const [AvatarGroupProvider, useAvatarGroup] = createContext<AvatarGroupContext>(
2736

2837
export { useAvatarGroup }
2938

30-
3139
export const avatarGroupProps = {
3240
max: {
3341
type: Number,
3442
default: 2,
3543
},
3644
spacing: {
3745
type: SNAO as PropType<SystemProps["margin"]>,
38-
default: "-0.75rem"
46+
default: "-0.75rem",
3947
},
4048
borderRadius: {
4149
type: SNAO as PropType<SystemProps["borderRadius"]>,
42-
default: "full"
50+
default: "full",
4351
},
4452
borderColor: SNAO as PropType<SystemProps["borderColor"]>,
4553
...vueThemingProps,
@@ -60,7 +68,9 @@ export const CAvatarGroup = defineComponent({
6068
const visibleChildren = computed(() =>
6169
validChildren.value.slice(0, props.max)
6270
)
63-
const excessChildrenCount = computed(() => validChildren.value.length - props.max)
71+
const excessChildrenCount = computed(
72+
() => validChildren.value.length - props.max
73+
)
6474

6575
/**
6676
* Reversing the children is a great way to avoid using zIndex
@@ -70,20 +80,18 @@ export const CAvatarGroup = defineComponent({
7080
visibleChildren.value.reverse()
7181
)
7282

73-
const clonedChildren = computed(() => reversedVisibleChildren.value.map((vnode, index) => {
74-
const isFirstAvatar = index === 0
75-
76-
const childProps = filterUndefined({
77-
marginEnd: isFirstAvatar ? 0 : props.spacing,
78-
size: props.size,
79-
borderColor: vnode?.props?.borderColor ?? props.borderColor,
80-
showBorder: true,
83+
const clonedChildren = computed(() =>
84+
reversedVisibleChildren.value.map((vnode, index) => {
85+
const isFirstAvatar = index === 0
86+
const childProps = filterUndefined({
87+
marginEnd: isFirstAvatar ? 0 : props.spacing,
88+
size: props.size,
89+
borderColor: vnode?.props?.borderColor ?? props.borderColor,
90+
showBorder: true,
91+
})
92+
return cloneVNode(vnode, childProps)
8193
})
82-
83-
console.log("childProps", childProps)
84-
85-
return cloneVNode(vnode, childProps)
86-
}))
94+
)
8795

8896
const groupStyles = computed<SystemStyleObject>(() => ({
8997
display: "flex",
@@ -103,7 +111,7 @@ export const CAvatarGroup = defineComponent({
103111
return () => (
104112
<chakra.div
105113
role="group"
106-
__label='avatar__group'
114+
__label="avatar__group"
107115
__css={groupStyles.value}
108116
>
109117
<>

‎packages/c-avatar/src/c-avatar-image.tsx

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1-
import { defineComponent, h, Fragment, cloneVNode, computed, PropType, watchEffect } from 'vue';
1+
import {
2+
defineComponent,
3+
h,
4+
Fragment,
5+
cloneVNode,
6+
computed,
7+
PropType,
8+
watchEffect,
9+
} from "vue"
210
import { CImageProps, useImage } from "@chakra-ui/c-image"
311
import { SNAO } from "@chakra-ui/vue-utils"
4-
import { CAvatarName } from './c-avatar-name';
5-
import { CDefaultAvatarIcon } from './c-default-avatar-icon';
6-
import { chakra, ComponentWithProps, DeepPartial } from '@chakra-ui/vue-system';
7-
import { useAvatarContext } from './c-avatar';
12+
import { CAvatarName } from "./c-avatar-name"
13+
import { CDefaultAvatarIcon } from "./c-default-avatar-icon"
14+
import { chakra, ComponentWithProps, DeepPartial } from "@chakra-ui/vue-system"
15+
import { useAvatarContext } from "./c-avatar"
816

917
export interface CAvatarImageProps extends CImageProps {
1018
initials?: string
@@ -17,23 +25,23 @@ export const CAvatarImage = defineComponent({
1725
name: "CAvatarImage",
1826
props: {
1927
src: {
20-
type: String as PropType<CAvatarImageProps['src']>,
28+
type: String as PropType<CAvatarImageProps["src"]>,
2129
default: "",
2230
},
2331
srcSet: {
24-
type: String as PropType<CAvatarImageProps['src']>,
32+
type: String as PropType<CAvatarImageProps["src"]>,
2533
default: "",
2634
},
2735
name: {
28-
type: String as PropType<CAvatarImageProps['name']>,
36+
type: String as PropType<CAvatarImageProps["name"]>,
2937
default: "",
3038
},
31-
initials: String as PropType<CAvatarImageProps['initials']>,
32-
iconLabel: String as PropType<CAvatarImageProps['iconLabel']>,
39+
initials: String as PropType<CAvatarImageProps["initials"]>,
40+
iconLabel: String as PropType<CAvatarImageProps["iconLabel"]>,
3341
loading: String as PropType<CAvatarImageProps["loading"]>,
34-
borderRadius: SNAO as PropType<CAvatarImageProps['borderRadius']>,
35-
ignoreFallback: Boolean as PropType<CAvatarImageProps['ignoreFallback']>,
36-
referrerPolicy: SNAO as PropType<CAvatarImageProps['referrerPolicy']>,
42+
borderRadius: SNAO as PropType<CAvatarImageProps["borderRadius"]>,
43+
ignoreFallback: Boolean as PropType<CAvatarImageProps["ignoreFallback"]>,
44+
referrerPolicy: SNAO as PropType<CAvatarImageProps["referrerPolicy"]>,
3745
},
3846
emits: ["load", "error"],
3947
setup(props, { slots, emit, attrs }) {
@@ -67,14 +75,10 @@ export const CAvatarImage = defineComponent({
6775
})
6876

6977
return () => {
70-
7178
const showFallback = !props.src || !hasLoaded.value
7279
if (showFallback) {
7380
return props.name ? (
74-
<CAvatarName {...attrs}
75-
name={props.name}
76-
hidden={hasLoaded.value}
77-
/>
81+
<CAvatarName {...attrs} name={props.name} hidden={hasLoaded.value} />
7882
) : (
7983
<Icon.value {...attrs} />
8084
)
@@ -95,11 +99,11 @@ export const CAvatarImage = defineComponent({
9599
width: "100%",
96100
height: "100%",
97101
objectFit: "cover",
98-
borderRadius: props.borderRadius
102+
borderRadius: props.borderRadius,
99103
}}
100104
/>
101105
</>
102106
)
103107
}
104-
}
108+
},
105109
})

‎packages/c-avatar/src/c-avatar-name.tsx

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,46 @@
1-
import { chakra, ComponentWithProps, DeepPartial, HTMLChakraProps } from '@chakra-ui/vue-system';
2-
import { defineComponent, PropType, h, Fragment } from 'vue';
3-
import { AvatarOptions, useAvatarStyles } from './c-avatar';
4-
import { initials } from './utils';
5-
6-
export interface CAvatarNameProps extends HTMLChakraProps<"div">, Pick<AvatarOptions, "name" | "initials"> { }
1+
import {
2+
chakra,
3+
ComponentWithProps,
4+
DeepPartial,
5+
HTMLChakraProps,
6+
} from "@chakra-ui/vue-system"
7+
import { defineComponent, PropType, h, Fragment } from "vue"
8+
import { AvatarOptions, useAvatarStyles } from "./c-avatar"
9+
import { initials } from "./utils"
710

11+
export interface CAvatarNameProps
12+
extends HTMLChakraProps<"div">,
13+
Pick<AvatarOptions, "name" | "initials"> {}
814

915
/**
1016
* The avatar name container
1117
*/
12-
export const CAvatarName: ComponentWithProps<DeepPartial<CAvatarNameProps>> = defineComponent((props: CAvatarNameProps, { attrs }) => {
13-
const styles = useAvatarStyles()
18+
export const CAvatarName: ComponentWithProps<DeepPartial<CAvatarNameProps>> =
19+
defineComponent((props: CAvatarNameProps, { attrs }) => {
20+
const styles = useAvatarStyles()
1421

15-
return () => (
16-
<chakra.div role="img" aria-label={props.name!} {...attrs} __css={styles.value.label}>
17-
{initials(props.name!)}
18-
</chakra.div>
19-
)
20-
})
22+
return () => (
23+
<chakra.div
24+
role="img"
25+
aria-label={props.name!}
26+
{...attrs}
27+
__css={styles.value.label}
28+
>
29+
{initials(props.name!)}
30+
</chakra.div>
31+
)
32+
})
2133

2234
// @ts-ignore "name" property not typed
2335
CAvatarName.name = "CAvatarName"
2436
// @ts-ignore "props" property not typed
2537
CAvatarName.props = {
2638
name: {
27-
type: String as PropType<AvatarOptions['name']>,
28-
default: ""
39+
type: String as PropType<AvatarOptions["name"]>,
40+
default: "",
2941
},
3042
initials: {
31-
type: String as PropType<AvatarOptions['initials']>,
32-
default: ""
33-
}
34-
}
43+
type: String as PropType<AvatarOptions["initials"]>,
44+
default: "",
45+
},
46+
}

0 commit comments

Comments
 (0)