Skip to content

Commit

Permalink
feat(list): added few convenient props for passing them to list item
Browse files Browse the repository at this point in the history
  • Loading branch information
jd-solanki committed Feb 18, 2023
1 parent a30c4f1 commit 4f7c587
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 8 deletions.
3 changes: 3 additions & 0 deletions packages/anu-vue/src/components/list/AList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ const handleListItemClick = (item: ListPropItems[number]) => {
v-bind="typeof item === 'string' ? {} : item"
:avatar-append="props.avatarAppend"
:icon-append="props.iconAppend"
:color="props.color"
:variant="props.variant"
:states="props.states"
:is-active="options[index].isSelected as unknown as boolean"
:value="props.modelValue !== undefined ? options[index] : undefined"
v-on="{
Expand Down
22 changes: 14 additions & 8 deletions packages/anu-vue/src/components/list/props.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import type { ExtractPropTypes, PropType } from 'vue'
import type { ListItemProps } from '@/components/list-item'
import { spacing } from '@/composables/useProps'
import { listItemProps } from '@/components/list-item'

export type ListPropItems = (ListItemProps | string | number)[]

// List item props
const { avatarAppend, iconAppend, color, variant, states } = listItemProps

export const listProps = {
/**
* Items to render in list
Expand All @@ -23,21 +26,24 @@ export const listProps = {
*/
'modelValue': null,

// 鈩癸笍 Workaround for checking if event is present on component instance: https://github.com/vuejs/core/issues/5220#issuecomment-1007488240
'onClick:item': Function,

// 鈩癸笍 Below is list item props that will be passed to each list item

/**
* By default when icon props are used icon rendered at start. Use `iconAppend` to render icon at end.
*/
'iconAppend': Boolean,
iconAppend,

/**
* By default when avatar props are used avatar is added at start. Use `avatarAppend` to render avatar at end.
*/
'avatarAppend': Boolean,

// 鈩癸笍 Workaround for checking if event is present on component instance: https://github.com/vuejs/core/issues/5220#issuecomment-1007488240

'onClick:item': Function,
avatarAppend,

'spacing': spacing,
color,
variant,
states,
}

export type ListProps = ExtractPropTypes<typeof listProps>

0 comments on commit 4f7c587

Please sign in to comment.