Skip to content

Commit 62fee2e

Browse files
jd-solankijd-solanki
committed
fix(select): unable to select an item
1 parent df2e904 commit 62fee2e

File tree

8 files changed

+34
-33
lines changed

8 files changed

+34
-33
lines changed

‎packages/anu-vue/src/components/list-item/AListItem.vue

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,11 @@ const { styles, classes } = getLayerClasses(
4444
: '',
4545
]"
4646
>
47-
<slot
48-
:item="props"
49-
:attrs="$attrs"
50-
>
47+
<slot :item="props">
5148
<!-- 👉 Slot: prepend -->
5249
<slot
5350
name="prepend"
5451
:item="props"
55-
:attrs="$attrs"
5652
>
5753
<i
5854
v-if="props.icon && !props.iconAppend"
@@ -70,7 +66,6 @@ const { styles, classes } = getLayerClasses(
7066
<slot
7167
name="content"
7268
:item="props"
73-
:attrs="$attrs"
7469
>
7570
<ATypography
7671
class="flex-grow"
@@ -83,7 +78,6 @@ const { styles, classes } = getLayerClasses(
8378
<slot
8479
name="append"
8580
:item="props"
86-
:attrs="$attrs"
8781
>
8882
<i
8983
v-if="props.icon && props.iconAppend"

‎packages/anu-vue/src/components/list-item/meta.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,31 +63,27 @@ export const aListItemSlots = {
6363
*/
6464
default: (_: {
6565
item: AListItemProps
66-
attrs: Record<string, unknown>
6766
}) => null as any,
6867

6968
/**
7069
* Prepend custom content to the list item
7170
*/
7271
prepend: (_: {
7372
item: AListItemProps
74-
attrs: Record<string, unknown>
7573
}) => null as any,
7674

7775
/**
7876
* Render custom content instead of `ATypography` preserving `prepend` and `append` slot usage
7977
*/
8078
content: (_: {
8179
item: AListItemProps
82-
attrs: Record<string, unknown>
8380
}) => null as any,
8481

8582
/**
8683
* Append custom content to the list item
8784
*/
8885
append: (_: {
8986
item: AListItemProps
90-
attrs: Record<string, unknown>
9187
}) => null as any,
9288
} as const
9389

‎packages/anu-vue/src/components/list/AList.vue

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,17 @@ const { options, select: selectListItem, value } = useSelection({
2020
2121
// const isActive = computed(() => options.value[itemIndex].isSelected)
2222
function handleListItemClick(item: AListPropItems[number]) {
23-
console.log('object', item, props['onClick:item'])
24-
selectListItem(extractItemValueFromItemOption(item))
25-
emit('update:modelValue', value.value)
23+
const _val = props.emitObject ? item : extractItemValueFromItemOption(item)
24+
selectListItem(_val)
25+
emit('update:modelValue', _val)
2626
27-
// ℹ️ This even is not triggered because we use accepting `onClick:item` as a prop
28-
// emit('click:item', { value: value.value })
27+
/*
28+
ℹ️ This even is not triggered because we use accepting `onClick:item` as a prop
29+
Hence we will trigger that prop instead of emitting this event
30+
*/
31+
props['onClick:item']?.(_val)
32+
33+
// emit('click:item', { value: _val })
2934
}
3035
</script>
3136

@@ -52,10 +57,7 @@ function handleListItemClick(item: AListPropItems[number]) {
5257
:value="props.modelValue !== undefined ? options[index] : undefined"
5358
v-on="{
5459
click: props['onClick:item'] || (props.modelValue !== undefined)
55-
? () => {
56-
console.log('cliked');
57-
handleListItemClick(item)
58-
}
60+
? () => { handleListItemClick(item) }
5961
: null,
6062
}"
6163
>

‎packages/anu-vue/src/components/list/meta.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ export const aListProps = {
3131
// ℹ️ Workaround for checking if event is present on component instance: https://github.com/vuejs/core/issues/5220#issuecomment-1007488240
3232
'onClick:item': Function as PropType<(item: AListPropItems[number]) => void>,
3333

34+
/**
35+
* Emit whole object when item is select instead of `item.value`
36+
*/
37+
'emitObject': Boolean,
38+
3439
// ℹ️ Below is list item props that will be passed to each list item
3540
avatarAppend,
3641
iconAppend,

‎packages/anu-vue/src/components/select/ASelect.vue

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ACard, AList } from '@/components'
66
import { ABaseInput, aBaseInputProps } from '@/components/base-input'
77
import { AFloating, sameWidthFloatingUIMiddleware } from '@/components/floating'
88
import type { AListPropItems } from '@/components/list'
9+
import { extractItemValueFromItemOption } from '@/composables/useSelection'
910
import { isObject } from '@/utils/helpers'
1011
1112
export interface ObjectOption { label: string; value: string | number }
@@ -51,18 +52,15 @@ function handleInputClick() {
5152
}
5253
}
5354
54-
function extractItemValueFromItemOption(item: AListPropItems[number]) {
55-
return isObject(item) ? (item.value || item) : item
56-
}
57-
5855
// 👉 Options
5956
function handleOptionClick(item: AListPropItems[number]) {
60-
const _val = extractItemValueFromItemOption
61-
const valueToEmit = props.emitObject ? item : _val
57+
const valueToEmit = props.emitObject ? item : extractItemValueFromItemOption(item)
58+
6259
emit('change', valueToEmit)
6360
emit('input', valueToEmit)
6461
emit('update:modelValue', valueToEmit)
6562
}
63+
6664
function closeOptions(event: MouseEvent) {
6765
if (event.target !== refFloating.value)
6866
isOptionsVisible.value = false
@@ -141,6 +139,7 @@ function middleware() {
141139
<AList
142140
:items="options"
143141
:model-value="props.modelValue"
142+
:emit-object="props.emitObject"
144143
class="a-select-options-list"
145144
:class="props.listClasses"
146145
@click:item="(item) => handleOptionClick(item)"
@@ -155,7 +154,6 @@ function middleware() {
155154
v-bind="{
156155
...slotProps,
157156
handleOptionClick,
158-
attrs: $attrs,
159157
}"
160158
/>
161159
</template>

‎packages/anu-vue/src/components/select/meta.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ export const aSelectProps = {
1414
type: Array as PropType<AListProps['items']>,
1515
default: () => [],
1616
},
17+
18+
/**
19+
* Emit whole object when item is select instead of `item.value`
20+
*/
1721
emitObject: Boolean,
1822

1923
// ℹ️ If we want any type need to set `propName: { type: null }`. Using `propName: null` will omit (disable) the prop.
@@ -33,7 +37,7 @@ export const aSelectListSlots = {
3337
...prefixObjectKeys(aSelectListRestSlots, aSelectListSlotsPrefix),
3438

3539
// ℹ️ We don't want to rename the default slot and we are passing $attrs to it
36-
default: { ...aSelectListDefaultSlot, attrs: Object as any },
40+
default: aSelectListDefaultSlot,
3741
}
3842

3943
const aSelectListSlotsWithPrefixMeta = {

‎packages/anu-vue/src/composables/useSelection.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export function useSelection<const Item, Multi extends boolean, InitialValue ext
8383
}
8484
}
8585

86-
export function calculateSelectionItems(items: MaybeRefOrGetter<unknown[]>) {
86+
export function calculateSelectionItems<T>(items: MaybeRefOrGetter<T[]>) {
8787
return computed(() => {
8888
const _items = toRef(items)
8989

@@ -93,13 +93,15 @@ export function calculateSelectionItems(items: MaybeRefOrGetter<unknown[]>) {
9393
const firstItem = _items.value[0]
9494
if (isObject(firstItem)) {
9595
if ('value' in firstItem)
96-
return _items.value.map(item => (item as { value: unknown }).value)
96+
return _items.value.map(item => (item as { value: T }).value)
9797
}
9898

9999
return _items.value
100100
})
101101
}
102102

103-
export function extractItemValueFromItemOption(item: unknown) {
104-
return isObject(item) ? (item.value || item) : item
103+
export function extractItemValueFromItemOption<T>(item: T): T extends { value: infer V } ? V : T {
104+
return isObject(item)
105+
? ('value' in item ? item.value : item)
106+
: item as any
105107
}

‎packages/anu-vue/src/utils/helpers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function isEmptyArray(arr: unknown): boolean {
2020
}
2121

2222
// 👉 IsObject
23-
export function isObject(obj: unknown): obj is Record<string, unknown> {
23+
export function isObject(obj: unknown): obj is object {
2424
return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
2525
}
2626

0 commit comments

Comments
 (0)